fix: typo

feat: add story config
feat: multiple vite configs
2024-12-05 10:45:24 +05:30 · 2024-12-05 10:38:38 +05:30 · 2024-12-04 20:43:42 +05:30 · 2024-12-04 20:12:12 +05:30
1849 changed files with 32983 additions and 89246 deletions
@@ -19,19 +19,13 @@ jobs:
    steps:
      - checkout
      - node/install:
-          node-version: '23.7'
+          node-version: '20.12'
      - node/install-pnpm
      - node/install-packages:
          pkg-manager: pnpm
          override-ci-command: pnpm i
      - run: node --version
      - run: pnpm --version
-      - run:
-          name: Add PostgreSQL repository and update
-          command: |
-            sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
-            wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
-            sudo apt-get update -y

      - run:
          name: Install System Dependencies
@@ -40,9 +34,7 @@ jobs:
            DEBIAN_FRONTEND=noninteractive sudo apt-get install -y \
              libpq-dev \
              redis-server \
-              postgresql-common \
-              postgresql-16 \
-              postgresql-16-pgvector \
+              postgresql \
              build-essential \
              git \
              curl \
@@ -82,7 +74,7 @@ jobs:
            source ~/.rvm/scripts/rvm
            rvm install "3.3.3"
            rvm use 3.3.3 --default
-            gem install bundler -v 2.5.16
+            gem install bundler

      - run:
          name: Install Application Dependencies
@@ -51,7 +51,6 @@ exclude_patterns:
  - 'app/javascript/dashboard/routes/dashboard/settings/automation/constants.js'
  - 'app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js'
  - 'app/javascript/dashboard/routes/dashboard/settings/reports/constants.js'
-  - 'app/javascript/dashboard/store/captain/storeFactory.js'
  - 'app/javascript/dashboard/i18n/index.js'
  - 'app/javascript/widget/i18n/index.js'
  - 'app/javascript/survey/i18n/index.js'
@@ -5,30 +5,30 @@
 version: '3'

 services:
-  base:
+  base: 
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile.base
      args:
-        VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.3.3'
+        VARIANT: "ubuntu-22.04"
+        NODE_VERSION: "20.9.0"
+        RUBY_VERSION: "3.3.3"
        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: '1000'
-        USER_GID: '1000'
+        USER_UID: "1000"
+        USER_GID: "1000"
    image: base:latest
-
+        
  app:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
      args:
-        VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.3.3'
+        VARIANT: "ubuntu-22.04"
+        NODE_VERSION: "20.9.0"
+        RUBY_VERSION: "3.3.3"
        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: '1000'
-        USER_GID: '1000'
+        USER_UID: "1000"
+        USER_GID: "1000"

    volumes:
      - ..:/workspace:cached
@@ -40,7 +40,7 @@ services:
    network_mode: service:db

  db:
-    image: pgvector/pgvector:pg16
+    image: postgres:latest
    restart: unless-stopped
    volumes:
      - postgres-data:/var/lib/postgresql/data
@@ -23,10 +23,12 @@ jobs:
          bundler-cache: true

      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.3.0

      - uses: actions/setup-node@v4
        with:
-          node-version: 23
+          node-version: 20
          cache: 'pnpm'

      - name: Install pnpm dependencies
@@ -5,7 +5,6 @@
 # #

 name: Publish Chatwoot CE docker images
-
 on:
  push:
    branches:
@@ -15,30 +14,20 @@ on:
      - v*
  workflow_dispatch:

-env:
-  DOCKER_REPO: chatwoot/chatwoot
-
 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 }}
+    runs-on: ubuntu-latest
    env:
-      GIT_REF: ${{ github.head_ref || github.ref_name }}
+      GIT_REF: ${{ github.head_ref || github.ref_name }} # ref_name to get tags/branches
    steps:
      - name: Checkout
        uses: actions/checkout@v4

-      - name: Prepare
-        run: |
-          platform=${{ matrix.platform }}
-          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1

      - name: Strip enterprise code
        run: |
@@ -49,97 +38,26 @@ jobs:
        run: |
          echo -en '\nENV CW_EDITION="ce"' >> docker/Dockerfile

-      - name: Set Docker Tags
+      - name: set docker tag
        run: |
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            echo "DOCKER_TAG=${DOCKER_REPO}:latest-ce" >> $GITHUB_ENV
-          else
-            echo "DOCKER_TAG=${DOCKER_REPO}:${SANITIZED_REF}-ce" >> $GITHUB_ENV
-          fi
+          echo "DOCKER_TAG=chatwoot/chatwoot:$GIT_REF-ce" >> $GITHUB_ENV

-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+      - name: replace docker tag if master
+        if: github.ref_name == 'master'
+        run: |
+          echo "DOCKER_TAG=chatwoot/chatwoot:latest-ce" >> $GITHUB_ENV

      - name: Login to DockerHub
-        if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
-        uses: docker/login-action@v3
+        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

-      - name: Build and push by digest
-        id: build
-        uses: docker/build-push-action@v6
+      - name: Build and push
+        uses: docker/build-push-action@v2
        with:
          context: .
          file: docker/Dockerfile
-          platforms: ${{ matrix.platform }}
-          push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
-          outputs: type=image,name=${{ env.DOCKER_REPO }},push-by-digest=true,name-canonical=true,push=true
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.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 DockerHub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_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.head_ref || github.ref_name }}
-        run: |
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            TAG="${DOCKER_REPO}:latest-ce"
-          else
-            TAG="${DOCKER_REPO}:${SANITIZED_REF}-ce"
-          fi
-          
-          docker buildx imagetools create -t $TAG \
-            $(printf '${{ env.DOCKER_REPO }}@sha256:%s ' *)
-
-      - name: Inspect image
-        env:
-          GIT_REF: ${{ github.head_ref || github.ref_name }}
-        run: |
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            TAG="${DOCKER_REPO}:latest-ce"
-          else
-            TAG="${DOCKER_REPO}:${SANITIZED_REF}-ce"
-          fi
-          
-          docker buildx imagetools inspect $TAG
+          platforms: linux/amd64
+          push: true
+          tags: ${{ env.DOCKER_TAG }}
@@ -1,3 +1,9 @@
+# #
+# # This action will strip the enterprise folder
+# # and run the spec.
+# # This is set to run against every PR.
+# #
+
 name: Run Chatwoot CE spec
 on:
  push:
@@ -12,7 +18,7 @@ jobs:
    runs-on: ubuntu-20.04
    services:
      postgres:
-        image: pgvector/pgvector:pg15
+        image: postgres:15.3
        env:
          POSTGRES_USER: postgres
          POSTGRES_PASSWORD: ''
@@ -38,6 +44,7 @@ jobs:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
+          version: 9
          ref: ${{ github.event.pull_request.head.ref }}
          repository: ${{ github.event.pull_request.head.repo.full_name }}

@@ -47,7 +54,7 @@ jobs:

      - uses: actions/setup-node@v4
        with:
-          node-version: 23
+          node-version: 20
          cache: 'pnpm'

      - name: Install pnpm dependencies
@@ -0,0 +1,89 @@
+# #
+# # This workflow will run specs related to response bot
+# # This can only be activated in installations Where vector extension is available.
+# #
+
+name: Run Response Bot spec
+on:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: ankane/pgvector
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: ""
+          POSTGRES_DB: postgres
+          POSTGRES_HOST_AUTH_METHOD: trust
+        ports:
+          - 5432:5432
+        # needed because the postgres container does not provide a healthcheck
+        # tmpfs makes DB faster by using RAM
+        options: >-
+          --mount type=tmpfs,destination=/var/lib/postgresql/data
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+        options: --entrypoint redis-server
+
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.head.ref }}
+        repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+    - uses: ruby/setup-ruby@v1
+      with:
+        bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 9.3.0
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: pnpm
+
+    - name: pnpm
+      run: pnpm install
+
+    - name: Create database
+      run: bundle exec rake db:create
+
+    - name: Seed database
+      run: bundle exec rake db:schema:load
+
+    - name: Enable ResponseBotService in installation
+      run: RAILS_ENV=test bundle exec rails runner "Features::ResponseBotService.new.enable_in_installation"
+
+    # Run  Response Bot specs
+    - name: Run backend tests
+      run: |
+        bundle exec rspec \
+          spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb \
+          spec/enterprise/services/enterprise/message_templates/response_bot_service_spec.rb \
+          spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 \
+          spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb \
+          --profile=10 \
+          --format documentation
+
+    - name: Upload rails log folder
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: rails-log-folder
+        path: log
@@ -19,11 +19,13 @@ jobs:
        with:
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically

-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9.3.0

      - uses: actions/setup-node@v4
        with:
-          node-version: 23
+          node-version: 20
          cache: 'pnpm'

      - name: pnpm
@@ -37,7 +39,7 @@ jobs:
      - name: setup env
        run: |
          cp .env.example .env
-
+ 
      - name: Run asset compile
        run: bundle exec rake assets:precompile
        env:
@@ -45,3 +47,5 @@ jobs:

      - name: Size Check
        run: pnpm run size
+
+
@@ -175,8 +175,6 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'

-gem 'ruby-openai'
-
 ### Gems required only in specific deployment environments ###
 ##############################################################

@@ -33,70 +33,70 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actioncable (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activejob (= 7.0.8.7)
-      activerecord (= 7.0.8.7)
-      activestorage (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actionmailbox (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activejob (= 7.0.8.5)
+      activerecord (= 7.0.8.5)
+      activestorage (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      actionview (= 7.0.8.7)
-      activejob (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actionmailer (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      actionview (= 7.0.8.5)
+      activejob (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.7)
-      actionview (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actionpack (7.0.8.5)
+      actionview (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
      rack (~> 2.0, >= 2.2.4)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activerecord (= 7.0.8.7)
-      activestorage (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actiontext (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activerecord (= 7.0.8.5)
+      activestorage (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actionview (7.0.8.5)
+      activesupport (= 7.0.8.5)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.1, >= 1.2.0)
    active_record_query_trace (1.8)
-    activejob (7.0.8.7)
-      activesupport (= 7.0.8.7)
+    activejob (7.0.8.5)
+      activesupport (= 7.0.8.5)
      globalid (>= 0.3.6)
-    activemodel (7.0.8.7)
-      activesupport (= 7.0.8.7)
-    activerecord (7.0.8.7)
-      activemodel (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    activemodel (7.0.8.5)
+      activesupport (= 7.0.8.5)
+    activerecord (7.0.8.5)
+      activemodel (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
    activerecord-import (1.4.1)
      activerecord (>= 4.2)
-    activestorage (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activejob (= 7.0.8.7)
-      activerecord (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    activestorage (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activejob (= 7.0.8.5)
+      activerecord (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
      marcel (~> 1.0)
      mini_mime (>= 1.1.0)
-    activesupport (7.0.8.7)
+    activesupport (7.0.8.5)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
@@ -186,7 +186,7 @@ GEM
    database_cleaner-core (2.0.1)
    datadog-ci (0.8.3)
      msgpack
-    date (3.4.1)
+    date (3.3.4)
    ddtrace (1.23.2)
      datadog-ci (~> 0.8.1)
      debase-ruby_core_source (= 3.3.1)
@@ -231,7 +231,6 @@ GEM
    erubi (1.13.0)
    et-orbi (1.2.11)
      tzinfo
-    event_stream_parser (1.0.0)
    execjs (2.8.1)
    facebook-messenger (2.0.1)
      httparty (~> 0.13, >= 0.13.7)
@@ -473,7 +472,7 @@ GEM
    mini_magick (4.12.0)
    mini_mime (1.1.5)
    mini_portile2 (2.8.8)
-    minitest (5.25.4)
+    minitest (5.25.1)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
@@ -487,7 +486,7 @@ GEM
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.19)
+    net-imap (0.4.17)
      date
      net-protocol
    net-pop (0.1.2)
@@ -503,14 +502,14 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.17.1)
+    nokogiri (1.16.8)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.17.1-arm64-darwin)
+    nokogiri (1.16.8-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.17.1-x86_64-darwin)
+    nokogiri (1.16.8-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.17.1-x86_64-linux)
+    nokogiri (1.16.8-x86_64-linux)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -582,20 +581,20 @@ GEM
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rails (7.0.8.7)
-      actioncable (= 7.0.8.7)
-      actionmailbox (= 7.0.8.7)
-      actionmailer (= 7.0.8.7)
-      actionpack (= 7.0.8.7)
-      actiontext (= 7.0.8.7)
-      actionview (= 7.0.8.7)
-      activejob (= 7.0.8.7)
-      activemodel (= 7.0.8.7)
-      activerecord (= 7.0.8.7)
-      activestorage (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    rails (7.0.8.5)
+      actioncable (= 7.0.8.5)
+      actionmailbox (= 7.0.8.5)
+      actionmailer (= 7.0.8.5)
+      actionpack (= 7.0.8.5)
+      actiontext (= 7.0.8.5)
+      actionview (= 7.0.8.5)
+      activejob (= 7.0.8.5)
+      activemodel (= 7.0.8.5)
+      activerecord (= 7.0.8.5)
+      activestorage (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
      bundler (>= 1.15.0)
-      railties (= 7.0.8.7)
+      railties (= 7.0.8.5)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -603,9 +602,9 @@ GEM
    rails-html-sanitizer (1.6.1)
      loofah (~> 2.21)
      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    railties (7.0.8.5)
+      actionpack (= 7.0.8.5)
+      activesupport (= 7.0.8.5)
      method_source
      rake (>= 12.2)
      thor (~> 1.0)
@@ -685,10 +684,6 @@ GEM
    rubocop-rspec (2.21.0)
      rubocop (~> 1.33)
      rubocop-capybara (~> 2.17)
-    ruby-openai (7.3.1)
-      event_stream_parser (>= 0.3.0, < 2.0.0)
-      faraday (>= 1)
-      faraday-multipart (>= 1)
    ruby-progressbar (1.13.0)
    ruby-vips (2.1.4)
      ffi (~> 1.12)
@@ -782,7 +777,7 @@ GEM
    time_diff (0.3.0)
      activesupport
      i18n
-    timeout (0.4.3)
+    timeout (0.4.1)
    trailblazer-option (0.1.2)
    twilio-ruby (5.77.0)
      faraday (>= 0.9, < 3.0)
@@ -946,7 +941,6 @@ DEPENDENCIES
  rubocop-performance
  rubocop-rails
  rubocop-rspec
-  ruby-openai
  scout_apm
  scss_lint
  seed_dump
@@ -120,4 +120,4 @@ Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contri
 <a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://opencollective.com/chatwoot/contributors.svg?width=890&button=false" /></a>


-*Chatwoot* &copy; 2017-2025, Chatwoot Inc - Released under the MIT License.
+*Chatwoot* &copy; 2017-2024, Chatwoot Inc - Released under the MIT License.
@@ -2,13 +2,13 @@ Chatwoot is looking forward to working with security researchers worldwide to ke

 ## Reporting a Vulnerability

-We use Github to track the security issues that affect our project. If you believe you have found a vulnerability, please disclose it via this [form](https://github.com/chatwoot/chatwoot/security/advisories/new). This will enable us to review the vulnerability, fix it promptly, and reward you for your efforts.
+We use [huntr.dev](https://huntr.dev/) for security issues that affect our project. If you believe you have found a vulnerability, please disclose it via this [form](https://huntr.dev/bounties/disclose). This will enable us to review the vulnerability, fix it promptly, and reward you for your efforts.

 If you have any questions about the process, contact security@chatwoot.com. 

-Please try your best to describe a clear and realistic impact for your report, and please don't open any public issues on GitHub or social media; we're doing our best to respond through Github as quickly as possible.
+Please try your best to describe a clear and realistic impact for your report, and please don't open any public issues on GitHub or social media; we're doing our best to respond through Huntr as quickly as possible.

-> Note: Please use the email for questions related to the process. Disclosures should be done via [Github](https://github.com/chatwoot/chatwoot/security/advisories/new)
+> Note: Please use the email for questions related to the process. Disclosures should be done via [huntr.dev](https://huntr.dev/)
 ## Supported versions

 | Version | Supported        |
@@ -48,7 +48,7 @@ We consider the following out of scope, though there may be exceptions.
 - Brute force attacks
 - DNSSEC

-If you are unsure about the scope, please create a [report](https://github.com/chatwoot/chatwoot/security/advisories/new).
+If you are unsure about the scope, please create a [report](https://huntr.dev/repos/chatwoot/chatwoot/).


 ## Thanks
@@ -1 +1 @@
-3.2.0
+3.0.0
@@ -54,7 +54,7 @@ class ContactMergeAction
    # attributes in base contact are given preference
    merged_attributes = mergee_contact_attributes.deep_merge(base_contact_attributes)

-    @mergee_contact.reload.destroy!
+    @mergee_contact.destroy!
    Rails.configuration.dispatcher.dispatch(CONTACT_MERGED, Time.zone.now, contact: @base_contact,
                                                                           tokens: [@base_contact.contact_inboxes.filter_map(&:pubsub_token)])
    @base_contact.update!(merged_attributes)
@@ -25,8 +25,6 @@ class NotificationBuilder
  def build_notification
    # Create conversation_creation notification only if user is subscribed to it
    return if notification_type == 'conversation_creation' && !user_subscribed_to_notification?
-    # skip notifications for blocked conversations except for user mentions
-    return if primary_actor.contact.blocked? && notification_type != 'conversation_mention'

    user.notifications.create!(
      notification_type: notification_type,
@@ -2,38 +2,52 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
  pattr_initialize [:account!, :params!]

  def build
-    load_data
+    set_grouped_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
    prepare_report
  end

  private

-  attr_reader :conversations_count, :resolved_count,
-              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
-
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group('assignee_id').count
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('assignee_id').count
  end

-  def prepare_report
-    account.account_users.map do |account_user|
-      build_agent_stats(account_user)
-    end
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
  end

-  def build_agent_stats(account_user)
-    user_id = account_user.user_id
-    {
-      id: user_id,
-      conversations_count: conversations_count[user_id] || 0,
-      resolved_conversations_count: resolved_count[user_id] || 0,
-      avg_resolution_time: avg_resolution_time[user_id],
-      avg_first_response_time: avg_first_response_time[user_id],
-      avg_reply_time: avg_reply_time[user_id]
-    }
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end

  def group_by_key
    :user_id
  end
+
+  def reporting_events
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
+  end
+
+  def prepare_report
+    account.account_users.each_with_object([]) do |account_user, arr|
+      arr << {
+        id: account_user.user_id,
+        conversations_count: @grouped_conversations_count[account_user.user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
+        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
+        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+      }
+    end
+  end
+
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  end
 end
@@ -1,50 +1,17 @@
 class V2::Reports::BaseSummaryBuilder
  include DateRangeHelper

-  def build
-    load_data
-    prepare_report
-  end
-
  private

-  def load_data
-    @conversations_count = fetch_conversations_count
-    @resolved_count = fetch_resolved_count
-    @avg_resolution_time = fetch_average_time('conversation_resolved')
-    @avg_first_response_time = fetch_average_time('first_response')
-    @avg_reply_time = fetch_average_time('reply_time')
-  end
-
-  def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range)
-  end
-
-  def fetch_conversations_count
-    # Override this method
-  end
-
-  def fetch_average_time(event_name)
-    get_grouped_average(reporting_events.where(name: event_name))
-  end
-
-  def fetch_resolved_count
-    reporting_events.where(name: 'conversation_resolved').group(group_by_key).count
-  end
-
  def group_by_key
    # Override this method
  end

-  def prepare_report
-    # Override this method
-  end
-
  def get_grouped_average(events)
    events.group(group_by_key).average(average_value_key)
  end

  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+    params[:business_hours].present? ? :value_in_business_hours : :value
  end
 end
@@ -1,50 +0,0 @@
-class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
-  pattr_initialize [:account!, :params!]
-
-  def build
-    load_data
-    prepare_report
-  end
-
-  private
-
-  attr_reader :conversations_count, :resolved_count,
-              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
-
-  def load_data
-    @conversations_count = fetch_conversations_count
-    @resolved_count = fetch_resolved_count
-    @avg_resolution_time = fetch_average_time('conversation_resolved')
-    @avg_first_response_time = fetch_average_time('first_response')
-    @avg_reply_time = fetch_average_time('reply_time')
-  end
-
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(group_by_key).count
-  end
-
-  def prepare_report
-    account.inboxes.map do |inbox|
-      build_inbox_stats(inbox)
-    end
-  end
-
-  def build_inbox_stats(inbox)
-    {
-      id: inbox.id,
-      conversations_count: conversations_count[inbox.id] || 0,
-      resolved_conversations_count: resolved_count[inbox.id] || 0,
-      avg_resolution_time: avg_resolution_time[inbox.id],
-      avg_first_response_time: avg_first_response_time[inbox.id],
-      avg_reply_time: avg_reply_time[inbox.id]
-    }
-  end
-
-  def group_by_key
-    :inbox_id
-  end
-
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]) ? :value_in_business_hours : :value
-  end
-end
@@ -1,37 +1,49 @@
 class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
  pattr_initialize [:account!, :params!]

+  def build
+    set_grouped_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
+    prepare_report
+  end
+
  private

-  attr_reader :conversations_count, :resolved_count,
-              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('team_id').count
+  end

-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(:team_id).count
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  end
+
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end

  def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range).joins(:conversation)
-  end
-
-  def prepare_report
-    account.teams.map do |team|
-      build_team_stats(team)
-    end
-  end
-
-  def build_team_stats(team)
-    {
-      id: team.id,
-      conversations_count: conversations_count[team.id] || 0,
-      resolved_conversations_count: resolved_count[team.id] || 0,
-      avg_resolution_time: avg_resolution_time[team.id],
-      avg_first_response_time: avg_first_response_time[team.id],
-      avg_reply_time: avg_reply_time[team.id]
-    }
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
  end

  def group_by_key
    'conversations.team_id'
  end
+
+  def prepare_report
+    account.teams.each_with_object([]) do |team, arr|
+      arr << {
+        id: team.id,
+        conversations_count: @grouped_conversations_count[team.id],
+        avg_resolution_time: @grouped_avg_resolution_time[team.id],
+        avg_first_response_time: @grouped_avg_first_response_time[team.id],
+        avg_reply_time: @grouped_avg_reply_time[team.id]
+      }
+    end
+  end
 end
@@ -28,7 +28,7 @@ class V2::Reports::Timeseries::AverageReportBuilder < V2::Reports::Timeseries::B
  end

  def object_scope
-    scope.reporting_events.where(name: event_name, created_at: range, account_id: account.id)
+    scope.reporting_events.where(name: event_name, created_at: range)
  end

  def reporting_events
@@ -2,7 +2,7 @@ class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::
  def index
    @conversations = Current.account.conversations.includes(
      :assignee, :contact, :inbox, :taggings
-    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(last_activity_at: :desc).limit(20)
+    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(id: :desc).limit(20)
  end

  private
@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
  before_action :set_current_page, only: [:index, :active, :search, :filter]
  before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
+  before_action :set_include_contact_inboxes, only: [:index, :search, :filter]

  def index
    @contacts_count = resolved_contacts.count
@@ -68,7 +68,6 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
    @contacts = fetch_contacts(contacts)
  rescue CustomExceptions::CustomFilter::InvalidAttribute,
         CustomExceptions::CustomFilter::InvalidOperator,
-         CustomExceptions::CustomFilter::InvalidQueryOperator,
         CustomExceptions::CustomFilter::InvalidValue => e
    render_could_not_create_error(e.message)
  end
@@ -46,7 +46,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
    @conversations_count = result[:count]
  rescue CustomExceptions::CustomFilter::InvalidAttribute,
         CustomExceptions::CustomFilter::InvalidOperator,
-         CustomExceptions::CustomFilter::InvalidQueryOperator,
         CustomExceptions::CustomFilter::InvalidValue => e
    render_could_not_create_error(e.message)
  end
@@ -0,0 +1,53 @@
+class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
+  before_action :hook
+
+  def proxy
+    response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
+    render plain: response.body, status: response.code
+  end
+
+  private
+
+  def headers
+    {
+      'X-User-Email' => hook.settings['account_email'],
+      'X-User-Token' => hook.settings['access_token'],
+      'Content-Type' => 'application/json',
+      'Accept' => '*/*'
+    }
+  end
+
+  def request_path
+    request_route = with_leading_hash_on_route(params[:route])
+
+    return 'api/sessions/profile' if request_route == '/sessions/profile'
+
+    "api/accounts/#{hook.settings['account_id']}#{request_route}"
+  end
+
+  def request_url
+    base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
+    URI.join(base_url, request_path).to_s
+  end
+
+  def hook
+    @hook ||= Current.account.hooks.find_by!(app_id: 'captain')
+  end
+
+  def request_method
+    method = permitted_params[:method].downcase
+    raise 'Invalid or missing HTTP method' unless %w[get post put patch delete options head].include?(method)
+
+    method
+  end
+
+  def with_leading_hash_on_route(request_route)
+    return '' if request_route.blank?
+
+    request_route.start_with?('/') ? request_route : "/#{request_route}"
+  end
+
+  def permitted_params
+    params.permit(:method, :route, body: {})
+  end
+end
@@ -17,7 +17,7 @@ class Api::V1::ProfilesController < Api::BaseController

  def avatar
    @user.avatar.attachment.destroy! if @user.avatar.attached?
-    @user.reload
+    head :ok
  end

  def auto_offline
@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
+  before_action :prepare_builder_params, only: [:agent, :team]

  def agent
    render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -10,10 +10,6 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
    render_report_with(V2::Reports::TeamSummaryBuilder)
  end

-  def inbox
-    render_report_with(V2::Reports::InboxSummaryBuilder)
-  end
-
  private

  def check_authorization
@@ -30,7 +26,8 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr

  def render_report_with(builder_class)
    builder = builder_class.new(account: Current.account, params: @builder_params)
-    render json: builder.build
+    data = builder.build
+    render json: data
  end

  def permitted_params
@@ -7,10 +7,9 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B

  def index
    @articles = @portal.articles.published
-    @articles_count = @articles.count
    search_articles
    order_by_sort_param
-    @articles = @articles.page(list_params[:page]) if list_params[:page].present?
+    @articles.page(list_params[:page]) if list_params[:page].present?
  end

  def show; end
@@ -45,7 +44,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
  end

  def list_params
-    params.permit(:query, :locale, :sort, :status, :page)
+    params.permit(:query, :locale, :sort, :status)
  end

  def permitted_params
@@ -22,5 +22,3 @@ class AsyncDispatcher < BaseDispatcher
    ]
  end
 end
-
-AsyncDispatcher.prepend_mod_with('AsyncDispatcher')
@@ -2,6 +2,6 @@ require 'administrate/field/base'

 class Enterprise::AccountLimitsField < Administrate::Field::Base
  def to_s
-    data.present? ? data.to_json : { agents: nil, inboxes: nil, captain_responses: nil, captain_documents: nil }.to_json
+    data.present? ? data.to_json : { agents: nil, inboxes: nil }.to_json
  end
 end
@@ -1,70 +1,58 @@
 module Api::V2::Accounts::ReportsHelper
  def generate_agents_report
-    reports = V2::Reports::AgentSummaryBuilder.new(
-      account: Current.account,
-      params: build_params(type: :agent)
-    ).build
-
    Current.account.users.map do |agent|
-      report = reports.find { |r| r[:id] == agent.id }
-      [agent.name] + generate_readable_report_metrics(report)
+      agent_report = report_builder({ type: :agent, id: agent.id }).summary
+      [agent.name] + generate_readable_report_metrics(agent_report)
    end
  end

  def generate_inboxes_report
-    reports = V2::Reports::InboxSummaryBuilder.new(
-      account: Current.account,
-      params: build_params(type: :inbox)
-    ).build
-
    Current.account.inboxes.map do |inbox|
-      report = reports.find { |r| r[:id] == inbox.id }
-      [inbox.name, inbox.channel&.name] + generate_readable_report_metrics(report)
+      inbox_report = generate_report({ type: :inbox, id: inbox.id })
+      [inbox.name, inbox.channel&.name] + generate_readable_report_metrics(inbox_report)
    end
  end

  def generate_teams_report
-    reports = V2::Reports::TeamSummaryBuilder.new(
-      account: Current.account,
-      params: build_params(type: :team)
-    ).build
-
    Current.account.teams.map do |team|
-      report = reports.find { |r| r[:id] == team.id }
-      [team.name] + generate_readable_report_metrics(report)
+      team_report = report_builder({ type: :team, id: team.id }).summary
+      [team.name] + generate_readable_report_metrics(team_report)
    end
  end

  def generate_labels_report
    Current.account.labels.map do |label|
-      label_report = report_builder({ type: :label, id: label.id }).short_summary
+      label_report = generate_report({ type: :label, id: label.id })
      [label.title] + generate_readable_report_metrics(label_report)
    end
  end

-  private
-
-  def build_params(base_params)
-    base_params.merge(
-      {
-        since: params[:since],
-        until: params[:until],
-        business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
-      }
+  def report_builder(report_params)
+    V2::ReportBuilder.new(
+      Current.account,
+      report_params.merge(
+        {
+          since: params[:since],
+          until: params[:until],
+          business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
+        }
+      )
    )
  end

-  def report_builder(report_params)
-    V2::ReportBuilder.new(Current.account, build_params(report_params))
+  def generate_report(report_params)
+    report_builder(report_params).short_summary
  end

-  def generate_readable_report_metrics(report)
+  private
+
+  def generate_readable_report_metrics(report_metric)
    [
-      report[:conversations_count],
-      Reports::TimeFormatPresenter.new(report[:avg_first_response_time]).format,
-      Reports::TimeFormatPresenter.new(report[:avg_resolution_time]).format,
-      Reports::TimeFormatPresenter.new(report[:avg_reply_time]).format,
-      report[:resolved_conversations_count]
+      report_metric[:conversations_count],
+      Reports::TimeFormatPresenter.new(report_metric[:avg_first_response_time]).format,
+      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format,
+      Reports::TimeFormatPresenter.new(report_metric[:reply_time]).format,
+      report_metric[:resolutions_count]
    ]
  end
 end
@@ -81,12 +81,4 @@ module FilterHelper
  def default_filter(query_hash, filter_operator_value)
    "#{filter_config[:table_name]}.#{query_hash[:attribute_key]} #{filter_operator_value} #{query_hash[:query_operator]}"
  end
-
-  def validate_single_condition(condition)
-    return if condition['query_operator'].nil?
-    return if condition['query_operator'].empty?
-
-    operator = condition['query_operator'].upcase
-    raise CustomExceptions::CustomFilter::InvalidQueryOperator.new({}) unless %w[AND OR].include?(operator)
-  end
 end
@@ -5,7 +5,8 @@ module PortalHelper
  end

  def generate_portal_bg(portal_color, theme)
-    generate_portal_bg_color(portal_color, theme)
+    bg_image = theme == 'dark' ? 'hexagon-dark.svg' : 'hexagon-light.svg'
+    "url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
  end

  def generate_gradient_to_bottom(theme)
@@ -1,19 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainAssistant extends ApiClient {
-  constructor() {
-    super('captain/assistants', { accountScoped: true });
-  }
-
-  get({ page = 1, searchKey } = {}) {
-    return axios.get(this.url, {
-      params: {
-        page,
-        searchKey,
-      },
-    });
-  }
-}
-
-export default new CaptainAssistant();
@@ -1,20 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainDocument extends ApiClient {
-  constructor() {
-    super('captain/documents', { accountScoped: true });
-  }
-
-  get({ page = 1, searchKey, assistantId } = {}) {
-    return axios.get(this.url, {
-      params: {
-        page,
-        searchKey,
-        assistant_id: assistantId,
-      },
-    });
-  }
-}
-
-export default new CaptainDocument();
@@ -1,26 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainInboxes extends ApiClient {
-  constructor() {
-    super('captain/assistants', { accountScoped: true });
-  }
-
-  get({ assistantId } = {}) {
-    return axios.get(`${this.url}/${assistantId}/inboxes`);
-  }
-
-  create(params = {}) {
-    const { assistantId, inboxId } = params;
-    return axios.post(`${this.url}/${assistantId}/inboxes`, {
-      inbox: { inbox_id: inboxId },
-    });
-  }
-
-  delete(params = {}) {
-    const { assistantId, inboxId } = params;
-    return axios.delete(`${this.url}/${assistantId}/inboxes/${inboxId}`);
-  }
-}
-
-export default new CaptainInboxes();
@@ -1,22 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainResponses extends ApiClient {
-  constructor() {
-    super('captain/assistant_responses', { accountScoped: true });
-  }
-
-  get({ page = 1, searchKey, assistantId, documentId, status } = {}) {
-    return axios.get(this.url, {
-      params: {
-        page,
-        searchKey,
-        assistant_id: assistantId,
-        document_id: documentId,
-        status,
-      },
-    });
-  }
-}
-
-export default new CaptainResponses();
@@ -27,14 +27,6 @@ class ContactAPI extends ApiClient {
    return axios.get(requestURL);
  }

-  show(id) {
-    return axios.get(`${this.url}/${id}?include_contact_inboxes=false`);
-  }
-
-  update(id, data) {
-    return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
-  }
-
  getConversations(contactId) {
    return axios.get(`${this.url}/${contactId}/conversations`);
  }
@@ -133,10 +133,6 @@ class ConversationApi extends ApiClient {
  getAllAttachments(conversationId) {
    return axios.get(`${this.url}/${conversationId}/attachments`);
  }
-
-  requestCopilot(conversationId, body) {
-    return axios.post(`${this.url}/${conversationId}/copilot`, body);
-  }
 }

 export default new ConversationApi();
@@ -32,6 +32,10 @@ class IntegrationsAPI extends ApiClient {
  deleteHook(hookId) {
    return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
  }
+
+  requestCaptain(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
+  }
 }

 export default new IntegrationsAPI();
@@ -14,29 +14,26 @@ class SearchAPI extends ApiClient {
    });
  }

-  contacts({ q, page = 1 }) {
+  contacts({ q }) {
    return axios.get(`${this.url}/contacts`, {
      params: {
        q,
-        page: page,
      },
    });
  }

-  conversations({ q, page = 1 }) {
+  conversations({ q }) {
    return axios.get(`${this.url}/conversations`, {
      params: {
        q,
-        page: page,
      },
    });
  }

-  messages({ q, page = 1 }) {
+  messages({ q }) {
    return axios.get(`${this.url}/messages`, {
      params: {
        q,
-        page: page,
      },
    });
  }
@@ -1,40 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class SummaryReportsAPI extends ApiClient {
-  constructor() {
-    super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
-  }
-
-  getTeamReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/team`, {
-      params: {
-        since,
-        until,
-        business_hours: businessHours,
-      },
-    });
-  }
-
-  getAgentReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/agent`, {
-      params: {
-        since,
-        until,
-        business_hours: businessHours,
-      },
-    });
-  }
-
-  getInboxReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/inbox`, {
-      params: {
-        since,
-        until,
-        business_hours: businessHours,
-      },
-    });
-  }
-}
-
-export default new SummaryReportsAPI();
@@ -72,19 +72,6 @@
    --slate-11: 96 100 108;
    --slate-12: 28 32 36;

-    --iris-1: 253 253 255;
-    --iris-2: 248 248 255;
-    --iris-3: 240 241 254;
-    --iris-4: 230 231 255;
-    --iris-5: 218 220 255;
-    --iris-6: 203 205 255;
-    --iris-7: 184 186 248;
-    --iris-8: 155 158 240;
-    --iris-9: 91 91 214;
-    --iris-10: 81 81 205;
-    --iris-11: 87 83 198;
-    --iris-12: 39 41 98;
-
    --ruby-1: 255 252 253;
    --ruby-2: 255 247 248;
    --ruby-3: 254 234 237;
@@ -124,19 +111,6 @@
    --teal-11: 0 133 115;
    --teal-12: 13 61 56;

-    --gray-1: 252 252 252;
-    --gray-2: 249 249 249;
-    --gray-3: 240 240 240;
-    --gray-4: 232 232 232;
-    --gray-5: 224 224 224;
-    --gray-6: 217 217 217;
-    --gray-7: 206 206 206;
-    --gray-8: 187 187 187;
-    --gray-9: 141 141 141;
-    --gray-10: 131 131 131;
-    --gray-11: 100 100 100;
-    --gray-12: 32 32 32;
-
    --background-color: 253 253 253;
    --text-blue: 8 109 224;
    --border-container: 236 236 236;
@@ -148,7 +122,6 @@
    --solid-active: 255 255 255;
    --solid-amber: 252 232 193;
    --solid-blue: 218 236 255;
-    --solid-iris: 230 231 255;

    --alpha-1: 67, 67, 67, 0.06;
    --alpha-2: 201, 202, 207, 0.15;
@@ -156,10 +129,10 @@
    --black-alpha-1: 0, 0, 0, 0.12;
    --black-alpha-2: 0, 0, 0, 0.04;
    --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.8;
+    --white-alpha: 255, 255, 255, 0.1;
  }

-  .dark {
+  body.dark {
    /* slate */
    --slate-1: 17 17 19;
    --slate-2: 24 25 27;
@@ -174,19 +147,6 @@
    --slate-11: 176 180 186;
    --slate-12: 237 238 240;

-    --iris-1: 19 19 30;
-    --iris-2: 23 22 37;
-    --iris-3: 32 34 72;
-    --iris-4: 38 42 101;
-    --iris-5: 48 51 116;
-    --iris-6: 61 62 130;
-    --iris-7: 74 74 149;
-    --iris-8: 89 88 177;
-    --iris-9: 91 91 214;
-    --iris-10: 84 114 228;
-    --iris-11: 158 177 255;
-    --iris-12: 224 223 254;
-
    --ruby-1: 25 17 19;
    --ruby-2: 30 21 23;
    --ruby-3: 58 20 30;
@@ -226,19 +186,6 @@
    --teal-11: 11 216 182;
    --teal-12: 173 240 221;

-    --gray-1: 17 17 17;
-    --gray-2: 25 25 25;
-    --gray-3: 34 34 34;
-    --gray-4: 42 42 42;
-    --gray-5: 49 49 49;
-    --gray-6: 58 58 58;
-    --gray-7: 72 72 72;
-    --gray-8: 96 96 96;
-    --gray-9: 110 110 110;
-    --gray-10: 123 123 123;
-    --gray-11: 180 180 180;
-    --gray-12: 238 238 238;
-
    --background-color: 18 18 19;
    --border-strong: 52 52 52;
    --border-weak: 38 38 42;
@@ -248,7 +195,6 @@
    --solid-active: 53 57 66;
    --solid-amber: 42 37 30;
    --solid-blue: 16 49 91;
-    --solid-iris: 38 42 101;
    --text-blue: 126 182 255;

    --alpha-1: 36, 36, 36, 0.8;
@@ -1,7 +1,7 @@
 .dropdown-pane {
-  @apply border rounded-lg hidden relative invisible shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-[9999];
+  @apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999];

  &.dropdown-pane--open {
-    @apply bg-n-alpha-3 backdrop-blur-[100px] absolute  block visible;
+    @apply bg-white absolute dark:bg-slate-800 block visible;
  }
 }
@@ -31,7 +31,7 @@ button {
 }

 .button {
-  @apply items-center bg-n-brand px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
+  @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;

  .button__content {
    @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
@@ -42,10 +42,8 @@ button {
    }
  }

-  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(
-      .clear
-    ):not(.smooth):not(.hollow) {
-    @apply bg-n-brand/80 dark:bg-n-brand/80;
+  &:hover {
+    @apply bg-woot-600 dark:bg-woot-600;
  }

  &:disabled,
@@ -54,23 +52,23 @@ button {
  }

  &.success {
-    @apply bg-n-teal-9 text-white dark:text-white;
+    @apply bg-[#44ce4b] dark:bg-[#44ce4b] text-white dark:text-white;
  }

  &.secondary {
-    @apply bg-n-solid-3 text-white dark:text-white;
+    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
  }

  &.primary {
-    @apply bg-n-brand text-white dark:text-white;
+    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
  }

  &.clear {
-    @apply text-n-blue-text dark:text-n-blue-text bg-transparent dark:bg-transparent;
+    @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent;
  }

  &.alert {
-    @apply bg-n-ruby-9 text-white dark:text-white;
+    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;

    &.clear {
      @apply bg-transparent dark:bg-transparent;
@@ -78,7 +76,7 @@ button {
  }

  &.warning {
-    @apply bg-n-amber-9 text-white dark:text-white;
+    @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white;

    &.clear {
      @apply bg-transparent dark:bg-transparent;
@@ -117,74 +115,114 @@ button {
  }

  &.hollow {
-    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:bg-n-brand/20;
+    @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;

    &.secondary {
-      @apply text-n-slate-12 border-n-slate-5 hover:bg-n-slate-5;
+      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
    }

    &.success {
-      @apply text-n-teal-9 border-n-teal-8 hover:bg-n-teal-5;
+      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
    }

    &.alert {
-      @apply text-n-ruby-9 border-n-ruby-8 hover:bg-n-ruby-5;
+      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
    }

    &.warning {
-      @apply text-n-amber-9 border-n-amber-8 hover:bg-n-amber-5;
+      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
+    }
+
+    &:hover {
+      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
+
+      &.secondary {
+        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
+      }
+
+      &.success {
+        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
+      }
+
+      &.alert {
+        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
+      }
+
+      &.warning {
+        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
+      }
    }
  }

  // Smooth style
  &.smooth {
-    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/40;
+    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;

    &.secondary {
-      @apply bg-n-slate-4 text-n-slate-11 hover:text-n-slate-11 hover:bg-n-slate-5;
+      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
    }

    &.success {
-      @apply bg-n-teal-4 text-n-teal-11 hover:text-n-teal-11 hover:bg-n-teal-5;
+      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
    }

    &.alert {
-      @apply bg-n-ruby-4 text-n-ruby-11 hover:text-n-ruby-11 hover:bg-n-ruby-5;
+      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
    }

    &.warning {
-      @apply bg-n-amber-4 text-n-amber-11 hover:text-n-amber-11 hover:bg-n-amber-5;
+      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
    }
  }

  &.clear {
-    @apply text-n-blue-text hover:bg-n-brand/10 dark:hover:bg-n-brand/30;
+    @apply text-woot-500 dark:text-woot-500;

    &.secondary {
-      @apply text-n-slate-12 hover:bg-n-slate-4;
+      @apply text-slate-700 dark:text-slate-100;
    }

    &.success {
-      @apply text-n-teal-10 hover:bg-n-teal-4;
+      @apply text-green-700 dark:text-green-100;
    }

    &.alert {
-      @apply text-n-ruby-11 hover:bg-n-ruby-4;
+      @apply text-red-700 dark:text-red-100;
    }

    &.warning {
-      @apply text-n-amber-11 hover:bg-n-amber-4;
+      @apply text-yellow-700 dark:text-yellow-600;
+    }
+
+    &:hover {
+      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
+
+      &.secondary {
+        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
+      }
+
+      &.success {
+        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
+      }
+
+      &.alert {
+        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
+      }
+
+      &.warning {
+        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
+      }
    }

    &:active {
      &.secondary {
-        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
+        @apply active:bg-slate-100 dark:active:bg-slate-900;
      }
    }

    &:focus {
      &.secondary {
-        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
+        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
      }
    }
  }
@@ -3,15 +3,7 @@
 }

 .tabs--container--with-border {
-  @apply border-b border-n-weak;
-}
-
-.tabs--container--compact.tab--chat-type {
-  .tabs-title {
-    a {
-      @apply py-2 text-sm;
-    }
-  }
+  @apply border-b border-slate-50 dark:border-slate-800/50;
 }

 .tabs {
@@ -42,7 +34,7 @@
  @apply flex-shrink-0 my-0 mx-2;

  .badge {
-    @apply bg-n-alpha-black2 dark:bg-n-solid-3 rounded-md text-n-slate-11 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
+    @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
  }

  &:first-child {
@@ -56,22 +48,22 @@
  &:hover,
  &:focus {
    a {
-      @apply text-n-slate-12;
+      @apply text-slate-800 dark:text-slate-100;
    }
  }

  a {
-    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-n-slate-11 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
    transition: border-color 0.15s $swift-ease-out-function;
  }

  &.is-active {
    a {
-      @apply border-b border-n-brand text-n-blue-text;
+      @apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
    }

    .badge {
-      @apply bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text;
+      @apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
    }
  }
 }
@@ -98,7 +98,7 @@ const inboxIcon = computed(() => {
        </span>
      </div>
      <div
-        v-dompurify-html="formatMessage(message, false, false, false)"
+        v-dompurify-html="formatMessage(message)"
        class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
      />
      <div class="flex items-center w-full h-6 gap-2 overflow-hidden">
@@ -18,11 +18,6 @@ const route = useRoute();

 const showDropdown = ref(false);

-// Store the currently hovered label's ID
-// Using JS state management instead of CSS :hover / group hover
-// This will solve the flickering issue when hovering over the last label item
-const hoveredLabel = ref(null);
-
 const allLabels = useMapGetter('labels/getLabels');
 const contactLabels = useMapGetter('contactLabels/getContactLabels');

@@ -42,7 +37,7 @@ const labelMenuItems = computed(() => {
      isSelected: savedLabels.value.some(
        savedLabel => savedLabel.id === label.id
      ),
-      action: 'contactLabel',
+      action: 'addLabel',
    }))
    .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
 });
@@ -54,7 +49,7 @@ const fetchLabels = async contactId => {
  store.dispatch('contactLabels/get', contactId);
 };

-const handleLabelAction = async ({ value }) => {
+const handleLabelAction = async ({ action, value }) => {
  try {
    // Get current label titles
    const currentLabels = savedLabels.value.map(label => label.title);
@@ -64,15 +59,16 @@ const handleLabelAction = async ({ value }) => {
    if (!selectedLabel) return;

    let updatedLabels;
-
-    // If label is already selected, remove it (toggle behavior)
-    if (currentLabels.includes(selectedLabel.title)) {
-      updatedLabels = currentLabels.filter(
-        labelTitle => labelTitle !== selectedLabel.title
-      );
-    } else {
-      // Add the new label
-      updatedLabels = [...currentLabels, selectedLabel.title];
+    if (action === 'addLabel') {
+      // If label is already selected, remove it (toggle behavior)
+      if (currentLabels.includes(selectedLabel.title)) {
+        updatedLabels = currentLabels.filter(
+          labelTitle => labelTitle !== selectedLabel.title
+        );
+      } else {
+        // Add the new label
+        updatedLabels = [...currentLabels, selectedLabel.title];
+      }
    }

    await store.dispatch('contactLabels/update', {
@@ -86,10 +82,6 @@ const handleLabelAction = async ({ value }) => {
  }
 };

-const handleRemoveLabel = labelId => {
-  return handleLabelAction({ value: labelId });
-};
-
 watch(
  () => props.contactId,
  (newVal, oldVal) => {
@@ -103,31 +95,11 @@ onMounted(() => {
    fetchLabels(route.params.contactId);
  }
 });
-
-const handleMouseLeave = () => {
-  // Reset hover state when mouse leaves the container
-  // This ensures all labels return to their default state
-  hoveredLabel.value = null;
-};
-
-const handleLabelHover = labelId => {
-  // Added this to prevent flickering on when showing remove button on hover
-  // If the label item is at end of the line, it will show the remove button
-  // when hovering over the last label item
-  hoveredLabel.value = labelId;
-};
 </script>

 <template>
-  <div class="flex flex-wrap items-center gap-2" @mouseleave="handleMouseLeave">
-    <LabelItem
-      v-for="label in savedLabels"
-      :key="label.id"
-      :label="label"
-      :is-hovered="hoveredLabel === label.id"
-      @remove="handleRemoveLabel"
-      @hover="handleLabelHover(label.id)"
-    />
+  <div class="flex flex-wrap items-center gap-2">
+    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
    <AddLabel
      :label-menu-items="labelMenuItems"
      @update-label="handleLabelAction"
@@ -6,7 +6,6 @@ import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Flag from 'dashboard/components-next/flag/Flag.vue';
 import countries from 'shared/constants/countries';

 const props = defineProps({
@@ -57,19 +56,13 @@ const countryDetails = computed(() => {

  if (!activeCountry) return null;

-  return {
-    countryCode: activeCountry.id,
-    city: city ? `${city},` : null,
-    name: activeCountry.name,
-  };
-});
+  const parts = [
+    activeCountry.emoji,
+    city ? `${city},` : null,
+    activeCountry.name,
+  ].filter(Boolean);

-const formattedLocation = computed(() => {
-  if (!countryDetails.value) return '';
-
-  return [countryDetails.value.city, countryDetails.value.name]
-    .filter(Boolean)
-    .join(' ');
+  return parts.length ? parts.join(' ') : null;
 });

 const handleFormUpdate = updatedData => {
@@ -121,12 +114,8 @@ const onClickViewDetails = () => emit('showContact', props.id);
            {{ phoneNumber }}
          </span>
          <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
-          <span
-            v-if="countryDetails"
-            class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
-          >
-            <Flag :country="countryDetails.countryCode" class="size-3.5" />
-            {{ formattedLocation }}
+          <span v-if="countryDetails" class="text-sm truncate text-n-slate-11">
+            {{ countryDetails }}
          </span>
          <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
          <Button
@@ -1,30 +1,28 @@
 <script setup>
 import { computed, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';

-import Button from 'dashboard/components-next/button/Button.vue';
+// import Button from 'dashboard/components-next/button/Button.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';

 const props = defineProps({
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
+  // buttonLabel: {
+  //   type: String,
+  //   default: '',
+  // },
  selectedContact: {
    type: Object,
    default: () => ({}),
  },
 });

-const emit = defineEmits(['goToContactsList']);
+const emit = defineEmits([
+  // 'message',
+  'goToContactsList',
+]);

 const { t } = useI18n();
 const slots = useSlots();
-const route = useRoute();
-
-const contactId = computed(() => route.params.contactId);

 const selectedContactName = computed(() => {
  return props.selectedContact?.name;
@@ -52,7 +50,7 @@ const handleBreadcrumbClick = () => {

 <template>
  <section
-    class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
  >
    <div
      class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
@@ -64,11 +62,7 @@ const handleBreadcrumbClick = () => {
              :items="breadcrumbItems"
              @click="handleBreadcrumbClick"
            />
-            <ComposeConversation :contact-id="contactId">
-              <template #trigger="{ toggle }">
-                <Button :label="buttonLabel" size="sm" @click="toggle" />
-              </template>
-            </ComposeConversation>
+            <!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
          </div>
        </div>
      </header>
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { required, email } from '@vuelidate/validators';
+import { required, email, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { splitName } from '@chatwoot/utils';
 import countries from 'shared/constants/countries.js';
@@ -35,17 +35,17 @@ const FORM_CONFIG = {
  EMAIL_ADDRESS: { field: 'email' },
  PHONE_NUMBER: { field: 'phoneNumber' },
  CITY: { field: 'additionalAttributes.city' },
-  COUNTRY: { field: 'additionalAttributes.countryCode' },
+  COUNTRY: { field: 'additionalAttributes.country' },
  BIO: { field: 'additionalAttributes.description' },
  COMPANY_NAME: { field: 'additionalAttributes.companyName' },
 };

 const SOCIAL_CONFIG = {
-  LINKEDIN: 'i-ri-linkedin-box-fill',
  FACEBOOK: 'i-ri-facebook-circle-fill',
-  INSTAGRAM: 'i-ri-instagram-line',
-  TWITTER: 'i-ri-twitter-x-fill',
  GITHUB: 'i-ri-github-fill',
+  INSTAGRAM: 'i-ri-instagram-line',
+  LINKEDIN: 'i-ri-linkedin-box-fill',
+  TWITTER: 'i-ri-twitter-x-fill',
 };

 const defaultState = {
@@ -74,7 +74,7 @@ const defaultState = {
 const state = reactive({ ...defaultState });

 const validationRules = {
-  firstName: { required },
+  firstName: { required, minLength: minLength(2) },
  email: { email },
 };

@@ -94,7 +94,7 @@ const prepareStateBasedOnProps = () => {
    phoneNumber,
    additionalAttributes = {},
  } = props.contactData || {};
-  const { firstName, lastName } = splitName(name || '');
+  const { firstName, lastName } = splitName(name);
  const {
    description = '',
    companyName = '',
@@ -123,7 +123,7 @@ const prepareStateBasedOnProps = () => {
 };

 const countryOptions = computed(() =>
-  countries.map(({ name, id }) => ({ label: name, value: id }))
+  countries.map(({ name }) => ({ label: name, value: name }))
 );

 const editDetailsForm = computed(() =>
@@ -205,8 +205,8 @@ const getMessageType = key => {
 };

 const handleCountrySelection = value => {
-  const selectedCountry = countries.find(option => option.id === value);
-  state.additionalAttributes.country = selectedCountry?.name || '';
+  const selectedCountry = countries.find(option => option.name === value);
+  state.additionalAttributes.countryCode = selectedCountry?.id || '';
  emit('update', state);
 };

@@ -242,7 +242,7 @@ defineExpose({
        <template v-for="item in editDetailsForm" :key="item.key">
          <ComboBox
            v-if="item.key === 'COUNTRY'"
-            v-model="state.additionalAttributes.countryCode"
+            v-model="state.additionalAttributes.country"
            :options="countryOptions"
            :placeholder="item.placeholder"
            class="[&>div>button]:h-8"
@@ -59,7 +59,6 @@ defineExpose({ dialogRef, contactsFormRef, onSuccess });
            t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SAVE_CONTACT')
          "
          color="blue"
-          :disabled="contactsFormRef?.isFormInvalid"
          :is-loading="isCreatingContact"
          @click="handleDialogConfirm"
        />
@@ -4,7 +4,6 @@ import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import ContactSortMenu from './components/ContactSortMenu.vue';
 import ContactMoreActions from './components/ContactMoreActions.vue';
-import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';

 defineProps({
  showSearch: {
@@ -19,10 +18,10 @@ defineProps({
    type: String,
    required: true,
  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
+  //   buttonLabel: {
+  //     type: String,
+  //     default: '',
+  //   },
  activeSort: {
    type: String,
    default: 'last_activity_at',
@@ -49,6 +48,7 @@ const emit = defineEmits([
  'search',
  'filter',
  'update:sort',
+  //   'message',
  'add',
  'import',
  'export',
@@ -93,7 +93,7 @@ const emit = defineEmits([
              "
              color="slate"
              size="sm"
-              class="relative w-8"
+              class="relative"
              variant="ghost"
              @click="emit('filter')"
            >
@@ -109,6 +109,7 @@ const emit = defineEmits([
            icon="i-lucide-save"
            color="slate"
            size="sm"
+            class="relative"
            variant="ghost"
            @click="emit('createSegment')"
          />
@@ -117,6 +118,7 @@ const emit = defineEmits([
            icon="i-lucide-trash"
            color="slate"
            size="sm"
+            class="relative"
            variant="ghost"
            @click="emit('deleteSegment')"
          />
@@ -131,12 +133,9 @@ const emit = defineEmits([
            @export="emit('export')"
          />
        </div>
-        <div class="w-px h-4 bg-n-strong" />
-        <ComposeConversation>
-          <template #trigger="{ toggle }">
-            <Button :label="buttonLabel" size="sm" @click="toggle" />
-          </template>
-        </ComposeConversation>
+        <!-- TODO: Add this when we enabling message feature -->
+        <!-- <div class="w-px h-4 bg-n-strong" /> -->
+        <!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
      </div>
    </div>
  </header>
@@ -106,15 +106,10 @@ const onImport = async file => {
  try {
    await store.dispatch('contacts/import', file);
    contactImportDialogRef.value?.dialogRef.close();
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.SUCCESS_MESSAGE')
-    );
+    useAlert(t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
    useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
  } catch (error) {
-    useAlert(
-      error.message ??
-        t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.ERROR_MESSAGE')
-    );
+    useAlert(error.message ?? t('IMPORT_CONTACTS.ERROR_MESSAGE'));
    useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
  }
 };
@@ -55,7 +55,7 @@ const handleContactAction = ({ action }) => {
    <DropdownMenu
      v-if="showActionsDropdown"
      :menu-items="contactMenuItems"
-      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
+      class="right-0 mt-1 w-52 top-full"
      @action="handleContactAction($event)"
    />
  </div>
@@ -109,7 +109,7 @@ const handleOrderChange = value => {
    <div
      v-if="isMenuOpen"
      v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute top-full mt-1 right-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
    >
      <div class="flex items-center justify-between gap-2">
        <span class="text-sm text-n-slate-12">
@@ -1,67 +1,28 @@
 <script setup>
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useCamelCase } from 'dashboard/composables/useTransformKeys';

 import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';

-const props = defineProps({
-  activeSegment: { type: Object, default: null },
-});
-
 const emit = defineEmits(['clearFilters', 'openFilter']);

 const { t } = useI18n();
-const route = useRoute();

 const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
-const activeSegmentId = computed(() => route.params.segmentId);
-
-const activeSegmentQuery = computed(() => {
-  const query = props.activeSegment?.query?.payload;
-  if (!Array.isArray(query)) return [];
-
-  const newFilters = query.map(filter => {
-    const transformed = useCamelCase(filter);
-    return {
-      attributeKey: transformed.attributeKey,
-      attributeModel: transformed.attributeModel,
-      customAttributeType: transformed.customAttributeType,
-      filterOperator: transformed.filterOperator,
-      queryOperator: transformed.queryOperator ?? 'and',
-      values: transformed.values,
-    };
-  });
-
-  return newFilters;
-});
-
-const hasActiveSegments = computed(
-  () => props.activeSegment && activeSegmentId.value !== 0
-);
-
-const activeFilterQueryData = computed(() => {
-  return hasActiveSegments.value
-    ? activeSegmentQuery.value
-    : appliedFilters.value;
-});
 </script>

 <template>
  <ActiveFilterPreview
-    :applied-filters="activeFilterQueryData"
+    :applied-filters="appliedFilters"
    :max-visible-filters="2"
    :more-filters-label="
      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
-        count: activeFilterQueryData.length - 2,
+        count: appliedFilters.length - 2,
      })
    "
    :clear-button-label="
      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
    "
-    :show-clear-button="!hasActiveSegments"
    class="max-w-[960px] px-6"
    @open-filter="emit('openFilter')"
    @clear-filters="emit('clearFilters')"
@@ -7,18 +7,50 @@ import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/Con
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';

 defineProps({
-  searchValue: { type: String, default: '' },
-  headerTitle: { type: String, default: '' },
-  showPaginationFooter: { type: Boolean, default: true },
-  currentPage: { type: Number, default: 1 },
-  totalItems: { type: Number, default: 100 },
-  itemsPerPage: { type: Number, default: 15 },
-  activeSort: { type: String, default: '' },
-  activeOrdering: { type: String, default: '' },
-  activeSegment: { type: Object, default: null },
-  segmentsId: { type: [String, Number], default: 0 },
-  hasAppliedFilters: { type: Boolean, default: false },
-  isFetchingList: { type: Boolean, default: false },
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  showPaginationFooter: {
+    type: Boolean,
+    default: true,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalItems: {
+    type: Number,
+    default: 100,
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 15,
+  },
+  activeSort: {
+    type: String,
+    default: '',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+  activeSegment: {
+    type: Object,
+    default: null,
+  },
+  segmentsId: {
+    type: [String, Number],
+    default: 0,
+  },
+  hasAppliedFilters: {
+    type: Boolean,
+    default: false,
+  },
 });

 const emit = defineEmits([
@@ -74,12 +106,7 @@ const openFilter = () => {
      <main class="flex-1 overflow-y-auto">
        <div class="w-full mx-auto max-w-[960px]">
          <ContactsActiveFiltersPreview
-            v-if="
-              (hasAppliedFilters || !isNotSegmentView) &&
-              !isFetchingList &&
-              !isLabelView
-            "
-            :active-segment="activeSegment"
+            v-if="hasAppliedFilters && isNotSegmentView"
            @clear-filters="emit('clearFilters')"
            @open-filter="openFilter"
          />
@@ -2,7 +2,6 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useUISettings } from 'dashboard/composables/useUISettings';

 import ContactCustomAttributeItem from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue';

@@ -15,11 +14,12 @@ const props = defineProps({

 const { t } = useI18n();

-const { uiSettings } = useUISettings();
-
 const searchQuery = ref('');

-const contactAttributes = useMapGetter('attributes/getContactAttributes') || [];
+const contactAttributes = computed(() => {
+  const attributes = useMapGetter('attributes/getAttributesByModelType');
+  return attributes.value('contact_attribute') || [];
+});

 const hasContactAttributes = computed(
  () => contactAttributes.value?.length > 0
@@ -49,49 +49,20 @@ const processContactAttributes = (
  }, []);
 };

-const sortAttributesOrder = computed(
-  () =>
-    uiSettings.value.conversation_elements_order_conversation_contact_panel ??
-    []
-);
-
-const sortByUISettings = attributes => {
-  // Get saved order from UI settings
-  // Same as conversation panel contact attribute order
-  const order = sortAttributesOrder.value;
-
-  // If no order defined, return original array
-  if (!order?.length) return attributes;
-
-  const orderMap = new Map(order.map((key, index) => [key, index]));
-
-  // Sort attributes based on their position in saved order
-  return [...attributes].sort((a, b) => {
-    // Get positions, use Infinity if not found in order (pushes to end)
-    const aPos = orderMap.get(a.attributeKey) ?? Infinity;
-    const bPos = orderMap.get(b.attributeKey) ?? Infinity;
-    return aPos - bPos;
-  });
-};
-
 const usedAttributes = computed(() => {
-  const attributes = processContactAttributes(
+  return processContactAttributes(
    contactAttributes.value,
    props.selectedContact?.customAttributes,
    (key, custom) => key in custom
  );
-
-  return sortByUISettings(attributes);
 });

 const unusedAttributes = computed(() => {
-  const attributes = processContactAttributes(
+  return processContactAttributes(
    contactAttributes.value,
    props.selectedContact?.customAttributes,
    (key, custom) => !(key in custom)
  );
-
-  return sortByUISettings(attributes);
 });

 const filteredUnusedAttributes = computed(() => {
@@ -34,19 +34,22 @@ const contactConversations = computed(() =>
  >
    <Spinner />
  </div>
-  <div
-    v-else-if="contactConversations.length > 0"
-    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
-  >
-    <ConversationCard
+  <div v-else-if="contactConversations.length > 0" class="flex flex-col py-6">
+    <div
      v-for="conversation in contactConversations"
      :key="conversation.id"
-      :conversation="conversation"
-      :contact="contactsById(conversation.meta.sender.id)"
-      :state-inbox="stateInbox(conversation.inboxId)"
-      :account-labels="accountLabelsValue"
-      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
-    />
+      class="border-b border-n-strong"
+    >
+      <ConversationCard
+        v-if="conversation"
+        :key="conversation.id"
+        :conversation="conversation"
+        :contact="contactsById(conversation.meta.sender.id)"
+        :state-inbox="stateInbox(conversation.inboxId)"
+        :account-labels="accountLabelsValue"
+        class="px-6 !rounded-none dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+      />
+    </div>
  </div>
  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
    {{ t('CONTACTS_LAYOUT.SIDEBAR.HISTORY.EMPTY_STATE') }}
@@ -20,7 +20,7 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['goToContactsList', 'resetTab']);
+const emit = defineEmits(['goToContactsList']);

 const { t } = useI18n();
 const store = useStore();
@@ -74,9 +74,6 @@ const onContactSearch = debounce(
 );

 const resetState = () => {
-  if (state.primaryContactId === null) {
-    emit('resetTab');
-  }
  state.primaryContactId = null;
  searchResults.value = [];
  isSearching.value = false;
@@ -29,7 +29,7 @@ const getWrittenBy = note => {
  const isCurrentUser = note?.user?.id === currentUser.value.id;
  return isCurrentUser
    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
-    : note?.user?.name || 'Bot';
+    : note.user.name;
 };

 const onAdd = content => {
@@ -28,13 +28,13 @@ const handleDelete = () => {

 <template>
  <div
-    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
+    class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
  >
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-1.5 py-2.5 min-w-0">
        <Avatar
-          :name="note?.user?.name || 'Bot'"
-          :src="note?.user?.thumbnail || '/assets/images/chatwoot_bot.png'"
+          :name="note.user.name"
+          :src="note.user.thumbnail"
          :size="16"
          rounded-full
        />
@@ -68,12 +68,7 @@ const handleFormUpdate = updatedData => {

 const updateContact = async () => {
  try {
-    const { customAttributes, ...basicContactData } = contactData.value;
-    await store.dispatch('contacts/update', basicContactData);
-    await store.dispatch(
-      'contacts/fetchContactableInbox',
-      props.selectedContact.id
-    );
+    await store.dispatch('contacts/update', contactData.value);
    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
  } catch (error) {
    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.ERROR_MESSAGE'));
@@ -134,28 +129,15 @@ const handleAvatarDelete = async () => {
        <h3 class="text-base font-medium text-n-slate-12">
          {{ selectedContact?.name }}
        </h3>
-        <div class="flex flex-col gap-1.5">
-          <span
-            v-if="selectedContact?.identifier"
-            class="inline-flex items-center gap-1 text-sm text-n-slate-11"
-          >
-            <span class="i-ph-user-gear text-n-slate-10 size-4" />
-            {{ selectedContact?.identifier }}
-          </span>
-          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
-            <span
-              v-if="selectedContact?.identifier"
-              class="i-ph-activity text-n-slate-10 size-4"
-            />
-            {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
-            •
-            {{
-              $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
-                date: lastActivityAt,
-              })
-            }}
-          </span>
-        </div>
+        <span class="text-sm text-n-slate-11">
+          {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
+          •
+          {{
+            $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
+              date: lastActivityAt,
+            })
+          }}
+        </span>
      </div>
      <ContactLabels :contact-id="selectedContact?.id" />
    </div>
@@ -21,7 +21,7 @@ const lastNonActivityMessageContent = computed(() => {
    props.conversation;
  const { email: { subject } = {} } = customAttributes;
  return getPlainText(
-    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
+    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
  );
 });

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';

@@ -20,8 +20,6 @@ const props = defineProps({

 const { t } = useI18n();

-const slaCardLabelRef = ref(null);
-
 const { getPlainText } = useMessageFormatter();

 const lastNonActivityMessageContent = computed(() => {
@@ -29,7 +27,7 @@ const lastNonActivityMessageContent = computed(() => {
    props.conversation;
  const { email: { subject } = {} } = customAttributes;
  return getPlainText(
-    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
+    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
  );
 });

@@ -47,15 +45,7 @@ const unreadMessagesCount = computed(() => {
  return unreadCount;
 });

-const hasSlaThreshold = computed(() => {
-  return (
-    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
-  );
-});
-
-defineExpose({
-  hasSlaThreshold,
-});
+const hasSlaThreshold = computed(() => props.conversation?.slaPolicyId);
 </script>

 <template>
@@ -83,11 +73,7 @@ defineExpose({
          : 'grid-cols-[1fr_20px]'
      "
    >
-      <SLACardLabel
-        v-show="hasSlaThreshold"
-        ref="slaCardLabelRef"
-        :conversation="conversation"
-      />
+      <SLACardLabel v-if="hasSlaThreshold" :conversation="conversation" />
      <div v-if="hasSlaThreshold" class="w-px h-3 bg-n-slate-4" />
      <div class="overflow-hidden">
        <CardLabels
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
 import { useRouter, useRoute } from 'vue-router';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
@@ -33,8 +33,6 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute();

-const cardMessagePreviewWithMetaRef = ref(null);
-
 const currentContact = computed(() => props.contact);

 const currentContactName = computed(() => currentContact.value?.name);
@@ -58,10 +56,8 @@ const lastActivityAt = computed(() => {
 });

 const showMessagePreviewWithoutMeta = computed(() => {
-  const { labels = [] } = props.conversation;
-  return (
-    !cardMessagePreviewWithMetaRef.value?.hasSlaThreshold && labels.length === 0
-  );
+  const { slaPolicyId, labels = [] } = props.conversation;
+  return !slaPolicyId && labels.length === 0;
 });

 const onCardClick = e => {
@@ -86,8 +82,7 @@ const onCardClick = e => {

 <template>
  <div
-    role="button"
-    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
+    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out cursor-pointer rounded-xl"
    @click="onCardClick"
  >
    <Avatar
@@ -97,7 +92,7 @@ const onCardClick = e => {
      :status="currentContactStatus"
      rounded-full
    />
-    <div class="flex flex-col w-full gap-1 min-w-0">
+    <div class="flex flex-col w-full gap-1">
      <div class="flex items-center justify-between h-6 gap-2">
        <h4 class="text-base font-medium truncate text-n-slate-12">
          {{ currentContactName }}
@@ -119,12 +114,11 @@ const onCardClick = e => {
        </div>
      </div>
      <CardMessagePreview
-        v-show="showMessagePreviewWithoutMeta"
+        v-if="showMessagePreviewWithoutMeta"
        :conversation="conversation"
      />
      <CardMessagePreviewWithMeta
-        v-show="!showMessagePreviewWithoutMeta"
-        ref="cardMessagePreviewWithMetaRef"
+        v-else
        :conversation="conversation"
        :account-labels="accountLabels"
      />
@@ -31,17 +31,13 @@ const convertObjectCamelCaseToSnakeCase = object => {
 const appliedSLA = computed(() => props.conversation?.appliedSla);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);

-const hasSlaThreshold = computed(() => {
-  return slaStatus.value?.threshold && appliedSLA.value?.id;
-});
-
 const slaStatusText = computed(() => {
  return slaStatus.value?.type?.toUpperCase();
 });

 const updateSlaStatus = () => {
  slaStatus.value = evaluateSLAStatus({
-    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
+    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value),
    chat: props.conversation,
  });
 };
@@ -65,21 +61,6 @@ onUnmounted(() => {
 });

 watch(() => props.conversation, updateSlaStatus);
-
-// This expose is to provide context to the parent component, so that it can decided weather
-// a new row has to be added to the conversation card or not
-// SLACardLabel > CardMessagePreviewWithMeta > ConversationCard
-//
-// We need to do this becuase each SLA card has it's own SLA timer
-// and it's just convenient to have this logic in the SLACardLabel component
-// However this is a bit hacky, and we should change this in the future
-//
-// TODO: A better implementation would be to have the timer as a shared composable, just like the provider pattern
-// we use across the next components. Have the calculation be done on the top ConversationCard component
-// and then the value be injected to the SLACardLabel component
-defineExpose({
-  hasSlaThreshold,
-});
 </script>

 <template>
@@ -41,8 +41,6 @@ const props = defineProps({
    default: 'info',
    validator: value => ['info', 'error', 'success'].includes(value),
  },
-  enableVariables: { type: Boolean, default: false },
-  enableCannedResponses: { type: Boolean, default: true },
 });

 const emit = defineEmits(['update:modelValue']);
@@ -118,8 +116,6 @@ watch(
        :placeholder="placeholder"
        :focus-on-mount="focusOnMount"
        :disabled="disabled"
-        :enable-variables="enableVariables"
-        :enable-canned-responses="enableCannedResponses"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
@@ -173,7 +169,7 @@ watch(
          @apply m-0 !important;

          &::before {
-            @apply text-n-slate-11 dark:text-n-slate-11;
+            @apply text-n-slate-10 dark:text-n-slate-10 !important;
          }
        }
      }
@@ -1,6 +1,4 @@
 <script setup>
-import Policy from 'dashboard/components/policy.vue';
-
 defineProps({
  title: {
    type: String,
@@ -10,10 +8,6 @@ defineProps({
    type: String,
    required: true,
  },
-  actionPerms: {
-    type: Array,
-    default: () => [],
-  },
 });
 </script>

@@ -22,7 +16,7 @@ defineProps({
    class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
  >
    <div
-      class="relative w-full max-w-[960px] mx-auto overflow-hidden h-full max-h-[448px]"
+      class="relative w-full max-w-[940px] mx-auto overflow-hidden h-full max-h-[448px]"
    >
      <div
        class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
@@ -45,9 +39,7 @@ defineProps({
              {{ subtitle }}
            </p>
          </div>
-          <Policy :permissions="actionPerms">
-            <slot name="actions" />
-          </Policy>
+          <slot name="actions" />
        </div>
      </div>
    </div>
@@ -60,7 +60,7 @@ const togglePortalSwitcher = () => {
 <template>
  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto lg:px-6">
+      <div class="w-full max-w-[960px] mx-auto">
        <div
          v-if="showHeaderTitle"
          class="flex items-center justify-start h-20 gap-2"
@@ -96,7 +96,7 @@ const togglePortalSwitcher = () => {
      </div>
    </header>
    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-3 lg:px-6">
+      <div class="w-full max-w-[960px] mx-auto py-3">
        <slot name="content" />
      </div>
    </main>
@@ -36,8 +36,6 @@ const emit = defineEmits([

 const { t } = useI18n();

-const isNewArticle = computed(() => !props.article?.id);
-
 const saveAndSync = value => {
  emit('saveArticle', value);
 };
@@ -54,32 +52,21 @@ const quickSave = debounce(
 // 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
 // so we can save the data to the backend and retrieve the updated data
 // this will update the local state with response data
-// Only use to save for existing articles
 const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);

-// Debounced save for new articles
-const quickSaveNewArticle = debounce(saveAndSync, 400, false);
-
-const handleSave = value => {
-  if (isNewArticle.value) {
-    quickSaveNewArticle(value);
-  } else {
-    quickSave(value);
-    saveAndSyncDebounced(value);
-  }
-};
-
 const articleTitle = computed({
  get: () => props.article.title,
  set: value => {
-    handleSave({ title: value });
+    quickSave({ title: value });
+    saveAndSyncDebounced({ title: value });
  },
 });

 const articleContent = computed({
  get: () => props.article.content,
  set: content => {
-    handleSave({ content });
+    quickSave({ content });
+    saveAndSyncDebounced({ content });
  },
 });

@@ -200,8 +200,7 @@ onMounted(() => {
        <DropdownMenu
          v-if="openAgentsList && hasAgentList"
          :menu-items="agentList"
-          show-search
-          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-60"
+          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
          @action="handleArticleAction"
        />
      </OnClickOutside>
@@ -232,8 +231,7 @@ onMounted(() => {
        <DropdownMenu
          v-if="openCategoryList && hasCategoryMenuItems"
          :menu-items="categoryList"
-          show-search
-          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-60"
+          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-52"
          @action="handleArticleAction"
        />
      </OnClickOutside>
@@ -111,7 +111,7 @@ onMounted(() => {
            custom-label-class="min-w-[120px]"
          />
        </div>
-        <div class="flex justify-between w-full gap-3 py-2">
+        <div class="flex justify-between w-full gap-2 py-2">
          <label
            class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
          >
@@ -3,7 +3,6 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { OnClickOutside } from '@vueuse/components';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import {
  ARTICLE_TABS,
  CATEGORY_ALL,
@@ -38,7 +37,6 @@ const emit = defineEmits([

 const route = useRoute();
 const { t } = useI18n();
-const { updateUISettings } = useUISettings();

 const isCategoryMenuOpen = ref(false);
 const isLocaleMenuOpen = ref(false);
@@ -113,12 +111,13 @@ const localeMenuItems = computed(() => {
  }));
 });

+const hasMoreThanOneLocaleMenuItems = computed(() => {
+  return localeMenuItems.value?.length > 1;
+});
+
 const handleLocaleAction = ({ value }) => {
  emit('localeChange', value);
  isLocaleMenuOpen.value = false;
-  updateUISettings({
-    last_active_locale_code: value,
-  });
 };

 const handleCategoryAction = ({ value }) => {
@@ -144,7 +143,7 @@ const handleTabChange = value => {
    />
    <div class="flex items-start justify-between w-full gap-2">
      <div class="flex items-center gap-2">
-        <div class="relative group">
+        <div v-if="hasMoreThanOneLocaleMenuItems" class="relative group">
          <OnClickOutside @trigger="isLocaleMenuOpen = false">
            <Button
              :label="activeLocaleName"
@@ -158,7 +157,6 @@ const handleTabChange = value => {
            <DropdownMenu
              v-if="isLocaleMenuOpen"
              :menu-items="localeMenuItems"
-              show-search
              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
              @action="handleLocaleAction"
            />
@@ -179,7 +177,6 @@ const handleTabChange = value => {
            <DropdownMenu
              v-if="isCategoryMenuOpen"
              :menu-items="categoryMenuItems"
-              show-search
              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
              @action="handleCategoryAction"
            />
@@ -99,19 +99,11 @@ const getStatusMessage = (status, isSuccess) => {
    : '';
 };

-const updatePortalMeta = () => {
+const updateMeta = () => {
  const { portalSlug, locale } = route.params;
  return store.dispatch('portals/show', { portalSlug, locale });
 };

-const updateArticlesMeta = () => {
-  const { portalSlug, locale } = route.params;
-  return store.dispatch('articles/updateArticleMeta', {
-    portalSlug,
-    locale,
-  });
-};
-
 const handleArticleAction = async (action, { status, id }) => {
  const { portalSlug } = route.params;
  try {
@@ -135,8 +127,7 @@ const handleArticleAction = async (action, { status, id }) => {
        useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
      }
    }
-    await updateArticlesMeta();
-    await updatePortalMeta();
+    await updateMeta();
  } catch (error) {
    const errorMessage =
      error?.message ||
@@ -91,7 +91,10 @@ const articlesCount = computed(() => {
 });

 const showArticleHeaderControls = computed(
-  () => !props.isCategoryArticles && !isSwitchingPortal.value
+  () =>
+    !hasNoArticlesInPortal.value &&
+    !props.isCategoryArticles &&
+    !isSwitchingPortal.value
 );

 const showCategoryHeaderControls = computed(
@@ -141,7 +141,6 @@ const handleBreadcrumbClick = () => {
          <DropdownMenu
            v-if="isLocaleMenuOpen"
            :menu-items="localeMenuItems"
-            show-search
            class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
            @action="handleLocaleAction"
          />
@@ -49,11 +49,8 @@ const onCreate = async () => {

  try {
    await store.dispatch('portals/update', {
-      portalSlug: props.portal?.slug,
-      config: {
-        allowed_locales: updatedLocales,
-        default_locale: props.portal?.meta?.default_locale,
-      },
+      portalSlug: props.portal.slug,
+      config: { allowed_locales: updatedLocales },
    });

    useTrack(PORTALS_EVENTS.CREATE_LOCALE, {
@@ -2,7 +2,6 @@
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -21,7 +20,6 @@ const props = defineProps({
 const store = useStore();
 const { t } = useI18n();
 const route = useRoute();
-const { uiSettings, updateUISettings } = useUISettings();

 const isLocaleDefault = code => {
  return props.portal?.meta?.default_locale === code;
@@ -58,40 +56,26 @@ const changeDefaultLocale = ({ localeCode }) => {
    defaultLocale: localeCode,
    messageKey: 'CHANGE_DEFAULT_LOCALE',
  });
+
  useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
    newLocale: localeCode,
    from: route.name,
  });
 };

-const updateLastActivePortal = async localeCode => {
-  const { last_active_locale_code: lastActiveLocaleCode } =
-    uiSettings.value || {};
-  const defaultLocale = props.portal.meta.default_locale;
-
-  // Update UI settings only if deleting locale matches the last active locale in UI settings.
-  if (localeCode === lastActiveLocaleCode) {
-    await updateUISettings({
-      last_active_locale_code: defaultLocale,
-    });
-  }
-};
-
-const deletePortalLocale = async ({ localeCode }) => {
+const deletePortalLocale = ({ localeCode }) => {
  const updatedLocales = props.locales
    .filter(locale => locale.code !== localeCode)
    .map(locale => locale.code);

  const defaultLocale = props.portal.meta.default_locale;

-  await updatePortalLocales({
+  updatePortalLocales({
    newAllowedLocales: updatedLocales,
    defaultLocale,
    messageKey: 'DELETE_LOCALE',
  });

-  await updateLastActivePortal(localeCode);
-
  useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
    deletedLocale: localeCode,
    from: route.name,
@@ -1,248 +0,0 @@
-<script setup>
-import { computed, ref, onBeforeMount } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
-import {
-  snoozedReopenTimeToTimestamp,
-  shortenSnoozeTime,
-} from 'dashboard/helper/snoozeHelpers';
-import { NOTIFICATION_TYPES_MAPPING } from 'dashboard/routes/dashboard/inbox/helpers/InboxViewHelpers';
-
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
-import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
-import InboxContextMenu from 'dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue';
-
-const props = defineProps({
-  inboxItem: { type: Object, default: () => ({}) },
-  stateInbox: { type: Object, default: () => ({}) },
-});
-
-const emit = defineEmits([
-  'click',
-  'contextMenuOpen',
-  'contextMenuClose',
-  'markNotificationAsRead',
-  'markNotificationAsUnRead',
-  'deleteNotification',
-]);
-
-const { t } = useI18n();
-
-const isContextMenuOpen = ref(false);
-const contextMenuPosition = ref({ x: null, y: null });
-const slaCardLabel = ref(null);
-
-const getMessageClasses = {
-  emphasis: 'text-sm font-medium text-n-slate-11',
-  emphasisUnread: 'text-sm font-medium text-n-slate-12',
-  normal: 'text-sm font-normal text-n-slate-11',
-  normalUnread: 'text-sm text-n-slate-12',
-};
-
-const primaryActor = computed(() => props.inboxItem?.primaryActor);
-const meta = computed(() => primaryActor.value?.meta);
-const assigneeMeta = computed(() => meta.value?.sender);
-const isUnread = computed(() => !props.inboxItem?.readAt);
-const inbox = computed(() => props.stateInbox);
-
-const inboxIcon = computed(() => {
-  const { phoneNumber, channelType } = inbox.value;
-  return getInboxIconByType(channelType, phoneNumber);
-});
-
-const hasSlaThreshold = computed(() => {
-  return slaCardLabel.value?.hasSlaThreshold && primaryActor.value?.slaPolicyId;
-});
-
-const lastActivityAt = computed(() => {
-  const timestamp = props.inboxItem?.lastActivityAt;
-  return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
-});
-
-const menuItems = computed(() => [
-  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
-  {
-    key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
-    label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
-  },
-]);
-
-const messageClasses = computed(() => ({
-  emphasis: isUnread.value
-    ? getMessageClasses.emphasisUnread
-    : getMessageClasses.emphasis,
-  normal: isUnread.value
-    ? getMessageClasses.normalUnread
-    : getMessageClasses.normal,
-}));
-
-const formatPushMessage = message => {
-  if (message.startsWith(': ')) {
-    return message.slice(2);
-  }
-
-  return message.replace(/^([^:]+):/g, (match, name) => {
-    return `<span class="${messageClasses.value.emphasis}">${name}:</span>`;
-  });
-};
-
-const formattedMessage = computed(() => {
-  const messageContent = `<span class="${messageClasses.value.normal}">${formatPushMessage(props.inboxItem?.pushMessageBody || '')}</span>`;
-
-  return isUnread.value
-    ? `<span class="inline-flex flex-shrink-0 w-2 h-2 mb-px rounded-full bg-n-iris-10 ltr:mr-1 rtl:ml-1"></span> ${messageContent}`
-    : messageContent;
-});
-
-const notificationDetails = computed(() => {
-  const type = props.inboxItem?.notificationType?.toUpperCase() || '';
-  const [icon = '', color = 'text-n-blue-text'] =
-    NOTIFICATION_TYPES_MAPPING[type] || [];
-  return { text: type ? t(`INBOX.TYPES_NEXT.${type}`) : '', icon, color };
-});
-
-const snoozedUntilTime = computed(() => {
-  const { snoozedUntil } = props.inboxItem;
-  if (!snoozedUntil) return null;
-  return shortenSnoozeTime(
-    dynamicTime(snoozedReopenTimeToTimestamp(snoozedUntil))
-  );
-});
-
-const hasLastSnoozed = computed(() => props.inboxItem?.meta?.lastSnoozedAt);
-
-const snoozedText = computed(() => {
-  return !hasLastSnoozed.value
-    ? t('INBOX.TYPES_NEXT.SNOOZED_UNTIL', {
-        time: shortTimestamp(snoozedUntilTime.value),
-      })
-    : t('INBOX.TYPES_NEXT.SNOOZED_ENDS');
-});
-
-const contextMenuActions = {
-  close: () => {
-    isContextMenuOpen.value = false;
-    contextMenuPosition.value = { x: null, y: null };
-    emit('contextMenuClose');
-  },
-  open: e => {
-    e.preventDefault();
-    contextMenuPosition.value = {
-      x: e.pageX || e.clientX,
-      y: e.pageY || e.clientY,
-    };
-    isContextMenuOpen.value = true;
-    emit('contextMenuOpen');
-  },
-  handle: key => {
-    const actions = {
-      mark_as_read: () => emit('markNotificationAsRead', props.inboxItem),
-      mark_as_unread: () => emit('markNotificationAsUnRead', props.inboxItem),
-      delete: () => emit('deleteNotification', props.inboxItem),
-    };
-    actions[key]?.();
-  },
-};
-
-onBeforeMount(contextMenuActions.close);
-</script>
-
-<template>
-  <div
-    role="button"
-    class="flex flex-col w-full gap-2 p-3 transition-all duration-300 ease-in-out cursor-pointer"
-    @contextmenu="contextMenuActions.open($event)"
-    @click="emit('click')"
-  >
-    <div class="flex items-start gap-2">
-      <Avatar
-        :name="assigneeMeta.name"
-        :src="assigneeMeta.thumbnail"
-        :size="20"
-        rounded-full
-        class="mt-1"
-      />
-      <p v-dompurify-html="formattedMessage" class="mb-0 line-clamp-2" />
-    </div>
-    <div class="flex items-center justify-between h-6 gap-2">
-      <div class="flex items-center flex-1 min-w-0 gap-1">
-        <div
-          v-if="snoozedUntilTime || hasLastSnoozed"
-          class="flex items-center w-full min-w-0 gap-2 ltr:pl-1 rtl:pr-1"
-        >
-          <Icon
-            :icon="
-              !hasLastSnoozed
-                ? 'i-lucide-alarm-clock-plus'
-                : 'i-lucide-alarm-clock-off'
-            "
-            class="flex-shrink-0 size-4"
-            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
-          />
-          <span
-            class="text-xs font-medium truncate"
-            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
-          >
-            {{ snoozedText }}
-          </span>
-        </div>
-        <div
-          v-else-if="notificationDetails.text"
-          class="flex items-center w-full min-w-0 gap-2 ltr:pl-1 rtl:pr-1"
-        >
-          <Icon
-            :icon="notificationDetails.icon"
-            :class="isUnread ? notificationDetails.color : 'text-n-slate-11'"
-            class="flex-shrink-0 size-4"
-          />
-          <span
-            class="text-xs font-medium truncate"
-            :class="isUnread ? notificationDetails.color : 'text-n-slate-11'"
-          >
-            {{ notificationDetails.text }}
-          </span>
-        </div>
-      </div>
-      <div class="flex items-center flex-shrink-0 gap-2">
-        <SLACardLabel
-          v-show="hasSlaThreshold"
-          ref="slaCardLabel"
-          :conversation="primaryActor"
-          class="[&>span]:text-xs"
-          :class="
-            !isUnread && '[&>span]:text-n-slate-11 [&>div>svg]:fill-n-slate-11'
-          "
-        />
-        <div v-if="hasSlaThreshold" class="w-px h-3 rounded-sm bg-n-slate-4" />
-        <CardPriorityIcon
-          v-if="primaryActor?.priority"
-          :priority="primaryActor?.priority"
-          class="[&>svg]:size-4"
-        />
-        <div
-          v-if="inboxIcon"
-          v-tooltip.left="inbox?.name"
-          class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
-        >
-          <Icon
-            :icon="inboxIcon"
-            class="flex-shrink-0 text-n-slate-11 size-2.5"
-          />
-        </div>
-        <span class="text-sm text-n-slate-10">
-          {{ lastActivityAt }}
-        </span>
-      </div>
-    </div>
-    <InboxContextMenu
-      v-if="isContextMenuOpen"
-      :context-menu-position="contextMenuPosition"
-      :menu-items="menuItems"
-      @close="contextMenuActions.close"
-      @select-action="contextMenuActions.handle"
-    />
-  </div>
-</template>
@@ -21,7 +21,7 @@ const showDropdown = ref(false);
 <template>
  <div class="relative">
    <button
-      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-6 outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
+      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-[26px] outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
      :class="{ 'bg-n-alpha-2': showDropdown }"
      @click="showDropdown = !showDropdown"
    >
@@ -1,56 +1,22 @@
 <script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
+defineProps({
  label: {
    type: Object,
    default: null,
  },
-  isHovered: {
-    type: Boolean,
-    default: false,
-  },
 });
-
-const emit = defineEmits(['remove', 'hover']);
-
-const handleRemoveLabel = () => {
-  emit('remove', props.label?.id);
-};
-
-const handleMouseEnter = () => {
-  // Notify parent component when this label is hovered
-  // Added this to show the remove button with transition when hovering over the label
-  // This will solve the flickering issue when hovering over the last label item
-  emit('hover', props.label?.id);
-};
 </script>

 <template>
  <div
-    class="flex items-center px-1 py-1 overflow-hidden transition-all duration-300 ease-out rounded-md bg-n-alpha-2 h-7"
-    @mouseenter="handleMouseEnter"
+    class="bg-n-alpha-2 rounded-md flex items-center h-7 w-fit py-1 ltr:pl-1 rtl:pr-1 ltr:pr-1.5 rtl:pl-1.5"
  >
    <div
      class="w-2 h-2 m-1 rounded-sm"
      :style="{ backgroundColor: label.color }"
    />
-    <span class="text-sm text-n-slate-12 ltr:mr-px rtl:ml-px">
+    <span class="text-sm text-n-slate-12">
      {{ label.title }}
    </span>
-    <div
-      class="w-0 flex relative ltr:left-1 rtl:right-1 flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-out"
-      :class="{ 'w-6': isHovered }"
-    >
-      <Button
-        class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
-        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
-        slate
-        xs
-        faded
-        icon="i-lucide-x"
-        @click="handleRemoveLabel"
-      />
-    </div>
  </div>
 </template>
@@ -1,236 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { vOnClickOutside } from '@vueuse/components';
-import { useAlert } from 'dashboard/composables';
-import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
-import { debounce } from '@chatwoot/utils';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import {
-  searchContacts,
-  createNewContact,
-  fetchContactableInboxes,
-  processContactableInboxes,
-} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
-
-import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
-
-const props = defineProps({
-  alignPosition: {
-    type: String,
-    default: 'left',
-  },
-  contactId: {
-    type: String,
-    default: null,
-  },
-});
-
-const store = useStore();
-const { t } = useI18n();
-
-const { fetchSignatureFlagFromUISettings } = useUISettings();
-
-const contacts = ref([]);
-const selectedContact = ref(null);
-const targetInbox = ref(null);
-const isCreatingContact = ref(false);
-const isFetchingInboxes = ref(false);
-const isSearching = ref(false);
-const showComposeNewConversation = ref(false);
-
-const contactById = useMapGetter('contacts/getContactById');
-const contactsUiFlags = useMapGetter('contacts/getUIFlags');
-const currentUser = useMapGetter('getCurrentUser');
-const globalConfig = useMapGetter('globalConfig/get');
-const uiFlags = useMapGetter('contactConversations/getUIFlags');
-const messageSignature = useMapGetter('getMessageSignature');
-
-const sendWithSignature = computed(() =>
-  fetchSignatureFlagFromUISettings(targetInbox.value?.channelType)
-);
-
-const directUploadsEnabled = computed(
-  () => globalConfig.value.directUploadsEnabled
-);
-
-const activeContact = computed(() => contactById.value(props.contactId));
-
-const composePopoverClass = computed(() => {
-  return props.alignPosition === 'right'
-    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
-    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
-});
-
-const onContactSearch = debounce(
-  async query => {
-    isSearching.value = true;
-    contacts.value = [];
-    try {
-      contacts.value = await searchContacts(query);
-      isSearching.value = false;
-    } catch (error) {
-      useAlert(t('COMPOSE_NEW_CONVERSATION.CONTACT_SEARCH.ERROR_MESSAGE'));
-    } finally {
-      isSearching.value = false;
-    }
-  },
-  300,
-  false
-);
-
-const resetContacts = () => {
-  contacts.value = [];
-};
-
-const handleSelectedContact = async ({ value, action, ...rest }) => {
-  let contact;
-  if (action === 'create') {
-    isCreatingContact.value = true;
-    try {
-      contact = await createNewContact(value);
-      isCreatingContact.value = false;
-    } catch (error) {
-      isCreatingContact.value = false;
-      return;
-    }
-  } else {
-    contact = rest;
-  }
-  selectedContact.value = contact;
-  if (contact?.id) {
-    isFetchingInboxes.value = true;
-    try {
-      const contactableInboxes = await fetchContactableInboxes(contact.id);
-      selectedContact.value.contactInboxes = contactableInboxes;
-      isFetchingInboxes.value = false;
-    } catch (error) {
-      isFetchingInboxes.value = false;
-    }
-  }
-};
-
-const handleTargetInbox = inbox => {
-  targetInbox.value = inbox;
-  resetContacts();
-};
-
-const clearSelectedContact = () => {
-  selectedContact.value = null;
-  targetInbox.value = null;
-};
-
-const closeCompose = () => {
-  showComposeNewConversation.value = false;
-  selectedContact.value = null;
-  targetInbox.value = null;
-  resetContacts();
-};
-
-const createConversation = async ({ payload, isFromWhatsApp }) => {
-  try {
-    const data = await store.dispatch('contactConversations/create', {
-      params: payload,
-      isFromWhatsApp,
-    });
-    const action = {
-      type: 'link',
-      to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
-      message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
-    };
-    closeCompose();
-    useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
-    return true; // Return success
-  } catch (error) {
-    useAlert(
-      error instanceof ExceptionWithMessage
-        ? error.data
-        : t('COMPOSE_NEW_CONVERSATION.FORM.ERROR_MESSAGE')
-    );
-    return false; // Return failure
-  }
-};
-
-const toggle = () => {
-  showComposeNewConversation.value = !showComposeNewConversation.value;
-};
-
-watch(
-  activeContact,
-  () => {
-    if (activeContact.value && props.contactId) {
-      const contactInboxes = activeContact.value?.contactInboxes || [];
-      selectedContact.value = {
-        ...activeContact.value,
-        contactInboxes: processContactableInboxes(contactInboxes),
-      };
-    }
-  },
-  { immediate: true, deep: true }
-);
-
-const handleClickOutside = () => {
-  showComposeNewConversation.value = false;
-};
-
-onMounted(() => resetContacts());
-
-const keyboardEvents = {
-  Escape: {
-    action: () => {
-      if (showComposeNewConversation.value) {
-        showComposeNewConversation.value = false;
-      }
-    },
-  },
-};
-
-useKeyboardEvents(keyboardEvents);
-</script>
-
-<template>
-  <div
-    v-on-click-outside="[
-      handleClickOutside,
-      // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
-      // This will prevent closing the compose conversation modal when the editor Create link popup is open.
-      { ignore: ['div.ProseMirror-prompt'] },
-    ]"
-    class="relative"
-    :class="{
-      'z-40': showComposeNewConversation,
-    }"
-  >
-    <slot
-      name="trigger"
-      :is-open="showComposeNewConversation"
-      :toggle="toggle"
-    />
-    <ComposeNewConversationForm
-      v-if="showComposeNewConversation"
-      :contacts="contacts"
-      :contact-id="contactId"
-      :is-loading="isSearching"
-      :current-user="currentUser"
-      :selected-contact="selectedContact"
-      :target-inbox="targetInbox"
-      :is-creating-contact="isCreatingContact"
-      :is-fetching-inboxes="isFetchingInboxes"
-      :is-direct-uploads-enabled="directUploadsEnabled"
-      :contact-conversations-ui-flags="uiFlags"
-      :contacts-ui-flags="contactsUiFlags"
-      :class="composePopoverClass"
-      :message-signature="messageSignature"
-      :send-with-signature="sendWithSignature"
-      @search-contacts="onContactSearch"
-      @reset-contact-search="resetContacts"
-      @update-selected-contact="handleSelectedContact"
-      @update-target-inbox="handleTargetInbox"
-      @clear-selected-contact="clearSelectedContact"
-      @create-conversation="createConversation"
-      @discard="closeCompose"
-    />
-  </div>
-</template>
@@ -1,235 +0,0 @@
-<script setup>
-import { defineAsyncComponent, ref, computed, watch, nextTick } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useFileUpload } from 'dashboard/composables/useFileUpload';
-import { vOnClickOutside } from '@vueuse/components';
-import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import FileUpload from 'vue-upload-component';
-import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import WhatsAppOptions from './WhatsAppOptions.vue';
-
-const props = defineProps({
-  attachedFiles: { type: Array, default: () => [] },
-  isWhatsappInbox: { type: Boolean, default: false },
-  isEmailOrWebWidgetInbox: { type: Boolean, default: false },
-  isTwilioSmsInbox: { type: Boolean, default: false },
-  messageTemplates: { type: Array, default: () => [] },
-  channelType: { type: String, default: '' },
-  isLoading: { type: Boolean, default: false },
-  disableSendButton: { type: Boolean, default: false },
-  hasSelectedInbox: { type: Boolean, default: false },
-  hasNoInbox: { type: Boolean, default: false },
-  isDropdownActive: { type: Boolean, default: false },
-  messageSignature: { type: String, default: '' },
-});
-
-const emit = defineEmits([
-  'discard',
-  'sendMessage',
-  'sendWhatsappMessage',
-  'insertEmoji',
-  'addSignature',
-  'removeSignature',
-  'attachFile',
-]);
-
-const { t } = useI18n();
-
-const uploadAttachment = ref(null);
-const isEmojiPickerOpen = ref(false);
-
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
-);
-
-const signatureToApply = computed(() =>
-  props.isEmailOrWebWidgetInbox
-    ? props.messageSignature
-    : extractTextFromMarkdown(props.messageSignature)
-);
-
-const {
-  fetchSignatureFlagFromUISettings,
-  setSignatureFlagForInbox,
-  isEditorHotKeyEnabled,
-} = useUISettings();
-
-const sendWithSignature = computed(() => {
-  return fetchSignatureFlagFromUISettings(props.channelType);
-});
-
-const setSignature = () => {
-  if (signatureToApply.value) {
-    if (sendWithSignature.value) {
-      emit('addSignature', signatureToApply.value);
-    } else {
-      emit('removeSignature', signatureToApply.value);
-    }
-  }
-};
-
-const toggleMessageSignature = () => {
-  setSignatureFlagForInbox(props.channelType, !sendWithSignature.value);
-  setSignature();
-};
-
-// Added this watch to dynamically set signature on target inbox change.
-// Only targetInbox has value and is Advance Editor(used by isEmailOrWebWidgetInbox)
-// Set the signature only if the inbox based flag is true
-watch(
-  () => props.hasSelectedInbox,
-  newValue => {
-    nextTick(() => {
-      if (newValue && props.isEmailOrWebWidgetInbox) setSignature();
-    });
-  },
-  { immediate: true }
-);
-
-const onClickInsertEmoji = emoji => {
-  emit('insertEmoji', emoji);
-};
-
-const { onFileUpload } = useFileUpload({
-  isATwilioSMSChannel: props.isTwilioSmsInbox,
-  attachFile: ({ blob, file }) => {
-    if (!file) return;
-    const reader = new FileReader();
-    reader.readAsDataURL(file.file);
-    reader.onloadend = () => {
-      const newFile = {
-        resource: blob || file,
-        isPrivate: false,
-        thumb: reader.result,
-        blobSignedId: blob?.signed_id,
-      };
-      emit('attachFile', [...props.attachedFiles, newFile]);
-    };
-  },
-});
-
-const sendButtonLabel = computed(() => {
-  const keyCode = isEditorHotKeyEnabled('cmd_enter') ? '⌘ + ↵' : '↵';
-  return t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.SEND', {
-    keyCode,
-  });
-});
-
-const keyboardEvents = {
-  Enter: {
-    action: () => {
-      if (
-        isEditorHotKeyEnabled('enter') &&
-        !props.isWhatsappInbox &&
-        !props.isDropdownActive
-      ) {
-        emit('sendMessage');
-      }
-    },
-  },
-  '$mod+Enter': {
-    action: () => {
-      if (
-        isEditorHotKeyEnabled('cmd_enter') &&
-        !props.isWhatsappInbox &&
-        !props.isDropdownActive
-      ) {
-        emit('sendMessage');
-      }
-    },
-  },
-};
-useKeyboardEvents(keyboardEvents);
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-between w-full h-[52px] gap-2 px-4 py-3"
-  >
-    <div class="flex items-center gap-2">
-      <WhatsAppOptions
-        v-if="isWhatsappInbox"
-        :message-templates="messageTemplates"
-        @send-message="emit('sendWhatsappMessage', $event)"
-      />
-      <div
-        v-if="!isWhatsappInbox && !hasNoInbox"
-        v-on-click-outside="() => (isEmojiPickerOpen = false)"
-        class="relative"
-      >
-        <Button
-          icon="i-lucide-smile-plus"
-          color="slate"
-          size="sm"
-          class="!w-10"
-          @click="isEmojiPickerOpen = !isEmojiPickerOpen"
-        />
-        <EmojiInput
-          v-if="isEmojiPickerOpen"
-          class="left-0 top-full mt-1.5"
-          :on-click="onClickInsertEmoji"
-        />
-      </div>
-      <FileUpload
-        v-if="isEmailOrWebWidgetInbox"
-        ref="uploadAttachment"
-        input-id="composeNewConversationAttachment"
-        :size="4096 * 4096"
-        :accept="ALLOWED_FILE_TYPES"
-        multiple
-        :drop-directory="false"
-        :data="{
-          direct_upload_url: '/rails/active_storage/direct_uploads',
-          direct_upload: true,
-        }"
-        class="p-px"
-        @input-file="onFileUpload"
-      >
-        <Button
-          icon="i-lucide-plus"
-          color="slate"
-          size="sm"
-          class="!w-10 relative"
-        />
-      </FileUpload>
-      <Button
-        v-if="hasSelectedInbox && !isWhatsappInbox"
-        icon="i-lucide-signature"
-        color="slate"
-        size="sm"
-        class="!w-10"
-        @click="toggleMessageSignature"
-      />
-    </div>
-
-    <div class="flex items-center gap-2">
-      <Button
-        :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
-        variant="faded"
-        color="slate"
-        size="sm"
-        class="!text-xs font-medium"
-        @click="emit('discard')"
-      />
-      <Button
-        v-if="!isWhatsappInbox"
-        :label="sendButtonLabel"
-        size="sm"
-        class="!text-xs font-medium"
-        :disabled="isLoading || disableSendButton"
-        :is-loading="isLoading"
-        @click="emit('sendMessage')"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.emoji-dialog::before {
-  @apply hidden;
-}
-</style>
@@ -1,88 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { fileNameWithEllipsis } from '@chatwoot/utils';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['update:attachments']);
-
-const isTypeImage = file => {
-  const type = file.content_type || file.type;
-  return type.includes('image');
-};
-
-const filteredImageAttachments = computed(() => {
-  return props.attachments.filter(attachment =>
-    isTypeImage(attachment.resource)
-  );
-});
-
-const filteredNonImageAttachments = computed(() => {
-  return props.attachments.filter(
-    attachment => !isTypeImage(attachment.resource)
-  );
-});
-
-const removeAttachment = id => {
-  const updatedAttachments = props.attachments.filter(
-    attachment => attachment.resource.id !== id
-  );
-  emit('update:attachments', updatedAttachments);
-};
-</script>
-
-<template>
-  <div class="flex flex-col gap-4 p-4">
-    <div
-      v-if="filteredImageAttachments.length > 0"
-      class="flex flex-wrap gap-3"
-    >
-      <div
-        v-for="attachment in filteredImageAttachments"
-        :key="attachment.id"
-        class="relative group/image w-[72px] h-[72px]"
-      >
-        <img
-          class="object-cover w-[72px] h-[72px] rounded-lg"
-          :src="attachment.thumb"
-        />
-        <Button
-          variant="ghost"
-          icon="i-lucide-trash"
-          color="slate"
-          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
-          @click="removeAttachment(attachment.resource.id)"
-        />
-      </div>
-    </div>
-    <div
-      v-if="filteredNonImageAttachments.length > 0"
-      class="flex flex-wrap gap-3"
-    >
-      <div
-        v-for="attachment in filteredNonImageAttachments"
-        :key="attachment.id"
-        class="max-w-[300px] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
-      >
-        <span class="text-sm font-medium text-n-slate-11">
-          {{ fileNameWithEllipsis(attachment.resource) }}
-        </span>
-        <Button
-          variant="ghost"
-          icon="i-lucide-x"
-          color="slate"
-          size="xs"
-          class="shrink-0 !h-5 !w-5"
-          @click="removeAttachment(attachment.resource.id)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
@@ -1,351 +0,0 @@
-<script setup>
-import { reactive, ref, computed } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { required, requiredIf } from '@vuelidate/validators';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import {
-  appendSignature,
-  removeSignature,
-  extractTextFromMarkdown,
-} from 'dashboard/helper/editorHelper';
-import {
-  buildContactableInboxesList,
-  prepareNewMessagePayload,
-  prepareWhatsAppMessagePayload,
-} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
-
-import ContactSelector from './ContactSelector.vue';
-import InboxSelector from './InboxSelector.vue';
-import EmailOptions from './EmailOptions.vue';
-import MessageEditor from './MessageEditor.vue';
-import ActionButtons from './ActionButtons.vue';
-import InboxEmptyState from './InboxEmptyState.vue';
-import AttachmentPreviews from './AttachmentPreviews.vue';
-
-const props = defineProps({
-  contacts: { type: Array, default: () => [] },
-  contactId: { type: String, default: null },
-  selectedContact: { type: Object, default: null },
-  targetInbox: { type: Object, default: null },
-  currentUser: { type: Object, default: null },
-  isCreatingContact: { type: Boolean, default: false },
-  isFetchingInboxes: { type: Boolean, default: false },
-  isLoading: { type: Boolean, default: false },
-  isDirectUploadsEnabled: { type: Boolean, default: false },
-  contactConversationsUiFlags: { type: Object, default: null },
-  contactsUiFlags: { type: Object, default: null },
-  messageSignature: { type: String, default: '' },
-  sendWithSignature: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-  'searchContacts',
-  'discard',
-  'updateSelectedContact',
-  'updateTargetInbox',
-  'clearSelectedContact',
-  'createConversation',
-]);
-
-const showContactsDropdown = ref(false);
-const showInboxesDropdown = ref(false);
-const showCcEmailsDropdown = ref(false);
-const showBccEmailsDropdown = ref(false);
-
-const isCreating = computed(() => props.contactConversationsUiFlags.isCreating);
-
-const state = reactive({
-  message: '',
-  subject: '',
-  ccEmails: '',
-  bccEmails: '',
-  attachedFiles: [],
-});
-
-const inboxTypes = computed(() => ({
-  isEmail: props.targetInbox?.channelType === INBOX_TYPES.EMAIL,
-  isTwilio: props.targetInbox?.channelType === INBOX_TYPES.TWILIO,
-  isWhatsapp: props.targetInbox?.channelType === INBOX_TYPES.WHATSAPP,
-  isWebWidget: props.targetInbox?.channelType === INBOX_TYPES.WEB,
-  isApi: props.targetInbox?.channelType === INBOX_TYPES.API,
-  isEmailOrWebWidget:
-    props.targetInbox?.channelType === INBOX_TYPES.EMAIL ||
-    props.targetInbox?.channelType === INBOX_TYPES.WEB,
-  isTwilioSMS:
-    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
-    props.targetInbox?.medium === 'sms',
-}));
-
-const whatsappMessageTemplates = computed(() =>
-  Object.keys(props.targetInbox?.messageTemplates || {}).length
-    ? props.targetInbox.messageTemplates
-    : []
-);
-
-const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
-
-const validationRules = computed(() => ({
-  selectedContact: { required },
-  targetInbox: { required },
-  message: { required: requiredIf(!inboxTypes.value.isWhatsapp) },
-  subject: { required: requiredIf(inboxTypes.value.isEmail) },
-}));
-
-const v$ = useVuelidate(validationRules, {
-  selectedContact: computed(() => props.selectedContact),
-  targetInbox: computed(() => props.targetInbox),
-  message: computed(() => state.message),
-  subject: computed(() => state.subject),
-});
-
-const validationStates = computed(() => ({
-  isContactInvalid:
-    v$.value.selectedContact.$dirty && v$.value.selectedContact.$invalid,
-  isInboxInvalid: v$.value.targetInbox.$dirty && v$.value.targetInbox.$invalid,
-  isSubjectInvalid: v$.value.subject.$dirty && v$.value.subject.$invalid,
-  isMessageInvalid: v$.value.message.$dirty && v$.value.message.$invalid,
-}));
-
-const newMessagePayload = () => {
-  const { message, subject, ccEmails, bccEmails, attachedFiles } = state;
-  return prepareNewMessagePayload({
-    targetInbox: props.targetInbox,
-    selectedContact: props.selectedContact,
-    message,
-    subject,
-    ccEmails,
-    bccEmails,
-    currentUser: props.currentUser,
-    attachedFiles,
-    directUploadsEnabled: props.isDirectUploadsEnabled,
-  });
-};
-
-const contactableInboxesList = computed(() => {
-  return buildContactableInboxesList(props.selectedContact?.contactInboxes);
-});
-
-const showNoInboxAlert = computed(() => {
-  return (
-    props.selectedContact &&
-    contactableInboxesList.value.length === 0 &&
-    !props.contactsUiFlags.isFetchingInboxes &&
-    !props.isFetchingInboxes
-  );
-});
-
-const isAnyDropdownActive = computed(() => {
-  return (
-    showContactsDropdown.value ||
-    showInboxesDropdown.value ||
-    showCcEmailsDropdown.value ||
-    showBccEmailsDropdown.value
-  );
-});
-
-const handleContactSearch = value => {
-  showContactsDropdown.value = true;
-  emit('searchContacts', {
-    keys: ['email', 'phone_number', 'name'],
-    query: value,
-  });
-};
-
-const handleDropdownUpdate = (type, value) => {
-  if (type === 'cc') {
-    showCcEmailsDropdown.value = value;
-  } else if (type === 'bcc') {
-    showBccEmailsDropdown.value = value;
-  } else {
-    showContactsDropdown.value = value;
-  }
-};
-
-const searchCcEmails = value => {
-  showCcEmailsDropdown.value = true;
-  emit('searchContacts', { keys: ['email'], query: value });
-};
-
-const searchBccEmails = value => {
-  showBccEmailsDropdown.value = true;
-  emit('searchContacts', { keys: ['email'], query: value });
-};
-
-const setSelectedContact = async ({ value, action, ...rest }) => {
-  v$.value.$reset();
-  emit('updateSelectedContact', { value, action, ...rest });
-  showContactsDropdown.value = false;
-  showInboxesDropdown.value = true;
-};
-
-const handleInboxAction = ({ value, action, ...rest }) => {
-  v$.value.$reset();
-  emit('updateTargetInbox', { ...rest });
-  showInboxesDropdown.value = false;
-  state.attachedFiles = [];
-};
-
-const removeTargetInbox = value => {
-  v$.value.$reset();
-  // Remove the signature from message content
-  // Based on the Advance Editor (used in isEmailOrWebWidget) and Plain editor(all other inboxes except WhatsApp)
-  if (props.sendWithSignature) {
-    const signatureToRemove = inboxTypes.value.isEmailOrWebWidget
-      ? props.messageSignature
-      : extractTextFromMarkdown(props.messageSignature);
-    state.message = removeSignature(state.message, signatureToRemove);
-  }
-  emit('updateTargetInbox', value);
-  state.attachedFiles = [];
-};
-
-const clearSelectedContact = () => {
-  emit('clearSelectedContact');
-  state.attachedFiles = [];
-};
-
-const onClickInsertEmoji = emoji => {
-  state.message += emoji;
-};
-
-const handleAddSignature = signature => {
-  state.message = appendSignature(state.message, signature);
-};
-
-const handleRemoveSignature = signature => {
-  state.message = removeSignature(state.message, signature);
-};
-
-const handleAttachFile = files => {
-  state.attachedFiles = files;
-};
-
-const clearForm = () => {
-  Object.assign(state, {
-    message: '',
-    subject: '',
-    ccEmails: '',
-    bccEmails: '',
-    attachedFiles: [],
-  });
-  v$.value.$reset();
-};
-
-const handleSendMessage = async () => {
-  const isValid = await v$.value.$validate();
-  if (!isValid) return;
-
-  try {
-    const success = await emit('createConversation', {
-      payload: newMessagePayload(),
-      isFromWhatsApp: false,
-    });
-    if (success) {
-      clearForm();
-    }
-  } catch (error) {
-    // Form will not be cleared if conversation creation fails
-  }
-};
-
-const handleSendWhatsappMessage = async ({ message, templateParams }) => {
-  const whatsappMessagePayload = prepareWhatsAppMessagePayload({
-    targetInbox: props.targetInbox,
-    selectedContact: props.selectedContact,
-    message,
-    templateParams,
-    currentUser: props.currentUser,
-  });
-  await emit('createConversation', {
-    payload: whatsappMessagePayload,
-    isFromWhatsApp: true,
-  });
-};
-</script>
-
-<template>
-  <div
-    class="w-[670px] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
-  >
-    <ContactSelector
-      :contacts="contacts"
-      :selected-contact="selectedContact"
-      :show-contacts-dropdown="showContactsDropdown"
-      :is-loading="isLoading"
-      :is-creating-contact="isCreatingContact"
-      :contact-id="contactId"
-      :contactable-inboxes-list="contactableInboxesList"
-      :show-inboxes-dropdown="showInboxesDropdown"
-      :has-errors="validationStates.isContactInvalid"
-      @search-contacts="handleContactSearch"
-      @set-selected-contact="setSelectedContact"
-      @clear-selected-contact="clearSelectedContact"
-      @update-dropdown="handleDropdownUpdate"
-    />
-    <InboxEmptyState v-if="showNoInboxAlert" />
-    <InboxSelector
-      v-else
-      :target-inbox="targetInbox"
-      :selected-contact="selectedContact"
-      :show-inboxes-dropdown="showInboxesDropdown"
-      :contactable-inboxes-list="contactableInboxesList"
-      :has-errors="validationStates.isInboxInvalid"
-      @update-inbox="removeTargetInbox"
-      @toggle-dropdown="showInboxesDropdown = $event"
-      @handle-inbox-action="handleInboxAction"
-    />
-
-    <EmailOptions
-      v-if="inboxTypes.isEmail"
-      v-model:cc-emails="state.ccEmails"
-      v-model:bcc-emails="state.bccEmails"
-      v-model:subject="state.subject"
-      :contacts="contacts"
-      :show-cc-emails-dropdown="showCcEmailsDropdown"
-      :show-bcc-emails-dropdown="showBccEmailsDropdown"
-      :is-loading="isLoading"
-      :has-errors="validationStates.isSubjectInvalid"
-      @search-cc-emails="searchCcEmails"
-      @search-bcc-emails="searchBccEmails"
-      @update-dropdown="handleDropdownUpdate"
-    />
-
-    <MessageEditor
-      v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
-      v-model="state.message"
-      :message-signature="messageSignature"
-      :send-with-signature="sendWithSignature"
-      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
-      :has-errors="validationStates.isMessageInvalid"
-      :has-attachments="state.attachedFiles.length > 0"
-    />
-
-    <AttachmentPreviews
-      v-if="state.attachedFiles.length > 0"
-      :attachments="state.attachedFiles"
-      @update:attachments="state.attachedFiles = $event"
-    />
-
-    <ActionButtons
-      :attached-files="state.attachedFiles"
-      :is-whatsapp-inbox="inboxTypes.isWhatsapp"
-      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
-      :is-twilio-sms-inbox="inboxTypes.isTwilioSMS"
-      :message-templates="whatsappMessageTemplates"
-      :channel-type="inboxChannelType"
-      :is-loading="isCreating"
-      :disable-send-button="isCreating"
-      :has-selected-inbox="!!targetInbox"
-      :has-no-inbox="showNoInboxAlert"
-      :is-dropdown-active="isAnyDropdownActive"
-      :message-signature="messageSignature"
-      @insert-emoji="onClickInsertEmoji"
-      @add-signature="handleAddSignature"
-      @remove-signature="handleRemoveSignature"
-      @attach-file="handleAttachFile"
-      @discard="$emit('discard')"
-      @send-message="handleSendMessage"
-      @send-whatsapp-message="handleSendWhatsappMessage"
-    />
-  </div>
-</template>
@@ -1,154 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { INPUT_TYPES } from 'dashboard/components-next/taginput/helper/tagInputHelper.js';
-
-import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  contacts: {
-    type: Array,
-    required: true,
-  },
-  selectedContact: {
-    type: Object,
-    default: null,
-  },
-  showContactsDropdown: {
-    type: Boolean,
-    required: true,
-  },
-  isLoading: {
-    type: Boolean,
-    required: true,
-  },
-  isCreatingContact: {
-    type: Boolean,
-    required: true,
-  },
-  contactId: {
-    type: String,
-    default: null,
-  },
-  contactableInboxesList: {
-    type: Array,
-    default: () => [],
-  },
-  showInboxesDropdown: {
-    type: Boolean,
-    required: true,
-  },
-  hasErrors: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'searchContacts',
-  'setSelectedContact',
-  'clearSelectedContact',
-  'updateDropdown',
-]);
-
-const i18nPrefix = 'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR';
-const { t } = useI18n();
-
-const inputType = ref(INPUT_TYPES.EMAIL);
-
-const contactsList = computed(() => {
-  return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
-    id,
-    label: email ? `${name} (${email})` : name,
-    value: id,
-    thumbnail: { name, src: thumbnail },
-    ...rest,
-    name,
-    email,
-    action: 'contact',
-  }));
-});
-
-const selectedContactLabel = computed(() => {
-  const { name, email = '', phoneNumber = '' } = props.selectedContact || {};
-  if (email) {
-    return `${name} (${email})`;
-  }
-  if (phoneNumber) {
-    return `${name} (${phoneNumber})`;
-  }
-  return name || '';
-});
-
-const errorClass = computed(() => {
-  return props.hasErrors
-    ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
-    : '';
-});
-
-const handleInput = value => {
-  // Update input type based on whether input starts with '+'
-  // If it does, set input type to 'tel'
-  // Otherwise, set input type to 'email'
-  inputType.value = value.startsWith('+') ? INPUT_TYPES.TEL : INPUT_TYPES.EMAIL;
-  emit('searchContacts', value);
-};
-</script>
-
-<template>
-  <div class="relative flex-1 px-4 py-3 overflow-y-visible">
-    <div class="flex items-baseline w-full gap-3 min-h-7">
-      <label class="text-sm font-medium text-n-slate-11 whitespace-nowrap">
-        {{ t(`${i18nPrefix}.LABEL`) }}
-      </label>
-
-      <div
-        v-if="isCreatingContact"
-        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
-      >
-        <span class="text-sm truncate text-n-slate-12">
-          {{ t(`${i18nPrefix}.CONTACT_CREATING`) }}
-        </span>
-      </div>
-      <div
-        v-else-if="selectedContact"
-        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
-      >
-        <span class="text-sm truncate text-n-slate-12">
-          {{
-            isCreatingContact
-              ? t(`${i18nPrefix}.CONTACT_CREATING`)
-              : selectedContactLabel
-          }}
-        </span>
-        <Button
-          variant="ghost"
-          icon="i-lucide-x"
-          color="slate"
-          :disabled="contactId"
-          size="xs"
-          @click="emit('clearSelectedContact')"
-        />
-      </div>
-      <TagInput
-        v-else
-        :placeholder="t(`${i18nPrefix}.TAG_INPUT_PLACEHOLDER`)"
-        mode="single"
-        :menu-items="contactsList"
-        :show-dropdown="showContactsDropdown"
-        :is-loading="isLoading"
-        :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
-        allow-create
-        :type="inputType"
-        class="flex-1 min-h-7"
-        :class="errorClass"
-        focus-on-mount
-        @input="handleInput"
-        @on-click-outside="emit('updateDropdown', 'contacts', false)"
-        @add="emit('setSelectedContact', $event)"
-        @remove="emit('clearSelectedContact')"
-      />
-    </div>
-  </div>
-</template>
@@ -1,139 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-
-const props = defineProps({
-  contacts: { type: Array, required: true },
-  showCcEmailsDropdown: { type: Boolean, required: false },
-  showBccEmailsDropdown: { type: Boolean, required: false },
-  isLoading: { type: Boolean, default: false },
-  hasErrors: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-  'searchCcEmails',
-  'searchBccEmails',
-  'updateDropdown',
-]);
-
-const i18nPrefix = `COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS`;
-
-const showBccInput = ref(false);
-
-const toggleBccInput = () => {
-  showBccInput.value = !showBccInput.value;
-};
-
-const subject = defineModel('subject', { type: String, default: '' });
-const ccEmails = defineModel('ccEmails', { type: String, default: '' });
-const bccEmails = defineModel('bccEmails', { type: String, default: '' });
-
-const { t } = useI18n();
-
-// Convert string to array for TagInput
-const ccEmailsArray = computed(() =>
-  props.ccEmails ? props.ccEmails.split(',').map(email => email.trim()) : []
-);
-
-const bccEmailsArray = computed(() =>
-  props.bccEmails ? props.bccEmails.split(',').map(email => email.trim()) : []
-);
-
-const contactEmailsList = computed(() => {
-  return props.contacts?.map(({ name, id, email }) => ({
-    id,
-    label: email,
-    email,
-    thumbnail: { name: name, src: '' },
-    value: id,
-    action: 'email',
-  }));
-});
-
-// Handle updates from TagInput and convert array back to string
-const handleCcUpdate = value => {
-  ccEmails.value = value.join(',');
-};
-
-const handleBccUpdate = value => {
-  bccEmails.value = value.join(',');
-};
-
-const inputClass = computed(() => {
-  return props.hasErrors
-    ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
-    : '';
-});
-</script>
-
-<template>
-  <div class="flex flex-col divide-y divide-n-strong">
-    <div class="flex items-baseline flex-1 w-full h-8 gap-3 px-4 py-3">
-      <InlineInput
-        v-model="subject"
-        :placeholder="t(`${i18nPrefix}.SUBJECT_PLACEHOLDER`)"
-        :label="t(`${i18nPrefix}.SUBJECT_LABEL`)"
-        focus-on-mount
-        :custom-input-class="inputClass"
-      />
-    </div>
-    <div class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8">
-      <label
-        class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
-      >
-        {{ t(`${i18nPrefix}.CC_LABEL`) }}
-      </label>
-      <div class="flex items-center w-full gap-3 min-h-7">
-        <TagInput
-          :model-value="ccEmailsArray"
-          :placeholder="t(`${i18nPrefix}.CC_PLACEHOLDER`)"
-          :menu-items="contactEmailsList"
-          :show-dropdown="showCcEmailsDropdown"
-          :is-loading="isLoading"
-          type="email"
-          class="flex-1 min-h-7"
-          @focus="emit('updateDropdown', 'cc', true)"
-          @input="emit('searchCcEmails', $event)"
-          @on-click-outside="emit('updateDropdown', 'cc', false)"
-          @update:model-value="handleCcUpdate"
-        />
-        <Button
-          :label="t(`${i18nPrefix}.BCC_BUTTON`)"
-          variant="ghost"
-          size="sm"
-          color="slate"
-          class="flex-shrink-0"
-          @click="toggleBccInput"
-        />
-      </div>
-    </div>
-    <div
-      v-if="showBccInput"
-      class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8"
-    >
-      <label
-        class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
-      >
-        {{ t(`${i18nPrefix}.BCC_LABEL`) }}
-      </label>
-      <TagInput
-        :model-value="bccEmailsArray"
-        :placeholder="t(`${i18nPrefix}.BCC_PLACEHOLDER`)"
-        :menu-items="contactEmailsList"
-        :show-dropdown="showBccEmailsDropdown"
-        :is-loading="isLoading"
-        type="email"
-        class="flex-1 min-h-7"
-        focus-on-mount
-        @focus="emit('updateDropdown', 'bcc', true)"
-        @input="emit('searchBccEmails', $event)"
-        @on-click-outside="emit('updateDropdown', 'bcc', false)"
-        @update:model-value="handleBccUpdate"
-      />
-    </div>
-  </div>
-</template>
@@ -1,9 +0,0 @@
-<template>
-  <div
-    class="flex items-center w-full px-4 py-3 dark:bg-n-amber-11/15 bg-n-amber-3"
-  >
-    <span class="text-sm dark:text-n-amber-11 text-n-amber-11">
-      {{ $t('COMPOSE_NEW_CONVERSATION.FORM.NO_INBOX_ALERT') }}
-    </span>
-  </div>
-</template>
@@ -1,91 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { vOnClickOutside } from '@vueuse/components';
-import { generateLabelForContactableInboxesList } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  targetInbox: {
-    type: Object,
-    default: null,
-  },
-  selectedContact: {
-    type: Object,
-    default: null,
-  },
-  showInboxesDropdown: {
-    type: Boolean,
-    required: true,
-  },
-  contactableInboxesList: {
-    type: Array,
-    default: () => [],
-  },
-  hasErrors: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'updateInbox',
-  'toggleDropdown',
-  'handleInboxAction',
-]);
-
-const { t } = useI18n();
-
-const targetInboxLabel = computed(() => {
-  return generateLabelForContactableInboxesList(props.targetInbox);
-});
-</script>
-
-<template>
-  <div
-    class="flex items-center flex-1 w-full gap-3 px-4 py-3 overflow-y-visible"
-  >
-    <label class="mb-0.5 text-sm font-medium text-n-slate-11 whitespace-nowrap">
-      {{ t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.LABEL') }}
-    </label>
-    <div
-      v-if="targetInbox"
-      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate px-3 h-7 min-w-0"
-    >
-      <span class="text-sm truncate text-n-slate-12">
-        {{ targetInboxLabel }}
-      </span>
-      <Button
-        variant="ghost"
-        icon="i-lucide-x"
-        color="slate"
-        size="xs"
-        class="flex-shrink-0"
-        @click="emit('updateInbox', null)"
-      />
-    </div>
-    <div
-      v-else
-      v-on-click-outside="() => emit('toggleDropdown', false)"
-      class="relative flex items-center h-7"
-    >
-      <Button
-        :label="t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.BUTTON')"
-        variant="link"
-        size="sm"
-        :color="hasErrors ? 'ruby' : 'slate'"
-        :disabled="!selectedContact"
-        class="hover:!no-underline"
-        @click="emit('toggleDropdown', !showInboxesDropdown)"
-      />
-      <DropdownMenu
-        v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
-        :menu-items="contactableInboxesList"
-        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
-        @action="emit('handleInboxAction', $event)"
-      />
-    </div>
-  </div>
-</template>
@@ -1,122 +0,0 @@
-<script setup>
-import { ref, watch, computed, nextTick } from 'vue';
-import { useI18n } from 'vue-i18n';
-import {
-  appendSignature,
-  extractTextFromMarkdown,
-  removeSignature,
-} from 'dashboard/helper/editorHelper';
-
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import CannedResponse from 'dashboard/components/widgets/conversation/CannedResponse.vue';
-
-const props = defineProps({
-  isEmailOrWebWidgetInbox: { type: Boolean, required: true },
-  hasErrors: { type: Boolean, default: false },
-  hasAttachments: { type: Boolean, default: false },
-  sendWithSignature: { type: Boolean, default: false },
-  messageSignature: { type: String, default: '' },
-});
-
-const { t } = useI18n();
-
-const modelValue = defineModel({
-  type: String,
-  default: '',
-});
-
-const state = ref({
-  hasSlashCommand: false,
-  showMentions: false,
-  mentionSearchKey: '',
-});
-
-const plainTextSignature = computed(() =>
-  extractTextFromMarkdown(props.messageSignature)
-);
-
-watch(
-  modelValue,
-  newValue => {
-    if (props.isEmailOrWebWidgetInbox) return;
-
-    const bodyWithoutSignature = newValue
-      ? removeSignature(newValue, plainTextSignature.value)
-      : '';
-
-    // Check if message starts with slash
-    const startsWithSlash = bodyWithoutSignature.startsWith('/');
-
-    // Update slash command and mentions state
-    state.value = {
-      ...state.value,
-      hasSlashCommand: startsWithSlash,
-      showMentions: startsWithSlash,
-      mentionSearchKey: startsWithSlash ? bodyWithoutSignature.slice(1) : '',
-    };
-  },
-  { immediate: true }
-);
-
-const hideMention = () => {
-  state.value.showMentions = false;
-};
-
-const replaceText = async message => {
-  // Only append signature on replace if sendWithSignature is true
-  const finalMessage = props.sendWithSignature
-    ? appendSignature(message, plainTextSignature.value)
-    : message;
-
-  await nextTick();
-  modelValue.value = finalMessage;
-};
-</script>
-
-<template>
-  <div class="flex-1 h-full" :class="[!hasAttachments && 'min-h-[200px]']">
-    <template v-if="isEmailOrWebWidgetInbox">
-      <Editor
-        v-model="modelValue"
-        :placeholder="
-          t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
-        "
-        class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
-        :class="
-          hasErrors
-            ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
-            : ''
-        "
-        enable-variables
-        :show-character-count="false"
-      />
-    </template>
-    <template v-else>
-      <TextArea
-        v-model="modelValue"
-        :placeholder="
-          t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
-        "
-        class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
-        :custom-text-area-class="
-          hasErrors
-            ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
-            : ''
-        "
-        auto-height
-        allow-signature
-        :signature="messageSignature"
-        :send-with-signature="sendWithSignature"
-      >
-        <CannedResponse
-          v-if="state.showMentions && state.hasSlashCommand"
-          v-on-clickaway="hideMention"
-          class="normal-editor__canned-box"
-          :search-key="state.mentionSearchKey"
-          @replace="replaceText"
-        />
-      </TextArea>
-    </template>
-  </div>
-</template>
@@ -1,126 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
-
-const props = defineProps({
-  messageTemplates: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['sendMessage']);
-
-const { t } = useI18n();
-
-// TODO: Remove this when we support all formats
-const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
-
-const searchQuery = ref('');
-const selectedTemplate = ref(null);
-
-const showTemplatesMenu = ref(false);
-
-const whatsAppTemplateMessages = computed(() => {
-  // Add null check and ensure it's an array
-  const templates = Array.isArray(props.messageTemplates)
-    ? props.messageTemplates
-    : [];
-
-  // TODO: Remove the last filter when we support all formats
-  return templates
-    .filter(template => template?.status?.toLowerCase() === 'approved')
-    .filter(template => {
-      return template?.components?.every(component => {
-        return !formatsToRemove.includes(component.format);
-      });
-    });
-});
-
-const filteredTemplates = computed(() => {
-  return whatsAppTemplateMessages.value.filter(template =>
-    template.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  );
-});
-
-const getTemplateBody = template => {
-  return template.components.find(component => component.type === 'BODY').text;
-};
-
-const handleTriggerClick = () => {
-  searchQuery.value = '';
-  showTemplatesMenu.value = !showTemplatesMenu.value;
-};
-
-const handleTemplateClick = template => {
-  selectedTemplate.value = template;
-  showTemplatesMenu.value = false;
-};
-
-const handleBack = () => {
-  selectedTemplate.value = null;
-  showTemplatesMenu.value = true;
-};
-
-const handleSendMessage = template => {
-  emit('sendMessage', template);
-  selectedTemplate.value = null;
-};
-</script>
-
-<template>
-  <div class="relative">
-    <Button
-      icon="i-ri-whatsapp-line"
-      :label="t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.LABEL')"
-      color="slate"
-      size="sm"
-      :disabled="selectedTemplate"
-      class="!text-xs font-medium"
-      @click="handleTriggerClick"
-    />
-    <div
-      v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[350px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-    >
-      <div class="relative w-full">
-        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
-        <input
-          v-model="searchQuery"
-          type="search"
-          :placeholder="
-            t(
-              'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
-            )
-          "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
-        />
-      </div>
-      <div
-        v-for="template in filteredTemplates"
-        :key="template.id"
-        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
-        @click="handleTemplateClick(template)"
-      >
-        <span class="text-sm text-n-slate-12">{{ template.name }}</span>
-        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
-          {{ getTemplateBody(template) }}
-        </p>
-      </div>
-      <template v-if="filteredTemplates.length === 0">
-        <p class="w-full pt-2 text-sm text-n-slate-11">
-          {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
-        </p>
-      </template>
-    </div>
-    <WhatsappTemplateParser
-      v-if="selectedTemplate"
-      :template="selectedTemplate"
-      @send-message="handleSendMessage"
-      @back="handleBack"
-    />
-  </div>
-</template>
@@ -1,176 +0,0 @@
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { requiredIf } from '@vuelidate/validators';
-import { useI18n } from 'vue-i18n';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  template: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'back']);
-
-const { t } = useI18n();
-
-const processedParams = ref({});
-
-const templateName = computed(() => {
-  return props.template?.name || '';
-});
-
-const templateString = computed(() => {
-  return props.template?.components?.find(
-    component => component.type === 'BODY'
-  ).text;
-});
-
-const processVariable = str => {
-  return str.replace(/{{|}}/g, '');
-};
-
-const processedString = computed(() => {
-  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
-    const variableKey = processVariable(variable);
-    return processedParams.value[variableKey] || `{{${variable}}}`;
-  });
-});
-
-const processedStringWithVariableHighlight = computed(() => {
-  const variables = templateString.value.match(/{{([^}]+)}}/g) || [];
-
-  return variables.reduce((result, variable) => {
-    const variableKey = processVariable(variable);
-    const value = processedParams.value[variableKey] || variable;
-    return result.replace(
-      variable,
-      `<span class="break-all text-n-slate-12">${value}</span>`
-    );
-  }, templateString.value);
-});
-
-const rules = computed(() => {
-  const paramRules = {};
-  Object.keys(processedParams.value).forEach(key => {
-    paramRules[key] = { required: requiredIf(true) };
-  });
-  return {
-    processedParams: paramRules,
-  };
-});
-
-const v$ = useVuelidate(rules, { processedParams });
-
-const getFieldErrorType = key => {
-  if (!v$.value.processedParams[key]?.$error) return 'info';
-  return 'error';
-};
-
-const generateVariables = () => {
-  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
-  if (!matchedVariables) return;
-
-  const finalVars = matchedVariables.map(i => processVariable(i));
-  processedParams.value = finalVars.reduce((acc, variable) => {
-    acc[variable] = '';
-    return acc;
-  }, {});
-};
-
-const sendMessage = async () => {
-  const isValid = await v$.value.$validate();
-  if (!isValid) return;
-
-  const payload = {
-    message: processedString.value,
-    templateParams: {
-      name: props.template.name,
-      category: props.template.category,
-      language: props.template.language,
-      namespace: props.template.namespace,
-      processed_params: processedParams.value,
-    },
-  };
-  emit('sendMessage', payload);
-};
-
-onMounted(() => {
-  generateVariables();
-});
-</script>
-
-<template>
-  <div
-    class="absolute top-full mt-1.5 max-h-[500px] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-  >
-    <span class="text-sm text-n-slate-12">
-      {{
-        t(
-          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.TEMPLATE_NAME',
-          { templateName: templateName }
-        )
-      }}
-    </span>
-    <p
-      class="mb-0 text-sm text-n-slate-11"
-      v-html="processedStringWithVariableHighlight"
-    />
-
-    <span
-      v-if="Object.keys(processedParams).length"
-      class="text-sm font-medium text-n-slate-12"
-    >
-      {{
-        t(
-          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.VARIABLES'
-        )
-      }}
-    </span>
-
-    <div
-      v-for="(variable, key) in processedParams"
-      :key="key"
-      class="flex items-center w-full gap-2"
-    >
-      <span
-        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
-      >
-        {{ key }}
-      </span>
-      <Input
-        v-model="processedParams[key]"
-        custom-input-class="!h-8 w-full !bg-transparent"
-        class="w-full"
-        :message-type="getFieldErrorType(key)"
-      />
-    </div>
-
-    <div class="flex items-end justify-between w-full gap-3 h-14">
-      <Button
-        :label="
-          t(
-            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
-          )
-        "
-        color="slate"
-        variant="faded"
-        class="w-full font-medium"
-        @click="emit('back')"
-      />
-      <Button
-        :label="
-          t(
-            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
-          )
-        "
-        class="w-full font-medium"
-        @click="sendMessage"
-      />
-    </div>
-  </div>
-</template>
@@ -1,92 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { contacts, activeContact, emailInbox, currentUser } from './fixtures';
-import ComposeNewConversationForm from '../ComposeNewConversationForm.vue';
-
-const selectedContact = ref(activeContact);
-const targetInbox = ref(emailInbox);
-
-// Event handlers
-const onSearchContacts = query => {
-  console.log('Searching contacts:', query);
-};
-
-const onUpdateSelectedContact = contact => {
-  console.log('Selected contact updated:', contact);
-};
-
-const onUpdateTargetInbox = inbox => {
-  console.log('Target inbox updated:', inbox);
-  targetInbox.value = inbox;
-  console.log('Target inbox updated:', inbox);
-};
-
-const onClearSelectedContact = () => {
-  console.log('Contact cleared');
-};
-
-const onCreateConversation = payload => {
-  console.log('Creating conversation:', payload);
-};
-
-const onDiscard = () => {
-  console.log('Form discarded');
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Compose/ComposeNewConversationForm"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="With all props">
-      <div class="h-[600px] w-full relative">
-        <ComposeNewConversationForm
-          :contacts="contacts"
-          contact-id=""
-          :is-loading="false"
-          :current-user="currentUser"
-          :selected-contact="selectedContact"
-          :target-inbox="targetInbox"
-          :is-creating-contact="false"
-          is-fetching-inboxes
-          is-direct-uploads-enabled
-          :contact-conversations-ui-flags="{ isCreating: false }"
-          :contacts-ui-flags="{ isFetching: false }"
-          class="!top-0"
-          @search-contacts="onSearchContacts"
-          @update-selected-contact="onUpdateSelectedContact"
-          @update-target-inbox="onUpdateTargetInbox"
-          @clear-selected-contact="onClearSelectedContact"
-          @create-conversation="onCreateConversation"
-          @discard="onDiscard"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With no target inbox">
-      <div class="h-[200px] w-full relative">
-        <ComposeNewConversationForm
-          :contacts="contacts"
-          contact-id=""
-          :is-loading="false"
-          :current-user="currentUser"
-          :selected-contact="{ ...selectedContact, contactInboxes: [] }"
-          :target-inbox="null"
-          :is-creating-contact="false"
-          :is-fetching-inboxes="false"
-          is-direct-uploads-enabled
-          :contact-conversations-ui-flags="{ isCreating: false }"
-          :contacts-ui-flags="{ isFetching: false }"
-          class="!top-0"
-          @search-contacts="onSearchContacts"
-          @update-selected-contact="onUpdateSelectedContact"
-          @update-target-inbox="onUpdateTargetInbox"
-          @clear-selected-contact="onClearSelectedContact"
-          @create-conversation="onCreateConversation"
-          @discard="onDiscard"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,168 +0,0 @@
-export const contacts = [
-  {
-    additionalAttributes: {
-      city: 'kerala',
-      country: 'India',
-      description: 'Curious about the web. ',
-      companyName: 'Chatwoot',
-      countryCode: '',
-      socialProfiles: {
-        github: 'abozler',
-        twitter: 'ozler',
-        facebook: 'abozler',
-        linkedin: 'abozler',
-        instagram: 'ozler',
-      },
-    },
-    availabilityStatus: 'offline',
-    email: 'ozler@chatwoot.com',
-    id: 29,
-    name: 'Abraham Ozlers',
-    phoneNumber: '+246232222222',
-    identifier: null,
-    thumbnail:
-      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c20b627b384f5981112e949b8414cd4d3e5912ee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/Avatar%201.20.41%E2%80%AFAM.png',
-    customAttributes: {
-      dateContact: '2024-02-01T00:00:00.000Z',
-      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
-      listContact: 'Not spam',
-      numberContact: '12',
-    },
-    lastActivityAt: 1712127410,
-    createdAt: 1712127389,
-  },
-];
-
-export const activeContact = {
-  email: 'ozler@chatwoot.com',
-  id: 29,
-  label: 'Abraham Ozlers (ozler@chatwoot.com)',
-  name: 'Abraham Ozlers',
-  thumbnail: {
-    name: 'Abraham Ozlers',
-    src: 'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c20b627b384f5981112e949b8414cd4d3e5912ee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/Avatar%201.20.41%E2%80%AFAM.png',
-  },
-  contactInboxes: [
-    {
-      id: 7,
-      label: 'PaperLayer Email (testba@paperlayer.test)',
-      name: 'PaperLayer Email',
-      email: 'testba@paperlayer.test',
-      channelType: 'Channel::Email',
-    },
-    {
-      id: 8,
-      label: 'PaperLayer WhatsApp',
-      name: 'PaperLayer WhatsApp',
-      sourceId: '123456',
-      phoneNumber: '+1223233434',
-      channelType: 'Channel::Whatsapp',
-      messageTemplates: [
-        {
-          id: '1',
-          name: 'shipment_confirmation',
-          status: 'APPROVED',
-          category: 'UTILITY',
-          language: 'en_US',
-          components: [
-            {
-              text: '{{1}}, great news! Your order {{2}} has shipped.\n\nTracking #: {{3}}\nEstimated delivery: {{4}}\n\nWe will provide updates until delivery.',
-              type: 'BODY',
-              example: {
-                bodyText: [['John', '#12345', 'ZK4539O2311J', 'Jan 1, 2024']],
-              },
-            },
-            {
-              type: 'BUTTONS',
-              buttons: [
-                {
-                  url: 'https://www.example.com/',
-                  text: 'Track shipment',
-                  type: 'URL',
-                },
-              ],
-            },
-          ],
-          parameterFormat: 'POSITIONAL',
-          libraryTemplateName: 'shipment_confirmation_2',
-        },
-        {
-          id: '2',
-          name: 'otp_test',
-          status: 'APPROVED',
-          category: 'AUTHENTICATION',
-          language: 'en_US',
-          components: [
-            {
-              text: 'Use code *{{1}}* to authorize your transaction.',
-              type: 'BODY',
-              example: {
-                bodyText: [['123456']],
-              },
-            },
-            {
-              type: 'BUTTONS',
-              buttons: [
-                {
-                  url: 'https://www.example.com/otp/code/?otp_type=ZERO_TAP&cta_display_name=Autofill&package_name=com.app&signature_hash=weew&code=otp{{1}}',
-                  text: 'Copy code',
-                  type: 'URL',
-                  example: [
-                    'https://www.example.com/otp/code/?otp_type=ZERO_TAP&cta_display_name=Autofill&package_name=com.app&signature_hash=weew&code=otp123456',
-                  ],
-                },
-              ],
-            },
-          ],
-          parameterFormat: 'POSITIONAL',
-          libraryTemplateName: 'verify_transaction_1',
-          messageSendTtlSeconds: 900,
-        },
-        {
-          id: '3',
-          name: 'hello_world',
-          status: 'APPROVED',
-          category: 'UTILITY',
-          language: 'en_US',
-          components: [
-            {
-              text: 'Hello World',
-              type: 'HEADER',
-              format: 'TEXT',
-            },
-            {
-              text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
-              type: 'BODY',
-            },
-            {
-              text: 'WhatsApp Business Platform sample message',
-              type: 'FOOTER',
-            },
-          ],
-          parameterFormat: 'POSITIONAL',
-        },
-      ],
-    },
-    {
-      id: 9,
-      label: 'PaperLayer API',
-      name: 'PaperLayer API',
-      email: '',
-      channelType: 'Channel::Api',
-    },
-  ],
-};
-
-export const emailInbox = {
-  id: 7,
-  label: 'PaperLayer Email (testba@paperlayer.test)',
-  name: 'PaperLayer Email',
-  email: 'testba@paperlayer.test',
-  channelType: 'Channel::Email',
-};
-
-export const currentUser = {
-  id: 1,
-  name: 'John Doe',
-  email: 'john@example.com',
-};
@@ -1,221 +0,0 @@
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-import camelcaseKeys from 'camelcase-keys';
-import ContactAPI from 'dashboard/api/contacts';
-
-const CHANNEL_PRIORITY = {
-  'Channel::Email': 1,
-  'Channel::Whatsapp': 2,
-  'Channel::Sms': 3,
-  'Channel::TwilioSms': 4,
-  'Channel::WebWidget': 5,
-  'Channel::Api': 6,
-};
-
-export const generateLabelForContactableInboxesList = ({
-  name,
-  email,
-  channelType,
-  phoneNumber,
-}) => {
-  if (channelType === INBOX_TYPES.EMAIL) {
-    return `${name} (${email})`;
-  }
-  if (
-    channelType === INBOX_TYPES.TWILIO ||
-    channelType === INBOX_TYPES.WHATSAPP
-  ) {
-    return `${name} (${phoneNumber})`;
-  }
-  return name;
-};
-
-const transformInbox = ({
-  name,
-  id,
-  email,
-  channelType,
-  phoneNumber,
-  ...rest
-}) => ({
-  id,
-  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
-  label: generateLabelForContactableInboxesList({
-    name,
-    email,
-    channelType,
-    phoneNumber,
-  }),
-  action: 'inbox',
-  value: id,
-  name,
-  email,
-  phoneNumber,
-  channelType,
-  ...rest,
-});
-
-export const compareInboxes = (a, b) => {
-  // Channels that have no priority defined should come at the end.
-  const priorityA = CHANNEL_PRIORITY[a.channelType] || 999;
-  const priorityB = CHANNEL_PRIORITY[b.channelType] || 999;
-
-  if (priorityA !== priorityB) {
-    return priorityA - priorityB;
-  }
-
-  const nameA = a.name || '';
-  const nameB = b.name || '';
-  return nameA.localeCompare(nameB);
-};
-
-export const buildContactableInboxesList = contactInboxes => {
-  if (!contactInboxes) return [];
-
-  return contactInboxes.map(transformInbox).sort(compareInboxes);
-};
-
-export const getCapitalizedNameFromEmail = email => {
-  const name = email.match(/^([^@]*)@/)?.[1] || email.split('@')[0];
-  return name.charAt(0).toUpperCase() + name.slice(1);
-};
-
-export const processContactableInboxes = inboxes => {
-  return inboxes.map(inbox => ({
-    ...inbox.inbox,
-    sourceId: inbox.sourceId,
-  }));
-};
-
-export const prepareAttachmentPayload = (
-  attachedFiles,
-  directUploadsEnabled
-) => {
-  const files = [];
-  attachedFiles.forEach(attachment => {
-    if (directUploadsEnabled) {
-      files.push(attachment.blobSignedId);
-    } else {
-      files.push(attachment.resource.file);
-    }
-  });
-  return files;
-};
-
-export const prepareNewMessagePayload = ({
-  targetInbox,
-  selectedContact,
-  message,
-  subject,
-  ccEmails,
-  bccEmails,
-  currentUser,
-  attachedFiles = [],
-  directUploadsEnabled = false,
-}) => {
-  const payload = {
-    inboxId: targetInbox.id,
-    sourceId: targetInbox.sourceId,
-    contactId: Number(selectedContact.id),
-    message: { content: message },
-    assigneeId: currentUser.id,
-  };
-
-  if (attachedFiles?.length) {
-    payload.files = prepareAttachmentPayload(
-      attachedFiles,
-      directUploadsEnabled
-    );
-  }
-
-  if (subject) {
-    payload.mailSubject = subject;
-  }
-
-  if (ccEmails) {
-    payload.message.cc_emails = ccEmails;
-  }
-
-  if (bccEmails) {
-    payload.message.bcc_emails = bccEmails;
-  }
-
-  return payload;
-};
-
-export const prepareWhatsAppMessagePayload = ({
-  targetInbox,
-  selectedContact,
-  message,
-  templateParams,
-  currentUser,
-}) => {
-  return {
-    inboxId: targetInbox.id,
-    sourceId: targetInbox.sourceId,
-    contactId: selectedContact.id,
-    message: { content: message, template_params: templateParams },
-    assigneeId: currentUser.id,
-  };
-};
-
-export const generateContactQuery = ({ keys = ['email'], query }) => {
-  return {
-    payload: keys.map(key => {
-      const filterPayload = {
-        attribute_key: key,
-        filter_operator: 'contains',
-        values: [query],
-        attribute_model: 'standard',
-      };
-      if (keys.findIndex(k => k === key) !== keys.length - 1) {
-        filterPayload.query_operator = 'or';
-      }
-      return filterPayload;
-    }),
-  };
-};
-
-// API Calls
-export const searchContacts = async ({ keys, query }) => {
-  const {
-    data: { payload },
-  } = await ContactAPI.filter(
-    undefined,
-    'name',
-    generateContactQuery({ keys, query })
-  );
-  const camelCasedPayload = camelcaseKeys(payload, { deep: true });
-  // Filter contacts that have either phone_number or email
-  const filteredPayload = camelCasedPayload?.filter(
-    contact => contact.phoneNumber || contact.email
-  );
-  return filteredPayload || [];
-};
-
-export const createNewContact = async input => {
-  const payload = {
-    name: input.startsWith('+')
-      ? input.slice(1) // Remove the '+' prefix if it exists
-      : getCapitalizedNameFromEmail(input),
-    ...(input.startsWith('+') ? { phone_number: input } : { email: input }),
-  };
-
-  const {
-    data: {
-      payload: { contact: newContact },
-    },
-  } = await ContactAPI.create(payload);
-
-  return camelcaseKeys(newContact, { deep: true });
-};
-
-export const fetchContactableInboxes = async contactId => {
-  const {
-    data: { payload: inboxes = [] },
-  } = await ContactAPI.getContactableInboxes(contactId);
-
-  const convertInboxesToCamelKeys = camelcaseKeys(inboxes, { deep: true });
-
-  return processContactableInboxes(convertInboxesToCamelKeys);
-};
@@ -1,558 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import ContactAPI from 'dashboard/api/contacts';
-import * as helpers from '../composeConversationHelper';
-
-vi.mock('dashboard/api/contacts');
-
-describe('composeConversationHelper', () => {
-  describe('generateLabelForContactableInboxesList', () => {
-    const contact = {
-      name: 'John Doe',
-      email: 'john@example.com',
-      phoneNumber: '+1234567890',
-    };
-
-    it('generates label for email inbox', () => {
-      expect(
-        helpers.generateLabelForContactableInboxesList({
-          ...contact,
-          channelType: INBOX_TYPES.EMAIL,
-        })
-      ).toBe('John Doe (john@example.com)');
-    });
-
-    it('generates label for twilio inbox', () => {
-      expect(
-        helpers.generateLabelForContactableInboxesList({
-          ...contact,
-          channelType: INBOX_TYPES.TWILIO,
-        })
-      ).toBe('John Doe (+1234567890)');
-    });
-
-    it('generates label for whatsapp inbox', () => {
-      expect(
-        helpers.generateLabelForContactableInboxesList({
-          ...contact,
-          channelType: INBOX_TYPES.WHATSAPP,
-        })
-      ).toBe('John Doe (+1234567890)');
-    });
-
-    it('generates label for other inbox types', () => {
-      expect(
-        helpers.generateLabelForContactableInboxesList({
-          ...contact,
-          channelType: 'Channel::Api',
-        })
-      ).toBe('John Doe');
-    });
-  });
-
-  describe('buildContactableInboxesList', () => {
-    it('returns empty array if no contact inboxes', () => {
-      expect(helpers.buildContactableInboxesList(null)).toEqual([]);
-      expect(helpers.buildContactableInboxesList(undefined)).toEqual([]);
-    });
-
-    it('builds list of contactable inboxes with correct format', () => {
-      const inboxes = [
-        {
-          id: 1,
-          name: 'Email Inbox',
-          email: 'support@example.com',
-          channelType: INBOX_TYPES.EMAIL,
-          phoneNumber: null,
-        },
-      ];
-
-      const result = helpers.buildContactableInboxesList(inboxes);
-      expect(result[0]).toMatchObject({
-        id: 1,
-        icon: 'i-ri-mail-line',
-        label: 'Email Inbox (support@example.com)',
-        action: 'inbox',
-        value: 1,
-        name: 'Email Inbox',
-        email: 'support@example.com',
-        channelType: INBOX_TYPES.EMAIL,
-      });
-    });
-  });
-
-  describe('getCapitalizedNameFromEmail', () => {
-    it('extracts and capitalizes name from email', () => {
-      expect(helpers.getCapitalizedNameFromEmail('john.doe@example.com')).toBe(
-        'John.doe'
-      );
-      expect(helpers.getCapitalizedNameFromEmail('jane@example.com')).toBe(
-        'Jane'
-      );
-    });
-  });
-
-  describe('processContactableInboxes', () => {
-    it('processes inboxes with correct structure', () => {
-      const inboxes = [
-        {
-          inbox: { id: 1, name: 'Inbox 1' },
-          sourceId: 'source1',
-        },
-      ];
-
-      const result = helpers.processContactableInboxes(inboxes);
-      expect(result[0]).toEqual({
-        id: 1,
-        name: 'Inbox 1',
-        sourceId: 'source1',
-      });
-    });
-  });
-
-  describe('prepareAttachmentPayload', () => {
-    it('prepares direct upload files', () => {
-      const files = [{ blobSignedId: 'signed1' }];
-      expect(helpers.prepareAttachmentPayload(files, true)).toEqual([
-        'signed1',
-      ]);
-    });
-
-    it('prepares regular files', () => {
-      const files = [{ resource: { file: 'file1' } }];
-      expect(helpers.prepareAttachmentPayload(files, false)).toEqual(['file1']);
-    });
-  });
-
-  describe('prepareNewMessagePayload', () => {
-    const baseParams = {
-      targetInbox: { id: 1, sourceId: 'source1' },
-      selectedContact: { id: '2' },
-      message: 'Hello',
-      currentUser: { id: 3 },
-    };
-
-    it('prepares basic message payload', () => {
-      const result = helpers.prepareNewMessagePayload(baseParams);
-      expect(result).toEqual({
-        inboxId: 1,
-        sourceId: 'source1',
-        contactId: 2,
-        message: { content: 'Hello' },
-        assigneeId: 3,
-      });
-    });
-
-    it('includes optional fields when provided', () => {
-      const result = helpers.prepareNewMessagePayload({
-        ...baseParams,
-        subject: 'Test',
-        ccEmails: 'cc@test.com',
-        bccEmails: 'bcc@test.com',
-        attachedFiles: [{ blobSignedId: 'file1' }],
-        directUploadsEnabled: true,
-      });
-
-      expect(result).toMatchObject({
-        mailSubject: 'Test',
-        message: {
-          content: 'Hello',
-          cc_emails: 'cc@test.com',
-          bcc_emails: 'bcc@test.com',
-        },
-        files: ['file1'],
-      });
-    });
-  });
-
-  describe('prepareWhatsAppMessagePayload', () => {
-    it('prepares whatsapp message payload', () => {
-      const params = {
-        targetInbox: { id: 1, sourceId: 'source1' },
-        selectedContact: { id: 2 },
-        message: 'Hello',
-        templateParams: { param1: 'value1' },
-        currentUser: { id: 3 },
-      };
-
-      const result = helpers.prepareWhatsAppMessagePayload(params);
-      expect(result).toEqual({
-        inboxId: 1,
-        sourceId: 'source1',
-        contactId: 2,
-        message: {
-          content: 'Hello',
-          template_params: { param1: 'value1' },
-        },
-        assigneeId: 3,
-      });
-    });
-  });
-
-  describe('generateContactQuery', () => {
-    it('generates correct query structure for contact search', () => {
-      const query = 'test@example.com';
-      const expected = {
-        payload: [
-          {
-            attribute_key: 'email',
-            filter_operator: 'contains',
-            values: [query],
-            attribute_model: 'standard',
-          },
-        ],
-      };
-
-      expect(helpers.generateContactQuery({ keys: ['email'], query })).toEqual(
-        expected
-      );
-    });
-
-    it('handles empty query', () => {
-      const expected = {
-        payload: [
-          {
-            attribute_key: 'email',
-            filter_operator: 'contains',
-            values: [''],
-            attribute_model: 'standard',
-          },
-        ],
-      };
-
-      expect(
-        helpers.generateContactQuery({ keys: ['email'], query: '' })
-      ).toEqual(expected);
-    });
-
-    it('handles mutliple keys', () => {
-      const expected = {
-        payload: [
-          {
-            attribute_key: 'email',
-            filter_operator: 'contains',
-            values: ['john'],
-            attribute_model: 'standard',
-            query_operator: 'or',
-          },
-          {
-            attribute_key: 'phone_number',
-            filter_operator: 'contains',
-            values: ['john'],
-            attribute_model: 'standard',
-          },
-        ],
-      };
-
-      expect(
-        helpers.generateContactQuery({
-          keys: ['email', 'phone_number'],
-          query: 'john',
-        })
-      ).toEqual(expected);
-    });
-  });
-
-  describe('API calls', () => {
-    describe('searchContacts', () => {
-      it('searches contacts and returns camelCase results', async () => {
-        const mockPayload = [
-          {
-            id: 1,
-            name: 'John Doe',
-            email: 'john@example.com',
-            phone_number: '+1234567890',
-            created_at: '2023-01-01',
-          },
-        ];
-
-        ContactAPI.filter.mockResolvedValue({
-          data: { payload: mockPayload },
-        });
-
-        const result = await helpers.searchContacts({
-          keys: ['email'],
-          query: 'john',
-        });
-
-        expect(result).toEqual([
-          {
-            id: 1,
-            name: 'John Doe',
-            email: 'john@example.com',
-            phoneNumber: '+1234567890',
-            createdAt: '2023-01-01',
-          },
-        ]);
-
-        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
-          payload: [
-            {
-              attribute_key: 'email',
-              filter_operator: 'contains',
-              values: ['john'],
-              attribute_model: 'standard',
-            },
-          ],
-        });
-      });
-
-      it('searches contacts and returns only contacts with email or phone number', async () => {
-        const mockPayload = [
-          {
-            id: 1,
-            name: 'John Doe',
-            email: 'john@example.com',
-            phone_number: '+1234567890',
-            created_at: '2023-01-01',
-          },
-          {
-            id: 2,
-            name: 'Jane Doe',
-            email: null,
-            phone_number: null,
-            created_at: '2023-01-01',
-          },
-          {
-            id: 3,
-            name: 'Bob Smith',
-            email: 'bob@example.com',
-            phone_number: null,
-            created_at: '2023-01-01',
-          },
-        ];
-
-        ContactAPI.filter.mockResolvedValue({
-          data: { payload: mockPayload },
-        });
-
-        const result = await helpers.searchContacts({
-          keys: ['email'],
-          query: 'john',
-        });
-
-        // Should only return contacts with either email or phone number
-        expect(result).toEqual([
-          {
-            id: 1,
-            name: 'John Doe',
-            email: 'john@example.com',
-            phoneNumber: '+1234567890',
-            createdAt: '2023-01-01',
-          },
-          {
-            id: 3,
-            name: 'Bob Smith',
-            email: 'bob@example.com',
-            phoneNumber: null,
-            createdAt: '2023-01-01',
-          },
-        ]);
-
-        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
-          payload: [
-            {
-              attribute_key: 'email',
-              filter_operator: 'contains',
-              values: ['john'],
-              attribute_model: 'standard',
-            },
-          ],
-        });
-      });
-
-      it('handles empty search results', async () => {
-        ContactAPI.filter.mockResolvedValue({
-          data: { payload: [] },
-        });
-
-        const result = await helpers.searchContacts('nonexistent');
-        expect(result).toEqual([]);
-      });
-
-      it('transforms nested objects to camelCase', async () => {
-        const mockPayload = [
-          {
-            id: 1,
-            name: 'John Doe',
-            phone_number: '+1234567890',
-            contact_inboxes: [
-              {
-                inbox_id: 1,
-                source_id: 'source1',
-                created_at: '2023-01-01',
-              },
-            ],
-            custom_attributes: {
-              custom_field_name: 'value',
-            },
-          },
-        ];
-
-        ContactAPI.filter.mockResolvedValue({
-          data: { payload: mockPayload },
-        });
-
-        const result = await helpers.searchContacts('test');
-
-        expect(result).toEqual([
-          {
-            id: 1,
-            name: 'John Doe',
-            phoneNumber: '+1234567890',
-            contactInboxes: [
-              {
-                inboxId: 1,
-                sourceId: 'source1',
-                createdAt: '2023-01-01',
-              },
-            ],
-            customAttributes: {
-              customFieldName: 'value',
-            },
-          },
-        ]);
-      });
-    });
-
-    describe('createNewContact', () => {
-      it('creates new contact with capitalized name', async () => {
-        const mockContact = { id: 1, name: 'John', email: 'john@example.com' };
-        ContactAPI.create.mockResolvedValue({
-          data: { payload: { contact: mockContact } },
-        });
-
-        const result = await helpers.createNewContact('john@example.com');
-        expect(result).toEqual(mockContact);
-        expect(ContactAPI.create).toHaveBeenCalledWith({
-          name: 'John',
-          email: 'john@example.com',
-        });
-      });
-
-      it('creates new contact with phone number', async () => {
-        const mockContact = {
-          id: 1,
-          name: '919999999999',
-          phone_number: '+919999999999',
-        };
-        ContactAPI.create.mockResolvedValue({
-          data: { payload: { contact: mockContact } },
-        });
-
-        const result = await helpers.createNewContact('+919999999999');
-        expect(result).toEqual({
-          id: 1,
-          name: '919999999999',
-          phoneNumber: '+919999999999',
-        });
-        expect(ContactAPI.create).toHaveBeenCalledWith({
-          name: '919999999999',
-          phone_number: '+919999999999',
-        });
-      });
-    });
-
-    describe('fetchContactableInboxes', () => {
-      it('fetches and processes contactable inboxes', async () => {
-        const mockInboxes = [
-          {
-            inbox: { id: 1, name: 'Inbox 1' },
-            sourceId: 'source1',
-          },
-        ];
-        ContactAPI.getContactableInboxes.mockResolvedValue({
-          data: { payload: mockInboxes },
-        });
-
-        const result = await helpers.fetchContactableInboxes(1);
-        expect(result[0]).toEqual({
-          id: 1,
-          name: 'Inbox 1',
-          sourceId: 'source1',
-        });
-        expect(ContactAPI.getContactableInboxes).toHaveBeenCalledWith(1);
-      });
-
-      it('returns empty array when no inboxes found', async () => {
-        ContactAPI.getContactableInboxes.mockResolvedValue({
-          data: { payload: [] },
-        });
-
-        const result = await helpers.fetchContactableInboxes(1);
-        expect(result).toEqual([]);
-      });
-    });
-  });
-});
-
-describe('compareInboxes', () => {
-  it('should sort inboxes by channel priority', () => {
-    const inboxes = [
-      { channelType: 'Channel::Api', name: 'API Inbox' },
-      { channelType: 'Channel::Email', name: 'Email Inbox' },
-      { channelType: 'Channel::WebWidget', name: 'Widget' },
-      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
-    ];
-
-    const sorted = [...inboxes].sort(helpers.compareInboxes);
-
-    expect(sorted[0].channelType).toBe('Channel::Email');
-    expect(sorted[1].channelType).toBe('Channel::Whatsapp');
-    expect(sorted[2].channelType).toBe('Channel::WebWidget');
-    expect(sorted[3].channelType).toBe('Channel::Api');
-  });
-
-  it('should sort SMS channels correctly', () => {
-    const inboxes = [
-      { channelType: 'Channel::TwilioSms', name: 'Twilio' },
-      { channelType: 'Channel::Sms', name: 'Regular SMS' },
-    ];
-
-    const sorted = [...inboxes].sort(helpers.compareInboxes);
-
-    expect(sorted[0].channelType).toBe('Channel::Sms');
-    expect(sorted[1].channelType).toBe('Channel::TwilioSms');
-  });
-
-  it('should sort by name when channel types are same', () => {
-    const inboxes = [
-      { channelType: 'Channel::Email', name: 'Support' },
-      { channelType: 'Channel::Email', name: 'Marketing' },
-      { channelType: 'Channel::Email', name: 'Billing' },
-    ];
-
-    const sorted = [...inboxes].sort(helpers.compareInboxes);
-
-    expect(sorted.map(inbox => inbox.name)).toEqual([
-      'Billing',
-      'Marketing',
-      'Support',
-    ]);
-  });
-
-  it('should put channels without priority at the end', () => {
-    const inboxes = [
-      { channelType: 'Channel::Unknown', name: 'Unknown' },
-      { channelType: 'Channel::Email', name: 'Email' },
-      { channelType: 'Channel::LineChannel', name: 'Line' },
-      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
-    ];
-
-    const sorted = [...inboxes].sort(helpers.compareInboxes);
-
-    expect(sorted.map(i => i.channelType)).toEqual([
-      'Channel::Email',
-      'Channel::Whatsapp',
-
-      'Channel::LineChannel',
-      'Channel::Unknown',
-    ]);
-  });
-
-  it('should handle empty array', () => {
-    const inboxes = [];
-    const sorted = [...inboxes].sort(helpers.compareInboxes);
-    expect(sorted).toEqual([]);
-  });
-});
@@ -132,7 +132,7 @@ const iconStyles = computed(() => ({
 }));

 const initialsStyles = computed(() => ({
-  fontSize: `${Math.min(props.size / 2.5, 24)}px`,
+  fontSize: `${props.size > 32 ? 16 : props.size / 2}px`,
 }));

 const invalidateCurrentImage = () => {
@@ -174,7 +174,7 @@ watch(
 </script>

 <template>
-  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
+  <span class="relative inline-flex group/avatar" :style="containerStyles">
    <!-- Status Badge -->
    <slot name="badge" :size="size">
      <div
@@ -1,73 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'slate',
-    validator: value =>
-      ['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
-  },
-  actionLabel: {
-    type: String,
-    default: null,
-  },
-});
-
-const emit = defineEmits(['action']);
-
-const bannerClass = computed(() => {
-  const classMap = {
-    slate: 'bg-n-slate-3 border-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-3 border-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11',
-  };
-
-  return classMap[props.color];
-});
-
-const buttonClass = computed(() => {
-  const classMap = {
-    slate: 'bg-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-4 text-n-blue-11',
-  };
-
-  return classMap[props.color];
-});
-
-const triggerAction = () => {
-  emit('action');
-};
-</script>
-
-<template>
-  <div
-    class="text-sm rounded-xl flex items-center justify-between gap-2 border"
-    :class="[
-      bannerClass,
-      {
-        'py-2 px-3': !actionLabel,
-        'pl-3 p-2': actionLabel,
-      },
-    ]"
-  >
-    <div>
-      <slot />
-    </div>
-    <div>
-      <button
-        v-if="actionLabel"
-        class="px-3 py-1 w-auto grid place-content-center rounded-lg"
-        :class="buttonClass"
-        @click="triggerAction"
-      >
-        {{ actionLabel }}
-      </button>
-    </div>
-  </div>
-</template>
@@ -6,7 +6,6 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import {
  VARIANT_OPTIONS,
  COLOR_OPTIONS,
-  JUSTIFY_OPTIONS,
  SIZE_OPTIONS,
  EXCLUDED_ATTRS,
 } from './constants.js';
@@ -28,11 +27,6 @@ const props = defineProps({
    default: null,
    validator: value => SIZE_OPTIONS.includes(value) || value === null,
  },
-  justify: {
-    type: String,
-    default: null,
-    validator: value => JUSTIFY_OPTIONS.includes(value) || value === null,
-  },
  icon: { type: [String, Object, Function], default: '' },
  trailingIcon: { type: Boolean, default: false },
  isLoading: { type: Boolean, default: false },
@@ -87,15 +81,6 @@ const computedSize = computed(() => {
  return 'md';
 });

-const computedJustify = computed(() => {
-  if (props.justify) return props.justify;
-  if (attrs.start || attrs.start === '') return 'start';
-  if (attrs.center || attrs.center === '') return 'center';
-  if (attrs.end || attrs.end === '') return 'end';
-
-  return 'center';
-});
-
 const STYLE_CONFIG = {
  colors: {
    blue: {
@@ -166,12 +151,7 @@ const STYLE_CONFIG = {
    md: 'text-sm font-medium',
    lg: 'text-base',
  },
-  justify: {
-    start: 'justify-start',
-    center: 'justify-center',
-    end: 'justify-end',
-  },
-  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
+  base: 'inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };

 const variantClasses = computed(() => {
@@ -217,7 +197,6 @@ const linkButtonClasses = computed(() => {
      [STYLE_CONFIG.base]: true,
      [isLink ? linkButtonClasses : buttonClasses]: true,
      [STYLE_CONFIG.fontSize[computedSize]]: true,
-      [STYLE_CONFIG.justify[computedJustify]]: true,
      'flex-row-reverse': trailingIcon && !isIconOnly,
    }"
  >
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Shivam Mishra	060a43b0ff	fix: typo	2024-12-05 10:45:24 +05:30
Shivam Mishra	3e5e4ca80f	feat: add story config	2024-12-05 10:38:38 +05:30
Shivam Mishra	298034b5e8	feat: multiple vite configs	2024-12-04 20:43:42 +05:30
Shivam Mishra	353d89ea7b	feat: add netlify	2024-12-04 20:12:12 +05:30
@@ -1 +1 @@
 .2.0
 .0.0