mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 12:08:01 +00:00
3a78192e74
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
🚨 Note: This branch is unstable. For the stable branch's source code, please use the branch 3.x
Chatwoot
Customer engagement suite, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
Chatwoot is an open-source, self-hosted customer engagement suite. Chatwoot lets you view and manage your customer data, communicate with them irrespective of which medium they use, and re-engage them based on their profile.
Features
Chatwoot supports the following conversation channels:
- Website: Talk to your customers using our live chat widget and make use of our SDK to identify a user and provide contextual support.
- Facebook: Connect your Facebook pages and start replying to the direct messages to your page.
- Instagram: Connect your Instagram profile and start replying to the direct messages.
- Twitter: Connect your Twitter profiles and reply to direct messages or the tweets where you are mentioned.
- Telegram: Connect your Telegram bot and reply to your customers right from a single dashboard.
- WhatsApp: Connect your WhatsApp business account and manage the conversation in Chatwoot.
- Line: Connect your Line account and manage the conversations in Chatwoot.
- SMS: Connect your Twilio SMS account and reply to the SMS queries in Chatwoot.
- API Channel: Build custom communication channels using our API channel.
- Email: Forward all your email queries to Chatwoot and view it in our integrated dashboard.
And more.
Other features include:
- CRM: Save all your customer information right inside Chatwoot, use contact notes to log emails, phone calls, or meeting notes.
- Custom Attributes: Define custom attribute attributes to store information about a contact or a conversation and extend the product to match your workflow.
- Shared multi-brand inboxes: Manage multiple brands or pages using a shared inbox.
- Private notes: Use @mentions and private notes to communicate internally about a conversation.
- Canned responses (Saved replies): Improve the response rate by adding saved replies for frequently asked questions.
- Conversation Labels: Use conversation labels to create custom workflows.
- Auto assignment: Chatwoot intelligently assigns a ticket to the agents who have access to the inbox depending on their availability and load.
- Conversation continuity: If the user has provided an email address through the chat widget, Chatwoot will send an email to the customer under the agent name so that the user can continue the conversation over the email.
- Multi-lingual support: Chatwoot supports 10+ languages.
- Powerful API & Webhooks: Extend the capability of the software using Chatwoot’s webhooks and APIs.
- Integrations: Chatwoot natively integrates with Slack right now. Manage your conversations in Slack without logging into the dashboard.
Documentation
Detailed documentation is available at chatwoot.com/help-center.
Translation process
The translation process for Chatwoot web and mobile app is managed at https://translate.chatwoot.com using Crowdin. Please read the translation guide for contributing to Chatwoot.
Branching model
We use the git-flow branching model. The base branch is develop.
If you are looking for a stable version, please use the master or tags labelled as v1.x.x.
Deployment
Heroku one-click deploy
Deploying Chatwoot to Heroku is a breeze. It's as simple as clicking this button:
Follow this link to understand setting the correct environment variables for the app to work with all the features. There might be breakages if you do not set the relevant environment variables.
DigitalOcean 1-Click Kubernetes deployment
Chatwoot now supports 1-Click deployment to DigitalOcean as a kubernetes app.
Other deployment options
For other supported options, checkout our deployment page.
Security
Looking to report a vulnerability? Please refer our SECURITY.md file.
Community? Questions? Support ?
If you need help or just want to hang out, come, say hi on our Discord server.
Contributors ✨
Thanks goes to all these wonderful people:
Chatwoot © 2017-2024, Chatwoot Inc - Released under the MIT License.