65430e4633
4 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Gabriel Jablonski
|
65430e4633
|
Merge branch 'fazer-ai/main' into chore/merge-upstream | ||
|
Muhsin Keloth
|
d827e66453
|
feat: Instagram Inbox using Instagram Business Login (#11054)
This PR introduces basic minimum version of **Instagram Business Login**, making Instagram inbox setup more straightforward by removing the Facebook Page dependency. This update enhances user experience and aligns with Meta’s recommended best practices. Fixes https://linear.app/chatwoot/issue/CW-3728/instagram-login-how-to-implement-the-changes ## Why Introduce Instagram as a Separate Inbox? Currently, our Instagram integration requires linking an Instagram account to a Facebook Page, making setup complex. To simplify this process, Instagram now offers **Instagram Business Login**, which allows users to authenticate directly with their Instagram credentials. The **Instagram API with Instagram Login** enables businesses and creators to send and receive messages without needing a Facebook Page connection. While an Instagram Business or Creator account is still required, this approach provides a more straightforward integration process. | **Existing Approach (Facebook Login for Business)** | **New Approach (Instagram Business Login)** | | --- | --- | | Requires linking Instagram to a Facebook Page | No Facebook Page required | | Users log in via Facebook credentials | Users log in via Instagram credentials | | Configuration is more complex | Simpler setup | Meta recommends using **Instagram Business Login** as the preferred authentication method due to its easier configuration and improved developer experience. --- ## Implementation Plan The core messaging functionality is already in place, but the transition to **Instagram Business Login** requires adjustments. ### Changes & Considerations - **API Adjustments**: The Instagram API uses `graph.instagram`, whereas Koala (our existing library) interacts with `graph.facebook`. We may need to modify API calls accordingly. - **Three Main Modules**: 1. **Instagram Business Login** – Handle authentication flow. 2. **Permissions & Features** – Ensure necessary API scopes are granted. 3. **Webhooks** – Enable real-time message retrieval.  --- ## Instagram Login Flow 1. User clicks **"Create Inbox"** for Instagram. 2. App redirects to the [Instagram Authorization URL](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#embed-the-business-login-url). 3. After authentication, Instagram returns an authorization code. 5. The app exchanges the code for a **long-lived token** (valid for 60 days). 6. Tokens are refreshed periodically to maintain access. 7. Once completed, the app creates an inbox and redirects to the Chatwoot dashboard. --- ## How to Test the Instagram Inbox 1. Create a new app on [Meta's Developer Portal](https://developers.facebook.com/apps/). 2. Select **Business** as the app type and configure it. 3. Add the Instagram product and connect a business account. 4. Copy Instagram app ID and Instagram app secret 5. Add the Instagram app ID and Instagram app secret to your app config via `{Chatwoot installation url}/super_admin/app_config?config=instagram` 6. Configure Webhooks: - Callback URL: `{your_chatwoot_url}/webhooks/instagram` - Verify Token: `INSTAGRAM_VERIFY_TOKEN` - Subscribe to `messages`, `messaging_seen`, and `message_reactions` events. 7. Set up **Instagram Business Login**: - Redirect URL: `{your_chatwoot_url}/instagram/callback` 8. Test inbox creation via the Chatwoot dashboard. ## Troubleshooting & Common Errors ### Insufficient Developer Role Error - Ensure the Instagram user is added as a developer: - **Meta Dashboard → App Roles → Roles → Add People → Enter Instagram ID** ### API Access Deactivated - Ensure the **Privacy Policy URL** is valid and correctly set. ### Invalid request: Request parameters are invalid: Invalid redirect_uri - Please configure the Frontend URL. The Frontend URL does not match the authorization URL. --- ## To-Do List - [x] Basic integration setup completed. - [x] Enable sending messages via [Messaging API](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/messaging-api). - [x] Implement automatic webhook subscriptions on inbox creation. - [x] Handle **canceled authorization errors**. - [x] Handle all the errors https://developers.facebook.com/docs/instagram-platform/instagram-graph-api/reference/error-codes - [x] Dynamically fetch **account IDs** instead of hardcoding them. - [x] Prevent duplicate Instagram channel creation for the same account. - [x] Use **Global Config** instead of environment variables. - [x] Explore **Human Agent feature** for message handling. - [x] Write and refine **test cases** for all scenarios. - [x] Implement **token refresh mechanism** (tokens expire after 60 days). Fixes https://github.com/chatwoot/chatwoot/issues/10440 --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> |
||
|
Cayo P. R. Oliveira
|
acd1e56a28 |
feat: baileys provider for whatsapp (#7)
* feat: baileys provider and placeholder for link device modal * chore: drop qrcode.vue in favor of just img tag * chore: update modal props * feat: setup channel provider connection * chore: update .env.example with Baileys API default configuration * feat: add support for Baileys provider in WhatsApp events processing * chore: rename Baileys API default host variable to DEFAULT_BAILEYS_URL * feat: add setup and disconnect methods for Baileys channel provider in inboxes controller that will be implemented * feat: add CHANNEL_CONNECTION_UPDATE event and include it in broadcast data preparation * refactor: simplify channel retrieval logic in WhatsappEventsJob * refactor: revert CHANNEL_UPDATE_EVENTS constant from ActionCableBroadcastJob * feat: add 'baileys' as a provider option in Whatsapp channel model * feat: add provider_connection field to Whatsapp channel model and migration * refactor: remove unnecessary CHANNEL_CONNECTION_UPDATE event type * feat: implement channel provider connection with baileys API * feat: add inbox association to Whatsapp channel model and update webhook URL handling * feat: enhance Baileys service to handle webhook multiple event types * refactor: simplify webhook verification logic in Baileys service * feat: add setup channel provider call, and refactor some logic * chore: adapt logic to new API * refactor: fix typo * refactor: fix import * refactor: fix typo * chore: add fixme comment about race condition * fix: remove double disconnect call * feat: implement message processing for incoming WhatsApp messages * refactor: streamline message type determination and improve readability * chore: increase cache key granularity provider connection info might be updated multiple times within 1 second, so updates might be lost due to cache key not being updated. changing cache key to milliseconds solves this * feat: add `is-loading` to buttons * feat: update send_message method to use 'to' parameter and improve error handling * refactor: simplify test setup and update API key in specs * chore: add setup and disconnect channel provider specs * test: fix spec after increase cache key granularity * feat: handle reconnecting state on modal * style: centered error text * feat: advanced options on create inbox * feat: handle new reconnecting on backend * refactor: update inbox controller specs and leave a FIXME note * test: add specs for Whatsapp::IncomingMessageBaileysService * feat: add baileys configuration page * feat: link device button when disconnected on conversation * chore: refactor .env.example * feat: add TODO for unimplemented methods in IncomingMessageBaileysService * fix: correct method name and update environment variable references in WhatsappBaileysService * refactor: simplify channel lookup by removing redundant method and handling phone number check directly * chore: add TODO for unimplemented event processing methods in IncomingMessageBaileysService * fix: update environment variable references in WhatsappBaileysService tests * chore(webhook): add pt-BR translations * chore: add pt-br translations * chore: inboxname component margin * refactor: inboxname computed prop * feat: enhance WhatsApp provider connection handling and message processing * test: inbox controller * chore: improve baileys connection and messages handling * test: incoming message service baileys * refactor: update provider config validation and improve test setup for WhatsApp Baileys service * fix: ensure only text messages are sent and update message source ID * fix: create message * fix: only update message on success * test: fix broken specs * chore: raise error on unsupported message content type * feat: hide provider connection data from non-admins * fix: update advanced options * chore: move class definition * fix: issue with send_message not returning id --------- Co-authored-by: gabrieljablonski <contact@gabrieljablonski.com> |
||
|
Shivam Mishra
|
eef70b9bd7
|
feat: integrate new bubbles (#10550)
To test this, set the `useNextBubble` value to `true` in the
localstorage. Here's a quick command to run in the console
```js
localStorage.setItem('useNextBubble', true)
```
```js
localStorage.setItem('useNextBubble', false)
```
---------
Co-authored-by: Pranav <pranavrajs@gmail.com>
|