Commit Graph

287 Commits

Author SHA1 Message Date
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
Shivam Mishra
50b2ca014e feat: UI for unsupported message (#8660)
Display an unsupported message in UI when handling unsupported messages from channels like facebook, Instagram etc.

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
2024-01-09 21:53:58 -08:00
Nithin David Thomas
f002870c6a feat: Super admin design improvements (#8517)
- Revamp the super admin design
- Introduce a new settings page for support and billing settings
- Move the access tokens into users, agent bots and platform app show pages


Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2023-12-08 19:40:35 -08:00
Sojan Jose
7380f0e7ce chore: Making OpenAI label suggestions optional (#8374)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2023-11-17 19:54:15 -08:00