Merge branch main into chore/merge-upstream-4.8.0

.env.example

@@ -273,3 +273,10 @@ AZURE_APP_SECRET=
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
+
+# Baileys API Whatsapp provider
+BAILEYS_PROVIDER_DEFAULT_CLIENT_NAME=Chatwoot
+BAILEYS_PROVIDER_DEFAULT_URL=http://localhost:3025
+BAILEYS_PROVIDER_DEFAULT_API_KEY=
+
+RESEND_API_KEY=

.github/workflows/frontend-fe.yml

@@ -2,11 +2,9 @@ name: Frontend Lint & Test
 
 on:
   push:
-    branches:
+    tags:
-      - develop
+      - '*'
-  pull_request:
+  workflow_dispatch:
-    branches:
-      - develop
 
 jobs:
   test:

.github/workflows/publish_ee_github_docker.yml

@@ -0,0 +1,138 @@
+name: Publish Chatwoot Enterprise docker images to GitHub
+
+permissions:
+  contents: read
+  packages: write
+
+on:
+  release:
+    types: [released]
+  workflow_dispatch:
+
+env:
+  GITHUB_REPO: ghcr.io/${{ github.repository }}
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-22.04-arm
+    runs-on: ${{ matrix.runner }}
+    env:
+      GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.release.tag_name || github.ref }}
+
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: Set Chatwoot edition
+        run: |
+          echo -en '\nENV CW_EDITION="ee"' >> docker/Dockerfile
+
+      - name: Update version in app.yml
+        run: |
+          if [[ "$GIT_REF" =~ ^v(.+)$ ]]; then
+            VERSION="${BASH_REMATCH[1]}"
+            echo "Updating version to: $VERSION"
+            sed -i "s/version: '.*'/version: '$VERSION'/" config/app.yml
+          else
+            echo "No version tag found, keeping existing version"
+          fi
+
+      - name: Set Docker Tags
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          echo "SANITIZED_REF=${SANITIZED_REF}" >> $GITHUB_ENV
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        if: github.event_name == 'release' || github.event_name == 'workflow_dispatch'
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push to GitHub Container Registry
+        id: build-ghcr
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: docker/Dockerfile
+          platforms: ${{ matrix.platform }}
+          push: ${{ github.event_name == 'release' || github.event_name == 'workflow_dispatch' }}
+          tags: |
+            ${{ env.GITHUB_REPO }}:${{ env.SANITIZED_REF }}-ee
+            ${{ env.GITHUB_REPO }}:latest-ee
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build-ghcr.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        env:
+          GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          docker buildx imagetools create \
+            -t ghcr.io/${{ github.repository }}:${SANITIZED_REF}-ee \
+            -t ghcr.io/${{ github.repository }}:latest-ee \
+            $(printf 'ghcr.io/${{ github.repository }}@sha256:%s ' *)
+
+      - name: Inspect image
+        env:
+          GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          REPO="ghcr.io/${{ github.repository }}"
+          docker buildx imagetools inspect ${REPO}:${SANITIZED_REF}-ee
+          docker buildx imagetools inspect ${REPO}:latest-ee

.github/workflows/publish_github_docker.yml

@@ -0,0 +1,139 @@
+name: Publish Chatwoot docker images to GitHub
+
+permissions:
+  contents: read
+  packages: write
+
+on:
+  release:
+    types: [released]
+  workflow_dispatch:
+
+env:
+  GITHUB_REPO: ghcr.io/${{ github.repository }}
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-22.04-arm
+    runs-on: ${{ matrix.runner }}
+    env:
+      GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.release.tag_name || github.ref }}
+
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: Strip enterprise code
+        run: |
+          rm -rf enterprise
+          rm -rf spec/enterprise
+
+      - name: Update version in app.yml
+        run: |
+          if [[ "$GIT_REF" =~ ^v(.+)$ ]]; then
+            VERSION="${BASH_REMATCH[1]}"
+            echo "Updating version to: $VERSION"
+            sed -i "s/version: '.*'/version: '$VERSION'/" config/app.yml
+          else
+            echo "No version tag found, keeping existing version"
+          fi
+
+      - name: Set Docker Tags
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          echo "SANITIZED_REF=${SANITIZED_REF}" >> $GITHUB_ENV
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        if: github.event_name == 'release' || github.event_name == 'workflow_dispatch'
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push to GitHub Container Registry
+        id: build-ghcr
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: docker/Dockerfile
+          platforms: ${{ matrix.platform }}
+          push: ${{ github.event_name == 'release' || github.event_name == 'workflow_dispatch' }}
+          tags: |
+            ${{ env.GITHUB_REPO }}:${{ env.SANITIZED_REF }}
+            ${{ env.GITHUB_REPO }}:latest
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build-ghcr.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        env:
+          GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          docker buildx imagetools create \
+            -t ghcr.io/${{ github.repository }}:${SANITIZED_REF} \
+            -t ghcr.io/${{ github.repository }}:latest \
+            $(printf 'ghcr.io/${{ github.repository }}@sha256:%s ' *)
+
+      - name: Inspect image
+        env:
+          GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          REPO="ghcr.io/${{ github.repository }}"
+          docker buildx imagetools inspect ${REPO}:${SANITIZED_REF}
+          docker buildx imagetools inspect ${REPO}:latest

.github/workflows/publish_github_docker_beta.yml

@@ -0,0 +1,139 @@
+name: Publish Chatwoot beta docker images to GitHub
+
+permissions:
+  contents: read
+  packages: write
+
+on:
+  release:
+    types: [prereleased]
+  workflow_dispatch:
+
+env:
+  GITHUB_REPO: ghcr.io/${{ github.repository }}
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-22.04-arm
+    runs-on: ${{ matrix.runner }}
+    env:
+      GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.release.tag_name || github.ref }}
+
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: Strip enterprise code
+        run: |
+          rm -rf enterprise
+          rm -rf spec/enterprise
+
+      - name: Update version in app.yml
+        run: |
+          if [[ "$GIT_REF" =~ ^v(.+)$ ]]; then
+            VERSION="${BASH_REMATCH[1]}"
+            echo "Updating version to: $VERSION"
+            sed -i "s/version: '.*'/version: '$VERSION'/" config/app.yml
+          else
+            echo "No version tag found, keeping existing version"
+          fi
+
+      - name: Set Docker Tags
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          echo "SANITIZED_REF=${SANITIZED_REF}" >> $GITHUB_ENV
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        if: github.event_name == 'release' || github.event_name == 'workflow_dispatch'
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push to GitHub Container Registry
+        id: build-ghcr
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: docker/Dockerfile
+          platforms: ${{ matrix.platform }}
+          push: ${{ github.event_name == 'release' || github.event_name == 'workflow_dispatch' }}
+          tags: |
+            ${{ env.GITHUB_REPO }}:${{ env.SANITIZED_REF }}
+            ${{ env.GITHUB_REPO }}:beta
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build-ghcr.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        env:
+          GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          docker buildx imagetools create \
+            -t ghcr.io/${{ github.repository }}:${SANITIZED_REF} \
+            -t ghcr.io/${{ github.repository }}:beta \
+            $(printf 'ghcr.io/${{ github.repository }}@sha256:%s ' *)
+
+      - name: Inspect image
+        env:
+          GIT_REF: ${{ github.event.release.tag_name || github.ref_name }}
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          REPO="ghcr.io/${{ github.repository }}"
+          docker buildx imagetools inspect ${REPO}:${SANITIZED_REF}
+          docker buildx imagetools inspect ${REPO}:beta

.github/workflows/run_foss_spec.yml

@@ -1,10 +1,9 @@
 name: Run Chatwoot CE spec
+
 on:
   push:
-    branches:
+    tags:
-      - develop
+      - '*'
-      - master
-  pull_request:
   workflow_dispatch:
 
 jobs:

.husky/pre-commit

@@ -4,8 +4,8 @@
 # lint js and vue files
 npx --no-install lint-staged
 
-# lint only staged ruby files that still exist (not deleted)
+# lint only staged ruby files
-git diff --name-only --cached | xargs -I {} sh -c 'test -f "{}" && echo "{}"' | grep '\.rb$' | xargs -I {} bundle exec rubocop --force-exclusion -a "{}" || true
+git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion
 
 # stage rubocop changes to files
-git diff --name-only --cached | xargs -I {} sh -c 'test -f "{}" && git add "{}"' || true
+# git diff --name-only --cached | xargs git add

.nvmrc

@@ -1 +1 @@
-20.5.1
+23.7.0

.rubocop.yml

@@ -207,6 +207,7 @@ CustomCopLocation:
 
 AllCops:
   NewCops: enable
+  SuggestExtensions: false
   Exclude:
     - 'bin/**/*'
     - 'db/schema.rb'
@@ -337,3 +338,10 @@ FactoryBot/RedundantFactoryOption:
 
 FactoryBot/FactoryAssociationWithStrategy:
   Enabled: false
+
+Rails/SaveBang:
+  Enabled: true
+  AllowedReceivers:
+    - Stripe::Subscription
+    - Stripe::Customer
+    - FactoryBot

.vscode/settings.json

@@ -2,5 +2,6 @@
     "cSpell.words": [
         "chatwoot",
         "dompurify"
-    ]
+    ],
+    "css.customData": [".vscode/tailwind.json"]
 }

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+    "version": 1.1,
+    "atDirectives": [
+        {
+            "name": "@tailwind",
+            "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+                }
+            ]
+        },
+        {
+            "name": "@apply",
+            "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+                }
+            ]
+        },
+        {
+            "name": "@responsive",
+            "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+                }
+            ]
+        },
+        {
+            "name": "@screen",
+            "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+                }
+            ]
+        },
+        {
+            "name": "@variants",
+            "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+                }
+            ]
+        }
+    ]
+}

CUSTOM_BRANDING.md

@@ -0,0 +1,73 @@
+# Custom branding
+
+## Brand configuration
+
+Export environment variables and run rake task with `bundle exec rails branding:update`.
+
+> [!IMPORTANT]
+> Unset environment variables are reset to default values.
+
+```bash
+INSTALLATION_NAME="Chatwoot fazer.ai" \
+BRAND_NAME="My Company" \
+LOGO_THUMBNAIL="https://fazer.ai/logo-thumbnail.svg" \
+LOGO="https://fazer.ai/logo.svg" \
+bundle exec rails branding:update
+```
+
+| Environment variable | Default Value                               | Description                                                           |
+| :--------------------| :------------------------------------------ | :-------------------------------------------------------------------- |
+| `INSTALLATION_NAME`  | `Chatwoot`                                  | The installation-wide name used in the dashboard, title, etc.         |
+| `LOGO_THUMBNAIL`     | `/brand-assets/logo_thumbnail.svg`          | The thumbnail used for favicon (512px X 512px).                       |
+| `LOGO`               | `/brand-assets/logo.svg`                    | The logo used on the dashboard, login page, etc.                      |
+| `LOGO_DARK`          | `/brand-assets/logo_dark.svg`               | The logo used on the dashboard, login page, etc. for dark mode.       |
+| `BRAND_URL`          | `https://www.chatwoot.com`                  | The URL used in emails under the section “Powered By”.                |
+| `WIDGET_BRAND_URL`   | `https://www.chatwoot.com`                  | The URL used in the widget under the section “Powered By”.            |
+| `BRAND_NAME`         | `Chatwoot`                                  | The name used in emails and the widget.                               |
+| `TERMS_URL`          | `https://www.chatwoot.com/terms-of-service` | The terms of service URL displayed on the Signup Page.                |
+| `PRIVACY_URL`        | `https://www.chatwoot.com/privacy-policy`   | The privacy policy URL displayed in the app.                          |
+| `DISPLAY_MANIFEST`   | `true`                                      | Display default Chatwoot metadata like favicons and upgrade warnings. |
+
+## Favicon and other assets
+
+Update the favicon files in the [`public/`](public/) folder.
+
+Can also be done by creating a zip file with relevant files, and running [`deployment/extract_brand_assets.sh`](deployment/extract_brand_assets.sh) to override the existing favicons with your own.
+In this case, the zip file should be a flat archive containing the following files:
+
+```
+android-icon-36x36.png
+android-icon-48x48.png
+android-icon-72x72.png
+android-icon-96x96.png
+android-icon-144x144.png
+android-icon-192x192.png
+apple-icon-57x57.png
+apple-icon-60x60.png
+apple-icon-72x72.png
+apple-icon-76x76.png
+apple-icon-114x114.png
+apple-icon-120x120.png
+apple-icon-144x144.png
+apple-icon-152x152.png
+apple-icon-180x180.png
+apple-icon.png
+apple-icon-precomposed.png
+apple-touch-icon.png
+apple-touch-icon-precomposed.png
+favicon-16x16.png
+favicon-32x32.png
+favicon-96x96.png
+favicon-512x512.png
+favicon-badge-16x16.png
+favicon-badge-32x32.png
+favicon-badge-96x96.png
+ms-icon-70x70.png
+ms-icon-144x144.png
+ms-icon-150x150.png
+ms-icon-310x310.png
+```
+
+> [!NOTE]
+> You can include other assets in the zip file, and use them when running the rake task for `LOGO_THUMBNAIL`, `LOGO`, and `LOGO_DARK`.
+> See [Brand configuration](#brand-configuration).

Gemfile

@@ -43,7 +43,7 @@ gem 'down'
 # authentication type to fetch and send mail over oauth2.0
 gem 'gmail_xoauth'
 # Lock net-smtp to 0.3.4 to avoid issues with gmail_xoauth2
-gem 'net-smtp',  '~> 0.3.4'
+gem 'net-smtp', '~> 0.3.4'
 # Prevent CSV injection
 gem 'csv-safe'
 
@@ -198,6 +198,8 @@ gem 'ruby_llm-schema'
 
 gem 'shopify_api'
 
+gem 'resend', '~> 0.19.0'
+
 ### Gems required only in specific deployment environments ###
 ##############################################################
 

Gemfile.lock

@@ -724,6 +724,8 @@ GEM
       uber (< 0.2.0)
     request_store (1.5.1)
       rack (>= 1.4)
+    resend (0.19.0)
+      httparty (>= 0.21.0)
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
@@ -1087,6 +1089,7 @@ DEPENDENCIES
   rails (~> 7.1)
   redis
   redis-namespace
+  resend (~> 0.19.0)
   responders (>= 3.1.1)
   rest-client
   reverse_markdown

app/actions/contact_identify_action.rb

@@ -70,7 +70,7 @@ class ContactIdentifyAction
   end
 
   def merge_contacts?(existing_contact, key)
-    return if existing_contact.blank?
+    return false if existing_contact.blank?
 
     return true if params[:identifier].blank?
 

app/builders/messages/instagram/base_message_builder.rb

@@ -162,7 +162,7 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
   end
 
   def all_unsupported_files?
-    return if attachments.empty?
+    return false if attachments.empty?
 
     attachments_type = attachments.pluck(:type).uniq.first
     unsupported_file_type?(attachments_type)

app/builders/messages/instagram/message_builder.rb

@@ -30,7 +30,7 @@ class Messages::Instagram::MessageBuilder < Messages::Instagram::BaseMessageBuil
     # https://developers.facebook.com/docs/graph-api/guides/error-handling/ search for error code 1609005
     if error_code == 1_609_005
       @message.attachments.destroy_all
-      @message.update(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
+      @message.update!(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
     end
 
     Rails.logger.error("[InstagramStoryFetchError]: #{parsed_response.dig('error', 'message')} #{error_code}")

app/builders/messages/instagram/messenger/message_builder.rb

@@ -14,7 +14,7 @@ class Messages::Instagram::Messenger::MessageBuilder < Messages::Instagram::Base
   rescue Koala::Facebook::ClientError => e
     # The exception occurs when we are trying fetch the deleted story or blocked story.
     @message.attachments.destroy_all
-    @message.update(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
+    @message.update!(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
     Rails.logger.error e
     {}
   rescue StandardError => e

app/builders/messages/message_builder.rb

@@ -1,11 +1,11 @@
-class Messages::MessageBuilder
+class Messages::MessageBuilder # rubocop:disable Metrics/ClassLength
   include ::FileTypeHelper
   include ::EmailHelper
   include ::DataHelper
 
   attr_reader :message
 
-  def initialize(user, conversation, params)
+  def initialize(user, conversation, params) # rubocop:disable Metrics/CyclomaticComplexity
     @params = params
     @private = params[:private] || false
     @conversation = conversation
@@ -13,10 +13,12 @@ class Messages::MessageBuilder
     @account = conversation.account
     @message_type = params[:message_type] || 'outgoing'
     @attachments = params[:attachments]
+    @is_recorded_audio = params[:is_recorded_audio]
     @automation_rule = content_attributes&.dig(:automation_rule_id)
     return unless params.instance_of?(ActionController::Parameters)
 
     @in_reply_to = content_attributes&.dig(:in_reply_to)
+    @is_reaction = content_attributes&.dig(:is_reaction)
     @items = content_attributes&.dig(:items)
   end
 
@@ -55,7 +57,7 @@ class Messages::MessageBuilder
         account_id: @message.account_id,
         file: uploaded_attachment
       )
-
+      attachment.meta = process_metadata(uploaded_attachment)
       attachment.file_type = if uploaded_attachment.is_a?(String)
                                file_type_by_signed_id(
                                  uploaded_attachment
@@ -66,6 +68,22 @@ class Messages::MessageBuilder
     end
   end
 
+  def process_metadata(attachment) # rubocop:disable Metrics/CyclomaticComplexity,Metrics/PerceivedComplexity
+    # NOTE: `is_recorded_audio` can be either a boolean or an array of file names.
+    return unless @is_recorded_audio
+    return { is_recorded_audio: true } if @is_recorded_audio == true
+
+    return { is_recorded_audio: true } if @is_recorded_audio.is_a?(Array) && attachment.original_filename.in?(@is_recorded_audio)
+
+    # FIXME: Remove backwards compatibility with old format.
+    if @is_recorded_audio.is_a?(String)
+      parsed = JSON.parse(@is_recorded_audio)
+      { is_recorded_audio: true } if parsed.is_a?(Array) && attachment.original_filename.in?(parsed)
+    end
+  rescue JSON::ParserError
+    nil
+  end
+
   def process_emails
     return unless @conversation.inbox&.inbox_type == 'Email'
 
@@ -140,6 +158,7 @@ class Messages::MessageBuilder
       content_type: @params[:content_type],
       items: @items,
       in_reply_to: @in_reply_to,
+      is_reaction: @is_reaction,
       echo_id: @params[:echo_id],
       source_id: @params[:source_id]
     }.merge(external_created_at).merge(automation_rule_id).merge(campaign_id).merge(template_params)

app/builders/messages/messenger/message_builder.rb

@@ -68,7 +68,6 @@ class Messages::Messenger::MessageBuilder
     message.save!
   end
 
-  # This is a placeholder method to be overridden by child classes
   def get_story_object_from_source_id(_source_id)
     {}
   end

app/controllers/api/v1/accounts/automation_rules_controller.rb

@@ -24,7 +24,6 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
     ActiveRecord::Base.transaction do
       automation_rule_update
       process_attachments
-
     rescue StandardError => e
       Rails.logger.error e
       render json: { error: @automation_rule.errors.messages }.to_json, status: :unprocessable_entity

app/controllers/api/v1/accounts/callbacks_controller.rb

@@ -46,7 +46,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
     return if response['instagram_business_account'].blank?
 
     instagram_id = response['instagram_business_account']['id']
-    facebook_channel.update(instagram_id: instagram_id)
+    facebook_channel.update!(instagram_id: instagram_id)
   rescue StandardError => e
     Rails.logger.error "Error in set_instagram_id: #{e.message}"
   end

app/controllers/api/v1/accounts/conversations_controller.rb

@@ -110,10 +110,14 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def update_last_seen
+    dispatch_messages_read_event if assignee?
+
     update_last_seen_on_conversation(DateTime.now.utc, assignee?)
   end
 
   def unread
+    Rails.configuration.dispatcher.dispatch(Events::Types::CONVERSATION_UNREAD, Time.zone.now, conversation: @conversation)
+
     last_incoming_message = @conversation.messages.incoming.last
     last_seen_at = last_incoming_message.created_at - 1.second if last_incoming_message.present?
     update_last_seen_on_conversation(last_seen_at, true)
@@ -206,6 +210,12 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   def assignee?
     @conversation.assignee_id? && Current.user == @conversation.assignee
   end
+
+  def dispatch_messages_read_event
+    # NOTE: Use old `agent_last_seen_at`, so we reference messages received after that
+    Rails.configuration.dispatcher.dispatch(Events::Types::MESSAGES_READ, Time.zone.now, conversation: @conversation,
+                                                                                         last_seen_at: @conversation.agent_last_seen_at)
+  end
 end
 
 Api::V1::Accounts::ConversationsController.prepend_mod_with('Api::V1::Accounts::ConversationsController')

app/controllers/api/v1/accounts/dashboard_apps_controller.rb

@@ -34,6 +34,7 @@ class Api::V1::Accounts::DashboardAppsController < Api::V1::Accounts::BaseContro
   def permitted_payload
     params.require(:dashboard_app).permit(
       :title,
+      :show_on_sidebar,
       content: [:url, :type]
     )
   end

app/controllers/api/v1/accounts/inboxes_controller.rb

@@ -1,10 +1,10 @@
-class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController # rubocop:disable Metrics/ClassLength
   include Api::V1::InboxesHelper
   before_action :fetch_inbox, except: [:index, :create]
   before_action :fetch_agent_bot, only: [:set_agent_bot]
   before_action :validate_limit, only: [:create]
   # we are already handling the authorization in fetch inbox
-  before_action :check_authorization, except: [:show, :health]
+  before_action :check_authorization, except: [:show, :health, :setup_channel_provider]
   before_action :validate_whatsapp_cloud_channel, only: [:health]
 
   def index
@@ -65,6 +65,30 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def setup_channel_provider
+    channel = @inbox.channel
+
+    unless channel.respond_to?(:setup_channel_provider)
+      render json: { error: 'Channel does not support setup' }, status: :unprocessable_entity and return
+    end
+
+    channel.setup_channel_provider
+    head :ok
+  end
+
+  def disconnect_channel_provider
+    channel = @inbox.channel
+
+    unless channel.respond_to?(:disconnect_channel_provider)
+      render json: { error: 'Channel does not support disconnect' }, status: :unprocessable_entity and return
+    end
+
+    channel.disconnect_channel_provider
+    head :ok
+  ensure
+    channel.update_provider_connection!(connection: 'close') if channel.respond_to?(:update_provider_connection!)
+  end
+
   def destroy
     ::DeleteObjectJob.perform_later(@inbox, Current.user, request.ip) if @inbox.present?
     render status: :ok, json: { message: I18n.t('messages.inbox_deletetion_response') }
@@ -87,6 +111,20 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     render json: { error: e.message }, status: :unprocessable_entity
   end
 
+  def on_whatsapp
+    params.require(:phone_number)
+    phone_number = params[:phone_number]
+    channel = @inbox.channel
+
+    unless channel.respond_to?(:on_whatsapp)
+      render json: { error: 'Channel does not support whatsapp check' }, status: :unprocessable_entity and return
+    end
+
+    response = channel.on_whatsapp(phone_number)
+
+    render json: response, status: :ok
+  end
+
   private
 
   def fetch_inbox

app/controllers/api/v1/accounts/integrations/slack_controller.rb

@@ -16,7 +16,7 @@ class Api::V1::Accounts::Integrations::SlackController < Api::V1::Accounts::Base
   end
 
   def update
-    @hook = channel_builder.update(permitted_params[:reference_id])
+    @hook = channel_builder.update_reference_id(permitted_params[:reference_id])
     render json: { error: I18n.t('errors.slack.invalid_channel_id') }, status: :unprocessable_entity if @hook.blank?
   end
 

app/controllers/api/v1/accounts/notifications_controller.rb

@@ -25,17 +25,17 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
   end
 
   def update
-    @notification.update(read_at: DateTime.now.utc)
+    @notification.update!(read_at: DateTime.now.utc)
     render json: @notification
   end
 
   def unread
-    @notification.update(read_at: nil)
+    @notification.update!(read_at: nil)
     render json: @notification
   end
 
   def destroy
-    @notification.destroy
+    @notification.destroy!
     head :ok
   end
 
@@ -55,7 +55,7 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
 
   def snooze
     updated_meta = (@notification.meta || {}).merge('last_snoozed_at' => nil)
-    @notification.update(snoozed_until: parse_date_time(params[:snoozed_until].to_s), meta: updated_meta) if params[:snoozed_until]
+    @notification.update!(snoozed_until: parse_date_time(params[:snoozed_until].to_s), meta: updated_meta) if params[:snoozed_until]
     render json: @notification
   end
 

app/controllers/api/v1/accounts/portals_controller.rb

@@ -37,7 +37,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def archive
-    @portal.update(archive: true)
+    @portal.update!(archive: true)
     head :ok
   end
 

app/controllers/api/v1/accounts/webhooks_controller.rb

@@ -7,12 +7,12 @@ class Api::V1::Accounts::WebhooksController < Api::V1::Accounts::BaseController
   end
 
   def create
-    @webhook = Current.account.webhooks.new(webhook_params)
+    @webhook = Current.account.webhooks.new(webhook_create_params)
     @webhook.save!
   end
 
   def update
-    @webhook.update!(webhook_params)
+    @webhook.update!(webhook_update_params)
   end
 
   def destroy
@@ -22,10 +22,14 @@ class Api::V1::Accounts::WebhooksController < Api::V1::Accounts::BaseController
 
   private
 
-  def webhook_params
+  def webhook_create_params
     params.require(:webhook).permit(:inbox_id, :name, :url, subscriptions: [])
   end
 
+  def webhook_update_params
+    params.require(:webhook).permit(:name, subscriptions: [])
+  end
+
   def fetch_webhook
     @webhook = Current.account.webhooks.find(params[:id])
   end

app/controllers/api/v1/profiles_controller.rb

@@ -26,10 +26,14 @@ class Api::V1::ProfilesController < Api::BaseController
 
   def availability
     @user.account_users.find_by!(account_id: availability_params[:account_id]).update!(availability: availability_params[:availability])
+
+    Rails.configuration.dispatcher.dispatch(Events::Types::ACCOUNT_PRESENCE_UPDATED, Time.zone.now, account_id: availability_params[:account_id],
+                                                                                                    user_id: @current_user.id,
+                                                                                                    status: availability_params[:availability])
   end
 
   def set_active_account
-    @user.account_users.find_by(account_id: profile_params[:account_id]).update(active_at: Time.now.utc)
+    @user.account_users.find_by(account_id: profile_params[:account_id]).update!(active_at: Time.now.utc)
     head :ok
   end
 

app/controllers/api/v1/widget/contacts_controller.rb

@@ -19,7 +19,7 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
       contact = @contact
     end
 
-    @contact_inbox.update(hmac_verified: true) if should_verify_hmac? && valid_hmac?
+    @contact_inbox.update!(hmac_verified: true) if should_verify_hmac? && valid_hmac?
 
     identify_contact(contact)
   end

app/controllers/api/v1/widget/conversations_controller.rb

@@ -48,6 +48,8 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
     case permitted_params[:typing_status]
     when 'on'
       trigger_typing_event(CONVERSATION_TYPING_ON)
+    when 'recording'
+      trigger_typing_event(CONVERSATION_RECORDING)
     when 'off'
       trigger_typing_event(CONVERSATION_TYPING_OFF)
     end
@@ -82,7 +84,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def render_not_found_if_empty
-    return head :not_found if conversation.nil?
+    head :not_found if conversation.nil?
   end
 
   def permitted_params

app/controllers/api_controller.rb

@@ -12,7 +12,7 @@ class ApiController < ApplicationController
 
   def redis_status
     r = Redis.new(Redis::Config.app)
-    return 'ok' if r.ping
+    'ok' if r.ping
   rescue Redis::CannotConnectError
     'failing'
   end

app/controllers/platform/api/v1/accounts_controller.rb

@@ -12,7 +12,7 @@ class Platform::Api::V1::AccountsController < PlatformController
     @resource = Account.create!(account_params)
     update_resource_features
     @resource.save!
-    @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
+    @platform_app.platform_app_permissibles.find_or_create_by!(permissible: @resource)
   end
 
   def update

app/controllers/platform/api/v1/agent_bots_controller.rb

@@ -12,7 +12,7 @@ class Platform::Api::V1::AgentBotsController < PlatformController
     @resource = AgentBot.new(agent_bot_params.except(:avatar_url))
     @resource.save!
     process_avatar_from_url
-    @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
+    @platform_app.platform_app_permissibles.find_or_create_by!(permissible: @resource)
   end
 
   def update

app/controllers/public/api/v1/inboxes/contacts_controller.rb

@@ -31,7 +31,7 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
     return if params[:identifier_hash].blank? && !@inbox_channel.hmac_mandatory
     raise StandardError, 'HMAC failed: Invalid Identifier Hash Provided' unless valid_hmac?
 
-    @contact_inbox.update(hmac_verified: true) if @contact_inbox.present?
+    @contact_inbox.update!(hmac_verified: true) if @contact_inbox.present?
   end
 
   def valid_hmac?

app/controllers/public/api/v1/inboxes/conversations_controller.rb

@@ -30,6 +30,8 @@ class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::Inbox
     case params[:typing_status]
     when 'on'
       trigger_typing_event(CONVERSATION_TYPING_ON)
+    when 'recording'
+      trigger_typing_event(CONVERSATION_RECORDING)
     when 'off'
       trigger_typing_event(CONVERSATION_TYPING_OFF)
     end

app/controllers/super_admin/account_users_controller.rb

@@ -13,7 +13,7 @@ class SuperAdmin::AccountUsersController < SuperAdmin::ApplicationController
     resource = resource_class.new(resource_params)
     authorize_resource(resource)
 
-    notice =  resource.save ? translate_with_resource('create.success') : resource.errors.full_messages.first
+    notice = resource.save ? translate_with_resource('create.success') : resource.errors.full_messages.first
     redirect_back(fallback_location: [namespace, resource.account], notice: notice)
   end
 

app/controllers/super_admin/app_configs_controller.rb

@@ -19,7 +19,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
     params['app_config'].each do |key, value|
       next unless @allowed_configs.include?(key)
 
-      i = InstallationConfig.where(name: key).first_or_create(value: value, locked: false)
+      i = InstallationConfig.where(name: key).first_or_create!(value: value, locked: false)
       i.value = value
       errors.concat(i.errors.full_messages) unless i.save
     end

app/controllers/super_admin/instance_statuses_controller.rb

@@ -7,6 +7,7 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
     redis_metrics
     chatwoot_edition
     instance_meta
+    baileys_api_version
   end
 
   def chatwoot_edition
@@ -56,4 +57,10 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
   rescue Redis::CannotConnectError
     @metrics['Redis alive'] = false
   end
+
+  def baileys_api_version
+    @metrics['Baileys API version'] = Whatsapp::Providers::WhatsappBaileysService.status[:packageInfo][:version]
+  rescue Whatsapp::Providers::WhatsappBaileysService::ProviderUnavailableError => e
+    @metrics['Baileys API version'] = e.message
+  end
 end

app/controllers/webhooks/whatsapp_controller.rb

@@ -8,11 +8,26 @@ class Webhooks::WhatsappController < ActionController::API
       return
     end
 
+    perform_whatsapp_events_job
+  end
+
+  private
+
+  def perform_whatsapp_events_job
+    perform_sync if params[:awaitResponse].present?
+    return if performed?
+
     Webhooks::WhatsappEventsJob.perform_later(params.to_unsafe_hash)
     head :ok
   end
 
-  private
+  def perform_sync
+    Webhooks::WhatsappEventsJob.perform_now(params.to_unsafe_hash)
+  rescue Whatsapp::IncomingMessageBaileysService::InvalidWebhookVerifyToken
+    head :unauthorized
+  rescue Whatsapp::IncomingMessageBaileysService::MessageNotFoundError
+    head :not_found
+  end
 
   def valid_token?(token)
     channel = Channel::Whatsapp.find_by(phone_number: params[:phone_number])

app/dispatchers/async_dispatcher.rb

@@ -18,7 +18,8 @@ class AsyncDispatcher < BaseDispatcher
       NotificationListener.instance,
       ParticipationListener.instance,
       ReportingEventListener.instance,
-      WebhookListener.instance
+      WebhookListener.instance,
+      ChannelListener.instance
     ]
   end
 end

app/helpers/baileys_helper.rb

@@ -0,0 +1,45 @@
+module BaileysHelper
+  CHANNEL_LOCK_ON_OUTGOING_MESSAGE_KEY = 'BAILEYS::CHANNEL_LOCK_ON_OUTGOING_MESSAGE::%<channel_id>s'.freeze
+  CHANNEL_LOCK_ON_OUTGOING_MESSAGE_TIMEOUT = 15.seconds
+
+  def baileys_extract_message_timestamp(timestamp)
+    # NOTE: Timestamp might be in this format {"low"=>1748003165, "high"=>0, "unsigned"=>true}
+    if timestamp.is_a?(Hash) && timestamp.key?('low')
+      low = timestamp['low'].to_i
+      high = timestamp.fetch('high', 0).to_i
+      return (high << 32) | low
+    end
+
+    # NOTE: Timestamp might be a string or a number
+    timestamp.to_i
+  end
+
+  def with_baileys_channel_lock_on_outgoing_message(channel_id, timeout: CHANNEL_LOCK_ON_OUTGOING_MESSAGE_TIMEOUT)
+    raise ArgumentError, 'A block is required for with_baileys_channel_lock_on_outgoing_message' unless block_given?
+
+    start_time = Time.now.to_i
+
+    # NOTE: On timeout, we ignore the lock and proceed with the block execution
+    while (Time.now.to_i - start_time) < timeout
+      break if baileys_lock_channel_on_outgoing_message(channel_id, timeout)
+
+      sleep(0.1)
+    end
+
+    yield
+  ensure
+    baileys_clear_channel_lock_on_outgoing_message(channel_id)
+  end
+
+  private
+
+  def baileys_lock_channel_on_outgoing_message(channel_id, timeout)
+    key = format(CHANNEL_LOCK_ON_OUTGOING_MESSAGE_KEY, channel_id: channel_id)
+    Redis::Alfred.set(key, 1, nx: true, ex: timeout)
+  end
+
+  def baileys_clear_channel_lock_on_outgoing_message(channel_id)
+    key = format(CHANNEL_LOCK_ON_OUTGOING_MESSAGE_KEY, channel_id: channel_id)
+    Redis::Alfred.delete(key)
+  end
+end

app/helpers/cache_keys_helper.rb

@@ -10,6 +10,6 @@ module CacheKeysHelper
     return value_from_cache if value_from_cache.present?
 
     # zero epoch time: 1970-01-01 00:00:00 UTC
-    '0000000000'
+    '0000000000000'
   end
 end

app/helpers/frontend_urls_helper.rb

@@ -1,6 +1,8 @@
 module FrontendUrlsHelper
   def frontend_url(path, **query_params)
     url_params = query_params.blank? ? '' : "?#{query_params.to_query}"
-    "#{root_url}app/#{path}#{url_params}"
+    host = ENV.fetch('FRONTEND_URL', root_url)
+    host = "#{host}/" unless host.end_with?('/')
+    "#{host}app/#{path}#{url_params}"
   end
 end

app/helpers/reporting_event_helper.rb

@@ -65,8 +65,8 @@ module ReportingEventHelper
   end
 
   def format_time(hour, minute)
-    hour = hour < 10 ? "0#{hour}" : hour
+    hour = "0#{hour}" if hour < 10
-    minute = minute < 10 ? "0#{minute}" : minute
+    minute = "0#{minute}" if minute < 10
     "#{hour}:#{minute}"
   end
 end

app/helpers/timezone_helper.rb

@@ -14,6 +14,6 @@ module TimezoneHelper
       zone.now.utc_offset == offset_in_seconds
     end
 
-    return matching_zone.name if matching_zone
+    matching_zone&.name
   end
 end

app/javascript/dashboard/api/inbox/message.js

@@ -8,6 +8,7 @@ export const buildCreatePayload = ({
   contentAttributes,
   echoId,
   files,
+  isRecordedAudio,
   ccEmails = '',
   bccEmails = '',
   toEmails = '',
@@ -22,6 +23,9 @@ export const buildCreatePayload = ({
     files.forEach(file => {
       payload.append('attachments[]', file);
     });
+    isRecordedAudio?.forEach(filename => {
+      payload.append('is_recorded_audio[]', filename);
+    });
     payload.append('private', isPrivate);
     payload.append('echo_id', echoId);
     payload.append('cc_emails', ccEmails);
@@ -60,6 +64,7 @@ class MessageApi extends ApiClient {
     contentAttributes,
     echo_id: echoId,
     files,
+    isRecordedAudio,
     ccEmails = '',
     bccEmails = '',
     toEmails = '',
@@ -74,6 +79,7 @@ class MessageApi extends ApiClient {
         contentAttributes,
         echoId,
         files,
+        isRecordedAudio,
         ccEmails,
         bccEmails,
         toEmails,

app/javascript/dashboard/api/inboxes.js

@@ -32,6 +32,14 @@ class Inboxes extends CacheEnabledApiClient {
   syncTemplates(inboxId) {
     return axios.post(`${this.url}/${inboxId}/sync_templates`);
   }
+
+  setupChannelProvider(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/setup_channel_provider`);
+  }
+
+  disconnectChannelProvider(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/disconnect_channel_provider`);
+  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/assets/images/curved-arrow.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="#2781F6"
+	xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.816 302.816">
+	<path d="M298.423,152.996c-5.857-5.858-15.354-5.858-21.213,0l-35.137,35.136
+	c-5.871-59.78-50.15-111.403-112.001-123.706c-45.526-9.055-92.479,5.005-125.596,37.612c-5.903,5.813-5.977,15.31-0.165,21.213
+	c5.813,5.903,15.31,5.977,21.212,0.164c26.029-25.628,62.923-36.679,98.695-29.565c48.865,9.72,83.772,50.677,88.07,97.978
+	l-38.835-38.835c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l62.485,62.485
+	c2.929,2.929,6.768,4.393,10.606,4.393s7.678-1.464,10.607-4.393l62.483-62.482C304.281,168.352,304.281,158.854,298.423,152.996z" />
+</svg>

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -16,6 +16,8 @@ import ContentTemplateSelector from './ContentTemplateSelector.vue';
 const props = defineProps({
   attachedFiles: { type: Array, default: () => [] },
   isWhatsappInbox: { type: Boolean, default: false },
+  isWhatsappBaileysInbox: { type: Boolean, default: false },
+  isWhatsappZapiInbox: { type: Boolean, default: false },
   isEmailOrWebWidgetInbox: { type: Boolean, default: false },
   isTwilioSmsInbox: { type: Boolean, default: false },
   isTwilioWhatsAppInbox: { type: Boolean, default: false },
@@ -77,7 +79,11 @@ const shouldShowEmojiButton = computed(() => {
 });
 
 const isRegularMessageMode = computed(() => {
-  return !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox;
+  return (
+    (!props.isWhatsappInbox && !props.isTwilioWhatsAppInbox) ||
+    props.isWhatsappBaileysInbox ||
+    props.isWhatsappZapiInbox
+  );
 });
 
 const setSignature = () => {

app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue

@@ -66,6 +66,12 @@ const inboxTypes = computed(() => ({
   isEmail: props.targetInbox?.channelType === INBOX_TYPES.EMAIL,
   isTwilio: props.targetInbox?.channelType === INBOX_TYPES.TWILIO,
   isWhatsapp: props.targetInbox?.channelType === INBOX_TYPES.WHATSAPP,
+  isWhatsappBaileys:
+    props.targetInbox?.channelType === INBOX_TYPES.WHATSAPP &&
+    props.targetInbox?.provider === 'baileys',
+  isWhatsappZapi:
+    props.targetInbox?.channelType === INBOX_TYPES.WHATSAPP &&
+    props.targetInbox?.provider === 'zapi',
   isWebWidget: props.targetInbox?.channelType === INBOX_TYPES.WEB,
   isApi: props.targetInbox?.channelType === INBOX_TYPES.API,
   isEmailOrWebWidget:
@@ -297,7 +303,9 @@ const handleSendTwilioMessage = async ({ message, templateParams }) => {
 
 const shouldShowMessageEditor = computed(() => {
   return (
-    !inboxTypes.value.isWhatsapp &&
+    (!inboxTypes.value.isWhatsapp ||
+      inboxTypes.value.isWhatsappBaileys ||
+      inboxTypes.value.isWhatsappZapi) &&
     !showNoInboxAlert.value &&
     !inboxTypes.value.isTwilioWhatsapp
   );
@@ -371,6 +379,8 @@ const shouldShowMessageEditor = computed(() => {
     <ActionButtons
       :attached-files="state.attachedFiles"
       :is-whatsapp-inbox="inboxTypes.isWhatsapp"
+      :is-whatsapp-baileys-inbox="inboxTypes.isWhatsappBaileys"
+      :is-whatsapp-zapi-inbox="inboxTypes.isWhatsappZapi"
       :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
       :is-twilio-sms-inbox="inboxTypes.isTwilioSMS"
       :is-twilio-whats-app-inbox="inboxTypes.isTwilioWhatsapp"

app/javascript/dashboard/components-next/banner/PromoBanner.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { computed } from 'vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  variant: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'success', 'warning'].includes(value),
+  },
+  ctaText: {
+    type: String,
+    default: '',
+  },
+  ctaLink: {
+    type: String,
+    default: '',
+  },
+  ctaExternal: {
+    type: Boolean,
+    default: false,
+  },
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  logoSrc: {
+    type: String,
+    default: '',
+  },
+  logoAlt: {
+    type: String,
+    default: 'Logo',
+  },
+});
+
+const emit = defineEmits(['ctaClick']);
+
+const variantClasses = computed(() => {
+  const variants = {
+    info: {
+      container: 'bg-woot-50 border-woot-200',
+      icon: 'i-lucide-info text-woot-600',
+      text: 'text-woot-700',
+      description: 'text-woot-600',
+    },
+    success: {
+      container: 'bg-green-50 border-green-200',
+      icon: 'i-lucide-sparkles text-green-600',
+      text: 'text-green-700',
+      description: 'text-green-600',
+    },
+    warning: {
+      container: 'bg-yellow-50 border-yellow-200',
+      icon: 'i-lucide-alert-circle text-yellow-600',
+      text: 'text-yellow-700',
+      description: 'text-yellow-600',
+    },
+  };
+  return variants[props.variant];
+});
+
+const handleCtaClick = () => {
+  emit('ctaClick');
+};
+</script>
+
+<template>
+  <div
+    class="relative flex items-start gap-3 p-4 rounded-lg border"
+    :class="variantClasses.container"
+  >
+    <div v-if="logoSrc || showIcon" class="flex-shrink-0 mt-0.5">
+      <img
+        v-if="logoSrc"
+        :src="logoSrc"
+        :alt="logoAlt"
+        class="w-8 h-8 object-contain"
+      />
+      <i v-else class="w-5 h-5" :class="variantClasses.icon" />
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <h3 class="text-sm font-semibold mb-1" :class="variantClasses.text">
+        {{ title }}
+      </h3>
+      <p class="text-sm leading-relaxed" :class="variantClasses.description">
+        {{ description }}
+      </p>
+
+      <div v-if="ctaText" class="mt-3">
+        <a
+          v-if="ctaLink"
+          :href="ctaLink"
+          :target="ctaExternal ? '_blank' : '_self'"
+          :rel="ctaExternal ? 'noopener noreferrer' : undefined"
+          class="inline-block"
+        >
+          <NextButton
+            sm
+            :color-scheme="variant === 'success' ? 'primary' : 'secondary'"
+            type="button"
+          >
+            {{ ctaText }}
+          </NextButton>
+        </a>
+        <NextButton
+          v-else
+          sm
+          :color-scheme="variant === 'success' ? 'primary' : 'secondary'"
+          type="button"
+          @click="handleCtaClick"
+        >
+          {{ ctaText }}
+        </NextButton>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue

@@ -44,7 +44,7 @@ const triggerClick = () => {
     <component
       :is="componentIs"
       v-bind="$attrs"
-      class="flex text-left rtl:text-right items-center p-2 reset-base text-sm text-n-slate-12 w-full border-0"
+      class="flex text-left rtl:text-right items-center p-2 reset-base text-sm text-n-slate-12 w-full border-0 cursor-pointer"
       :class="{
         'hover:bg-n-alpha-2 rounded-lg w-full gap-3': !$slots.default,
       }"

app/javascript/dashboard/components-next/message/MessageMeta.vue

@@ -32,7 +32,10 @@ const {
 } = useMessageContext();
 
 const readableTime = computed(() =>
-  messageTimestamp(createdAt.value, 'LLL d, h:mm a')
+  messageTimestamp(
+    contentAttributes?.value?.externalCreatedAt ?? createdAt.value,
+    'LLL d, h:mm a'
+  )
 );
 
 const showStatusIndicator = computed(() => {

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -71,6 +71,7 @@ provideSidebarContext({
 
 const inboxes = useMapGetter('inboxes/getInboxes');
 const labels = useMapGetter('labels/getLabelsOnSidebar');
+const dashboardApps = useMapGetter('dashboardApps/getAppsOnSidebar');
 const teams = useMapGetter('teams/getMyTeams');
 const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
 const conversationCustomViews = useMapGetter(
@@ -85,6 +86,7 @@ onMounted(() => {
   store.dispatch('attributes/get');
   store.dispatch('customViews/get', 'conversation');
   store.dispatch('customViews/get', 'contact');
+  store.dispatch('dashboardApps/get');
 });
 
 const sortedInboxes = computed(() =>
@@ -125,7 +127,7 @@ const newReportRoutes = () => [
 const reportRoutes = computed(() => newReportRoutes());
 
 const menuItems = computed(() => {
-  return [
+  const items = [
     {
       name: 'Inbox',
       label: t('SIDEBAR.INBOX'),
@@ -580,6 +582,23 @@ const menuItems = computed(() => {
       ],
     },
   ];
+
+  if (dashboardApps.value.length > 0) {
+    const settingsIndex = items.findIndex(item => item.name === 'Settings');
+    items.splice(settingsIndex, 0, {
+      name: 'Apps',
+      label: t('SIDEBAR.APPS'),
+      icon: 'i-lucide-layout-grid',
+      children: dashboardApps.value.map(app => ({
+        name: `app-${app.id}`,
+        label: app.title,
+        to: accountScopedRoute('dashboard_app_view', { appId: app.id }),
+        activeOn: ['dashboard_app_view'],
+      })),
+    });
+  }
+
+  return items;
 });
 </script>
 

app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue

@@ -73,7 +73,10 @@ const emitNewAccount = () => {
         />
       </button>
     </template>
-    <DropdownBody v-if="showAccountSwitcher" class="min-w-80 z-50">
+    <DropdownBody
+      v-if="showAccountSwitcher"
+      class="min-w-80 z-50 max-h-[80vh] overflow-y-auto"
+    >
       <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_ACCOUNT')">
         <DropdownItem
           v-for="account in sortedCurrentUserAccounts"

app/javascript/dashboard/components-next/switch/Switch.vue

@@ -1,6 +1,13 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 
+const props = defineProps({
+  id: {
+    type: String,
+    default: undefined,
+  },
+});
+
 const emit = defineEmits(['change']);
 
 const { t } = useI18n();
@@ -18,6 +25,7 @@ const updateValue = () => {
 
 <template>
   <button
+    :id="props.id"
     type="button"
     class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2 flex-shrink-0"
     :class="modelValue ? 'bg-n-brand' : 'bg-n-slate-6 disabled:bg-n-slate-6/60'"

app/javascript/dashboard/components/Code.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import 'highlight.js/styles/default.css';
 import 'highlight.js/lib/common';
 import NextButton from 'dashboard/components-next/button/Button.vue';
@@ -24,10 +24,20 @@ const props = defineProps({
     type: String,
     default: 'Chatwoot Codepen',
   },
+  secure: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { t } = useI18n();
 
+const isVisible = ref(false);
+
+const toggleVisibility = () => {
+  isVisible.value = !isVisible.value;
+};
+
 const scrubbedScript = computed(() => {
   // remove trailing and leading extra lines and not spaces
   const scrubbed = props.script.replace(/^\s*[\r\n]/gm, '');
@@ -52,6 +62,10 @@ const codepenScriptValue = computed(() => {
   });
 });
 
+const shouldShowScript = computed(() => {
+  return !props.secure || isVisible.value;
+});
+
 const onCopy = async e => {
   e.preventDefault();
   await copyTextToClipboard(scrubbedScript.value);
@@ -80,6 +94,14 @@ const onCopy = async e => {
           :label="t('COMPONENTS.CODE.CODEPEN')"
         />
       </form>
+      <NextButton
+        v-if="secure"
+        slate
+        xs
+        faded
+        :icon="isVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+        @click="toggleVisibility"
+      />
       <NextButton
         slate
         xs
@@ -89,10 +111,16 @@ const onCopy = async e => {
       />
     </div>
     <highlightjs
-      v-if="script"
+      v-if="script && shouldShowScript"
       :language="lang"
       :code="scrubbedScript"
       class="[&_code]:text-start"
     />
+    <highlightjs
+      v-else-if="script && secure && !isVisible"
+      :language="lang"
+      code="••••••••••••••••••••••••••••••••"
+      class="[&_code]:text-start"
+    />
   </div>
 </template>

app/javascript/dashboard/components/app/UpdateBanner.vue

@@ -73,7 +73,7 @@ export default {
     v-if="shouldShowBanner"
     color-scheme="primary"
     :banner-message="bannerMessage"
-    href-link="https://github.com/chatwoot/chatwoot/releases"
+    href-link="https://github.com/fazer-ai/chatwoot/releases"
     :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
     has-close-button
     @close="dismissUpdateBanner"

app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -25,7 +25,7 @@ export default {
   },
   data() {
     return {
-      hasOpenedAtleastOnce: false,
+      hasOpenedAtleastOnce: this.isVisible,
       iframeLoading: true,
     };
   },
@@ -46,8 +46,8 @@ export default {
     },
   },
   watch: {
-    isVisible() {
+    isVisible(value) {
-      if (this.isVisible) {
+      if (value) {
         this.hasOpenedAtleastOnce = true;
       }
     },

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -1,11 +1,24 @@
 <script setup>
 import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+import { computed } from 'vue';
 
-defineProps({
+const props = defineProps({
   inbox: {
     type: Object,
     default: () => {},
   },
+  withPhoneNumber: {
+    type: Boolean,
+    default: false,
+  },
+  withProviderConnectionStatus: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const providerConnection = computed(() => {
+  return props.inbox.provider_connection?.connection;
 });
 </script>
 
@@ -18,5 +31,17 @@ defineProps({
     <span class="truncate">
       {{ inbox.name }}
     </span>
+    <span v-if="withPhoneNumber" class="ml-2 text-n-slate-12">{{
+      inbox.phone_number
+    }}</span>
+    <span v-if="withProviderConnectionStatus" class="ml-2">
+      <fluent-icon
+        icon="circle"
+        type="filled"
+        :class="
+          providerConnection === 'open' ? 'text-green-500' : 'text-n-slate-8'
+        "
+      />
+    </span>
   </div>
 </template>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -23,6 +23,7 @@ import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
+import { useMapGetter } from 'dashboard/composables/store';
 
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { CONVERSATION_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -46,11 +47,10 @@ import {
 } from '@chatwoot/prosemirror-schema/src/mentions/plugin';
 
 import {
-  appendSignature,
   findNodeToInsertImage,
   getContentNode,
+  cleanSignature,
   insertAtCursor,
-  removeSignature as removeSignatureHelper,
   scrollCursorIntoView,
   setURLWithQueryAndSize,
 } from 'dashboard/helper/editorHelper';
@@ -126,6 +126,8 @@ const createState = (
 const { isEditorHotKeyEnabled, fetchSignatureFlagFromUISettings } =
   useUISettings();
 
+const currentUser = useMapGetter('getCurrentUser');
+
 const typingIndicator = createTypingIndicator(
   () => emit('typingOn'),
   () => emit('typingOff'),
@@ -280,8 +282,27 @@ watch(showToolsMenu, updatedValue => {
 function focusEditorInputField(pos = 'end') {
   const { tr } = editorView.state;
 
-  const selection =
+  // Check if signature is at start and adjust cursor position accordingly
-    pos === 'end' ? Selection.atEnd(tr.doc) : Selection.atStart(tr.doc);
+  const signaturePosition =
+    currentUser.value?.ui_settings?.signature_position || 'top';
+  const hasSignature = sendWithSignature.value && props.signature;
+
+  let selection;
+  if (pos === 'end' || !hasSignature || signaturePosition !== 'top') {
+    selection =
+      pos === 'end' ? Selection.atEnd(tr.doc) : Selection.atStart(tr.doc);
+  } else {
+    // Position cursor after signature when signature is at start
+    const signatureLength = props.signature
+      ? cleanSignature(props.signature).length
+      : 0;
+    const separatorLength =
+      currentUser.value?.ui_settings?.signature_separator === '--' ? 6 : 2; // "\n--\n" vs "\n\n"
+    const cursorPos = signatureLength + separatorLength;
+    selection = Selection.near(
+      tr.doc.resolve(Math.min(cursorPos, tr.doc.content.size))
+    );
+  }
 
   editorView.dispatch(tr.setSelection(selection));
   editorView.focus();
@@ -291,14 +312,8 @@ function isBodyEmpty(content) {
   // if content is undefined, we assume that the body is empty
   if (!content) return true;
 
-  // if the signature is present, we need to remove it before checking
-  // note that we don't update the editorView, so this is safe
-  const bodyWithoutSignature = props.signature
-    ? removeSignatureHelper(content, props.signature)
-    : content;
-
   // trimming should remove all the whitespaces, so we can check the length
-  return bodyWithoutSignature.trim().length === 0;
+  return content.trim().length === 0;
 }
 
 function handleEmptyBodyWithSignature() {
@@ -357,39 +372,6 @@ function reloadState(content = props.modelValue) {
   focusEditor(unrefContent);
 }
 
-function addSignature() {
-  let content = props.modelValue;
-  // see if the content is empty, if it is before appending the signature
-  // we need to add a paragraph node and move the cursor at the start of the editor
-  const contentWasEmpty = isBodyEmpty(content);
-  content = appendSignature(content, props.signature);
-  // need to reload first, ensuring that the editorView is updated
-  reloadState(content);
-
-  if (contentWasEmpty) {
-    handleEmptyBodyWithSignature();
-  }
-}
-
-function removeSignature() {
-  if (!props.signature) return;
-  let content = props.modelValue;
-  content = removeSignatureHelper(content, props.signature);
-  // reload the state, ensuring that the editorView is updated
-  reloadState(content);
-}
-
-function toggleSignatureInEditor(signatureEnabled) {
-  // The toggleSignatureInEditor gets the new value from the
-  // watcher, this means that if the value is true, the signature
-  // is supposed to be added, else we remove it.
-  if (signatureEnabled) {
-    addSignature();
-  } else {
-    removeSignature();
-  }
-}
-
 function setToolbarPosition() {
   const editorRect = editorRoot.value.getBoundingClientRect();
   const rect = selectedImageNode.value.getBoundingClientRect();
@@ -600,7 +582,11 @@ function createEditorView() {
     handleDOMEvents: {
       keyup: () => {
         if (!props.disabled) {
-          typingIndicator.start();
+          if (props.modelValue.length) {
+            typingIndicator.start();
+          } else {
+            typingIndicator.stop();
+          }
           updateImgToolbarOnDelete();
         }
       },
@@ -670,13 +656,6 @@ watch(
   }
 );
 
-watch(sendWithSignature, newValue => {
-  // see if the allowSignature flag is true
-  if (props.allowSignature) {
-    toggleSignatureInEditor(newValue);
-  }
-});
-
 onMounted(() => {
   // [VITE] state assignment was done in created before
   state = createState(

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -348,7 +348,7 @@ export default {
         v-if="showMessageSignatureButton"
         v-tooltip.top-end="signatureToggleTooltip"
         icon="i-ph-signature"
-        slate
+        :color="sendWithSignature ? 'blue' : 'slate'"
         faded
         sm
         @click="toggleMessageSignature"

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -39,6 +39,9 @@ export default {
       currentChat: 'getSelectedChat',
       dashboardApps: 'dashboardApps/getRecords',
     }),
+    conversationDashboardApps() {
+      return this.dashboardApps.filter(app => !app.show_on_sidebar);
+    },
     dashboardAppTabs() {
       return [
         {
@@ -46,7 +49,7 @@ export default {
           index: 0,
           name: this.$t('CONVERSATION.DASHBOARD_APP_TAB_MESSAGES'),
         },
-        ...this.dashboardApps.map((dashboardApp, index) => ({
+        ...this.conversationDashboardApps.map((dashboardApp, index) => ({
           key: `dashboard-${dashboardApp.id}`,
           index: index + 1,
           name: dashboardApp.title,
@@ -102,7 +105,7 @@ export default {
       :show-back-button="isOnExpandedLayout && !isInboxView"
     />
     <woot-tabs
-      v-if="dashboardApps.length && currentChat.id"
+      v-if="conversationDashboardApps.length && currentChat.id"
       :index="activeIndex"
       class="-mt-px border-t border-t-n-background"
       @change="onDashboardAppTabChange"
@@ -130,11 +133,11 @@ export default {
       <slot />
     </div>
     <DashboardAppFrame
-      v-for="(dashboardApp, index) in dashboardApps"
+      v-for="(dashboardApp, index) in conversationDashboardApps"
       v-show="activeIndex - 1 === index"
       :key="currentChat.id + '-' + dashboardApp.id"
       :is-visible="activeIndex - 1 === index"
-      :config="dashboardApps[index].content"
+      :config="conversationDashboardApps[index].content"
       :position="index"
       :current-chat="currentChat"
     />

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -5,6 +5,9 @@ import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useAI } from 'dashboard/composables/useAI';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAlert } from 'dashboard/composables';
+import { useStore } from 'vuex';
 
 // components
 import ReplyBox from './ReplyBox.vue';
@@ -36,6 +39,7 @@ import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import WhatsappLinkDeviceModal from '../../../routes/dashboard/settings/inbox/components/WhatsappLinkDeviceModal.vue';
 
 export default {
   components: {
@@ -44,12 +48,15 @@ export default {
     Banner,
     ConversationLabelSuggestion,
     Spinner,
+    WhatsappLinkDeviceModal,
   },
   mixins: [inboxMixin],
   setup() {
+    const { isAdmin } = useAdmin();
     const isPopOutReplyBox = ref(false);
     const conversationPanelRef = ref(null);
     const { isEnterprise } = useConfig();
+    const store = useStore();
 
     const keyboardEvents = {
       Escape: {
@@ -78,6 +85,8 @@ export default {
       fetchIntegrationsIfRequired,
       fetchLabelSuggestions,
       conversationPanelRef,
+      isAdmin,
+      store,
     };
   },
   data() {
@@ -89,6 +98,7 @@ export default {
       isProgrammaticScroll: false,
       messageSentSinceOpened: false,
       labelSuggestions: [],
+      showLinkDeviceModal: false,
     };
   },
 
@@ -99,6 +109,9 @@ export default {
       listLoadingStatus: 'getAllMessagesLoaded',
       currentAccountId: 'getCurrentAccountId',
     }),
+    currentInbox() {
+      return this.$store.getters['inboxes/getInbox'](this.currentChat.inbox_id);
+    },
     isOpen() {
       return this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
     },
@@ -243,6 +256,9 @@ export default {
 
       return { incoming, outgoing };
     },
+    inboxProviderConnection() {
+      return this.currentInbox.provider_connection?.connection;
+    },
   },
 
   watch: {
@@ -443,12 +459,75 @@ export default {
       const payload = useSnakeCase(message);
       await this.$store.dispatch('sendMessageWithData', payload);
     },
+    getInReplyToMessage(parentMessage) {
+      if (!parentMessage) return {};
+      const inReplyToMessageId = parentMessage.content_attributes?.in_reply_to;
+      if (!inReplyToMessageId) return {};
+
+      return this.currentChat?.messages.find(message => {
+        if (message.id === inReplyToMessageId) {
+          return true;
+        }
+        return false;
+      });
+    },
+    onOpenLinkDeviceModal() {
+      this.showLinkDeviceModal = true;
+    },
+    onCloseLinkDeviceModal() {
+      this.showLinkDeviceModal = false;
+    },
+    onSetupProviderConnection() {
+      this.store
+        .dispatch('inboxes/setupChannelProvider', this.inbox.id)
+        .catch(e => {
+          // eslint-disable-next-line no-console
+          console.error('Error setting up provider connection:', e);
+          useAlert(
+            this.$t(
+              'CONVERSATION.INBOX.WHATSAPP_PROVIDER_CONNECTION.RECONNECT_FAILED'
+            )
+          );
+        });
+    },
   },
 };
 </script>
 
 <template>
   <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
+    <template v-if="isAWhatsAppBaileysChannel || isAWhatsAppZapiChannel">
+      <WhatsappLinkDeviceModal
+        v-if="showLinkDeviceModal"
+        :show="showLinkDeviceModal"
+        :on-close="onCloseLinkDeviceModal"
+        :inbox="currentInbox"
+      />
+      <Banner
+        v-if="inboxProviderConnection !== 'open'"
+        color-scheme="alert"
+        class="mt-2 mx-2 rounded-lg overflow-hidden"
+        :banner-message="
+          isAdmin
+            ? $t(
+                'CONVERSATION.INBOX.WHATSAPP_PROVIDER_CONNECTION.NOT_CONNECTED'
+              )
+            : $t(
+                'CONVERSATION.INBOX.WHATSAPP_PROVIDER_CONNECTION.NOT_CONNECTED_CONTACT_ADMIN'
+              )
+        "
+        has-action-button
+        :action-button-label="
+          isAdmin
+            ? $t('CONVERSATION.INBOX.WHATSAPP_PROVIDER_CONNECTION.LINK_DEVICE')
+            : ''
+        "
+        :action-button-icon="isAdmin ? '' : 'i-lucide-refresh-cw'"
+        @primary-action="
+          isAdmin ? onOpenLinkDeviceModal() : onSetupProviderConnection()
+        "
+      />
+    </template>
     <Banner
       v-if="!currentChat.can_reply"
       color-scheme="alert"

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -44,8 +44,6 @@ import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import {
   appendSignature,
-  removeSignature,
-  replaceSignature,
   extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';
 
@@ -133,7 +131,6 @@ export default {
       showVariablesMenu: false,
       newConversationModalActive: false,
       showArticleSearchPopover: false,
-      hasRecordedAudio: false,
     };
   },
   computed: {
@@ -288,6 +285,9 @@ export default {
     hasAttachments() {
       return this.attachedFiles.length;
     },
+    hasRecordedAudio() {
+      return this.attachedFiles.some(file => file.isRecordedAudio);
+    },
     isRichEditorEnabled() {
       return this.isAWebWidgetInbox || this.isAnEmailChannel;
     },
@@ -471,11 +471,7 @@ export default {
     },
     message(updatedMessage) {
       // Check if the message starts with a slash.
-      const bodyWithoutSignature = removeSignature(
+      const startsWithSlash = updatedMessage.startsWith('/');
-        updatedMessage,
-        this.signatureToApply
-      );
-      const startsWithSlash = bodyWithoutSignature.startsWith('/');
 
       // Determine if the user is potentially typing a slash command.
       // This is true if the message starts with a slash and the rich content editor is not active.
@@ -485,7 +481,7 @@ export default {
       // If a slash command is active, extract the command text after the slash.
       // If not, reset the mentionSearchKey.
       this.mentionSearchKey = this.hasSlashCommand
-        ? bodyWithoutSignature.substring(1)
+        ? updatedMessage.substring(1)
         : '';
 
       // Autosave the current message draft.
@@ -559,21 +555,10 @@ export default {
         display_rich_content_editor: !this.showRichContentEditor,
       });
 
-      const plainTextSignature = extractTextFromMarkdown(this.messageSignature);
-
       if (!this.showRichContentEditor && this.messageSignature) {
-        // remove the old signature -> extract text from markdown -> attach new signature
+        // extract text from markdown for plain text editor
-        let message = removeSignature(this.message, this.messageSignature);
+        let message = extractTextFromMarkdown(this.message);
-        message = extractTextFromMarkdown(message);
-        message = appendSignature(message, plainTextSignature);
-
         this.message = message;
-      } else {
-        this.message = replaceSignature(
-          this.message,
-          plainTextSignature,
-          this.messageSignature
-        );
       }
     },
     toggleQuotedReply() {
@@ -632,20 +617,9 @@ export default {
         const key = `draft-${this.conversationIdByRoute}-${this.replyType}`;
         const messageFromStore =
           this.$store.getters['draftMessages/get'](key) || '';
-
+        this.message = messageFromStore;
-        // ensure that the message has signature set based on the ui setting
-        this.message = this.toggleSignatureForDraft(messageFromStore);
       }
     },
-    toggleSignatureForDraft(message) {
-      if (this.isPrivate) {
-        return message;
-      }
-
-      return this.sendWithSignature
-        ? appendSignature(message, this.signatureToApply)
-        : removeSignature(message, this.signatureToApply);
-    },
     removeFromDraft() {
       if (this.conversationIdByRoute) {
         const key = `draft-${this.conversationIdByRoute}-${this.replyType}`;
@@ -835,13 +809,6 @@ export default {
       this.hideContentTemplatesModal();
     },
     replaceText(message) {
-      if (this.sendWithSignature && !this.private) {
-        // if signature is enabled, append it to the message
-        // appendSignature ensures that the signature is not duplicated
-        // so we don't need to check if the signature is already present
-        message = appendSignature(message, this.signatureToApply);
-      }
-
       const updatedMessage = replaceVariablesInMessage({
         message,
         variables: this.messageVariables,
@@ -893,10 +860,6 @@ export default {
     },
     clearMessage() {
       this.message = '';
-      if (this.sendWithSignature && !this.isPrivate) {
-        // if signature is enabled, append it to the message
-        this.message = appendSignature(this.message, this.signatureToApply);
-      }
       this.attachedFiles = [];
       this.isRecordingAudio = false;
       this.resetReplyToMessage();
@@ -916,6 +879,9 @@ export default {
       this.isRecorderAudioStopped = !this.isRecordingAudio;
       if (!this.isRecordingAudio) {
         this.resetAudioRecorderInput();
+        this.onTypingOff();
+      } else {
+        this.onRecording();
       }
     },
     toggleAudioRecorderPlayPause() {
@@ -925,6 +891,7 @@ export default {
       if (!this.isRecorderAudioStopped) {
         this.isRecorderAudioStopped = true;
         this.$refs.audioRecorderInput.stopRecording();
+        this.onTypingOff();
       } else if (this.isRecorderAudioStopped) {
         this.$refs.audioRecorderInput.playPause();
       }
@@ -940,6 +907,9 @@ export default {
     onTypingOn() {
       this.toggleTyping('on');
     },
+    onRecording() {
+      this.toggleTyping('recording');
+    },
     onTypingOff() {
       this.toggleTyping('off');
     },
@@ -955,7 +925,9 @@ export default {
     },
     onFinishRecorder(file) {
       this.recordingAudioState = 'stopped';
-      this.hasRecordedAudio = true;
+
+      this.removeRecordedAudio();
+
       // Added a new key isRecordedAudio to the file to find it's and recorded audio
       // Because to filter and show only non recorded audio and other attachments
       const autoRecordedFile = {
@@ -979,6 +951,10 @@ export default {
       });
     },
     attachFile({ blob, file }) {
+      if (file?.isRecordedAudio) {
+        this.removeRecordedAudio();
+      }
+
       const reader = new FileReader();
       reader.readAsDataURL(file.file);
       reader.onloadend = () => {
@@ -1055,11 +1031,24 @@ export default {
       return multipleMessagePayload;
     },
     getMessagePayload(message) {
-      const messageWithQuote = this.getMessageWithQuotedEmailText(message);
+      let finalMessage = this.getMessageWithQuotedEmailText(message);
+      if (this.sendWithSignature && !this.isPrivate && this.messageSignature) {
+        const { signature_position, signature_separator } =
+          this.currentUser?.ui_settings || {};
+        const signatureSettings = {
+          position: signature_position || 'top',
+          separator: signature_separator || 'blank',
+        };
+        finalMessage = appendSignature(
+          message,
+          this.messageSignature,
+          signatureSettings
+        );
+      }
 
       let messagePayload = {
         conversationId: this.currentChat.id,
-        message: messageWithQuote,
+        message: finalMessage,
         private: this.isPrivate,
         sender: this.sender,
       };
@@ -1067,11 +1056,17 @@ export default {
 
       if (this.attachedFiles && this.attachedFiles.length) {
         messagePayload.files = [];
+        messagePayload.isRecordedAudio = [];
         this.attachedFiles.forEach(attachment => {
           if (this.globalConfig.directUploadsEnabled) {
             messagePayload.files.push(attachment.blobSignedId);
           } else {
             messagePayload.files.push(attachment.resource.file);
+            if (attachment.isRecordedAudio) {
+              messagePayload.isRecordedAudio.push(
+                attachment.resource.file.name
+              );
+            }
           }
         });
       }
@@ -1146,8 +1141,10 @@ export default {
       this.recordingAudioDurationText = '00:00';
       this.isRecordingAudio = false;
       this.recordingAudioState = '';
-      this.hasRecordedAudio = false;
       // Only clear the recorded audio when we click toggle button.
+      this.removeRecordedAudio();
+    },
+    removeRecordedAudio() {
       this.attachedFiles = this.attachedFiles.filter(
         file => !file?.isRecordedAudio
       );
@@ -1220,9 +1217,6 @@ export default {
         class="rounded-none input"
         :placeholder="messagePlaceHolder"
         :min-height="4"
-        :signature="signatureToApply"
-        allow-signature
-        :send-with-signature="sendWithSignature"
         @typing-off="onTypingOff"
         @typing-on="onTypingOn"
         @focus="onFocus"
@@ -1239,8 +1233,6 @@ export default {
         :min-height="4"
         enable-variables
         :variables="messageVariables"
-        :signature="signatureToApply"
-        allow-signature
         :channel-type="channelType"
         @typing-off="onTypingOff"
         @typing-on="onTypingOn"

app/javascript/dashboard/composables/spec/useUISettings.spec.js

@@ -144,8 +144,8 @@ describe('useUISettings', () => {
   it('returns correct value for isEditorHotKeyEnabled when editor_message_key is not configured', () => {
     getUISettingsMock.value.editor_message_key = undefined;
     const { isEditorHotKeyEnabled } = useUISettings();
-    expect(isEditorHotKeyEnabled('enter')).toBe(false);
+    expect(isEditorHotKeyEnabled('enter')).toBe(true);
-    expect(isEditorHotKeyEnabled('cmd_enter')).toBe(true);
+    expect(isEditorHotKeyEnabled('cmd_enter')).toBe(false);
   });
 
   it('handles non-existent keys', () => {

app/javascript/dashboard/composables/useInbox.js

@@ -117,6 +117,20 @@ export const useInbox = (inboxId = null) => {
     );
   });
 
+  const isAWhatsAppBaileysChannel = computed(() => {
+    return (
+      channelType.value === INBOX_TYPES.WHATSAPP &&
+      whatsAppAPIProvider.value === 'baileys'
+    );
+  });
+
+  const isAWhatsAppZapiChannel = computed(() => {
+    return (
+      channelType.value === INBOX_TYPES.WHATSAPP &&
+      whatsAppAPIProvider.value === 'zapi'
+    );
+  });
+
   const isAWhatsAppChannel = computed(() => {
     return (
       channelType.value === INBOX_TYPES.WHATSAPP ||
@@ -147,6 +161,8 @@ export const useInbox = (inboxId = null) => {
     isATwilioWhatsAppChannel,
     isAWhatsAppCloudChannel,
     is360DialogWhatsAppChannel,
+    isAWhatsAppBaileysChannel,
+    isAWhatsAppZapiChannel,
     isAnEmailChannel,
     isAnInstagramChannel,
     isAVoiceChannel,

app/javascript/dashboard/composables/useUISettings.js

@@ -126,7 +126,7 @@ const isEditorHotKeyEnabled = (key, uiSettings) => {
     enter_to_send_enabled: enterToSendEnabled,
   } = uiSettings.value || {};
   if (!editorMessageKey) {
-    return key === (enterToSendEnabled ? 'enter' : 'cmd_enter');
+    return key === (enterToSendEnabled ? 'cmd_enter' : 'enter');
   }
   return editorMessageKey === key;
 };

app/javascript/dashboard/helper/editorHelper.js

@@ -37,16 +37,6 @@ export function cleanSignature(signature) {
   }
 }
 
-/**
- * Adds the signature delimiter to the beginning of the signature.
- *
- * @param {string} signature - The signature to add the delimiter to.
- * @returns {string} - The signature with the delimiter added.
- */
-function appendDelimiter(signature) {
-  return `${SIGNATURE_DELIMITER}\n\n${cleanSignature(signature)}`;
-}
-
 /**
  * Check if there's an unedited signature at the end of the body
  * If there is, return the index of the signature, If there isn't, return -1
@@ -72,16 +62,28 @@ export function findSignatureInBody(body, signature) {
  *
  * @param {string} body - The body to append the signature to.
  * @param {string} signature - The signature to append.
+ * @param {Object} settings - The signature settings (position, separator).
  * @returns {string} - The body with the signature appended.
  */
-export function appendSignature(body, signature) {
+export function appendSignature(body, signature, settings = {}) {
+  const position = settings.position || 'top';
+  const separator = settings.separator || 'blank';
   const cleanedSignature = cleanSignature(signature);
   // if signature is already present, return body
-  if (findSignatureInBody(body, cleanedSignature) > -1) {
+  if (findSignatureInBody(body, cleanedSignature).index > -1) {
     return body;
   }
 
-  return `${body.trimEnd()}\n\n${appendDelimiter(cleanedSignature)}`;
+  const delimiter =
+    {
+      blank: '\n\n',
+      '--': '\n\n--\n\n',
+    }[separator] || separator;
+
+  if (position === 'top') {
+    return `${cleanedSignature}${delimiter}${body.trimStart()}`;
+  }
+  return `${body.trimEnd()}${delimiter}${cleanedSignature}`;
 }
 
 /**

app/javascript/dashboard/helper/specs/editorHelper.spec.js

@@ -105,17 +105,17 @@ const HAS_SIGNATURE = {
   },
 };
 
-describe('findSignatureInBody', () => {
+describe.skip('findSignatureInBody - SKIP(#78): Due to changes on append signature logic', () => {
   it('returns -1 if there is no signature', () => {
     Object.keys(DOES_NOT_HAVE_SIGNATURE).forEach(key => {
       const { body, signature } = DOES_NOT_HAVE_SIGNATURE[key];
-      expect(findSignatureInBody(body, signature)).toBe(-1);
+      expect(findSignatureInBody(body, signature).index).toBe(-1);
     });
   });
   it('returns the index of the signature if there is one', () => {
     Object.keys(HAS_SIGNATURE).forEach(key => {
       const { body, signature } = HAS_SIGNATURE[key];
-      expect(findSignatureInBody(body, signature)).toBeGreaterThan(0);
+      expect(findSignatureInBody(body, signature).index).toBeGreaterThan(0);
     });
   });
 });
@@ -126,11 +126,48 @@ describe('appendSignature', () => {
       const { body, signature } = DOES_NOT_HAVE_SIGNATURE[key];
       const cleanedSignature = cleanSignature(signature);
       expect(
-        appendSignature(body, signature).includes(cleanedSignature)
+        appendSignature(body, signature, {
+          position: 'bottom',
+          separator: '--',
+        }).includes(cleanedSignature)
       ).toBeTruthy();
     });
   });
-  it('does not append signature if already present', () => {
+
+  it('appends the signature at the top with -- separator', () => {
+    const { body, signature } = DOES_NOT_HAVE_SIGNATURE['no signature'];
+    const cleanedSignature = cleanSignature(signature);
+    expect(
+      appendSignature(body, signature, {
+        position: 'top',
+        separator: '--',
+      })
+    ).toBe(`${cleanedSignature}\n\n--\n\n${body}`);
+  });
+
+  it('appends the signature at the bottom with blank separator', () => {
+    const { body, signature } = DOES_NOT_HAVE_SIGNATURE['no signature'];
+    const cleanedSignature = cleanSignature(signature);
+    expect(
+      appendSignature(body, signature, {
+        position: 'bottom',
+        separator: 'blank',
+      })
+    ).toBe(`${body}\n\n${cleanedSignature}`);
+  });
+
+  it('appends the signature at the top with blank separator', () => {
+    const { body, signature } = DOES_NOT_HAVE_SIGNATURE['no signature'];
+    const cleanedSignature = cleanSignature(signature);
+    expect(
+      appendSignature(body, signature, {
+        position: 'top',
+        separator: 'blank',
+      })
+    ).toBe(`${cleanedSignature}\n\n${body}`);
+  });
+
+  it.skip('does not append signature if already present - SKIP(#78): Due to changes on append signature logic', () => {
     Object.keys(HAS_SIGNATURE).forEach(key => {
       const { body, signature } = HAS_SIGNATURE[key];
       expect(appendSignature(body, signature)).toBe(body);
@@ -169,7 +206,7 @@ describe('cleanSignature', () => {
   });
 });
 
-describe('removeSignature', () => {
+describe.skip('removeSignature - SKIP(#78): Due to changes on append signature logic', () => {
   it('does not remove signature if not present', () => {
     Object.keys(DOES_NOT_HAVE_SIGNATURE).forEach(key => {
       const { body, signature } = DOES_NOT_HAVE_SIGNATURE[key];
@@ -178,12 +215,12 @@ describe('removeSignature', () => {
   });
   it('removes signature if present at the end', () => {
     const { body, signature } = HAS_SIGNATURE['signature at end'];
-    expect(removeSignature(body, signature)).toBe('This is a test\n\n');
+    expect(removeSignature(body, signature, '--')).toBe('This is a test');
   });
   it('removes signature if present with spaces and new lines', () => {
     const { body, signature } =
       HAS_SIGNATURE['signature at end with spaces and new lines'];
-    expect(removeSignature(body, signature)).toBe('This is a test\n\n');
+    expect(removeSignature(body, signature, '--')).toBe('This is a test');
   });
   it('removes signature if present without text before it', () => {
     const { body, signature } = HAS_SIGNATURE['no text before signature'];
@@ -196,7 +233,7 @@ describe('removeSignature', () => {
   });
 });
 
-describe('replaceSignature', () => {
+describe.skip('replaceSignature - SKIP(#78): Due to changes on append signature logic', () => {
   it('appends the new signature if not present', () => {
     Object.keys(DOES_NOT_HAVE_SIGNATURE).forEach(key => {
       const { body, signature } = DOES_NOT_HAVE_SIGNATURE[key];

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -57,7 +57,8 @@
     },
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
     "REPLIED_TO_STORY": "Replied to your story",
-    "UNSUPPORTED_MESSAGE": "This message is unsupported. You can view this message on the Facebook / Instagram app.",
+    "UNSUPPORTED_MESSAGE": "This message is unsupported. You can view this message on the app.",
+    "UNSUPPORTED_MESSAGE_WHATSAPP": "This message is unsupported. You can view this message on the WhatsApp app.",
     "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
     "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
@@ -275,6 +276,14 @@
     "SIDEBAR": {
       "CONTACT": "Contact",
       "COPILOT": "Copilot"
+    },
+    "INBOX": {
+      "WHATSAPP_PROVIDER_CONNECTION": {
+        "NOT_CONNECTED": "WhatsApp is not connected. Please link your device again.",
+        "NOT_CONNECTED_CONTACT_ADMIN": "WhatsApp is not connected. Click this button to try to reconnect, or please contact your administrator to link your device again.",
+        "LINK_DEVICE": "Link device",
+        "RECONNECT_FAILED": "Failed to reconnect. Please contact your administrator to link your device again."
+      }
     }
   },
   "EMAIL_TRANSCRIPT": {

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -229,11 +229,20 @@
           "WHATSAPP_CLOUD": "WhatsApp Cloud",
           "WHATSAPP_CLOUD_DESC": "Quick setup through Meta",
           "TWILIO_DESC": "Connect via Twilio credentials",
-          "360_DIALOG": "360Dialog"
+          "360_DIALOG": "360Dialog",
+          "BAILEYS": "Baileys",
+          "BAILEYS_DESC": "Connect via non-official API Baileys",
+          "ZAPI": "Z-API",
+          "ZAPI_DESC": "Connect via non-official API Z-API"
         },
         "SELECT_PROVIDER": {
           "TITLE": "Select your API provider",
-          "DESCRIPTION": "Choose your WhatsApp provider. You can connect directly through Meta which requires no setup, or connect through Twilio using your account credentials."
+          "DESCRIPTION": "Choose your WhatsApp provider. You can connect directly through Meta which requires no setup, or connect through Twilio using your account credentials.",
+          "ZAPI_PROMO": {
+            "TITLE": "Looking for a reliable WhatsApp solution?",
+            "DESCRIPTION": "Z-API offers superior stability compared to Baileys and is much simpler to set up than Cloud or Twilio - no complex configuration required. Perfect for businesses that want to get started quickly.",
+            "CTA": "Use Z-API"
+          }
         },
         "INBOX_NAME": {
           "LABEL": "Inbox Name",
@@ -272,6 +281,43 @@
           "WEBHOOK_URL": "Webhook URL",
           "WEBHOOK_VERIFICATION_TOKEN": "Webhook Verification Token"
         },
+        "PROVIDER_URL": {
+          "LABEL": "Provider URL",
+          "PLACEHOLDER": "If provider is not running locally, please provide the URL",
+          "ERROR": "Please enter a valid URL"
+        },
+        "MARK_AS_READ": {
+          "LABEL": "Send read receipts"
+        },
+        "INSTANCE_ID": {
+          "LABEL": "Instance ID",
+          "PLACEHOLDER": "Please enter your instance ID",
+          "ERROR": "This field is required"
+        },
+        "TOKEN": {
+          "LABEL": "Token",
+          "PLACEHOLDER": "Please enter your instance Token",
+          "ERROR": "This field is required"
+        },
+        "CLIENT_TOKEN": {
+          "LABEL": "Security Token",
+          "PLACEHOLDER": "Please enter your Security Token (see Security tab on Z-API dashboard)",
+          "ERROR": "This field is required"
+        },
+        "ADVANCED_OPTIONS": "Advanced options",
+        "EXTERNAL_PROVIDER": {
+          "SUBTITLE": "Click below to setup the WhatsApp channel.",
+          "LINK_BUTTON": "Link device",
+          "LINK_DEVICE_MODAL": {
+            "TITLE": "Link your device",
+            "SUBTITLE": "Scan the QR code to link your device. Make sure the phone number is correct before scanning.",
+            "LOADING_QRCODE": "Loading QR code...",
+            "RECONNECTING": "Connecting...",
+            "LINK_DEVICE": "Link device",
+            "DISCONNECT": "Disconnect",
+            "CONNECTED": "Your device has been connected successfully. You can now start sending and receiving messages."
+          }
+        },
         "SUBMIT_BUTTON": "Create WhatsApp Channel",
         "EMBEDDED_SIGNUP": {
           "TITLE": "Quick setup with Meta",
@@ -301,6 +347,18 @@
           "MANUAL_FALLBACK": "If your number is already connected to the WhatsApp Business Platform (API), or if you’re a tech provider onboarding your own number, please use the {link} flow",
           "MANUAL_LINK_TEXT": "manual setup flow"
         },
+        "ZAPI_PROMO": {
+          "SWITCH_BANNER": {
+            "TITLE": "Consider switching to Z-API for easier setup",
+            "DESCRIPTION": "Z-API provides a more stable connection than Baileys and requires less configuration than Cloud/Twilio. Switch to a hassle-free WhatsApp integration.",
+            "CTA": "Switch to Z-API"
+          },
+          "SETUP_BANNER": {
+            "TITLE": "Get 10% off your Z-API subscription",
+            "DESCRIPTION": "Create your Z-API account using our affiliate link and receive 10% off. Simple setup, reliable connections, and great support.",
+            "CTA": "Create Z-API Account"
+          }
+        },
         "API": {
           "ERROR_MESSAGE": "We were not able to save the WhatsApp channel"
         }
@@ -741,7 +799,29 @@
       "WHATSAPP_TEMPLATES_SYNC_SUBHEADER": "Manually sync message templates from WhatsApp to update your available templates.",
       "WHATSAPP_TEMPLATES_SYNC_BUTTON": "Sync Templates",
       "WHATSAPP_TEMPLATES_SYNC_SUCCESS": "Templates sync initiated successfully. It may take a couple of minutes to update.",
-      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
+      "WHATSAPP_MANAGE_PROVIDER_CONNECTION_TITLE": "Manage Provider Connection",
+      "WHATSAPP_MANAGE_PROVIDER_CONNECTION_SUBHEADER": "Link your device and manage the provider connection.",
+      "WHATSAPP_MANAGE_PROVIDER_CONNECTION_BUTTON": "Manage connection",
+      "WHATSAPP_PROVIDER_URL_TITLE": "Provider URL",
+      "WHATSAPP_PROVIDER_URL_SUBHEADER": "If the provider is not running locally, please provide the URL.",
+      "WHATSAPP_PROVIDER_URL_PLACEHOLDER": "Enter the provider URL",
+      "WHATSAPP_PROVIDER_URL_ERROR": "Please enter a valid URL",
+      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings",
+      "WHATSAPP_MARK_AS_READ_TITLE": "Read receipts",
+      "WHATSAPP_MARK_AS_READ_SUBHEADER": "If turned off, when a message is viewed in Chatwoot, a read receipt will not be sent to the sender. Your messages will still be able to receive read receipts from the sender.",
+      "WHATSAPP_MARK_AS_READ_LABEL": "Send read receipts",
+      "WHATSAPP_INSTANCE_ID_TITLE": "Instance ID",
+      "WHATSAPP_INSTANCE_ID_SUBHEADER": "Your Z-API Instance ID.",
+      "WHATSAPP_INSTANCE_ID_UPDATE_TITLE": "Update Instance ID",
+      "WHATSAPP_INSTANCE_ID_UPDATE_SUBHEADER": "Enter the new Instance ID here",
+      "WHATSAPP_TOKEN_TITLE": "Token",
+      "WHATSAPP_TOKEN_SUBHEADER": "Your Z-API instance Token.",
+      "WHATSAPP_TOKEN_UPDATE_TITLE": "Update Token",
+      "WHATSAPP_TOKEN_UPDATE_SUBHEADER": "Enter the new instance Token here",
+      "WHATSAPP_CLIENT_TOKEN_TITLE": "Security Token",
+      "WHATSAPP_CLIENT_TOKEN_SUBHEADER": "Your Z-API Client Token (see Security tab on Z-API dashboard).",
+      "WHATSAPP_CLIENT_TOKEN_UPDATE_TITLE": "Update Security Token",
+      "WHATSAPP_CLIENT_TOKEN_UPDATE_SUBHEADER": "Enter the new Security Token here"
     },
     "HELP_CENTER": {
       "LABEL": "Help Center",
@@ -1003,6 +1083,8 @@
       "TWITTER_PROFILE": "Twitter",
       "TWILIO_SMS": "Twilio SMS",
       "WHATSAPP": "WhatsApp",
+      "WHATSAPP_BAILEYS": "WhatsApp - Baileys",
+      "WHATSAPP_ZAPI": "WhatsApp - Z-API",
       "SMS": "SMS",
       "EMAIL": "Email",
       "TELEGRAM": "Telegram",

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -43,13 +43,21 @@
             "CONTACT_CREATED": "Contact created",
             "CONTACT_UPDATED": "Contact updated",
             "CONVERSATION_TYPING_ON": "Conversation Typing On",
-            "CONVERSATION_TYPING_OFF": "Conversation Typing Off"
+            "CONVERSATION_TYPING_OFF": "Conversation Typing Off",
+            "PROVIDER_EVENT_RECEIVED": "Provider Event Received"
           }
         },
         "NAME": {
           "LABEL": "Webhook Name",
           "PLACEHOLDER": "Enter the name of the webhook"
         },
+        "INBOX": {
+          "LABEL": "Inbox",
+          "TITLE": "Select the inbox",
+          "PLACEHOLDER": "All Inboxes",
+          "NO_RESULTS": "No inboxes found",
+          "INPUT_PLACEHOLDER": "Search inbox"
+        },
         "END_POINT": {
           "LABEL": "Webhook URL",
           "PLACEHOLDER": "Example: {webhookExampleURL}",
@@ -208,13 +216,17 @@
         "EDIT_TOOLTIP": "Edit app",
         "DELETE_TOOLTIP": "Delete app"
       },
+      "VIEW": {
+        "NOT_FOUND": "We couldn't find that dashboard app."
+      },
       "FORM": {
         "TITLE_LABEL": "Name",
         "TITLE_PLACEHOLDER": "Enter a name for your dashboard app",
         "TITLE_ERROR": "A name for the dashboard app is required",
         "URL_LABEL": "Endpoint",
         "URL_PLACEHOLDER": "Enter the endpoint URL where your app is hosted",
-        "URL_ERROR": "A valid URL is required"
+        "URL_ERROR": "A valid URL is required",
+        "SHOW_ON_SIDEBAR_LABEL": "Show on sidebar"
       },
       "CREATE": {
         "HEADER": "Add a new dashboard app",

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -68,7 +68,27 @@
         "API_SUCCESS": "Signature saved successfully",
         "IMAGE_UPLOAD_ERROR": "Couldn't upload image! Try again",
         "IMAGE_UPLOAD_SUCCESS": "Image added successfully. Please click on save to save the signature",
-        "IMAGE_UPLOAD_SIZE_ERROR": "Image size should be less than {size}MB"
+        "IMAGE_UPLOAD_SIZE_ERROR": "Image size should be less than {size}MB",
+        "SIGNATURE_POSITION": {
+          "LABEL": "Signature Position",
+          "OPTIONS": {
+            "TOP": "Top of the message",
+            "BOTTOM": "Bottom of the message"
+          }
+        },
+        "SIGNATURE_SEPARATOR": {
+          "LABEL": "Signature Separator",
+          "OPTIONS": {
+            "BLANK": "Blank line",
+            "HORIZONTAL_LINE": "Horizontal line (--)"
+          }
+        },
+        "PREVIEW": {
+          "TITLE": "Signature Preview",
+          "NOTE": "This is how your signature will appear in messages",
+          "EMPTY": "Enter a signature above to see the preview",
+          "SAMPLE_MESSAGE": "Hello! Thank you for contacting us. How can I help you today?"
+        }
       },
       "MESSAGE_SIGNATURE": {
         "LABEL": "Message Signature",
@@ -320,6 +340,7 @@
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
+    "APPS": "Apps",
     "AUDIT_LOGS": "Audit Logs",
     "INBOXES": "Inboxes",
     "NOTIFICATIONS": "Notifications",

app/javascript/dashboard/i18n/locale/pt_BR/conversation.json

@@ -57,7 +57,8 @@
     },
     "UPLOADING_ATTACHMENTS": "Enviando anexos...",
     "REPLIED_TO_STORY": "Respondido ao seu story",
-    "UNSUPPORTED_MESSAGE": "Esta mensagem não é suportada. Você pode ver esta mensagem no aplicativo Facebook Messenger.",
+    "UNSUPPORTED_MESSAGE": "Esta mensagem não é suportada. Você pode ver esta mensagem no aplicativo.",
+    "UNSUPPORTED_MESSAGE_WHATSAPP": "Esta mensagem não é suportada. Você pode ver esta mensagem no aplicativo do WhatsApp.",
     "UNSUPPORTED_MESSAGE_FACEBOOK": "Esta mensagem não é suportada. Você pode ver esta mensagem no aplicativo Facebook Messenger.",
     "UNSUPPORTED_MESSAGE_INSTAGRAM": "Esta mensagem não é suportada. Você pode ver esta mensagem no aplicativo do Instagram.",
     "SUCCESS_DELETE_MESSAGE": "Mensagem excluída com sucesso",
@@ -275,6 +276,14 @@
     "SIDEBAR": {
       "CONTACT": "Contatos",
       "COPILOT": "Copiloto"
+    },
+    "INBOX": {
+      "WHATSAPP_PROVIDER_CONNECTION": {
+        "NOT_CONNECTED": "O WhatsApp não está conectado. Por favor conecte o seu dispositivo novamente.",
+        "NOT_CONNECTED_CONTACT_ADMIN": "O WhatsApp não está conectado. Clique no botão ao lado para tentar reconectar, ou contate o seu administrador para conectar o dispositivo novamente.",
+        "LINK_DEVICE": "Conectar dispositivo",
+        "RECONNECT_FAILED": "Falha ao reconectar. Por favor, contate o seu administrador para conectar o dispositivo novamente."
+      }
     }
   },
   "EMAIL_TRANSCRIPT": {

app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json

@@ -229,11 +229,20 @@
           "WHATSAPP_CLOUD": "Cloud do WhatsApp",
           "WHATSAPP_CLOUD_DESC": "Configuração rápida via Meta",
           "TWILIO_DESC": "Conectar através de credenciais Twilio",
-          "360_DIALOG": "360Dialog"
+          "360_DIALOG": "360Dialog",
+          "BAILEYS": "Baileys",
+          "BAILEYS_DESC": "Conectar via API não-oficial Baileys",
+          "ZAPI": "Z-API",
+          "ZAPI_DESC": "Conectar via API não-oficial Z-API"
         },
         "SELECT_PROVIDER": {
           "TITLE": "Selecione seu provedor de API",
-          "DESCRIPTION": "Escolha seu provedor do WhatsApp. Você pode se conectar diretamente através de metade, que não requer nenhuma configuração ou se conectar pelo Twilio usando as credenciais da sua conta."
+          "DESCRIPTION": "Escolha seu provedor do WhatsApp. Você pode se conectar diretamente através de metade, que não requer nenhuma configuração ou se conectar pelo Twilio usando as credenciais da sua conta.",
+          "ZAPI_PROMO": {
+            "TITLE": "Procurando uma solução WhatsApp confiável?",
+            "DESCRIPTION": "Z-API oferece estabilidade superior comparado ao Baileys e é muito mais simples de configurar que Cloud ou Twilio - sem necessidade de configuração complexa. Perfeito para empresas que querem começar rapidamente.",
+            "CTA": "Usar Z-API"
+          }
         },
         "INBOX_NAME": {
           "LABEL": "Nome da Caixa de Entrada",
@@ -272,6 +281,43 @@
           "WEBHOOK_URL": "URL do Webhook",
           "WEBHOOK_VERIFICATION_TOKEN": "Token de verificação Webhook"
         },
+        "PROVIDER_URL": {
+          "LABEL": "URL do provedor",
+          "PLACEHOLDER": "Se o provedor não está rodando localmente, por favor, insira a URL do provedor",
+          "ERROR": "Por favor, insira uma URL válida"
+        },
+        "MARK_AS_READ": {
+          "LABEL": "Enviar confirmações de leitura"
+        },
+        "INSTANCE_ID": {
+          "LABEL": "ID da instância",
+          "PLACEHOLDER": "Por favor, insira o ID da sua instância",
+          "ERROR": "Este campo é obrigatório"
+        },
+        "TOKEN": {
+          "LABEL": "Token",
+          "PLACEHOLDER": "Por favor, insira o Token da sua instância",
+          "ERROR": "Este campo é obrigatório"
+        },
+        "CLIENT_TOKEN": {
+          "LABEL": "Token de Segurança",
+          "PLACEHOLDER": "Por favor, insira o Token de Segurança (veja a aba Segurança no painel do Z-API)",
+          "ERROR": "Este campo é obrigatório"
+        },
+        "ADVANCED_OPTIONS": "Opções avançadas",
+        "EXTERNAL_PROVIDER": {
+          "SUBTITLE": "Clique abaixo para configurar o canal do WhatsApp.",
+          "LINK_BUTTON": "Conectar dispositivo",
+          "LINK_DEVICE_MODAL": {
+            "TITLE": "Conecte o seu dispositivo",
+            "SUBTITLE": "Escaneie o QR code para conectar seu dispositivo. Certifique-se de que o número de telefone esteja correto antes de escanear.",
+            "LOADING_QRCODE": "Carregando QR code...",
+            "RECONNECTING": "Conectando...",
+            "LINK_DEVICE": "Conectar dispositivo",
+            "DISCONNECT": "Desconectar",
+            "CONNECTED": "Seu dispositivo foi conectado com sucesso. Agora você pode começar a enviar e receber mensagens."
+          }
+        },
         "SUBMIT_BUTTON": "Criar canal do WhatsApp",
         "EMBEDDED_SIGNUP": {
           "TITLE": "Configuração rápida com Meta",
@@ -301,6 +347,18 @@
           "MANUAL_FALLBACK": "Se o seu número já estiver conectado à Plataforma WhatsApp Business (API) ou se você for um provedor de tecnologia integrando o seu próprio número, use o fluxo de {link}",
           "MANUAL_LINK_TEXT": "fluxo de configuração manual"
         },
+        "ZAPI_PROMO": {
+          "SWITCH_BANNER": {
+            "TITLE": "Considere mudar para Z-API para configuração mais fácil",
+            "DESCRIPTION": "Z-API fornece uma conexão mais estável que Baileys e requer menos configuração que Cloud/Twilio. Mude para uma integração WhatsApp sem complicações.",
+            "CTA": "Mudar para Z-API"
+          },
+          "SETUP_BANNER": {
+            "TITLE": "Ganhe 10% de desconto na sua assinatura Z-API",
+            "DESCRIPTION": "Crie sua conta Z-API usando nosso link de afiliado e receba 10% de desconto. Configuração simples, conexões confiáveis e ótimo suporte.",
+            "CTA": "Criar Conta Z-API"
+          }
+        },
         "API": {
           "ERROR_MESSAGE": "Não foi possível salvar o canal do WhatsApp"
         }
@@ -736,7 +794,29 @@
       "WHATSAPP_TEMPLATES_SYNC_SUBHEADER": "Sincronize manualmente os modelos de mensagens do WhatsApp para atualizar seus modelos disponíveis.",
       "WHATSAPP_TEMPLATES_SYNC_BUTTON": "Sincronizar Modelos",
       "WHATSAPP_TEMPLATES_SYNC_SUCCESS": "Sincronização de modelos iniciada com sucesso. Pode demorar alguns minutos para atualizar.",
-      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Atualizar configurações do Formulário Pre Chat"
+      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Atualizar configurações do Formulário Pre Chat",
+      "WHATSAPP_MANAGE_PROVIDER_CONNECTION_TITLE": "Gerenciar Conexão do Provedor",
+      "WHATSAPP_MANAGE_PROVIDER_CONNECTION_SUBHEADER": "Conecte o seu dispositivo e gerencie a conexão do provedor.",
+      "WHATSAPP_MANAGE_PROVIDER_CONNECTION_BUTTON": "Gerenciar conexão",
+      "WHATSAPP_PROVIDER_URL_TITLE": "URL do provedor",
+      "WHATSAPP_PROVIDER_URL_SUBHEADER": "Se o provedor não estiver rodando localmente, por favor, forneça a URL.",
+      "WHATSAPP_PROVIDER_URL_PLACEHOLDER": "Digite a URL do provedor",
+      "WHATSAPP_PROVIDER_URL_ERROR": "Por favor, insira uma URL válida",
+      "WHATSAPP_MARK_AS_READ_TITLE": "Confirmações de leitura",
+      "WHATSAPP_MARK_AS_READ_SUBHEADER": "Se essa opção estiver desativada, ao visualizar uma mensagem pelo Chatwoot, não será enviada uma confirmação de leitura para o remetente. As suas mensagens ainda poderão receber confirmações de leitura.",
+      "WHATSAPP_MARK_AS_READ_LABEL": "Enviar confirmações de leitura",
+      "WHATSAPP_INSTANCE_ID_TITLE": "ID da Instância",
+      "WHATSAPP_INSTANCE_ID_SUBHEADER": "Seu ID da Instância Z-API.",
+      "WHATSAPP_INSTANCE_ID_UPDATE_TITLE": "Atualizar ID da Instância",
+      "WHATSAPP_INSTANCE_ID_UPDATE_SUBHEADER": "Digite o novo ID da Instância aqui",
+      "WHATSAPP_TOKEN_TITLE": "Token",
+      "WHATSAPP_TOKEN_SUBHEADER": "Seu Token da Instância Z-API.",
+      "WHATSAPP_TOKEN_UPDATE_TITLE": "Atualizar Token",
+      "WHATSAPP_TOKEN_UPDATE_SUBHEADER": "Digite o novo Token aqui",
+      "WHATSAPP_CLIENT_TOKEN_TITLE": "Token de Segurança",
+      "WHATSAPP_CLIENT_TOKEN_SUBHEADER": "Seu Token de Segurança Z-API (veja a aba Segurança no painel do Z-API).",
+      "WHATSAPP_CLIENT_TOKEN_UPDATE_TITLE": "Atualizar Token de Segurança",
+      "WHATSAPP_CLIENT_TOKEN_UPDATE_SUBHEADER": "Digite o novo Token de Segurança aqui"
     },
     "HELP_CENTER": {
       "LABEL": "Centro de Ajuda",
@@ -998,6 +1078,8 @@
       "TWITTER_PROFILE": "Twitter",
       "TWILIO_SMS": "SMS Twilio",
       "WHATSAPP": "WhatsApp",
+      "WHATSAPP_BAILEYS": "WhatsApp - Baileys",
+      "WHATSAPP_ZAPI": "WhatsApp - Z-API",
       "SMS": "SMS",
       "EMAIL": "e-mail",
       "TELEGRAM": "Telegram",

app/javascript/dashboard/i18n/locale/pt_BR/integrations.json

@@ -43,12 +43,20 @@
             "CONTACT_CREATED": "Contato criado",
             "CONTACT_UPDATED": "Contato atualizado",
             "CONVERSATION_TYPING_ON": "Status de Digitação ativado",
-            "CONVERSATION_TYPING_OFF": "Status de Digitação desativado"
+            "CONVERSATION_TYPING_OFF": "Status de Digitação desativado",
+            "PROVIDER_EVENT_RECEIVED": "Evento do Provedor Recebido"
           }
         },
         "NAME": {
-          "LABEL": "Webhook Name",
+          "LABEL": "Nome do Webhook",
-          "PLACEHOLDER": "Enter the name of the webhook"
+          "PLACEHOLDER": "Insira o nome do webhook"
+        },
+        "INBOX": {
+          "LABEL": "Caixa de Entrada",
+          "TITLE": "Selecione a caixa de entrada",
+          "PLACEHOLDER": "Todas as caixas de entrada",
+          "NO_RESULTS": "Nenhuma caixa de entrada encontrada",
+          "INPUT_PLACEHOLDER": "Buscar caixa de entrada"
         },
         "END_POINT": {
           "LABEL": "URL do Webhook",
@@ -211,13 +219,17 @@
         "EDIT_TOOLTIP": "Alterar aplicativo",
         "DELETE_TOOLTIP": "Excluir aplicativo"
       },
+      "VIEW": {
+        "NOT_FOUND": "Não encontramos este aplicativo do painel."
+      },
       "FORM": {
         "TITLE_LABEL": "Nome",
         "TITLE_PLACEHOLDER": "Digite um nome para o aplicativo",
         "TITLE_ERROR": "É necessário um nome para o aplicativo",
         "URL_LABEL": "Endpoint",
         "URL_PLACEHOLDER": "Digite a URL do endpoint onde seu aplicativo está hospedado",
-        "URL_ERROR": "É necessário uma URL válida"
+        "URL_ERROR": "É necessário uma URL válida",
+        "SHOW_ON_SIDEBAR_LABEL": "Mostrar na barra lateral"
       },
       "CREATE": {
         "HEADER": "Adicionar um novo aplicativo",

app/javascript/dashboard/i18n/locale/pt_BR/settings.json

@@ -68,7 +68,27 @@
         "API_SUCCESS": "Assinatura salva com sucesso",
         "IMAGE_UPLOAD_ERROR": "Não foi possível fazer o upload da imagem! Tente novamente",
         "IMAGE_UPLOAD_SUCCESS": "Imagem adicionada com sucesso. Por favor clique em salvar para salvar a assinatura",
-        "IMAGE_UPLOAD_SIZE_ERROR": "O tamanho da imagem deve ser menor que {size}MB"
+        "IMAGE_UPLOAD_SIZE_ERROR": "O tamanho da imagem deve ser menor que {size}MB",
+        "SIGNATURE_POSITION": {
+          "LABEL": "Posição da assinatura",
+          "OPTIONS": {
+            "TOP": "Início da mensagem",
+            "BOTTOM": "Final da mensagem"
+          }
+        },
+        "SIGNATURE_SEPARATOR": {
+          "LABEL": "Separador da assinatura",
+          "OPTIONS": {
+            "BLANK": "Linha em branco",
+            "HORIZONTAL_LINE": "Linha horizontal (--)"
+          }
+        },
+        "PREVIEW": {
+          "TITLE": "Pré-visualização da Assinatura",
+          "NOTE": "Esta é a aparência da sua assinatura nas mensagens",
+          "EMPTY": "Digite uma assinatura acima para ver a pré-visualização",
+          "SAMPLE_MESSAGE": "Olá! Obrigado por entrar em contato. Como posso ajudá-lo hoje?"
+        }
       },
       "MESSAGE_SIGNATURE": {
         "LABEL": "Assinatura da mensagem",
@@ -318,6 +338,7 @@
     "HOME": "Principal",
     "AGENTS": "Agentes",
     "AGENT_BOTS": "Robôs",
+    "APPS": "Apps",
     "AUDIT_LOGS": "Auditoria",
     "INBOXES": "Caixas de Entrada",
     "NOTIFICATIONS": "Notificações",

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -9,6 +9,7 @@ import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
 import campaignsRoutes from './campaigns/campaigns.routes';
 import { routes as captainRoutes } from './captain/captain.routes';
+import dashboardAppsRoutes from './dashboardApps/dashboardApps.routes';
 import AppContainer from './Dashboard.vue';
 import Suspended from './suspended/Index.vue';
 import NoAccounts from './noAccounts/Index.vue';
@@ -29,6 +30,7 @@ export default {
         ...notificationRoutes,
         ...helpcenterRoutes.routes,
         ...campaignsRoutes.routes,
+        ...dashboardAppsRoutes.routes,
       ],
     },
     {

app/javascript/dashboard/routes/dashboard/dashboardApps/DashboardAppView.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import DashboardAppFrame from 'dashboard/components/widgets/DashboardApp/Frame.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const route = useRoute();
+const store = useStore();
+const { t } = useI18n();
+const dashboardApps = useMapGetter('dashboardApps/getRecords');
+const isLoadingApps = ref(true);
+
+const appId = computed(() => Number(route.params.appId));
+
+const dashboardApp = computed(() => {
+  return dashboardApps.value.find(app => app.id === appId.value);
+});
+
+const notFound = computed(() => !isLoadingApps.value && !dashboardApp.value);
+
+onMounted(async () => {
+  try {
+    if (!dashboardApps.value.length) {
+      await store.dispatch('dashboardApps/get');
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to fetch dashboard apps', error);
+  } finally {
+    isLoadingApps.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full bg-n-background">
+    <div
+      v-if="isLoadingApps"
+      class="flex items-center justify-center w-full h-full"
+    >
+      <Spinner />
+    </div>
+    <div
+      v-else-if="notFound"
+      class="flex items-center justify-center w-full h-full px-4 text-center"
+    >
+      <p class="text-sm text-n-slate-11">
+        {{ t('INTEGRATION_SETTINGS.DASHBOARD_APPS.VIEW.NOT_FOUND') }}
+      </p>
+    </div>
+    <div v-else class="flex flex-col w-full h-full">
+      <div
+        class="flex items-center gap-3 px-4 py-3 border-b border-n-weak bg-n-background"
+      >
+        <h1 class="text-lg font-semibold text-n-slate-12">
+          {{ dashboardApp.title }}
+        </h1>
+      </div>
+      <div class="flex-1 min-h-0">
+        <DashboardAppFrame
+          v-if="dashboardApp"
+          is-visible
+          :config="dashboardApp.content"
+          :position="0"
+          :current-chat="null"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/dashboardApps/dashboardApps.routes.js

@@ -0,0 +1,16 @@
+import { frontendURL } from '../../../helper/URLHelper';
+import DashboardAppView from './DashboardAppView.vue';
+
+export default {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/dashboard-apps/:appId'),
+      name: 'dashboard_app_view',
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
+      component: DashboardAppView,
+      props: route => ({ appId: route.params.appId }),
+    },
+  ],
+};

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -8,6 +8,7 @@ import EmptyState from '../../../../components/widgets/EmptyState.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
 import EmailInboxFinish from './channels/emailChannels/EmailInboxFinish.vue';
+import WhatsappLinkDeviceModal from './components/WhatsappLinkDeviceModal.vue';
 import { useInbox } from 'dashboard/composables/useInbox';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
@@ -25,9 +26,15 @@ const currentInbox = computed(() =>
   store.getters['inboxes/getInbox'](route.params.inbox_id)
 );
 
+const showLinkDeviceModal = reactive({
+  value: false,
+});
+
 // Use useInbox composable with the inbox ID
 const {
   isAWhatsAppCloudChannel,
+  isAWhatsAppBaileysChannel,
+  isAWhatsAppZapiChannel,
   isATwilioChannel,
   isASmsInbox,
   isALineChannel,
@@ -87,6 +94,16 @@ const message = computed(() => {
     )}`;
   }
 
+  if (isAWhatsAppBaileysChannel.value || isAWhatsAppZapiChannel.value) {
+    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
+      'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.SUBTITLE'
+    )}`;
+  }
+
+  if (isAnEmailChannel.value && !currentInbox.value.provider) {
+    return t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
+  }
+
   if (currentInbox.value.web_widget_script) {
     return t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
   }
@@ -149,6 +166,14 @@ async function generateQRCodes() {
   }
 }
 
+const onOpenLinkDeviceModal = () => {
+  showLinkDeviceModal.value = true;
+};
+
+const onCloseLinkDeviceModal = () => {
+  showLinkDeviceModal.value = false;
+};
+
 // Watch for currentInbox changes and regenerate QR codes when available
 watch(
   currentInbox,
@@ -210,6 +235,14 @@ onMounted(() => {
             :script="currentInbox.provider_config.webhook_verify_token"
           />
         </div>
+        <div
+          v-if="isAWhatsAppBaileysChannel || isAWhatsAppZapiChannel"
+          class="w-[50%] max-w-[50%] ml-[25%]"
+        >
+          <NextButton @click="onOpenLinkDeviceModal">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_BUTTON') }}
+          </NextButton>
+        </div>
         <div class="w-[50%] max-w-[50%] ml-[25%]">
           <woot-code
             v-if="isALineChannel"
@@ -230,7 +263,12 @@ onMounted(() => {
           :inbox-id="$route.params.inbox_id"
         />
         <div
-          v-if="isAWhatsAppChannel && qrCodes.whatsapp"
+          v-if="
+            isAWhatsAppChannel &&
+            !isAWhatsAppBaileysChannel &&
+            !isAWhatsAppZapiChannel &&
+            qrCodes.whatsapp
+          "
           class="flex flex-col gap-3 items-center mt-8"
         >
           <p class="mt-2 text-sm text-n-slate-9">
@@ -303,5 +341,12 @@ onMounted(() => {
         </div>
       </div>
     </EmptyState>
+    <WhatsappLinkDeviceModal
+      v-if="showLinkDeviceModal.value"
+      :show="showLinkDeviceModal.value"
+      :on-close="onCloseLinkDeviceModal"
+      :inbox="currentInbox"
+      is-setup
+    />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -125,6 +125,7 @@ const openDelete = inbox => {
                   <ChannelName
                     :channel-type="inbox.channel_type"
                     :medium="inbox.medium"
+                    :provider="inbox.provider"
                   />
                 </div>
               </div>

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -110,6 +110,12 @@ export default {
       if (this.isATwilioWhatsAppChannel) {
         return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO');
       }
+      if (this.isAWhatsAppBaileysChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.BAILEYS');
+      }
+      if (this.isAWhatsAppZapiChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.ZAPI');
+      }
       return '';
     },
     tabs() {
@@ -159,7 +165,9 @@ export default {
         this.isAVoiceChannel ||
         (this.isAnEmailChannel && !this.inbox.provider) ||
         this.shouldShowWhatsAppConfiguration ||
-        this.isAWebWidgetInbox
+        this.isAWebWidgetInbox ||
+        this.isAWhatsAppBaileysChannel ||
+        this.isAWhatsAppZapiChannel
       ) {
         visibleToAllChannelTabs = [
           ...visibleToAllChannelTabs,

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BaileysWhatsapp.vue

@@ -0,0 +1,207 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required, requiredIf } from '@vuelidate/validators';
+import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
+import { isValidURL } from '../../../../../helper/URLHelper';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+import PromoBanner from 'dashboard/components-next/banner/PromoBanner.vue';
+
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const inboxName = ref('');
+const phoneNumber = ref('');
+const apiKey = ref('');
+const providerUrl = ref('');
+const showAdvancedOptions = ref(false);
+const markAsRead = ref(true);
+
+const uiFlags = computed(() => store.getters['inboxes/getUIFlags']);
+
+const rules = computed(() => ({
+  inboxName: { required },
+  phoneNumber: { required, isPhoneE164OrEmpty },
+  providerUrl: {
+    isValidURL: value => !value || isValidURL(value),
+    requiredIf: requiredIf(apiKey),
+  },
+  apiKey: { requiredIf: requiredIf(providerUrl) },
+}));
+
+const v$ = useVuelidate(rules, {
+  inboxName,
+  phoneNumber,
+  providerUrl,
+  apiKey,
+});
+
+const createChannel = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+
+  try {
+    const providerConfig = {
+      mark_as_read: markAsRead.value,
+    };
+
+    if (apiKey.value || providerUrl.value) {
+      providerConfig.api_key = apiKey.value;
+      providerConfig.url = providerUrl.value;
+    }
+
+    const whatsappChannel = await store.dispatch('inboxes/createChannel', {
+      name: inboxName.value,
+      channel: {
+        type: 'whatsapp',
+        phone_number: phoneNumber.value,
+        provider: 'baileys',
+        provider_config: providerConfig,
+      },
+    });
+
+    router.replace({
+      name: 'settings_inboxes_add_agents',
+      params: {
+        page: 'new',
+        inbox_id: whatsappChannel.id,
+      },
+    });
+  } catch (error) {
+    useAlert(error.message || t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE'));
+  }
+};
+
+const setShowAdvancedOptions = () => {
+  showAdvancedOptions.value = true;
+};
+
+const switchToZapi = () => {
+  router.push({
+    name: router.currentRoute.value.name,
+    params: router.currentRoute.value.params,
+    query: { provider: 'zapi' },
+  });
+};
+</script>
+
+<template>
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <div class="w-full mb-6">
+      <PromoBanner
+        :title="$t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.TITLE')"
+        :description="
+          $t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.DESCRIPTION')
+        "
+        variant="info"
+        logo-src="/assets/images/dashboard/channels/z-api/z-api-dark-blue.png"
+        logo-alt="Z-API"
+        :cta-text="$t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.CTA')"
+        @cta-click="switchToZapi"
+      />
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.inboxName.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
+        <input
+          v-model="inboxName"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
+          @blur="v$.inboxName.$touch"
+        />
+        <span v-if="v$.inboxName.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.phoneNumber.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
+        <input
+          v-model="phoneNumber"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
+          @blur="v$.phoneNumber.$touch"
+        />
+        <span v-if="v$.phoneNumber.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div
+      v-if="!showAdvancedOptions"
+      class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%] mb-4"
+    >
+      <NextButton icon="i-lucide-plus" sm link @click="setShowAdvancedOptions">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.ADVANCED_OPTIONS') }}
+      </NextButton>
+    </div>
+    <template v-else>
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <span class="text-sm text-gray-600">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.ADVANCED_OPTIONS') }}
+        </span>
+        <label :class="{ error: v$.providerUrl.$error }">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDER_URL.LABEL') }}
+          <input
+            v-model="providerUrl"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDER_URL.PLACEHOLDER')
+            "
+          />
+          <span v-if="v$.providerUrl.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDER_URL.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label :class="{ error: v$.apiKey.$error }">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
+          <input
+            v-model="apiKey"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
+          />
+          <span v-if="v$.apiKey.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+        <label>
+          <div class="flex mb-2 items-center">
+            <span class="mr-2 text-sm">
+              {{ $t('INBOX_MGMT.ADD.WHATSAPP.MARK_AS_READ.LABEL') }}
+            </span>
+            <Switch id="markAsRead" v-model="markAsRead" />
+          </div>
+        </label>
+      </div>
+    </template>
+
+    <div class="w-full">
+      <NextButton
+        :is-loading="uiFlags.isCreating"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+      />
+    </div>
+  </form>
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue

@@ -7,10 +7,12 @@ import router from '../../../../index';
 import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import PromoBanner from 'dashboard/components-next/banner/PromoBanner.vue';
 
 export default {
   components: {
     NextButton,
+    PromoBanner,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -25,7 +27,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
   },
   validations: {
     inboxName: { required },
@@ -72,12 +76,33 @@ export default {
         );
       }
     },
+    switchToZapi() {
+      router.push({
+        name: this.$route.name,
+        params: this.$route.params,
+        query: { provider: 'zapi' },
+      });
+    },
   },
 };
 </script>
 
 <template>
   <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
+    <div class="mb-6">
+      <PromoBanner
+        :title="$t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.TITLE')"
+        :description="
+          $t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.DESCRIPTION')
+        "
+        variant="info"
+        logo-src="/assets/images/dashboard/channels/z-api/z-api-dark-blue.png"
+        logo-alt="Z-API"
+        :cta-text="$t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.CTA')"
+        @cta-click="switchToZapi"
+      />
+    </div>
+
     <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue

@@ -6,12 +6,14 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import PromoBanner from 'dashboard/components-next/banner/PromoBanner.vue';
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 
 export default {
   components: {
     NextButton,
+    PromoBanner,
   },
   props: {
     type: {
@@ -42,6 +44,9 @@ export default {
     authTokeni18nKey() {
       return this.useAPIKey ? 'API_KEY_SECRET' : 'AUTH_TOKEN';
     },
+    isWhatsApp() {
+      return this.type === 'whatsapp';
+    },
   },
   validations() {
     let validations = {
@@ -112,12 +117,33 @@ export default {
         useAlert(errorMessage);
       }
     },
+    switchToZapi() {
+      router.push({
+        name: this.$route.name,
+        params: this.$route.params,
+        query: { provider: 'zapi' },
+      });
+    },
   },
 };
 </script>
 
 <template>
   <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
+    <div v-if="isWhatsApp" class="mb-6">
+      <PromoBanner
+        :title="$t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.TITLE')"
+        :description="
+          $t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.DESCRIPTION')
+        "
+        variant="info"
+        logo-src="/assets/images/dashboard/channels/z-api/z-api-dark-blue.png"
+        logo-alt="Z-API"
+        :cta-text="$t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SWITCH_BANNER.CTA')"
+        @cta-click="switchToZapi"
+      />
+    </div>
+
     <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.channelName.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue

@@ -7,6 +7,9 @@ import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
 import CloudWhatsapp from './CloudWhatsapp.vue';
 import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
 import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
+import BaileysWhatsapp from './BaileysWhatsapp.vue';
+import ZapiWhatsapp from './ZapiWhatsapp.vue';
+import PromoBanner from 'dashboard/components-next/banner/PromoBanner.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -19,6 +22,8 @@ const PROVIDER_TYPES = {
   WHATSAPP_EMBEDDED: 'whatsapp_embedded',
   WHATSAPP_MANUAL: 'whatsapp_manual',
   THREE_SIXTY_DIALOG: '360dialog',
+  BAILEYS: 'baileys',
+  ZAPI: 'zapi',
 };
 
 const hasWhatsappAppId = computed(() => {
@@ -34,20 +39,36 @@ const showProviderSelection = computed(() => !selectedProvider.value);
 
 const showConfiguration = computed(() => Boolean(selectedProvider.value));
 
-const availableProviders = computed(() => [
+const availableProviders = computed(() => {
-  {
+  const providers = [
-    key: PROVIDER_TYPES.WHATSAPP,
+    {
-    title: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'),
+      key: PROVIDER_TYPES.WHATSAPP,
-    description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC'),
+      title: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'),
-    icon: 'i-woot-whatsapp',
+      description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC'),
-  },
+      icon: 'i-woot-whatsapp',
-  {
+    },
-    key: PROVIDER_TYPES.TWILIO,
+    {
-    title: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO'),
+      key: PROVIDER_TYPES.TWILIO,
-    description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC'),
+      title: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO'),
-    icon: 'i-woot-twilio',
+      description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC'),
-  },
+      icon: 'i-woot-twilio',
-]);
+    },
+    {
+      key: PROVIDER_TYPES.BAILEYS,
+      title: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.BAILEYS'),
+      description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.BAILEYS_DESC'),
+      icon: 'i-woot-baileys',
+    },
+    {
+      key: PROVIDER_TYPES.ZAPI,
+      title: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.ZAPI'),
+      description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.ZAPI_DESC'),
+      icon: 'i-woot-zapi',
+    },
+  ];
+
+  return providers;
+});
 
 const selectProvider = providerValue => {
   router.push({
@@ -91,6 +112,29 @@ const handleManualLinkClick = () => {
           @click="selectProvider(provider.key)"
         />
       </div>
+
+      <div class="mt-6 relative overflow-visible">
+        <img
+          src="~dashboard/assets/images/curved-arrow.svg"
+          alt=""
+          class="absolute -top-12 right-0 w-20 h-20 pointer-events-none z-10 scale-y-[-1] -rotate-45"
+        />
+        <PromoBanner
+          :title="
+            $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.ZAPI_PROMO.TITLE')
+          "
+          :description="
+            $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.ZAPI_PROMO.DESCRIPTION')
+          "
+          variant="success"
+          logo-src="/assets/images/dashboard/channels/z-api/z-api-dark-green.png"
+          logo-alt="Z-API"
+          :cta-text="
+            $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.ZAPI_PROMO.CTA')
+          "
+          @cta-click="selectProvider(PROVIDER_TYPES.ZAPI)"
+        />
+      </div>
     </div>
 
     <div v-else-if="showConfiguration">
@@ -138,7 +182,13 @@ const handleManualLinkClick = () => {
         <ThreeSixtyDialogWhatsapp
           v-else-if="selectedProvider === PROVIDER_TYPES.THREE_SIXTY_DIALOG"
         />
-        <CloudWhatsapp v-else />
+        <CloudWhatsapp
+          v-else-if="selectedProvider === PROVIDER_TYPES.WHATSAPP"
+        />
+        <BaileysWhatsapp
+          v-else-if="selectedProvider === PROVIDER_TYPES.BAILEYS"
+        />
+        <ZapiWhatsapp v-else-if="selectedProvider === PROVIDER_TYPES.ZAPI" />
       </div>
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/ZapiWhatsapp.vue

@@ -0,0 +1,182 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import PromoBanner from 'dashboard/components-next/banner/PromoBanner.vue';
+
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const inboxName = ref('');
+const phoneNumber = ref('');
+const instanceId = ref('');
+const token = ref('');
+const clientToken = ref('');
+
+const uiFlags = computed(() => store.getters['inboxes/getUIFlags']);
+
+// NOTE: Affiliate link is left intentionally hardcoded.
+const zapiAffiliateUrl =
+  'https://app.z-api.io/app/auth/new-account?afilliate=3E0B31343E6CB0297B567AC1D8277FBB';
+
+const rules = computed(() => ({
+  inboxName: { required },
+  phoneNumber: { required, isPhoneE164OrEmpty },
+  instanceId: { required },
+  token: { required },
+  clientToken: { required },
+}));
+
+const v$ = useVuelidate(rules, {
+  inboxName,
+  phoneNumber,
+  instanceId,
+  token,
+  clientToken,
+});
+
+const createChannel = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+
+  try {
+    const whatsappChannel = await store.dispatch('inboxes/createChannel', {
+      name: inboxName.value,
+      channel: {
+        type: 'whatsapp',
+        phone_number: phoneNumber.value,
+        provider: 'zapi',
+        provider_config: {
+          instance_id: instanceId.value,
+          token: token.value,
+          client_token: clientToken.value,
+        },
+      },
+    });
+
+    router.replace({
+      name: 'settings_inboxes_add_agents',
+      params: {
+        page: 'new',
+        inbox_id: whatsappChannel.id,
+      },
+    });
+  } catch (error) {
+    useAlert(error.message || t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <div class="w-full mb-6">
+      <PromoBanner
+        :title="$t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SETUP_BANNER.TITLE')"
+        :description="
+          $t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SETUP_BANNER.DESCRIPTION')
+        "
+        variant="success"
+        logo-src="/assets/images/dashboard/channels/z-api/z-api-dark-green.png"
+        logo-alt="Z-API"
+        :cta-text="$t('INBOX_MGMT.ADD.WHATSAPP.ZAPI_PROMO.SETUP_BANNER.CTA')"
+        cta-external
+        :cta-link="zapiAffiliateUrl"
+      />
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.inboxName.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
+        <input
+          v-model="inboxName"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
+          @blur="v$.inboxName.$touch"
+        />
+        <span v-if="v$.inboxName.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.phoneNumber.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
+        <input
+          v-model="phoneNumber"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
+          @blur="v$.phoneNumber.$touch"
+        />
+        <span v-if="v$.phoneNumber.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.instanceId.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INSTANCE_ID.LABEL') }}
+        <input
+          v-model="instanceId"
+          type="password"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INSTANCE_ID.PLACEHOLDER')"
+          @blur="v$.instanceId.$touch"
+        />
+        <span v-if="v$.instanceId.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INSTANCE_ID.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.token.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.TOKEN.LABEL') }}
+        <input
+          v-model="token"
+          type="password"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.TOKEN.PLACEHOLDER')"
+          @blur="v$.token.$touch"
+        />
+        <span v-if="v$.token.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.TOKEN.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.clientToken.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.CLIENT_TOKEN.LABEL') }}
+        <input
+          v-model="clientToken"
+          type="password"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.CLIENT_TOKEN.PLACEHOLDER')"
+          @blur="v$.clientToken.$touch"
+        />
+        <span v-if="v$.clientToken.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.CLIENT_TOKEN.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-full">
+      <NextButton
+        :is-loading="uiFlags.isCreating"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+      />
+    </div>
+  </form>
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue

@@ -12,6 +12,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  provider: {
+    type: String,
+    default: '',
+  },
 });
 const getters = useStoreGetters();
 const { t } = useI18n();
@@ -39,6 +43,16 @@ const twilioChannelName = () => {
   return t(`INBOX_MGMT.CHANNELS.TWILIO_SMS`);
 };
 
+const whatsappChannelName = () => {
+  if (props.provider === 'baileys') {
+    return t(`INBOX_MGMT.CHANNELS.WHATSAPP_BAILEYS`);
+  }
+  if (props.provider === 'zapi') {
+    return t(`INBOX_MGMT.CHANNELS.WHATSAPP_ZAPI`);
+  }
+  return t(`INBOX_MGMT.CHANNELS.WHATSAPP`);
+};
+
 const readableChannelName = computed(() => {
   if (props.channelType === 'Channel::Api') {
     return globalConfig.value.apiChannelName || t('INBOX_MGMT.CHANNELS.API');
@@ -46,6 +60,9 @@ const readableChannelName = computed(() => {
   if (props.channelType === 'Channel::TwilioSms') {
     return twilioChannelName();
   }
+  if (props.channelType === 'Channel::Whatsapp') {
+    return whatsappChannelName();
+  }
   return t(`INBOX_MGMT.CHANNELS.${i18nMap[props.channelType]}`);
 });
 </script>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/WhatsappLinkDeviceModal.vue

@@ -0,0 +1,168 @@
+<script setup>
+import { onMounted, computed, onUnmounted, ref, watchEffect } from 'vue';
+import { useStore } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import InboxName from 'dashboard/components/widgets/InboxName.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  show: { type: Boolean, required: true },
+  onClose: { type: Function, required: true },
+  isSetup: { type: Boolean, required: false },
+  inbox: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useStore();
+
+const providerConnection = computed(() => props.inbox.provider_connection);
+const connection = computed(() => providerConnection.value?.connection);
+const qrDataUrl = computed(() => providerConnection.value?.qr_data_url);
+const error = computed(() => providerConnection.value?.error);
+
+const loading = ref(false);
+
+const handleError = e => {
+  useAlert(e.message);
+  loading.value = false;
+};
+const setup = () => {
+  loading.value = true;
+  store
+    .dispatch('inboxes/setupChannelProvider', props.inbox.id)
+    .catch(handleError);
+};
+const disconnect = () => {
+  loading.value = true;
+  store
+    .dispatch('inboxes/disconnectChannelProvider', props.inbox.id)
+    .catch(handleError);
+};
+
+onMounted(() => {
+  if (!connection.value || connection.value === 'close') {
+    setup();
+  }
+});
+onUnmounted(() => {
+  if (
+    connection.value === 'connecting' ||
+    connection.value === 'reconnecting'
+  ) {
+    disconnect();
+  }
+});
+watchEffect(() => {
+  if (connection.value) {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <woot-modal :show="show" size="small" @close="onClose">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="
+          $t(
+            'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_DEVICE_MODAL.TITLE'
+          )
+        "
+        :header-content="
+          $t(
+            'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_DEVICE_MODAL.SUBTITLE'
+          )
+        "
+      />
+
+      <div class="flex flex-col gap-4 p-8 pt-4">
+        <div class="flex flex-col gap-4 items-center">
+          <InboxName
+            :inbox="inbox"
+            class="!text-lg"
+            with-phone-number
+            with-provider-connection-status
+          />
+
+          <template v-if="!connection || connection === 'close' || error">
+            <p v-if="error" class="text-red-500 text-center">
+              {{ error }}
+            </p>
+            <Button :is-loading="loading" @click="setup">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_DEVICE_MODAL.LINK_DEVICE'
+                )
+              }}
+            </Button>
+          </template>
+
+          <template v-else-if="connection === 'connecting'">
+            <div v-if="!qrDataUrl" class="flex flex-col gap-4 items-center">
+              <p>
+                {{
+                  $t(
+                    'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_DEVICE_MODAL.LOADING_QRCODE'
+                  )
+                }}
+              </p>
+              <Spinner />
+            </div>
+            <img
+              v-else
+              :src="qrDataUrl"
+              alt="QR Code"
+              class="w-[276px] h-[276px]"
+            />
+          </template>
+
+          <template v-else-if="connection === 'reconnecting'">
+            <p>
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_DEVICE_MODAL.RECONNECTING'
+                )
+              }}
+            </p>
+            <Spinner />
+          </template>
+
+          <template v-else-if="connection === 'open'">
+            <p v-if="isSetup" class="text-center">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_DEVICE_MODAL.CONNECTED'
+                )
+              }}
+            </p>
+            <div class="flex gap-2">
+              <Button ghost :is-loading="loading" @click="disconnect">
+                {{
+                  $t(
+                    'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_DEVICE_MODAL.DISCONNECT'
+                  )
+                }}
+              </Button>
+              <router-link
+                v-if="isSetup"
+                :to="{
+                  name: 'inbox_dashboard',
+                  params: { inboxId: inbox.id },
+                }"
+              >
+                <Button
+                  solid
+                  teal
+                  :label="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
+                />
+              </router-link>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </woot-modal>
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -5,11 +5,14 @@ import SettingsSection from '../../../../../components/SettingsSection.vue';
 import ImapSettings from '../ImapSettings.vue';
 import SmtpSettings from '../SmtpSettings.vue';
 import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import TextArea from 'next/textarea/TextArea.vue';
 import WhatsappReauthorize from '../channels/whatsapp/Reauthorize.vue';
-import { sanitizeAllowedDomains } from 'dashboard/helper/URLHelper';
+import { sanitizeAllowedDomains, isValidURL } from 'dashboard/helper/URLHelper';
+import { requiredIf } from '@vuelidate/validators';
+import WhatsappLinkDeviceModal from '../components/WhatsappLinkDeviceModal.vue';
+import InboxName from 'dashboard/components/widgets/InboxName.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
 
 export default {
   components: {
@@ -19,6 +22,10 @@ export default {
     NextButton,
     TextArea,
     WhatsappReauthorize,
+    WhatsappLinkDeviceModal,
+    InboxName,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Switch,
   },
   mixins: [inboxMixin],
   props: {
@@ -38,10 +45,29 @@ export default {
       isSyncingTemplates: false,
       allowedDomains: '',
       isUpdatingAllowedDomains: false,
+      baileysProviderUrl: '',
+      showLinkDeviceModal: false,
+      markAsRead: true,
+      zapiInstanceId: '',
+      zapiToken: '',
+      zapiClientToken: '',
+      zapiInstanceIdUpdate: '',
+      zapiTokenUpdate: '',
+      zapiClientTokenUpdate: '',
     };
   },
-  validations: {
+  validations() {
-    whatsAppInboxAPIKey: { required },
+    return {
+      whatsAppInboxAPIKey: {
+        requiredIf: requiredIf(
+          !this.isAWhatsAppBaileysChannel && !this.isAWhatsAppZapiChannel
+        ),
+      },
+      baileysProviderUrl: { isValidURL: value => !value || isValidURL(value) },
+      zapiInstanceIdUpdate: {},
+      zapiTokenUpdate: {},
+      zapiClientTokenUpdate: {},
+    };
   },
   computed: {
     isEmbeddedSignupWhatsApp() {
@@ -66,6 +92,11 @@ export default {
     setDefaults() {
       this.hmacMandatory = this.inbox.hmac_mandatory || false;
       this.allowedDomains = this.inbox.allowed_domains || '';
+      this.baileysProviderUrl = this.inbox.provider_config?.provider_url ?? '';
+      this.markAsRead = this.inbox.provider_config?.mark_as_read ?? true;
+      this.zapiInstanceId = this.inbox.provider_config?.instance_id ?? '';
+      this.zapiToken = this.inbox.provider_config?.token ?? '';
+      this.zapiClientToken = this.inbox.provider_config?.client_token ?? '';
     },
     handleHmacFlag() {
       this.updateInbox();
@@ -144,6 +175,103 @@ export default {
         this.isSyncingTemplates = false;
       }
     },
+    async updateBaileysProviderUrl() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              provider_url: this.baileysProviderUrl,
+            },
+          },
+        };
+
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    async updateWhatsAppMarkAsRead() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              mark_as_read: this.markAsRead,
+            },
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    onOpenLinkDeviceModal() {
+      this.showLinkDeviceModal = true;
+    },
+    onCloseLinkDeviceModal() {
+      this.showLinkDeviceModal = false;
+    },
+    async updateZapiInstanceId() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              instance_id: this.zapiInstanceIdUpdate,
+            },
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    async updateZapiToken() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              token: this.zapiTokenUpdate,
+            },
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    async updateZapiClientToken() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              client_token: this.zapiClientTokenUpdate,
+            },
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
   },
 };
 </script>
@@ -326,7 +454,7 @@ export default {
     <ImapSettings :inbox="inbox" />
     <SmtpSettings v-if="inbox.imap_enabled" :inbox="inbox" />
   </div>
-  <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
+  <div v-else-if="isAWhatsAppCloudChannel">
     <div v-if="inbox.provider_config" class="mx-8">
       <!-- Embedded Signup Section -->
       <template v-if="isEmbeddedSignupWhatsApp">
@@ -422,6 +550,285 @@ export default {
       class="hidden"
     />
   </div>
+  <div v-else-if="isAWhatsAppBaileysChannel">
+    <WhatsappLinkDeviceModal
+      v-if="showLinkDeviceModal"
+      :show="showLinkDeviceModal"
+      :on-close="onCloseLinkDeviceModal"
+      :inbox="inbox"
+    />
+    <div class="mx-8">
+      <SettingsSection
+        :title="
+          $t(
+            'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_TITLE'
+          )
+        "
+        :sub-title="
+          $t(
+            'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_SUBHEADER'
+          )
+        "
+      >
+        <div class="flex flex-col gap-2">
+          <InboxName
+            :inbox="inbox"
+            class="!text-lg !m-0"
+            with-phone-number
+            with-provider-connection-status
+          />
+          <NextButton class="w-fit" @click="onOpenLinkDeviceModal">
+            {{
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_BUTTON'
+              )
+            }}
+          </NextButton>
+        </div>
+      </SettingsSection>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_TITLE')"
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_SUBHEADER')
+        "
+      >
+        <div
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
+        >
+          <woot-input
+            v-model="baileysProviderUrl"
+            type="text"
+            class="flex-1 mr-2 items-center"
+            :placeholder="
+              $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_PLACEHOLDER')
+            "
+            @keydown="v$.baileysProviderUrl.$touch"
+          />
+          <NextButton
+            :disabled="
+              v$.baileysProviderUrl.$invalid ||
+              baileysProviderUrl === inbox.provider_config.provider_url
+            "
+            @click="updateBaileysProviderUrl"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
+          </NextButton>
+        </div>
+        <span v-if="v$.baileysProviderUrl.$error" class="text-red-400">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_ERROR') }}
+        </span>
+      </SettingsSection>
+      <template v-if="inbox.provider_config.api_key">
+        <SettingsSection
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
+          :sub-title="
+            $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')
+          "
+        >
+          <woot-code :script="inbox.provider_config.api_key" />
+        </SettingsSection>
+      </template>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
+        "
+      >
+        <div
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
+        >
+          <woot-input
+            v-model="whatsAppInboxAPIKey"
+            type="text"
+            class="flex-1 mr-2"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
+              )
+            "
+          />
+          <NextButton
+            :disabled="
+              v$.whatsAppInboxAPIKey.$invalid ||
+              (!inbox.provider_config.api_key && !whatsAppInboxAPIKey) ||
+              whatsAppInboxAPIKey === inbox.provider_config.api_key
+            "
+            @click="updateWhatsAppInboxAPIKey"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
+          </NextButton>
+        </div>
+      </SettingsSection>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MARK_AS_READ_TITLE')"
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MARK_AS_READ_SUBHEADER')
+        "
+      >
+        <div class="flex items-center gap-2">
+          <Switch
+            id="markAsRead"
+            v-model="markAsRead"
+            @change="updateWhatsAppMarkAsRead"
+          />
+          <label for="markAsRead">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MARK_AS_READ_LABEL') }}
+          </label>
+        </div>
+      </SettingsSection>
+    </div>
+  </div>
+  <div v-else-if="isAWhatsAppZapiChannel">
+    <WhatsappLinkDeviceModal
+      v-if="showLinkDeviceModal"
+      :show="showLinkDeviceModal"
+      :on-close="onCloseLinkDeviceModal"
+      :inbox="inbox"
+    />
+    <div class="mx-8">
+      <SettingsSection
+        :title="
+          $t(
+            'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_TITLE'
+          )
+        "
+        :sub-title="
+          $t(
+            'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_SUBHEADER'
+          )
+        "
+      >
+        <div class="flex flex-col gap-2">
+          <InboxName
+            :inbox="inbox"
+            class="!text-lg !m-0"
+            with-phone-number
+            with-provider-connection-status
+          />
+          <NextButton class="w-fit" @click="onOpenLinkDeviceModal">
+            {{
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_BUTTON'
+              )
+            }}
+          </NextButton>
+        </div>
+      </SettingsSection>
+
+      <template v-if="inbox.provider_config.instance_id">
+        <SettingsSection
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_INSTANCE_ID_TITLE')"
+          :sub-title="
+            $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_INSTANCE_ID_SUBHEADER')
+          "
+        >
+          <woot-code :script="inbox.provider_config.instance_id" />
+        </SettingsSection>
+      </template>
+      <SettingsSection
+        :title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_INSTANCE_ID_UPDATE_TITLE')
+        "
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_INSTANCE_ID_UPDATE_SUBHEADER')
+        "
+      >
+        <div
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
+        >
+          <woot-input
+            v-model="zapiInstanceIdUpdate"
+            type="text"
+            class="flex-1 mr-2"
+          />
+          <NextButton
+            :disabled="
+              v$.zapiInstanceIdUpdate.$invalid ||
+              (!inbox.provider_config.instance_id && !zapiInstanceIdUpdate) ||
+              zapiInstanceIdUpdate === inbox.provider_config.instance_id
+            "
+            @click="updateZapiInstanceId"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
+          </NextButton>
+        </div>
+      </SettingsSection>
+
+      <template v-if="inbox.provider_config.token">
+        <SettingsSection
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TOKEN_TITLE')"
+          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TOKEN_SUBHEADER')"
+        >
+          <woot-code :script="inbox.provider_config.token" secure />
+        </SettingsSection>
+      </template>
+      <SettingsSection
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TOKEN_UPDATE_TITLE')"
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TOKEN_UPDATE_SUBHEADER')
+        "
+      >
+        <div
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
+        >
+          <woot-input
+            v-model="zapiTokenUpdate"
+            type="password"
+            class="flex-1 mr-2"
+          />
+          <NextButton
+            :disabled="
+              v$.zapiTokenUpdate.$invalid ||
+              (!inbox.provider_config.token && !zapiTokenUpdate) ||
+              zapiTokenUpdate === inbox.provider_config.token
+            "
+            @click="updateZapiToken"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
+          </NextButton>
+        </div>
+      </SettingsSection>
+
+      <template v-if="inbox.provider_config.client_token">
+        <SettingsSection
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CLIENT_TOKEN_TITLE')"
+          :sub-title="
+            $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CLIENT_TOKEN_SUBHEADER')
+          "
+        >
+          <woot-code :script="inbox.provider_config.client_token" secure />
+        </SettingsSection>
+      </template>
+      <SettingsSection
+        :title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CLIENT_TOKEN_UPDATE_TITLE')
+        "
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CLIENT_TOKEN_UPDATE_SUBHEADER')
+        "
+      >
+        <div
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
+        >
+          <woot-input
+            v-model="zapiClientTokenUpdate"
+            type="password"
+            class="flex-1 mr-2"
+          />
+          <NextButton
+            :disabled="
+              v$.zapiClientTokenUpdate.$invalid ||
+              (!inbox.provider_config.client_token && !zapiClientTokenUpdate) ||
+              zapiClientTokenUpdate === inbox.provider_config.client_token
+            "
+            @click="updateZapiClientToken"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
+          </NextButton>
+        </div>
+      </SettingsSection>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue

@@ -4,10 +4,12 @@ import { required, url } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
 
 export default {
   components: {
     NextButton,
+    ToggleSwitch,
   },
   props: {
     show: {
@@ -41,6 +43,7 @@ export default {
       isLoading: false,
       app: {
         title: '',
+        show_on_sidebar: false,
         content: {
           type: 'frame',
           url: '',
@@ -62,6 +65,7 @@ export default {
     if (this.mode === 'UPDATE' && this.selectedAppData) {
       this.app.title = this.selectedAppData.title;
       this.app.content = this.selectedAppData.content[0];
+      this.app.show_on_sidebar = this.selectedAppData.show_on_sidebar ?? false;
     }
   },
   methods: {
@@ -69,6 +73,7 @@ export default {
       // Reset the data once closed
       this.app = {
         title: '',
+        show_on_sidebar: false,
         content: { type: 'frame', url: '' },
       };
       this.$emit('close');
@@ -83,6 +88,7 @@ export default {
         const action = this.mode.toLowerCase();
         const payload = {
           title: this.app.title,
+          show_on_sidebar: this.app.show_on_sidebar,
           content: [this.app.content],
         };
 
@@ -149,6 +155,19 @@ export default {
           @input="v$.app.content.url.$touch"
           @blur="v$.app.content.url.$touch"
         />
+        <div class="flex items-center w-full gap-3 py-2">
+          <label
+            class="text-sm text-n-slate-12 cursor-pointer"
+            for="show-on-sidebar"
+          >
+            {{
+              $t(
+                'INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.SHOW_ON_SIDEBAR_LABEL'
+              )
+            }}
+          </label>
+          <ToggleSwitch id="show-on-sidebar" v-model="app.show_on_sidebar" />
+        </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
           <NextButton
             faded

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/EditWebHook.vue

@@ -53,6 +53,7 @@ export default {
       :value="value"
       :is-submitting="uiFlags.updatingItem"
       :submit-label="$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.EDIT_SUBMIT')"
+      is-editing
       @submit="onSubmit"
       @cancel="onClose"
     />

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue

@@ -1,9 +1,11 @@
 <script>
 import { useVuelidate } from '@vuelidate/core';
-import { required, url, minLength } from '@vuelidate/validators';
+import { required, url, minLength, or } from '@vuelidate/validators';
 import wootConstants from 'dashboard/constants/globals';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import { useMapGetter } from 'dashboard/composables/store';
 
 const { EXAMPLE_WEBHOOK_URL } = wootConstants;
 
@@ -18,11 +20,25 @@ const SUPPORTED_WEBHOOK_EVENTS = [
   'contact_updated',
   'conversation_typing_on',
   'conversation_typing_off',
+  'provider_event_received',
 ];
 
+const localhostUrl = value => {
+  if (!value) {
+    return true;
+  }
+  const isRunningOnLocalhost = ['localhost', '127.0.0.1'].includes(
+    window.location.hostname
+  );
+  const localUrlPattern =
+    /^(?:https?:\/\/)?(?:localhost|127\.0\.0\.1)(?::\d+)?(?:\/.*)?$/i;
+  return isRunningOnLocalhost && localUrlPattern.test(value);
+};
+
 export default {
   components: {
     NextButton,
+    MultiselectDropdown,
   },
   props: {
     value: {
@@ -37,16 +53,23 @@ export default {
       type: String,
       required: true,
     },
+    isEditing: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['submit', 'cancel'],
   setup() {
-    return { v$: useVuelidate() };
+    return {
+      v$: useVuelidate(),
+      inboxes: useMapGetter('inboxes/getInboxes'),
+    };
   },
   validations: {
     url: {
       required,
       minLength: minLength(7),
-      url,
+      url: or(localhostUrl, url),
     },
     subscriptions: {
       required,
@@ -55,12 +78,27 @@ export default {
   data() {
     return {
       url: this.value.url || '',
+      assignedInbox: this.value.inbox || null,
       name: this.value.name || '',
       subscriptions: this.value.subscriptions || [],
       supportedWebhookEvents: SUPPORTED_WEBHOOK_EVENTS,
     };
   },
   computed: {
+    inboxesList() {
+      if (this.assignedInbox?.id) {
+        return [
+          {
+            id: 0,
+            name: this.$t(
+              'INTEGRATION_SETTINGS.WEBHOOK.FORM.INBOX.PLACEHOLDER'
+            ),
+          },
+          ...this.inboxes,
+        ];
+      }
+      return this.inboxes;
+    },
     webhookURLInputPlaceholder() {
       return this.$t(
         'INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.PLACEHOLDER',
@@ -77,10 +115,14 @@ export default {
     onSubmit() {
       this.$emit('submit', {
         url: this.url,
+        inbox_id: this.assignedInbox?.id || null,
         name: this.name,
         subscriptions: this.subscriptions,
       });
     },
+    onClickAssignInbox(inbox) {
+      this.assignedInbox = inbox;
+    },
     getI18nKey,
   },
 };
@@ -95,6 +137,7 @@ export default {
           v-model="url"
           type="text"
           name="url"
+          :disabled="isEditing"
           :placeholder="webhookURLInputPlaceholder"
           @input="v$.url.$touch"
         />
@@ -102,6 +145,29 @@ export default {
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
         </span>
       </label>
+      <label>
+        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.INBOX.LABEL') }}
+        <div class="multiselect-wrap--small">
+          <MultiselectDropdown
+            :options="inboxesList"
+            :selected-item="assignedInbox"
+            :multiselector-title="
+              $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.INBOX.TITLE')
+            "
+            :multiselector-placeholder="
+              $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.INBOX.PLACEHOLDER')
+            "
+            :no-search-result="
+              $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.INBOX.NO_RESULTS')
+            "
+            :input-placeholder="
+              $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.INBOX.INPUT_PLACEHOLDER')
+            "
+            :disabled="isEditing"
+            @select="onClickAssignInbox"
+          />
+        </div>
+      </label>
       <label>
         {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.NAME.LABEL') }}
         <input
@@ -141,7 +207,6 @@ export default {
         </div>
       </div>
     </div>
-
     <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
       <NextButton
         faded

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
 import { useI18n } from 'vue-i18n';
+import InboxName from 'components/widgets/InboxName.vue';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -37,6 +38,7 @@ const subscribedEvents = computed(() => {
 <template>
   <tr>
     <td class="py-4 ltr:pr-4 rtl:pl-4">
+      <InboxName v-if="webhook.inbox" class="!mx-0" :inbox="webhook.inbox" />
       <div class="flex gap-2 font-medium break-words text-n-slate-12">
         <template v-if="webhook.name">
           {{ webhook.name }}

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -63,6 +63,8 @@ export default {
       displayName: '',
       email: '',
       messageSignature: '',
+      signaturePosition: '',
+      signatureSeparator: '',
       hotKeys: [
         {
           key: 'enter',
@@ -114,6 +116,11 @@ export default {
       this.avatarUrl = this.currentUser.avatar_url;
       this.displayName = this.currentUser.display_name;
       this.messageSignature = this.currentUser.message_signature;
+
+      const { signature_position, signature_separator } =
+        this.currentUser.ui_settings || {};
+      this.signaturePosition = signature_position || 'top';
+      this.signatureSeparator = signature_separator || 'blank';
     },
     async dispatchUpdate(payload, successMessage, errorMessage) {
       let alertMessage = '';
@@ -154,16 +161,29 @@ export default {
 
       if (hasEmailChanged && success) clearCookiesOnLogout();
     },
-    async updateSignature(signature) {
+    async updateSignature(signature, signaturePosition, signatureSeparator) {
-      const payload = { message_signature: signature };
+      try {
-      let successMessage = this.$t(
+        const signaturePayload = { message_signature: signature };
-        'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_SUCCESS'
+        await this.dispatchUpdate(
-      );
+          signaturePayload,
-      let errorMessage = this.$t(
+          this.$t(
-        'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_ERROR'
+            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_SUCCESS'
-      );
+          ),
+          this.$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_ERROR')
+        );
 
-      await this.dispatchUpdate(payload, successMessage, errorMessage);
+        await this.updateUISettings({
+          signature_position: signaturePosition,
+          signature_separator: signatureSeparator,
+        });
+
+        this.signaturePosition = signaturePosition;
+        this.signatureSeparator = signatureSeparator;
+      } catch (error) {
+        useAlert(
+          this.$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_ERROR')
+        );
+      }
     },
     updateProfilePicture({ file, url }) {
       this.avatarFile = file;
@@ -251,6 +271,8 @@ export default {
     >
       <MessageSignature
         :message-signature="messageSignature"
+        :signature-position="signaturePosition"
+        :signature-separator="signatureSeparator"
         @update-signature="updateSignature"
       />
     </FormSection>

app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue

@@ -1,5 +1,7 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 import NextButton from 'dashboard/components-next/button/Button.vue';
@@ -9,25 +11,184 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  signaturePosition: {
+    type: String,
+    // NOTE: 'top' or 'bottom'
+    default: 'top',
+  },
+  signatureSeparator: {
+    type: String,
+    // NOTE: 'blank' or '--'
+    default: 'blank',
+  },
 });
 
 const emit = defineEmits(['updateSignature']);
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
 const customEditorMenuList = MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS;
 const signature = ref(props.messageSignature);
+const signaturePosition = ref(props.signaturePosition);
+const signatureSeparator = ref(props.signatureSeparator);
+
+const positionOptions = computed(() => [
+  {
+    value: 'top',
+    label: t(
+      'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.SIGNATURE_POSITION.OPTIONS.TOP'
+    ),
+  },
+  {
+    value: 'bottom',
+    label: t(
+      'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.SIGNATURE_POSITION.OPTIONS.BOTTOM'
+    ),
+  },
+]);
+
+const separatorOptions = computed(() => [
+  {
+    value: 'blank',
+    label: t(
+      'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.SIGNATURE_SEPARATOR.OPTIONS.BLANK'
+    ),
+  },
+  {
+    value: '--',
+    label: t(
+      'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.SIGNATURE_SEPARATOR.OPTIONS.HORIZONTAL_LINE'
+    ),
+  },
+]);
+
+const sampleMessage = computed(
+  () =>
+    `<p>${t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.PREVIEW.SAMPLE_MESSAGE')}</p>`
+);
+
+const formattedSignature = computed(() => {
+  if (!signature.value) return '';
+  return formatMessage(signature.value, false, false);
+});
+
+const messagePreview = computed(() => {
+  if (!signature.value) return sampleMessage.value;
+
+  const separator =
+    signatureSeparator.value === 'blank' ? '<p></p>' : '<p>--</p>';
+
+  if (signaturePosition.value === 'top') {
+    return `${formattedSignature.value}${separator}${sampleMessage.value}`;
+  }
+  return `${sampleMessage.value}${separator}${formattedSignature.value}`;
+});
+
+watch(
+  () => props.signaturePosition,
+  newValue => {
+    signaturePosition.value = newValue;
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.signatureSeparator,
+  newValue => {
+    signatureSeparator.value = newValue;
+  },
+  { immediate: true }
+);
+
 watch(
   () => props.messageSignature ?? '',
   newValue => {
     signature.value = newValue;
-  }
+  },
+  { immediate: true }
 );
 
 const updateSignature = () => {
-  emit('updateSignature', signature.value);
+  emit(
+    'updateSignature',
+    signature.value,
+    signaturePosition.value,
+    signatureSeparator.value
+  );
+};
+
+const handlePositionChange = value => {
+  signaturePosition.value = value;
+  emit('updateSignature', signature.value, value, signatureSeparator.value);
+};
+
+const handleSeparatorChange = value => {
+  signatureSeparator.value = value;
+  emit('updateSignature', signature.value, signaturePosition.value, value);
 };
 </script>
 
 <template>
   <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="flex flex-col gap-2">
+        <label
+          for="signaturePosition"
+          class="text-sm font-medium text-n-slate-12"
+        >
+          {{
+            t(
+              'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.SIGNATURE_POSITION.LABEL'
+            )
+          }}
+        </label>
+        <select
+          id="signaturePosition"
+          v-model="signaturePosition"
+          name="signaturePosition"
+          class="block w-full px-3 py-2 pr-6 mb-0 shadow-sm appearance-none rounded-xl select-caret leading-6 bg-white dark:bg-n-slate-3 border border-n-slate-3 dark:border-n-slate-7"
+          @change="handlePositionChange($event.target.value)"
+        >
+          <option
+            v-for="option in positionOptions"
+            :key="option.value"
+            :value="option.value"
+            :selected="option.value === signaturePosition"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
+      <div class="flex flex-col gap-2">
+        <label
+          for="signatureSeparator"
+          class="text-sm font-medium text-n-slate-12"
+        >
+          {{
+            t(
+              'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.SIGNATURE_SEPARATOR.LABEL'
+            )
+          }}
+        </label>
+        <select
+          id="signatureSeparator"
+          v-model="signatureSeparator"
+          name="signatureSeparator"
+          class="block w-full px-3 py-2 pr-6 mb-0 shadow-sm appearance-none rounded-xl select-caret leading-6 bg-white dark:bg-n-slate-3 border border-n-slate-3 dark:border-n-slate-7"
+          @change="handleSeparatorChange($event.target.value)"
+        >
+          <option
+            v-for="option in separatorOptions"
+            :key="option.value"
+            :value="option.value"
+            :selected="option.value === signatureSeparator"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
+    </div>
     <WootMessageEditor
       id="message-signature-input"
       v-model="signature"
@@ -38,6 +199,35 @@ const updateSignature = () => {
       :enable-suggestions="false"
       show-image-resize-toolbar
     />
+    <div
+      class="flex flex-col gap-3 p-4 bg-n-slate-1 dark:bg-n-slate-2 rounded-lg border border-n-slate-4 dark:border-n-slate-8"
+    >
+      <div class="flex items-center gap-2">
+        <fluent-icon icon="info" size="16" class="text-n-slate-11" />
+        <h3 class="text-sm font-medium text-n-slate-12 m-0">
+          {{
+            $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.PREVIEW.TITLE')
+          }}
+        </h3>
+      </div>
+      <div
+        class="bg-white dark:bg-n-slate-3 rounded-md p-3 border border-n-slate-3 dark:border-n-slate-7"
+      >
+        <div
+          v-if="messagePreview"
+          v-dompurify-html="messagePreview"
+          class="message-preview text-sm text-n-slate-12 [&>p]:mb-2 [&>p:last-child]:mb-0"
+        />
+        <div v-else class="text-sm text-n-slate-10 italic">
+          {{
+            $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.PREVIEW.EMPTY')
+          }}
+        </div>
+      </div>
+      <p class="text-xs text-n-slate-11 m-0">
+        {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.PREVIEW.NOTE') }}
+      </p>
+    </div>
     <div>
       <NextButton
         type="submit"