# Pull Request Template
## Description
Changed to make use of nullish coalescing operator to only short circuit
in cases when the `metric` variable is not zero. This change also begs
the question as to whether the `stringToFloat` test function should
exist - to me it seems interesting to have test code embedded into
production code for the frontend?
Fixes#10640
## 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?
Tested by opening the report overview page and reviewing that this shows
`---` for agents with no conversations assigned to them.
## 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
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules
---------
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This PR has fixes for the following issues
- Inconsistent spacing between meta and text in text bubble
- Activity bubble overflows for longer text (for now I have truncated
it, I'll work with @absurdiya on a better solution)
- Ugly lookinh gradient for expand button on email bubble
- Email bubble overflow issues and text rendering issues
- Alignment for error message
- Minute-wise grouping not working
- Link color should not be blue
- Use `gray-3` for bubble background instead of `gray-4`
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>
# Pull Request Template
## Description
This PR fixes the overflow issue with the chat list header title.
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Before**
<img width="484" alt="image"
src="https://github.com/user-attachments/assets/e46f6daf-e2f3-4f1c-ba33-00a932d7788f"
/>
**After**
<img width="484" alt="image"
src="https://github.com/user-attachments/assets/d45808aa-ebbd-47e4-be32-f643c22b363f"
/>
## 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 several changes to the `DropdownItem.vue` and `SidebarProfileMenu.vue` components to improve the handling of links.
Earlier we passed the link `/super_admin` to RouterLink directly, which would trigger validations internally and the dropdown item would not render in case of any errors. This PR fixes this by handling the native links appropriately
Fixes#10571
- 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
Added the possibility to mark as a single conversation in the API type
inbox. This allows the conversation builder to search for the last
conversation.
I thought about searching for the last conversation with created_at:
desc order, as is done in some channels... but I didn't change the way
the conversation is searched.
Fixes: #7726
Co-authored-by: Sojan Jose <sojan@pepalo.com>
For large accounts with huge volumes of messages, it can be very
wasteful to make the meta request so often. It also puts un-necessary
load on the DB bombarding it with so many requests. This PR fixes it by
throttling the requests to 5 seconds for all users with more than 1000
accessible chats.
### Why not cache this value in the backend?
Well, it's a bit tricky, since a user can have different permissions
over inboxes and can see different chats, maintaining a cache for each
of them is not effective, besides the requests will reach the server
anyway.
This PR resolves the issue with updating the profile picture in the profile settings.
**Cause of issue**
The issue can be reproduced with the old `ProfileAvatar.vue` component.
While the exact reason is unclear, it seems related to cases where the
file might be `null`.
**Solution**
Replaced the old `ProfileAvatar.vue` with `Avatar.vue` and tested it. It
works fine. I’ve attached a loom video below.
Fixes https://linear.app/chatwoot/issue/CW-3768/profile-picture-bug
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
This PR fixes a few UI issues with the sidebar
1. `z-index` issues with sidebar dropdowns
2. Move the event listener to the root of the dropdown container, it
allows more consistent behaviour of the trigger, earlier the click on
the trigger when the dropdown was open would cause the container to
re-render
3. Use `perserve-open` for the status switcher menu item in the profile
menu.
4. Use `sessionStorage` instead of `localStorage` to preserve sidebar
dropdown info. When opening the dashboard without directly going to a
specific route, any previous known item would get expanded even if it's
link was not active, this caused issues across tabs too, this fixes it.
5. Use `snakeCaseKeys` instead of `decamelize` we had two packages doing
the same thing
6. Update `vueuse` the new version is vue3 only
This PR adds three components along with stories
1. MultiSelect - This is used for filter values, allowing multiple values and folding of values where there are too many items
2. SingleSelect - This is used for filter values, allows selecting and toggling a single item
3. FilterSelect - This is used for operators and others, it allows icons and labels as well as toggling them using props. The v-model for this binds just the final value unlike the previous two components with bind the entire object.
---------
Co-authored-by: Pranav <pranavrajs@gmail.com>
### The problem
Writing in the text editor can be very frustrating, the reason is that
the editor had a debounced save method which would push the article to
the backend and update the current state. This however is a bad idea,
since the can take anywhere between 100-300ms depending on network
conditions.
While this would be in progress, the article is still being edited by
the user. So at the end of the network request, the state returned from
the backend and the current state in the editor is diverged. But since
the update happens anyway, the editor would prepend older context.
```
Time -->
User Action: [Edit 1] ---> [Edit 2] ---> [Edit 3]
Backend Save: Save Req (Edit 1) ----> Response (Edit 1)
Resulting Editor State: [Edit 3] + [Edit 1] (Outdated state prepended)
```
### The solution
The solution is to unbind the article from the backend state, ensuring
that the article editor is the source of truth and ignoring the
responses. This pull request does this by adding an asynchronous save
functionality. The changes include adding a new `saveArticleAsync` event
and ensuring that the local state is not updated unnecessarily during
asynchronous saves.
```
Time -->
User Action: [Edit 1] ---> [Edit 2] ---> [Edit 3]
Backend Save: Save Req (Edit 1) ----> Response (ignored)
Resulting Editor State: [Edit 3] (Consistent and up-to-date)
```
Added the following two debounced methods
These complementary debounce methods prevent unnecessary re-renders
while ensuring backend is in sync. `saveArticleAsync` preserves the
editor as the source of truth, while `saveArticle` manages periodic
state updates from the backend with a delay large enough to safely
assume that the user has stopped typing
Method | Delay | Behavior
-- | -- | --
`saveArticleAsync` | 400ms | Sends data to backend and ignores the
response
`saveArticle` | 2.5s | Sends data and updates local state with the
backend response
### How to test
1. Remove the following line
dc042f6ddc/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue (L64)
1. Update the latency here to 400 (P.S. the diff shows the latency to be
600, but that was added as a stop-gap solution)
dc042f6ddc/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue (L51)
1. Set the browser network latency to Slow 3G or 3G
1. Start writing on the editor, try fixing typos with backspace or
moving around with the cursor
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
This PR allows attributify for `variant`, `size` and `color` props. This allows using shorthands, instant of writing full props.
We also added a small computed method to ensure these does not show up
in the DOM and pollute it
---------
Co-authored-by: Pranav <pranav@chatwoot.com>
# Pull Request Template
## Description
This PR will fix reactivity issue with `<woot-tabs />` component.
**Cause of issue**
The `<woot-tabs />` component used an internal ref,
`internalActiveIndex` to track the `active` tab. However, it didn’t sync
with the `index` prop when updated by the parent, causing mismatched tab
selections.
**Solution**
The component now directly uses `props.index` to ensure it always
reflects the latest value from the parent. The unnecessary
`internalActiveIndex` ref has been removed. Changes to the active tab
emit a `change` event to update the parent.
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Loom video**
**Before**
https://www.loom.com/share/76eb32f1e7f7422f84055a102bf80951?sid=bc28c6ff-9640-4d3b-956c-99c1ec164971
**After**
https://www.loom.com/share/6bd8125ede5d43dc8fe115c3f1fb159b?sid=c376617a-94fb-4f71-8664-e0bd9e7af0b4
## 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
This pull request introduces a new `ChannelIcon` component and refactors the existing code to use this component, which simplifies the icon management for different channel types and providers.
This PR updates the background used in dropdown to match our design system. Previous PR failed to add this correctly.
---------
Co-authored-by: Pranav <pranav@chatwoot.com>
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>
This fix consists of translating the message when another user is typing on the other side.
---
Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
The last item in the sidebar top level group has an indicator specified,
the problem in our case is that the structure can be nested and have sub
groups. So selecting the last item correctly can be tricky.
Previous implementation relied on the using DOM queries to find the last
item from a flat list of children, it would trigger on a `watch`. This
was error-prone as well as non idiomatic. The new approach is CSS-only
and reduces the unnecessary compute required.
Codepen for reference: https://codepen.io/scmmishra/pen/yLmKNLW
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Ensures users are seamlessly directed to the first available menu item upon opening a group, improving UX by reducing unnecessary clicks. This change enhances navigation flow within groups.
Co-authored-by: Pranav <pranavrajs@gmail.com>
# 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>
Vue i18n has a new [linked message
syntax.](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#linked-messages)
When it encounters `@` it assumes that we're trying to use a linked
message. And tries to parse it as such, in any case, it breaks since the
syntax is not valid and the params are not present. So it causes an
error. This works on dev but on production the error is bubbled up to
the top and rendering breaks.
A lot of folks use Chatwoot with default locale set in the env, this
surfaced the issue for the languages for which the syntax was not
updated
Fixes: https://github.com/chatwoot/chatwoot/issues/10313
# Pull Request Template
## Description
This PR resolves the issue where the modal in the context menu
disappears when not being hovered over.
**Cause of issue.**
The problem occurred because the modal-related component was placed
inside `MessageContextMenu.vue`, and the parent wrapper was using the
classes `group-hover:visible invisible`. This caused the modal to only
appear when the message item, where the context menu was opened, was
hovered over.
**Solution**
To fix this, I removed the `group-hover:visible` invisible class from
the parent wrapper and moved it into the `woot-button` within the
`MessageContextMenu.vue` component. Additionally, I added a nested group
with the class group/context-menu, allowing the focus to remain on the
context menu itself.
Fixes
https://linear.app/chatwoot/issue/PR-1415/modal-in-the-context-menu-disappears-unless-hovered
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Loom video**
**Before**
https://www.loom.com/share/458f90708664493c86e909a56869d065?sid=0564a508-09a5-4e73-800b-8042140a22ba
**After**
https://www.loom.com/share/c119936d181d406d89468f9482ef6b81?sid=5cf3b1b4-6c66-4f8c-8f93-a62465a93b57
## 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 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
Fixes the following issues
- https://chatwoot-p3.sentry.io/issues/5966466083
- https://chatwoot-p3.sentry.io/issues/5966497518
- https://chatwoot-p3.sentry.io/issues/5966555379
For the first one, I am not sure if the fix is 100% correct, since I was
not able to reproduce, but I am confident it will work.
For both, 1st and 2nd issues, the problem came from the fact that we set
individual records to `undefined` when the intent was to remove it,
explicitly using delete fixes the issue.
### Whats up with the store changes?
Glad you asked, this comes down to Vue reactivity, previously Vue didn't
track undefined strictly, it just kinda ignored it, in Vue 3, the
reactivity changed significantly when they introduced ES6 proxies. The
Proxy tracks all property changes, including those set to undefined, so
properties remain enumerable.
So to delete a record, we actually have to the delete it using the
delete keyword, or replace the parent object with a new object splicing
the object to be deleted out.
I am assuming it worked earlier because VueX 3 reactivity was using
Object.defineProperty. Setting it to undefined might have "deleted" it
earlier
---------
Co-authored-by: Pranav <pranav@chatwoot.com>
We will use
[histoire](https://histoire.dev/guide/vue3/getting-started.html) for
component development. I've locked the version to 0.17.15 as it had
issues in the latest versions.
Run the following commands to start the development server.
```bash
# Start the development server
pnpm story:dev
# Build the assets to deploy it to website
pnpm story:build
# View the production version of the build
pnpm story:preview
```
This PR updates the sidebar component to use a native <a> tag for the Help Center URL component. It also updates the build pipeline to use the esbuild options minifyIdentifiers and keepNames set to true.
In the `DropdownList.vue` component, the `onSearch` function was not properly passing the search value to the parent component. This resulted in the `onSearch` event in parent components (such as `LinkIssue.vue`) receiving an undefined value instead of the actual search term.
f18ed01eb7/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue (L45-L52)
The issue was resolved by modifying the `onSearch` function in `DropdownList.vue` to correctly pass the search value to the `debouncedEmit` function:
When moving form using Gmail Legacy auth to using OAuth, we need the
email address that will be used to connect. This is because we need to
store this email address in the cache and reuse when we get the callback
to find the associated inbox.
However there are cases where the imap login might be
`support@company.com` and the email used to communicate will be
`contact@company.com` (Probably an alias) In that case, we need to send
the correct email address to Chatwoot when re-authenticating
At the moment, we used the inbox email. This PR adds a check that
defaults to to `imap_login` if that is available and imap is enabled
This PR also fixes an unrelated problem where the email inbox creation
flow was not working
---
Tested it, it is working correctly
On production on multiple instances it may happen that the UI is
rendered in correctly, with a lot of options in the sidebar not
available. On further investigation I found out that the feature flag
checks were disabling multiple of those, and also we could see many
correlated errors that pointed towards missing information.
So, there were two problems here
1. The `vuex-router-sync` was not very reliable in some cases
2. In `App.vue` the watch on `currentAccountId` didn't always trigger.
## Fix Tested on Staging
Basically tried to reload the page ~50 times with cache enabled,
disabled, throttling, navigating different pages.
https://www.loom.com/share/1bb27294aa364ac4acfb647780d6385a?sid=87e31330-8cb7-4ded-8616-5e95e2ae3516
<details><summary>
#### What I thought was the fix
</summary>
<p>
### My chain of actions
Replacing vuex-router-sync at first worked fine, but then I saw it was
still failing in some cases, I assumed (I was half-correct tho) that the
rendering of the `App.vue` and syncing of the route to the store was not
happening in a synchronous pattern. So I decided, let's not rely on the
store when the route is directly available in the App context.
Following this, I refactored `useAccount` composable to use `useRoute`
directly, instead of the store, and then replaced the getter inside
`App.vue`. What this did was surface the issue but more consistently 🤯
I saw the watcher, added some console logs, and turns out it was not
getting triggered in all those cases. So I added an `immediate` to it.
And viola, it works!
At the moment, this is deployed to staging and seems to be working
correctly. But we still need to verify it for sure, since how this issue
was surfaced is still a mystery. All we know is that it shows up when
the widget is also loaded alongside the app (if it loads before or after
the app, it works fine)
### What about the route in the store?
Well I have used the `route` usage there with fallback to the store
state. Since Vuex exists in the app context, the route should always be
available to it. But after today I have lost all trust in JavaScript and
will worship rails until end of my life, so I added that in a
`try-catch` block, logged the error to Sentry
</p>
</details>
## Here's the real fix
If you read the explanation I wrote earlier, I thought I fixed the
issue, but then the chat list navigation completely broke. So I removed
the custom route sync implementation and added the original package
back. Turns out the vuex-router-sync earlier was placed after the app
was initalized, however for it to work, the vue app context is not
required. And it's best to run it before the app is even bootstrapped,
so I added it back and placed it correctly.
So the following changes fixes this problem
1. Hoisting the `sync` function call to before we call `createApp` this
ensures that the stores and route hooks are in place before even the app
is created
2. Ensuring the `initializeAccount` is run immediately when watching
`currentAccountId`
4. Source `currentAccountId` for critical top of the tree components
directly from the route instead of the store
There were two warnings showing up on new teams page
1. `errorMessage` prop was getting invalid value, this was because were
short circuting the error message using `&&`, fixed it by using ternary
operator
2. `vue-i18n` has deprecated [rails
syntax](https://vue-i18n.intlify.dev/guide/essentials/syntax#rails-i18n-format),
fixed that warning by removing `%` before `{}` for interpolation
> Note: the `vue-i18n` deprecation needs to be handled, but we can do it
later
- Switch to pnpm based build
- Switch circleci from docker to machine to have more memory
- Fix frontend and backend tests
Fixes
https://linear.app/chatwoot/issue/CW-3610/fix-circle-ci-for-vite-build
---------
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
- Implemented custom @play, @pause methods to update the state of the recording. Once the recording is finished the button icon changes from stop button to play/pause button.
- Removes the console error undefined hasAudio
Fixes https://linear.app/chatwoot/issue/CW-3609/audio-recorder-issue
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This PR has the following fixes
1. preview of article inside the iframe, earlier this didn't work because the iframe didn't get the URL correctly. We fix that by passing the URL is a query instead
2. Emoji picker caused a weird redirect, this was only happening when the chunk was loaded async, this PR changes it to use regular loading instead
When Vue 3 is used with options API, any assignment to `this.<something>` is converted to a Proxy before assignment. This is fine as long as we are in the options context, problem arises when we access this in a `composable` any mutations on the object doesn't behave correctly as expected, this PR fixes that by moving the `automation` object inside the composable and using it in the options.
> Another option to fix such an issue is to make the object non-reactive, like done in places where we have `editorView`, but that wasn't viable here
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This PR makes the following changes
1. Update v-model bindings for components using the old `value` prop and `input` event method
2. Remove components that were not used anywhere
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Vue i18n would automatically merge arrays previously, it does not do so now. This PR fixes it by cleaning up the payload before passing it for translation
The `initOnEvents` was used to get the notification sound file and
trigger the 30 second loop, but since the function was replaced to using
class syntax, the removeEvent listener was not working. This PR fixes it
by reverting to the old syntax but moving it inside the constructor
instead and also adding a `once: true` to ensure it is always removed
automatically
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 allows migration of legacy GMail inbox users to new OAuth based
inbox
## How to test?
1. Create an inbox from the seed data and set it's IMAP address to
`imap.gmail.com` from the UI
2. Open `rails console` and run the following
```
inbox = Inbox.find(100) # use your inbox id here
channel = inbox.channel
channel.update(email: 'hello@chatwoot.com')
channel.prompt_reauthorization!
```
3. This will show the prompt on the UI. Once you click on Reauthorize,
it should open Google Auth. Reauthroize with the same email address as
used in the inbox and it should start working as usual
### Setting up ENV
```sh
GOOGLE_OAUTH_CLIENT_ID=<some-hash>.apps.googleusercontent.com
GOOGLE_OAUTH_CLIENT_SECRET=<client-secret>
GOOGLE_OAUTH_CALLBACK_URL="http://localhost:3000/omniauth/google_oauth2/callback"
```
This PR fixes the issue where proper error messages from the backend
were not displayed when an email already exists in the system during a
profile update, or when a phone number is already taken for Twilio
during the creation of a new account.
Fixes:
https://linear.app/chatwoot/issue/CW-3560/prod-customer-facing-issue-updating-email
Fixes https://github.com/chatwoot/chatwoot/issues/6228
There is a country code selector for the phone input field. This is
often a point of frustration. See the response below.
> We are using the phone number field however this can be frustrating
for customers, especially mobile users, to select the +1 US country
code. Our users are typically local businesses and being able to default
to +1 country code in the phone number field or the account would
improve the interaction they have with customers.
Most people who run local businesses don't need a country selector.
However, to preserve the quality of the data we store, we need a country
code.
A balance between these two issues can be found with an auto-populating
country code field based on the browser's timezone. This is what I did
in this PR. Based on the browser timezone, we will resolve it to the
closest country code.
In admin settings, this Pr will add the UI for managing custom roles (
ref: https://github.com/chatwoot/chatwoot/pull/9995 ). It also handles
the routing logic changes to accommodate fine-tuned permissions.
---------
Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This PR enhances the emoji search functionality in the editor's emoji selector by improving how emoji names are displayed and searched.
The UI now shows emoji names instead of slugs, and the search logic has been updated to generate `searchString` without whitespaces, allowing users to search for emojis like 'face_with' using 'facewith'
# Pull Request Template
## Description
Replaces darkModeMixin with the new useDarkMode composable and replaces
wll usages of mixin the the composable in components and pages
Fixes
https://linear.app/chatwoot/issue/CW-3474/rewrite-darkmodemixin-mixin-to-a-composable
## Type of change
Please delete options that are not relevant.
- [x] New feature (non-breaking change which adds functionality)
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This PR continues the design update series, updates the design for the custom attributes management page. This PR improves the interaction in the Add Custom Attribute feature. Now, the attribute model in the add attribute form will default to the currently selected tab.
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This is the continuation of the design update PR. This changes the design for the inbox pages.
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
# Pull Request Template
## Description
The PR will replace the usage of `reportMixin` with the help of
`useReportMetrics()` composable.
Fixes
https://linear.app/chatwoot/issue/CW-3450/rewrite-reportmixin-mixin-to-a-composable
**Files updated**
1. dashboard/routes/dashboard/settings/reports/Index.vue
2. dashboard/routes/dashboard/settings/reports/BotReports.vue
3. dashboard/routes/dashboard/settings/reports/ReportContainer.vue
4.
dashboard/routes/dashboard/settings/reports/components/WootReports.vue
5.
dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
Test the all the reports view.
## 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
We are fetching linked Linear issues when opening a conversation if Linear integration is enabled. There may be some cases where the API call fails. We don't need to show an error message every time a user opens the conversation, as it's not critical. However, when someone clicks on the Linear icon, we can inform them that the integration is disabled. This PR will fix the issue.
# Pull Request Template
## Description
Replace Hook mixin with useHook composable
Fixes # (issue)
## Type of change
Please delete options that are not relevant.
- [ ] 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?
Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.
## Checklist:
- [ ] My code follows the style guidelines of this project
- [ ] 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
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---------
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
# Pull Request Template
## Description
**Cause of Issue**
The problem was that the `clearSelectedState` action was being
dispatched late in the component lifecycle. By the time it was called,
child components like `ConversationBox` and `MessagesView` had already
been mounted and were trying to access data from a previous conversation
that no longer existed. This resulted in throwing error `TypeError
Unhandled Promise Rejection: null is not an object (evaluating
'e[Symbol.iterator]')` when users navigated from other screens to the
conversation view screen.
**Solution**
I added the `clearSelectedState` dispatch to the `created()` lifecycle
hook for cases where there's no `conversationId` from route props. This
ensures that the state is cleared before any child components are
mounted.
Fixes
https://chatwoot-p3.sentry.io/issues/5707937964/?project=4507182691975168
## Type of change
Please delete options that are not relevant.
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Steps to reproduce**
1. Navigate to chat list screen and open the console.
2. Open any chat, wait to load the messages and stay in conversation
view screen.
3. Then navigate to contact or any other view from primary sidebar.
4. Then back to chat list view.
5. Now you can see this error in console.
**Before**
https://www.loom.com/share/193aaf1d1926479982a192dfb06a8764?sid=3f9ee000-d6a0-47cc-a49f-0050d2c64bbf
**After**
https://www.loom.com/share/3d88cfd5e7744958bc5856dd601ee6c4?sid=0e07a5d0-e461-4a1a-914b-e49f669422f5
## 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
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>
This is the continuation of the design update for the settings screens.
In this PR, the automation page is updated with the latest design.
- Moved the row to a new component
- Migrated both components to composition API.
- Order by ID (Earlier this was order by updated_at which was
confusing).
| Light | Dark |
| -- | -- |
| <img width="1438" alt="Screenshot 2024-08-21 at 9 46 48 PM"
src="https://github.com/user-attachments/assets/89d96745-6556-48a1-82fa-a115325c24c0">
| <img width="1398" alt="Screenshot 2024-08-21 at 9 46 57 PM"
src="https://github.com/user-attachments/assets/5f1935ec-6d0e-4f82-b895-f47244764474">
|
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
# Pull Request Template
## Description
This PR will replace the usage of `agentMixin`with the utility helpers
functions.
**Files updated**
1. dashboard/components/widgets/conversation/contextMenu/Index.vue
2. dashboard/components/widgets/conversation/ConversationHeader.vue
**(Not used)**
3. dashboard/routes/dashboard/commands/commandbar.vue
4. dashboard/routes/dashboard/conversation/ConversationAction.vue
5. dashboard/routes/dashboard/conversation/ConversationParticipant.vue
Fixes
https://linear.app/chatwoot/issue/CW-3442/rewrite-agentmixin-mixin-to-a-composable
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
**Test cases**
1. See agent list sorting based on availability, if agents are on the
same status, then sorted by name.
2. Test actions like assigning/unassigning agent from conversation
sidebar, CMD bar, Context menu.
3. Test actions like adding/removing participants from conversation
sidebar.
4. See agent list is generated properly, none value.
## 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
This is the continuation of the design update for settings page. This PR updates the design for the macros page.
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Remove the `user.permissions` field and resolve the permissions directly
from the accounts array in the user. This change ensures that the cache
or previous values from the last active account don't affect the
permissions.
In this PR:
- Remove user.permissions usage, replace it with getUserPermissions
method.
- Remove json.permissions from user.json.jbuilder
We are using `audio` component for rendering audio files in dashboard.
```
<audio v-else-if="isAudio" controls>
<source :src="`${dataUrl}?t=${Date.now()}`" />
</audio>
```
We have added the timestamp for every audio URL for cache busting. For
Instagram, we are getting a signature URL. When we add any value and
access the URL, it results in an "Invalid signature. If I remove the
timestamp, the audio is rendering properly. This PR will change the
logic to construct the URL properly instead of direct string
manipulation.
# Pull Request Template
## Description
This PR will replace the usage of `configMixin` with the `useConfig`
composable.
**Files updated**
1. dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
2. dashboard/components/widgets/conversation/MessagesView.vue
3. dashboard/routes/dashboard/settings/inbox/Settings.vue **(Not used)**
4. dashboard/routes/dashboard/settings/inbox/FinishSetup.vue **(Not
used)**
5.
dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
6.
dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
**(Not used)**
7. dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
**(Not used)**
8. dashboard/routes/dashboard/settings/sla/Index.vue **(Not used)**
9. dashboard/routes/dashboard/settings/account/Index.vue
10. survey/views/Response.vue **(Not used)**
Fixes
https://linear.app/chatwoot/issue/CW-3464/rewrite-configmixin-mixin-to-a-composable
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
Test in the component related pages
## 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
# Pull Request Template
## Description
This PR will fix an error `TypeError cannot read properties of undefined
(reading '$el')` with the keyboard shortcut `Alt+KeyA` for triggering
the file picker.
**Issue**
I couldn't able reproduce this issue. It might be because `$children`
was unavailable at the time of access.
**Solution**
Previously, it relied on `$children`. Now, it uses the more reliable
`querySelector` method to find the target element.
Fixes
https://chatwoot-p3.sentry.io/issues/5708410274/?alert_rule_id=15157525&alert_timestamp=1723552508790&alert_type=email&environment=production¬ification_uuid=be5966b2-f17d-4273-8709-98e3322f1f6f&project=4507182691975168&referrer=alert_email
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Test cases**
1. Open a conversation
2. And click `Alt+KeyA` to trigger the file picker.
3. See if there is any issue or errors.
## 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
This PR is the part of the settings page design update series. This PR updates the design for the user management page.
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
# Pull Request Template
## Description
Replaces the messageMixin with the new useMessage composable
Fixes
https://linear.app/chatwoot/issue/CW-3475/rewrite-messagemixin-mixin-to-a-composable
## Type of change
Please delete options that are not relevant.
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] 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
# Pull Request Template
## Description
This PR will replace the usage of `attributeMixin` within the component
itself. And moved the component from option API to composition API and
updated the styles and related component
Fixes
https://linear.app/chatwoot/issue/CW-3444/rewrite-attributemixin-mixin-to-a-composable
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
**Test cases**
1. Add custom attributes for both conversation and contact from the
settings
2. See all attributes are showing based on the conversation and contact
in both conversation and contact sidebar.
3. Try all CRUD operations like EDIT, DELETE.
4. Check whether styles are properly showing or not (Background color
based on odd/even)
## 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
# Pull Request Template
## Description
This PR will replace the usage of `conversation/labelMixin` with a
composable
Fixes
https://linear.app/chatwoot/issue/CW-3439/rewrite-conversationlabelmixin-mixin-to-a-composable
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
**Test cases**
1. Add/remove labels from conversation sidebar
2. See labels are showing up dynamically
3. Check add/remove labels working fine with CMD bar
4. Check card labels in conversation card and SLA reports table.
## 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
This PR is part of the settings design update series. It updates the design for the label management page. I've made a few changes to the SettingsLayout page to reduce boilerplate code.
# Pull Request Template
## Description
This PR will replace usage of `macroMixin` with the `useMacros`
composable. And updated components from option API to composition API.
**Files updated**
1. dashboard/routes/dashboard/settings/macros/MacroNode.vue
2. dashboard/routes/dashboard/settings/macros/MacroEditor.vue
Fixes
https://linear.app/chatwoot/issue/CW-3449/rewrite-macrosmixin-mixin-to-a-composable
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
**Test cases**
1. Check whether we can create a new macro.
2. Check whether validations and error animation are working or not.
3. Ability to drag the macro files
4. Check whether the edit pages and functionality is working or not.
## 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
# Pull Request Template
## Description
This PR will replace the use of `customAttributeMixin` with
`shared/helpers/Validators` helper.
Fixes
https://linear.app/chatwoot/issue/CW-3446/rewrite-customattributemixin-mixin-to-a-composable
**Files updated**
1. widget/components/PreChat/Form.vue
2. dashboard/components/CustomAttribute.vue
3. dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
Test the custom validation is working or not with the custom attributes.
## 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
This PR updates the profile settings page to completely disable the password section, including the heading, if the admin has disabled user profile updates. Previously, the section heading was shown with empty content, which caused confusion.
This is the continuation of the design update series. Canned responses listing page is rewritten with the design change.
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Fix the broken message sending due to the errors in attachment update PR
https://github.com/chatwoot/chatwoot/pull/9784
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This is continuation of the design update, updates the design for audit logs listing page.
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
When the chat is viewed, a function `fetchAllAttachments` is run to get all attachments for a particular conversation. This function, before updating the record creates the `attachments` property on the `chat` object in the store.
If in any case this function fails, the `attachments` property is not created, and when the code reaches the `dashboard/store/modules/conversations/index.js` the error occurs
This PR fixes it by ensuring that `SET_ALL_ATTACHMENTS` is always run. And it handles the default case as well
---
Sentry Issue:
[CHATWOOT-FRONTEND-APP-5Y](https://chatwoot-p3.sentry.io/issues/5459056982/)
```
TypeError: Cannot read properties of undefined (reading 'some')
at forEach(./app/javascript/dashboard/store/modules/conversations/index.js:160:31)
at Array.forEach(<anonymous>)
at mutations(./app/javascript/dashboard/store/modules/conversations/index.js:159:27)
at handler(./node_modules/vuex/dist/vuex.js:771:7)
at forEach(./node_modules/vuex/dist/vuex.js:470:9)
at Array.forEach(<anonymous>)
at fn(./node_modules/vuex/dist/vuex.js:469:13)
at Store.prototype._withCommit(./node_modules/vuex/dist/vuex.js:574:5)
at Store.prototype.commit(./node_modules/vuex/dist/vuex.js:468:10)
at this.commit(./node_modules/vuex/dist/vuex.js:420:21)
at call(./app/javascript/dashboard/store/modules/conversations/actions.js:273:7)
at tryCatch(./node_modules/videojs-record/dist/videojs.record.js:2868:27)
at _invoke(./node_modules/videojs-record/dist/videojs.record.js:3088:32)
at prototype[method](./node_modules/videojs-record/dist/videojs.record.js:2921:31)
at as(/packs/js/application-cf716bca3c984faeb095.js:4:76)
at as(/packs/js/application-cf716bca3c984faeb095.js:4:76)
at nrWrapper(/app/accounts/81898/conversations/95:6:17817)
```
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
This PR updates the design for the team listing page. This PR is part of the design revamp project for all the settings pages.
Co-authored-by: Sojan Jose <sojan@pepalo.com>
… correctly
# Pull Request Template
## Description
This PR fixes an issue where the key down handler in the
`useKeyboardEvent` composable was not registering correctly.
## 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
# Pull Request Template
## Description
This PR includes UI changes to dynamically add the `Shift` key to the
key set `Alt+KeyP` and `Alt+KeyL` in the keyboard shortcut modal for the
`QWERTZ` layout.
**Context**
Previously, the `Alt+L` shortcut for toggling the reply editor
conflicted with the `@` symbol on the QWERTZ layout in macOS. The new
`useDetectLayout` composable checks the active keyboard layout. If
`QWERTZ` is detected, the shortcuts are modified to `Shift+Alt+KeyP` and
`Shift+Alt+KeyL`.
[PR with the functionality
changes](https://github.com/chatwoot/chatwoot/pull/9831#event-13764407813)
Fixes
https://linear.app/chatwoot/issue/PR-1095/typing-a-in-private-note-switches-to-reply-tab-with-german-keyboard
## Type of change
- [x] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
## How Has This Been Tested?
**Loom video**
https://www.loom.com/share/35b741c5afc64bc58bd4e7dc5dad012d?sid=f66ca0bf-b6a7-40fc-8972-ff0cd0196a16
## 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
# Pull Request Template
## Description
Adjusts the margin for dropdown and sets the height to auto from
hardcoded 52px.
Fixes CW-3494
## Type of change
Please delete options that are not relevant.
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
Tested locally, attached screenshot
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>
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>
- Previously we were ignoring the reels shared over Instagram messages.
This PR will render the reels with in Chatwoot.
followup : we need to render reels in a better interface so that it is
clearly denoted to the user that its an Instagram reel
# Pull Request Template
## Description
This PR will fix the layout issue in connecting to the Facebook page
layout.
Fixes
https://linear.app/chatwoot/issue/CW-3489/connect-facebook-page-layout-is-broken
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Before**
<img width="1264" alt="image"
src="https://github.com/user-attachments/assets/2b9e412b-f172-4184-b45b-8c97333c3e51">
**After**
<img width="1264" alt="image"
src="https://github.com/user-attachments/assets/035f3468-f611-43ce-a058-fb8eafa1a45d">
## 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 would update the logos for the integrations (also add the dark mode variants to be used in the future) and updates the logic for enabled / active attributes in the apps.
# 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 completely remove the `contentTypeMixin` and be used in the
component as it is.
Fixes
https://linear.app/chatwoot/issue/CW-3465/rewrite-contenttypemixin-mixin-as-a-helper
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
Take a look at this component
`app/javascript/dashboard/components/widgets/conversation/Message.vue`
## 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
# 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
This PR will completely remove the SLA `validationMixin` and be used in
the component as it is with a name change.
Fixes
https://linear.app/chatwoot/issue/CW-3456/rewrite-sla-validationmixin-mixin-to-a-composable
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
Take a look at these components
1. `dashboard/routes/dashboard/settings/sla/AddSLA.vue` **(Not used)**
2. `dashboard/routes/dashboard/settings/sla/SlaForm.vue`
3. `dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue`
## 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
# Pull Request Template
## Description
This PR will remove the `bulkActionsMixin` usage. Seems like it is not
used anywhere.
Fixes https://linear.app/chatwoot/issue/CW-3453/delete-bulkactionsmixin
## 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
- [ ] 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
**Issue**
The error `Cannot read properties of undefined (reading 'status')`
occurs because the `error.response.status` is accessed without checking
if `error.response` is present.
I can't able to reproduce this issue.
**Solution**
To resolve this issue, I added a check to ensure that this
`error.response` is defined before accessing the `error.response.status`
Fixes
https://linear.app/chatwoot/issue/CW-3322/typeerror-cannot-read-properties-of-undefined-reading-status
## 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
- [ ] 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
**Cases**
## 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
- [ ] 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 issue is an extremely narrow edge case that does not affect the app functionality. It occurs here
1. `executeRecurringNotification` is the method that sets a timeout of 30 seconds and pings as required
2. This method is triggered when one of the following events happen `click`, `touchstart`, `keypress`, `keydown`
3. The class in question is initalized before the Vue app is mounted in `application.js`, the vue app is mounted on `window.onload` event
4. In a case where the Vue app is not created (i.e. `window.onload` event is not fired) within 30 seconds of a user input, this error occurs.
Fixes
https://chatwoot-p3.sentry.io/share/issue/aa6a3c0accb345e984ed80eaddc3efd5/
In the case where the user is redirected to the page from a redirect
like google login, the analytics helper breaks. This PR fixes it by
checking if the user is present.
This does not break the user email tracking since the user is redirected
anyway and the `AnalyticsHelper` is reinitialised
# Pull Request Template
## Description
**Issue**
The error `Cannot read properties of undefined (reading 'data')` occurs
because the `error.response.data` is accessed without checking if
`error.response` is present.
I can able to reproduce this issue.
**Solution**
To resolve this issue, I can add a check to ensure that this
`error.response` is defined before accessing the `error.response.data`
Fixes
https://linear.app/chatwoot/issue/CW-3406/typeerror-cannot-read-properties-of-undefined-reading-data
## 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
- [ ] 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
The disconnect threshold is added to account for delays in identifying disconnections (for example, the websocket disconnection takes up to 3 seconds) while fetching the latest updated conversations or messages.
In this case, the cable disconnection event takes about 3 seconds to fire. If there was a conversation which was created in this 3 second, it would not be displayed in the UI until the refresh.
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This PR addresses an issue with the `createNotificationBubble` function, which generates an empty `span` element with the class `woot--notification`. This `span` element is currently not utilized anywhere in the code and lacks associated CSS, leading to an overflow issue, specifically in the Firefox browser. It solves the website overflow issue by removing this unused `span` element. This change is unrelated to the unread notification dot, which is working as before.
Fixes https://linear.app/chatwoot/issue/PR-1098/missing-css-for-woot-notification-div
Due to the pattern `**/specs/*.spec.js` defined in CircleCI, none of the
frontend spec in the folders such as
`specs/<domain-name>/getters.spec.js` were not executed in Circle CI.
This PR fixes the issue, along with the following changes:
- Use vitest instead of jest
- Remove jest dependancies
- Update tests to work with vitest
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.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
We previously relied on user roles to determine whether to render
specific routes in our frontend components. A permissions-based model is replacing this approach.
Follow up: #9695
Co-authored-by: Pranav <pranavrajs@gmail.com>
This PR adds the following changes
1. Refactor `microsoft/callbacks_controller` to move common logic to
`oauth_callback_controller`, most of the logic is re-used for Google
2. Add UI components, `googleClient` and I18n entries for Google login
3. Add Google callback and inbox creation
4. Add a `joinUrl` utility along with specs (need to move it to utils)
5. Add `GoogleConcern`, `Google::AuthorizationsController` and
`Google::CallbacksController`
> Note: The UI is hidden for now, so we can merge this without any
hiccups, to enable it just revert the commit `05c18de`
### Preview
https://github.com/chatwoot/chatwoot/assets/18097732/1606d150-4561-49dc-838d-e0b00fe49ce3
### Linear Tickers
[CW-3370](https://linear.app/chatwoot/issue/CW-3370)
[CW-3371](https://linear.app/chatwoot/issue/CW-3371)
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
# Pull Request Template
## Description
fixed getting browser data
In Vue, without computed properties, the data doesn't update, and
because of this, it doesn't display information about the browser.
## 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
## 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
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
# 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
This PR adds a cleaner re-authorization flow to Microsoft. This PR has
the following changes
1. Use `reauthorization_required` value for Microsoft Channel
2. Refactor `InboxReconnectionRequired` to reuse the `banner` component
3. Refactor `microsoft/Reauthorize.vue` to reuse
`InboxReconnectionRequired` component
4. Update `reauthorizable.rb` to update cache keys if the model has an
inbox
5. Update `microsoft/callbacks_controller.rb` to handle the
reauthorization case with a redirect to the inbox settings page if the
inbox already exists at the time of authorization.
## How Has This Been Tested?
- [x] Local Instance
- [ ] Staging Instance
- [x] Unit tests
## Pending Tasks
- [ ] ~Success Toast~ will do this in a follow-up PR with the screen
## Demo
The following video shows the whole process of creation and
re-authorization of the Microsoft channel
https://www.loom.com/share/e5cd9bd4439c4741b0dcfe66d67f88b3?sid=100f3642-43e4-46b3-8123-88a5dd9d8509
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Tried to replicate the issue, but Sentry didn't have enough information.
`toggleMessageSignature` is a user triggered action in
`ReplyBottomPanel.vue`, the value for `channelType` is provided from
`inboxMixin`. The error will occur if either `inbox` is an empty object
`{}` or `channel_type` in `inbox` object is undefined.
I couldn't find any instance where this could be the case. The PR has a
stop gap solution that ensures that no action is triggered
The fonts on the portal were not loaded properly before due to a typo in
the stylesheet. The font that is shown on the public portal is ui-sans
right now. This PR fixes it.
# Pull Request Template
## Description
This PR will fix this sentry
[issue](https://chatwoot-p3.sentry.io/issues/5291039795/)
**Issue**
The root cause of this issue is the usage of
`keyboardEventListenerMixins`. The key events are always active when the
edit conversation modal is active, even if the country dropdown is not
visible. So, if we press the enter key, this error will be thrown into
the console.
**Solution**
Remove the use of `keyboardEventListenerMixins` and handle it directly
in the Vue native key events. Also, always check if the dropdown is
active.
**Other changes**
1. Remove the `mouseup` event lister and use the click away directive.
2. Use inline Tailwind css
Fixes
https://linear.app/chatwoot/issue/CW-3282/phonenumberinput-country-undefined-in-onselectcountry
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
**Steps**
1. Open a conversation.
3. And click the edit contact button
4. And click the enter key
5. Now you can see the error in the console
## 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
Use MP3 as the default format to send voice notes recorded from
Chatwoot. This change was made to fix the issue of Telegram voice notes
not working with the error `WEBPAGE_CURL_FAILED` .
Telegram treats the mp3 recordings as audio attachments. Once we can
identify a fix for the original issue, we will revisit the `ogg`
implementation.
---------
Co-authored-by: Sojan Jose <sojan@pepalo.com>
At the moment, when creating an inbox for Whatsapp, Telegram, etc., we show a generic error message saying that inbox creation failed. This PR will show the error messages directly from the API call, which is more helpful as it says if the error is due to the provided credentials.
* feat: add ids to each element
* feat: restore elements for apps that use view transitions
* fix: remove generator check condition
* feat: handle turbolinks
* fix: new body handling
* chore: undo debug changes
Last week, the WhatsApp API has started returning an error message for the voice notes, Unsupported Audio mime type audio/opus. Please use one of audio/ogg; codecs=opus, audio/mpeg, audio/amr, audio/mp4, audio/aac. This error began appearing on May 1. Even though there was no change in the files and content type, FB API started rejecting the file.
In this PR, we are converting the audio recordings from Wav to Mp3 from frontend itself.
- Add an upgrade CTA for the SLA feature
-------------------
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
* refactor: use has_email instead of email
* feat: remove usage of details directly in forms
* test: update payload
* test: fix transcript test
* refactor: use computed hasEmail
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This change introduces the ability to lock conversations to a single thread for Instagram and facebook messages within the Meta inbox, mirroring existing functionality in WhatsApp and SMS inboxes.
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
* feat: add push notification when SLA missed
* chore: sent notification only for inbox members
* feat: add conv particpants+admins to SLA notification list
* chore: add spec to ensure notification is created
* chore: refactor to multiple alerts for SLA conditions
* chore: add sla_policy as secondary_actor in notification
- 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
Rename the CSAT metric card to a generic name, updated the implementation to use composition API and removed all the custom CSS in the component to conform with TailwindCSS styles
---------
Co-authored-by: Pranav <pranav@chatwoot.com>
We analyze an image to get it's height and width. On the frontend, we would show a placeholder with the corresponding width and height until the images are loaded properly.
---------
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
- This PR adds a UI to validate the response source quality quickly. It also helps to test with sample questions and update responses in the database when missing.
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This pull request enhances the export contacts feature by adding a confirmation step before exporting. Previously, clicking the export button would trigger the export action without confirmation.
Additionally, it ensures that only the intended recipient receives the export email, addressing the previous behaviour where all administrators received it.
Fixes: #8504
Co-authored-by: Sojan Jose <sojan@pepalo.com>
The system did not detect the delivery errors earlier, resulting in some false positives. The user was not informed when an email failed to be delivered. While we do handle failure status in other channels, we were not able to capture the actual delivery status for the email channel.
This pull request makes the following changes:
- Updated the class EmailReplyWorker to use the deliver_now method instead of deliver_later. This change is made to raise any errors that may occur with the SMTP connection. The errors are then captured and sent to Sentry, and the email is marked as failed. Previously, we did not consider the case of retries in the email channel, so this feature is currently not functioning. So, I have disabled the retry option. We will address this in a follow-up ticket.
- Downgraded the net-smtp gem to version 0.3.4. This change is made to avoid an argument error when using XOAUTH2.
Fixes: https://linear.app/chatwoot/issue/CW-3032/argumenterror-wrong-authentication-type-xoauth2-argumenterror
This allows a user to add/update a custom regex and a cue while defining custom attributes(Only applicable for type- text).
While adding/editing custom attributes, the values are validated against the attribute definition regex, and if it is incorrect, a cue message or default error message is shown and restricts invalid values from being saved.
Fixes: #6866
