Commit Graph

304 Commits

Author SHA1 Message Date
Sivin Varghese
2a69b37958
chore: Update theme colors and add new Inter variable fonts (#13347)
# Pull Request Template

## Description

This PR includes the following updates:

1. Updated the design system color tokens by introducing new tokens for
surfaces, overlays, buttons, labels, and cards, along with refinements
to existing shades.
2. Refreshed both light and dark themes with adjusted background,
border, and solid colors.
3. Replaced static Inter font files with the Inter variable font
(including italic), supporting weights from 100–900.
4. Added custom font weights (420, 440, 460, 520) along with custom
typography classes to enable more fine-grained and consistent typography
control.


## Type of change

- [x] New feature (non-breaking change which adds functionality)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
2026-01-28 14:36:04 -08:00
Pranav
747d451387
chore: Improve signup flow, reduce the number of inputs (#13350)
- Improved design for the Chatwoot sign up page
2026-01-22 18:47:42 -08:00
Shivam Mishra
6a482926b4
feat: new Captain Editor (#13235)
Co-authored-by: Aakash Bakhle <48802744+aakashb95@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: aakashb95 <aakashbakhle@gmail.com>
2026-01-21 13:39:07 +05:30
Sivin Varghese
86cb4fd809
chore: Improve layout styles (#12025)
# Pull Request Template

## Description

This PR fixes the layout overflow scroll issue and removes unused CSS.
It also optimizes the display of the Sidebar, Copilot Panel, and
Conversation Panel in the mobile view.
Additionally, it resolves a runtime console warning.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screencast


https://github.com/user-attachments/assets/7e8885fa-6174-4740-80f1-bb1cec6517fc




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2025-07-30 13:49:27 -07:00
Sivin Varghese
24ea968b00
chore: Remove older UI (#11720) 2025-07-01 09:43:44 +05:30
Sivin Varghese
b683973e79
fix: Resolve styling issues in multiselect (#11728) 2025-06-19 21:28:12 +05:30
Sivin Varghese
b1898e019b
fix: Design issues with profile settings style (#11630)
# Pull Request Template

## Description

This PR fixes styles issues with the select in profile settings and
toggles the Hotkeys button.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots

**Select**
| Before  | After (Dark Mode) | After (Light Mode) |
| ------------- | ------------- | ------------- |
| <img width="162" alt="image"
src="https://github.com/user-attachments/assets/6d4ebd45-d233-413e-aca8-7f4db5d6c8a2"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/62c2ca85-479f-4252-a4fc-ffd5a570cff0"
/> | <img width="162" alt="image"
src="https://github.com/user-attachments/assets/7c9780ea-8ab6-429e-82e3-6fb554141bc0"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/726d7a0a-bfbc-4bdc-aedc-a874146230d8"
/> | <img width="162" alt="image"
src="https://github.com/user-attachments/assets/f3022b5f-6ae2-48d6-a2c9-9961f4295b81"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/fa6515c1-35df-4f6f-9096-e7893bffe683"
/> |

**Toggle Hotkeys**
| Before  | After (Dark Mode) | After (Light Mode) |
| ------------- | ------------- | ------------- |
| <img width="783" alt="image"
src="https://github.com/user-attachments/assets/5628fa6a-9692-44f4-bc45-6e5de44588c7"
/> | <img width="783" alt="image"
src="https://github.com/user-attachments/assets/14529e80-fd9c-46cd-9ad8-aab041781238"
/> | <img width="783" alt="image"
src="https://github.com/user-attachments/assets/dfe2cbec-8d05-443d-89a2-0e674fffa518"
/> |

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
2025-05-29 12:07:05 -06:00
Pranav
23a804512a
feat: Update the UI to support the change for Copilot as a universal copilot (#11618)
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2025-05-29 12:35:10 +05:30
Sivin Varghese
2d14f27d5b
chore: Update date range picker with new theme colors (#11267) 2025-04-09 16:03:53 +05:30
Sivin Varghese
f20a18b03f
chore: Remove old buttons from Vue2 design (#11159) 2025-03-31 17:51:38 -07:00
Sivin Varghese
3a693947b5
feat: Add RTL Support to Widget (#11022)
This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code.

Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget

https://github.com/chatwoot/chatwoot/issues/9791

Other PR: https://github.com/chatwoot/chatwoot/pull/11016
2025-03-21 09:39:03 -07:00
Sivin Varghese
c89a2cd672
feat: Update auth screens (#11108)
# Pull Request Template

## Description

This PR includes style updates for auth screens

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
2025-03-19 15:19:32 +05:30
Sivin Varghese
064ab0a7a2
fix: Update audio player input styles (#11106)
# Pull Request Template

## Description

This PR fixes styling inconsistencies by excluding specific more input
types (range, color, image, hidden) from receiving the default text
input styles.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots

**Before**
<img width="464" alt="image"
src="https://github.com/user-attachments/assets/6c629600-67d4-41cd-a244-bb45d222d0ca"
/>
<img width="943" alt="image"
src="https://github.com/user-attachments/assets/9037cf52-1791-4680-9b9e-8647c14e2800"
/>



After
<img width="464" alt="image"
src="https://github.com/user-attachments/assets/bf745e33-c58a-4584-8283-855c5ea8fd4e"
/>
<img width="943" alt="image"
src="https://github.com/user-attachments/assets/200e36ee-ab26-48a8-bda4-b69d9ed143f8"
/>




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
2025-03-18 20:16:37 -07:00
Sivin Varghese
8066b36ebf
chore: Update styles in settings pages (#11070)
---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2025-03-18 14:40:02 -07:00
Sivin Varghese
9d49b69f2e
feat: Add support for feature spotlight components (#11012) 2025-03-18 13:17:42 -07:00
Sivin Varghese
557df5c5c9
fix: Wrong copy with teams multi-select dropdown (#11075) 2025-03-13 10:34:20 +05:30
Sivin Varghese
2556de1f38
feat: Support bigger font size in dashboard (#10974)
# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-4091/accessibility-improvement-support-bigger-font-size-for-the-dashboard

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### **Loom video**

https://www.loom.com/share/1ab781859fa748a5ad54aacbacd127b4?sid=a7dd9164-a6de-462f-bff7-1b25e9c55b4f

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
2025-02-27 12:10:33 +05:30
Sojan Jose
19cfd4be4c
chore: Clean up the feature presentation in super admin (#10949)
- improve styling of the feature toggle displayed in super admin

<img width="1540" alt="Screenshot 2025-02-21 at 4 47 58 PM"
src="https://github.com/user-attachments/assets/c111ff0d-c2ce-4609-832b-0ea631c97471"
/>

<img width="1451" alt="Screenshot 2025-02-21 at 4 48 11 PM"
src="https://github.com/user-attachments/assets/fe5df4ae-984b-4f9d-baba-9555935fbd55"
/>

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
2025-02-21 17:01:36 -08:00
Shivam Mishra
d997734837
revert: Next bubble improvements (#10795) 2025-01-29 20:04:45 -08:00
Sivin Varghese
2c1a8e59f5
chore: Next bubble improvements (#10759) 2025-01-29 22:56:08 +05:30
Sivin Varghese
88f3b4de48
chore(v4): Update colors (#10700) 2025-01-16 15:27:23 +05:30
Shivam Mishra
7fd8b4d03a
feat: update colors for v4 (#10660)
Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
2025-01-15 17:13:03 +05:30
Shivam Mishra
eef70b9bd7
feat: integrate new bubbles (#10550)
To test this, set the `useNextBubble` value to `true` in the
localstorage. Here's a quick command to run in the console

```js
localStorage.setItem('useNextBubble', true)
```

```js
localStorage.setItem('useNextBubble', false)
```

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
2024-12-19 18:41:55 +05:30
Shivam Mishra
19ff5bdd5e
feat: Add new message bubbles (#10481)
---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
2024-12-12 17:42:22 -08:00
Sivin Varghese
757fac79d1
chore: Update chat list header UI (#10573) 2024-12-12 10:12:07 +05:30
Pranav
10a0333980
feat(ee): Add copilot integration (v1) to the conversation sidebar (#10566) 2024-12-10 15:36:48 -08:00
Pranav
35702457ed
feat: Update design for report pages (#10506)
<img width="1440" alt="Screenshot 2024-11-26 at 8 38 57 PM"
src="https://github.com/user-attachments/assets/f752157c-6134-42cb-8211-ce636ea9e4d6">
<img width="1439" alt="Screenshot 2024-11-26 at 8 40 47 PM"
src="https://github.com/user-attachments/assets/580b1f61-68bc-489b-9081-b0aeb402f31d">

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2024-11-27 18:10:15 +08:00
Shivam Mishra
aaa328be87
feat: Add dropdown component (#10358)
This PR adds dropdown primitives to help compose custom dropdowns across the app. The following the sample usage

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
2024-11-18 17:29:27 -08:00
Shivam Mishra
2d35fa135b
feat: Update colors (#10365) 2024-10-29 22:20:37 -07:00
Shivam Mishra
6df2d76c1e
feat: new colors (#10352)
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
2024-10-28 14:27:08 +05:30
Shivam Mishra
6d3ecfe3c1
feat: Add new sidebar for Chatwoot V4 (#10291)
This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes

- Components in the `layouts-next` and `base-next` directories in `dashboard/components`
- Two generic components `Avatar` and `Icon`
- `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions.
- `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication.
- `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state.
- `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header)
- `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups.

----

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
2024-10-23 18:32:37 -07:00
Shivam Mishra
4e64097421
fix: solid colors (#10321)
Fix mismatch in CSS vars for `amber` and `blue` solid colors
2024-10-18 15:59:21 +05:30
Shivam Mishra
3a0fd9b777
feat: Add support for new colors (#10287)
This PR adds new colors based on the new design targeted for v4. 

Some usage guidelines

- All new colors are prefixed with `n` so to use solid, we use
`bg-n-solid-1`
- To use slate use `text-n-slate-12` it automatically toggles between
radix `slate` and `slateDark`
- The `weak` and `strong` colors are specifically used for borders
2024-10-14 21:13:51 -07:00
Shivam Mishra
42f6621afb
feat: Vite + vue 3 💚 (#10047)
Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-10-02 00:36:30 -07:00
Pranav
6694db093f
feat: Update the design for dashboard_apps (#9840)
This PR migrates the dashboard apps page to the new layout and includes
the following updates:

- Create a compact design for the back button
- Add a back button to the settings header
- Reduce letter-spacing on the description
- Fix mobile styles
- Migrate the layout of dashboard apps/index to new layouts


Note: I've moved all feature help URLs from features.yml to the frontend. This change prevents features.yml from becoming bloated due to frontend modifications.

---------

Co-authored-by: Sojan Jose <sojan@pepalo.com>
2024-07-25 16:26:00 -07:00
Pranav
8b1d98af52
feat: Update the design for integration page (#9825)
Combine integrations and applications page into one page. 

<img width="1182" alt="Screenshot 2024-07-23 at 3 30 51 PM"
src="https://github.com/user-attachments/assets/50920a6f-606f-44b3-b1e4-641046a14444">

Major changes:

- The app enabled?, active? checks are all moved to backend.
- The dashboard_apps integration is also now part of the apps.yml file.
- Updated the header design for the new settings pages.
- Merged the folders integrationapps and integrations. 
- Updated the copy to match the size of the card and provide clear
instruction.
- Only the list page is updated in this PR, rest of the pages are yet to
be migrated.


| Integration | Verified | 
| -- | -- |
| Dashboard Apps |  | 
| Dyte |  | 
| Slack |  | 
| Webhooks |  | 
| Dialogflow |  | 
| Google Translate |  | 
| OpenAI |  | 
| Linear |  |

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2024-07-24 16:35:40 -07:00
Shivam Mishra
4c1c856562
chore: Remove word spacing from p (#9353) 2024-05-06 18:27:56 -07:00
Muhsin Keloth
d88d0bdd80
feat: Add user profile avatar (#9298)
* feat: add avatar

* chore: add more colors

* chore: add helpers

* chore: build prettier issues

* chore: refactor shouldShowImage

* chore: code cleanup

* Update app/javascript/v3/components/Form/InitialsAvatar.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* chore: revire comments

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-04-26 16:02:10 +05:30
Muhsin Keloth
04ae38076f
feat: Add button component (#9276)
* feat: Add button component

* chore: code cleanup

* chore: code cleanup

* feat: update styles

* chore: cleanup button

* chore: review comments

* chore: code cleanup

* chore: review comments

* chore: fix spacing

* chore: remove unused code

* chore: remove custom click event

* feat: update props validation

* chore: review comments

* refactor: use trailingIcon as a boolean prop

* fix: build issues

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2024-04-25 14:21:23 +05:30
Muhsin Keloth
8957277e5d
feat: Add new colors (#9258) 2024-04-22 14:08:12 +05:30
Sivin Varghese
3b6ae772bf
feat: SLA report filter (#9218)
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2024-04-12 11:03:18 +05:30
Sivin Varghese
8fe3c91813
feat: Custom attribute sidebar list UX improvements (#9070)
---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2024-04-08 21:00:49 -07:00
Sivin Varghese
7ae09ce1bf
feat: Reports filter components (#9204)
* feat: Reports filter components

* Update FilterButton.vue

* Update FilterDropdownSearch.vue

* feat: Adds component level search

* Update FilterDropdownSearch.vue

* chore: Set max height

* feat: Add focus

* chore: Uses picoSearch package
2024-04-08 20:46:08 +10:00
Sivin Varghese
c51492c674
feat: SLA List Item component (#9135)
- Base settings list and list item components.
- SLA list item component.

Fixes: https://linear.app/chatwoot/issue/CW-3126/create-a-sla-list-item-component-with-the-new-design


Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
2024-03-21 19:30:11 +05:30
Sivin Varghese
9581264286
fix: Broken styles (#9046) 2024-03-01 13:06:33 +05:30
Sivin Varghese
351cc940ce
fix: Fix the button variant success color in dark mode (#9043) 2024-02-29 10:33:31 -08:00
Sivin Varghese
9c2147aced
fix: UI breakages (#9040)
- Fixes overflow of contact details in the contact side panel.
- Fixes line height issue in article header.
- Fixes overflow of category names in the article list.
- Fixes typing indicator alignment issues
2024-02-29 15:10:29 +05:30
Sivin Varghese
a92639e391
fix: Filter dropdown alignment issue in reports page (#9035)
* fix: Filter dropdown alignment issue in reports page

* fix: add hide class

* chore: Clean up

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2024-02-28 20:26:23 +05:30
Sivin Varghese
dafedddc1a
feat: Remove Foundation in favor of Tailwind (#8984)
* feat: Remove foundation

* chore: Minor fix

* Minor fix

* Update _forms.scss

* chore: More changes

* chore: Minor fix

* chore: Clean up

* fix: font-weight

* chore: More changes

* chore: Setting page

* chore: Editor fix

* chore: Reports page

* chore: More changes

* chore: Minor changes

* chore: More fixes

* chore: More changes

* chore: More changes

* chore: More changes

* chore: Minor fix

* chore: More changes

* chore: More changes

* chore: More changes

* chore: More changes

* chore: Clean up

* chore: Minor fix

* chore: Clean ups

* chore: Rename basic file

* chore: Remove unused files

* chore: Fix expanded input

* Fix campaign rendering

* chore: Clean up

* chore: More changes

* chore: Remove unused files

* fix: Overflow issue

* chore: Minor fix

* chore: Clean up

* chore: Minor fix

* chore: Remove unused files

* chore: Minor fix

* chore: Minor fix

* fix: autoprefixer start/end value has mixed support

* chore: Minor fix

* chore: Remove unused files

* chore: Minor fix

* chore: Minor fix

* chore: Minor fix

* Add responsive design to label settings

* fix inbox view

* chore: Minor fix

* w-60% to w-2/3

* chore: Fix team

* chore: Fix button

* w-[34%] to w-1/3

* chore: Fix border

* Add support mobile views in team page

* chore: fix snackbar

* chore: clean up

* chore: Clean up

* fix: loading state alignment

* fix: alert styles

* chore: Minor fix

* fix: spacing for agent bot row

* fix: layout

* fix: layout for SLA

* fix: checkbox

* fix: SLA checkbox spacing

* Update inbox settings pages

* fix macros listing page layout

* fix canned responses

* chore: Fix bot page

* chore: fix automation page

* chore: fix agents page

* chore: fix canned response editor

* chore: Fix settings table

* chore: fix settings layout

* chore: Minor fix

* fix: canned response table layou

* fix: layout for table header for webhooks

* fix: webhook row layout

* fix: dashboard app modal layout

* fix: add title to canned response truncated shortcode

* fix: dashboard apps row layuot

* fix: layouts hooks

* fix: body color

* fix: delete action color in portal locales

* fix: text color for campagin title

* fix: success button color

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2024-02-28 13:56:28 +05:30
Sivin Varghese
e67f8824d9
fix: Backdrop color for insert article modal in dark mode (#8711) 2024-01-16 18:36:43 +05:30