# Pull Request Template
## Description
This PR introduces a `CustomTeleport` component that wraps Vue's
Teleport to preserve directionality context (ltr / rtl) when teleporting
content outside the app’s root container.
### Problem
Currently, the app sets the text direction (`[dir="ltr"]` or
`[dir="rtl"]`) on a container `div` inside `<body>`, not on `<body>`
itself. When content is teleported directly into `body`, it no longer
inherits the correct direction context. As a result, direction-aware
utility classes like `ltr:pl-2`, `rtl:ml-1`, etc., break because CSS
selectors like `[dir="ltr"] .ltr\:pl-2` no longer match. Identified this
issue when working on this
[PR](https://github.com/chatwoot/chatwoot/pull/11382)
### Solution
The `CustomTeleport` component automatically applies the correct `[dir]`
attribute (`ltr` or `rtl`) on the teleported content's wrapper based on
the current `isRTL` setting from the store. This ensures that
direction-specific Tailwind utility classes continue to work as
expected, even when the content is rendered outside the app root.
## 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 <pranavrajs@gmail.com>
# Pull Request Template
## Description
This PR uses `useScrollLock` from `VueUse` to lock scrolling on the chat
list panel when the context menu is open.
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
### Loom video
https://www.loom.com/share/68a25af2c1b149f8bd06bdbaafb4d82d?sid=0984fde6-ade2-405a-afc9-6d8f99480874
## 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
This pull request includes significant changes to the filtering logic
for conversations in the frontend, here's a summary of the changes
This includes adding a `matchesFilters` method that evaluates a
conversation against the applied filters. It does so by first evaluating
all the conditions, and later converting the results into a JSONLogic
object that can be evaluated according to Postgres operator precedence
### Alignment Specs
To ensure the frontend and backend implementations always align, we've
added tests on both sides with same cases, for anyone fixing any
regressions found in the frontend implementation, they need to ensure
the existing tests always pass.
Test Case | JavaScript Spec | Ruby Spec | Match?
-- | -- | -- | --
**A AND B OR C** | Present | Present | Yes
Matches when all conditions are true | Present | Present | Yes
Matches when first condition is false but third is true | Present |
Present | Yes
Matches when first and second conditions are false but third is true |
Present | Present | Yes
Does not match when all conditions are false | Present | Present | Yes
**A OR B AND C** | Present | Present | Yes
Matches when first condition is true | Present | Present | Yes
Matches when second and third conditions are true | Present | Present |
Yes
**A AND B OR C AND D** | Present | Present | Yes
Matches when first two conditions are true | Present | Present | Yes
Matches when last two conditions are true | Present | Present | Yes
**Mixed Operators (A AND (B OR C) AND D)** | Present | Present | Yes
Matches when all conditions in the chain are true | Present | Present |
Yes
Does not match when the last condition is false | Present | Present |
Yes
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
# Pull Request Template
## Description
This PR fixes the issue where the saved `order_by` value for the
conversation list is not being applied. The feature was originally added
in PR https://github.com/chatwoot/chatwoot/pull/8237 but broke after
merging the Vue 3 migration PR
https://github.com/chatwoot/chatwoot/pull/10047
Fixes
https://linear.app/chatwoot/issue/CW-4110/not-using-the-saved-sort-order-by-option-from-ui-settings
**Cause of the Issue:**
The previous implementation checked `orderBy` against the keys of the
sorting constants instead of their values. Since `orderBy` stores a
sorting value, this caused the condition to fail, leading to fallback to
the default sorting option.
**Solution:**
The fix ensures that `orderBy` is validated against the values of the
sorting constants rather than the keys. This correctly applies the saved
sorting preference, while still falling back to the default if needed.
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Loom video**
https://www.loom.com/share/ebe8a4d3f1c041c6862334dc3b6d43a3?sid=5167feb7-eb4a-4f2c-8211-662830ba946c
## 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
# Pull Request Template
## Description
The PR includes usability feedback fixes for the conversation card
context menu. A "Mark as Read" option has been added after "Mark as
Unread" to prevent misclicks due to shifting menu positions.
Additionally, a separator line has been introduced for better grouping
and clarity
#### **Orders**
<img width="210" alt="image"
src="https://github.com/user-attachments/assets/d7c04356-7cfb-4f43-ac55-beb4167f91e9"
/>
<img width="210" alt="image"
src="https://github.com/user-attachments/assets/593acd58-39cf-4b25-b119-03b89cb3528c"
/>
**Fixes** https://linear.app/chatwoot/issue/CW-4088/usability-feedback
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
### **Loom video**
https://www.loom.com/share/59f8ad3bf4054b299bfcffc0ba24eca1?sid=98fbb67d-c3e9-4fa4-9b04-2a7cb3bf8568
## 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
- Increase the sidebar and chatlist width on screens bigger than 2xl
- Fix background of the copilot sidebar
- Increase the breakpoint for hiding chatlist from 1024 to 1200
# Pull Request Template
## Description
This PR fixes the issue where the bulk action inbox assignable agent
list was not showing.
The issue started after merging this [feat: Vite+Vue 3
PR](https://github.com/chatwoot/chatwoot/pull/10047 ).
**Cause of issue**
Previously, `selectedInboxes` was accessed from the `ChatList.vue`
component. However, after moving the bulk action logic from mixin to the
`useBulkActions.js` composable, we were still referencing
`selectedInboxes` from the `ChatList.vue` component, even though it was
being set in the composable. This caused the API failed to load the
assignable agent list.
Ref:https://github.com/chatwoot/chatwoot/blob/develop/app/javascript/dashboard/composables/chatlist/useBulkActions.js#L18
**Solution**
Removed the usage of `selectedInboxes` from the `ChatList.vue` component
ref and using `selectedInboxes` ref directly from the
`useBulkActions.js`
Fixes
https://linear.app/chatwoot/issue/CW-3696/bulk-action-agent-list-is-not-loading
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Loom video**
https://www.loom.com/share/21e3835b3db04e34b94531ec128b586b?sid=beda60f0-1c8e-457b-b617-379d4af91873
## 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
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>
These fixes are all auto generated and can be merged directly
Fixes the following issues
1. Event used on components should be hypenated
2. Attribute orders in components
3. Use `unmounted` instead of `destroyed`
4. Add explicit `emits` declarations for components, autofixed [using
this
script](https://gist.github.com/scmmishra/6f549109b96400006bb69bbde392eddf)
We ignore the top level v-if for now, we will fix it later
This PR has the following changes
1. Fix tab styles issue caused by adding an additional wrapper for
getting an element ref on `ChatTypeTabs.vue`
2. Refactor `useKeyboardEvents` composable to not require an element
ref. It will use a local abort controller to abort any listener
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
# Pull Request Template
## Description
This PR will replace the usage of `alertMixin` from the code base with
the `useAlert` composable.
Fixes
https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert
## Type of change
- [x] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
## How Has This Been Tested?
Please refer this issue description
https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert
## 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
- [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
---------
Co-authored-by: Sojan Jose <sojan@pepalo.com>
# Pull Request Template
## Description
This PR will replace the usage of `timeMixin` with `timeHelper`
Fixes
https://linear.app/chatwoot/issue/CW-3451/move-time-mixin-to-a-helper
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
Please refer to this issue description.
https://linear.app/chatwoot/issue/CW-3451/move-time-mixin-to-a-helper
## 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
---------
Co-authored-by: Sojan Jose <sojan@pepalo.com>
# Pull Request Template
## Description
Currently, when a user navigates to a chat and attempts to access the
custom snooze modal, it is not visible, making it unable to set custom
snooze options. With this fix, the custom snooze modal will correctly
display even when a chat is open in mobile view.
**Cause of this issue**
The `<custom-snooze-modal/>` component is added to the `<chat-list/>`
component. To accommodate small screen views, we are using the expanded
view. However, if we open a chat and select the custom snooze option
from the chat header in the message view, the `<custom-snooze-modal/>`
component is hidden in the `<chat-list/>` component.
**Solution**
So, I moved the `<custom-snooze-modal/>` to the wrapper component
`<conversation-view/>` so we can use in all cases like,
1. Right-click to custom snooze
2. CMD bar custom snooze
3. Small screen custom snooze
# Replace the deprecated `eventBus` with mitt.js
## Description
Since eventBus and it's respective methods are deprecated and removed
from all future releases of vue, this was blocking us from migrating.
This PR replaces eventBus with
[mitt](https://github.com/developit/mitt). I have created a wrapper
mitt.js to simulate the same old event names so it's backwards
compatible, without making a lot of changes.
Fixes # (issue)
## Type of change
Please delete options that are not relevant.
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update
## How Has This Been Tested?
1. Made sure all the places we're listening to bus events are working as
expected.
2. Respective specsf or the events from mitt.
## 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
- [x] 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
- [x] Any dependent changes have been merged and published in downstream
modules
