From 7a3303e8412a2d5ad9760b84022c7f91a653e96b Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Wed, 20 Nov 2024 06:24:01 +0800
Subject: [PATCH 01/74] fix: Undefined method `encode' for nil for avatar from
 url job (#10450)

Invalid urls supplied to the job was causing sentry issues. The issue primarily occurs when the download file.original_filename comes out as empty

fixes: https://github.com/chatwoot/chatwoot/issues/10449
---
 app/jobs/avatar/avatar_from_url_job.rb       | 15 ++++++++++++++-
 spec/jobs/avatar/avatar_from_url_job_spec.rb | 16 ++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/app/jobs/avatar/avatar_from_url_job.rb b/app/jobs/avatar/avatar_from_url_job.rb
index f1efea225..f0d877b54 100644
--- a/app/jobs/avatar/avatar_from_url_job.rb
+++ b/app/jobs/avatar/avatar_from_url_job.rb
@@ -8,8 +8,21 @@ class Avatar::AvatarFromUrlJob < ApplicationJob
       avatar_url,
       max_size: 15 * 1024 * 1024
     )
-    avatarable.avatar.attach(io: avatar_file, filename: avatar_file.original_filename, content_type: avatar_file.content_type)
+    if valid_image?(avatar_file)
+      avatarable.avatar.attach(io: avatar_file, filename: avatar_file.original_filename,
+                               content_type: avatar_file.content_type)
+    end
   rescue Down::NotFound, Down::Error => e
     Rails.logger.error "Exception: invalid avatar url #{avatar_url} : #{e.message}"
   end
+
+  private
+
+  def valid_image?(file)
+    return false if file.original_filename.blank?
+
+    # TODO: check if the file is an actual image
+
+    true
+  end
 end
diff --git a/spec/jobs/avatar/avatar_from_url_job_spec.rb b/spec/jobs/avatar/avatar_from_url_job_spec.rb
index b9886316a..25276bc67 100644
--- a/spec/jobs/avatar/avatar_from_url_job_spec.rb
+++ b/spec/jobs/avatar/avatar_from_url_job_spec.rb
@@ -17,4 +17,20 @@ RSpec.describe Avatar::AvatarFromUrlJob do
     described_class.perform_now(avatarable, avatar_url)
     expect(avatarable.avatar).to be_attached
   end
+
+  # ref: https://github.com/chatwoot/chatwoot/issues/10449
+  it 'will not throw error if the avatar url is not valid and the file does not have a filename' do
+    # Create a temporary file with no filename and content type application/xml
+    temp_file = Tempfile.new(['invalid', '.xml'])
+    temp_file.write('<invalid>content</invalid>')
+    temp_file.rewind
+
+    expect(Down).to receive(:download).with(avatar_url, max_size: 15 * 1024 * 1024)
+                                      .and_return(ActionDispatch::Http::UploadedFile.new(tempfile: temp_file, type: 'application/xml'))
+
+    expect { described_class.perform_now(avatarable, avatar_url) }.not_to raise_error
+
+    temp_file.close
+    temp_file.unlink # deletes the temp file
+  end
 end

From a7e3d443c982fa45b675c623888b63e7978eab1f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 20 Nov 2024 03:55:45 +0530
Subject: [PATCH 02/74] feat: Add the new select menu component (#10445)

---
 .../selectmenu/SelectMenu.story.vue           | 46 ++++++++++++
 .../components-next/selectmenu/SelectMenu.vue | 71 +++++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue
 create mode 100644 app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue

diff --git a/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue
new file mode 100644
index 000000000..13d823889
--- /dev/null
+++ b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue';
+import SelectMenu from './SelectMenu.vue';
+
+const sampleOptions = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+  { label: 'Option 4', value: 'option4' },
+];
+
+const selectedValue = ref('option1');
+</script>
+
+<template>
+  <Story
+    title="Components/SelectMenu"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Default">
+      <div class="flex flex-col gap-4 p-4 h-[400px]">
+        <SelectMenu
+          v-model="selectedValue"
+          :options="sampleOptions"
+          :label="sampleOptions.find(opt => opt.value === selectedValue)?.label"
+        />
+        <div class="text-sm">Selected value: {{ selectedValue }}</div>
+      </div>
+    </Variant>
+
+    <Variant title="With Many Options">
+      <div class="flex flex-col gap-4 p-4 h-[400px]">
+        <SelectMenu
+          v-model="selectedValue"
+          :options="
+            Array.from({ length: 10 }, (_, i) => ({
+              label: `Option ${i + 1}`,
+              value: `value${i + 1}`,
+            }))
+          "
+          label="Select from many"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue
new file mode 100644
index 000000000..cc584dcbb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isOpen = ref(false);
+
+const labelValue = computed(() => props.label);
+
+const toggleMenu = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const handleSelect = value => {
+  emit('update:modelValue', value);
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <div
+    v-on-clickaway="() => (isOpen = false)"
+    class="relative flex flex-col gap-1 w-fit"
+  >
+    <Button
+      icon="i-lucide-chevron-down"
+      size="sm"
+      trailing-icon
+      color="slate"
+      variant="faded"
+      class="!w-fit"
+      :class="{ 'dark:!bg-n-alpha-2 !bg-n-slate-9/20': isOpen }"
+      :label="labelValue"
+      @click="toggleMenu"
+    />
+    <div
+      v-if="isOpen"
+      class="absolute ltr:left-full rtl:right-full select-none max-w-48 ltr:ml-1 rtl:mr-1 flex flex-col gap-1 bg-n-alpha-3 backdrop-blur-[100px] p-1 top-0 shadow-lg rounded-lg border border-n-weak"
+    >
+      <Button
+        v-for="option in options"
+        :key="option.value"
+        :label="option.label"
+        :icon="option.value === modelValue ? 'i-lucide-check' : ''"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        trailing-icon
+        class="!justify-end !px-2.5 !h-7"
+        :class="{ '!bg-n-alpha-2': option.value === modelValue }"
+        @click="handleSelect(option.value)"
+      />
+    </div>
+  </div>
+</template>

From 759615d041c34a2e42781de136526c6526a5d75f Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 20 Nov 2024 03:59:45 +0530
Subject: [PATCH 03/74] fix: Update the dropdown bg to match the design system
 (#10438)

This PR updates the background used in dropdown to match our design system. Previous PR failed to add this correctly.

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../components-next/dropdown-menu/base/DropdownBody.vue         | 2 +-
 .../components-next/dropdown-menu/base/DropdownItem.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
index 4fde89306..7616c16d8 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="absolute">
     <ul
-      class="text-sm bg-n-solid-1 border border-n-weak rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base"
+      class="text-sm bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base"
     >
       <slot />
     </ul>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
index 92be04fda..48b746f2a 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
@@ -39,7 +39,7 @@ const triggerClick = () => {
       v-bind="$attrs"
       class="flex text-left rtl:text-right items-center p-2 reset-base text-sm text-n-slate-12 w-full border-0"
       :class="{
-        'hover:bg-n-alpha-1 rounded-lg w-full gap-3': !$slots.default,
+        'hover:bg-n-alpha-2 rounded-lg w-full gap-3': !$slots.default,
       }"
       :href="props.link || null"
       @click="triggerClick"

From 93ebfccac2f4f354bde42a8b988755e22c4f3e56 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 19 Nov 2024 18:45:24 -0800
Subject: [PATCH 04/74] chore(deps): bump cross-spawn from 7.0.3 to 7.0.6
 (#10447)

Bumps [cross-spawn](https://github.com/moxystudio/node-cross-spawn) from
7.0.3 to 7.0.6.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md">cross-spawn's
changelog</a>.</em></p>
<blockquote>
<h3><a
href="https://github.com/moxystudio/node-cross-spawn/compare/v7.0.5...v7.0.6">7.0.6</a>
(2024-11-18)</h3>
<h3>Bug Fixes</h3>
<ul>
<li>update cross-spawn version to 7.0.5 in package-lock.json (<a
href="https://github.com/moxystudio/node-cross-spawn/commit/f700743918d901eff92960e15a8dd68f87bd4176">f700743</a>)</li>
</ul>
<h3><a
href="https://github.com/moxystudio/node-cross-spawn/compare/v7.0.4...v7.0.5">7.0.5</a>
(2024-11-07)</h3>
<h3>Bug Fixes</h3>
<ul>
<li>fix escaping bug introduced by backtracking (<a
href="https://github.com/moxystudio/node-cross-spawn/commit/640d391fde65388548601d95abedccc12943374f">640d391</a>)</li>
</ul>
<h3><a
href="https://github.com/moxystudio/node-cross-spawn/compare/v7.0.3...v7.0.4">7.0.4</a>
(2024-11-07)</h3>
<h3>Bug Fixes</h3>
<ul>
<li>disable regexp backtracking (<a
href="https://redirect.github.com/moxystudio/node-cross-spawn/issues/160">#160</a>)
(<a
href="https://github.com/moxystudio/node-cross-spawn/commit/5ff3a07d9add449021d806e45c4168203aa833ff">5ff3a07</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/77cd97f3ca7b62c904a63a698fc4a79bf41977d0"><code>77cd97f</code></a>
chore(release): 7.0.6</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/6717de49ff1e5de49622488dcb9c33fb25370c85"><code>6717de4</code></a>
chore: upgrade standard-version</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/f700743918d901eff92960e15a8dd68f87bd4176"><code>f700743</code></a>
fix: update cross-spawn version to 7.0.5 in package-lock.json</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/9a7e3b2165917367f74b8365faad9873b30d7263"><code>9a7e3b2</code></a>
chore: fix build status badge</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/085268352dcbcad8064c64c5efb25268b4023184"><code>0852683</code></a>
chore(release): 7.0.5</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/640d391fde65388548601d95abedccc12943374f"><code>640d391</code></a>
fix: fix escaping bug introduced by backtracking</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/bff0c87c8b627c4e6d04ec2449e733048bebb464"><code>bff0c87</code></a>
chore: remove codecov</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/a7c6abc6fee79641d45b452fe6217deaa1bd0973"><code>a7c6abc</code></a>
chore: replace travis with github workflows</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/9b9246e0969e86656d7ccd527716bc3c18842a19"><code>9b9246e</code></a>
chore(release): 7.0.4</li>
<li><a
href="https://github.com/moxystudio/node-cross-spawn/commit/5ff3a07d9add449021d806e45c4168203aa833ff"><code>5ff3a07</code></a>
fix: disable regexp backtracking (<a
href="https://redirect.github.com/moxystudio/node-cross-spawn/issues/160">#160</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/moxystudio/node-cross-spawn/compare/v7.0.3...v7.0.6">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=cross-spawn&package-manager=npm_and_yarn&previous-version=7.0.3&new-version=7.0.6)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 pnpm-lock.yaml | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17d70809b..ed87f5009 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1885,6 +1885,7 @@ packages:
   '@xmldom/xmldom@0.7.13':
     resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==}
     engines: {node: '>=10.0.0'}
+    deprecated: this version is no longer supported, please update to at least 0.8.*
 
   abab@2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
@@ -2283,8 +2284,8 @@ packages:
   crelt@1.0.5:
     resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
   crypt@0.0.2:
@@ -7382,7 +7383,7 @@ snapshots:
 
   crelt@1.0.5: {}
 
-  cross-spawn@7.0.3:
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
@@ -7893,7 +7894,7 @@ snapshots:
       '@ungap/structured-clone': 1.2.0
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       debug: 4.3.5
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
@@ -7954,7 +7955,7 @@ snapshots:
 
   execa@7.2.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 4.3.1
       is-stream: 3.0.0
@@ -7966,7 +7967,7 @@ snapshots:
 
   execa@8.0.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 8.0.1
       human-signals: 5.0.0
       is-stream: 3.0.0
@@ -8063,7 +8064,7 @@ snapshots:
 
   foreground-child@3.3.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
   form-data@4.0.0:

From 76a4140224a1bfbbcd31e222c4cd18baedc05b38 Mon Sep 17 00:00:00 2001
From: Honza Sterba <info@jansterba.com>
Date: Wed, 20 Nov 2024 13:39:17 +0000
Subject: [PATCH 05/74] fix: Feature flags are not be stored on account
 creation (#10387)

when creating an account via the platform API the feature flags do not get stored

Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 app/controllers/platform/api/v1/accounts_controller.rb     | 1 +
 .../platform/api/v1/accounts_controller_spec.rb            | 7 +++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/controllers/platform/api/v1/accounts_controller.rb b/app/controllers/platform/api/v1/accounts_controller.rb
index 9e6d53fef..e11cf9d4a 100644
--- a/app/controllers/platform/api/v1/accounts_controller.rb
+++ b/app/controllers/platform/api/v1/accounts_controller.rb
@@ -4,6 +4,7 @@ class Platform::Api::V1::AccountsController < PlatformController
   def create
     @resource = Account.create!(account_params)
     update_resource_features
+    @resource.save!
     @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
   end
 
diff --git a/spec/controllers/platform/api/v1/accounts_controller_spec.rb b/spec/controllers/platform/api/v1/accounts_controller_spec.rb
index db1713bb6..c7b5b275b 100644
--- a/spec/controllers/platform/api/v1/accounts_controller_spec.rb
+++ b/spec/controllers/platform/api/v1/accounts_controller_spec.rb
@@ -60,11 +60,10 @@ RSpec.describe 'Platform Accounts API', type: :request do
         } }, headers: { api_access_token: platform_app.access_token.token }, as: :json
 
         json_response = response.parsed_body
+        created_account = Account.find(json_response['id'])
+        expect(created_account.enabled_features.keys).to match_array(%w[inbox_management ip_lookup help_center])
         expect(json_response['name']).to include('Test Account')
-        expect(json_response['features']['inbox_management']).to be(true)
-        expect(json_response['features']['ip_lookup']).to be(true)
-        expect(json_response['features']['help_center']).to be(true)
-        expect(json_response['features']['disable_branding']).to be_nil
+        expect(json_response['features'].keys).to match_array(%w[inbox_management ip_lookup help_center])
       end
 
       it 'creates an account with limits settings' do

From b0d6089bb603940127909e0def72c45f1750fa8d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 20 Nov 2024 20:21:35 +0530
Subject: [PATCH 06/74] feat: Updates on new components (#10444)

---
 .../Campaigns/CampaignCard/CampaignCard.vue   |  96 +++++++-------
 .../CampaignCard/LiveChatCampaignDetails.vue  |   8 +-
 .../EmptyState/LiveChatCampaignEmptyState.vue |   1 -
 .../EmptyState/SMSCampaignEmptyState.vue      |   1 -
 .../Pages/CampaignPage/CampaignList.vue       |   1 -
 .../EditLiveChatCampaignDialog.vue            |  16 +--
 .../dashboard/components-next/CardLayout.vue  |  21 ++-
 .../HelpCenter/ArticleCard/ArticleCard.vue    | 123 +++++++++---------
 .../HelpCenter/CategoryCard/CategoryCard.vue  |  98 +++++++-------
 .../HelpCenter/LocaleCard/LocaleCard.vue      | 100 +++++++-------
 .../ArticleEditorControls.vue                 |  17 +--
 .../Pages/CategoryPage/EditCategoryDialog.vue |  20 ++-
 .../Pages/LocalePage/AddLocaleDialog.vue      |  22 ++--
 .../AddCustomDomainDialog.vue                 |  28 ++--
 .../DNSConfigurationDialog.vue                |  31 +++--
 .../PortalSettingsPage/PortalBaseSettings.vue |   8 +-
 .../PortalSwitcher/CreatePortalDialog.vue     |  46 ++++---
 .../PortalSwitcher/PortalSwitcher.vue         |   9 +-
 .../components-next/avatar/Avatar.story.vue   | 101 ++++++++++----
 .../components-next/avatar/Avatar.vue         |  59 +++++++--
 .../avatar/EditableAvatar.story.vue           |  36 -----
 .../components-next/avatar/EditableAvatar.vue | 105 ---------------
 .../components-next/button/Button.vue         |   8 +-
 .../components-next/combobox/ComboBox.vue     |   6 +-
 .../combobox/ComboBoxDropdown.vue             |  18 ++-
 .../components-next/dialog/Dialog.story.vue   |  54 +++++---
 .../components-next/dialog/Dialog.vue         |  76 +++++++----
 .../dropdown-menu/DropdownMenu.story.vue      |  14 ++
 .../dropdown-menu/DropdownMenu.vue            |  78 +++++++++--
 .../dashboard/components-next/input/Input.vue |  57 +++++++-
 .../components-next/taginput/TagInput.vue     |   8 ++
 .../components-next/thumbnail/Thumbnail.vue   | 117 -----------------
 .../dashboard/i18n/locale/en/components.json  |   4 +
 33 files changed, 684 insertions(+), 703 deletions(-)
 delete mode 100644 app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
 delete mode 100644 app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
 delete mode 100644 app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue

diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
index dbdbb5b45..229553253 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
@@ -82,60 +82,56 @@ const inboxIcon = computed(() => {
 </script>
 
 <template>
-  <CardLayout class="flex flex-row justify-between flex-1 gap-8" layout="row">
-    <template #header>
-      <div class="flex flex-col items-start gap-2">
-        <div class="flex justify-between gap-3 w-fit">
-          <span
-            class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
-          >
-            {{ title }}
-          </span>
-          <span
-            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
-            :class="statusTextColor"
-          >
-            {{ campaignStatus }}
-          </span>
-        </div>
-        <div
-          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">
-          <LiveChatCampaignDetails
-            v-if="isLiveChatType"
-            :sender="sender"
-            :inbox-name="inboxName"
-            :inbox-icon="inboxIcon"
-          />
-          <SMSCampaignDetails
-            v-else
-            :inbox-name="inboxName"
-            :inbox-icon="inboxIcon"
-            :scheduled-at="scheduledAt"
-          />
-        </div>
+  <CardLayout layout="row">
+    <div class="flex flex-col items-start justify-between flex-1 min-w-0 gap-2">
+      <div class="flex justify-between gap-3 w-fit">
+        <span
+          class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
+        >
+          {{ title }}
+        </span>
+        <span
+          class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
+          :class="statusTextColor"
+        >
+          {{ campaignStatus }}
+        </span>
       </div>
-    </template>
-    <template #footer>
-      <div class="flex items-center justify-end w-20 gap-2">
-        <Button
+      <div
+        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">
+        <LiveChatCampaignDetails
           v-if="isLiveChatType"
-          variant="faded"
-          size="sm"
-          color="slate"
-          icon="i-lucide-sliders-vertical"
-          @click="emit('edit')"
+          :sender="sender"
+          :inbox-name="inboxName"
+          :inbox-icon="inboxIcon"
         />
-        <Button
-          variant="faded"
-          color="ruby"
-          size="sm"
-          icon="i-lucide-trash"
-          @click="emit('delete')"
+        <SMSCampaignDetails
+          v-else
+          :inbox-name="inboxName"
+          :inbox-icon="inboxIcon"
+          :scheduled-at="scheduledAt"
         />
       </div>
-    </template>
+    </div>
+    <div class="flex items-center justify-end w-20 gap-2">
+      <Button
+        v-if="isLiveChatType"
+        variant="faded"
+        size="sm"
+        color="slate"
+        icon="i-lucide-sliders-vertical"
+        @click="emit('edit')"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        size="sm"
+        icon="i-lucide-trash"
+        @click="emit('delete')"
+      />
+    </div>
   </CardLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
index 6f8c548d4..6a883ce6b 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
@@ -1,7 +1,8 @@
 <script setup>
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
@@ -33,10 +34,11 @@ const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
     {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.SENT_BY') }}
   </span>
   <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Thumbnail
-      :author="sender || { name: senderName }"
+    <Avatar
       :name="senderName"
       :src="senderThumbnailSrc"
+      :size="16"
+      rounded-full
     />
     <span class="text-sm font-medium text-n-slate-12">
       {{ senderName }}
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
index 4461a7da7..d2086b1d4 100644
--- a/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
@@ -27,7 +27,6 @@ defineProps({
           :message="campaign.message"
           :is-enabled="campaign.enabled"
           :status="campaign.campaign_status"
-          :trigger-rules="campaign.trigger_rules"
           :sender="campaign.sender"
           :inbox="campaign.inbox"
           :scheduled-at="campaign.scheduled_at"
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
index d0ed60abe..ab01acb4a 100644
--- a/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
@@ -27,7 +27,6 @@ defineProps({
           :message="campaign.message"
           :is-enabled="campaign.enabled"
           :status="campaign.campaign_status"
-          :trigger-rules="campaign.trigger_rules"
           :sender="campaign.sender"
           :inbox="campaign.inbox"
           :scheduled-at="campaign.scheduled_at"
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
index 80e7437a6..183573606 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
@@ -27,7 +27,6 @@ const handleDelete = campaign => emit('delete', campaign);
       :message="campaign.message"
       :is-enabled="campaign.enabled"
       :status="campaign.campaign_status"
-      :trigger-rules="campaign.trigger_rules"
       :sender="campaign.sender"
       :inbox="campaign.inbox"
       :scheduled-at="campaign.scheduled_at"
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
index 458ee1f1c..9f46a1bde 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
@@ -63,14 +63,12 @@ defineExpose({ dialogRef });
     overflow-y-auto
     @confirm="handleSubmit"
   >
-    <template #form>
-      <LiveChatCampaignForm
-        ref="liveChatCampaignFormRef"
-        mode="edit"
-        :selected-campaign="selectedCampaign"
-        :show-action-buttons="false"
-        @submit="handleSubmit"
-      />
-    </template>
+    <LiveChatCampaignForm
+      ref="liveChatCampaignFormRef"
+      mode="edit"
+      :selected-campaign="selectedCampaign"
+      :show-action-buttons="false"
+      @submit="handleSubmit"
+    />
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/CardLayout.vue b/app/javascript/dashboard/components-next/CardLayout.vue
index a002d825c..0fd3f5986 100644
--- a/app/javascript/dashboard/components-next/CardLayout.vue
+++ b/app/javascript/dashboard/components-next/CardLayout.vue
@@ -1,11 +1,13 @@
 <script setup>
-const props = defineProps({
+defineProps({
   layout: {
     type: String,
     default: 'col',
   },
 });
+
 const emit = defineEmits(['click']);
+
 const handleClick = () => {
   emit('click');
 };
@@ -13,11 +15,18 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
-    :class="props.layout === 'col' ? 'flex-col' : 'flex-row'"
-    @click="handleClick"
+    class="flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
   >
-    <slot name="header" />
-    <slot name="footer" />
+    <div
+      class="flex w-full gap-3 px-6 py-5"
+      :class="
+        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center'
+      "
+      @click="handleClick"
+    >
+      <slot />
+    </div>
+
+    <slot name="after" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index b9ee171f8..9b705d441 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -13,7 +13,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const props = defineProps({
   id: {
@@ -101,7 +101,7 @@ const categoryName = computed(() => {
 });
 
 const authorName = computed(() => {
-  return props.author?.name || props.author?.availableName || '-';
+  return props.author?.name || props.author?.availableName || '';
 });
 
 const authorThumbnailSrc = computed(() => {
@@ -124,75 +124,72 @@ const handleClick = id => {
 
 <template>
   <CardLayout>
-    <template #header>
-      <div class="flex justify-between gap-1">
+    <div class="flex justify-between w-full gap-1">
+      <span
+        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
+        @click="handleClick(id)"
+      >
+        {{ title }}
+      </span>
+      <div class="flex items-center gap-2">
         <span
-          class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
-          @click="handleClick(id)"
+          class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
+          :class="statusTextColor"
         >
-          {{ title }}
+          {{ statusText }}
         </span>
-        <div class="flex items-center gap-2">
-          <span
-            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
-            :class="statusTextColor"
-          >
-            {{ statusText }}
-          </span>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative flex items-center group"
-          >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
-            <DropdownMenu
-              v-if="showActionsDropdown"
-              :menu-items="articleMenuItems"
-              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
-              @action="handleArticleAction($event)"
-            />
-          </div>
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative flex items-center group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="articleMenuItems"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
+            @action="handleArticleAction($event)"
+          />
         </div>
       </div>
-    </template>
-    <template #footer>
-      <div class="flex items-center justify-between gap-4">
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-1">
-            <Thumbnail
-              :author="author"
-              :name="authorName"
-              :src="authorThumbnailSrc"
-            />
-            <span class="text-sm text-n-slate-11">
-              {{ authorName }}
-            </span>
-          </div>
-          <span class="block text-sm whitespace-nowrap text-n-slate-11">
-            {{ categoryName }}
+    </div>
+    <div class="flex items-center justify-between w-full gap-4">
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-1">
+          <Avatar
+            :name="authorName"
+            :src="authorThumbnailSrc"
+            :size="16"
+            rounded-full
+          />
+          <span class="text-sm truncate text-n-slate-11">
+            {{ authorName || '-' }}
           </span>
-          <div
-            class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
-          >
-            <Icon icon="i-lucide-eye" class="size-4" />
-            <span class="text-sm">
-              {{
-                t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
-                  count: views,
-                })
-              }}
-            </span>
-          </div>
         </div>
-        <span class="text-sm text-n-slate-11 line-clamp-1">
-          {{ lastUpdatedAt }}
+        <span class="block text-sm whitespace-nowrap text-n-slate-11">
+          {{ categoryName }}
         </span>
+        <div
+          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
+        >
+          <Icon icon="i-lucide-eye" class="size-4" />
+          <span class="text-sm">
+            {{
+              t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
+                count: views,
+              })
+            }}
+          </span>
+        </div>
       </div>
-    </template>
+      <span class="text-sm text-n-slate-11 line-clamp-1">
+        {{ lastUpdatedAt }}
+      </span>
+    </div>
   </CardLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
index 27cec17e9..d9a82fde5 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
@@ -79,59 +79,55 @@ const handleAction = ({ action, value }) => {
 
 <template>
   <CardLayout>
-    <template #header>
-      <div class="flex gap-2">
-        <div class="flex justify-between w-full gap-2">
-          <div class="flex items-center justify-start w-full min-w-0 gap-2">
-            <span
-              class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
-              @click="handleClick(slug)"
-            >
-              {{ categoryTitleWithIcon }}
-            </span>
-            <span
-              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"
-            >
-              {{
-                t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
-                  count: articlesCount,
-                })
-              }}
-            </span>
-          </div>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative group"
+    <div class="flex w-full gap-2">
+      <div class="flex justify-between w-full gap-2">
+        <div class="flex items-center justify-start w-full min-w-0 gap-2">
+          <span
+            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
+            @click="handleClick(slug)"
           >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              variant="ghost"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
-            <DropdownMenu
-              v-if="showActionsDropdown"
-              :menu-items="categoryMenuItems"
-              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
-              @action="handleAction"
-            />
-          </div>
+            {{ categoryTitleWithIcon }}
+          </span>
+          <span
+            class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"
+          >
+            {{
+              t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
+                count: articlesCount,
+              })
+            }}
+          </span>
+        </div>
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            variant="ghost"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="categoryMenuItems"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
+            @action="handleAction"
+          />
         </div>
       </div>
-    </template>
-    <template #footer>
-      <span
-        class="text-sm line-clamp-3"
-        :class="
-          hasDescription
-            ? 'text-slate-500 dark:text-slate-400'
-            : 'text-slate-400 dark:text-slate-700'
-        "
-      >
-        {{ description }}
-      </span>
-    </template>
+    </div>
+    <span
+      class="text-sm line-clamp-3"
+      :class="
+        hasDescription
+          ? 'text-slate-500 dark:text-slate-400'
+          : 'text-slate-400 dark:text-slate-700'
+      "
+    >
+      {{ description }}
+    </span>
   </CardLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
index d0ec47d17..0f148fd7b 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
@@ -53,66 +53,64 @@ const handleAction = ({ action, value }) => {
 
 <template>
   <CardLayout>
-    <template #header>
-      <div class="flex justify-between gap-2">
-        <div class="flex items-center justify-start gap-2">
+    <div class="flex justify-between gap-2">
+      <div class="flex items-center justify-start gap-2">
+        <span
+          class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
+        >
+          {{ locale }} ({{ localeCode }})
+        </span>
+        <span
+          v-if="isDefault"
+          class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
+        >
+          {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
+        </span>
+      </div>
+      <div class="flex items-center justify-end gap-4">
+        <div class="flex items-center gap-4">
           <span
-            class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
+            class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
           >
-            {{ locale }} ({{ localeCode }})
+            {{
+              $t(
+                'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
+                articleCount
+              )
+            }}
           </span>
+          <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
           <span
-            v-if="isDefault"
-            class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
+            class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
           >
-            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
+            {{
+              $t(
+                'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
+                categoryCount
+              )
+            }}
           </span>
         </div>
-        <div class="flex items-center justify-end gap-4">
-          <div class="flex items-center gap-4">
-            <span
-              class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
-            >
-              {{
-                $t(
-                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
-                  articleCount
-                )
-              }}
-            </span>
-            <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
-            <span
-              class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
-            >
-              {{
-                $t(
-                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
-                  categoryCount
-                )
-              }}
-            </span>
-          </div>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative group"
-          >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
 
-            <DropdownMenu
-              v-if="showDropdownMenu"
-              :menu-items="localeMenuItems"
-              class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
-              @action="handleAction"
-            />
-          </div>
+          <DropdownMenu
+            v-if="showDropdownMenu"
+            :menu-items="localeMenuItems"
+            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+            @action="handleAction"
+          />
         </div>
       </div>
-    </template>
+    </div>
   </CardLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
index db45ee6b7..6b2c3543d 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -6,7 +6,7 @@ import { OnClickOutside } from '@vueuse/components';
 import { useMapGetter } from 'dashboard/composables/store';
 
 import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
 
@@ -50,7 +50,7 @@ const author = computed(() => {
 });
 
 const authorName = computed(
-  () => author.value?.name || author.value?.available_name || '-'
+  () => author.value?.name || author.value?.available_name || ''
 );
 const authorThumbnailSrc = computed(() => author.value?.thumbnail);
 
@@ -186,17 +186,14 @@ onMounted(() => {
           text-variant="info"
           @click="openAgentsList = !openAgentsList"
         >
-          <Thumbnail
-            :author="author"
+          <Avatar
             :name="authorName"
-            :size="20"
             :src="authorThumbnailSrc"
+            :size="20"
+            rounded-full
           />
-          <span
-            v-if="author"
-            class="text-sm text-n-slate-12 hover:text-n-slate-11"
-          >
-            {{ author.available_name }}
+          <span class="text-sm text-n-slate-12 hover:text-n-slate-11">
+            {{ authorName || '-' }}
           </span>
         </Button>
         <DropdownMenu
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
index 1c01a9cdb..5b339e568 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
@@ -97,16 +97,14 @@ defineExpose({ dialogRef });
     :disable-confirm-button="isUpdatingCategory || isInvalidForm"
     @confirm="onUpdateCategory"
   >
-    <template #form>
-      <CategoryForm
-        ref="categoryFormRef"
-        mode="edit"
-        :selected-category="selectedCategory"
-        :active-locale-code="activeLocaleCode"
-        :portal-name="route.params.portalSlug"
-        :active-locale-name="activeLocaleName"
-        :show-action-buttons="false"
-      />
-    </template>
+    <CategoryForm
+      ref="categoryFormRef"
+      mode="edit"
+      :selected-category="selectedCategory"
+      :active-locale-code="activeLocaleCode"
+      :portal-name="route.params.portalSlug"
+      :active-locale-name="activeLocaleName"
+      :show-action-buttons="false"
+    />
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
index 6a08d3772..6e5547ee7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
@@ -85,17 +85,15 @@ defineExpose({ dialogRef });
     :description="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.DESCRIPTION')"
     @confirm="onCreate"
   >
-    <template #form>
-      <div class="flex flex-col gap-6">
-        <ComboBox
-          v-model="selectedLocale"
-          :options="locales"
-          :placeholder="
-            t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
-          "
-          class="[&>div>button]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
-        />
-      </div>
-    </template>
+    <div class="flex flex-col gap-6">
+      <ComboBox
+        v-model="selectedLocale"
+        :options="locales"
+        :placeholder="
+          t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
+        "
+        class="[&>div>button]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
+      />
+    </div>
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
index 44f0e9f5c..b43e2f2fd 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
@@ -55,20 +55,18 @@ defineExpose({ dialogRef });
     "
     @confirm="handleDialogConfirm"
   >
-    <template #form>
-      <Input
-        v-model="formState.customDomain"
-        :label="
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.LABEL'
-          )
-        "
-        :placeholder="
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
-          )
-        "
-      />
-    </template>
+    <Input
+      v-model="formState.customDomain"
+      :label="
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.LABEL'
+        )
+      "
+      :placeholder="
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
+        )
+      "
+    />
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
index 744da4765..2c283b34a 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
@@ -59,21 +59,20 @@ defineExpose({ dialogRef });
         }}
       </p>
     </template>
-    <template #form>
-      <div class="flex flex-col gap-6">
-        <span
-          class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
-        >
-          {{ subdomainCNAME }}
-        </span>
-        <p class="text-sm text-n-slate-12">
-          {{
-            t(
-              'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
-            )
-          }}
-        </p>
-      </div>
-    </template>
+
+    <div class="flex flex-col gap-6">
+      <span
+        class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
+      >
+        {{ subdomainCNAME }}
+      </span>
+      <p class="text-sm text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
+          )
+        }}
+      </p>
+    </div>
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
index 2c9815b39..7a066c265 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -12,7 +12,7 @@ import { shouldBeUrl } from 'shared/helpers/Validators';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
-import EditableAvatar from 'dashboard/components-next/avatar/EditableAvatar.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import ColorPicker from 'dashboard/components-next/colorpicker/ColorPicker.vue';
 
@@ -187,10 +187,12 @@ const handleAvatarDelete = () => {
       <label class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50">
         {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.LABEL') }}
       </label>
-      <EditableAvatar
-        label="Avatar"
+      <Avatar
         :src="state.logoUrl"
         :name="state.name"
+        :size="72"
+        allow-upload
+        icon-name="i-lucide-building-2"
         @upload="handleAvatarUpload"
         @delete="handleAvatarDelete"
       />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
index 78cc59003..d245656d0 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
@@ -120,29 +120,27 @@ defineExpose({ dialogRef });
     :is-loading="isCreatingPortal"
     @confirm="handleDialogConfirm"
   >
-    <template #form>
-      <div class="flex flex-col gap-6">
-        <Input
-          id="portal-name"
-          v-model="state.name"
-          type="text"
-          :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.PLACEHOLDER')"
-          :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.LABEL')"
-          :message-type="nameError ? 'error' : 'info'"
-          :message="
-            nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE')
-          "
-        />
-        <Input
-          id="portal-slug"
-          v-model="state.slug"
-          type="text"
-          :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.PLACEHOLDER')"
-          :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.LABEL')"
-          :message-type="slugError ? 'error' : 'info'"
-          :message="slugError || buildPortalURL(state.slug)"
-        />
-      </div>
-    </template>
+    <div class="flex flex-col gap-6">
+      <Input
+        id="portal-name"
+        v-model="state.name"
+        type="text"
+        :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.PLACEHOLDER')"
+        :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.LABEL')"
+        :message-type="nameError ? 'error' : 'info'"
+        :message="
+          nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE')
+        "
+      />
+      <Input
+        id="portal-slug"
+        v-model="state.slug"
+        type="text"
+        :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.PLACEHOLDER')"
+        :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.LABEL')"
+        :message-type="slugError ? 'error' : 'info'"
+        :message="slugError || buildPortalURL(state.slug)"
+      />
+    </div>
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index f88bd99e3..a182c78d3 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -6,7 +6,7 @@ import { useMapGetter, useStore } from 'dashboard/composables/store.js';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const emit = defineEmits(['close', 'createPortal']);
 
@@ -148,14 +148,13 @@ const redirectToPortalHomePage = () => {
         <span class="text-sm font-medium truncate text-n-slate-12">
           {{ portal.name || '' }}
         </span>
-        <Thumbnail
+        <Avatar
           v-if="portal"
-          :author="portal"
           :name="portal.name"
-          :size="20"
           :src="getPortalThumbnailSrc(portal)"
-          :show-author-name="false"
+          :size="20"
           icon-name="i-lucide-building-2"
+          rounded-full
         />
       </Button>
     </div>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
index 3d906f0a9..12b804e72 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
@@ -5,37 +5,30 @@ import Avatar from './Avatar.vue';
 <template>
   <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
     <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="flex p-4 space-x-4 bg-white dark:bg-slate-900">
         <Avatar
+          name=""
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
-          class="bg-ruby-300 dark:bg-ruby-900"
         />
+        <Avatar name="Amaya" src="" />
+        <Avatar name="" src="" />
       </div>
     </Variant>
 
-    <Variant title="Default with upload">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Avatar
-          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
-          class="bg-ruby-300 dark:bg-ruby-900"
-          allow-upload
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Invalid or empty SRC">
-      <div class="p-4 space-x-4 bg-white dark:bg-slate-900">
-        <Avatar src="https://example.com/ruby.png" name="Ruby" allow-upload />
-        <Avatar name="Bruce Wayne" allow-upload />
-      </div>
-    </Variant>
-
-    <Variant title="Rounded Full">
-      <div class="p-4 space-x-4 bg-white dark:bg-slate-900">
+    <Variant title="Different Shapes">
+      <div class="gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
+          name=""
           allow-upload
           rounded-full
+          :size="48"
+        />
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
+          name=""
+          allow-upload
+          :size="48"
         />
       </div>
     </Variant>
@@ -43,24 +36,78 @@ import Avatar from './Avatar.vue';
     <Variant title="Different Sizes">
       <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar
-          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
           :size="48"
-          class="bg-green-300 dark:bg-green-900"
+          name=""
           allow-upload
         />
         <Avatar
           :size="72"
-          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jade"
-          class="bg-indigo-300 dark:bg-indigo-900"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
+          name=""
           allow-upload
         />
         <Avatar
-          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Emery"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
+          name=""
           :size="96"
-          class="bg-woot-300 dark:bg-woot-900"
           allow-upload
         />
       </div>
     </Variant>
+
+    <Variant title="With Status">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
+          status="online"
+          name="Felix Online"
+        />
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jade"
+          status="busy"
+          name="Jade Busy"
+        />
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Emery"
+          status="offline"
+          name="Emery Offline"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Icon">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <Avatar name="Custom Icon" icon-name="i-lucide-user" :size="48" />
+        <Avatar
+          name="Custom Industry"
+          icon-name="i-lucide-building-2"
+          :size="48"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Upload States">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <!-- Empty state with upload -->
+        <Avatar name="Upload New" allow-upload :size="48" />
+
+        <!-- With image and upload -->
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Upload"
+          name="Replace Image"
+          allow-upload
+          :size="48"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Name Initials">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <Avatar name="Catherine" :size="48" />
+        <Avatar name="John Doe" :size="48" />
+        <Avatar name="Rose Doe John" :size="48" />
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index 39614f6b3..7fcc09dc7 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -39,11 +39,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['upload']);
+const emit = defineEmits(['upload', 'delete']);
 
 const { t } = useI18n();
 
 const isImageValid = ref(true);
+const fileInput = ref(null);
 
 const AVATAR_COLORS = {
   dark: [
@@ -131,13 +132,39 @@ const iconStyles = computed(() => ({
 }));
 
 const initialsStyles = computed(() => ({
-  fontSize: `${props.size / 1.8}px`,
+  fontSize: `${props.size / 2}px`,
 }));
 
 const invalidateCurrentImage = () => {
   isImageValid.value = false;
 };
 
+const handleUploadAvatar = () => {
+  fileInput.value.click();
+};
+
+const handleImageUpload = event => {
+  const [file] = event.target.files;
+  if (file) {
+    emit('upload', {
+      file,
+      url: file ? URL.createObjectURL(file) : null,
+    });
+  }
+};
+
+const handleDeleteAvatar = () => {
+  if (fileInput.value) {
+    fileInput.value.value = null;
+  }
+  emit('delete');
+};
+
+const handleDismiss = event => {
+  event.stopPropagation();
+  handleDeleteAvatar();
+};
+
 watch(
   () => props.src,
   () => {
@@ -147,7 +174,7 @@ watch(
 </script>
 
 <template>
-  <span class="relative inline-flex" :style="containerStyles">
+  <span class="relative inline-flex group/avatar" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div
@@ -158,6 +185,15 @@ watch(
       />
     </slot>
 
+    <!-- Delete Avatar Button -->
+    <div
+      v-if="src && allowUpload"
+      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 -right-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      @click="handleDismiss"
+    >
+      <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
+    </div>
+
     <!-- Avatar Container -->
     <span
       role="img"
@@ -202,16 +238,23 @@ watch(
         />
       </template>
 
-      <!-- Upload Overlay -->
+      <!-- Upload Overlay and Input -->
       <div
         v-if="allowUpload"
-        role="button"
-        class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
-        @click="emit('upload')"
+        class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+        @click="handleUploadAvatar"
       >
         <Icon
           icon="i-lucide-upload"
-          class="text-white dark:text-white size-4"
+          class="text-white"
+          :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
+        />
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+          class="hidden"
+          @change="handleImageUpload"
         />
       </div>
     </span>
diff --git a/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue b/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
deleted file mode 100644
index ca0e38173..000000000
--- a/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import EditableAvatar from './EditableAvatar.vue';
-</script>
-
-<template>
-  <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
-    <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <EditableAvatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
-          class="bg-ruby-300 dark:bg-ruby-900"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Different Sizes">
-      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
-        <EditableAvatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
-          :size="48"
-          class="bg-green-300 dark:bg-green-900"
-        />
-        <EditableAvatar
-          :size="72"
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
-          class="bg-indigo-300 dark:bg-indigo-900"
-        />
-        <EditableAvatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
-          :size="96"
-          class="bg-woot-300 dark:bg-woot-900"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue b/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
deleted file mode 100644
index 2c71963c1..000000000
--- a/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: Number,
-    default: 72,
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['upload', 'delete']);
-
-const avatarSize = computed(() => `${props.size}px`);
-const iconSize = computed(() => `${props.size / 2}px`);
-
-const fileInput = ref(null);
-const imgError = ref(false);
-
-const shouldShowImage = computed(() => props.src && !imgError.value);
-
-const handleUploadAvatar = () => {
-  fileInput.value.click();
-};
-
-const handleImageUpload = event => {
-  const [file] = event.target.files;
-  if (file) {
-    emit('upload', {
-      file,
-      url: file ? URL.createObjectURL(file) : null,
-    });
-  }
-};
-
-const handleDeleteAvatar = () => {
-  if (fileInput.value) {
-    fileInput.value.value = null;
-  }
-  emit('delete');
-};
-
-const handleDismiss = event => {
-  event.stopPropagation();
-  handleDeleteAvatar();
-};
-</script>
-
-<template>
-  <div
-    class="relative flex flex-col items-center gap-2 select-none rounded-xl outline outline-1 outline-n-container group/avatar"
-    :style="{ width: avatarSize, height: avatarSize }"
-  >
-    <img
-      v-if="shouldShowImage"
-      :src="src"
-      :alt="name || 'avatar'"
-      class="object-cover w-full h-full shadow-sm rounded-xl"
-      @error="imgError = true"
-    />
-    <div
-      v-else
-      class="flex items-center justify-center w-full h-full rounded-xl bg-n-alpha-2"
-    >
-      <Icon
-        icon="i-lucide-building-2"
-        class="text-n-brand/50"
-        :style="{ width: `${iconSize}`, height: `${iconSize}` }"
-      />
-    </div>
-    <div
-      v-if="src"
-      class="absolute z-20 outline outline-1 outline-n-container flex items-center cursor-pointer justify-center w-6 h-6 transition-all invisible opacity-0 duration-500 ease-in-out -top-2.5 -right-2.5 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
-      @click="handleDismiss"
-    >
-      <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
-    </div>
-    <div
-      class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
-      @click="handleUploadAvatar"
-    >
-      <Icon
-        icon="i-lucide-upload"
-        class="text-white"
-        :style="{ width: `${iconSize}`, height: `${iconSize}` }"
-      />
-      <input
-        ref="fileInput"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        class="hidden"
-        @change="handleImageUpload"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 67918be2e..02dcfad53 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -6,7 +6,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   label: {
-    type: String,
+    type: [String, Number],
     default: '',
   },
   variant: {
@@ -47,9 +47,9 @@ const STYLE_CONFIG = {
     blue: {
       solid: 'bg-n-brand text-white hover:brightness-110 outline-transparent',
       faded:
-        'bg-n-brand/10 text-n-slate-12 hover:bg-n-brand/20 outline-transparent',
+        'bg-n-brand/10 text-n-blue-text hover:bg-n-brand/20 outline-transparent',
       outline: 'text-n-blue-text outline-n-blue-border',
-      link: 'text-n-brand hover:underline outline-transparent',
+      link: 'text-n-blue-text hover:underline outline-transparent',
     },
     ruby: {
       solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
@@ -161,7 +161,7 @@ const linkButtonClasses = computed(() => {
     <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />
 
     <slot v-if="label || $slots.default" name="default">
-      <span class="min-w-0 truncate">{{ label }}</span>
+      <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
     </slot>
   </button>
 </template>
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index 7fce6f64c..de84974e6 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'search']);
 
 const { t } = useI18n();
 
@@ -118,13 +118,13 @@ watch(
 
       <ComboBoxDropdown
         ref="dropdownRef"
+        v-model:search-value="search"
         :open="open"
         :options="filteredOptions"
-        :search-value="search"
         :search-placeholder="searchPlaceholder"
         :empty-state="emptyState"
         :selected-values="selectedValue"
-        @update:search-value="search = $event"
+        @search="emit('search', $event)"
         @select="selectOption"
       />
 
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
index 4a0e3856c..a39657624 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -11,10 +11,6 @@ const props = defineProps({
     type: Array,
     required: true,
   },
-  searchValue: {
-    type: String,
-    required: true,
-  },
   searchPlaceholder: {
     type: String,
     default: '',
@@ -33,10 +29,15 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:searchValue', 'select']);
+const emit = defineEmits(['update:searchValue', 'select', 'search']);
 
 const { t } = useI18n();
 
+const searchValue = defineModel('searchValue', {
+  type: String,
+  default: '',
+});
+
 const searchInput = ref(null);
 
 const isSelected = option => {
@@ -46,6 +47,11 @@ const isSelected = option => {
   return option.value === props.selectedValues;
 };
 
+const onInputSearch = event => {
+  searchValue.value = event.target.value;
+  emit('search', event.target.value);
+};
+
 defineExpose({
   focus: () => searchInput.value?.focus(),
 });
@@ -64,7 +70,7 @@ defineExpose({
         type="search"
         :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
         class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
-        @input="emit('update:searchValue', $event.target.value)"
+        @input="onInputSearch"
       />
     </div>
     <ul
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.story.vue b/app/javascript/dashboard/components-next/dialog/Dialog.story.vue
index a94381e52..60fb6000e 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.story.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.story.vue
@@ -7,6 +7,7 @@ import Input from 'dashboard/components-next/input/Input.vue';
 const alertDialog = ref(null);
 const editDialog = ref(null);
 const confirmDialog = ref(null);
+const confirmDialogWithCustomFooter = ref(null);
 
 const openAlertDialog = () => {
   alertDialog.value.open();
@@ -17,6 +18,9 @@ const openEditDialog = () => {
 const openConfirmDialog = () => {
   confirmDialog.value.open();
 };
+const openConfirmDialogWithCustomFooter = () => {
+  confirmDialogWithCustomFooter.value.open();
+};
 
 // eslint-disable-next-line no-unused-vars
 const onConfirm = dialog => {};
@@ -44,24 +48,22 @@ const onConfirm = dialog => {};
         confirm-button-label="Save"
         @confirm="onConfirm()"
       >
-        <template #form>
-          <div class="flex flex-col gap-6">
-            <Input
-              id="portal-name"
-              type="text"
-              placeholder="User Guide | Chatwoot"
-              label="Name"
-              message="This will be the name of your public facing portal"
-            />
-            <Input
-              id="portal-slug"
-              type="text"
-              placeholder="user-guide"
-              label="Slug"
-              message="app.chatwoot.com/hc/my-portal/en-US/categories/my-slug"
-            />
-          </div>
-        </template>
+        <div class="flex flex-col gap-6">
+          <Input
+            id="portal-name"
+            type="text"
+            placeholder="User Guide | Chatwoot"
+            label="Name"
+            message="This will be the name of your public facing portal"
+          />
+          <Input
+            id="portal-slug"
+            type="text"
+            placeholder="user-guide"
+            label="Slug"
+            message="app.chatwoot.com/hc/my-portal/en-US/categories/my-slug"
+          />
+        </div>
       </Dialog>
     </Variant>
 
@@ -77,5 +79,21 @@ const onConfirm = dialog => {};
         @confirm="onConfirm()"
       />
     </Variant>
+
+    <Variant title="With custom footer">
+      <Button
+        label="Open Confirm Dialog with custom footer"
+        @click="openConfirmDialogWithCustomFooter"
+      />
+      <Dialog
+        ref="confirmDialogWithCustomFooter"
+        title="Confirm Action"
+        description="Are you sure you want to perform this action?"
+      >
+        <template #footer>
+          <Button label="Custom Button" @click="onConfirm()" />
+        </template>
+      </Dialog>
+    </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue
index 679442e54..c485549ae 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 
-defineProps({
+const props = defineProps({
   type: {
     type: String,
     default: 'edit',
@@ -14,7 +14,7 @@ defineProps({
   },
   title: {
     type: String,
-    required: true,
+    default: '',
   },
   description: {
     type: String,
@@ -48,6 +48,11 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  width: {
+    type: String,
+    default: 'lg',
+    validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
+  },
 });
 
 const emit = defineEmits(['confirm', 'close']);
@@ -59,6 +64,19 @@ const isRTL = useMapGetter('accounts/isRTL');
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
 
+const maxWidthClass = computed(() => {
+  const classesMap = {
+    '3xl': 'max-w-3xl',
+    '2xl': 'max-w-2xl',
+    xl: 'max-w-xl',
+    lg: 'max-w-lg',
+    md: 'max-w-md',
+    sm: 'max-w-sm',
+  };
+
+  return classesMap[props.width] ?? 'max-w-md';
+});
+
 const open = () => {
   dialogRef.value?.showModal();
 };
@@ -77,8 +95,11 @@ defineExpose({ open, close });
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      class="w-full max-w-lg transition-all duration-300 ease-in-out shadow-xl rounded-xl"
-      :class="overflowYAuto ? 'overflow-y-auto' : 'overflow-visible'"
+      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      :class="[
+        maxWidthClass,
+        overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
+      ]"
       :dir="isRTL ? 'rtl' : 'ltr'"
       @close="close"
     >
@@ -88,7 +109,7 @@ defineExpose({ open, close });
           class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
           @click.stop
         >
-          <div class="flex flex-col gap-2">
+          <div v-if="title || description" class="flex flex-col gap-2">
             <h3 class="text-base font-medium leading-6 text-n-slate-12">
               {{ title }}
             </h3>
@@ -98,28 +119,29 @@ defineExpose({ open, close });
               </p>
             </slot>
           </div>
-          <slot name="form">
-            <!-- Form content will be injected here -->
+          <slot />
+          <!-- Dialog content will be injected here -->
+          <slot name="footer">
+            <div class="flex items-center justify-between w-full gap-3">
+              <Button
+                v-if="showCancelButton"
+                variant="faded"
+                color="slate"
+                :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
+                class="w-full"
+                @click="close"
+              />
+              <Button
+                v-if="showConfirmButton"
+                :color="type === 'edit' ? 'blue' : 'ruby'"
+                :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
+                class="w-full"
+                :is-loading="isLoading"
+                :disabled="disableConfirmButton || isLoading"
+                @click="confirm"
+              />
+            </div>
           </slot>
-          <div class="flex items-center justify-between w-full gap-3">
-            <Button
-              v-if="showCancelButton"
-              variant="faded"
-              color="slate"
-              :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
-              class="w-full"
-              @click="close"
-            />
-            <Button
-              v-if="showConfirmButton"
-              :color="type === 'edit' ? 'blue' : 'ruby'"
-              :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
-              class="w-full"
-              :is-loading="isLoading"
-              :disabled="disableConfirmButton || isLoading"
-              @click="confirm"
-            />
-          </div>
         </div>
       </OnClickOutside>
     </dialog>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
index 714f48144..f1fb01af3 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
@@ -51,5 +51,19 @@ const handleAction = () => {
         />
       </div>
     </Variant>
+
+    <Variant title="With search">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+        <DropdownMenu
+          :menu-items="[
+            { label: 'Custom 1', action: 'custom1', icon: 'file-upload' },
+            { label: 'Custom 2', action: 'custom2', icon: 'document' },
+            { label: 'Danger', action: 'delete', icon: 'delete' },
+          ]"
+          show-search
+          @action="handleAction"
+        />
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 1a031c7c6..0b24b597d 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, ref, defineEmits, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
-defineProps({
+const props = defineProps({
   menuItems: {
     type: Array,
     required: true,
@@ -16,21 +17,61 @@ defineProps({
     type: Number,
     default: 20,
   },
+  showSearch: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['action']);
 
-const handleAction = (action, value) => {
-  emit('action', { action, value });
+const { t } = useI18n();
+
+const searchInput = ref(null);
+const searchQuery = ref('');
+
+const filteredMenuItems = computed(() => {
+  if (!searchQuery.value) return props.menuItems;
+
+  return props.menuItems.filter(item =>
+    item.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const handleAction = item => {
+  const { action, value, ...rest } = item;
+  emit('action', { action, value, ...rest });
 };
+
+onMounted(() => {
+  if (searchInput.value && props.showSearch) {
+    searchInput.value.focus();
+  }
+});
 </script>
 
 <template>
   <div
     class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
   >
+    <div v-if="showSearch" class="relative">
+      <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+      <input
+        ref="searchInput"
+        v-model="searchQuery"
+        type="search"
+        :placeholder="
+          searchPlaceholder || t('DROPDOWN_MENU.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>
     <button
-      v-for="item in menuItems"
+      v-for="item in filteredMenuItems"
       :key="item.action"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
@@ -39,20 +80,29 @@ const handleAction = (action, value) => {
         'text-n-slate-12': item.action !== 'delete',
       }"
       :disabled="item.disabled"
-      @click="handleAction(item.action, item.value)"
+      @click="handleAction(item)"
+      @keydown.enter="handleAction(item)"
     >
-      <Thumbnail
-        v-if="item.thumbnail"
-        :author="item.thumbnail"
-        :name="item.thumbnail.name"
-        :size="thumbnailSize"
-        :src="item.thumbnail.src"
-      />
+      <slot name="thumbnail" :item="item">
+        <Avatar
+          v-if="item.thumbnail"
+          :name="item.thumbnail.name"
+          :src="item.thumbnail.src"
+          :size="thumbnailSize"
+          rounded-full
+        />
+      </slot>
       <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
       <span v-if="item.label" class="min-w-0 text-sm truncate">{{
         item.label
       }}</span>
     </button>
+    <div
+      v-if="filteredMenuItems.length === 0"
+      class="text-sm text-n-slate-11 px-2 py-1.5"
+    >
+      {{ t('DROPDOWN_MENU.EMPTY_STATE') }}
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index da52cde19..5bfdd5c71 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, onMounted, nextTick } from 'vue';
 const props = defineProps({
   modelValue: {
     type: [String, Number],
@@ -42,9 +42,22 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue', 'blur', 'input']);
+const emit = defineEmits([
+  'update:modelValue',
+  'blur',
+  'input',
+  'focus',
+  'enter',
+]);
+
+const isFocused = ref(false);
+const inputRef = ref(null);
 
 const messageClass = computed(() => {
   switch (props.messageType) {
@@ -62,7 +75,7 @@ const inputBorderClass = computed(() => {
     case 'error':
       return 'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
     default:
-      return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
+      return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak focus:border-n-brand dark:focus:border-n-brand';
   }
 });
 
@@ -70,6 +83,28 @@ const handleInput = event => {
   emit('update:modelValue', event.target.value);
   emit('input', event);
 };
+
+const handleFocus = event => {
+  emit('focus', event);
+  isFocused.value = true;
+};
+
+const handleBlur = event => {
+  emit('blur', event);
+  isFocused.value = false;
+};
+
+const handleEnter = event => {
+  emit('enter', event);
+};
+
+onMounted(() => {
+  if (props.autofocus) {
+    nextTick(() => {
+      inputRef.value?.focus();
+    });
+  }
+});
 </script>
 
 <template>
@@ -85,15 +120,25 @@ const handleInput = event => {
     <slot name="prefix" />
     <input
       :id="id"
+      ref="inputRef"
       :value="modelValue"
-      :class="[customInputClass, inputBorderClass]"
+      :class="[
+        customInputClass,
+        inputBorderClass,
+        {
+          error: messageType === 'error',
+          focus: isFocused,
+        },
+      ]"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
-      @blur="emit('blur')"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keyup.enter="handleEnter"
     />
     <p
       v-if="message"
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 4ebd0f7c7..8e3a33b6c 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -46,6 +46,13 @@ const handleClickOutside = () => {
   }
 };
 
+const handleKeydown = event => {
+  if (event.key === ',') {
+    event.preventDefault();
+    addTag();
+  }
+};
+
 watch(
   () => props.modelValue,
   newValue => {
@@ -81,6 +88,7 @@ watch(
         :placeholder="placeholder"
         custom-input-class="flex-grow"
         @enter-press="addTag"
+        @keydown="handleKeydown"
       />
     </div>
   </OnClickOutside>
diff --git a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
deleted file mode 100644
index 609cd865e..000000000
--- a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { removeEmoji } from 'shared/helpers/emoji';
-
-const props = defineProps({
-  author: {
-    type: Object,
-    default: null,
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-  src: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: Number,
-    default: 16,
-  },
-  showAuthorName: {
-    type: Boolean,
-    default: true,
-  },
-  iconName: {
-    type: String,
-    default: '',
-  },
-});
-
-const { t } = useI18n();
-
-const hasImageLoaded = ref(false);
-const imgError = ref(false);
-
-const authorInitial = computed(() => {
-  if (!props.name) return '';
-  const name = removeEmoji(props.name);
-  const words = name.split(/\s+/);
-
-  if (words.length === 1) {
-    return name.substring(0, 2).toUpperCase();
-  }
-
-  return words
-    .slice(0, 2)
-    .map(word => word[0])
-    .join('')
-    .toUpperCase();
-});
-
-const fontSize = computed(() => {
-  return props.size / 2;
-});
-
-const iconSize = computed(() => {
-  return Math.round(props.size / 1.8);
-});
-
-const shouldShowImage = computed(() => {
-  return props.src && !imgError.value;
-});
-
-const onImgError = () => {
-  imgError.value = true;
-};
-
-const onImgLoad = () => {
-  hasImageLoaded.value = true;
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center rounded-full bg-n-slate-3 dark:bg-n-slate-4"
-    :style="{ width: `${size}px`, height: `${size}px` }"
-  >
-    <div v-if="author" class="flex items-center justify-center">
-      <img
-        v-if="shouldShowImage"
-        :src="src"
-        :alt="name"
-        class="w-full h-full rounded-full"
-        @load="onImgLoad"
-        @error="onImgError"
-      />
-      <template v-else>
-        <span
-          v-if="showAuthorName"
-          class="flex items-center justify-center font-medium text-n-slate-11"
-          :style="{ fontSize: `${fontSize}px` }"
-        >
-          {{ authorInitial }}
-        </span>
-        <div
-          v-else
-          class="flex items-center justify-center w-full h-full rounded-xl"
-        >
-          <span
-            v-if="iconName"
-            :class="`${iconName} text-n-brand/70`"
-            :style="{ width: `${iconSize}px`, height: `${iconSize}px` }"
-          />
-        </div>
-      </template>
-    </div>
-    <div
-      v-else
-      v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
-      class="flex items-center justify-center w-4 h-4 rounded-full bg-n-slate-3 dark:bg-n-slate-4"
-    >
-      <span class="i-lucide-user size-2.5 text-n-brand" />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 1ff9e331d..6f867e3d4 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -8,6 +8,10 @@
     "EMPTY_STATE": "No results found.",
     "SEARCH_PLACEHOLDER": "Search..."
   },
+  "DROPDOWN_MENU": {
+    "SEARCH_PLACEHOLDER": "Search...",
+    "EMPTY_STATE": "No results found."
+  },
   "DIALOG": {
     "BUTTONS": {
       "CANCEL": "Cancel",

From c3604bfcbf473354d0ab3eee338ef45cd63ad75d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 20 Nov 2024 22:31:05 +0530
Subject: [PATCH 07/74] feat: New phone number input component (#10446)

---
 .../PhoneNumberInput.story.vue                |  49 ++++
 .../phonenumberinput/PhoneNumberInput.vue     | 219 ++++++++++++++++++
 .../dashboard/i18n/locale/en/components.json  |   5 +
 3 files changed, 273 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.story.vue
 create mode 100644 app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue

diff --git a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.story.vue b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.story.vue
new file mode 100644
index 000000000..b51b7f023
--- /dev/null
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.story.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue';
+import PhoneNumberInput from './PhoneNumberInput.vue';
+
+const phoneNumber = ref('+14155552671');
+</script>
+
+<template>
+  <Story
+    title="Components/PhoneNumberInput"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Default">
+      <div class="flex flex-col gap-4 p-4 h-[300px]">
+        <PhoneNumberInput
+          v-model="phoneNumber"
+          placeholder="Enter phone number"
+        />
+        <div class="text-sm">Phone number value: {{ phoneNumber }}</div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="flex flex-col gap-4 p-4 h-[300px]">
+        <PhoneNumberInput
+          v-model="phoneNumber"
+          placeholder="Enter phone number"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Without Border">
+      <div class="flex flex-col gap-4 p-4 h-[300px]">
+        <PhoneNumberInput
+          v-model="phoneNumber"
+          placeholder="Enter phone number"
+          :show-border="false"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State auto select based on time zone">
+      <div class="flex flex-col gap-4 p-4 h-[300px]">
+        <PhoneNumberInput placeholder="Enter phone number" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
new file mode 100644
index 000000000..5168bb4b3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
@@ -0,0 +1,219 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import parsePhoneNumber from 'libphonenumber-js';
+import { useI18n } from 'vue-i18n';
+import countries from 'shared/constants/countries.js';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, numeric } from '@vuelidate/validators';
+import {
+  getActiveCountryCode,
+  getActiveDialCode,
+} from 'shared/components/PhoneInput/helper';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showBorder: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const modelValue = defineModel({
+  type: [String, Number],
+  default: '',
+});
+
+const { t } = useI18n();
+
+const showDropdown = ref(false);
+const searchQuery = ref('');
+const activeCountryCode = ref(getActiveCountryCode());
+const activeDialCode = ref(getActiveDialCode());
+const phoneNumber = ref('');
+
+const rules = {
+  phoneNumber: {
+    minLength: minLength(2),
+    numeric,
+  },
+  activeDialCode: {
+    required,
+    validDialCode: value => {
+      return countries.some(country => country.dial_code === value);
+    },
+  },
+};
+
+const v$ = useVuelidate(rules, {
+  phoneNumber,
+  activeDialCode,
+});
+
+const hasError = computed(() => v$.value.$invalid);
+
+const countryList = computed(() => {
+  return countries.map(country => ({
+    value: country.id,
+    label: country.name,
+    dialCode: country.dial_code,
+    emoji: country.emoji,
+    isSelected: String(activeCountryCode.value) === String(country.id),
+    action: 'phoneNumberInput',
+  }));
+});
+
+const filteredCountries = computed(() => {
+  const query = searchQuery.value.toLowerCase();
+  return countryList.value.filter(({ label, dialCode, value }) =>
+    [label, dialCode, value].some(field => field.toLowerCase().includes(query))
+  );
+});
+
+const activeCountry = computed(() =>
+  activeCountryCode.value
+    ? countryList.value.find(
+        country => country.value === activeCountryCode.value
+      )
+    : ''
+);
+
+const inputBorderClass = computed(() => {
+  const errorClass =
+    'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
+  if (!props.showBorder) {
+    return hasError.value ? errorClass : 'border-transparent';
+  }
+  if (hasError.value) {
+    return errorClass;
+  }
+  return 'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
+});
+
+const phoneNumberError = computed(() => {
+  if (!v$.value.$dirty) return '';
+  return v$.value.activeDialCode.$invalid
+    ? t('PHONE_INPUT.DIAL_CODE_ERROR')
+    : v$.value.phoneNumber.$invalid && t('PHONE_INPUT.ERROR');
+});
+
+const emitPhoneNumber = value => {
+  const newValue = value ? `${activeDialCode.value}${value}` : '';
+  modelValue.value = newValue;
+};
+
+const onSelectCountry = async ({ value, dialCode }) => {
+  if (!value || !showDropdown.value) return;
+
+  activeCountryCode.value = value;
+  activeDialCode.value = dialCode;
+  searchQuery.value = '';
+  showDropdown.value = false;
+  if (!v$.value.$invalid && phoneNumber.value) {
+    emitPhoneNumber(phoneNumber.value);
+  }
+};
+
+const toggleCountryDropdown = () => {
+  showDropdown.value = !showDropdown.value;
+};
+
+const closeCountryDropdown = () => {
+  showDropdown.value = false;
+};
+
+watch(phoneNumber, async value => {
+  await v$.value.$touch();
+  if (!v$.value.$invalid) {
+    emitPhoneNumber(value);
+  }
+});
+
+watch(
+  modelValue,
+  newValue => {
+    const number = parsePhoneNumber(newValue);
+    if (number) {
+      if (number?.country) activeCountryCode.value = number.country;
+      if (number?.countryCallingCode)
+        activeDialCode.value = `+${number.countryCallingCode}`;
+      phoneNumber.value = newValue.replace(`+${number.countryCallingCode}`, '');
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div>
+    <div
+      v-on-clickaway="() => closeCountryDropdown()"
+      class="relative flex items-center h-8 transition-all duration-500 ease-in-out border rounded-lg bg-n-alpha-black2"
+      :class="[inputBorderClass, { 'cursor-not-allowed opacity-50': disabled }]"
+    >
+      <Input
+        v-model="phoneNumber"
+        type="tel"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        custom-input-class="!border-0 h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
+        class="w-full !flex-row"
+      >
+        <template #prefix>
+          <div class="flex items-center flex-shrink-0">
+            <Button
+              :label="activeCountry?.emoji || ''"
+              color="slate"
+              size="sm"
+              :icon="
+                !activeCountry ? 'i-lucide-globe' : 'i-lucide-chevron-down'
+              "
+              trailing-icon
+              :disabled="disabled"
+              class="!h-[30px] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              @click="toggleCountryDropdown"
+            >
+              <span
+                v-if="activeCountry"
+                class="inline-flex justify-center text-sm whitespace-nowrap"
+              >
+                {{ activeCountry?.emoji }}
+              </span>
+            </Button>
+            <span
+              v-if="activeCountry"
+              class="text-sm left-[38px] top-2.5 text-n-slate-11 ltr:!pl-1 rtl:!pr-1"
+            >
+              {{ activeDialCode }}
+            </span>
+          </div>
+        </template>
+      </Input>
+      <DropdownMenu
+        v-if="showDropdown"
+        :menu-items="filteredCountries"
+        show-search
+        class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+        @action="onSelectCountry"
+      />
+    </div>
+    <template v-if="phoneNumberError">
+      <p
+        v-if="phoneNumberError"
+        class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out text-n-ruby-9 dark:text-n-ruby-9"
+      >
+        {{ phoneNumberError }}
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 6f867e3d4..7a0533cef 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -18,6 +18,11 @@
       "CONFIRM": "Confirm"
     }
   },
+  "PHONE_INPUT": {
+    "SEARCH_PLACEHOLDER": "Search country",
+    "ERROR": "Phone number should be empty or in E.164 format",
+    "DIAL_CODE_ERROR": "Please select a dial code from the list"
+  },
   "THUMBNAIL": {
     "AUTHOR": {
       "NOT_AVAILABLE": "Author is not available"

From 93b7ce6eba20fc8061893af347db932efb45bb51 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 21 Nov 2024 01:02:33 +0800
Subject: [PATCH 08/74] feat: Display Account Custom Attributes in Super Admin
 (#10459)

Viewing the account custom attributes is quite handy when debugging on Chatwoot cloud. Hence adding this option to Super Admin.
---
 app/dashboards/account_dashboard.rb | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/dashboards/account_dashboard.rb b/app/dashboards/account_dashboard.rb
index de6ab42bb..b566551f4 100644
--- a/app/dashboards/account_dashboard.rb
+++ b/app/dashboards/account_dashboard.rb
@@ -26,7 +26,8 @@ class AccountDashboard < Administrate::BaseDashboard
     conversations: CountField,
     locale: Field::Select.with_options(collection: LANGUAGES_CONFIG.map { |_x, y| y[:iso_639_1_code] }),
     status: Field::Select.with_options(collection: [%w[Active active], %w[Suspended suspended]]),
-    account_users: Field::HasMany
+    account_users: Field::HasMany,
+    custom_attributes: Field::String
   }.merge(enterprise_attribute_types).freeze
 
   # COLLECTION_ATTRIBUTES
@@ -45,7 +46,7 @@ class AccountDashboard < Administrate::BaseDashboard
 
   # SHOW_PAGE_ATTRIBUTES
   # an array of attributes that will be displayed on the model's show page.
-  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[limits all_features] : []
+  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[custom_attributes limits all_features] : []
   SHOW_PAGE_ATTRIBUTES = (%i[
     id
     name

From 515778eabbb6a941962dc04b96759949aa165aae Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 21 Nov 2024 10:58:54 +0800
Subject: [PATCH 09/74] chore: Disable throwing error for malformed to address
 (#10464)

We don't need to raise error on sentry for malformed to address as it is already logged.

Fixes: https://linear.app/chatwoot/issue/CW-3151/standarderror-invalid-email-to-address-header-standarderror
---
 app/mailboxes/application_mailbox.rb       | 13 +++++-------
 spec/mailboxes/application_mailbox_spec.rb | 24 ++++++++++++++--------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/app/mailboxes/application_mailbox.rb b/app/mailboxes/application_mailbox.rb
index 6a1902ce4..4fe931b9f 100644
--- a/app/mailboxes/application_mailbox.rb
+++ b/app/mailboxes/application_mailbox.rb
@@ -8,12 +8,12 @@ class ApplicationMailbox < ActionMailbox::Base
 
   # routes as a reply to existing conversations
   routing(
-    ->(inbound_mail) { reply_uuid_mail?(inbound_mail) || in_reply_to_mail?(inbound_mail) } => :reply
+    ->(inbound_mail) { valid_to_address?(inbound_mail) && (reply_uuid_mail?(inbound_mail) || in_reply_to_mail?(inbound_mail)) } => :reply
   )
 
   # routes as a new conversation in email channel
   routing(
-    ->(inbound_mail) { EmailChannelFinder.new(inbound_mail.mail).perform.present? } => :support
+    ->(inbound_mail) { valid_to_address?(inbound_mail) && EmailChannelFinder.new(inbound_mail.mail).perform.present? } => :support
   )
 
   # catchall
@@ -37,8 +37,6 @@ class ApplicationMailbox < ActionMailbox::Base
     # checks if follow this pattern  send it to reply_mailbox
     # reply+<conversation-uuid>@<mailer-domain.com>
     def reply_uuid_mail?(inbound_mail)
-      validate_to_address(inbound_mail)
-
       inbound_mail.mail.to&.any? do |email|
         conversation_uuid = email.split('@')[0]
         conversation_uuid.match?(REPLY_EMAIL_UUID_PATTERN)
@@ -48,13 +46,12 @@ class ApplicationMailbox < ActionMailbox::Base
     # if mail.to returns a string, then it is a malformed `to` header
     # valid `to` header will be of type Mail::AddressContainer
     # validate if the to address is of type string
-    def validate_to_address(inbound_mail)
+    def valid_to_address?(inbound_mail)
       to_address_class = inbound_mail.mail.to&.class
-
-      return if to_address_class == Mail::AddressContainer
+      return true if to_address_class == Mail::AddressContainer
 
       Rails.logger.error "Email to address header is malformed `#{inbound_mail.mail.to}`"
-      raise StandardError, "Invalid email to address header #{inbound_mail.mail.to}"
+      false
     end
   end
 end
diff --git a/spec/mailboxes/application_mailbox_spec.rb b/spec/mailboxes/application_mailbox_spec.rb
index 733ec5523..f4f28d811 100644
--- a/spec/mailboxes/application_mailbox_spec.rb
+++ b/spec/mailboxes/application_mailbox_spec.rb
@@ -69,18 +69,26 @@ RSpec.describe ApplicationMailbox do
     end
 
     describe 'Invalid Mail To Address' do
-      it 'raises error when mail.to header is malformed' do
-        expect do
-          described_class.route mail_with_invalid_to_address
-        end.to raise_error(StandardError,
-                           'Invalid email to address header <vishnu@chatwoot.com>vishnu@chatwoot.com')
+      let(:logger) { double }
+
+      before do
+        allow(Rails).to receive(:logger).and_return(logger)
+        allow(logger).to receive(:error)
       end
 
-      it 'raises another error when mail.to header is malformed' do
+      it 'will not raise error when mail.to header is malformed format 1' do
+        expect(logger).to receive(:error).with("Email to address header is malformed `#{mail_with_invalid_to_address.mail.to}`")
+        expect do
+          described_class.route mail_with_invalid_to_address
+        end.not_to raise_error
+      end
+
+      it 'will not raise error when mail.to header is malformed format 2' do
+        expect(logger).to receive(:error).with("Email to address header is malformed `#{mail_with_invalid_to_address_2.mail.to}`")
+
         expect do
           described_class.route mail_with_invalid_to_address_2
-        end.to raise_error(StandardError,
-                           'Invalid email to address header vishnu@chatwoot.com www.chatwoot.com')
+        end.not_to raise_error
       end
     end
   end

From 3a334be58214db8017d629937f45c680d351fe5a Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 21 Nov 2024 09:53:12 +0530
Subject: [PATCH 10/74] feat: add channel icon component (#10471)

This pull request introduces a new `ChannelIcon` component and refactors the existing code to use this component, which simplifies the icon management for different channel types and providers.
---
 .../components-next/icon/ChannelIcon.vue      | 17 ++++++
 .../components-next/icon/provider.js          | 36 +++++++++++
 .../icon/specs/provider.spec.js               | 59 +++++++++++++++++++
 .../components-next/sidebar/ChannelLeaf.vue   | 34 +----------
 4 files changed, 114 insertions(+), 32 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/icon/ChannelIcon.vue
 create mode 100644 app/javascript/dashboard/components-next/icon/provider.js
 create mode 100644 app/javascript/dashboard/components-next/icon/specs/provider.spec.js

diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
new file mode 100644
index 000000000..11117cc18
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useChannelIcon } from './provider';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  inbox: {
+    type: Object,
+    required: true,
+  },
+});
+
+const channelIcon = useChannelIcon(props.inbox);
+</script>
+
+<template>
+  <Icon :icon="channelIcon" />
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/provider.js b/app/javascript/dashboard/components-next/icon/provider.js
new file mode 100644
index 000000000..5b00376d1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+
+export function useChannelIcon(inbox) {
+  const channelTypeIconMap = {
+    'Channel::Api': 'i-ri-cloudy-fill',
+    'Channel::Email': 'i-ri-mail-fill',
+    'Channel::FacebookPage': 'i-ri-messenger-fill',
+    'Channel::Line': 'i-ri-line-fill',
+    'Channel::Sms': 'i-ri-chat-1-fill',
+    'Channel::Telegram': 'i-ri-telegram-fill',
+    'Channel::TwilioSms': 'i-ri-chat-1-fill',
+    'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
+    'Channel::WebWidget': 'i-ri-global-fill',
+    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
+  };
+
+  const providerIconMap = {
+    microsoft: 'i-ri-microsoft-fill',
+    google: 'i-ri-google-fill',
+  };
+
+  const channelIcon = computed(() => {
+    const type = inbox.channel_type;
+    let icon = channelTypeIconMap[type];
+
+    if (type === 'Channel::Email' && inbox.provider) {
+      if (Object.keys(providerIconMap).includes(inbox.provider)) {
+        icon = providerIconMap[inbox.provider];
+      }
+    }
+
+    return icon ?? 'i-ri-global-fill';
+  });
+
+  return channelIcon;
+}
diff --git a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
new file mode 100644
index 000000000..df30d7138
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -0,0 +1,59 @@
+import { useChannelIcon } from '../provider';
+
+describe('useChannelIcon', () => {
+  it('returns correct icon for API channel', () => {
+    const inbox = { channel_type: 'Channel::Api' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-cloudy-fill');
+  });
+
+  it('returns correct icon for Facebook channel', () => {
+    const inbox = { channel_type: 'Channel::FacebookPage' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-messenger-fill');
+  });
+
+  it('returns correct icon for WhatsApp channel', () => {
+    const inbox = { channel_type: 'Channel::Whatsapp' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-whatsapp-fill');
+  });
+
+  describe('Email channel', () => {
+    it('returns mail icon for generic email channel', () => {
+      const inbox = { channel_type: 'Channel::Email' };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-mail-fill');
+    });
+
+    it('returns Microsoft icon for Microsoft email provider', () => {
+      const inbox = {
+        channel_type: 'Channel::Email',
+        provider: 'microsoft',
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-microsoft-fill');
+    });
+
+    it('returns Google icon for Google email provider', () => {
+      const inbox = {
+        channel_type: 'Channel::Email',
+        provider: 'google',
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-google-fill');
+    });
+  });
+
+  it('returns default icon for unknown channel type', () => {
+    const inbox = { channel_type: 'Channel::Unknown' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-global-fill');
+  });
+
+  it('returns default icon when channel type is undefined', () => {
+    const inbox = {};
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-global-fill');
+  });
+});
diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
index e3a2430a5..2a93089a9 100644
--- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
+import ChannelIcon from 'next/icon/ChannelIcon.vue';
 
 const props = defineProps({
   label: {
@@ -17,37 +18,6 @@ const props = defineProps({
   },
 });
 
-const channelTypeIconMap = {
-  'Channel::Api': 'i-ri-cloudy-fill',
-  'Channel::Email': 'i-ri-mail-fill',
-  'Channel::FacebookPage': 'i-ri-messenger-fill',
-  'Channel::Line': 'i-ri-line-fill',
-  'Channel::Sms': 'i-ri-chat-1-fill',
-  'Channel::Telegram': 'i-ri-telegram-fill',
-  'Channel::TwilioSms': 'i-ri-chat-1-fill',
-  'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
-  'Channel::WebWidget': 'i-ri-global-fill',
-  'Channel::Whatsapp': 'i-ri-whatsapp-fill',
-};
-
-const providerIconMap = {
-  microsoft: 'i-ri-microsoft-fill',
-  google: 'i-ri-google-fill',
-};
-
-const channelIcon = computed(() => {
-  const type = props.inbox.channel_type;
-  let icon = channelTypeIconMap[type];
-
-  if (type === 'Channel::Email' && props.inbox.provider) {
-    if (Object.keys(providerIconMap).includes(props.inbox.provider)) {
-      icon = providerIconMap[props.inbox.provider];
-    }
-  }
-
-  return icon ?? 'i-ri-global-fill';
-});
-
 const reauthorizationRequired = computed(() => {
   return props.inbox.reauthorization_required;
 });
@@ -58,7 +28,7 @@ const reauthorizationRequired = computed(() => {
     class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
     :class="{ 'bg-n-solid-blue': active }"
   >
-    <Icon :icon="channelIcon" class="size-3" />
+    <ChannelIcon :inbox="inbox" class="size-3" />
   </span>
   <div class="flex-1 truncate min-w-0">{{ label }}</div>
   <div

From 2309424cb19d5b1f9d95f11f29109ddeb2537914 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 21 Nov 2024 10:48:25 +0530
Subject: [PATCH 11/74] feat: Add Contact card and form component (#10466)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../Contacts/ContactsCard/ContactsCard.vue    | 102 ++++++
 .../ContactsCard/story/ContactsCard.story.vue |  67 ++++
 .../Contacts/ContactsCard/story/fixtures.js   | 149 +++++++++
 .../Contacts/ContactsForm/ContactsForm.vue    | 297 ++++++++++++++++++
 .../ContactsForm/story/ContactsForm.story.vue |  80 +++++
 .../Contacts/ContactsForm/story/fixtures.js   |  20 ++
 .../dashboard/i18n/locale/en/contact.json     |  56 ++++
 7 files changed, 771 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
new file mode 100644
index 000000000..4ba3546ce
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+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';
+
+const props = defineProps({
+  id: { type: Number, required: true },
+  name: { type: String, default: '' },
+  email: { type: String, default: '' },
+  additionalAttributes: { type: Object, default: () => ({}) },
+  phoneNumber: { type: String, default: '' },
+  thumbnail: { type: String, default: '' },
+  isExpanded: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
+
+const { t } = useI18n();
+
+const handleFormUpdate = updatedData => {
+  emit('updateContact', { id: props.id, updatedData });
+};
+
+const onClickViewDetails = async () => {
+  emit('showContact', props.id);
+};
+</script>
+
+<template>
+  <CardLayout :key="id" layout="row">
+    <div class="flex items-center justify-between gap-4">
+      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-2">
+          <span class="text-sm font-medium truncate text-n-slate-12">
+            {{ name }}
+          </span>
+          <template v-if="additionalAttributes?.companyName">
+            <span class="text-sm text-n-slate-11">
+              {{ t('CONTACTS_LAYOUT.CARD.OF') }}
+            </span>
+            <span class="text-sm font-medium truncate text-n-slate-12">
+              {{ additionalAttributes.companyName }}
+            </span>
+          </template>
+        </div>
+        <div class="flex items-center gap-3">
+          <span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
+          <div v-if="email" class="w-px h-3 bg-n-slate-6" />
+          <span v-if="phoneNumber" class="text-sm text-n-slate-11">
+            {{ phoneNumber }}
+          </span>
+          <div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
+          <Button
+            :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
+            variant="link"
+            size="xs"
+            @click="onClickViewDetails"
+          />
+        </div>
+      </div>
+    </div>
+
+    <Button
+      icon="i-lucide-chevron-down"
+      variant="ghost"
+      color="slate"
+      size="xs"
+      :class="{ 'rotate-180': isExpanded }"
+      @click="emit('toggle')"
+    />
+
+    <template #after>
+      <transition
+        enter-active-class="overflow-hidden transition-all duration-300 ease-out"
+        leave-active-class="overflow-hidden transition-all duration-300 ease-in"
+        enter-from-class="overflow-hidden opacity-0 max-h-0"
+        enter-to-class="opacity-100 max-h-[360px]"
+        leave-from-class="opacity-100 max-h-[360px]"
+        leave-to-class="overflow-hidden opacity-0 max-h-0"
+      >
+        <div v-show="isExpanded" class="w-full">
+          <div class="p-6 border-t border-n-strong">
+            <ContactsForm
+              :contact-data="{
+                id,
+                name,
+                email,
+                phoneNumber,
+                additionalAttributes,
+              }"
+              @update="handleFormUpdate"
+            />
+          </div>
+        </div>
+      </transition>
+    </template>
+  </CardLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue
new file mode 100644
index 000000000..3f8d5a411
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { ref } from 'vue';
+
+import ContactsCard from '../ContactsCard.vue';
+import contacts from './fixtures';
+
+const expandedCardId = ref(null);
+
+const toggleExpanded = id => {
+  expandedCardId.value = expandedCardId.value === id ? null : id;
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactsCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default with expandable function">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="contacts[0]"
+          :is-expanded="expandedCardId === contacts[0].id"
+          @toggle="toggleExpanded(contacts[0].id)"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Company Name and without phone number">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="{ ...contacts[1], phoneNumber: '' }"
+          :is-expanded="false"
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Expanded State">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="contacts[2]"
+          is-expanded
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Without Email and Phone">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="{ ...contacts[3], email: '', phoneNumber: '' }"
+          :is-expanded="false"
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js
new file mode 100644
index 000000000..67bdba9b4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js
@@ -0,0 +1,149 @@
+export default [
+  {
+    additionalAttributes: {
+      socialProfiles: {},
+    },
+    availabilityStatus: null,
+    email: 'johndoe@chatwoot.com',
+    id: 370,
+    name: 'John Doe',
+    phoneNumber: '+918634322418',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Felix',
+    customAttributes: {},
+    lastActivityAt: 1731608270,
+    createdAt: 1731586271,
+  },
+  {
+    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: null,
+    email: 'ozler@chatwoot.com',
+    id: 29,
+    name: 'Abraham Ozlers',
+    phoneNumber: '+246232222222',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Upload',
+    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,
+  },
+  {
+    additionalAttributes: {
+      city: 'Kerala',
+      country: 'India',
+      description:
+        "I'm Candice developer focusing on building things for the web 🌍. Currently, I’m working as a Product Developer here at @chatwootapp ⚡️🔥",
+      companyName: 'Chatwoot',
+      countryCode: 'IN',
+      socialProfiles: {
+        github: 'cmathersonj',
+        twitter: 'cmather',
+        facebook: 'cmathersonj',
+        linkedin: 'cmathersonj',
+        instagram: 'cmathersonjs',
+      },
+    },
+    availabilityStatus: null,
+    email: 'cmathersonj@va.test',
+    id: 22,
+    name: 'Candice Matherson',
+    phoneNumber: '+917474774742',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Emery',
+    customAttributes: {
+      dateContact: '2024-11-12T03:23:06.963Z',
+      linkContact: 'https://sd.sd',
+      textContact: 'hey',
+      numberContact: '12',
+      checkboxContact: true,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: '',
+      country: '',
+      description: '',
+      companyName: '',
+      countryCode: '',
+      socialProfiles: {
+        github: '',
+        twitter: '',
+        facebook: '',
+        linkedin: '',
+        instagram: '',
+      },
+    },
+    availabilityStatus: null,
+    email: 'ofolkardi@taobao.test',
+    id: 21,
+    name: 'Ophelia Folkard',
+    phoneNumber: '',
+    identifier: null,
+    thumbnail:
+      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBPZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--08dcac8eb72ef12b2cad92d58dddd04cd8a5f513/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/32.jpg',
+    customAttributes: {},
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      socialProfiles: {},
+    },
+    availabilityStatus: null,
+    email: 'wcasteloth@exblog.jp',
+    id: 20,
+    name: 'Willy Castelot',
+    phoneNumber: '+919384',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jade',
+    customAttributes: {},
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: '',
+      country: '',
+      description: '',
+      companyName: '',
+      countryCode: '',
+      socialProfiles: {
+        github: '',
+        twitter: '',
+        facebook: '',
+        linkedin: '',
+        instagram: '',
+      },
+    },
+    availabilityStatus: null,
+    email: 'ederingtong@printfriendly.test',
+    id: 19,
+    name: 'Elisabeth Derington',
+    phoneNumber: '',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Jade',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
new file mode 100644
index 000000000..866811ae2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -0,0 +1,297 @@
+<script setup>
+import { computed, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { required, email, minLength } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import countries from 'shared/constants/countries.js';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
+
+const props = defineProps({
+  contactData: {
+    type: Object,
+    default: null,
+  },
+  isDetailsView: {
+    type: Boolean,
+    default: false,
+  },
+  isNewContact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const { t } = useI18n();
+
+const FORM_CONFIG = {
+  FIRST_NAME: { field: 'firstName' },
+  LAST_NAME: { field: 'lastName' },
+  EMAIL_ADDRESS: { field: 'email' },
+  PHONE_NUMBER: { field: 'phoneNumber' },
+  CITY: { field: 'additionalAttributes.city' },
+  COUNTRY: { field: 'additionalAttributes.country' },
+  BIO: { field: 'additionalAttributes.description' },
+  COMPANY_NAME: { field: 'additionalAttributes.companyName' },
+};
+
+const SOCIAL_CONFIG = {
+  FACEBOOK: 'i-ri-facebook-circle-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 = {
+  id: 0,
+  name: '',
+  email: '',
+  firstName: '',
+  lastName: '',
+  phoneNumber: '',
+  additionalAttributes: {
+    description: '',
+    companyName: '',
+    countryCode: '',
+    country: '',
+    city: '',
+    socialProfiles: {
+      facebook: '',
+      github: '',
+      instagram: '',
+      linkedin: '',
+      twitter: '',
+    },
+  },
+};
+
+const state = reactive({ ...defaultState });
+
+const validationRules = {
+  firstName: { required, minLength: minLength(2) },
+  email: { email },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const prepareStateBasedOnProps = () => {
+  if (props.isNewContact) {
+    return; // Added to prevent state update for new contact form
+  }
+
+  const {
+    id,
+    name = '',
+    email: emailAddress,
+    phoneNumber,
+    additionalAttributes = {},
+  } = props.contactData || {};
+
+  const [firstName = '', lastName = ''] = name.split(' ');
+  const {
+    description,
+    companyName,
+    countryCode,
+    country,
+    city,
+    socialProfiles = {},
+  } = additionalAttributes || {};
+
+  Object.assign(state, {
+    id,
+    name,
+    firstName,
+    lastName,
+    email: emailAddress,
+    phoneNumber,
+    additionalAttributes: {
+      description,
+      companyName,
+      countryCode,
+      country,
+      city,
+      socialProfiles,
+    },
+  });
+};
+
+const countryOptions = computed(() =>
+  countries.map(({ name }) => ({ label: name, value: name }))
+);
+
+const editDetailsForm = computed(() =>
+  Object.keys(FORM_CONFIG).map(key => ({
+    key,
+    placeholder: t(
+      `CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.${key}.PLACEHOLDER`
+    ),
+  }))
+);
+
+const socialProfilesForm = computed(() =>
+  Object.entries(SOCIAL_CONFIG).map(([key, icon]) => ({
+    key,
+    placeholder: t(`CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.FORM.${key}.PLACEHOLDER`),
+    icon,
+  }))
+);
+
+const isValidationField = key => {
+  const field = FORM_CONFIG[key]?.field;
+  return ['firstName', 'email'].includes(field);
+};
+
+const getValidationKey = key => {
+  return FORM_CONFIG[key]?.field;
+};
+
+// Creates a computed property for two-way form field binding
+const getFormBinding = key => {
+  const field = FORM_CONFIG[key]?.field;
+  if (!field) return null;
+
+  return computed({
+    get: () => {
+      // Handle firstName/lastName fields
+      if (field === 'firstName' || field === 'lastName') {
+        return state[field]?.toString() || '';
+      }
+
+      // Handle nested vs non-nested fields
+      const [base, nested] = field.split('.');
+      // Example: 'email' → state.email
+      // Example: 'additionalAttributes.city' → state.additionalAttributes.city
+      return (nested ? state[base][nested] : state[base])?.toString() || '';
+    },
+
+    set: async value => {
+      // Handle name fields specially to maintain the combined 'name' field
+      if (field === 'firstName' || field === 'lastName') {
+        state[field] = value;
+        // Example: firstName="John", lastName="Doe" → name="John Doe"
+        state.name = `${state.firstName} ${state.lastName}`.trim();
+      } else {
+        // Handle nested vs non-nested fields
+        const [base, nested] = field.split('.');
+        if (nested) {
+          // Example: additionalAttributes.city = "New York"
+          state[base][nested] = value;
+        } else {
+          // Example: email = "test@example.com"
+          state[base] = value;
+        }
+      }
+
+      const isFormValid = await v$.value.$validate();
+      if (isFormValid) {
+        const { firstName, lastName, ...stateWithoutNames } = state;
+        emit('update', stateWithoutNames);
+      }
+    },
+  });
+};
+
+const getMessageType = key => {
+  return isValidationField(key) && v$.value[getValidationKey(key)]?.$error
+    ? 'error'
+    : 'info';
+};
+
+watch(() => props.contactData, prepareStateBasedOnProps, {
+  immediate: true,
+  deep: true,
+});
+
+// Expose state to parent component for avatar upload
+defineExpose({
+  state,
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="flex flex-col items-start gap-2">
+      <span class="py-1 text-sm font-medium text-n-slate-12">
+        {{ t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.TITLE') }}
+      </span>
+      <div class="grid w-full grid-cols-2 gap-4">
+        <template v-for="item in editDetailsForm" :key="item.key">
+          <ComboBox
+            v-if="item.key === 'COUNTRY'"
+            v-model="state.additionalAttributes.country"
+            :options="countryOptions"
+            :placeholder="item.placeholder"
+            class="[&>div>button]:h-8"
+            :class="{
+              '[&>div>button]:bg-n-alpha-black2 [&>div>button]:!outline-transparent':
+                !isDetailsView,
+              '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
+                isDetailsView,
+            }"
+            @update:model-value="emit('update', state)"
+          />
+          <PhoneNumberInput
+            v-else-if="item.key === 'PHONE_NUMBER'"
+            v-model="getFormBinding(item.key).value"
+            :placeholder="item.placeholder"
+            :show-border="isDetailsView"
+          />
+          <Input
+            v-else
+            v-model="getFormBinding(item.key).value"
+            :placeholder="item.placeholder"
+            :message-type="getMessageType(item.key)"
+            :custom-input-class="`h-8 !pt-1 !pb-1 ${
+              !isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
+            }`"
+            class="w-full"
+            @input="
+              isValidationField(item.key) &&
+                v$[getValidationKey(item.key)].$touch()
+            "
+            @blur="
+              isValidationField(item.key) &&
+                v$[getValidationKey(item.key)].$touch()
+            "
+          />
+        </template>
+      </div>
+    </div>
+    <div class="flex flex-col items-start gap-2">
+      <span class="py-1 text-sm font-medium text-n-slate-12">
+        {{ t('CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.TITLE') }}
+      </span>
+      <div class="flex flex-wrap gap-2">
+        <div
+          v-for="item in socialProfilesForm"
+          :key="item.key"
+          class="flex items-center h-8 gap-2 px-2 rounded-lg"
+          :class="{
+            'bg-n-alpha-2 dark:bg-n-solid-2': isDetailsView,
+            'bg-n-alpha-2 dark:bg-n-solid-3': !isDetailsView,
+          }"
+        >
+          <Icon
+            :icon="item.icon"
+            class="flex-shrink-0 text-n-slate-11 size-4"
+          />
+          <input
+            v-model="
+              state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
+            "
+            class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
+            :placeholder="item.placeholder"
+            :size="item.placeholder.length"
+            @input="emit('update', state)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
new file mode 100644
index 000000000..4be69380c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
@@ -0,0 +1,80 @@
+<script setup>
+import ContactsForm from '../ContactsForm.vue';
+import contactData from './fixtures';
+
+const handleUpdate = updatedData => {
+  console.log('Form updated:', updatedData);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactsForm"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default without border">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm :contact-data="contactData" @update="handleUpdate" />
+      </div>
+    </Variant>
+
+    <Variant title="Details View with border">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="contactData"
+          is-details-view
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Minimal Data">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="{
+            id: 21,
+            name: 'Ophelia Folkard',
+            email: 'ofolkardi@taobao.test',
+            phoneNumber: '',
+            additionalAttributes: {
+              city: '',
+              country: '',
+              description: '',
+              companyName: '',
+              countryCode: '',
+              socialProfiles: {
+                github: '',
+                twitter: '',
+                facebook: '',
+                linkedin: '',
+                instagram: '',
+              },
+            },
+          }"
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With All Social Profiles">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="{
+            ...contactData,
+            additionalAttributes: {
+              ...contactData.additionalAttributes,
+              socialProfiles: {
+                github: 'cmathersonj',
+                twitter: 'cmather',
+                facebook: 'cmathersonj',
+                linkedin: 'cmathersonj',
+                instagram: 'cmathersonjs',
+              },
+            },
+          }"
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
new file mode 100644
index 000000000..30eb6ee22
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
@@ -0,0 +1,20 @@
+export default {
+  id: 370,
+  name: 'John Doe',
+  email: 'johndoe@chatwoot.com',
+  phoneNumber: '+918634322418',
+  additionalAttributes: {
+    city: 'Kerala',
+    country: 'India',
+    description: 'Curious about the web.',
+    companyName: 'Chatwoot',
+    countryCode: 'IN',
+    socialProfiles: {
+      github: 'johndoe',
+      twitter: 'johndoe',
+      facebook: 'johndoe',
+      linkedin: 'johndoe',
+      instagram: 'johndoe',
+    },
+  },
+};
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 54a06bb53..e0483d224 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -385,5 +385,61 @@
     "DROPDOWN_ITEM": {
       "ID": "(ID: {identifier})"
     }
+  },
+
+  "CONTACTS_LAYOUT": {
+    "CARD": {
+      "OF": "of",
+      "VIEW_DETAILS": "View details",
+      "EDIT_DETAILS_FORM": {
+        "TITLE": "Edit contact details",
+        "FORM": {
+          "FIRST_NAME": {
+            "PLACEHOLDER": "Enter the first name"
+          },
+          "LAST_NAME": {
+            "PLACEHOLDER": "Enter the last name"
+          },
+          "EMAIL_ADDRESS": {
+            "PLACEHOLDER": "Enter the email address"
+          },
+          "PHONE_NUMBER": {
+            "PLACEHOLDER": "Enter the phone number"
+          },
+          "CITY": {
+            "PLACEHOLDER": "Enter the city name"
+          },
+          "COUNTRY": {
+            "PLACEHOLDER": "Select country"
+          },
+          "BIO": {
+            "PLACEHOLDER": "Enter the bio"
+          },
+          "COMPANY_NAME": {
+            "PLACEHOLDER": "Enter the company name"
+          }
+        }
+      },
+      "SOCIAL_MEDIA": {
+        "TITLE": "Edit social links",
+        "FORM": {
+          "FACEBOOK": {
+            "PLACEHOLDER": "Add Facebook"
+          },
+          "GITHUB": {
+            "PLACEHOLDER": "Add Github"
+          },
+          "INSTAGRAM": {
+            "PLACEHOLDER": "Add Instagram"
+          },
+          "LINKEDIN": {
+            "PLACEHOLDER": "Add LinkedIn"
+          },
+          "TWITTER": {
+            "PLACEHOLDER": "Add Twitter"
+          }
+        }
+      }
+    }
   }
 }

From 7b6195f28b3ca453825c6c2064de69c09d7c3715 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:25:13 +0530
Subject: [PATCH 12/74] fix: Component `<woot-tabs />` reactivity issue.
 (#10476)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request Template

## Description

This PR will fix reactivity issue with `<woot-tabs />` component.

**Cause of issue**
The `<woot-tabs />` component used an internal ref,
`internalActiveIndex` to track the `active` tab. However, it didn’t sync
with the `index` prop when updated by the parent, causing mismatched tab
selections.

**Solution**
The component now directly uses `props.index` to ensure it always
reflects the latest value from the parent. The unnecessary
`internalActiveIndex` ref has been removed. Changes to the active tab
emit a `change` event to update the parent.


## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Loom video**

**Before**

https://www.loom.com/share/76eb32f1e7f7422f84055a102bf80951?sid=bc28c6ff-9640-4d3b-956c-99c1ec164971

**After**

https://www.loom.com/share/6bd8125ede5d43dc8fe115c3f1fb159b?sid=c376617a-94fb-4f71-8664-e0bd9e7af0b4

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/components/ui/Tabs/Tabs.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
index 682957204..3a7344fb4 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
@@ -1,5 +1,4 @@
 <script setup>
-// [VITE] TODO: Test this component across different screen sizes and usages
 import { ref, provide, onMounted, computed } from 'vue';
 import { useEventListener } from '@vueuse/core';
 
@@ -17,15 +16,10 @@ const props = defineProps({
 const emit = defineEmits(['change']);
 
 const hasScroll = ref(false);
-// TODO: We may not this internalActiveIndex, we can use activeIndex directly
-// But right I'll keep it and fix it when testing the rest of the codebase
-const internalActiveIndex = ref(props.index);
 
-// Create a proxy for activeIndex using computed
 const activeIndex = computed({
-  get: () => internalActiveIndex.value,
+  get: () => props.index,
   set: newValue => {
-    internalActiveIndex.value = newValue;
     emit('change', newValue);
   },
 });

From 79daf56c311827b138a9f07e67a6269c52104486 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 22 Nov 2024 03:17:57 +0530
Subject: [PATCH 13/74] feat: Add contact note item component (#10479)

---
 .../components/ContactNoteItem.vue            | 63 +++++++++++++++++
 .../story/ContactNoteItem.story.vue           | 39 +++++++++++
 .../components/story/fixtures.js              | 69 +++++++++++++++++++
 .../dashboard/i18n/locale/en/contact.json     |  9 +++
 app/javascript/histoire.setup.ts              |  3 +
 5 files changed, 183 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
new file mode 100644
index 000000000..81f7a147f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  note: {
+    type: Object,
+    required: true,
+  },
+  writtenBy: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['delete']);
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const handleDelete = () => {
+  emit('delete', props.note.id);
+};
+</script>
+
+<template>
+  <div
+    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"
+          :src="note.user.thumbnail"
+          :size="16"
+          rounded-full
+        />
+        <div class="min-w-0 truncate">
+          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
+            <span class="font-medium">{{ writtenBy }}</span>
+            {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+            <span class="font-medium">{{ dynamicTime(note.createdAt) }}</span>
+          </span>
+        </div>
+      </div>
+      <Button
+        variant="faded"
+        color="ruby"
+        size="xs"
+        icon="i-lucide-trash"
+        class="opacity-0 group-hover/note:opacity-100"
+        @click="handleDelete"
+      />
+    </div>
+    <p
+      v-dompurify-html="formatMessage(note.content || '')"
+      class="mb-0 prose-sm prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
new file mode 100644
index 000000000..0dbf8bf01
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
@@ -0,0 +1,39 @@
+<script setup>
+import ContactNoteItem from '../ContactNoteItem.vue';
+import notes from './fixtures';
+
+const controls = {
+  writtenBy: {
+    type: 'text',
+    default: 'You',
+  },
+};
+
+// Example delete handler
+const onDelete = noteId => {
+  console.log('Note deleted:', noteId);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactNoteItem"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Multiple Notes">
+      <div class="flex flex-col border rounded-lg border-n-strong">
+        <ContactNoteItem
+          v-for="note in notes"
+          :key="note.id"
+          :note="note"
+          :written-by="
+            note.id === notes[1].id
+              ? controls.writtenBy.default
+              : note.user.name
+          "
+          @delete="onDelete"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js
new file mode 100644
index 000000000..440ad95df
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js
@@ -0,0 +1,69 @@
+export default [
+  {
+    id: 12,
+    content:
+      'This tutorial will show you how to use Chatwoot and, hence, ensure you practice effective customer communication. We will explain in detail the following:\n\n* Step-by-step setup of your account, with illustrative screenshots.\n\n* An in-depth explanation of all the core features of Chatwoot.\n\n* Get your account up and running by the end of this tutorial.\n\n* Basic concepts of customer communication.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 30,
+      account_id: 2,
+      availability_status: 'offline',
+      auto_offline: true,
+      confirmed: true,
+      email: 'bruce@paperlayer.test',
+      available_name: 'Bruce',
+      name: 'Bruce',
+      role: 'administrator',
+      thumbnail:
+        'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBJZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--515dbb35e9ba3c36d14f4c4b77220a675513c1fb/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/2.jpg',
+      custom_role_id: null,
+    },
+    createdAt: 1730786556,
+    updatedAt: 1730786556,
+  },
+  {
+    id: 10,
+    content:
+      'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 1,
+      account_id: 2,
+      availability_status: 'online',
+      auto_offline: false,
+      confirmed: true,
+      email: 'hillary@chatwoot.com',
+      available_name: 'Hillary',
+      name: 'Hillary',
+      role: 'administrator',
+      thumbnail: '',
+      custom_role_id: null,
+    },
+    createdAt: 1730782566,
+    updatedAt: 1730782566,
+  },
+  {
+    id: 9,
+    content:
+      'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 1,
+      account_id: 2,
+      availability_status: 'online',
+      auto_offline: false,
+      confirmed: true,
+      email: 'john@chatwoot.com',
+      available_name: 'John',
+      name: 'John',
+      role: 'administrator',
+      thumbnail: '',
+      custom_role_id: null,
+    },
+    createdAt: 1730782564,
+    updatedAt: 1730782564,
+  },
+];
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index e0483d224..5ac4fea21 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -440,6 +440,15 @@
           }
         }
       }
+    },
+    "SIDEBAR": {
+      "NOTES": {
+        "PLACEHOLDER": "Add a note",
+        "WROTE": "wrote",
+        "YOU": "You",
+        "SAVE": "Save note",
+        "EMPTY_STATE": "There are no notes associated to this contact. You can add a note by typing in the box above."
+      }
     }
   }
 }
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index 13a81608a..6b7358d59 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -4,6 +4,8 @@ import i18nMessages from 'dashboard/i18n';
 import { createI18n } from 'vue-i18n';
 import { vResizeObserver } from '@vueuse/components';
 import store from 'dashboard/store';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
@@ -15,4 +17,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
   app.use(store);
   app.use(i18n);
   app.directive('resize', vResizeObserver);
+  app.use(VueDOMPurifyHTML, domPurifyConfig);
 });

From 497bc055a2bf24cf3e19762cbeac99fdb2b6db52 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 22 Nov 2024 03:18:25 +0530
Subject: [PATCH 14/74] feat: Attributify button component (#10473)

This PR allows attributify for `variant`, `size` and `color` props. This allows using shorthands, instant of writing full props.

We also added a small computed method to ensure these does not show up
in the DOM and pollute it

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../components-next/button/Button.vue         | 109 ++++++++++++------
 .../components-next/button/constants.js       |  15 +++
 2 files changed, 90 insertions(+), 34 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/button/constants.js

diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 02dcfad53..b174ca375 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -1,46 +1,85 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed, useSlots, useAttrs } from 'vue';
 
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import {
+  VARIANT_OPTIONS,
+  COLOR_OPTIONS,
+  SIZE_OPTIONS,
+  EXCLUDED_ATTRS,
+} from './constants.js';
 
 const props = defineProps({
-  label: {
-    type: [String, Number],
-    default: '',
-  },
+  label: { type: [String, Number], default: '' },
   variant: {
     type: String,
-    default: 'solid',
-    validator: value =>
-      ['solid', 'outline', 'faded', 'link', 'ghost'].includes(value),
+    default: null,
+    validator: value => VARIANT_OPTIONS.includes(value) || value === null,
   },
   color: {
     type: String,
-    default: 'blue',
-    validator: value =>
-      ['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
+    default: null,
+    validator: value => COLOR_OPTIONS.includes(value) || value === null,
   },
   size: {
     type: String,
-    default: 'md',
-    validator: value => ['xs', 'sm', 'md', 'lg'].includes(value),
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  trailingIcon: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
+    default: null,
+    validator: value => SIZE_OPTIONS.includes(value) || value === null,
   },
+  icon: { type: [String, Object, Function], default: '' },
+  trailingIcon: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
 });
 
 const slots = useSlots();
+const attrs = useAttrs();
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const filteredAttrs = computed(() => {
+  const standardAttrs = {};
+
+  Object.entries(attrs)
+    .filter(([key]) => !EXCLUDED_ATTRS.includes(key))
+    .forEach(([key, value]) => {
+      standardAttrs[key] = value;
+    });
+
+  return standardAttrs;
+});
+
+const computedVariant = computed(() => {
+  if (props.variant) return props.variant;
+  // The useAttrs method returns attributes values an empty string (not boolean value as in props).
+  if (attrs.solid || attrs.solid === '') return 'solid';
+  if (attrs.outline || attrs.outline === '') return 'outline';
+  if (attrs.faded || attrs.faded === '') return 'faded';
+  if (attrs.link || attrs.link === '') return 'link';
+  if (attrs.ghost || attrs.ghost === '') return 'ghost';
+  return 'solid'; // Default variant
+});
+
+const computedColor = computed(() => {
+  if (props.color) return props.color;
+  if (attrs.blue || attrs.blue === '') return 'blue';
+  if (attrs.ruby || attrs.ruby === '') return 'ruby';
+  if (attrs.amber || attrs.amber === '') return 'amber';
+  if (attrs.slate || attrs.slate === '') return 'slate';
+  if (attrs.teal || attrs.teal === '') return 'teal';
+  return 'blue'; // Default color
+});
+
+const computedSize = computed(() => {
+  if (props.size) return props.size;
+  if (attrs.xs || attrs.xs === '') return 'xs';
+  if (attrs.sm || attrs.sm === '') return 'sm';
+  if (attrs.md || attrs.md === '') return 'md';
+  if (attrs.lg || attrs.lg === '') return 'lg';
+  return 'md';
+});
 
 const STYLE_CONFIG = {
   colors: {
@@ -113,23 +152,24 @@ const STYLE_CONFIG = {
 const variantClasses = computed(() => {
   const variantMap = {
     ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
-    link: `${STYLE_CONFIG.colors[props.color].link} p-0 font-medium underline-offset-4`,
-    outline: STYLE_CONFIG.colors[props.color].outline,
-    faded: STYLE_CONFIG.colors[props.color].faded,
-    solid: STYLE_CONFIG.colors[props.color].solid,
+    link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
+    outline: STYLE_CONFIG.colors[computedColor.value].outline,
+    faded: STYLE_CONFIG.colors[computedColor.value].faded,
+    solid: STYLE_CONFIG.colors[computedColor.value].solid,
   };
 
-  return variantMap[props.variant];
+  return variantMap[computedVariant.value];
 });
 
 const isIconOnly = computed(() => !props.label && !slots.default);
-const isLink = computed(() => props.variant === 'link');
+const isLink = computed(() => computedVariant.value === 'link');
 
 const buttonClasses = computed(() => {
   const sizeConfig = isIconOnly.value ? 'iconOnly' : 'regular';
   const classes = [
     variantClasses.value,
-    props.variant !== 'link' && STYLE_CONFIG.sizes[sizeConfig][props.size],
+    computedVariant.value !== 'link' &&
+      STYLE_CONFIG.sizes[sizeConfig][computedSize.value],
   ].filter(Boolean);
 
   return classes.join(' ');
@@ -138,7 +178,7 @@ const buttonClasses = computed(() => {
 const linkButtonClasses = computed(() => {
   const classes = [
     variantClasses.value,
-    STYLE_CONFIG.sizes.link[props.size],
+    STYLE_CONFIG.sizes.link[computedSize.value],
   ].filter(Boolean);
 
   return classes.join(' ');
@@ -147,10 +187,11 @@ const linkButtonClasses = computed(() => {
 
 <template>
   <button
+    v-bind="filteredAttrs"
     :class="{
       [STYLE_CONFIG.base]: true,
       [isLink ? linkButtonClasses : buttonClasses]: true,
-      [STYLE_CONFIG.fontSize[size]]: true,
+      [STYLE_CONFIG.fontSize[computedSize]]: true,
       'flex-row-reverse': trailingIcon && !isIconOnly,
     }"
   >
diff --git a/app/javascript/dashboard/components-next/button/constants.js b/app/javascript/dashboard/components-next/button/constants.js
new file mode 100644
index 000000000..e65299420
--- /dev/null
+++ b/app/javascript/dashboard/components-next/button/constants.js
@@ -0,0 +1,15 @@
+export const VARIANT_OPTIONS = ['solid', 'outline', 'faded', 'link', 'ghost'];
+export const COLOR_OPTIONS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
+export const SIZE_OPTIONS = ['xs', 'sm', 'md', 'lg'];
+
+export const EXCLUDED_ATTRS = [
+  'variant',
+  'color',
+  'size',
+  'icon',
+  'trailingIcon',
+  'isLoading',
+  ...VARIANT_OPTIONS,
+  ...COLOR_OPTIONS,
+  ...SIZE_OPTIONS,
+];

From cf6ef11b9fdb0d875972f35de2db0a1061fe4c74 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 22 Nov 2024 03:22:25 +0530
Subject: [PATCH 15/74] feat: Add contact merge form component (#10478)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../ContactsForm/ContactMergeForm.vue         | 112 ++++++++++++++++++
 .../story/ContactMergeForm.story.vue          |  73 ++++++++++++
 .../ContactsForm/story/ContactsForm.story.vue |   2 +-
 .../Contacts/ContactsForm/story/fixtures.js   |  29 ++++-
 .../dashboard/i18n/locale/en/contact.json     |  20 ++++
 5 files changed, 234 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
new file mode 100644
index 000000000..dc38c4649
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
@@ -0,0 +1,112 @@
+<script setup>
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+  primaryContactId: {
+    type: [Number, null],
+    default: null,
+  },
+  primaryContactList: {
+    type: Array,
+    default: () => [],
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:primaryContactId', 'search']);
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between h-5 gap-2">
+        <label class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY') }}
+        </label>
+        <span
+          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-teal-11 bg-n-alpha-2"
+        >
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_HELP_LABEL') }}
+        </span>
+      </div>
+      <ComboBox
+        id="inbox"
+        :model-value="primaryContactId"
+        :options="primaryContactList"
+        :empty-state="
+          isSearching
+            ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.IS_SEARCHING')
+            : t('CONTACTS_LAYOUT.SIDEBAR.MERGE.EMPTY_STATE')
+        "
+        :search-placeholder="
+          t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_PLACEHOLDER')
+        "
+        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PLACEHOLDER')"
+        :has-error="hasError"
+        :message="errorMessage"
+        class="[&>div>button]:bg-n-alpha-black2"
+        @update:model-value="value => emit('update:primaryContactId', value)"
+        @search="query => emit('search', query)"
+      />
+    </div>
+    <div class="relative flex justify-center gap-2 top-4">
+      <div v-for="i in 3" :key="i" class="relative w-4 h-8">
+        <div
+          class="absolute w-0 h-0 border-l-[4px] border-r-[4px] border-b-[6px] border-l-transparent border-r-transparent border-n-strong ltr:translate-x-[4px] rtl:-translate-x-[4px] -translate-y-[4px]"
+        />
+        <div
+          class="absolute w-[1px] h-full bg-n-strong left-1/2 transform -translate-x-1/2"
+        />
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between h-5 gap-2">
+        <label class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT') }}
+        </label>
+        <span
+          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-ruby-11 bg-n-alpha-2"
+        >
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT_HELP_LABEL') }}
+        </span>
+      </div>
+      <div
+        class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
+      >
+        <Avatar
+          :name="selectedContact.name || ''"
+          :src="selectedContact.thumbnail || ''"
+          :size="32"
+          rounded-full
+        />
+        <div class="flex flex-col gap-1">
+          <span class="text-sm leading-4 truncate text-n-slate-11">
+            {{ selectedContact.name }}
+          </span>
+          <span class="text-sm leading-4 truncate text-n-slate-11">
+            {{ selectedContact.email }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue
new file mode 100644
index 000000000..dbf22dadd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue
@@ -0,0 +1,73 @@
+<script setup>
+import ContactMergeForm from '../ContactMergeForm.vue';
+import { contactData, primaryContactList } from './fixtures';
+
+const handleSearch = query => {
+  console.log('Searching for:', query);
+};
+
+const handleUpdate = value => {
+  console.log('Primary contact updated:', value);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactMergeForm"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="null"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Selected Primary Contact">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="1"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="null"
+          :is-searching="false"
+          has-error
+          error-message="Please select a primary contact"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty Primary Contact List">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="[]"
+          :primary-contact-id="null"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
index 4be69380c..306df1df0 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
@@ -1,6 +1,6 @@
 <script setup>
 import ContactsForm from '../ContactsForm.vue';
-import contactData from './fixtures';
+import { contactData } from './fixtures';
 
 const handleUpdate = updatedData => {
   console.log('Form updated:', updatedData);
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
index 30eb6ee22..9d9590d63 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
@@ -1,4 +1,4 @@
-export default {
+export const contactData = {
   id: 370,
   name: 'John Doe',
   email: 'johndoe@chatwoot.com',
@@ -18,3 +18,30 @@ export default {
     },
   },
 };
+
+export const primaryContactList = [
+  {
+    id: 1,
+    name: 'Jane Smith',
+    email: 'jane@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 1) Jane Smith',
+    value: 1,
+  },
+  {
+    id: 2,
+    name: 'Mike Johnson',
+    email: 'mike@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 2) Mike Johnson',
+    value: 2,
+  },
+  {
+    id: 3,
+    name: 'Sarah Wilson',
+    email: 'sarah@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 3) Sarah Wilson',
+    value: 3,
+  },
+];
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 5ac4fea21..28335dcf8 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -442,6 +442,26 @@
       }
     },
     "SIDEBAR": {
+      "MERGE": {
+        "TITLE": "Merge contact",
+        "DESCRIPTION": "Combine two profiles into one, including all attributes and conversations. In case of conflict, the primary contact’s attributes will take precedence.",
+        "PRIMARY": "Primary contact",
+        "PRIMARY_HELP_LABEL": "To be saved",
+        "PRIMARY_REQUIRED_ERROR": "Please select a contact to merge with before proceeding",
+        "PARENT": "To be merged",
+        "PARENT_HELP_LABEL": "To be deleted",
+        "EMPTY_STATE": "No contacts found",
+        "PLACEHOLDER": "Search for primary contact",
+        "SEARCH_PLACEHOLDER": "Search for a contact",
+        "SEARCH_ERROR_MESSAGE": "Could not search for contacts. Please try again later.",
+        "SUCCESS_MESSAGE": "Contact merged successfully",
+        "ERROR_MESSAGE": "Could not merge contacts, try again!",
+        "IS_SEARCHING": "Searching...",
+        "BUTTONS": {
+          "CANCEL": "Cancel",
+          "CONFIRM": "Merge contact"
+        }
+      },
       "NOTES": {
         "PLACEHOLDER": "Add a note",
         "WROTE": "wrote",

From 2dae4b22a2dfcf778d1fff6614df6a8855b74c7c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 22 Nov 2024 03:27:43 +0530
Subject: [PATCH 16/74] feat: Add Label Input components (#10480)

---
 .../components-next/Label/AddLabel.vue        | 49 +++++++++++++++
 .../components-next/Label/LabelItem.vue       | 22 +++++++
 .../Label/story/AddLabel.story.vue            | 27 ++++++++
 .../Label/story/Label.story.vue               | 21 +++++++
 .../components-next/Label/story/fixtures.js   | 62 +++++++++++++++++++
 .../dashboard/i18n/locale/en/components.json  |  3 +
 6 files changed, 184 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Label/AddLabel.vue
 create mode 100644 app/javascript/dashboard/components-next/Label/LabelItem.vue
 create mode 100644 app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Label/story/Label.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Label/story/fixtures.js

diff --git a/app/javascript/dashboard/components-next/Label/AddLabel.vue b/app/javascript/dashboard/components-next/Label/AddLabel.vue
new file mode 100644
index 000000000..c9571e771
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/AddLabel.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+defineProps({
+  labelMenuItems: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['updateLabel']);
+
+const { t } = useI18n();
+
+const showDropdown = ref(false);
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      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"
+    >
+      <span class="i-lucide-plus" />
+      <span class="text-sm text-n-slate-11">
+        {{ t('LABEL.TAG_BUTTON') }}
+      </span>
+    </button>
+    <DropdownMenu
+      v-if="showDropdown"
+      v-on-clickaway="() => (showDropdown = false)"
+      :menu-items="labelMenuItems"
+      show-search
+      class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+      @action="emit('updateLabel', $event)"
+    >
+      <template #thumbnail="{ item }">
+        <div
+          class="rounded-sm size-2"
+          :style="{ backgroundColor: item.thumbnail.color }"
+        />
+      </template>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/LabelItem.vue b/app/javascript/dashboard/components-next/Label/LabelItem.vue
new file mode 100644
index 000000000..b96b9b368
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/LabelItem.vue
@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  label: {
+    type: Object,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div
+    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">
+      {{ label.title }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue b/app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue
new file mode 100644
index 000000000..ea6466feb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue
@@ -0,0 +1,27 @@
+<script setup>
+import AddLabel from '../AddLabel.vue';
+import { labelMenuItems } from './fixtures';
+
+function onUpdateLabel(label) {
+  console.log('Label updated:', label);
+}
+</script>
+
+<template>
+  <Story title="Components/Label/Add Label">
+    <Variant title="Default (button with label menu items with active state)">
+      <div class="h-[300px] p-4">
+        <AddLabel
+          :label-menu-items="labelMenuItems"
+          @update-label="onUpdateLabel"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty List (button with empty label menu)">
+      <div class="h-[300px] p-4">
+        <AddLabel :label-menu-items="[]" @update-label="onUpdateLabel" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/story/Label.story.vue b/app/javascript/dashboard/components-next/Label/story/Label.story.vue
new file mode 100644
index 000000000..5319d56ae
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/story/Label.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import Label from '../LabelItem.vue';
+import { label } from './fixtures';
+</script>
+
+<template>
+  <Story title="Components/Label/Label item">
+    <Variant title="Default">
+      <Label :label="label" />
+    </Variant>
+
+    <Variant title="Custom Label">
+      <Label
+        :label="{
+          title: 'Custom Label',
+          color: '#FF5733',
+        }"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/story/fixtures.js b/app/javascript/dashboard/components-next/Label/story/fixtures.js
new file mode 100644
index 000000000..980ba8c0d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/story/fixtures.js
@@ -0,0 +1,62 @@
+export const label = {
+  id: 1,
+  title: 'delivery',
+  color: '#A2FDD5',
+};
+
+export const labelMenuItems = [
+  {
+    label: 'delivery',
+    value: 3,
+    thumbnail: {
+      color: '#A2FDD5',
+    },
+    isSelected: true,
+    action: 'addLabel',
+  },
+  {
+    label: 'lead',
+    value: 6,
+    thumbnail: {
+      color: '#F161C8',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'ops-handover',
+    value: 4,
+    thumbnail: {
+      color: '#A53326',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'billing',
+    value: 1,
+    thumbnail: {
+      color: '#28AD21',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'premium-customer',
+    value: 5,
+    thumbnail: {
+      color: '#6FD4EF',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'software',
+    value: 2,
+    thumbnail: {
+      color: '#8F6EF2',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+];
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 7a0533cef..f5207fde9 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -30,5 +30,8 @@
   },
   "BREADCRUMB": {
     "ARIA_LABEL": "Breadcrumb"
+  },
+  "LABEL": {
+    "TAG_BUTTON": "tag"
   }
 }

From 0f659224a7418c7474a01b9280ac0915080fadda Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 22 Nov 2024 09:08:08 +0530
Subject: [PATCH 17/74] feat: async update of article [CW-3721] (#10435)

### The problem

Writing in the text editor can be very frustrating, the reason is that
the editor had a debounced save method which would push the article to
the backend and update the current state. This however is a bad idea,
since the can take anywhere between 100-300ms depending on network
conditions.

While this would be in progress, the article is still being edited by
the user. So at the end of the network request, the state returned from
the backend and the current state in the editor is diverged. But since
the update happens anyway, the editor would prepend older context.

```
Time   -->

User Action:      [Edit 1] ---> [Edit 2] ---> [Edit 3]
Backend Save:           Save Req (Edit 1) ----> Response (Edit 1)
Resulting Editor State: [Edit 3] + [Edit 1] (Outdated state prepended)
```

### The solution

The solution is to unbind the article from the backend state, ensuring
that the article editor is the source of truth and ignoring the
responses. This pull request does this by adding an asynchronous save
functionality. The changes include adding a new `saveArticleAsync` event
and ensuring that the local state is not updated unnecessarily during
asynchronous saves.

```
Time   -->

User Action:      [Edit 1] ---> [Edit 2] ---> [Edit 3]
Backend Save:           Save Req (Edit 1) ----> Response (ignored)
Resulting Editor State: [Edit 3] (Consistent and up-to-date)
```

Added the following two debounced methods

These complementary debounce methods prevent unnecessary re-renders
while ensuring backend is in sync. `saveArticleAsync` preserves the
editor as the source of truth, while `saveArticle` manages periodic
state updates from the backend with a delay large enough to safely
assume that the user has stopped typing
Method | Delay | Behavior
-- | -- | --
`saveArticleAsync` | 400ms | Sends data to backend and ignores the
response
`saveArticle` | 2.5s | Sends data and updates local state with the
backend response

### How to test

1. Remove the following line
https://github.com/chatwoot/chatwoot/blob/dc042f6ddcb4e108795ff83bb57f8d92c6a2b90a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue#L64
1. Update the latency here to 400 (P.S. the diff shows the latency to be
600, but that was added as a stop-gap solution)

https://github.com/chatwoot/chatwoot/blob/dc042f6ddcb4e108795ff83bb57f8d92c6a2b90a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue#L51
1. Set the browser network latency to Slow 3G or 3G
1. Start writing on the editor, try fixing typos with backspace or
moving around with the cursor

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../Pages/ArticleEditorPage/ArticleEditor.vue | 27 ++++++++++++++++---
 .../pages/PortalsArticlesEditPage.vue         | 14 ++++++----
 .../modules/helpCenterArticles/actions.js     | 19 +++++++++++++
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index f15135737..f5b925fbe 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -27,6 +27,7 @@ const props = defineProps({
 
 const emit = defineEmits([
   'saveArticle',
+  'saveArticleAsync',
   'goBack',
   'setAuthor',
   'setCategory',
@@ -35,19 +36,37 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
-const saveArticle = debounce(value => emit('saveArticle', value), 600, false);
+const saveAndSync = value => {
+  emit('saveArticle', value);
+};
+
+// this will only send the data to the backend
+// but will not update the local state preventing unnecessary re-renders
+// since the data is already saved and we keep the editor text as the source of truth
+const quickSave = debounce(
+  value => emit('saveArticleAsync', value),
+  400,
+  false
+);
+
+// 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
+const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
 
 const articleTitle = computed({
   get: () => props.article.title,
   set: value => {
-    saveArticle({ title: value });
+    quickSave({ title: value });
+    saveAndSyncDebounced({ title: value });
   },
 });
 
 const articleContent = computed({
   get: () => props.article.content,
   set: content => {
-    saveArticle({ content });
+    quickSave({ content });
+    saveAndSyncDebounced({ content });
   },
 });
 
@@ -93,7 +112,7 @@ const previewArticle = () => {
         />
         <ArticleEditorControls
           :article="article"
-          @save-article="saveArticle"
+          @save-article="saveAndSync"
           @set-author="setAuthorId"
           @set-category="setCategoryId"
         />
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
index 736b34096..3bb868a58 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
@@ -34,10 +34,11 @@ const portalLink = computed(() => {
   );
 });
 
-const saveArticle = async ({ ...values }) => {
+const saveArticle = async ({ ...values }, isAsync = false) => {
+  const actionToDispatch = isAsync ? 'articles/updateAsync' : 'articles/update';
   isUpdating.value = true;
   try {
-    await store.dispatch('articles/update', {
+    await store.dispatch(actionToDispatch, {
       portalSlug,
       articleId: articleSlug,
       ...values,
@@ -55,6 +56,10 @@ const saveArticle = async ({ ...values }) => {
   }
 };
 
+const saveArticleAsync = async ({ ...values }) => {
+  saveArticle({ ...values }, true);
+};
+
 const isCategoryArticles = computed(() => {
   return (
     route.name === 'portals_categories_articles_index' ||
@@ -92,9 +97,7 @@ const previewArticle = () => {
   });
 };
 
-onMounted(() => {
-  fetchArticleDetails();
-});
+onMounted(fetchArticleDetails);
 </script>
 
 <template>
@@ -103,6 +106,7 @@ onMounted(() => {
     :is-updating="isUpdating"
     :is-saved="isSaved"
     @save-article="saveArticle"
+    @save-article-async="saveArticleAsync"
     @preview-article="previewArticle"
     @go-back="goBackToArticles"
   />
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
index 8052cb133..e481ac2b0 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
@@ -69,6 +69,25 @@ export const actions = {
     }
   },
 
+  updateAsync: async ({ commit }, { portalSlug, articleId, ...articleObj }) => {
+    commit(types.UPDATE_ARTICLE_FLAG, {
+      uiFlags: { isUpdating: true },
+      articleId,
+    });
+
+    try {
+      await articlesAPI.updateArticle({ portalSlug, articleId, articleObj });
+      return articleId;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(types.UPDATE_ARTICLE_FLAG, {
+        uiFlags: { isUpdating: false },
+        articleId,
+      });
+    }
+  },
+
   update: async ({ commit }, { portalSlug, articleId, ...articleObj }) => {
     commit(types.UPDATE_ARTICLE_FLAG, {
       uiFlags: {

From e9ba4200b296240c00051945762f23ed3743d95f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 25 Nov 2024 06:16:00 +0530
Subject: [PATCH 18/74] feat: Add custom attributes components (#10467)

---
 .../CustomAttributes/CheckboxAttribute.vue    |  46 ++++
 .../CustomAttributes/DateAttribute.vue        | 148 +++++++++++++
 .../CustomAttributes/ListAttribute.vue        | 100 +++++++++
 .../CustomAttributes/OtherAttribute.vue       | 202 ++++++++++++++++++
 .../story/CustomAttributes.story.vue          |  83 +++++++
 .../CustomAttributes/story/fixtures.js        |  39 ++++
 .../components-next/switch/Switch.story.vue   |  56 +++++
 .../components-next/switch/Switch.vue         |  38 ++++
 .../dashboard/i18n/locale/en/components.json  |   3 +
 .../dashboard/i18n/locale/en/contact.json     |  25 +++
 10 files changed, 740 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
 create mode 100644 app/javascript/dashboard/components-next/switch/Switch.story.vue
 create mode 100644 app/javascript/dashboard/components-next/switch/Switch.vue

diff --git a/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
new file mode 100644
index 000000000..d5ecc3aab
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const attributeValue = ref(Boolean(props.attribute.value));
+
+const handleChange = value => {
+  emit('update', value);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <Switch v-model="attributeValue" @change="handleChange" />
+    <Button
+      v-if="isEditingView"
+      variant="faded"
+      color="ruby"
+      icon="i-lucide-trash"
+      size="xs"
+      class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+      @click="emit('delete')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
new file mode 100644
index 000000000..f564f0d1c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { parseISO } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+
+const isEditingValue = ref(false);
+const editedValue = ref(props.attribute.value || '');
+
+const rules = {
+  editedValue: {
+    required,
+    isDate: value => new Date(value).toISOString(),
+  },
+};
+
+const v$ = useVuelidate(rules, { editedValue });
+
+const formattedDate = computed(() => {
+  return props.attribute.value
+    ? new Date(props.attribute.value).toLocaleDateString()
+    : t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT');
+});
+
+const hasError = computed(() => v$.value.$errors.length > 0);
+
+const defaultDateValue = computed({
+  get() {
+    const existingDate = editedValue.value ?? props.attribute.value;
+    if (existingDate) return new Date(existingDate).toISOString().slice(0, 10);
+    return isEditingValue.value && !hasError.value
+      ? new Date().toISOString().slice(0, 10)
+      : '';
+  },
+  set(value) {
+    editedValue.value = value ? new Date(value).toISOString() : value;
+  },
+});
+
+const toggleEditValue = value => {
+  isEditingValue.value =
+    typeof value === 'boolean' ? value : !isEditingValue.value;
+
+  if (isEditingValue.value && !editedValue.value) {
+    v$.value.$reset();
+    editedValue.value = new Date().toISOString();
+  }
+};
+
+const handleInputUpdate = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  emit('update', parseISO(editedValue.value));
+  isEditingValue.value = false;
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <span
+      v-if="!isEditingValue"
+      class="min-w-0 text-sm"
+      :class="{
+        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+          !isEditingView,
+        'text-n-slate-12 truncate flex-1': isEditingView,
+      }"
+      @click="toggleEditValue(!isEditingView)"
+    >
+      {{ formattedDate }}
+    </span>
+
+    <div
+      v-if="isEditingView && !isEditingValue"
+      class="flex items-center gap-1"
+    >
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleEditValue(true)"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+
+    <div
+      v-if="isEditingValue"
+      v-on-clickaway="() => toggleEditValue(false)"
+      class="flex items-center w-full"
+    >
+      <Input
+        v-model="defaultDateValue"
+        type="date"
+        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        :message="
+          hasError
+            ? t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_DATE')
+            : ''
+        "
+        :message-type="hasError ? 'error' : 'info'"
+        autofocus
+        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
+        @keyup.enter="handleInputUpdate"
+      />
+      <Button
+        icon="i-lucide-check"
+        :color="hasError ? 'ruby' : 'blue'"
+        size="sm"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        @click="handleInputUpdate"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
new file mode 100644
index 000000000..a9831762f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+
+const [showAttributeListDropdown, toggleAttributeListDropdown] = useToggle();
+
+const attributeListMenuItems = computed(() => {
+  return (
+    props.attribute.attributeValues?.map(value => ({
+      label: value,
+      value,
+      action: 'select',
+      isSelected: value === props.attribute.value,
+    })) || []
+  );
+});
+
+const handleAttributeAction = async action => {
+  emit('update', action.value);
+  toggleAttributeListDropdown(false);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <div
+      v-on-clickaway="() => toggleAttributeListDropdown(false)"
+      class="relative flex items-center"
+    >
+      <span
+        class="min-w-0 text-sm"
+        :class="{
+          'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+            !isEditingView,
+          'text-n-slate-12 truncate flex-1': isEditingView,
+        }"
+        @click="toggleAttributeListDropdown(!props.isEditingView)"
+      >
+        {{
+          attribute.value ||
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.SELECT')
+        }}
+      </span>
+      <DropdownMenu
+        v-if="showAttributeListDropdown"
+        :menu-items="attributeListMenuItems"
+        show-search
+        class="w-48 mt-2 top-full"
+        :class="{
+          'ltr:right-0 rtl:left-0': !isEditingView,
+          'ltr:left-0 rtl:right-0': isEditingView,
+        }"
+        @action="handleAttributeAction($event)"
+      />
+    </div>
+
+    <div v-if="isEditingView" class="flex items-center gap-1">
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleAttributeListDropdown()"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
new file mode 100644
index 000000000..8b5b538c3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
@@ -0,0 +1,202 @@
+<!-- Attribute type "Text, URL, Number" -->
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { isValidURL } from 'dashboard/helper/URLHelper.js';
+import { getRegexp } from 'shared/helpers/Validators';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+const isEditingValue = ref(false);
+const editedValue = ref(props.attribute.value || '');
+
+const isAttributeTypeLink = computed(
+  () => props.attribute.attributeDisplayType === 'link'
+);
+
+const isAttributeTypeText = computed(
+  () => props.attribute.attributeDisplayType === 'text'
+);
+
+const isAttributeTypeNumber = computed(
+  () => props.attribute.attributeDisplayType === 'number'
+);
+
+const rules = computed(() => ({
+  editedValue: {
+    required,
+    ...(isAttributeTypeLink.value && {
+      url: value => !value || isValidURL(value),
+    }),
+    ...(isAttributeTypeText.value &&
+      props.attribute.regexPattern && {
+        regexValidation: value => {
+          if (!value) return true;
+          return getRegexp(props.attribute.regexPattern).test(value);
+        },
+      }),
+  },
+}));
+
+const v$ = useVuelidate(rules, { editedValue });
+
+const hasError = computed(() => v$.value.$error);
+
+const attributeErrorMessage = computed(() => {
+  if (!hasError.value) return '';
+
+  if (isAttributeTypeLink.value && v$.value.editedValue.url?.$invalid) {
+    return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_URL');
+  }
+
+  if (
+    isAttributeTypeText.value &&
+    props.attribute.regexPattern &&
+    v$.value.editedValue.regexValidation?.$invalid
+  ) {
+    return (
+      props.attribute.regexCue ||
+      t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_INPUT')
+    );
+  }
+
+  if (isAttributeTypeNumber.value && v$.value.editedValue.required?.$invalid) {
+    return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_NUMBER');
+  }
+
+  return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.REQUIRED');
+});
+
+const getInputType = computed(() => {
+  switch (props.attribute.attributeDisplayType) {
+    case 'link':
+      return 'url';
+    case 'number':
+      return 'number';
+    default:
+      return 'text';
+  }
+});
+
+const toggleEditValue = value => {
+  isEditingValue.value =
+    typeof value === 'boolean' ? value : !isEditingValue.value;
+  if (isEditingValue.value) {
+    v$.value.$reset();
+    editedValue.value = props.attribute.value || '';
+  }
+};
+
+const handleInputUpdate = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  emit('update', editedValue.value);
+  toggleEditValue(false);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <span
+      v-if="!isEditingValue"
+      class="min-w-0 text-sm"
+      :class="{
+        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+          !isEditingView,
+        'text-n-slate-12 truncate flex-1':
+          isEditingView && !isAttributeTypeLink,
+        'truncate flex-1 hover:text-n-brand text-n-blue-text':
+          isEditingView && isAttributeTypeLink,
+      }"
+      @click="toggleEditValue(!isEditingView)"
+    >
+      <a
+        v-if="isAttributeTypeLink && attribute.value && isEditingView"
+        :href="attribute.value"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hover:underline"
+        @click.stop
+      >
+        {{ attribute.value }}
+      </a>
+      <template v-else>
+        {{
+          attribute.value ||
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')
+        }}
+      </template>
+    </span>
+
+    <div
+      v-if="isEditingView && !isEditingValue"
+      class="flex items-center gap-1"
+    >
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleEditValue(true)"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+
+    <div
+      v-if="isEditingValue"
+      v-on-clickaway="() => toggleEditValue(false)"
+      class="flex items-center w-full"
+    >
+      <Input
+        v-model="editedValue"
+        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')"
+        :type="getInputType"
+        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        autofocus
+        :message="attributeErrorMessage"
+        :message-type="hasError ? 'error' : 'info'"
+        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
+        @keyup.enter="handleInputUpdate"
+      />
+      <Button
+        icon="i-lucide-check"
+        :color="hasError ? 'ruby' : 'blue'"
+        size="sm"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        @click="handleInputUpdate"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue b/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
new file mode 100644
index 000000000..ea87a3f0c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
@@ -0,0 +1,83 @@
+<script setup>
+import Attributes from './fixtures';
+
+import OtherAttribute from '../OtherAttribute.vue';
+import ListAttribute from '../ListAttribute.vue';
+import DateAttribute from '../DateAttribute.vue';
+import CheckboxAttribute from '../CheckboxAttribute.vue';
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const getCurrentComponent = type => {
+  return componentMap[type] || componentMap.default;
+};
+
+const handleUpdate = (type, value) => {
+  console.log(`${type} updated:`, value);
+};
+
+const handleDelete = type => {
+  console.log(`${type} deleted`);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/CustomAttributes"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Create View">
+      <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
+        <div
+          v-for="attribute in Attributes"
+          :key="attribute.attributeKey"
+          class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
+        >
+          <div class="flex items-center justify-between truncate">
+            <span class="text-sm font-medium text-n-slate-12">
+              {{ attribute.attributeDisplayName }}
+            </span>
+          </div>
+          <component
+            :is="getCurrentComponent(attribute.attributeDisplayType)"
+            :attribute="attribute"
+            @update="
+              value => handleUpdate(attribute.attributeDisplayType, value)
+            "
+            @delete="() => handleDelete(attribute.attributeDisplayType)"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Saved View">
+      <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
+        <div
+          v-for="attribute in Attributes"
+          :key="attribute.attributeKey"
+          class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
+        >
+          <div class="flex items-center justify-between truncate">
+            <span class="text-sm font-medium text-n-slate-12">
+              {{ attribute.attributeDisplayName }}
+            </span>
+          </div>
+          <component
+            :is="getCurrentComponent(attribute.attributeDisplayType)"
+            :attribute="attribute"
+            is-editing-view
+            @update="
+              value => handleUpdate(attribute.attributeDisplayType, value)
+            "
+            @delete="() => handleDelete(attribute.attributeDisplayType)"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js b/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
new file mode 100644
index 000000000..7cd600dcf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
@@ -0,0 +1,39 @@
+export default [
+  {
+    attributeKey: 'textContact',
+    attributeDisplayName: 'Text Input',
+    attributeDisplayType: 'text',
+    value: 'Sample text value',
+  },
+  {
+    attributeKey: 'linkContact',
+    attributeDisplayName: 'URL Input',
+    attributeDisplayType: 'link',
+    value: 'https://www.chatwoot.com',
+  },
+  {
+    attributeKey: 'numberContact',
+    attributeDisplayName: 'Number Input',
+    attributeDisplayType: 'number',
+    value: '42',
+  },
+  {
+    attributeKey: 'listContact',
+    attributeDisplayName: 'List Input',
+    attributeDisplayType: 'list',
+    value: 'Option 2',
+    attributeValues: ['Option 1', 'Option 2', 'Option 3'],
+  },
+  {
+    attributeKey: 'dateContact',
+    attributeDisplayName: 'Date Input',
+    attributeDisplayType: 'date',
+    value: '2024-03-25T00:00:00.000Z',
+  },
+  {
+    attributeKey: 'checkboxContact',
+    attributeDisplayName: 'Checkbox Input',
+    attributeDisplayType: 'checkbox',
+    value: true,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/switch/Switch.story.vue b/app/javascript/dashboard/components-next/switch/Switch.story.vue
new file mode 100644
index 000000000..9e4f7ae63
--- /dev/null
+++ b/app/javascript/dashboard/components-next/switch/Switch.story.vue
@@ -0,0 +1,56 @@
+<script setup>
+import Switch from './Switch.vue';
+import { ref } from 'vue';
+
+// Default varian
+const isEnabled = ref(false);
+
+// States variant
+const defaultValue = ref(false);
+const checkedValue = ref(true);
+
+// Events variant
+const eventValue = ref(false);
+const lastChange = ref('No changes yet');
+
+const onChange = value => {
+  lastChange.value = `Changed to: ${value} at ${new Date().toLocaleTimeString()}`;
+};
+</script>
+
+<template>
+  <Story title="Components/Switch" :layout="{ type: 'grid', width: '200px' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <Switch v-model="isEnabled" />
+      </div>
+    </Variant>
+
+    <Variant title="States">
+      <div class="p-2 space-y-4">
+        <div class="flex items-center gap-4">
+          <span class="w-20">Default:</span>
+          <Switch v-model="defaultValue" />
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-20">Checked:</span>
+          <Switch v-model="checkedValue" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Events">
+      <div class="p-2 space-y-4">
+        <Switch v-model="eventValue" @change="onChange" />
+        <div class="text-sm text-gray-600">Last change: {{ lastChange }}</div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="p-2">
+        <Switch v-model="isEnabled" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/switch/Switch.vue b/app/javascript/dashboard/components-next/switch/Switch.vue
new file mode 100644
index 000000000..e8f409c0e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/switch/Switch.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits(['change']);
+
+const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: Boolean,
+  default: false,
+});
+
+const updateValue = () => {
+  modelValue.value = !modelValue.value;
+  emit('change', !modelValue.value);
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:ring-offset-n-slate-2 focus:ring-offset-2"
+    :class="modelValue ? 'bg-n-brand' : 'bg-n-alpha-1 dark:bg-n-alpha-2'"
+    role="switch"
+    :aria-checked="modelValue"
+    @click="updateValue"
+  >
+    <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
+    <span
+      class="absolute top-px left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      :class="
+        modelValue
+          ? 'translate-x-2.5 bg-white'
+          : 'translate-x-0 bg-white dark:bg-n-black'
+      "
+    />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index f5207fde9..69cd57fee 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -31,6 +31,9 @@
   "BREADCRUMB": {
     "ARIA_LABEL": "Breadcrumb"
   },
+  "SWITCH": {
+    "TOGGLE": "Toggle switch"
+  },
   "LABEL": {
     "TAG_BUTTON": "tag"
   }
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 28335dcf8..defc28e67 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -442,6 +442,31 @@
       }
     },
     "SIDEBAR": {
+      "ATTRIBUTES": {
+        "SEARCH_PLACEHOLDER": "Search for attributes",
+        "UNUSED_ATTRIBUTES": "{count} Used attribute | {count} Unused attributes",
+        "EMPTY_STATE": "There are no contact custom attributes available in this account. You can create a custom attribute in settings.",
+        "YES": "Yes",
+        "NO": "No",
+        "TRIGGER": {
+          "SELECT": "Select value",
+          "INPUT": "Enter value"
+        },
+        "VALIDATIONS": {
+          "INVALID_NUMBER": "Invalid number",
+          "REQUIRED": "Valid value is required",
+          "INVALID_INPUT": "Invalid input",
+          "INVALID_URL": "Invalid URL",
+          "INVALID_DATE": "Invalid date"
+        },
+        "NO_ATTRIBUTES": "No attributes found",
+        "API": {
+          "SUCCESS_MESSAGE": "Attribute updated successfully",
+          "DELETE_SUCCESS_MESSAGE": "Attribute deleted successfully",
+          "UPDATE_ERROR": "Unable to update attribute. Please try again later",
+          "DELETE_ERROR": "Unable to delete attribute. Please try again later"
+        }
+      },
       "MERGE": {
         "TITLE": "Merge contact",
         "DESCRIPTION": "Combine two profiles into one, including all attributes and conversations. In case of conflict, the primary contact’s attributes will take precedence.",

From c23cd094f9f11515306304529dc3c4b84695a6b5 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 26 Nov 2024 01:22:28 +0530
Subject: [PATCH 19/74] feat(v4): Add filter input components (#10493)

This PR adds three components along with stories

1. MultiSelect - This is used for filter values, allowing multiple values and folding of values where there are too many items
2. SingleSelect - This is used for filter values, allows selecting and toggling a single item
3. FilterSelect - This is used for operators and others, it allows icons and labels as well as toggling them using props. The v-model for this binds just the final value unlike the previous two components with bind the entire object.

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../dropdown-menu/base/DropdownContainer.vue  |   5 +-
 .../filter/inputs/FilterSelect.story.vue      |  66 ++++++++
 .../filter/inputs/FilterSelect.vue            |  76 +++++++++
 .../filter/inputs/MultiSelect.story.vue       |  26 ++++
 .../filter/inputs/MultiSelect.vue             | 146 ++++++++++++++++++
 .../filter/inputs/SingleSelect.story.vue      |  33 ++++
 .../filter/inputs/SingleSelect.vue            | 124 +++++++++++++++
 .../dashboard/i18n/locale/en/components.json  |   4 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  10 ++
 tailwind.config.js                            |   2 +-
 11 files changed, 489 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
index ee81e4b98..a3b53f955 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
 import { provideDropdownContext } from './provider.js';
 
 const emit = defineEmits(['close']);
@@ -20,9 +21,9 @@ provideDropdownContext({
 </script>
 
 <template>
-  <div class="relative z-20 space-y-2">
+  <div class="relative space-y-2">
     <slot name="trigger" :is-open :toggle="() => toggle()" />
-    <div v-if="isOpen" v-on-clickaway="closeMenu" class="absolute">
+    <div v-if="isOpen" v-on-click-outside="closeMenu" class="absolute">
       <slot />
     </div>
   </div>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue
new file mode 100644
index 000000000..23b76081e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from 'vue';
+import FilterSelect from './FilterSelect.vue';
+
+const options = [
+  { value: 'EQUAL_TO', label: 'Equal To', icon: 'i-ph-equals-bold' },
+  {
+    value: 'NOT_EQUAL_TO',
+    label: 'Not Equal To',
+    icon: 'i-ph-not-equals-bold',
+  },
+  { value: 'IS_PRESENT', label: 'Is Present', icon: 'i-ph-member-of-bold' },
+  {
+    value: 'IS_NOT_PRESENT',
+    label: 'Is Not Present',
+    icon: 'i-ph-not-member-of-bold',
+  },
+  { value: 'CONTAINS', label: 'Contains', icon: 'i-ph-superset-of-bold' },
+  {
+    value: 'DOES_NOT_CONTAIN',
+    label: 'Does Not Contain',
+    icon: 'i-ph-not-superset-of-bold',
+  },
+  {
+    value: 'IS_GREATER_THAN',
+    label: 'Is Greater Than',
+    icon: 'i-ph-greater-than-bold',
+  },
+  { value: 'IS_LESS_THAN', label: 'Is Less Than', icon: 'i-ph-less-than-bold' },
+  {
+    value: 'DAYS_BEFORE',
+    label: 'Days Before',
+    icon: 'i-ph-calendar-minus-bold',
+  },
+  {
+    value: 'STARTS_WITH',
+    label: 'Starts With',
+    icon: 'i-ph-caret-line-right-bold',
+  },
+];
+
+const selected = ref(options[0].value);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Filter Select"
+    :layout="{ type: 'grid', width: '250px' }"
+  >
+    <Variant title="With Icon & Label">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Icon">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" hide-icon :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Label">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" hide-label :options="options" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
new file mode 100644
index 000000000..d44316d4a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from 'vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+import Button from 'next/button/Button.vue';
+
+// [{label, icon, value}]
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  hideLabel: {
+    type: Boolean,
+    default: false,
+  },
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String,
+    default: 'faded',
+  },
+});
+
+const selected = defineModel({
+  type: [String, Number],
+  required: true,
+});
+
+const selectedOption = computed(() => {
+  return props.options.find(o => o.value === selected.value) || {};
+});
+
+const iconToRender = computed(() => {
+  if (props.hideIcon) return null;
+  return selectedOption.value.icon || 'i-lucide-chevron-down';
+});
+
+const updateSelected = newValue => {
+  selected.value = newValue;
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <slot name="trigger" :toggle="toggle">
+        <Button
+          sm
+          slate
+          :variant
+          :icon="iconToRender"
+          :trailing-icon="selectedOption.icon ? false : true"
+          :label="hideLabel ? null : selectedOption.label"
+          @click="toggle"
+        />
+      </slot>
+    </template>
+    <DropdownBody class="top-0 min-w-48 z-[999]">
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <DropdownItem
+          v-for="option in options"
+          :key="option.value"
+          :label="option.label"
+          :icon="option.icon"
+          @click="updateSelected(option.value)"
+        />
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue
new file mode 100644
index 000000000..6452945f3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from 'vue';
+import MultiSelect from './MultiSelect.vue';
+
+const options = [
+  { name: 'Open', id: 'open' },
+  { name: 'Closed', id: 'closed' },
+  { name: 'Pending', id: 'pending' },
+  { name: 'Resolved', id: 'resolved' },
+  { name: 'Spam', id: 'spam' },
+  { name: 'All', id: 'all' },
+];
+
+const selected = ref([]);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Multiselect Input"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <div class="min-h-[400px]">
+      <MultiSelect v-model="selected" :options="options" />
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
new file mode 100644
index 000000000..23f3f6c28
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { defineModel, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'next/icon/Icon.vue';
+import Button from 'next/button/Button.vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+const { options, maxChips } = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  maxChips: {
+    type: Number,
+    default: 3,
+  },
+});
+
+const { t } = useI18n();
+const selected = defineModel({
+  type: [Array, String],
+  required: true,
+});
+
+const hasItems = computed(() => {
+  if (!selected.value) return false;
+  if (!Array.isArray(selected.value)) return false;
+  if (selected.value.length === 0) return false;
+
+  return true;
+});
+
+const selectedIds = computed(() => {
+  if (!hasItems.value) return [];
+  return selected.value.map(value => value.id);
+});
+
+const selectedItems = computed(() => {
+  // Options has additional properties, so we need to use them directly
+  if (!hasItems.value) return [];
+  return options.filter(option => selectedIds.value.includes(option.id));
+});
+
+const selectedVisibleItems = computed(() => {
+  if (!hasItems.value) return [];
+  // avoid showing "+1 more" coz it takes up space anway, might as well show it
+  if (selectedItems.value.length === maxChips + 1) return selectedItems.value;
+  // if we have more than maxChips then show only maxChips
+  return selectedItems.value.slice(0, maxChips);
+});
+
+const remainingItems = computed(() => {
+  if (!hasItems.value) return [];
+  if (selectedItems.value.length === maxChips + 1) return [];
+  return selectedItems.value.slice(maxChips);
+});
+
+const remainingTooltip = computed(() => {
+  if (!hasItems.value) return '';
+  return remainingItems.value.map(item => item.name).join(', ');
+});
+
+const toggleOption = option => {
+  // Ensure that the `icon` prop is not included, icon is a VNode which has circular references
+  // This causes an error when creating a clone using JSON.parse(JSON.stringify())
+  const optionToToggle = {
+    id: option.id,
+    name: option.name,
+  };
+
+  const idToToggle = optionToToggle.id;
+
+  if (!hasItems.value) {
+    selected.value = [optionToToggle];
+    return;
+  }
+
+  if (selectedIds.value.includes(idToToggle)) {
+    selected.value = selected.value.filter(value => value.id !== idToToggle);
+  } else {
+    selected.value = [...selected.value, optionToToggle];
+  }
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <button
+        v-if="hasItems"
+        class="bg-n-alpha-2 py-2 rounded-lg h-8 flex items-center px-0"
+        @click="toggle"
+      >
+        <div
+          v-for="item in selectedVisibleItems"
+          :key="item.name"
+          class="px-3 border-r rtl:border-l rtl:border-r-0 border-n-weak text-n-slate-12 text-sm flex gap-2 items-center max-w-[100px]"
+        >
+          <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
+          <span class="truncate">{{ item.name }}</span>
+        </div>
+        <div
+          v-if="remainingItems.length > 0"
+          v-tooltip.top="remainingTooltip"
+          class="px-3 border-r rtl:border-l rtl:border-r-0 border-n-weak text-n-slate-12 text-sm flex gap-2 items-center max-w-[100px]"
+        >
+          <span class="truncate">{{
+            t('COMBOBOX.MORE', { count: remainingItems.length })
+          }}</span>
+        </div>
+        <div class="flex items-center border-none px-3 gap-2">
+          <Icon icon="i-lucide-plus" />
+        </div>
+      </button>
+      <Button v-else sm slate faded @click="toggle">
+        <template #icon>
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+        </template>
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+      </Button>
+    </template>
+    <DropdownBody class="top-0 min-w-48 z-[999]">
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <DropdownItem
+          v-for="option in options"
+          :key="option.id"
+          :icon="option.icon"
+          preserve-open
+          @click="toggleOption(option)"
+        >
+          <template #label>
+            {{ option.name }}
+            <Icon
+              v-if="selectedIds.includes(option.id)"
+              icon="i-lucide-check"
+              class="bg-n-blue-text pointer-events-none"
+            />
+          </template>
+        </DropdownItem>
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue
new file mode 100644
index 000000000..233a958f2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { ref } from 'vue';
+import SingleSelect from './SingleSelect.vue';
+
+const options = [
+  { name: 'Open', id: 'open' },
+  { name: 'Closed', id: 'closed' },
+  { name: 'Pending', id: 'pending' },
+  { name: 'Resolved', id: 'resolved' },
+  { name: 'Spam', id: 'spam' },
+  { name: 'All', id: 'all' },
+];
+
+const selected = ref(options[0]);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Single Select Input"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="With Search">
+      <div class="min-h-[400px]">
+        <SingleSelect v-model="selected" :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Search">
+      <div class="min-h-[400px]">
+        <SingleSelect v-model="selected" disable-search :options="options" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
new file mode 100644
index 000000000..6a79b3438
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { defineModel, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { picoSearch } from '@scmmishra/pico-search';
+import Icon from 'next/icon/Icon.vue';
+import Button from 'next/button/Button.vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+const { options } = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  disableSearch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const selected = defineModel({
+  type: Object,
+  required: true,
+});
+
+const searchTerm = ref('');
+const searchResults = computed(() => {
+  if (!options) return [];
+  return picoSearch(options, searchTerm.value, ['name']);
+});
+
+const selectedItem = computed(() => {
+  if (!options) return null;
+  if (!selected.value) return null;
+
+  // there are cases where the selected value is an array
+  const optionToSearch = Array.isArray(selected.value)
+    ? selected.value[0]
+    : selected.value;
+  // extract the selected item from the options array
+  // this ensures that options like icon is also included
+  return options.find(option => option.id === optionToSearch.id);
+});
+
+const toggleSelected = option => {
+  // Ensure that the `icon` prop is not included, icon is a VNode which has circular references
+  // This causes an error when creating a clone using JSON.parse(JSON.stringify())
+  const optionToToggle = {
+    id: option.id,
+    name: option.name,
+  };
+
+  if (selected.value && selected.value.id === optionToToggle.id) {
+    selected.value = null;
+  } else {
+    selected.value = optionToToggle;
+  }
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <Button
+        v-if="selectedItem"
+        sm
+        slate
+        faded
+        :icon="selectedItem.icon"
+        :label="selectedItem.name"
+        @click="toggle"
+      />
+      <Button v-else sm slate faded @click="toggle">
+        <template #icon>
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+        </template>
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+      </Button>
+    </template>
+    <DropdownBody class="top-0 min-w-56 z-[999]">
+      <div v-if="!disableSearch" class="relative">
+        <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
+        <input
+          v-model="searchTerm"
+          autofocus
+          class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
+          :placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
+        />
+      </div>
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <template v-if="searchResults.length">
+          <DropdownItem
+            v-for="option in searchResults"
+            :key="option.id"
+            :icon="option.icon"
+            @click="toggleSelected(option)"
+          >
+            <template #label>
+              {{ option.name }}
+              <Icon
+                v-if="selectedItem && selectedItem.id === option.id"
+                icon="i-lucide-check"
+                class="bg-n-blue-text pointer-events-none"
+              />
+            </template>
+          </DropdownItem>
+        </template>
+        <template v-else-if="searchTerm">
+          <DropdownItem disabled>
+            {{ t('COMBOBOX.EMPTY_SEARCH_RESULTS', { searchTerm: searchTerm }) }}
+          </DropdownItem>
+        </template>
+        <template v-else>
+          <DropdownItem disabled>
+            {{ t('COMBOBOX.EMPTY_STATE') }}
+          </DropdownItem>
+        </template>
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 69cd57fee..cafedd5fa 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -5,8 +5,10 @@
   },
   "COMBOBOX": {
     "PLACEHOLDER": "Select an option...",
+    "EMPTY_SEARCH_RESULTS": "No items found for the search term `{searchTerm}`",
     "EMPTY_STATE": "No results found.",
-    "SEARCH_PLACEHOLDER": "Search..."
+    "SEARCH_PLACEHOLDER": "Search...",
+    "MORE": "+{count} more"
   },
   "DROPDOWN_MENU": {
     "SEARCH_PLACEHOLDER": "Search...",
diff --git a/package.json b/package.json
index fc2de8c7d..a2dac35df 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
     "@histoire/plugin-vue": "0.17.15",
     "@iconify-json/logos": "^1.2.3",
     "@iconify-json/lucide": "^1.2.11",
+    "@iconify-json/ph": "^1.2.1",
     "@iconify-json/ri": "^1.2.3",
     "@size-limit/file": "^8.2.4",
     "@vitest/coverage-v8": "2.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed87f5009..0ba6b2391 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -233,6 +233,9 @@ importers:
       '@iconify-json/lucide':
         specifier: ^1.2.11
         version: 1.2.11
+      '@iconify-json/ph':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@iconify-json/ri':
         specifier: ^1.2.3
         version: 1.2.3
@@ -878,6 +881,9 @@ packages:
   '@iconify-json/lucide@1.2.11':
     resolution: {integrity: sha512-dqpbV7+g1qqxtZOHCZKwdKhtYYqEUjFhYiOg/+PcADbjtapoL+bwa1Brn12gAHq5r2K7Mf29xRHOTmZ3UHHOrw==}
 
+  '@iconify-json/ph@1.2.1':
+    resolution: {integrity: sha512-x0DNfwWrS18dbsBYOq3XGiZnGz4CgRyC+YSl/TZvMQiKhIUl1woWqUbMYqqfMNUBzjyk7ulvaRovpRsIlqIf8g==}
+
   '@iconify-json/ri@1.2.3':
     resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==}
 
@@ -5708,6 +5714,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ph@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ri@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/tailwind.config.js b/tailwind.config.js
index 578b963d6..69c4c4bf3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -126,7 +126,7 @@ const tailwindConfig = {
             },
           },
         },
-        ...getIconCollections(['lucide', 'logos', 'ri']),
+        ...getIconCollections(['lucide', 'logos', 'ri', 'ph']),
       },
     }),
   ],

From b0287fe389a8a0dfa2912e790c3008ccb9876923 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 26 Nov 2024 06:03:12 +0530
Subject: [PATCH 20/74] feat: Add conditions row component (#10496)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .codeclimate.yml                              |   2 +
 .../filter/ConditionRow.story.vue             |  58 ++
 .../components-next/filter/ConditionRow.vue   | 197 +++++++
 .../filter/fixtures/filterTypes.js            | 558 ++++++++++++++++++
 .../dashboard/helper/validations.js           |   2 +-
 tailwind.config.js                            |   6 +
 6 files changed, 822 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/ConditionRow.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js

diff --git a/.codeclimate.yml b/.codeclimate.yml
index 5e16262da..213f7d172 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -57,3 +57,5 @@ exclude_patterns:
   - 'app/javascript/shared/constants/locales.js'
   - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
   - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
+  - '**/fixtures/**'
+  - '**/*/fixtures.js'
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
new file mode 100644
index 000000000..4c4c3c80b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+import ConditionRow from './ConditionRow.vue';
+import Button from 'next/button/Button.vue';
+import { filterTypes } from './fixtures/filterTypes.js';
+
+const DEFAULT_FILTER = {
+  attributeKey: 'status',
+  filterOperator: 'equal_to',
+  values: [],
+  queryOperator: 'and',
+};
+
+const filters = ref([{ ...DEFAULT_FILTER }]);
+
+const removeFilter = index => {
+  filters.value.splice(index, 1);
+};
+
+const showQueryOperator = true;
+
+const addFilter = () => {
+  filters.value.push({ ...DEFAULT_FILTER });
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/ConditionRow"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <div class="min-h-[400px] p-2 space-y-2">
+      <template v-for="(filter, index) in filters" :key="`filter-${index}`">
+        <ConditionRow
+          v-if="index === 0"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          :show-query-operator="false"
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+
+        <ConditionRow
+          v-else
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          v-model:query-operator="filters[index - 1].queryOperator"
+          :show-query-operator
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+      </template>
+      <Button sm label="Add Filter" @click="addFilter" />
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
new file mode 100644
index 000000000..079313933
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -0,0 +1,197 @@
+<script setup>
+import { computed, defineModel, h, watch, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'next/button/Button.vue';
+import FilterSelect from './inputs/FilterSelect.vue';
+import MultiSelect from './inputs/MultiSelect.vue';
+import SingleSelect from './inputs/SingleSelect.vue';
+
+import { validateSingleFilter } from 'dashboard/helper/validations.js';
+
+// filterTypes: import('vue').ComputedRef<FilterType[]>
+const { filterTypes } = defineProps({
+  showQueryOperator: { type: Boolean, default: false },
+  filterTypes: { type: Array, required: true },
+});
+
+const emit = defineEmits(['remove']);
+const { t } = useI18n();
+const showErrors = ref(false);
+
+const attributeKey = defineModel('attributeKey', {
+  type: String,
+  required: true,
+});
+
+const values = defineModel('values', {
+  type: [String, Number, Array, Object],
+  required: true,
+});
+
+const filterOperator = defineModel('filterOperator', {
+  type: String,
+  required: true,
+});
+
+const queryOperator = defineModel('queryOperator', {
+  type: String,
+  required: false,
+  default: undefined,
+  validator: value => ['and', 'or'].includes(value),
+});
+
+const getFilterFromFilterTypes = key =>
+  filterTypes.find(filterObj => filterObj.attributeKey === key);
+
+const currentFilter = computed(() =>
+  getFilterFromFilterTypes(attributeKey.value)
+);
+
+const getOperator = (filter, selectedOperator) => {
+  const operatorFromOptions = filter.filterOperators.find(
+    operator => operator.value === selectedOperator
+  );
+
+  if (!operatorFromOptions) {
+    return filter.filterOperators[0];
+  }
+
+  return operatorFromOptions;
+};
+
+const currentOperator = computed(() =>
+  getOperator(currentFilter.value, filterOperator.value)
+);
+
+const getInputType = (operator, filter) =>
+  operator.inputOverride ?? filter.inputType;
+
+const inputType = computed(() =>
+  getInputType(currentOperator.value, currentFilter.value)
+);
+
+const queryOperatorOptions = computed(() => {
+  return [
+    {
+      label: t(`FILTER.QUERY_DROPDOWN_LABELS.AND`),
+      value: 'and',
+      icon: h('span', { class: 'i-lucide-ampersands !text-n-blue-text' }),
+    },
+    {
+      label: t(`FILTER.QUERY_DROPDOWN_LABELS.OR`),
+      value: 'or',
+      icon: h('span', { class: 'i-woot-logic-or !text-n-blue-text' }),
+    },
+  ];
+});
+
+const booleanOptions = computed(() => [
+  { id: true, name: t('FILTER.ATTRIBUTE_LABELS.TRUE') },
+  { id: false, name: t('FILTER.ATTRIBUTE_LABELS.FALSE') },
+]);
+
+const validationError = computed(() => {
+  return validateSingleFilter({
+    attributeKey: attributeKey.value,
+    filter_operator: filterOperator.value,
+    values: values.value,
+  });
+});
+
+const resetModelOnAttributeKeyChange = newAttributeKey => {
+  /**
+   * Resets the filter values and operator when the attribute key changes. This ensures that
+   * the values and operator remain compatible with the new attribute type. For example,
+   * switching from a text field to a multi-select should reset the value from '' (empty string)
+   * to an empty array.
+   */
+  const filter = getFilterFromFilterTypes(newAttributeKey);
+  const newOperator = getOperator(filter, filterOperator.value);
+  const newInputType = getInputType(newOperator, filter);
+  if (newInputType === 'multiSelect') {
+    values.value = [];
+  } else if (['searchSelect', 'booleanSelect'].includes(newInputType)) {
+    values.value = {};
+  } else {
+    values.value = '';
+  }
+  filterOperator.value = newOperator.value;
+};
+
+watch([attributeKey, values, filterOperator], () => {
+  showErrors.value = false;
+});
+
+const validate = () => {
+  showErrors.value = true;
+  return !validationError.value;
+};
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <li class="list-none">
+    <div
+      class="flex items-center gap-2 rounded-md"
+      :class="{
+        'animate-wiggle': showErrors && validationError,
+      }"
+    >
+      <FilterSelect
+        v-if="showQueryOperator"
+        v-model="queryOperator"
+        variant="faded"
+        hide-icon
+        class="text-sm"
+        :options="queryOperatorOptions"
+      />
+      <FilterSelect
+        v-model="attributeKey"
+        variant="faded"
+        :options="filterTypes"
+        @update:model-value="resetModelOnAttributeKeyChange"
+      />
+      <FilterSelect
+        v-model="filterOperator"
+        variant="ghost"
+        :options="currentFilter.filterOperators"
+      />
+      <template v-if="currentOperator.hasInput">
+        <MultiSelect
+          v-if="inputType === 'multiSelect'"
+          v-model="values"
+          :options="currentFilter.options"
+        />
+        <SingleSelect
+          v-else-if="inputType === 'searchSelect'"
+          v-model="values"
+          :options="currentFilter.options"
+        />
+        <SingleSelect
+          v-else-if="inputType === 'booleanSelect'"
+          v-model="values"
+          disable-search
+          :options="booleanOptions"
+        />
+        <input
+          v-else
+          v-model="values"
+          :type="inputType === 'date' ? 'date' : 'text'"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base"
+          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
+        />
+      </template>
+      <Button
+        sm
+        solid
+        slate
+        icon="i-lucide-trash"
+        @click.stop="emit('remove')"
+      />
+    </div>
+    <span v-if="showErrors && validationError" class="text-sm text-n-ruby-11">
+      {{ t(`FILTER.ERRORS.${validationError}`) }}
+    </span>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
new file mode 100644
index 000000000..fcec5eb08
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
@@ -0,0 +1,558 @@
+export const filterTypes = [
+  {
+    attributeKey: 'status',
+    value: 'status',
+    attributeName: 'Status',
+    label: 'Status',
+    inputType: 'multiSelect',
+    options: [
+      { id: 'open', name: 'Open' },
+      { id: 'resolved', name: 'Resolved' },
+      { id: 'pending', name: 'Pending' },
+      { id: 'snoozed', name: 'Snoozed' },
+      { id: 'all', name: 'All' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'assignee_id',
+    value: 'assignee_id',
+    attributeName: 'Assignee name',
+    label: 'Assignee name',
+    inputType: 'searchSelect',
+    options: [
+      { id: 14, name: 'Ben Nugent' },
+      { id: 30, name: 'Bruce' },
+      { id: 16, name: 'Cathy Simms' },
+      { id: 7, name: 'Charles Miner' },
+      { id: 10, name: 'Craig D' },
+      { id: 9, name: 'Dan Gore' },
+      { id: 13, name: 'Danny Cordray' },
+      { id: 3, name: 'David Wallace' },
+      { id: 4, name: 'Deangelo Vickers' },
+      { id: 33, name: 'Devon White' },
+      { id: 8, name: 'Ed Truck' },
+      { id: 31, name: 'Frank' },
+      { id: 29, name: 'Gideon' },
+      { id: 24, name: 'Glenn Max' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'team_id',
+    value: 'team_id',
+    attributeName: 'Team name',
+    label: 'Team name',
+    inputType: 'searchSelect',
+    options: [
+      { id: 223, name: '💰 sales' },
+      { id: 224, name: '💼 management' },
+      { id: 225, name: '👩‍💼 administration' },
+      { id: 226, name: '🚛 warehouse' },
+    ],
+    dataType: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'display_id',
+    value: 'display_id',
+    attributeName: 'Conversation identifier',
+    label: 'Conversation identifier',
+    inputType: 'plainText',
+    datatype: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-superset-of-bold',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-superset-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'campaign_id',
+    value: 'campaign_id',
+    attributeName: 'Campaign name',
+    label: 'Campaign name',
+    inputType: 'searchSelect',
+    options: [],
+    datatype: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'labels',
+    value: 'labels',
+    attributeName: 'Labels',
+    label: 'Labels',
+    inputType: 'multiSelect',
+    options: [
+      { id: 'billing', name: 'billing' },
+      { id: 'delivery', name: 'delivery' },
+      { id: 'lead', name: 'lead' },
+      { id: 'ops-handover', name: 'ops-handover' },
+      { id: 'premium-customer', name: 'premium-customer' },
+      { id: 'software', name: 'software' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'referer',
+    value: 'referer',
+    attributeName: 'Referer link',
+    label: 'Referer link',
+    inputType: 'plainText',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-superset-of-bold',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-superset-of',
+      },
+    ],
+    attributeModel: 'additional',
+  },
+  {
+    attributeKey: 'created_at',
+    value: 'created_at',
+    attributeName: 'Created at',
+    label: 'Created at',
+    inputType: 'date',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+      {
+        value: 'days_before',
+        label: 'Is x days before',
+        hasInput: true,
+        inputOverride: 'plainText',
+        icon: 'i-ph-calendar-minus-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'last_activity_at',
+    value: 'last_activity_at',
+    attributeName: 'Last activity',
+    label: 'Last activity',
+    inputType: 'date',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+      {
+        value: 'days_before',
+        label: 'Is x days before',
+        hasInput: true,
+        inputOverride: 'plainText',
+        icon: 'i-ph-calendar-minus-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'are_you_a_paid_customer',
+    value: 'are_you_a_paid_customer',
+    attributeName: 'Are you a paid customer?',
+    label: 'Are you a paid customer?',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'date_of_purchase',
+    value: 'date_of_purchase',
+    attributeName: 'Date of Purchase',
+    label: 'Date of Purchase',
+    inputType: 'date',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'your_website',
+    value: 'your_website',
+    attributeName: 'Your website',
+    label: 'Your website',
+    inputType: 'plainText',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'are_you_residing_in_india',
+    value: 'are_you_residing_in_india',
+    attributeName: 'Are you residing in India?',
+    label: 'Are you residing in India?',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'cloud',
+    value: 'cloud',
+    attributeName: 'Cloud',
+    label: 'Cloud',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'license_type',
+    value: 'license_type',
+    attributeName: 'License Type',
+    label: 'License Type',
+    inputType: 'searchSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [
+      {
+        id: 'Personal',
+        name: 'Personal',
+      },
+      {
+        id: 'Enterprise',
+        name: 'Enterprise',
+      },
+      {
+        id: 'Teams',
+        name: 'Teams',
+      },
+      {
+        id: 'Professional',
+        name: 'Professional',
+      },
+    ],
+    attributeModel: 'customAttributes',
+  },
+];
diff --git a/app/javascript/dashboard/helper/validations.js b/app/javascript/dashboard/helper/validations.js
index 352e5397e..155108c61 100644
--- a/app/javascript/dashboard/helper/validations.js
+++ b/app/javascript/dashboard/helper/validations.js
@@ -20,7 +20,7 @@ export const ATLEAST_ONE_ACTION_REQUIRED = 'ATLEAST_ONE_ACTION_REQUIRED';
  *
  * @returns {string|null} An error message if validation fails, or null if validation passes.
  */
-const validateSingleFilter = filter => {
+export const validateSingleFilter = filter => {
   if (!filter.attribute_key) {
     return ATTRIBUTE_KEY_REQUIRED;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 69c4c4bf3..9af26b294 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,7 @@ const tailwindConfig = {
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',
     './app/javascript/dashboard/helper/**/*.js',
+    './app/javascript/dashboard/components-next/**/*.js',
     './app/views/**/*.html.erb',
   ],
   theme: {
@@ -112,6 +113,11 @@ const tailwindConfig = {
       collections: {
         woot: {
           icons: {
+            'logic-or': {
+              body: `<rect x="14" y="5" width="2" height="13" rx="1" fill="currentColor"/><rect x="8" y="5" width="2" height="13" rx="1" fill="currentColor"/>`,
+              width: 24,
+              height: 24,
+            },
             alert: {
               body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
               width: 2,

From ba1b02e2747e7ce3259777dca22e590e4ab2f52d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 26 Nov 2024 09:20:33 +0530
Subject: [PATCH 21/74] feat: Add contact empty state components (#10499)

---
 .../EmptyState/ContactEmptyState.story.vue    |  28 +++
 .../Contacts/EmptyState/ContactEmptyState.vue |  51 ++++
 .../EmptyState/contactEmptyStateContent.js    | 228 ++++++++++++++++++
 3 files changed, 307 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js

diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue
new file mode 100644
index 000000000..0c1998a84
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue
@@ -0,0 +1,28 @@
+<script setup>
+import ContactEmptyState from './ContactEmptyState.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/EmptyState"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <!-- Default Story -->
+    <Variant title="Default">
+      <ContactEmptyState
+        title="No contacts found"
+        subtitle="Create your first contact to get started"
+        button-label="Add Contact"
+      />
+    </Variant>
+
+    <!-- Without Button -->
+    <Variant title="Without Button">
+      <ContactEmptyState
+        title="No contacts"
+        subtitle="These are your current contacts"
+        :show-button="false"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
new file mode 100644
index 000000000..ef555ff7a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
@@ -0,0 +1,51 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
+import contactContent from 'dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  showButton: {
+    type: Boolean,
+    default: true,
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <ContactsCard
+          v-for="contact in contactContent.slice(0, 5)"
+          :id="contact.id"
+          :key="contact.id"
+          :name="contact.name"
+          :email="contact.email"
+          :thumbnail="contact.thumbnail"
+          :phone-number="contact.phoneNumber"
+          :additional-attributes="contact.additionalAttributes"
+          :is-expanded="0 === contact.id"
+          @toggle="toggleExpanded(contact.id)"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <div v-if="showButton">
+        <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js b/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js
new file mode 100644
index 000000000..6d80c9151
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js
@@ -0,0 +1,228 @@
+export default [
+  {
+    additionalAttributes: {
+      city: 'Los Angeles',
+      country: 'United States',
+      description:
+        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Chatwoot.",
+      companyName: 'Chatwoot',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'candice-dev',
+        twitter: 'candice_w_dev',
+        facebook: 'candice.dev',
+        linkedin: 'candice-matherson',
+        instagram: 'candice.codes',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'candice.matherson@chatwoot.com',
+    id: 22,
+    name: 'Candice Matherson',
+    phoneNumber: '+14155552671',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      dateContact: '2024-11-11T11:53:09.299Z',
+      linkContact: 'https://example.com',
+      listContact: 'Follow-Up',
+      textContact: 'Hi there!',
+      numberContact: '42',
+      checkboxContact: false,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'San Francisco',
+      country: 'United States',
+      description: 'Passionate about design and user experience.',
+      companyName: 'Designify',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'ophelia-folkard',
+        twitter: 'oph_designs',
+        facebook: 'ophelia.folkard',
+        linkedin: 'ophelia-folkard',
+        instagram: 'ophelia.design',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'ophelia.folkard@designify.com',
+    id: 21,
+    name: 'Ophelia Folkard',
+    phoneNumber: '+14155552672',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      dateContact: '2024-10-05T10:12:34.567Z',
+      linkContact: 'https://designify.com',
+      listContact: 'Prospects',
+      textContact: 'Looking forward to connecting!',
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'Austin',
+      country: 'United States',
+      description: 'Avid coder and tech enthusiast.',
+      companyName: 'CodeHub',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'willy_castelot',
+        twitter: 'willy_code',
+        facebook: 'willy.castelot',
+        linkedin: 'willy-castelot',
+        instagram: 'willy.coder',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'willy.castelot@codehub.io',
+    id: 20,
+    name: 'Willy Castelot',
+    phoneNumber: '+14155552673',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      textContact: 'Let’s collaborate!',
+      checkboxContact: true,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'Seattle',
+      country: 'United States',
+      description: 'Product manager with a love for innovation.',
+      companyName: 'InnovaTech',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'elisabeth-d',
+        twitter: 'elisabeth_innova',
+        facebook: 'elisabeth.derington',
+        linkedin: 'elisabeth-derington',
+        instagram: 'elisabeth.innovates',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'elisabeth.derington@innova.com',
+    id: 19,
+    name: 'Elisabeth Derington',
+    phoneNumber: '+14155552674',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      textContact: 'Let’s schedule a call.',
+    },
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Chicago',
+      country: 'United States',
+      description: 'Marketing specialist and content creator.',
+      companyName: 'Contently',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'olia-olenchenko',
+        twitter: 'olia_content',
+        facebook: 'olia.olenchenko',
+        linkedin: 'olia-olenchenko',
+        instagram: 'olia.creates',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'olia.olenchenko@contently.com',
+    id: 18,
+    name: 'Olia Olenchenko',
+    phoneNumber: '+14155552675',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Boston',
+      country: 'United States',
+      description: 'SEO expert and analytics enthusiast.',
+      companyName: 'OptiSearch',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'nate-vannuchi',
+        twitter: 'nate_seo',
+        facebook: 'nathaniel.vannuchi',
+        linkedin: 'nathaniel-vannuchi',
+        instagram: 'nate.optimizes',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'nathaniel.vannuchi@optisearch.com',
+    id: 17,
+    name: 'Nathaniel Vannuchi',
+    phoneNumber: '+14155552676',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Denver',
+      country: 'United States',
+      description: 'UI/UX designer with a flair for minimalist designs.',
+      companyName: 'Minimal Designs',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'merrile-petruk',
+        twitter: 'merrile_ux',
+        facebook: 'merrile.petruk',
+        linkedin: 'merrile-petruk',
+        instagram: 'merrile.designs',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'merrile.petruk@minimal.com',
+    id: 16,
+    name: 'Merrile Petruk',
+    phoneNumber: '+14155552677',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Miami',
+      country: 'United States',
+      description: 'Entrepreneur with a background in e-commerce.',
+      companyName: 'Ecom Solutions',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'cordell-d',
+        twitter: 'cordell_entrepreneur',
+        facebook: 'cordell.dalinder',
+        linkedin: 'cordell-dalinder',
+        instagram: 'cordell.ecom',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'cordell.dalinder@ecomsolutions.com',
+    id: 15,
+    name: 'Cordell Dalinder',
+    phoneNumber: '+14155552678',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+];

From b9d888d8ab4a827f8a5d21280f26551916e28909 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 26 Nov 2024 09:29:04 +0530
Subject: [PATCH 22/74] feat: Add contact header components (#10498)

---
 .../Contacts/ContactsHeader/ContactHeader.vue |  97 ++++++++++++
 .../components/ContactMoreActions.vue         |  62 ++++++++
 .../components/ContactSortMenu.vue            | 138 ++++++++++++++++++
 .../story/ContactHeader.story.vue             | 106 ++++++++++++++
 .../dashboard/i18n/locale/en/contact.json     |  56 +++++++
 app/javascript/histoire.setup.ts              |   2 +
 6 files changed, 461 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
new file mode 100644
index 000000000..c9dad651b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -0,0 +1,97 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+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';
+
+defineProps({
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  headerTitle: {
+    type: String,
+    required: true,
+  },
+  buttonLabel: {
+    type: String,
+    required: true,
+  },
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits([
+  'search',
+  'filter',
+  'update:sort',
+  'message',
+  'add',
+  'import',
+  'export',
+]);
+</script>
+
+<template>
+  <header class="sticky top-0 z-10 px-6 xl:px-0">
+    <div
+      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[900px]"
+    >
+      <span class="text-xl font-medium truncate text-n-slate-12">
+        {{ headerTitle }}
+      </span>
+      <div class="flex items-center flex-shrink-0 gap-4">
+        <div v-if="showSearch" class="flex items-center gap-2">
+          <Input
+            :model-value="searchValue"
+            type="search"
+            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
+            :custom-input-class="[
+              'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
+            ]"
+            @input="emit('search', $event.target.value)"
+          >
+            <template #prefix>
+              <Icon
+                icon="i-lucide-search"
+                class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-2 rtl:right-2"
+              />
+            </template>
+          </Input>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            icon="i-lucide-list-filter"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('filter')"
+          />
+          <ContactSortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <ContactMoreActions
+            @add="emit('add')"
+            @import="emit('import')"
+            @export="emit('export')"
+          />
+        </div>
+        <div class="w-px h-4 bg-n-strong" />
+        <Button :label="buttonLabel" size="sm" @click="emit('message')" />
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
new file mode 100644
index 000000000..c37a7854c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const emit = defineEmits(['add', 'import', 'export']);
+
+const { t } = useI18n();
+
+const contactMenuItems = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
+    action: 'add',
+    value: 'add',
+    icon: 'i-lucide-plus',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
+    action: 'export',
+    value: 'export',
+    icon: 'i-lucide-upload',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
+    action: 'import',
+    value: 'import',
+    icon: 'i-lucide-download',
+  },
+];
+const showActionsDropdown = ref(false);
+
+const handleContactAction = ({ action }) => {
+  if (action === 'add') {
+    emit('add');
+  } else if (action === 'import') {
+    emit('import');
+  } else if (action === 'export') {
+    emit('export');
+  }
+};
+</script>
+
+<template>
+  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
+    <Button
+      icon="i-lucide-ellipsis-vertical"
+      color="slate"
+      variant="ghost"
+      size="sm"
+      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
+      @click="showActionsDropdown = !showActionsDropdown"
+    />
+    <DropdownMenu
+      v-if="showActionsDropdown"
+      :menu-items="contactMenuItems"
+      class="right-0 mt-1 w-52 top-full"
+      @action="handleContactAction($event)"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
new file mode 100644
index 000000000..edf4bd70f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, computed, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import SelectMenu from 'dashboard/components-next/selectmenu/SelectMenu.vue';
+
+const props = defineProps({
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:sort']);
+
+const { t } = useI18n();
+
+const isMenuOpen = ref(false);
+
+const sortMenus = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.NAME'),
+    value: 'name',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.EMAIL'),
+    value: 'email',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.PHONE_NUMBER'),
+    value: 'phone_number',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COMPANY'),
+    value: 'company_name',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COUNTRY'),
+    value: 'country',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.CITY'),
+    value: 'city',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.LAST_ACTIVITY'),
+    value: 'last_activity_at',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.CREATED_AT'),
+    value: 'created_at',
+  },
+];
+
+const orderingMenus = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.OPTIONS.ASCENDING'),
+    value: '',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.OPTIONS.DESCENDING'),
+    value: '-',
+  },
+];
+
+// Converted the props to refs for better reactivity
+const activeSort = toRef(props, 'activeSort');
+
+const activeOrdering = toRef(props, 'activeOrdering');
+
+const activeSortLabel = computed(() => {
+  const selectedMenu = sortMenus.find(menu => menu.value === activeSort.value);
+  return (
+    selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL')
+  );
+});
+
+const activeOrderingLabel = computed(() => {
+  const selectedMenu = orderingMenus.find(
+    menu => menu.value === activeOrdering.value
+  );
+  return selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL');
+});
+
+const handleSortChange = value => {
+  emit('update:sort', { sort: value, order: props.activeOrdering });
+};
+
+const handleOrderChange = value => {
+  emit('update:sort', { sort: props.activeSort, order: value });
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      icon="i-lucide-arrow-down-up"
+      color="slate"
+      size="sm"
+      variant="ghost"
+      :class="isMenuOpen ? 'bg-n-alpha-2' : ''"
+      @click="isMenuOpen = !isMenuOpen"
+    />
+    <div
+      v-if="isMenuOpen"
+      v-on-clickaway="() => (isMenuOpen = false)"
+      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">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL') }}
+        </span>
+        <SelectMenu
+          :model-value="activeSort"
+          :options="sortMenus"
+          :label="activeSortLabel"
+          @update:model-value="handleSortChange"
+        />
+      </div>
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL') }}
+        </span>
+        <SelectMenu
+          :model-value="activeOrdering"
+          :options="orderingMenus"
+          :label="activeOrderingLabel"
+          @update:model-value="handleOrderChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue
new file mode 100644
index 000000000..a89aa724c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { ref } from 'vue';
+import ContactHeader from '../ContactHeader.vue';
+
+// Base state controls
+const searchValue = ref('');
+const activeSort = ref('last_activity_at');
+const activeOrdering = ref('');
+
+const onSearch = value => {
+  searchValue.value = value;
+  console.log('🔍 Search:', value);
+};
+
+const onSort = ({ sort, order }) => {
+  activeSort.value = sort;
+  activeOrdering.value = order;
+  console.log('🔄 Sort changed:', { sort, order });
+};
+
+const onFilter = () => {
+  console.log('🏷️ Filter clicked');
+};
+
+const onMessage = () => {
+  console.log('💬 Message clicked');
+};
+
+const onAdd = () => {
+  console.log('➕ Add contact clicked');
+};
+
+const onImport = () => {
+  console.log('📥 Import contacts clicked');
+};
+
+const onExport = () => {
+  console.log('📤 Export contacts clicked');
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactHeader"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <Variant title="Default">
+      <div class="w-full h-[400px]">
+        <ContactHeader
+          header-title="Contacts"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div class="w-full">
+        <ContactHeader
+          :show-search="false"
+          header-title="Contacts"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Segment View">
+      <div class="w-full">
+        <ContactHeader
+          :show-search="false"
+          header-title="Segment: VIP Customers"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index defc28e67..9a33b1f99 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -388,6 +388,62 @@
   },
 
   "CONTACTS_LAYOUT": {
+    "HEADER": {
+      "TITLE": "Contacts",
+      "SEARCH_TITLE": "Search contacts",
+      "SEARCH_PLACEHOLDER": "Search...",
+      "MESSAGE_BUTTON": "Message",
+      "BREADCRUMB": {
+        "CONTACTS": "Contacts"
+      },
+      "ACTIONS": {
+        "CONTACT_CREATION": {
+          "ADD_CONTACT": "Add contact",
+          "EXPORT_CONTACT": "Export contacts",
+          "IMPORT_CONTACT": "Import contacts",
+          "SAVE_CONTACT": "Save contact"
+        },
+        "IMPORT_CONTACT": {
+          "TITLE": "Import contacts",
+          "DESCRIPTION": "Import contacts through a CSV file.",
+          "DOWNLOAD_LABEL": "Download a sample csv.",
+          "LABEL": "CSV File:",
+          "CHOOSE_FILE": "Choose file",
+          "CHANGE": "Change",
+          "CANCEL": "Cancel",
+          "IMPORT": "Import",
+          "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
+          "ERROR_MESSAGE": "There was an error, please try again"
+        },
+        "EXPORT_CONTACT": {
+          "TITLE": "Export contacts",
+          "DESCRIPTION": "Quickly export a csv file with comprehensive details of your contacts",
+          "CONFIRM": "Export",
+          "SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
+          "ERROR_MESSAGE": "There was an error, please try again"
+        },
+        "SORT_BY": {
+          "LABEL": "Sort by",
+          "OPTIONS": {
+            "NAME": "Name",
+            "EMAIL": "Email",
+            "PHONE_NUMBER": "Phone number",
+            "COMPANY": "Company",
+            "COUNTRY": "Country",
+            "CITY": "City",
+            "LAST_ACTIVITY": "Last activity",
+            "CREATED_AT": "Created at"
+          }
+        },
+        "ORDER": {
+          "LABEL": "Ordering",
+          "OPTIONS": {
+            "ASCENDING": "Ascending",
+            "DESCENDING": "Descending"
+          }
+        }
+      }
+    },
     "CARD": {
       "OF": "of",
       "VIEW_DETAILS": "View details",
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index 6b7358d59..8ea1a31c2 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -6,6 +6,7 @@ import { vResizeObserver } from '@vueuse/components';
 import store from 'dashboard/store';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
+import { directive as onClickaway } from 'vue3-click-away';
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
@@ -18,4 +19,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
   app.use(i18n);
   app.directive('resize', vResizeObserver);
   app.use(VueDOMPurifyHTML, domPurifyConfig);
+  app.directive('on-clickaway', onClickaway);
 });

From 12a82b6459f7ff229bc0c0428616bad7a00582ab Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 26 Nov 2024 12:56:40 +0800
Subject: [PATCH 23/74] fix: avoid Slack file upload API for fallback messages
 (#10461)

Skip calling the Slack file upload API for message types such as
fallback (e.g., Facebook and location messages) that lack actual file
data in attachments. This prevents unnecessary API calls and resolves a
Sentry error currently occurring in production.

fixes: https://github.com/chatwoot/chatwoot/issues/10460
---
 app/models/attachment.rb                      |  4 ++++
 .../slack/send_on_slack_service.rb            |  2 ++
 .../slack/send_on_slack_service_spec.rb       | 22 +++++++++++++++++++
 spec/models/attachment_spec.rb                | 17 ++++++++++++--
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/app/models/attachment.rb b/app/models/attachment.rb
index b9ed804d3..65e56a21f 100644
--- a/app/models/attachment.rb
+++ b/app/models/attachment.rb
@@ -69,6 +69,10 @@ class Attachment < ApplicationRecord
     end
   end
 
+  def with_attached_file?
+    [:image, :audio, :video, :file].include?(file_type.to_sym)
+  end
+
   private
 
   def file_metadata
diff --git a/lib/integrations/slack/send_on_slack_service.rb b/lib/integrations/slack/send_on_slack_service.rb
index aa9d3ad5b..20a65905c 100644
--- a/lib/integrations/slack/send_on_slack_service.rb
+++ b/lib/integrations/slack/send_on_slack_service.rb
@@ -117,6 +117,8 @@ class Integrations::Slack::SendOnSlackService < Base::SendOnChannelService
   end
 
   def upload_file
+    return unless message.attachments.first.with_attached_file?
+
     result = slack_client.files_upload({
       channels: hook.reference_id,
       initial_comment: 'Attached File!',
diff --git a/spec/lib/integrations/slack/send_on_slack_service_spec.rb b/spec/lib/integrations/slack/send_on_slack_service_spec.rb
index 3474cbfcd..6524154b4 100644
--- a/spec/lib/integrations/slack/send_on_slack_service_spec.rb
+++ b/spec/lib/integrations/slack/send_on_slack_service_spec.rb
@@ -180,6 +180,28 @@ describe Integrations::Slack::SendOnSlackService do
         expect(message.attachments).to be_any
       end
 
+      it 'will not call file_upload if attachment does not have a file (e.g facebook - fallback type)' do
+        expect(slack_client).to receive(:chat_postMessage).with(
+          channel: hook.reference_id,
+          text: message.content,
+          username: "#{message.sender.name} (Contact)",
+          thread_ts: conversation.identifier,
+          icon_url: anything,
+          unfurl_links: true
+        ).and_return(slack_message)
+
+        message.attachments.new(account_id: message.account_id, file_type: :fallback)
+
+        expect(slack_client).not_to receive(:files_upload)
+
+        message.save!
+
+        builder.perform
+
+        expect(message.external_source_id_slack).to eq 'cw-origin-6789.12345'
+        expect(message.attachments).to be_any
+      end
+
       it 'sent a template message on slack' do
         builder = described_class.new(message: template_message, hook: hook)
         allow(builder).to receive(:slack_client).and_return(slack_client)
diff --git a/spec/models/attachment_spec.rb b/spec/models/attachment_spec.rb
index 6b05d26fb..b1d19bd0e 100644
--- a/spec/models/attachment_spec.rb
+++ b/spec/models/attachment_spec.rb
@@ -1,8 +1,9 @@
 require 'rails_helper'
 
 RSpec.describe Attachment do
+  let!(:message) { create(:message) }
+
   describe 'external url validations' do
-    let(:message) { create(:message) }
     let(:attachment) { message.attachments.new(account_id: message.account_id, file_type: :image) }
 
     before do
@@ -25,13 +26,25 @@ RSpec.describe Attachment do
 
   describe 'download_url' do
     it 'returns valid download url' do
-      message = create(:message)
       attachment = message.attachments.new(account_id: message.account_id, file_type: :image)
       attachment.file.attach(io: Rails.root.join('spec/assets/avatar.png').open, filename: 'avatar.png', content_type: 'image/png')
       expect(attachment.download_url).not_to be_nil
     end
   end
 
+  describe 'with_attached_file?' do
+    it 'returns true if its an attachment with file' do
+      attachment = message.attachments.new(account_id: message.account_id, file_type: :image)
+      attachment.file.attach(io: Rails.root.join('spec/assets/avatar.png').open, filename: 'avatar.png', content_type: 'image/png')
+      expect(attachment.with_attached_file?).to be true
+    end
+
+    it 'returns false if its an attachment with out a file' do
+      attachment = message.attachments.new(account_id: message.account_id, file_type: :fallback)
+      expect(attachment.with_attached_file?).to be false
+    end
+  end
+
   describe 'push_event_data for instagram story mentions' do
     let(:instagram_message) { create(:message, :instagram_story_mention) }
 

From d569713b66ce2eab5e46ba103fe88bf6a28c2a77 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 27 Nov 2024 09:29:16 +0530
Subject: [PATCH 24/74] fix: Fix z-index issue on account switcher (#10505)

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../components-next/sidebar/SidebarAccountSwitcher.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
index 03e7a5e53..f232faeab 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -54,7 +54,7 @@ const emitNewAccount = () => {
         />
       </button>
     </template>
-    <DropdownBody class="min-w-80">
+    <DropdownBody class="min-w-80 z-50">
       <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_WORKSPACE')">
         <DropdownItem
           v-for="account in currentUser.accounts"

From 35702457ede5ec01d5e5cf21cca3962cd5d2a3dc Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Wed, 27 Nov 2024 02:10:15 -0800
Subject: [PATCH 25/74] feat: Update design for report pages (#10506)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="1440" alt="Screenshot 2024-11-26 at 8 38 57 PM"
src="https://github.com/user-attachments/assets/f752157c-6134-42cb-8211-ce636ea9e4d6">
<img width="1439" alt="Screenshot 2024-11-26 at 8 40 47 PM"
src="https://github.com/user-attachments/assets/580b1f61-68bc-489b-9081-b0aeb402f31d">

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../dashboard/assets/scss/_date-picker.scss   |  12 +-
 .../Campaigns/CampaignLayout.vue              |   4 +-
 .../Contacts/ContactsHeader/ContactHeader.vue |   2 +-
 .../HelpCenter/HelpCenterLayout.vue           |   4 +-
 .../DropdownPrimitives.story.vue              |  10 +-
 .../components-next/sidebar/Sidebar.vue       |  10 +-
 .../dashboard/components/table/Pagination.vue |  20 +--
 .../dashboard/components/table/Table.vue      |  37 +++--
 .../components/widgets/TableHeaderCell.vue    |   2 +-
 .../components/widgets/UserAvatarWithName.vue |  10 +-
 .../conversation/components/SLAEventItem.vue  |   4 +-
 .../components/SLAPopoverCard.vue             |   4 +-
 .../contacts/components/ContactsTable.vue     |   2 +-
 .../settings/reports/AgentReports.vue         |   9 +-
 .../dashboard/settings/reports/BotReports.vue |   5 +-
 .../settings/reports/CsatResponses.vue        |  24 ++--
 .../settings/reports/InboxReports.vue         |   9 +-
 .../dashboard/settings/reports/Index.vue      |  20 +--
 .../settings/reports/LabelReports.vue         |   9 +-
 .../settings/reports/LiveReports.vue          |  19 +--
 .../settings/reports/ReportContainer.vue      |   2 +-
 .../dashboard/settings/reports/SLAReports.vue |  50 +++----
 .../settings/reports/TeamReports.vue          |   9 +-
 .../reports/components/BotMetrics.vue         |   2 +-
 .../components/ChartElements/ChartStats.vue   |   4 +-
 .../reports/components/CsatMetrics.vue        |   6 +-
 .../settings/reports/components/CsatTable.vue |  25 +---
 .../reports/components/FilterSelector.vue     |   2 +-
 .../Filters/v3/ActiveFilterChip.vue           |   1 -
 .../settings/reports/components/Heatmap.vue   |   5 +-
 .../reports/components/ReportHeader.vue       |  17 +++
 .../reports/components/ReportMetricCard.vue   |   9 +-
 .../reports/components/ReportsWrapper.vue     |  85 ++++++++++++
 .../reports/components/SLA/SLAMetricCard.vue  |   8 +-
 .../reports/components/SLA/SLAMetrics.vue     |  10 +-
 .../reports/components/SLA/SLAReportItem.vue  |  13 +-
 .../reports/components/SLA/SLATable.vue       |  16 +--
 .../reports/components/SLA/SLAViewDetails.vue |  35 +++--
 .../reports/components/WootReports.vue        |  55 ++++----
 .../components/overview/AgentTable.vue        |   7 +-
 .../components/overview/MetricCard.vue        |  16 +--
 .../__snapshots__/CSATMetrics.spec.js.snap    |   2 +-
 .../settings/reports/reports.routes.js        | 129 +++---------------
 43 files changed, 361 insertions(+), 363 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue

diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/_date-picker.scss
index 92deab095..2fa577673 100644
--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -25,7 +25,7 @@
   }
 
   .mx-input {
-    @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
+    @apply h-[2.5rem] flex border border-solid border-n-weak rounded-md shadow-none;
   }
 
   .mx-input:disabled,
@@ -39,7 +39,7 @@
 }
 
 .mx-datepicker-main {
-  @apply border-0 bg-white dark:bg-slate-800;
+  @apply border-0 bg-n-solid-2 rounded-xl;
 
   .cell {
     &.disabled {
@@ -53,6 +53,14 @@
     }
   }
 
+  .mx-calendar+.mx-calendar {
+    @apply border-l border-n-weak;
+  }
+
+  .mx-datepicker-footer {
+    @apply border border-n-weak;
+  }
+
   .mx-time {
     @apply border-0 bg-white dark:bg-slate-800;
 
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
index 11006bfe3..3169dbc3e 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -22,7 +22,7 @@ const handleButtonClick = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto">
+      <div class="w-full max-w-[960px] mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
           <span class="text-xl font-medium text-n-slate-12">
             {{ headerTitle }}
@@ -44,7 +44,7 @@ const handleButtonClick = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto py-4">
+      <div class="w-full max-w-[960px] mx-auto py-4">
         <slot name="default" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index c9dad651b..947310a56 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -46,7 +46,7 @@ const emit = defineEmits([
 <template>
   <header class="sticky top-0 z-10 px-6 xl:px-0">
     <div
-      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[900px]"
+      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[960px]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index d884b3557..b05d5d3f2 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -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-[900px] mx-auto">
+      <div class="w-full max-w-[960px] mx-auto">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
@@ -95,7 +95,7 @@ const togglePortalSwitcher = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto py-3">
+      <div class="w-full max-w-[960px] mx-auto py-3">
         <slot name="content" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
index c0818283e..085aa0d28 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
@@ -14,22 +14,22 @@ const menuItems = ref([
   {
     label: 'Contact Support',
     icon: 'i-lucide-life-buoy',
-    click: () => window.alert('Contact Support'),
+    click: () => console.log('Contact Support'),
   },
   {
     label: 'Keyboard Shortcuts',
     icon: 'i-lucide-keyboard',
-    click: () => window.alert('Keyboard Shortcuts'),
+    click: () => console.log('Keyboard Shortcuts'),
   },
   {
     label: 'Profile Settings',
     icon: 'i-lucide-user-pen',
-    click: () => window.alert('Profile Settings'),
+    click: () => console.log('Profile Settings'),
   },
   {
     label: 'Change Appearance',
     icon: 'i-lucide-swatch-book',
-    click: () => window.alert('Change Appearance'),
+    click: () => console.log('Change Appearance'),
   },
   {
     label: 'Open SuperAdmin',
@@ -40,7 +40,7 @@ const menuItems = ref([
   {
     label: 'Log Out',
     icon: 'i-lucide-log-out',
-    click: () => window.alert('Log Out'),
+    click: () => console.log('Log Out'),
   },
 ]);
 </script>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 2d4fdf1dd..3f8f15edf 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -249,11 +249,6 @@ const menuItems = computed(() => {
           label: t('SIDEBAR.CSAT'),
           to: accountScopedRoute('csat_reports'),
         },
-        {
-          name: 'Reports Bot',
-          label: t('SIDEBAR.REPORTS_BOT'),
-          to: accountScopedRoute('bot_reports'),
-        },
         {
           name: 'Reports Agent',
           label: t('SIDEBAR.REPORTS_AGENT'),
@@ -279,6 +274,11 @@ const menuItems = computed(() => {
           label: t('SIDEBAR.REPORTS_SLA'),
           to: accountScopedRoute('sla_reports'),
         },
+        {
+          name: 'Reports Bot',
+          label: t('SIDEBAR.REPORTS_BOT'),
+          to: accountScopedRoute('bot_reports'),
+        },
       ],
     },
     {
diff --git a/app/javascript/dashboard/components/table/Pagination.vue b/app/javascript/dashboard/components/table/Pagination.vue
index 42fd99339..6de3d851c 100644
--- a/app/javascript/dashboard/components/table/Pagination.vue
+++ b/app/javascript/dashboard/components/table/Pagination.vue
@@ -54,7 +54,7 @@ const end = computed(() => {
   <div class="flex items-center justify-between">
     <div class="flex flex-1 items-center justify-between">
       <div>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-n-slate-11 mb-0">
           {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
         </p>
       </div>
@@ -62,7 +62,7 @@ const end = computed(() => {
         <woot-button
           :disabled="!table.getCanPreviousPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.setPageIndex(0)"
         >
@@ -70,7 +70,7 @@ const end = computed(() => {
         </woot-button>
         <woot-button
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           :disabled="!table.getCanPreviousPage()"
           @click="table.previousPage()"
@@ -81,22 +81,22 @@ const end = computed(() => {
           v-for="page in visiblePages"
           :key="page"
           variant="clear"
-          class="size-8 flex items-center justify-center border text-xs leading-none text-center"
-          :class="page == currentPage ? 'border-woot-500' : 'border-slate-50'"
+          class="h-8 flex items-center justify-center text-xs leading-none text-center"
+          :class="page == currentPage ? 'border-n-brand' : 'border-slate-50'"
           color-scheme="secondary"
           @click="table.setPageIndex(page - 1)"
         >
-          <div
+          <span
             class="text-center"
-            :class="{ 'text-woot-500': page == currentPage }"
+            :class="{ 'text-n-brand': page == currentPage }"
           >
             {{ page }}
-          </div>
+          </span>
         </woot-button>
         <woot-button
           :disabled="!table.getCanNextPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.nextPage()"
         >
@@ -105,7 +105,7 @@ const end = computed(() => {
         <woot-button
           :disabled="!table.getCanNextPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.setPageIndex(table.getPageCount() - 1)"
         >
diff --git a/app/javascript/dashboard/components/table/Table.vue b/app/javascript/dashboard/components/table/Table.vue
index 3b84735d1..5936fa314 100644
--- a/app/javascript/dashboard/components/table/Table.vue
+++ b/app/javascript/dashboard/components/table/Table.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { FlexRender } from '@tanstack/vue-table';
 import SortButton from './SortButton.vue';
+import { computed } from 'vue';
 
-defineProps({
+const props = defineProps({
   table: {
     type: Object,
     required: true,
@@ -11,22 +12,36 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  type: {
+    type: String,
+    default: 'relaxed',
+  },
 });
+
+const isRelaxed = computed(() => props.type === 'relaxed');
+const headerClass = computed(() =>
+  isRelaxed.value
+    ? 'first:rounded-bl-lg first:rounded-tl-lg last:rounded-br-lg last:rounded-tr-lg'
+    : ''
+);
 </script>
 
 <template>
   <table :class="{ 'table-fixed': fixed }">
-    <thead
-      class="sticky top-0 z-10 border-b border-slate-50 dark:border-slate-800 bg-slate-25 dark:bg-slate-800"
-    >
-      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+    <thead class="sticky top-0 z-10 bg-n-slate-1">
+      <tr
+        v-for="headerGroup in table.getHeaderGroups()"
+        :key="headerGroup.id"
+        class="rounded-xl"
+      >
         <th
           v-for="header in headerGroup.headers"
           :key="header.id"
           :style="{
             width: `${header.getSize()}px`,
           }"
-          class="text-left py-3 px-5 dark:bg-slate-800 text-slate-800 dark:text-slate-200 font-normal text-xs"
+          class="text-left py-3 px-5 font-normal text-sm"
+          :class="headerClass"
           @click="header.column.getCanSort() && header.column.toggleSorting()"
         >
           <div
@@ -43,16 +58,12 @@ defineProps({
       </tr>
     </thead>
 
-    <tbody class="divide-y divide-slate-25 dark:divide-slate-900">
-      <tr
-        v-for="row in table.getRowModel().rows"
-        :key="row.id"
-        class="hover:bg-slate-25 dark:hover:bg-slate-800"
-      >
+    <tbody class="divide-y divide-n-slate-2">
+      <tr v-for="row in table.getRowModel().rows" :key="row.id">
         <td
           v-for="cell in row.getVisibleCells()"
           :key="cell.id"
-          class="py-2 px-5"
+          :class="isRelaxed ? 'py-4 px-5' : 'py-2 px-5'"
         >
           <FlexRender
             :render="cell.column.columnDef.cell"
diff --git a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
index ce3cb21ac..e838b477d 100644
--- a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
+++ b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
@@ -29,7 +29,7 @@ const spanClass = computed(() => {
 
 <template>
   <div
-    class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+    class="flex items-center px-0 py-2 text-xs font-medium text-right uppercase text-n-slate-11 rtl:text-left"
     :class="spanClass"
   >
     <slot>
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index 23553f4c2..1e78c334d 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -4,7 +4,7 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 defineProps({
   user: {
     type: Object,
-    default: () => {},
+    default: () => ({}),
   },
   size: {
     type: String,
@@ -12,7 +12,7 @@ defineProps({
   },
   textClass: {
     type: String,
-    default: 'text-xs text-slate-600',
+    default: 'text-sm text-n-slate-12',
   },
 });
 </script>
@@ -25,11 +25,11 @@ defineProps({
       :username="user.name"
       :status="user.availability_status"
     />
-    <h6
-      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+    <span
+      class="my-0 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
       :class="textClass"
     >
       {{ user.name }}
-    </h6>
+    </span>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
index 82774cbe0..1f513d78b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
@@ -18,7 +18,7 @@ const formatDate = timestamp =>
 <template>
   <div class="flex justify-between w-full">
     <span
-      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-n-slate-11"
     >
       {{ label }}
     </span>
@@ -26,7 +26,7 @@ const formatDate = timestamp =>
       <span
         v-for="item in items"
         :key="item.id"
-        class="text-sm font-normal text-slate-900 dark:text-slate-25 text-right tabular-nums"
+        class="text-sm font-normal text-n-slate-12 text-right tabular-nums"
       >
         {{ formatDate(item.created_at) }}
       </span>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
index 6b1c66d02..3355905c6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
@@ -40,9 +40,9 @@ const toggleShowAllNRT = () => {
 
 <template>
   <div
-    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+    class="absolute flex flex-col items-start border-n-strong bg-n-solid-3 w-96 backdrop-blur-[100px] px-6 py-5 z-50 shadow rounded-xl gap-4 max-h-96 overflow-auto"
   >
-    <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
+    <span class="text-sm font-medium text-n-slate-12">
       {{ $t('SLA.EVENTS.TITLE') }}
     </span>
     <SLAEventItem
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index d27c2763b..067682939 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -171,7 +171,7 @@ const table = useVueTable({
 <template>
   <section class="flex-1 h-full overflow-auto bg-white dark:bg-slate-900">
     <section class="overflow-x-auto">
-      <Table fixed :table="table" />
+      <Table fixed :table="table" type="compact" />
     </section>
 
     <EmptyState
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
index 7a7374994..b7b4f6845 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="agents/getAgents"
     action-key="agents/get"
     :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+    :report-title="$t('AGENT_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index e35f68f29..772a6810a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -5,11 +5,13 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import ReportContainer from './ReportContainer.vue';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'BotReports',
   components: {
     BotMetrics,
+    ReportHeader,
     ReportFilterSelector,
     ReportContainer,
   },
@@ -84,7 +86,8 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
+  <ReportHeader :header-title="$t('BOT_REPORTS.HEADER')" />
+  <div class="flex flex-col gap-4">
     <ReportFilterSelector
       :show-agents-filter="false"
       show-group-by-filter
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index 202e22fc9..58a014165 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -7,6 +7,8 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { generateFileName } from '../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
+import V4Button from 'dashboard/components-next/button/Button.vue';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'CsatResponses',
@@ -14,6 +16,8 @@ export default {
     CsatMetrics,
     CsatTable,
     ReportFilterSelector,
+    ReportHeader,
+    V4Button,
   },
   data() {
     return {
@@ -108,7 +112,16 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
+  <ReportHeader :header-title="$t('CSAT_REPORTS.HEADER')">
+    <V4Button
+      :label="$t('CSAT_REPORTS.DOWNLOAD')"
+      icon="i-ph-download-simple"
+      size="sm"
+      @click="downloadReports"
+    />
+  </ReportHeader>
+
+  <div class="flex flex-col gap-4">
     <ReportFilterSelector
       show-agents-filter
       show-inbox-filter
@@ -117,14 +130,7 @@ export default {
       :show-business-hours-switch="false"
       @filter-change="onFilterChange"
     />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
-    </woot-button>
+
     <CsatMetrics :filters="requestPayload" />
     <CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
index 96d573829..100094f65 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="inboxes/getInboxes"
     action-key="inboxes/get"
     :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
+    :report-title="$t('INBOX_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 523266dd7..858ceb4ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -1,4 +1,5 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
@@ -6,6 +7,7 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import ReportContainer from './ReportContainer.vue';
+import ReportHeader from './components/ReportHeader.vue';
 
 const REPORTS_KEYS = {
   CONVERSATIONS: 'conversations_count',
@@ -20,8 +22,10 @@ const REPORTS_KEYS = {
 export default {
   name: 'ConversationReports',
   components: {
+    ReportHeader,
     ReportFilterSelector,
     ReportContainer,
+    V4Button,
   },
   data() {
     return {
@@ -98,15 +102,15 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="$t('REPORT.HEADER')">
+    <V4Button
+      :label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadAgentReports"
-    >
-      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
-    </woot-button>
+    />
+  </ReportHeader>
+  <div class="flex flex-col gap-3">
     <ReportFilterSelector
       :show-agents-filter="false"
       show-group-by-filter
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
index d3792bd79..04d7dc7ff 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="labels/getLabels"
     action-key="labels/get"
     :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
+    :report-title="$t('LABEL_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index 7c182a12e..2d39d00f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -10,10 +10,12 @@ import getUnixTime from 'date-fns/getUnixTime';
 import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
 import { emitter } from 'shared/helpers/mitt';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'LiveReports',
   components: {
+    ReportHeader,
     AgentTable,
     MetricCard,
     ReportHeatmap,
@@ -123,8 +125,9 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <div class="flex flex-col items-center md:flex-row">
+  <ReportHeader :header-title="$t('OVERVIEW_REPORTS.HEADER')" />
+  <div class="flex flex-col gap-4 pb-6">
+    <div class="flex flex-col items-center md:flex-row gap-4">
       <div
         class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
       >
@@ -140,10 +143,10 @@ export default {
             :key="index"
             class="flex-1 min-w-0 pb-2"
           >
-            <h3 class="text-base text-slate-700 dark:text-slate-100">
+            <h3 class="text-base text-n-slate-11">
               {{ name }}
             </h3>
-            <p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
+            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
               {{ metric }}
             </p>
           </div>
@@ -156,17 +159,17 @@ export default {
             :key="index"
             class="flex-1 min-w-0 pb-2"
           >
-            <h3 class="text-base text-slate-700 dark:text-slate-100">
+            <h3 class="text-base text-n-slate-11">
               {{ name }}
             </h3>
-            <p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
+            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
               {{ metric }}
             </p>
           </div>
         </MetricCard>
       </div>
     </div>
-    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+    <div class="flex flex-row flex-wrap max-w-full">
       <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
         <template #control>
           <woot-button
@@ -185,7 +188,7 @@ export default {
         />
       </MetricCard>
     </div>
-    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+    <div class="flex flex-row flex-wrap max-w-full">
       <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
         <AgentTable
           :agents="agents"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index 0de1fb40d..f89d1ac4d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -135,7 +135,7 @@ export default {
 
 <template>
   <div
-    class="grid grid-cols-1 p-2 bg-white border rounded-md md:grid-cols-2 lg:grid-cols-3 dark:bg-slate-800 border-slate-100 dark:border-slate-700"
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 px-6 py-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
   >
     <div
       v-for="metric in metrics"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index 07b283cf5..826b12fec 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,13 +1,17 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import SLAMetrics from './components/SLA/SLAMetrics.vue';
 import SLATable from './components/SLA/SLATable.vue';
 import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
 import { generateFileName } from 'dashboard/helper/downloadHelper';
+import ReportHeader from './components/ReportHeader.vue';
 export default {
   name: 'SLAReports',
   components: {
+    V4Button,
+    ReportHeader,
     SLAMetrics,
     SLATable,
     SLAReportFilters,
@@ -77,30 +81,28 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
-    <SLAReportFilters @filter-change="onFilterChange" />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="$t('SLA_REPORTS.HEADER')">
+    <V4Button
+      :label="$t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS')"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadReports"
-    >
-      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
-    </woot-button>
-    <div class="flex flex-col gap-6">
-      <SLAMetrics
-        :hit-rate="slaMetrics.hitRate"
-        :no-of-breaches="slaMetrics.numberOfSLAMisses"
-        :no-of-conversations="slaMetrics.numberOfConversations"
-        :is-loading="uiFlags.isFetchingMetrics"
-      />
-      <SLATable
-        :sla-reports="slaReports"
-        :is-loading="uiFlags.isFetching"
-        :current-page="Number(slaMeta.currentPage)"
-        :total-count="Number(slaMeta.count)"
-        @page-change="onPageChange"
-      />
-    </div>
+    />
+  </ReportHeader>
+  <div class="flex flex-col flex-1 gap-6">
+    <SLAReportFilters @filter-change="onFilterChange" />
+    <SLAMetrics
+      :hit-rate="slaMetrics.hitRate"
+      :no-of-breaches="slaMetrics.numberOfSLAMisses"
+      :no-of-conversations="slaMetrics.numberOfConversations"
+      :is-loading="uiFlags.isFetchingMetrics"
+    />
+    <SLATable
+      :sla-reports="slaReports"
+      :is-loading="uiFlags.isFetching"
+      :current-page="Number(slaMeta.currentPage)"
+      :total-count="Number(slaMeta.count)"
+      @page-change="onPageChange"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
index 523186b8d..d441c986b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="teams/getTeams"
     action-key="teams/get"
     :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+    :report-title="$t('TEAM_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
index fe8e30ba8..e8d8eccf9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
@@ -38,7 +38,7 @@ onMounted(fetchMetrics);
 
 <template>
   <div
-    class="flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+    class="flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
   >
     <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.LABEL')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
index 2ebeeb28e..74258898e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
@@ -29,11 +29,11 @@ const trendColor = (value, key) => {
 </script>
 
 <template>
-  <div class="text-slate-900 dark:text-slate-100">
+  <div class="text-n-slate-11">
     <span class="text-sm">
       {{ metric.NAME }}
     </span>
-    <div class="flex items-end">
+    <div class="flex items-end text-n-slate-12">
       <div class="text-xl font-medium">
         {{ displayMetric(metric.KEY) }}
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index 22c738f4d..f33ba9f37 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -86,7 +86,7 @@ export default {
 <!-- Added ref for writing specs -->
 <template>
   <div
-    class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+    class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4"
   >
     <CsatMetricCard
       :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
@@ -111,10 +111,10 @@ export default {
     <div
       v-if="metrics.totalResponseCount && !ratingFilterEnabled"
       ref="csatBarChart"
-      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
+      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial]"
     >
       <h3
-        class="flex items-center m-0 text-xs font-medium md:text-sm text-slate-800 dark:text-slate-100"
+        class="flex items-center m-0 text-xs font-medium md:text-sm text-n-slate-12"
       >
         <div class="flex flex-row-reverse justify-end">
           <div
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index d870f3808..b66ec20f6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -145,14 +145,13 @@ const table = useVueTable({
 </script>
 
 <template>
-  <div class="csat--table-container">
-    <Table
-      :table="table"
-      class="max-h-[calc(100vh-21.875rem)] border bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800"
-    />
+  <div
+    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
+  >
+    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <div
       v-show="!tableData.length"
-      class="csat--empty-records text-slate-600 dark:text-slate-200 bg-white dark:bg-slate-900 border border-t-0 border-solid border-slate-75 dark:border-slate-700"
+      class="h-48 flex items-center justify-center text-n-slate-12 text-sm"
     >
       {{ $t('CSAT_REPORTS.NO_RECORDS') }}
     </div>
@@ -161,17 +160,3 @@ const table = useVueTable({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.csat--empty-records {
-  align-items: center;
-  // border: 1px solid var(--color-border);
-  border-top: 0;
-  display: flex;
-  font-size: var(--font-size-small);
-  height: 12.5rem;
-  justify-content: center;
-  margin-top: -1px;
-  width: 100%;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index 6eae61836..4e66f6350 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -178,7 +178,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
+  <div class="flex flex-col justify-between gap-3 md:flex-row">
     <div
       class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
index 3a02deb73..2a21ab1be 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -53,7 +53,6 @@ const closeDropdown = () => emit('closeDropdown');
   <FilterButton
     right-icon="chevron-down"
     :button-text="name"
-    class="bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
     @click="toggleDropdown"
   >
     <template v-if="showMenu && activeFilterType === type" #dropdown>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index 472eac272..a8c1229f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -63,8 +63,7 @@ function getDayOfTheWeek(date) {
   return days[dayIndex];
 }
 function getHeatmapLevelClass(value) {
-  if (!value)
-    return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
+  if (!value) return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
 
   let level = [...quantileRange.value, Infinity].findIndex(
     range => value <= range && value > 0
@@ -73,7 +72,7 @@ function getHeatmapLevelClass(value) {
   if (level > 6) level = 5;
 
   if (level === 0) {
-    return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
+    return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
   }
 
   const classes = [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
new file mode 100644
index 000000000..a42442a9d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  headerTitle: {
+    required: true,
+    type: String,
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between w-full h-20 gap-2">
+    <span class="text-xl font-medium text-n-slate-12">
+      {{ headerTitle }}
+    </span>
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
index dff88eae9..4c6aff970 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
@@ -22,26 +22,23 @@ defineProps({
 <template>
   <div
     data-test-id="reportMetricContainer"
-    class="p-4 m-0"
     :class="{
       'grayscale pointer-events-none opacity-30': disabled,
     }"
   >
-    <h3
-      class="flex items-center m-0 text-sm font-medium text-slate-800 dark:text-slate-100"
-    >
+    <h3 class="flex items-center m-0 text-sm font-medium text-n-slate-11">
       <span data-test-id="reportMetricLabel">{{ label }}</span>
       <fluent-icon
         v-tooltip="infoText"
         data-test-id="reportMetricInfo"
         size="14"
         icon="info"
-        class="text-slate-500 dark:text-slate-200 my-0 mx-1 mt-0.5"
+        class="text-n-slate-11 my-0 mx-1 mt-0.5"
       />
     </h3>
     <h4
       data-test-id="reportMetricValue"
-      class="mt-1 mb-0 text-3xl font-thin text-slate-700 dark:text-slate-100"
+      class="mt-1 mb-0 text-2xl text-n-slate-12"
     >
       {{ value }}
     </h4>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
new file mode 100644
index 000000000..2be08487d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="reports--wrapper overflow-auto bg-n-background w-full px-8 xl:px-0"
+  >
+    <div class="max-w-[960px] mx-auto pb-12">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.reports--wrapper {
+  ::v-deep {
+    .multiselect--disabled {
+      @apply opacity-50 border border-n-weak rounded-md cursor-not-allowed;
+    }
+
+    .multiselect__content-wrapper {
+      @apply bg-n-solid-2 border border-n-weak text-n-slate-12;
+    }
+
+    .multiselect__tags {
+      @apply bg-n-slate-1 border border-n-weak m-0 min-h-[2.875rem] pt-0;
+
+      input[type='text'] {
+        @apply bg-n-alpha-3 border-n-weak !min-h-[2.375rem] !h-[2.375rem] !ps-0.5 !py-0 !text-sm;
+      }
+    }
+
+    .multiselect__placeholder {
+      @apply text-n-slate-11;
+    }
+
+    .multiselect__select {
+      @apply min-h-0;
+    }
+
+    .multiselect__single {
+      @apply bg-n-alpha-3 text-n-slate-11;
+    }
+
+    .multiselect__input {
+      @apply text-sm !h-[2.375rem] mb-0 !py-0;
+    }
+
+    .multiselect__tags,
+    .multiselect__input,
+    .multiselect {
+      @apply bg-n-alpha-3 !border-n-weak text-n-slate-12 rounded-lg text-sm min-h-[2.5rem];
+    }
+
+    .mx-input-wrapper {
+      @apply bg-n-alpha-3 !border-n-weak text-n-slate-12 rounded-lg text-sm;
+
+      input {
+        @apply border-n-weak text-sm;
+      }
+    }
+
+    .multiselect__option {
+      @apply flex items-center;
+    }
+
+    .mx-datepicker {
+      .mx-input {
+        @apply bg-n-alpha-3;
+      }
+
+      .mx-input-wrapper input::placeholder {
+        @apply text-n-slate-11;
+      }
+
+      .mx-input-wrapper input {
+        @apply text-n-slate-11;
+      }
+    }
+
+    .multiselect--active:not(.multiselect--above) .multiselect__current,
+    .multiselect--active:not(.multiselect--above) .multiselect__input,
+    .multiselect--active:not(.multiselect--above) .multiselect__tags {
+      @apply rounded-b-none;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 6a4bafc2e..2111b26e3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -24,7 +24,7 @@ export default {
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
-      class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200"
+      class="inline-flex items-center gap-1 text-sm font-medium text-n-slate-11"
     >
       {{ label }}
       <fluent-icon
@@ -32,15 +32,15 @@ export default {
         size="14"
         icon="information"
         type="outline"
-        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-slate-500 dark:text-slate-500"
+        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-n-slate-10"
       />
     </span>
     <div
       v-if="isLoading"
-      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-800 animate-pulse"
+      class="w-12 h-6 mb-0.5 rounded-md bg-n-slate-3 animate-pulse"
     />
 
-    <span v-else class="text-2xl font-medium text-slate-900 dark:text-slate-25">
+    <span v-else class="text-2xl font-medium text-n-slate-12">
       {{ value }}
     </span>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 9f638f3ac..433c30d49 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -22,7 +22,7 @@ defineProps({
 
 <template>
   <div
-    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
+    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
   >
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
@@ -31,18 +31,14 @@ defineProps({
       :is-loading="isLoading"
     />
 
-    <div
-      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
-    />
+    <div class="w-full sm:w-px bg-n-strong" />
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.LABEL')"
       :value="noOfBreaches"
       :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.TOOLTIP')"
       :is-loading="isLoading"
     />
-    <div
-      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
-    />
+    <div class="w-full sm:w-px bg-n-strong" />
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.LABEL')"
       :value="noOfConversations"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
index a85dcffbf..1cd18226e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -31,22 +31,23 @@ const conversationLabels = computed(() => {
 
 <template>
   <div
-    class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+    class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 border-b last:border-b-0 last:rounded-b-xl border-n-weak"
   >
     <div
       class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
     >
-      <span class="text-slate-700 dark:text-slate-200">
+      <span class="text-n-slate-12">
         {{ `#${conversationId} ` }}
       </span>
-      <span class="text-slate-600 dark:text-slate-300">
+      <span class="text-slate-11">
         {{ $t('SLA_REPORTS.WITH') }}
       </span>
-      <span class="capitalize truncate text-slate-700 dark:text-slate-200">{{
+      <span class="capitalize truncate text-n-slate-12">{{
         conversation.contact.name
       }}</span>
       <CardLabels
-        class="w-[80%]"
+        v-if="conversationLabels.length"
+        class="w-[60%]"
         :conversation-id="conversationId"
         :conversation-labels="conversationLabels"
       />
@@ -61,7 +62,7 @@ const conversationLabels = computed(() => {
         v-if="conversation.assignee"
         :user="conversation.assignee"
       />
-      <span v-else class="text-slate-600 dark:text-slate-200"> --- </span>
+      <span v-else class="text-n-slate-11"> --- </span>
     </div>
     <SLAViewDetails :sla-events="slaEvents" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
index 8354a0f8d..503ccf442 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -57,10 +57,10 @@ export default {
 <template>
   <div>
     <div
-      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
+      class="min-w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 p-6"
     >
       <div
-        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 bg-n-slate-2 rounded-md"
       >
         <TableHeaderCell
           :span="6"
@@ -74,13 +74,10 @@ export default {
           :span="2"
           :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
         />
-        <TableHeaderCell :span="2" label="" />
+        <TableHeaderCell :span="1" label="" />
       </div>
 
-      <div
-        v-if="isLoading"
-        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
-      >
+      <div v-if="isLoading" class="flex items-center justify-center h-32">
         <Spinner />
         <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
       </div>
@@ -94,10 +91,7 @@ export default {
           :sla-events="slaReport.sla_events"
         />
       </div>
-      <div
-        v-else
-        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
-      >
+      <div v-else class="flex items-center justify-center h-32">
         {{ $t('SLA_REPORTS.NO_RECORDS') }}
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index ff84c2f1c..eb7a60dd1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -29,24 +29,23 @@ export default {
 </script>
 
 <template>
-  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
-    <div
-      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-    >
-      <div class="relative">
-        <woot-button
-          color-scheme="secondary"
-          variant="link"
-          @click="openSlaEvents"
-        >
-          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
-        </woot-button>
-        <SLAPopoverCard
-          v-if="showSlaPopoverCard"
-          :sla-missed-events="slaEvents"
-          class="right-0"
-        />
-      </div>
+  <div
+    v-on-clickaway="closeSlaEvents"
+    class="flex items-center col-span-2 text-slate-11 justify-end"
+  >
+    <div class="relative">
+      <woot-button
+        color-scheme="secondary"
+        variant="link"
+        @click="openSlaEvents"
+      >
+        {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+      </woot-button>
+      <SLAPopoverCard
+        v-if="showSlaPopoverCard"
+        :sla-missed-events="slaEvents"
+        class="right-0"
+      />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index 06b8c76ee..b0e6b84a0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -1,10 +1,12 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import ReportFilters from './ReportFilters.vue';
 import ReportContainer from '../ReportContainer.vue';
 import { GROUP_BY_FILTER } from '../constants';
 import { generateFileName } from '../../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
+import ReportHeader from './ReportHeader.vue';
 
 const GROUP_BY_OPTIONS = {
   DAY: [{ id: 1, groupByKey: 'REPORT.GROUPING_OPTIONS.DAY' }],
@@ -26,6 +28,8 @@ const GROUP_BY_OPTIONS = {
 
 export default {
   components: {
+    ReportHeader,
+    V4Button,
     ReportFilters,
     ReportContainer,
   },
@@ -46,6 +50,10 @@ export default {
       type: String,
       default: 'Download Reports',
     },
+    reportTitle: {
+      type: String,
+      default: 'Download Reports',
+    },
   },
   data() {
     return {
@@ -198,30 +206,29 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="reportTitle">
+    <V4Button
+      :label="downloadButtonLabel"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadReports"
-    >
-      {{ downloadButtonLabel }}
-    </woot-button>
-    <ReportFilters
-      v-if="filterItemsList"
-      :type="type"
-      :filter-items-list="filterItemsList"
-      :group-by-filter-items-list="groupByfilterItemsList"
-      :selected-group-by-filter="selectedGroupByFilter"
-      @date-range-change="onDateRangeChange"
-      @filter-change="onFilterChange"
-      @group-by-filter-change="onGroupByFilterChange"
-      @business-hours-toggle="onBusinessHoursToggle"
     />
-    <ReportContainer
-      v-if="filterItemsList.length"
-      :group-by="groupBy"
-      :report-keys="reportKeys"
-    />
-  </div>
+  </ReportHeader>
+
+  <ReportFilters
+    v-if="filterItemsList"
+    :type="type"
+    :filter-items-list="filterItemsList"
+    :group-by-filter-items-list="groupByfilterItemsList"
+    :selected-group-by-filter="selectedGroupByFilter"
+    @date-range-change="onDateRangeChange"
+    @filter-change="onFilterChange"
+    @group-by-filter-change="onGroupByFilterChange"
+    @business-hours-toggle="onBusinessHoursToggle"
+  />
+  <ReportContainer
+    v-if="filterItemsList.length"
+    :group-by="groupBy"
+    :report-keys="reportKeys"
+  />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index d176b6377..810db7029 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -144,10 +144,7 @@ const table = useVueTable({
 
 <template>
   <div class="agent-table-container">
-    <Table
-      :table="table"
-      class="max-h-[calc(100vh-21.875rem)] border border-slate-50 dark:border-slate-800"
-    />
+    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <Pagination class="mt-2" :table="table" />
     <div v-if="isLoading" class="agents-loader">
       <Spinner />
@@ -169,7 +166,7 @@ const table = useVueTable({
   .ve-table {
     &::v-deep {
       th.ve-table-header-th {
-        font-size: var(--font-size-mini) !important;
+        @apply text-sm rounded-xl;
         padding: var(--space-small) var(--space-two) !important;
       }
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index 78ca70927..83b93d61f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -25,25 +25,23 @@ export default {
 
 <template>
   <div
-    class="metric-card mb-2 p flex flex-col m-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem]"
+    class="flex flex-col m-0.5 px-6 py-5 overflow-hidden rounded-xl flex-grow text-n-slate-12 shadow outline-1 outline outline-n-container bg-n-solid-2 min-h-[10rem]"
   >
     <div
       class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
     >
       <slot name="header">
-        <div class="flex items-center gap-0.5 flex-row">
-          <h5
-            class="mb-0 text-slate-800 dark:text-slate-100 font-medium text-xl"
-          >
+        <div class="flex items-center gap-2 flex-row">
+          <h5 class="mb-0 text-n-slate-12 font-medium text-lg">
             {{ header }}
           </h5>
           <span
-            class="flex flex-row items-center pr-2 pl-2 m-1 rounded-sm text-green-400 dark:text-green-400 text-xs bg-green-100/30 dark:bg-green-100/20"
+            class="flex flex-row items-center py-0.5 px-2 rounded bg-n-teal-3 text-xs"
           >
             <span
-              class="bg-green-500 dark:bg-green-500 h-1 w-1 rounded-full mr-1 rtl:mr-0 rtl:ml-0"
+              class="bg-n-teal-9 h-1 w-1 rounded-full mr-1 rtl:mr-0 rtl:ml-0"
             />
-            <span>
+            <span class="text-xs text-n-teal-11">
               {{ $t('OVERVIEW_REPORTS.LIVE') }}
             </span>
           </span>
@@ -66,7 +64,7 @@ export default {
       class="items-center flex text-base justify-center px-12 py-6"
     >
       <Spinner />
-      <span class="text-slate-300 dark:text-slate-200">
+      <span class="text-n-slate-11">
         {{ loadingMessage }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
index 78462b3bf..1f1e80f83 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CsatMetrics.vue > computes response count correctly 1`] = `
-"<div class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700">
+"<div class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4">
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="100"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="--"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="90%"></csat-metric-card-stub>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index d19c081d1..0a3b4d8a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
-import SettingsContent from '../Wrapper.vue';
+import ReportsWrapper from './components/ReportsWrapper.vue';
 import Index from './Index.vue';
 import AgentReports from './AgentReports.vue';
 import LabelReports from './LabelReports.vue';
@@ -16,12 +16,7 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'OVERVIEW_REPORTS.HEADER',
-        icon: 'arrow-trending-lines',
-        keepAlive: false,
-      },
+      component: ReportsWrapper,
       children: [
         {
           path: '',
@@ -37,17 +32,6 @@ export default {
           },
           component: LiveReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'REPORT.HEADER',
-        icon: 'chat',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'conversation',
           name: 'conversation_reports',
@@ -56,56 +40,6 @@ export default {
           },
           component: Index,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CSAT_REPORTS.HEADER',
-        icon: 'emoji',
-        keepAlive: false,
-      },
-      children: [
-        {
-          path: 'csat',
-          name: 'csat_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-          },
-          component: CsatResponses,
-        },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'BOT_REPORTS.HEADER',
-        icon: 'bot',
-        keepAlive: false,
-      },
-      children: [
-        {
-          path: 'bot',
-          name: 'bot_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-            featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
-          },
-          component: BotReports,
-        },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'AGENT_REPORTS.HEADER',
-        icon: 'people',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'agent',
           name: 'agent_reports',
@@ -114,17 +48,6 @@ export default {
           },
           component: AgentReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'LABEL_REPORTS.HEADER',
-        icon: 'tag',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'label',
           name: 'label_reports',
@@ -133,17 +56,6 @@ export default {
           },
           component: LabelReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'INBOX_REPORTS.HEADER',
-        icon: 'mail-inbox-all',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'inboxes',
           name: 'inbox_reports',
@@ -152,16 +64,6 @@ export default {
           },
           component: InboxReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'TEAM_REPORTS.HEADER',
-        icon: 'people-team',
-      },
-      children: [
         {
           path: 'teams',
           name: 'team_reports',
@@ -170,17 +72,6 @@ export default {
           },
           component: TeamReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'SLA_REPORTS.HEADER',
-        icon: 'document-list-clock',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'sla',
           name: 'sla_reports',
@@ -190,6 +81,22 @@ export default {
           },
           component: SLAReports,
         },
+        {
+          path: 'csat',
+          name: 'csat_reports',
+          meta: {
+            permissions: ['administrator', 'report_manage'],
+          },
+          component: CsatResponses,
+        },
+        {
+          path: 'bot',
+          name: 'bot_reports',
+          meta: {
+            permissions: ['administrator', 'report_manage'],
+          },
+          component: BotReports,
+        },
       ],
     },
   ],

From ea616d6a931bc23fca724e3b5b7a427964bacf4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Tr=E1=BA=A7n=20Chung?=
 <nguyentranchung52th@gmail.com>
Date: Wed, 27 Nov 2024 20:38:54 +0900
Subject: [PATCH 26/74] chore: clear apt warning in cwctl (#10488)

---
 deployment/setup_20.04.sh | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/deployment/setup_20.04.sh b/deployment/setup_20.04.sh
index 830d03708..6c5d0843e 100644
--- a/deployment/setup_20.04.sh
+++ b/deployment/setup_20.04.sh
@@ -171,8 +171,8 @@ EOF
 #   None
 ##############################################################################
 function install_dependencies() {
-  apt update && apt upgrade -y
-  apt install -y curl
+  apt-get update && apt-get upgrade -y
+  apt-get install -y curl
   curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
   echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
   mkdir -p /etc/apt/keyrings
@@ -180,9 +180,9 @@ function install_dependencies() {
   NODE_MAJOR=20
   echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
 
-  apt update
+  apt-get update
 
-  apt install -y \
+  apt-get install -y \
       git software-properties-common ca-certificates imagemagick libpq-dev \
       libxml2-dev libxslt1-dev file g++ gcc autoconf build-essential \
       libssl-dev libyaml-dev libreadline-dev gnupg2 \
@@ -203,7 +203,7 @@ function install_dependencies() {
 #   None
 ##############################################################################
 function install_databases() {
-  apt install -y postgresql postgresql-contrib redis-server
+  apt-get install -y postgresql postgresql-contrib redis-server
 }
 
 ##############################################################################
@@ -216,7 +216,7 @@ function install_databases() {
 #   None
 ##############################################################################
 function install_webserver() {
-  apt install -y nginx nginx-full certbot python3-certbot-nginx
+  apt-get install -y nginx nginx-full certbot python3-certbot-nginx
 }
 
 ##############################################################################
@@ -752,9 +752,9 @@ function upgrade_redis() {
 
   curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
   echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
-  apt update -y
-  apt upgrade redis-server -y
-  apt install libvips -y
+  apt-get update -y
+  apt-get upgrade redis-server -y
+  apt-get install libvips -y
 }
 
 
@@ -787,8 +787,8 @@ function upgrade_node() {
   NODE_MAJOR=20
   echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
 
-  apt update
-  apt install nodejs -y
+  apt-get update
+  apt-get install nodejs -y
 
 }
 
@@ -989,7 +989,7 @@ function cwctl_upgrade_check() {
     #Check if pip is not installed, and install it if not
     if ! command -v pip3 &> /dev/null; then
         echo "Installing pip..."
-        apt install -y python3-pip
+        apt-get install -y python3-pip
     fi
 
     # Check if packaging library is installed, and install it if not
@@ -1025,7 +1025,7 @@ function install_packaging() {
   ubuntu_version=$(lsb_release -r | awk '{print $2}')
   if [[ "$ubuntu_version" == "24.04" ]]; then
     echo "Detected Ubuntu 24.04. Installing packaging library using apt."
-    apt install -y python3-packaging
+    apt-get install -y python3-packaging
   else
     echo "Installing packaging library using pip."
     python3 -m pip install packaging

From 94c918e468cbda54dfa207e3f52f9324c5a4b12e Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Wed, 27 Nov 2024 20:31:01 +0800
Subject: [PATCH 27/74] chore: [Snyk] Security upgrade google-cloud-storage
 from 1.44.0 to 1.48.0 (#10148)

- bump up gems based on snyk security alerts
---
 Gemfile      |  2 +-
 Gemfile.lock | 47 +++++++++++++++++++++++------------------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/Gemfile b/Gemfile
index f18305970..439b0f63e 100644
--- a/Gemfile
+++ b/Gemfile
@@ -49,7 +49,7 @@ gem 'aws-sdk-s3', require: false
 # original gem isn't maintained actively
 # we wanted updated version of faraday which is a dependency for slack-ruby-client
 gem 'azure-storage-blob', git: 'https://github.com/chatwoot/azure-storage-ruby', branch: 'chatwoot', require: false
-gem 'google-cloud-storage', require: false
+gem 'google-cloud-storage', '>= 1.48.0', require: false
 gem 'image_processing'
 
 ##-- gems for database --#
diff --git a/Gemfile.lock b/Gemfile.lock
index e2f5c91be..4ea52d1e1 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -209,7 +209,7 @@ GEM
       devise (> 3.5.2, < 5)
       rails (>= 4.2.0, < 7.2)
     diff-lcs (1.5.1)
-    digest-crc (0.6.4)
+    digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
     docile (1.4.0)
     domain_name (0.5.20190701)
@@ -284,39 +284,39 @@ GEM
       activesupport (>= 6.1)
     gmail_xoauth (0.4.3)
       oauth (>= 0.3.6)
-    google-apis-core (0.11.0)
+    google-apis-core (0.15.1)
       addressable (~> 2.5, >= 2.5.1)
-      googleauth (>= 0.16.2, < 2.a)
-      httpclient (>= 2.8.1, < 3.a)
+      googleauth (~> 1.9)
+      httpclient (>= 2.8.3, < 3.a)
       mini_mime (~> 1.0)
+      mutex_m
       representable (~> 3.0)
       retriable (>= 2.0, < 4.a)
-      rexml
-      webrick
-    google-apis-iamcredentials_v1 (0.17.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-storage_v1 (0.19.0)
-      google-apis-core (>= 0.9.0, < 2.a)
-    google-cloud-core (1.6.0)
-      google-cloud-env (~> 1.0)
+    google-apis-iamcredentials_v1 (0.22.0)
+      google-apis-core (>= 0.15.0, < 2.a)
+    google-apis-storage_v1 (0.47.0)
+      google-apis-core (>= 0.15.0, < 2.a)
+    google-cloud-core (1.7.1)
+      google-cloud-env (>= 1.0, < 3.a)
       google-cloud-errors (~> 1.0)
     google-cloud-dialogflow-v2 (0.31.0)
       gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
       google-cloud-location (>= 0.4, < 2.a)
-    google-cloud-env (1.6.0)
-      faraday (>= 0.17.3, < 3.0)
+    google-cloud-env (2.2.1)
+      faraday (>= 1.0, < 3.a)
     google-cloud-errors (1.3.1)
     google-cloud-location (0.6.0)
       gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-cloud-storage (1.44.0)
+    google-cloud-storage (1.52.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
-      google-apis-iamcredentials_v1 (~> 0.1)
-      google-apis-storage_v1 (~> 0.19.0)
+      google-apis-core (~> 0.13)
+      google-apis-iamcredentials_v1 (~> 0.18)
+      google-apis-storage_v1 (~> 0.38)
       google-cloud-core (~> 1.6)
-      googleauth (>= 0.16.2, < 2.a)
+      googleauth (~> 1.9)
       mini_mime (~> 1.0)
     google-cloud-translate-v3 (0.10.0)
       gapic-common (>= 0.20.0, < 2.a)
@@ -331,10 +331,10 @@ GEM
       grpc (~> 1.41)
     googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
-    googleauth (1.5.2)
-      faraday (>= 0.17.3, < 3.a)
+    googleauth (1.11.2)
+      faraday (>= 1.0, < 3.a)
+      google-cloud-env (~> 2.1)
       jwt (>= 1.4, < 3.0)
-      memoist (~> 0.16)
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
@@ -462,7 +462,6 @@ GEM
       net-smtp
     marcel (1.0.4)
     maxminddb (0.1.22)
-    memoist (0.16.2)
     meta_request (0.8.3)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
@@ -480,6 +479,7 @@ GEM
     multi_json (1.15.0)
     multi_xml (0.6.0)
     multipart-post (2.3.0)
+    mutex_m (0.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
     net-http (0.4.1)
@@ -824,7 +824,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.8.2)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -886,7 +885,7 @@ DEPENDENCIES
   geocoder
   gmail_xoauth
   google-cloud-dialogflow-v2 (>= 0.24.0)
-  google-cloud-storage
+  google-cloud-storage (>= 1.48.0)
   google-cloud-translate-v3 (>= 0.7.0)
   groupdate
   grpc

From 25c61aba25e4b0abe5ff59786bd97823c1ba3d7a Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 28 Nov 2024 09:35:54 +0530
Subject: [PATCH 28/74] feat(v4): Add new conversation filters component
 (#10502)

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../dropdown-menu/base/DropdownBody.vue       |  28 +-
 .../dropdown-menu/base/DropdownItem.vue       |   2 +-
 .../filter/ConditionRow.story.vue             |  14 +-
 .../components-next/filter/ConditionRow.vue   |  14 +-
 .../filter/ConversationFilter.vue             | 175 ++++++++++
 .../components-next/filter/SaveCustomView.vue | 130 ++++++++
 .../filter/inputs/FilterSelect.vue            |   2 +-
 .../filter/inputs/MultiSelect.vue             |   2 +-
 .../filter/inputs/SingleSelect.vue            |   2 +-
 .../components-next/filter/operators.js       | 164 ++++++++++
 .../components-next/filter/provider.js        | 299 ++++++++++++++++++
 .../dashboard/components/ChatList.vue         | 101 +++---
 .../dashboard/components/ChatListHeader.vue   |  64 ++--
 .../dashboard/composables/useTransformKeys.js |  25 ++
 .../dashboard/helper/validations.js           |  29 +-
 .../i18n/locale/en/advancedFilters.json       |  18 +-
 .../dashboard/store/modules/attributes.js     |  11 +
 .../store/modules/conversations/getters.js    |   5 +
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  53 +++-
 20 files changed, 1039 insertions(+), 100 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/filter/ConversationFilter.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/SaveCustomView.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/operators.js
 create mode 100644 app/javascript/dashboard/components-next/filter/provider.js
 create mode 100644 app/javascript/dashboard/composables/useTransformKeys.js

diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
index 7616c16d8..246eba5aa 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
@@ -1,7 +1,33 @@
+<script setup>
+import { computed } from 'vue';
+const { strong } = defineProps({
+  // Use strong prop when this dropdown is stacked inside another dropdown
+  // Chrome has issues with stacked backdrop-blur, so we need an extra blur layer when stacked
+  // Also, stacked dropdowns should have a strong border
+  strong: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const borderClass = computed(() => {
+  return strong ? 'border-n-strong' : 'border-n-weak';
+});
+
+const beforeClass = computed(() => {
+  if (!strong) return '';
+
+  // Add extra blur layer only when strong prop is true, as a hack for Chrome's stacked backdrop-blur limitation
+  // https://issues.chromium.org/issues/40835530
+  return "before:content-['\x00A0'] before:absolute before:bottom-0 before:left-0 before:w-full before:h-full before:backdrop-contrast-70 before:backdrop-blur-sm before:z-0 [&>*]:relative";
+});
+</script>
+
 <template>
   <div class="absolute">
     <ul
-      class="text-sm bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base"
+      class="text-sm bg-n-alpha-3 backdrop-blur-[100px] border rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base relative"
+      :class="[borderClass, beforeClass]"
     >
       <slot />
     </ul>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
index 48b746f2a..821b4218b 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
@@ -27,8 +27,8 @@ const componentIs = computed(() => {
 const triggerClick = () => {
   if (props.click) {
     props.click();
-    if (!props.preserveOpen) closeMenu();
   }
+  if (!props.preserveOpen) closeMenu();
 };
 </script>
 
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
index 4c4c3c80b..0a59a902f 100644
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import ConditionRow from './ConditionRow.vue';
 import Button from 'next/button/Button.vue';
 import { filterTypes } from './fixtures/filterTypes.js';
@@ -12,6 +12,7 @@ const DEFAULT_FILTER = {
 };
 
 const filters = ref([{ ...DEFAULT_FILTER }]);
+const conditionsRef = useTemplateRef('conditionsRef');
 
 const removeFilter = index => {
   filters.value.splice(index, 1);
@@ -22,6 +23,10 @@ const showQueryOperator = true;
 const addFilter = () => {
   filters.value.push({ ...DEFAULT_FILTER });
 };
+
+const saveFilter = () => {
+  console.log(conditionsRef.value.every(condition => condition.validate()));
+};
 </script>
 
 <template>
@@ -33,6 +38,7 @@ const addFilter = () => {
       <template v-for="(filter, index) in filters" :key="`filter-${index}`">
         <ConditionRow
           v-if="index === 0"
+          ref="conditionsRef"
           v-model:attribute-key="filter.attributeKey"
           v-model:filter-operator="filter.filterOperator"
           v-model:values="filter.values"
@@ -43,6 +49,7 @@ const addFilter = () => {
 
         <ConditionRow
           v-else
+          ref="conditionsRef"
           v-model:attribute-key="filter.attributeKey"
           v-model:filter-operator="filter.filterOperator"
           v-model:values="filter.values"
@@ -52,7 +59,10 @@ const addFilter = () => {
           @remove="removeFilter(index)"
         />
       </template>
-      <Button sm label="Add Filter" @click="addFilter" />
+      <div class="flex gap-3 mt-2">
+        <Button sm ghost label="Add Filter" @click="addFilter" />
+        <Button sm label="Save Filter" @click="saveFilter" />
+      </div>
     </div>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
index 079313933..e2a2bfb45 100644
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -6,6 +6,7 @@ import FilterSelect from './inputs/FilterSelect.vue';
 import MultiSelect from './inputs/MultiSelect.vue';
 import SingleSelect from './inputs/SingleSelect.vue';
 
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { validateSingleFilter } from 'dashboard/helper/validations.js';
 
 // filterTypes: import('vue').ComputedRef<FilterType[]>
@@ -91,11 +92,14 @@ const booleanOptions = computed(() => [
 ]);
 
 const validationError = computed(() => {
-  return validateSingleFilter({
-    attributeKey: attributeKey.value,
-    filter_operator: filterOperator.value,
-    values: values.value,
-  });
+  // TOOD: Migrate validateSingleFilter to use camelcase and then remove useSnakeCase here too
+  return validateSingleFilter(
+    useSnakeCase({
+      attributeKey: attributeKey.value,
+      filterOperator: filterOperator.value,
+      values: values.value,
+    })
+  );
 });
 
 const resetModelOnAttributeKeyChange = newAttributeKey => {
diff --git a/app/javascript/dashboard/components-next/filter/ConversationFilter.vue b/app/javascript/dashboard/components-next/filter/ConversationFilter.vue
new file mode 100644
index 000000000..d9ccb2c88
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ConversationFilter.vue
@@ -0,0 +1,175 @@
+<script setup>
+import { useTemplateRef, onBeforeUnmount, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useTrack } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import { vOnClickOutside } from '@vueuse/components';
+import { CONVERSATION_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useConversationFilterContext } from './provider.js';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+
+import Button from 'next/button/Button.vue';
+import ConditionRow from './ConditionRow.vue';
+
+const props = defineProps({
+  isFolderView: {
+    type: Boolean,
+    default: false,
+  },
+  folderName: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['applyFilter', 'updateFolder', 'close']);
+const { filterTypes } = useConversationFilterContext();
+
+const filters = defineModel({
+  type: Array,
+  default: [],
+});
+const folderNameLocal = ref(props.folderName);
+
+const DEFAULT_FILTER = {
+  attributeKey: 'status',
+  filterOperator: 'equal_to',
+  values: [],
+  queryOperator: 'and',
+};
+
+const { t } = useI18n();
+const store = useStore();
+
+const resetFilter = () => {
+  filters.value = [{ ...DEFAULT_FILTER }];
+};
+
+const removeFilter = index => {
+  if (filters.value.length === 1) {
+    resetFilter();
+  } else {
+    filters.value.splice(index, 1);
+  }
+};
+
+const addFilter = () => {
+  filters.value.push({ ...DEFAULT_FILTER });
+};
+
+const conditionsRef = useTemplateRef('conditionsRef');
+
+const isConditionsValid = () => {
+  return conditionsRef.value.every(condition => condition.validate());
+};
+
+const updateSavedCustomViews = () => {
+  if (isConditionsValid()) {
+    emit('updateFolder', filters.value, folderNameLocal.value);
+  }
+};
+
+function validateAndSubmit() {
+  if (!isConditionsValid()) {
+    return;
+  }
+
+  store.dispatch(
+    'setConversationFilters',
+    useSnakeCase(JSON.parse(JSON.stringify(filters.value)))
+  );
+  emit('applyFilter', filters.value);
+  useTrack(CONVERSATION_EVENTS.APPLY_FILTER, {
+    appliedFilters: filters.value.map(filter => ({
+      key: filter.attributeKey,
+      operator: filter.filterOperator,
+      queryOperator: filter.queryOperator,
+    })),
+  });
+}
+
+const filterModalHeaderTitle = computed(() => {
+  return !props.isFolderView
+    ? t('FILTER.TITLE')
+    : t('FILTER.EDIT_CUSTOM_FILTER');
+});
+
+onBeforeUnmount(() => emit('close'));
+const outsideClickHandler = [
+  () => emit('close'),
+  { ignore: ['#toggleConversationFilterButton'] },
+];
+</script>
+
+<template>
+  <div
+    v-on-click-outside="outsideClickHandler"
+    class="z-40 max-w-3xl lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+  >
+    <h3 class="text-base font-medium leading-6 text-n-slate-12">
+      {{ filterModalHeaderTitle }}
+    </h3>
+    <div v-if="props.isFolderView">
+      <label class="border-b border-n-weak pb-6">
+        <div class="text-n-slate-11 text-sm mb-2">
+          {{ t('FILTER.FOLDER_LABEL') }}
+        </div>
+        <input
+          v-model="folderNameLocal"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
+        />
+      </label>
+    </div>
+    <ul class="grid gap-4 list-none">
+      <template v-for="(filter, index) in filters" :key="filter.id">
+        <ConditionRow
+          v-if="index === 0"
+          ref="conditionsRef"
+          :key="`filter-${filter.attributeKey}-0`"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          :filter-types="filterTypes"
+          :show-query-operator="false"
+          @remove="removeFilter(index)"
+        />
+        <ConditionRow
+          v-else
+          :key="`filter-${filter.attributeKey}-${index}`"
+          ref="conditionsRef"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:query-operator="filters[index - 1].queryOperator"
+          v-model:values="filter.values"
+          show-query-operator
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+      </template>
+    </ul>
+    <div class="flex gap-2 justify-between">
+      <Button sm ghost blue @click="addFilter">
+        {{ $t('FILTER.ADD_NEW_FILTER') }}
+      </Button>
+      <div class="flex gap-2">
+        <Button sm faded slate @click="resetFilter">
+          {{ t('FILTER.CLEAR_BUTTON_LABEL') }}
+        </Button>
+        <Button
+          v-if="isFolderView"
+          sm
+          solid
+          blue
+          :disabled="!folderNameLocal"
+          @click="updateSavedCustomViews"
+        >
+          {{ t('FILTER.UPDATE_BUTTON_LABEL') }}
+        </Button>
+        <Button v-else sm solid blue @click="validateAndSubmit">
+          {{ t('FILTER.SUBMIT_BUTTON_LABEL') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/SaveCustomView.vue b/app/javascript/dashboard/components-next/filter/SaveCustomView.vue
new file mode 100644
index 000000000..95b2e0388
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/SaveCustomView.vue
@@ -0,0 +1,130 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { vOnClickOutside } from '@vueuse/components';
+import { useTrack } from 'dashboard/composables';
+import NextButton from 'next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  directives: {
+    onClickOutside: vOnClickOutside,
+  },
+  props: {
+    filterType: {
+      type: Number,
+      default: 0,
+    },
+    customViewsQuery: {
+      type: Object,
+      default: () => {},
+    },
+    openLastSavedItem: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  emits: ['close'],
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      show: true,
+      name: '',
+    };
+  },
+
+  computed: {
+    isButtonDisabled() {
+      return this.v$.name.$invalid;
+    },
+  },
+
+  validations: {
+    name: {
+      required,
+      minLength: minLength(1),
+    },
+  },
+
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    async saveCustomViews() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      try {
+        await this.$store.dispatch('customViews/create', {
+          name: this.name,
+          filter_type: this.filterType,
+          query: this.customViewsQuery,
+        });
+        this.alertMessage =
+          this.filterType === 0
+            ? this.$t('FILTER.CUSTOM_VIEWS.ADD.API_FOLDERS.SUCCESS_MESSAGE')
+            : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.SUCCESS_MESSAGE');
+        this.onClose();
+
+        useTrack(CONTACTS_EVENTS.SAVE_FILTER, {
+          type: this.filterType === 0 ? 'folder' : 'segment',
+        });
+      } catch (error) {
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage || this.filterType === 0
+            ? errorMessage
+            : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.ERROR_MESSAGE');
+      } finally {
+        useAlert(this.alertMessage);
+      }
+      this.openLastSavedItem();
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="[
+      () => $emit('close'),
+      { ignore: ['#saveFilterTeleportTarget'] },
+    ]"
+    class="z-40 max-w-3xl lg:w-[500px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+  >
+    <h3 class="text-base font-medium leading-6 text-n-slate-12">
+      {{ $t('FILTER.CUSTOM_VIEWS.ADD.TITLE') }}
+    </h3>
+    <form class="w-full grid gap-6" @submit.prevent="saveCustomViews">
+      <div>
+        <input
+          v-model="name"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
+          @blur="v$.name.$touch"
+        />
+        <span
+          v-if="v$.name.$error"
+          class="text-xs text-n-ruby-11 ml-1 rtl:mr-1"
+        >
+          {{ $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') }}
+        </span>
+      </div>
+      <div class="flex flex-row justify-end w-full gap-2">
+        <NextButton sm solid blue :disabled="isButtonDisabled">
+          {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
+        </NextButton>
+        <NextButton faded slate sm @click.prevent="onClose">
+          {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
+        </NextButton>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
index d44316d4a..db420920b 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -61,7 +61,7 @@ const updateSelected = newValue => {
         />
       </slot>
     </template>
-    <DropdownBody class="top-0 min-w-48 z-[999]">
+    <DropdownBody class="top-0 min-w-48 z-50" strong>
       <DropdownSection class="max-h-80 overflow-scroll">
         <DropdownItem
           v-for="option in options"
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
index 23f3f6c28..be11847fb 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
@@ -122,7 +122,7 @@ const toggleOption = option => {
         <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
       </Button>
     </template>
-    <DropdownBody class="top-0 min-w-48 z-[999]">
+    <DropdownBody class="top-0 min-w-48 z-50" strong>
       <DropdownSection class="max-h-80 overflow-scroll">
         <DropdownItem
           v-for="option in options"
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
index 6a79b3438..7fb143883 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -80,7 +80,7 @@ const toggleSelected = option => {
         <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
       </Button>
     </template>
-    <DropdownBody class="top-0 min-w-56 z-[999]">
+    <DropdownBody class="top-0 min-w-56 z-50" strong>
       <div v-if="!disableSearch" class="relative">
         <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
         <input
diff --git a/app/javascript/dashboard/components-next/filter/operators.js b/app/javascript/dashboard/components-next/filter/operators.js
new file mode 100644
index 000000000..22af84a89
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/operators.js
@@ -0,0 +1,164 @@
+import { computed, h } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+/**
+ * @typedef {Object} FilterOperations
+ * @property {string} EQUAL_TO - Equals comparison
+ * @property {string} NOT_EQUAL_TO - Not equals comparison
+ * @property {string} IS_PRESENT - Present check
+ * @property {string} IS_NOT_PRESENT - Not present check
+ * @property {string} CONTAINS - Contains check
+ * @property {string} DOES_NOT_CONTAIN - Does not contain check
+ * @property {string} IS_GREATER_THAN - Greater than comparison
+ * @property {string} IS_LESS_THAN - Less than comparison
+ * @property {string} DAYS_BEFORE - Days before check
+ * @property {string} STARTS_WITH - Starts with check
+ */
+
+/**
+ * @typedef {Object} Operator
+ * @property {string} value - Operator value from FILTER_OPS
+ * @property {string} label - Translated display label
+ * @property {import('vue').VNode} icon - Vue icon component instance
+ * @property {string|null} inputOverride - Input field type override
+ * @property {boolean} hasInput - Whether operator requires an input value
+ */
+
+const FILTER_OPS = {
+  EQUAL_TO: 'equal_to',
+  NOT_EQUAL_TO: 'not_equal_to',
+  IS_PRESENT: 'is_present',
+  IS_NOT_PRESENT: 'is_not_present',
+  CONTAINS: 'contains',
+  DOES_NOT_CONTAIN: 'does_not_contain',
+  IS_GREATER_THAN: 'is_greater_than',
+  IS_LESS_THAN: 'is_less_than',
+  DAYS_BEFORE: 'days_before',
+  STARTS_WITH: 'starts_with',
+};
+
+const NO_INPUT_OPTS = [FILTER_OPS.IS_PRESENT, FILTER_OPS.IS_NOT_PRESENT];
+
+const OPS_INPUT_OVERRIDE = {
+  [FILTER_OPS.DAYS_BEFORE]: 'plainText',
+};
+
+/**
+ * @type {Record<string, string>}
+ */
+const filterOperatorIcon = {
+  [FILTER_OPS.EQUAL_TO]: 'i-ph-equals-bold',
+  [FILTER_OPS.NOT_EQUAL_TO]: 'i-ph-not-equals-bold',
+  [FILTER_OPS.IS_PRESENT]: 'i-ph-member-of-bold',
+  [FILTER_OPS.IS_NOT_PRESENT]: 'i-ph-not-member-of-bold',
+  [FILTER_OPS.CONTAINS]: 'i-ph-superset-of-bold',
+  [FILTER_OPS.DOES_NOT_CONTAIN]: 'i-ph-not-superset-of-bold',
+  [FILTER_OPS.IS_GREATER_THAN]: 'i-ph-greater-than-bold',
+  [FILTER_OPS.IS_LESS_THAN]: 'i-ph-less-than-bold',
+  [FILTER_OPS.DAYS_BEFORE]: 'i-ph-calendar-minus-bold',
+  [FILTER_OPS.STARTS_WITH]: 'i-ph-caret-line-right-bold',
+};
+
+/**
+ * Vue composable providing access to filter operators and related functionality
+ * @returns {Object} Collection of operators and utility functions
+ * @property {import('vue').ComputedRef<Record<string, Operator>>} operators - All available operators
+ * @property {import('vue').ComputedRef<Operator[]>} equalityOperators - Equality comparison operators
+ * @property {import('vue').ComputedRef<Operator[]>} presenceOperators - Presence check operators
+ * @property {import('vue').ComputedRef<Operator[]>} containmentOperators - Containment check operators
+ * @property {import('vue').ComputedRef<Operator[]>} comparisonOperators - Numeric comparison operators
+ * @property {import('vue').ComputedRef<Operator[]>} dateOperators - Date-specific operators
+ * @property {(key: 'list'|'text'|'number'|'link'|'date'|'checkbox') => Operator[]} getOperatorTypes - Get operators for a field type
+ */
+export function useOperators() {
+  const { t } = useI18n();
+
+  /** @type {import('vue').ComputedRef<Record<string, Operator>>} */
+  const operators = computed(() => {
+    return Object.values(FILTER_OPS).reduce((acc, value) => {
+      acc[value] = {
+        value,
+        label: t(`FILTER.OPERATOR_LABELS.${value}`),
+        hasInput: !NO_INPUT_OPTS.includes(value),
+        inputOverride: OPS_INPUT_OVERRIDE[value] || null,
+        icon: h('span', {
+          class: `${filterOperatorIcon[value]} !text-n-blue-text`,
+        }),
+      };
+      return acc;
+    }, {});
+  });
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const equalityOperators = computed(() => [
+    operators.value[FILTER_OPS.EQUAL_TO],
+    operators.value[FILTER_OPS.NOT_EQUAL_TO],
+  ]);
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const presenceOperators = computed(() => [
+    operators.value[FILTER_OPS.EQUAL_TO],
+    operators.value[FILTER_OPS.NOT_EQUAL_TO],
+    operators.value[FILTER_OPS.IS_PRESENT],
+    operators.value[FILTER_OPS.IS_NOT_PRESENT],
+  ]);
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const containmentOperators = computed(() => [
+    operators.value[FILTER_OPS.EQUAL_TO],
+    operators.value[FILTER_OPS.NOT_EQUAL_TO],
+    operators.value[FILTER_OPS.CONTAINS],
+    operators.value[FILTER_OPS.DOES_NOT_CONTAIN],
+  ]);
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const comparisonOperators = computed(() => [
+    operators.value[FILTER_OPS.EQUAL_TO],
+    operators.value[FILTER_OPS.NOT_EQUAL_TO],
+    operators.value[FILTER_OPS.IS_PRESENT],
+    operators.value[FILTER_OPS.IS_NOT_PRESENT],
+    operators.value[FILTER_OPS.IS_GREATER_THAN],
+    operators.value[FILTER_OPS.IS_LESS_THAN],
+  ]);
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const dateOperators = computed(() => [
+    operators.value[FILTER_OPS.IS_GREATER_THAN],
+    operators.value[FILTER_OPS.IS_LESS_THAN],
+    operators.value[FILTER_OPS.DAYS_BEFORE],
+  ]);
+
+  /**
+   * Get operator types based on key
+   * @param {string} key - Type of operator to get
+   * @returns {Array<Operator>}
+   */
+  const getOperatorTypes = key => {
+    switch (key) {
+      case 'list':
+        return equalityOperators.value;
+      case 'text':
+        return containmentOperators.value;
+      case 'number':
+        return equalityOperators.value;
+      case 'link':
+        return equalityOperators.value;
+      case 'date':
+        return comparisonOperators.value;
+      case 'checkbox':
+        return equalityOperators.value;
+      default:
+        return equalityOperators.value;
+    }
+  };
+
+  return {
+    operators,
+    equalityOperators,
+    presenceOperators,
+    containmentOperators,
+    comparisonOperators,
+    dateOperators,
+    getOperatorTypes,
+  };
+}
diff --git a/app/javascript/dashboard/components-next/filter/provider.js b/app/javascript/dashboard/components-next/filter/provider.js
new file mode 100644
index 000000000..267732f76
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/provider.js
@@ -0,0 +1,299 @@
+import { computed, h } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useOperators } from './operators';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useChannelIcon } from 'next/icon/provider';
+import countries from 'shared/constants/countries.js';
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
+
+/**
+ * @typedef {Object} FilterOption
+ * @property {string|number} id
+ * @property {string} name
+ * @property {import('vue').VNode} [icon]
+ */
+
+/**
+ * @typedef {Object} FilterOperator
+ * @property {string} value
+ * @property {string} label
+ * @property {string} icon
+ * @property {boolean} hasInput
+ */
+
+/**
+ * @typedef {Object} FilterType
+ * @property {string} attributeKey - The attribute key
+ * @property {string} value - This is a proxy for the attribute key used in FilterSelect
+ * @property {string} attributeName - The attribute name used to display on the UI
+ * @property {string} label - This is a proxy for the attribute name used in FilterSelect
+ * @property {'multiSelect'|'searchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
+ * @property {FilterOption[]} [options] - The options available for the attribute if it is a multiSelect or singleSelect type
+ * @property {'text'|'number'} dataType
+ * @property {FilterOperator[]} filterOperators - The operators available for the attribute
+ * @property {'standard'|'additional'|'customAttributes'} attributeModel
+ */
+
+/**
+ * @typedef {Object} FilterGroup
+ * @property {string} name
+ * @property {FilterType[]} attributes
+ */
+
+/**
+ * Determines the input type for a custom attribute based on its key
+ * @param {string} key - The attribute display type key
+ * @returns {'date'|'plainText'|'searchSelect'|'booleanSelect'} The corresponding input type
+ */
+const customAttributeInputType = key => {
+  switch (key) {
+    case 'date':
+      return 'date';
+    case 'text':
+      return 'plainText';
+    case 'list':
+      return 'searchSelect';
+    case 'checkbox':
+      return 'booleanSelect';
+    default:
+      return 'plainText';
+  }
+};
+
+/**
+ * Composable that provides conversation filtering context
+ * @returns {{ filterTypes: import('vue').ComputedRef<FilterType[]>, filterGroups: import('vue').ComputedRef<FilterGroup[]> }}
+ */
+export function useConversationFilterContext() {
+  const { t } = useI18n();
+
+  const conversationAttributes = useMapGetter(
+    'attributes/getConversationAttributes'
+  );
+
+  const labels = useMapGetter('labels/getLabels');
+  const agents = useMapGetter('agents/getAgents');
+  const inboxes = useMapGetter('inboxes/getInboxes');
+  const teams = useMapGetter('teams/getTeams');
+  const campaigns = useMapGetter('campaigns/getAllCampaigns');
+
+  const {
+    equalityOperators,
+    presenceOperators,
+    containmentOperators,
+    dateOperators,
+    getOperatorTypes,
+  } = useOperators();
+
+  /**
+   * @type {import('vue').ComputedRef<FilterType[]>}
+   */
+  const customFilterTypes = computed(() => {
+    return conversationAttributes.value.map(attr => {
+      return {
+        attributeKey: attr.attributeKey,
+        value: attr.attributeKey,
+        attributeName: attr.attributeDisplayName,
+        label: attr.attributeDisplayName,
+        inputType: customAttributeInputType(attr.attributeDisplayType),
+        filterOperators: getOperatorTypes(attr.attributeDisplayType),
+        options:
+          attr.attributeDisplayType === 'list'
+            ? attr.attributeValues.map(item => ({ id: item, name: item }))
+            : [],
+        attributeModel: 'customAttributes',
+      };
+    });
+  });
+
+  /**
+   * @type {import('vue').ComputedRef<FilterType[]>}
+   */
+  const filterTypes = computed(() => [
+    {
+      attributeKey: 'status',
+      value: 'status',
+      attributeName: t('FILTER.ATTRIBUTES.STATUS'),
+      label: t('FILTER.ATTRIBUTES.STATUS'),
+      inputType: 'multiSelect',
+      options: ['open', 'resolved', 'pending', 'snoozed', 'all'].map(id => {
+        return {
+          id,
+          name: t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${id}.TEXT`),
+        };
+      }),
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'assignee_id',
+      value: 'assignee_id',
+      attributeName: t('FILTER.ATTRIBUTES.ASSIGNEE_NAME'),
+      label: t('FILTER.ATTRIBUTES.ASSIGNEE_NAME'),
+      inputType: 'searchSelect',
+      options: agents.value.map(agent => {
+        return {
+          id: agent.id,
+          name: agent.name,
+        };
+      }),
+      dataType: 'text',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'inbox_id',
+      value: 'inbox_id',
+      attributeName: t('FILTER.ATTRIBUTES.INBOX_NAME'),
+      label: t('FILTER.ATTRIBUTES.INBOX_NAME'),
+      inputType: 'searchSelect',
+      options: inboxes.value.map(inbox => {
+        return {
+          ...inbox,
+          icon: useChannelIcon(inbox).value,
+        };
+      }),
+      dataType: 'text',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'team_id',
+      value: 'team_id',
+      attributeName: t('FILTER.ATTRIBUTES.TEAM_NAME'),
+      label: t('FILTER.ATTRIBUTES.TEAM_NAME'),
+      inputType: 'searchSelect',
+      options: teams.value,
+      dataType: 'number',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'display_id',
+      value: 'display_id',
+      attributeName: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
+      label: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
+      inputType: 'plainText',
+      datatype: 'number',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'campaign_id',
+      value: 'campaign_id',
+      attributeName: t('FILTER.ATTRIBUTES.CAMPAIGN_NAME'),
+      label: t('FILTER.ATTRIBUTES.CAMPAIGN_NAME'),
+      inputType: 'searchSelect',
+      options: campaigns.value.map(campaign => ({
+        id: campaign.id,
+        name: campaign.title,
+      })),
+      datatype: 'number',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'labels',
+      value: 'labels',
+      attributeName: t('FILTER.ATTRIBUTES.LABELS'),
+      label: t('FILTER.ATTRIBUTES.LABELS'),
+      inputType: 'multiSelect',
+      options: labels.value.map(label => {
+        return {
+          id: label.title,
+          name: label.title,
+          icon: h('span', {
+            class: `rounded-full`,
+            style: {
+              backgroundColor: label.color,
+              height: '6px',
+              width: '6px',
+            },
+          }),
+        };
+      }),
+      dataType: 'text',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'browser_language',
+      value: 'browser_language',
+      attributeName: t('FILTER.ATTRIBUTES.BROWSER_LANGUAGE'),
+      label: t('FILTER.ATTRIBUTES.BROWSER_LANGUAGE'),
+      inputType: 'searchSelect',
+      options: languages,
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'additional',
+    },
+    {
+      attributeKey: 'country_code',
+      value: 'country_code',
+      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      inputType: 'searchSelect',
+      options: countries,
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'additional',
+    },
+    {
+      attributeKey: 'referer',
+      value: 'referer',
+      attributeName: t('FILTER.ATTRIBUTES.REFERER_LINK'),
+      label: t('FILTER.ATTRIBUTES.REFERER_LINK'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'additional',
+    },
+    {
+      attributeKey: 'created_at',
+      value: 'created_at',
+      attributeName: t('FILTER.ATTRIBUTES.CREATED_AT'),
+      label: t('FILTER.ATTRIBUTES.CREATED_AT'),
+      inputType: 'date',
+      dataType: 'text',
+      filterOperators: dateOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'last_activity_at',
+      value: 'last_activity_at',
+      attributeName: t('FILTER.ATTRIBUTES.LAST_ACTIVITY'),
+      label: t('FILTER.ATTRIBUTES.LAST_ACTIVITY'),
+      inputType: 'date',
+      dataType: 'text',
+      filterOperators: dateOperators.value,
+      attributeModel: 'standard',
+    },
+    ...customFilterTypes.value,
+  ]);
+
+  const filterGroups = computed(() => {
+    return [
+      {
+        name: t(`FILTER.GROUPS.STANDARD_FILTERS`),
+        attributes: filterTypes.value.filter(
+          filter => filter.attributeModel === 'standard'
+        ),
+      },
+      {
+        name: t(`FILTER.GROUPS.ADDITIONAL_FILTERS`),
+        attributes: filterTypes.value.filter(
+          filter => filter.attributeModel === 'additional'
+        ),
+      },
+      {
+        name: t(`FILTER.GROUPS.CUSTOM_ATTRIBUTES`),
+        attributes: filterTypes.value.filter(
+          filter => filter.attributeModel === 'customAttributes'
+        ),
+      },
+    ];
+  });
+
+  return { filterTypes, filterGroups };
+}
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index c4c81cbfb..0108e02df 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -22,10 +22,10 @@ import {
 // https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import ChatListHeader from './ChatListHeader.vue';
-import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
+import ConversationFilter from 'next/filter/ConversationFilter.vue';
+import SaveCustomView from 'next/filter/SaveCustomView.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
-import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import IntersectionObserver from './IntersectionObserver.vue';
@@ -37,9 +37,15 @@ import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions';
 import { useFilter } from 'shared/composables/useFilter';
 import { useTrack } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import {
+  useCamelCase,
+  useSnakeCase,
+} from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
 import { useEventListener } from '@vueuse/core';
 
+import { emitter } from 'shared/helpers/mitt';
+
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterOptions from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
@@ -51,12 +57,11 @@ import {
   isOnMentionsView,
   isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
-import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
-import { emitter } from 'shared/helpers/mitt';
 import {
   getUserPermissions,
   filterItemsByPermission,
 } from 'dashboard/helper/permissionsHelper.js';
+import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
 import { ASSIGNEE_TYPE_TAB_PERMISSIONS } from 'dashboard/constants/permissions.js';
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
@@ -107,7 +112,7 @@ const unAssignedChatsList = useMapGetter('getUnAssignedChats');
 const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
-const appliedFilters = useMapGetter('getAppliedConversationFilters');
+const appliedFilters = useMapGetter('getAppliedConversationFiltersV2');
 const folders = useMapGetter('customViews/getConversationCustomViews');
 const agentList = useMapGetter('agents/getAgents');
 const teamsList = useMapGetter('teams/getTeams');
@@ -371,6 +376,7 @@ function emitConversationLoaded() {
 }
 
 function fetchFilteredConversations(payload) {
+  payload = useSnakeCase(payload);
   let page = currentFiltersPage.value + 1;
   store
     .dispatch('fetchFilteredConversations', {
@@ -383,6 +389,7 @@ function fetchFilteredConversations(payload) {
 }
 
 function fetchSavedFilteredConversations(payload) {
+  payload = useSnakeCase(payload);
   let page = currentFiltersPage.value + 1;
   store
     .dispatch('fetchFilteredConversations', {
@@ -393,6 +400,7 @@ function fetchSavedFilteredConversations(payload) {
 }
 
 function onApplyFilter(payload) {
+  payload = useSnakeCase(payload);
   resetBulkActions();
   foldersQuery.value = filterQueryGenerator(payload);
   store.dispatch('conversationPage/reset');
@@ -406,10 +414,11 @@ function closeAdvanceFiltersModal() {
 }
 
 function onUpdateSavedFilter(payload, folderName) {
+  const transformedPayload = useSnakeCase(payload);
   const payloadData = {
     ...unref(activeFolder),
     name: unref(folderName),
-    query: filterQueryGenerator(payload),
+    query: filterQueryGenerator(transformedPayload),
   };
   store.dispatch('customViews/update', payloadData);
   closeAdvanceFiltersModal();
@@ -461,17 +470,19 @@ function initializeExistingFilterToModal() {
     currentUserDetails.value,
     activeAssigneeTab.value
   );
+  // TODO: Remove the usage of useCamelCase after migrating useFilter to camelcase
   if (statusFilter) {
-    appliedFilter.value = [...appliedFilter.value, statusFilter];
+    appliedFilter.value = [...appliedFilter.value, useCamelCase(statusFilter)];
   }
 
+  // TODO: Remove the usage of useCamelCase after migrating useFilter to camelcase
   const otherFilters = initializeInboxTeamAndLabelFilterToModal(
     props.conversationInbox,
     inbox.value,
     props.teamId,
     activeTeam.value,
     props.label
-  );
+  ).map(useCamelCase);
 
   appliedFilter.value = [...appliedFilter.value, ...otherFilters];
 }
@@ -486,27 +497,47 @@ function initializeFolderToFilterModal(newActiveFolder) {
   const query = unref(newActiveFolder)?.query?.payload;
   if (!Array.isArray(query)) return;
 
-  const newFilters = query.map(filter => ({
-    attribute_key: filter.attribute_key,
-    attribute_model: filter.attribute_model,
-    filter_operator: filter.filter_operator,
-    values: Array.isArray(filter.values)
-      ? generateValuesForEditCustomViews(filter, setParamsForEditFolderModal())
-      : [],
-    query_operator: filter.query_operator,
-    custom_attribute_type: filter.custom_attribute_type,
-  }));
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    const values = Array.isArray(transformed.values)
+      ? generateValuesForEditCustomViews(
+          useSnakeCase(filter),
+          setParamsForEditFolderModal()
+        )
+      : [];
+
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values,
+    };
+  });
 
   appliedFilter.value = [...appliedFilter.value, ...newFilters];
 }
 
+function initalizeAppliedFiltersToModal() {
+  appliedFilter.value = [...appliedFilters.value];
+}
+
 function onToggleAdvanceFiltersModal() {
+  if (showAdvancedFilters.value === true) {
+    closeAdvanceFiltersModal();
+    return;
+  }
+
   if (!hasAppliedFilters.value && !hasActiveFolders.value) {
     initializeExistingFilterToModal();
   }
   if (hasActiveFolders.value) {
     initializeFolderToFilterModal(activeFolder.value);
   }
+  if (hasAppliedFilters.value) {
+    initalizeAppliedFiltersToModal();
+  }
 
   showAdvancedFilters.value = true;
 }
@@ -751,7 +782,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
@@ -770,12 +801,14 @@ watch(conversationFilters, (newVal, oldVal) => {
       @basic-filter-change="onBasicFilterChange"
     />
 
-    <AddCustomViews
-      v-if="showAddFoldersModal"
-      :custom-views-query="foldersQuery"
-      :open-last-saved-item="openLastSavedItemInFolder"
-      @close="onCloseAddFoldersModal"
-    />
+    <Teleport v-if="showAddFoldersModal" to="#saveFilterTeleportTarget">
+      <SaveCustomView
+        v-model="appliedFilter"
+        :custom-views-query="foldersQuery"
+        :open-last-saved-item="openLastSavedItemInFolder"
+        @close="onCloseAddFoldersModal"
+      />
+    </Teleport>
 
     <DeleteCustomViews
       v-if="showDeleteFoldersModal"
@@ -871,22 +904,16 @@ watch(conversationFilters, (newVal, oldVal) => {
         </template>
       </DynamicScroller>
     </div>
-    <woot-modal
-      v-model:show="showAdvancedFilters"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <ConversationAdvancedFilter
-        v-if="showAdvancedFilters"
-        :initial-filter-types="advancedFilterTypes"
-        :initial-applied-filters="appliedFilter"
-        :active-folder-name="activeFolderName"
-        :on-close="closeAdvanceFiltersModal"
+    <Teleport v-if="showAdvancedFilters" to="#conversationFilterTeleportTarget">
+      <ConversationFilter
+        v-model="appliedFilter"
+        :folder-name="activeFolderName"
         :is-folder-view="hasActiveFolders"
         @apply-filter="onApplyFilter"
         @update-folder="onUpdateSavedFilter"
+        @close="closeAdvanceFiltersModal"
       />
-    </woot-modal>
+    </Teleport>
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index 86157515e..175b69ef1 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -62,14 +62,18 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
     </div>
     <div class="flex items-center gap-1">
       <template v-if="hasAppliedFilters && !hasActiveFolders">
-        <woot-button
-          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="save"
-          @click="emit('addFolders')"
-        />
+        <div class="relative">
+          <woot-button
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
+            size="tiny"
+            variant="smooth"
+            color-scheme="secondary"
+            icon="save"
+            @click="emit('addFolders')"
+          />
+          <div id="saveFilterTeleportTarget" class="absolute mt-2 z-40" />
+        </div>
+
         <woot-button
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
           size="tiny"
@@ -80,14 +84,21 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         />
       </template>
       <template v-if="hasActiveFolders">
-        <woot-button
-          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="edit"
-          @click="emit('filtersModal')"
-        />
+        <div class="relative">
+          <woot-button
+            id="toggleConversationFilterButton"
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
+            size="tiny"
+            variant="smooth"
+            color-scheme="secondary"
+            icon="edit"
+            @click="emit('filtersModal')"
+          />
+          <div
+            id="conversationFilterTeleportTarget"
+            class="absolute mt-2 z-40"
+          />
+        </div>
         <woot-button
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
           size="tiny"
@@ -97,15 +108,18 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           @click="emit('deleteFolders')"
         />
       </template>
-      <woot-button
-        v-else
-        v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
-        variant="smooth"
-        color-scheme="secondary"
-        icon="filter"
-        size="tiny"
-        @click="emit('filtersModal')"
-      />
+      <div v-else class="relative">
+        <woot-button
+          id="toggleConversationFilterButton"
+          v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="filter"
+          size="tiny"
+          @click="emit('filtersModal')"
+        />
+        <div id="conversationFilterTeleportTarget" class="absolute mt-2 z-40" />
+      </div>
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
         @change-filter="onBasicFilterChange"
diff --git a/app/javascript/dashboard/composables/useTransformKeys.js b/app/javascript/dashboard/composables/useTransformKeys.js
new file mode 100644
index 000000000..e1feaf1a7
--- /dev/null
+++ b/app/javascript/dashboard/composables/useTransformKeys.js
@@ -0,0 +1,25 @@
+// NOTE: In the future if performance becomes an issue, we can memoize the functions
+
+import { unref } from 'vue';
+import camelcaseKeys from 'camelcase-keys';
+import snakecaseKeys from 'snakecase-keys';
+
+/**
+ * Vue composable that converts object keys to camelCase
+ * @param {Object|Array|import('vue').Ref<Object|Array>} payload - Object or array to convert
+ * @returns {Object|Array} Converted payload with camelCase keys
+ */
+export function useCamelCase(payload) {
+  const unrefPayload = unref(payload);
+  return camelcaseKeys(unrefPayload);
+}
+
+/**
+ * Vue composable that converts object keys to snake_case
+ * @param {Object|Array|import('vue').Ref<Object|Array>} payload - Object or array to convert
+ * @returns {Object|Array} Converted payload with snake_case keys
+ */
+export function useSnakeCase(payload) {
+  const unrefPayload = unref(payload);
+  return snakecaseKeys(unrefPayload);
+}
diff --git a/app/javascript/dashboard/helper/validations.js b/app/javascript/dashboard/helper/validations.js
index 155108c61..4347f55aa 100644
--- a/app/javascript/dashboard/helper/validations.js
+++ b/app/javascript/dashboard/helper/validations.js
@@ -6,6 +6,24 @@ export const VALUE_MUST_BE_BETWEEN_1_AND_998 =
 export const ACTION_PARAMETERS_REQUIRED = 'ACTION_PARAMETERS_REQUIRED';
 export const ATLEAST_ONE_CONDITION_REQUIRED = 'ATLEAST_ONE_CONDITION_REQUIRED';
 export const ATLEAST_ONE_ACTION_REQUIRED = 'ATLEAST_ONE_ACTION_REQUIRED';
+
+const isEmptyValue = value => {
+  if (!value) {
+    return true;
+  }
+
+  if (Array.isArray(value)) {
+    return !value.length;
+  }
+
+  // We can safely check the type here as both the null value
+  // and the array is ruled out earlier.
+  if (typeof value === 'object') {
+    return !Object.keys(value).length;
+  }
+
+  return false;
+};
 // ------------------------------------------------------------------
 // ------------------------ Filter Validation -----------------------
 // ------------------------------------------------------------------
@@ -29,12 +47,11 @@ export const validateSingleFilter = filter => {
     return FILTER_OPERATOR_REQUIRED;
   }
 
-  if (
-    filter.filter_operator !== 'is_present' &&
-    filter.filter_operator !== 'is_not_present' &&
-    (!filter.values ||
-      (Array.isArray(filter.values) && filter.values.length === 0))
-  ) {
+  const operatorRequiresValue = !['is_present', 'is_not_present'].includes(
+    filter.filter_operator
+  );
+
+  if (operatorRequiresValue && isEmptyValue(filter.values)) {
     return VALUE_REQUIRED;
   }
 
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
index a382aec2e..a991cb25b 100644
--- a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@@ -22,14 +22,23 @@
     "OPERATOR_LABELS": {
       "equal_to": "Equal to",
       "not_equal_to": "Not equal to",
-      "contains": "Contains",
       "does_not_contain": "Does not contain",
       "is_present": "Is present",
       "is_not_present": "Is not present",
       "is_greater_than": "Is greater than",
       "is_less_than": "Is lesser than",
       "days_before": "Is x days before",
-      "starts_with": "Starts with"
+      "starts_with": "Starts with",
+      "equalTo": "Equal to",
+      "notEqualTo": "Not equal to",
+      "contains": "Contains",
+      "doesNotContain": "Does not contain",
+      "isPresent": "Is present",
+      "isNotPresent": "Is not present",
+      "isGreaterThan": "Is greater than",
+      "isLessThan": "Is lesser than",
+      "daysBefore": "Is x days before",
+      "startsWith": "Starts with"
     },
     "ATTRIBUTE_LABELS": {
       "TRUE": "True",
@@ -56,7 +65,10 @@
       "LAST_ACTIVITY": "Last activity"
     },
     "ERRORS": {
-      "VALUE_REQUIRED": "Value is required"
+      "VALUE_REQUIRED": "Value is required",
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998"
     },
     "GROUPS": {
       "STANDARD_FILTERS": "Standard filters",
diff --git a/app/javascript/dashboard/store/modules/attributes.js b/app/javascript/dashboard/store/modules/attributes.js
index af6d3ce4f..c7cb771a5 100644
--- a/app/javascript/dashboard/store/modules/attributes.js
+++ b/app/javascript/dashboard/store/modules/attributes.js
@@ -1,6 +1,7 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import AttributeAPI from '../../api/attributes';
+import camelcaseKeys from 'camelcase-keys';
 
 export const state = {
   records: [],
@@ -19,6 +20,16 @@ export const getters = {
   getAttributes: _state => {
     return _state.records;
   },
+  getConversationAttributes: _state => {
+    return _state.records
+      .filter(record => record.attribute_model === 'conversation_attribute')
+      .map(camelcaseKeys);
+  },
+  getContactAttributes: _state => {
+    return _state.records
+      .filter(record => record.attribute_model === 'contact_attribute')
+      .map(camelcaseKeys);
+  },
   getAttributesByModel: _state => attributeModel => {
     return _state.records.filter(
       record => record.attribute_model === attributeModel
diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js
index 1a905c3c5..085766bfd 100644
--- a/app/javascript/dashboard/store/modules/conversations/getters.js
+++ b/app/javascript/dashboard/store/modules/conversations/getters.js
@@ -1,6 +1,7 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { applyPageFilters, sortComparator } from './helpers';
 import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+import camelcaseKeys from 'camelcase-keys';
 
 export const getSelectedChatConversation = ({
   allConversations,
@@ -54,6 +55,10 @@ const getters = {
       return isChatMine;
     });
   },
+  getAppliedConversationFiltersV2: _state => {
+    // TODO: Replace existing one with V2 after migrating the filters to use camelcase
+    return _state.appliedFilters.map(camelcaseKeys);
+  },
   getAppliedConversationFilters: _state => {
     return _state.appliedFilters;
   },
diff --git a/package.json b/package.json
index a2dac35df..a6258c842 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "mitt": "^3.0.1",
     "opus-recorder": "^8.0.5",
     "semver": "7.6.3",
+    "snakecase-keys": "^8.0.1",
     "timezone-phone-codes": "^0.0.2",
     "tinykeys": "^3.0.0",
     "turbolinks": "^5.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0ba6b2391..ebb88a272 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,6 +154,9 @@ importers:
       semver:
         specifier: 7.6.3
         version: 7.6.3
+      snakecase-keys:
+        specifier: ^8.0.1
+        version: 8.0.1
       timezone-phone-codes:
         specifier: ^0.0.2
         version: 0.0.2
@@ -3485,6 +3488,10 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  map-obj@4.3.0:
+    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
+    engines: {node: '>=8'}
+
   map-obj@5.0.0:
     resolution: {integrity: sha512-2L3MIgJynYrZ3TYMriLDLWocz15okFakV6J12HXvMXDHui2x/zgChzg1u9mFFGbbGWE+GsLpQByt4POb9Or+uA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -4420,6 +4427,10 @@ packages:
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
+  snakecase-keys@8.0.1:
+    resolution: {integrity: sha512-Sj51kE1zC7zh6TDlNNz0/Jn1n5HiHdoQErxO8jLtnyrkJW/M5PrI7x05uDgY3BO7OUQYKCvmeMurW6BPUdwEOw==}
+    engines: {node: '>=18'}
+
   sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
@@ -5847,7 +5858,7 @@ snapshots:
   '@material/mwc-icon@0.25.3':
     dependencies:
       lit: 2.2.6
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
@@ -5932,7 +5943,7 @@ snapshots:
     dependencies:
       '@lukeed/uuid': 2.0.0
       dset: 3.1.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   '@segment/analytics.js-video-plugins@0.2.1':
     dependencies:
@@ -7041,7 +7052,7 @@ snapshots:
 
   aria-hidden@1.2.4:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   array-buffer-byte-length@1.0.0:
     dependencies:
@@ -7209,7 +7220,7 @@ snapshots:
   camel-case@4.1.2:
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   camelcase-css@2.0.1: {}
 
@@ -7227,7 +7238,7 @@ snapshots:
   capital-case@1.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
       upper-case-first: 2.0.2
 
   chai@5.1.1:
@@ -7384,7 +7395,7 @@ snapshots:
   constant-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
       upper-case: 2.0.2
 
   core-js@3.38.1: {}
@@ -7578,7 +7589,7 @@ snapshots:
   dot-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   dset@3.1.4: {}
 
@@ -8249,7 +8260,7 @@ snapshots:
   header-case@2.0.4:
     dependencies:
       capital-case: 1.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   highlight.js@11.10.0: {}
 
@@ -8776,7 +8787,7 @@ snapshots:
 
   lower-case@2.0.2:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   lru-cache@10.4.3: {}
 
@@ -8814,6 +8825,8 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
+  map-obj@4.3.0: {}
+
   map-obj@5.0.0: {}
 
   markdown-it-anchor@8.6.7(@types/markdown-it@12.2.3)(markdown-it@12.3.2):
@@ -8970,7 +8983,7 @@ snapshots:
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   node-fetch@2.6.11:
     dependencies:
@@ -9117,7 +9130,7 @@ snapshots:
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   parent-module@1.0.1:
     dependencies:
@@ -9132,12 +9145,12 @@ snapshots:
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   path-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   path-exists@4.0.0: {}
 
@@ -9748,7 +9761,7 @@ snapshots:
   sentence-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
       upper-case-first: 2.0.2
 
   set-function-length@1.2.2:
@@ -9823,7 +9836,13 @@ snapshots:
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
+
+  snakecase-keys@8.0.1:
+    dependencies:
+      map-obj: 4.3.0
+      snake-case: 3.0.4
+      type-fest: 4.26.1
 
   sortablejs@1.14.0: {}
 
@@ -10196,11 +10215,11 @@ snapshots:
 
   upper-case-first@2.0.2:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   upper-case@2.0.2:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   uri-js@4.4.1:
     dependencies:

From a50e4f17480edc47ce6296267164b83b12b7499f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 28 Nov 2024 09:37:20 +0530
Subject: [PATCH 29/74] feat(v4): Update the design for the contacts list page
 (#10501)

---------
Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../Contacts/ContactsCard/ContactsCard.vue    | 128 ++++++--
 .../ContactsForm/ContactExportDialog.vue      |  66 ++++
 .../ContactsForm/ContactImportDialog.vue      | 134 ++++++++
 .../Contacts/ContactsForm/ContactsForm.vue    |  23 +-
 .../ContactsForm/CreateNewContactDialog.vue   |  63 ++++
 .../ContactsForm/CreateSegmentDialog.vue      |  71 +++++
 .../ContactsForm/DeleteSegmentDialog.vue      |  43 +++
 .../Contacts/ContactsHeader/ContactHeader.vue |  53 +++-
 .../ContactListHeaderWrapper.vue              | 276 ++++++++++++++++
 .../Contacts/ContactsListLayout.vue           | 112 +++++++
 .../Contacts/EmptyState/ContactEmptyState.vue |  15 +
 .../Contacts/Pages/ContactsList.vue           |  78 +++++
 .../components-next/avatar/Avatar.vue         |   2 +-
 .../pagination/PaginationFooter.vue           |  19 +-
 .../components-next/sidebar/Sidebar.vue       |  52 +--
 .../components-next/sidebar/SidebarGroup.vue  |  33 +-
 .../layout/config/sidebarItems/contacts.js    |   2 +-
 .../composables/spec/useAccount.spec.js       |   3 +-
 .../dashboard/composables/useAccount.js       |   3 +-
 .../dashboard/i18n/locale/en/contact.json     |  40 ++-
 .../components/ContactsAdvancedFilters.vue    |   4 +-
 .../contacts/pages/ContactManageView.vue      |   3 +
 .../contacts/pages/ContactsIndex.vue          | 298 ++++++++++++++++++
 .../routes/dashboard/contacts/routes.js       |  36 +--
 .../store/modules/contacts/actions.js         |  26 +-
 .../store/modules/contacts/getters.js         |   8 +
 .../dashboard/store/modules/contacts/index.js |   2 +
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |  36 ++-
 29 files changed, 1517 insertions(+), 115 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
index 4ba3546ce..9875ae2ac 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -1,10 +1,12 @@
 <script setup>
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 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 countries from 'shared/constants/countries';
 
 const props = defineProps({
   id: { type: Number, required: true },
@@ -14,46 +16,108 @@ const props = defineProps({
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
   isExpanded: { type: Boolean, default: false },
+  isUpdating: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
 
 const { t } = useI18n();
 
+const contactsFormRef = ref(null);
+
+const getInitialContactData = () => ({
+  id: props.id,
+  name: props.name,
+  email: props.email,
+  phoneNumber: props.phoneNumber,
+  additionalAttributes: props.additionalAttributes,
+});
+
+const contactData = ref(getInitialContactData());
+
+const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
+
+const countriesMap = computed(() => {
+  return countries.reduce((acc, country) => {
+    acc[country.code] = country;
+    acc[country.id] = country;
+    return acc;
+  }, {});
+});
+
+const countryDetails = computed(() => {
+  const attributes = props.additionalAttributes || {};
+  const { country, countryCode, city } = attributes;
+
+  if (!country && !countryCode) return null;
+
+  const activeCountry =
+    countriesMap.value[country] || countriesMap.value[countryCode];
+
+  if (!activeCountry) return null;
+
+  const parts = [
+    activeCountry.emoji,
+    city ? `${city},` : null,
+    activeCountry.name,
+  ].filter(Boolean);
+
+  return parts.length ? parts.join(' ') : null;
+});
+
 const handleFormUpdate = updatedData => {
-  emit('updateContact', { id: props.id, updatedData });
+  Object.assign(contactData.value, updatedData);
 };
 
-const onClickViewDetails = async () => {
-  emit('showContact', props.id);
+const handleUpdateContact = () => {
+  emit('updateContact', contactData.value);
 };
+
+const onClickExpand = () => {
+  emit('toggle');
+  contactData.value = getInitialContactData();
+};
+
+const onClickViewDetails = () => emit('showContact', props.id);
 </script>
 
 <template>
   <CardLayout :key="id" layout="row">
-    <div class="flex items-center justify-between gap-4">
+    <div class="flex items-center justify-start flex-1 gap-4">
       <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
-      <div class="flex flex-col gap-1">
-        <div class="flex items-center gap-2">
-          <span class="text-sm font-medium truncate text-n-slate-12">
+      <div class="flex flex-col gap-0.5 flex-1">
+        <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span class="text-base font-medium truncate text-n-slate-12">
             {{ name }}
           </span>
-          <template v-if="additionalAttributes?.companyName">
-            <span class="text-sm text-n-slate-11">
-              {{ t('CONTACTS_LAYOUT.CARD.OF') }}
-            </span>
-            <span class="text-sm font-medium truncate text-n-slate-12">
+          <span class="inline-flex items-center gap-1">
+            <span
+              v-if="additionalAttributes?.companyName"
+              class="i-ph-building-light size-4 text-n-slate-10 mb-0.5"
+            />
+            <span
+              v-if="additionalAttributes?.companyName"
+              class="text-sm truncate text-n-slate-11"
+            >
               {{ additionalAttributes.companyName }}
             </span>
-          </template>
+          </span>
         </div>
-        <div class="flex items-center gap-3">
-          <span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
-          <div v-if="email" class="w-px h-3 bg-n-slate-6" />
-          <span v-if="phoneNumber" class="text-sm text-n-slate-11">
+        <div class="flex flex-wrap items-center justify-start gap-x-3 gap-y-1">
+          <div v-if="email" class="truncate max-w-72" :title="email">
+            <span class="text-sm text-n-slate-11">
+              {{ email }}
+            </span>
+          </div>
+          <div v-if="email" class="w-px h-3 truncate bg-n-slate-6" />
+          <span v-if="phoneNumber" class="text-sm truncate text-n-slate-11">
             {{ phoneNumber }}
           </span>
-          <div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
+          <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
+          <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
             :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
             variant="link"
@@ -70,7 +134,7 @@ const onClickViewDetails = async () => {
       color="slate"
       size="xs"
       :class="{ 'rotate-180': isExpanded }"
-      @click="emit('toggle')"
+      @click="onClickExpand"
     />
 
     <template #after>
@@ -78,22 +142,28 @@ const onClickViewDetails = async () => {
         enter-active-class="overflow-hidden transition-all duration-300 ease-out"
         leave-active-class="overflow-hidden transition-all duration-300 ease-in"
         enter-from-class="overflow-hidden opacity-0 max-h-0"
-        enter-to-class="opacity-100 max-h-[360px]"
-        leave-from-class="opacity-100 max-h-[360px]"
+        enter-to-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
+        leave-from-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
         leave-to-class="overflow-hidden opacity-0 max-h-0"
       >
         <div v-show="isExpanded" class="w-full">
-          <div class="p-6 border-t border-n-strong">
+          <div class="flex flex-col gap-6 p-6 border-t border-n-strong">
             <ContactsForm
-              :contact-data="{
-                id,
-                name,
-                email,
-                phoneNumber,
-                additionalAttributes,
-              }"
+              ref="contactsFormRef"
+              :contact-data="contactData"
               @update="handleFormUpdate"
             />
+            <div>
+              <Button
+                :label="
+                  t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')
+                "
+                size="sm"
+                :is-loading="isUpdating"
+                :disabled="isUpdating || isFormInvalid"
+                @click="handleUpdateContact"
+              />
+            </div>
           </div>
         </div>
       </transition>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue
new file mode 100644
index 000000000..d2b57cbb8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const emit = defineEmits(['export']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const dialogRef = ref(null);
+
+const segments = useMapGetter('customViews/getContactCustomViews');
+const appliedFilters = useMapGetter('contacts/getAppliedContactFilters');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isExportingContact = computed(() => uiFlags.value.isExporting);
+
+const activeSegmentId = computed(() => route.params.segmentId);
+const activeSegment = computed(() =>
+  activeSegmentId.value
+    ? segments.value.find(view => view.id === Number(activeSegmentId.value))
+    : undefined
+);
+
+const exportContacts = async () => {
+  let query = { payload: [] };
+
+  if (activeSegmentId.value && activeSegment.value) {
+    query = activeSegment.value.query;
+  } else if (Object.keys(appliedFilters.value).length > 0) {
+    query = filterQueryGenerator(appliedFilters.value);
+  }
+
+  emit('export', {
+    ...query,
+    label: route.params.label || '',
+  });
+};
+
+const handleDialogConfirm = async () => {
+  await exportContacts();
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.TITLE')"
+    :description="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.DESCRIPTION')
+    "
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.CONFIRM')
+    "
+    :is-loading="isExportingContact"
+    :disable-confirm-button="isExportingContact"
+    @confirm="handleDialogConfirm"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue
new file mode 100644
index 000000000..acb8f0f1c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const emit = defineEmits(['import']);
+const { t } = useI18n();
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isImportingContact = computed(() => uiFlags.value.isImporting);
+
+const dialogRef = ref(null);
+const fileInput = ref(null);
+
+const hasSelectedFile = ref(null);
+const selectedFileName = ref('');
+
+const csvUrl = '/downloads/import-contacts-sample.csv';
+
+const handleFileClick = () => fileInput.value?.click();
+
+const processFileName = fileName => {
+  const lastDotIndex = fileName.lastIndexOf('.');
+  const extension = fileName.slice(lastDotIndex);
+  const baseName = fileName.slice(0, lastDotIndex);
+
+  return baseName.length > 20
+    ? `${baseName.slice(0, 20)}...${extension}`
+    : fileName;
+};
+
+const handleFileChange = () => {
+  const file = fileInput.value?.files[0];
+  hasSelectedFile.value = file;
+  selectedFileName.value = file ? processFileName(file.name) : '';
+};
+
+const handleRemoveFile = () => {
+  hasSelectedFile.value = null;
+  if (fileInput.value) {
+    fileInput.value.value = null;
+  }
+  selectedFileName.value = '';
+};
+
+const uploadFile = async () => {
+  if (!hasSelectedFile.value) return;
+  emit('import', hasSelectedFile.value);
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.TITLE')"
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.IMPORT')
+    "
+    :is-loading="isImportingContact"
+    :disable-confirm-button="isImportingContact"
+    @confirm="uploadFile"
+  >
+    <template #description>
+      <p class="mb-0 text-sm text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DESCRIPTION') }}
+        <a
+          :href="csvUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          download="import-contacts-sample.csv"
+          class="text-n-blue-text"
+        >
+          {{
+            t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DOWNLOAD_LABEL')
+          }}
+        </a>
+      </p>
+    </template>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <label class="text-sm text-n-slate-12 whitespace-nowrap">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.LABEL') }}
+        </label>
+        <div class="flex items-center justify-between w-full gap-2">
+          <span v-if="hasSelectedFile" class="text-sm text-n-slate-12">
+            {{ selectedFileName }}
+          </span>
+          <Button
+            v-if="!hasSelectedFile"
+            :label="
+              t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHOOSE_FILE')
+            "
+            icon="i-lucide-upload"
+            color="slate"
+            variant="ghost"
+            size="sm"
+            class="!w-fit"
+            @click="handleFileClick"
+          />
+          <div v-else class="flex items-center gap-1">
+            <Button
+              :label="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHANGE')"
+              color="slate"
+              variant="ghost"
+              size="sm"
+              @click="handleFileClick"
+            />
+            <div class="w-px h-3 bg-n-strong" />
+            <Button
+              icon="i-lucide-trash"
+              color="slate"
+              variant="ghost"
+              size="sm"
+              @click="handleRemoveFile"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <input
+      ref="fileInput"
+      type="file"
+      accept="text/csv"
+      class="hidden"
+      @change="handleFileChange"
+    />
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 866811ae2..1813f1057 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -3,7 +3,7 @@ import { computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { required, email, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
-
+import { splitName } from '@chatwoot/utils';
 import countries from 'shared/constants/countries.js';
 import Input from 'dashboard/components-next/input/Input.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
@@ -80,6 +80,8 @@ const validationRules = {
 
 const v$ = useVuelidate(validationRules, state);
 
+const isFormInvalid = computed(() => v$.value.$invalid);
+
 const prepareStateBasedOnProps = () => {
   if (props.isNewContact) {
     return; // Added to prevent state update for new contact form
@@ -92,8 +94,7 @@ const prepareStateBasedOnProps = () => {
     phoneNumber,
     additionalAttributes = {},
   } = props.contactData || {};
-
-  const [firstName = '', lastName = ''] = name.split(' ');
+  const { firstName, lastName } = splitName(name);
   const {
     description,
     companyName,
@@ -203,6 +204,16 @@ const getMessageType = key => {
     : 'info';
 };
 
+const handleCountrySelection = value => {
+  const selectedCountry = countries.find(option => option.name === value);
+  state.additionalAttributes.countryCode = selectedCountry?.id || '';
+  emit('update', state);
+};
+
+const resetValidation = () => {
+  v$.value.$reset();
+};
+
 watch(() => props.contactData, prepareStateBasedOnProps, {
   immediate: true,
   deep: true,
@@ -211,6 +222,8 @@ watch(() => props.contactData, prepareStateBasedOnProps, {
 // Expose state to parent component for avatar upload
 defineExpose({
   state,
+  resetValidation,
+  isFormInvalid,
 });
 </script>
 
@@ -220,7 +233,7 @@ defineExpose({
       <span class="py-1 text-sm font-medium text-n-slate-12">
         {{ t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.TITLE') }}
       </span>
-      <div class="grid w-full grid-cols-2 gap-4">
+      <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <template v-for="item in editDetailsForm" :key="item.key">
           <ComboBox
             v-if="item.key === 'COUNTRY'"
@@ -234,7 +247,7 @@ defineExpose({
               '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
                 isDetailsView,
             }"
-            @update:model-value="emit('update', state)"
+            @update:model-value="handleCountrySelection"
           />
           <PhoneNumberInput
             v-else-if="item.key === 'PHONE_NUMBER'"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
new file mode 100644
index 000000000..1a9f183e8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+const contactsFormRef = ref(null);
+const contact = ref(null);
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isCreatingContact = computed(() => uiFlags.value.isCreating);
+
+const createNewContact = contactItem => {
+  contact.value = contactItem;
+};
+
+const handleDialogConfirm = async () => {
+  if (!contact.value) return;
+  emit('create', contact.value);
+};
+
+const closeDialog = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef, contactsFormRef });
+</script>
+
+<template>
+  <Dialog ref="dialogRef" width="3xl" @confirm="handleDialogConfirm">
+    <ContactsForm
+      ref="contactsFormRef"
+      is-new-contact
+      @update="createNewContact"
+    />
+    <template #footer>
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          :label="t('DIALOG.BUTTONS.CANCEL')"
+          variant="link"
+          class="h-10 hover:!no-underline hover:text-n-brand"
+          @click="closeDialog"
+        />
+        <Button
+          :label="
+            t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SAVE_CONTACT')
+          "
+          color="blue"
+          :is-loading="isCreatingContact"
+          @click="handleDialogConfirm"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue
new file mode 100644
index 000000000..a246c742c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const emit = defineEmits(['create']);
+
+const FILTER_TYPE_CONTACT = 1;
+
+const { t } = useI18n();
+
+const uiFlags = useMapGetter('customViews/getUIFlags');
+const isCreating = computed(() => uiFlags.value.isCreating);
+
+const dialogRef = ref(null);
+
+const state = reactive({
+  name: '',
+});
+
+const validationRules = {
+  name: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const handleDialogConfirm = async () => {
+  const isNameValid = await v$.value.$validate();
+  if (!isNameValid) return;
+  emit('create', {
+    name: state.name,
+    filter_type: FILTER_TYPE_CONTACT,
+  });
+  state.name = '';
+  v$.value.$reset();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.TITLE')"
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.CONFIRM')
+    "
+    :is-loading="isCreating"
+    :disable-confirm-button="isCreating"
+    @confirm="handleDialogConfirm"
+  >
+    <Input
+      v-model="state.name"
+      :label="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.LABEL')"
+      :placeholder="
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.PLACEHOLDER')
+      "
+      :message="
+        v$.name.$error
+          ? t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.ERROR')
+          : ''
+      "
+      :message-type="v$.name.$error ? 'error' : 'info'"
+    />
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue
new file mode 100644
index 000000000..60aa0e55e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const emit = defineEmits(['delete']);
+
+const FILTER_TYPE_CONTACT = 'contact';
+
+const { t } = useI18n();
+
+const uiFlags = useMapGetter('customViews/getUIFlags');
+const isDeleting = computed(() => uiFlags.value.isDeleting);
+
+const dialogRef = ref(null);
+
+const handleDialogConfirm = async () => {
+  emit('delete', {
+    filterType: FILTER_TYPE_CONTACT,
+  });
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.TITLE')"
+    :description="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.DESCRIPTION')
+    "
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.CONFIRM')
+    "
+    :is-loading="isDeleting"
+    :disable-confirm-button="isDeleting"
+    @confirm="handleDialogConfirm"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 947310a56..802605ec9 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -18,10 +18,10 @@ defineProps({
     type: String,
     required: true,
   },
-  buttonLabel: {
-    type: String,
-    required: true,
-  },
+  //   buttonLabel: {
+  //     type: String,
+  //     default: '',
+  //   },
   activeSort: {
     type: String,
     default: 'last_activity_at',
@@ -30,16 +30,26 @@ defineProps({
     type: String,
     default: '',
   },
+  isSegmentsView: {
+    type: Boolean,
+    default: false,
+  },
+  hasActiveFilters: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
   'search',
   'filter',
   'update:sort',
-  'message',
+  //   'message',
   'add',
   'import',
   'export',
+  'createSegment',
+  'deleteSegment',
 ]);
 </script>
 
@@ -72,11 +82,37 @@ const emit = defineEmits([
         </div>
         <div class="flex items-center gap-2">
           <Button
-            icon="i-lucide-list-filter"
+            :icon="
+              isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
+            "
             color="slate"
             size="sm"
+            class="relative"
             variant="ghost"
             @click="emit('filter')"
+          >
+            <div
+              v-if="hasActiveFilters && !isSegmentsView"
+              class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
+            />
+          </Button>
+          <Button
+            v-if="hasActiveFilters && !isSegmentsView"
+            icon="i-lucide-save"
+            color="slate"
+            size="sm"
+            class="relative"
+            variant="ghost"
+            @click="emit('createSegment')"
+          />
+          <Button
+            v-if="isSegmentsView"
+            icon="i-lucide-trash"
+            color="slate"
+            size="sm"
+            class="relative"
+            variant="ghost"
+            @click="emit('deleteSegment')"
           />
           <ContactSortMenu
             :active-sort="activeSort"
@@ -89,8 +125,9 @@ const emit = defineEmits([
             @export="emit('export')"
           />
         </div>
-        <div class="w-px h-4 bg-n-strong" />
-        <Button :label="buttonLabel" size="sm" @click="emit('message')" />
+        <!-- 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>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
new file mode 100644
index 000000000..9724d689d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -0,0 +1,276 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useRouter } from 'vue-router';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+import contactFilterItems from 'dashboard/routes/dashboard/contacts/contactFilterItems';
+import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
+import countries from 'shared/constants/countries';
+
+import ContactsHeader from 'dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue';
+import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
+import ContactExportDialog from 'dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue';
+import ContactImportDialog from 'dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue';
+import CreateSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue';
+import DeleteSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue';
+import ContactsAdvancedFilters from 'dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue';
+
+const props = defineProps({
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  segmentsId: {
+    type: [String, Number],
+    default: 0,
+  },
+  activeSegment: {
+    type: Object,
+    default: null,
+  },
+  hasAppliedFilters: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'update:sort',
+  'search',
+  'applyFilter',
+  'clearFilters',
+]);
+
+const { t } = useI18n();
+const store = useStore();
+const router = useRouter();
+
+const createNewContactDialogRef = ref(null);
+const contactExportDialogRef = ref(null);
+const contactImportDialogRef = ref(null);
+const createSegmentDialogRef = ref(null);
+const deleteSegmentDialogRef = ref(null);
+
+const showFiltersModal = ref(false);
+const appliedFilter = ref([]);
+const segmentsQuery = ref({});
+
+const hasActiveSegments = computed(
+  () => props.activeSegment && props.segmentsId !== 0
+);
+const activeSegmentName = computed(() => props.activeSegment?.name);
+
+const contactFilterItemsList = computed(() =>
+  contactFilterItems.map(filter => ({
+    ...filter,
+    attributeName: t(`CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
+  }))
+);
+
+const openCreateNewContactDialog = async () => {
+  await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
+  createNewContactDialogRef.value?.dialogRef.open();
+};
+const openContactImportDialog = () =>
+  contactImportDialogRef.value?.dialogRef.open();
+const openContactExportDialog = () =>
+  contactExportDialogRef.value?.dialogRef.open();
+const openCreateSegmentDialog = () =>
+  createSegmentDialogRef.value?.dialogRef.open();
+const openDeleteSegmentDialog = () =>
+  deleteSegmentDialogRef.value?.dialogRef.open();
+
+const onCreate = async contact => {
+  await store.dispatch('contacts/create', contact);
+  createNewContactDialogRef.value?.dialogRef.close();
+};
+
+const onImport = async file => {
+  try {
+    await store.dispatch('contacts/import', file);
+    contactImportDialogRef.value?.dialogRef.close();
+    useAlert(t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
+    useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
+  } catch (error) {
+    useAlert(error.message ?? t('IMPORT_CONTACTS.ERROR_MESSAGE'));
+    useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
+  }
+};
+
+const onExport = async query => {
+  try {
+    await store.dispatch('contacts/export', query);
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error.message ||
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.ERROR_MESSAGE')
+    );
+  }
+};
+
+const onCreateSegment = async payload => {
+  try {
+    const payloadData = {
+      ...payload,
+      query: segmentsQuery.value,
+    };
+    await store.dispatch('customViews/create', payloadData);
+    createSegmentDialogRef.value?.dialogRef.close();
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.SUCCESS_MESSAGE')
+    );
+  } catch {
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.ERROR_MESSAGE')
+    );
+  }
+};
+
+const onDeleteSegment = async payload => {
+  try {
+    await store.dispatch('customViews/delete', {
+      id: Number(props.segmentsId),
+      ...payload,
+    });
+    router.push({
+      name: 'contacts_dashboard_index',
+      query: {
+        page: 1,
+      },
+    });
+    deleteSegmentDialogRef.value?.dialogRef.close();
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.ERROR_MESSAGE')
+    );
+  }
+};
+
+const closeAdvanceFiltersModal = () => {
+  showFiltersModal.value = false;
+  appliedFilter.value = [];
+};
+
+const clearFilters = async () => {
+  await store.dispatch('contacts/clearContactFilters');
+  emit('clearFilters');
+};
+
+const onApplyFilter = async payload => {
+  segmentsQuery.value = filterQueryGenerator(payload);
+  emit('applyFilter', filterQueryGenerator(payload));
+  showFiltersModal.value = false;
+};
+
+const onUpdateSegment = async (payload, segmentName) => {
+  const payloadData = {
+    ...props.activeSegment,
+    name: segmentName,
+    query: filterQueryGenerator(payload),
+  };
+  await store.dispatch('customViews/update', payloadData);
+  closeAdvanceFiltersModal();
+};
+
+const setParamsForEditSegmentModal = () => {
+  return {
+    countries,
+    filterTypes: contactFilterItems,
+    allCustomAttributes:
+      store.getters['attributes/getAttributesByModel']('contact_attribute'),
+  };
+};
+
+const initializeSegmentToFilterModal = segment => {
+  const query = segment?.query?.payload;
+  if (!Array.isArray(query)) return;
+
+  appliedFilter.value = query.map(filter => ({
+    attribute_key: filter.attribute_key,
+    attribute_model: filter.attribute_model,
+    filter_operator: filter.filter_operator,
+    values: Array.isArray(filter.values)
+      ? generateValuesForEditCustomViews(filter, setParamsForEditSegmentModal())
+      : [],
+    query_operator: filter.query_operator,
+    custom_attribute_type: filter.custom_attribute_type,
+  }));
+};
+
+const onToggleFilters = () => {
+  appliedFilter.value = [];
+  if (hasActiveSegments.value) {
+    initializeSegmentToFilterModal(props.activeSegment);
+  }
+  showFiltersModal.value = true;
+};
+</script>
+
+<template>
+  <ContactsHeader
+    :show-search="showSearch"
+    :search-value="searchValue"
+    :active-sort="activeSort"
+    :active-ordering="activeOrdering"
+    :header-title="headerTitle"
+    :is-segments-view="hasActiveSegments"
+    :has-active-filters="hasAppliedFilters"
+    :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
+    @search="emit('search', $event)"
+    @update:sort="emit('update:sort', $event)"
+    @add="openCreateNewContactDialog"
+    @import="openContactImportDialog"
+    @export="openContactExportDialog"
+    @filter="onToggleFilters"
+    @create-segment="openCreateSegmentDialog"
+    @delete-segment="openDeleteSegmentDialog"
+  />
+
+  <CreateNewContactDialog ref="createNewContactDialogRef" @create="onCreate" />
+  <ContactExportDialog ref="contactExportDialogRef" @export="onExport" />
+  <ContactImportDialog ref="contactImportDialogRef" @import="onImport" />
+  <CreateSegmentDialog ref="createSegmentDialogRef" @create="onCreateSegment" />
+  <DeleteSegmentDialog ref="deleteSegmentDialogRef" @delete="onDeleteSegment" />
+  <woot-modal
+    v-model:show="showFiltersModal"
+    :on-close="closeAdvanceFiltersModal"
+    size="medium"
+  >
+    <ContactsAdvancedFilters
+      v-if="showFiltersModal"
+      :on-close="closeAdvanceFiltersModal"
+      :initial-filter-types="contactFilterItemsList"
+      :initial-applied-filters="appliedFilter"
+      :active-segment-name="activeSegmentName"
+      :is-segments-view="hasActiveSegments"
+      @apply-filter="onApplyFilter"
+      @update-segment="onUpdateSegment"
+      @clear-filters="clearFilters"
+    />
+  </woot-modal>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
new file mode 100644
index 000000000..d408a314a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue';
+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,
+  },
+});
+
+const emit = defineEmits([
+  'update:currentPage',
+  'update:sort',
+  'search',
+  'applyFilter',
+  'clearFilters',
+]);
+
+const route = useRoute();
+
+const isNotSegmentView = computed(() => {
+  return route.name !== 'contacts_dashboard_segments_index';
+});
+
+const updateCurrentPage = page => {
+  emit('update:currentPage', page);
+};
+</script>
+
+<template>
+  <section
+    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">
+      <ContactListHeaderWrapper
+        :show-search="isNotSegmentView"
+        :search-value="searchValue"
+        :active-sort="activeSort"
+        :active-ordering="activeOrdering"
+        :header-title="headerTitle"
+        :active-segment="activeSegment"
+        :segments-id="segmentsId"
+        :has-applied-filters="hasAppliedFilters"
+        @update:sort="emit('update:sort', $event)"
+        @search="emit('search', $event)"
+        @apply-filter="emit('applyFilter', $event)"
+        @clear-filters="emit('clearFilters')"
+      />
+      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
+        <div class="w-full mx-auto max-w-[960px]">
+          <slot name="default" />
+        </div>
+      </main>
+      <footer
+        v-if="showPaginationFooter"
+        class="sticky bottom-0 z-10 px-4 pb-4"
+      >
+        <PaginationFooter
+          current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
+          :current-page="currentPage"
+          :total-items="totalItems"
+          :items-per-page="itemsPerPage"
+          @update:current-page="updateCurrentPage"
+        />
+      </footer>
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
index ef555ff7a..f6f5ddaf6 100644
--- a/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
@@ -1,5 +1,8 @@
 <script setup>
+import { ref } from 'vue';
+
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
 import contactContent from 'dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent';
@@ -22,6 +25,14 @@ defineProps({
     default: '',
   },
 });
+
+const emit = defineEmits(['create']);
+
+const createNewContactDialogRef = ref(null);
+
+const onClick = () => {
+  createNewContactDialogRef.value?.dialogRef.open();
+};
 </script>
 
 <template>
@@ -45,6 +56,10 @@ defineProps({
     <template #actions>
       <div v-if="showButton">
         <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
+        <CreateNewContactDialog
+          ref="createNewContactDialogRef"
+          @create="emit('create', $event)"
+        />
       </div>
     </template>
   </EmptyStateLayout>
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
new file mode 100644
index 000000000..02e86d4de
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
+import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
+
+defineProps({ contacts: { type: Array, required: true } });
+
+const { t } = useI18n();
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isUpdating = computed(() => uiFlags.value.isUpdating);
+const expandedCardId = ref(null);
+
+const updateContact = async updatedData => {
+  try {
+    await store.dispatch('contacts/update', updatedData);
+    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const i18nPrefix = 'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM';
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('email')) {
+        useAlert(t(`${i18nPrefix}.EMAIL_ADDRESS.DUPLICATE`));
+      } else if (error.data.includes('phone_number')) {
+        useAlert(t(`${i18nPrefix}.PHONE_NUMBER.DUPLICATE`));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t(`${i18nPrefix}.ERROR_MESSAGE`));
+    }
+  }
+};
+
+const onClickViewDetails = async id => {
+  const params = { contactId: id };
+  if (route.name.includes('segments')) {
+    params.segmentId = route.params.segmentId;
+  } else if (route.name.includes('labels')) {
+    params.label = route.params.label;
+  }
+
+  await router.push({ name: 'contacts_edit', params, query: route.query });
+};
+
+const toggleExpanded = id => {
+  expandedCardId.value = expandedCardId.value === id ? null : id;
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-6">
+    <ContactsCard
+      v-for="contact in contacts"
+      :id="contact.id"
+      :key="contact.id"
+      :name="contact.name"
+      :email="contact.email"
+      :thumbnail="contact.thumbnail"
+      :phone-number="contact.phoneNumber"
+      :additional-attributes="contact.additionalAttributes"
+      :is-expanded="expandedCardId === contact.id"
+      :is-updating="isUpdating"
+      @toggle="toggleExpanded(contact.id)"
+      @update-contact="updateContact"
+      @show-contact="onClickViewDetails"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index 7fcc09dc7..ab87e33c9 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -132,7 +132,7 @@ const iconStyles = computed(() => ({
 }));
 
 const initialsStyles = computed(() => ({
-  fontSize: `${props.size / 2}px`,
+  fontSize: `${props.size > 32 ? 16 : props.size / 2}px`,
 }));
 
 const invalidateCurrentImage = () => {
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index 95a30c902..a3324a618 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -17,6 +17,10 @@ const props = defineProps({
     type: Number,
     default: 16,
   },
+  currentPageInfo: {
+    type: String,
+    default: '',
+  },
 });
 const emit = defineEmits(['update:currentPage']);
 const { t } = useI18n();
@@ -39,11 +43,14 @@ const changePage = newPage => {
 };
 
 const currentPageInformation = computed(() => {
-  return t('PAGINATION_FOOTER.SHOWING', {
-    startItem: startItem.value,
-    endItem: endItem.value,
-    totalItems: props.totalItems,
-  });
+  return t(
+    props.currentPageInfo ? props.currentPageInfo : 'PAGINATION_FOOTER.SHOWING',
+    {
+      startItem: startItem.value,
+      endItem: endItem.value,
+      totalItems: props.totalItems,
+    }
+  );
 });
 
 const pageInfo = computed(() => {
@@ -84,7 +91,7 @@ const pageInfo = computed(() => {
         <span class="px-3 tabular-nums py-0.5 bg-n-alpha-black2 rounded-md">
           {{ currentPage }}
         </span>
-        <span>{{ pageInfo }}</span>
+        <span class="truncate">{{ pageInfo }}</span>
       </div>
       <Button
         icon="i-lucide-chevron-right"
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 3f8f15edf..7a43bbdf7 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -197,7 +197,18 @@ const menuItems = computed(() => {
         {
           name: 'All Contacts',
           label: t('SIDEBAR.ALL_CONTACTS'),
-          to: accountScopedRoute('contacts_dashboard'),
+          to: accountScopedRoute(
+            'contacts_dashboard_index',
+            {},
+            {
+              page: 1,
+              search: undefined,
+            }
+          ),
+          activeOn: [
+            'contacts_dashboard_index',
+            'contacts_dashboard_edit_index',
+          ],
         },
         {
           name: 'Segments',
@@ -206,9 +217,16 @@ const menuItems = computed(() => {
           children: contactCustomViews.value.map(view => ({
             name: `${view.name}-${view.id}`,
             label: view.name,
-            to: accountScopedRoute('contacts_segments_dashboard', {
-              id: view.id,
-            }),
+            to: accountScopedRoute(
+              'contacts_dashboard_segments_index',
+              {
+                segmentId: view.id,
+              },
+              {
+                page: 1,
+              }
+            ),
+            activeOn: ['contacts_dashboard_segments_index'],
           })),
         },
         {
@@ -222,9 +240,17 @@ const menuItems = computed(() => {
               class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
               style: { backgroundColor: label.color },
             }),
-            to: accountScopedRoute('contacts_labels_dashboard', {
-              label: label.title,
-            }),
+            to: accountScopedRoute(
+              'contacts_dashboard_labels_index',
+              {
+                label: label.title,
+              },
+              {
+                page: 1,
+                search: undefined,
+              }
+            ),
+            activeOn: ['contacts_dashboard_labels_index'],
           })),
         },
       ],
@@ -344,18 +370,6 @@ const menuItems = computed(() => {
           }),
         },
       ],
-      activeOn: [
-        'portals_new',
-        'portals_index',
-        'portals_articles_index',
-        'portals_articles_new',
-        'portals_articles_edit',
-        'portals_categories_index',
-        'portals_categories_articles_index',
-        'portals_categories_articles_edit',
-        'portals_locales_index',
-        'portals_settings_index',
-      ],
     },
     {
       name: 'Settings',
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index 43856e574..051375b68 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -66,14 +66,35 @@ const activeChild = computed(() => {
   );
   if (pathSame) return pathSame;
 
-  const pathSatrtsWith = navigableChildren.value.find(
-    child => child.to && route.path.startsWith(resolvePath(child.to))
-  );
-  if (pathSatrtsWith) return pathSatrtsWith;
-
-  return navigableChildren.value.find(child =>
+  // Rank the activeOn Prop higher than the path match
+  // There will be cases where the path name is the same but the params are different
+  // So we need to rank them based on the params
+  // For example, contacts segment list in the sidebar effectively has the same name
+  // But the params are different
+  const activeOnPages = navigableChildren.value.filter(child =>
     child.activeOn?.includes(route.name)
   );
+
+  if (activeOnPages.length > 0) {
+    const rankedPage = activeOnPages.find(child => {
+      return Object.keys(child.to.params)
+        .map(key => {
+          return String(child.to.params[key]) === String(route.params[key]);
+        })
+        .every(match => match);
+    });
+
+    // If there is no ranked page, return the first activeOn page anyway
+    // Since this takes higher precedence over the path match
+    // This is not perfect, ideally we should rank each route based on all the techniques
+    // and then return the highest ranked one
+    // But this is good enough for now
+    return rankedPage ?? activeOnPages[0];
+  }
+
+  return navigableChildren.value.find(
+    child => child.to && route.path.startsWith(resolvePath(child.to))
+  );
 });
 
 const hasActiveChild = computed(() => {
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
index d615bd15c..fe148163e 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
@@ -4,7 +4,7 @@ const contacts = accountId => ({
   parentNav: 'contacts',
   routes: [
     'contacts_dashboard',
-    'contact_profile_dashboard',
+    'contacts_edit',
     'contacts_segments_dashboard',
     'contacts_labels_dashboard',
   ],
diff --git a/app/javascript/dashboard/composables/spec/useAccount.spec.js b/app/javascript/dashboard/composables/spec/useAccount.spec.js
index bb4bfdee3..b61d5d6a0 100644
--- a/app/javascript/dashboard/composables/spec/useAccount.spec.js
+++ b/app/javascript/dashboard/composables/spec/useAccount.spec.js
@@ -91,10 +91,11 @@ describe('useAccount', () => {
   it('returns an account-scoped route', () => {
     const wrapper = mount(createComponent(), mountParams);
     const { accountScopedRoute } = wrapper.vm;
-    const result = accountScopedRoute('accountDetail', { userId: 456 });
+    const result = accountScopedRoute('accountDetail', { userId: 456 }, {});
     expect(result).toEqual({
       name: 'accountDetail',
       params: { accountId: 123, userId: 456 },
+      query: {},
     });
   });
 
diff --git a/app/javascript/dashboard/composables/useAccount.js b/app/javascript/dashboard/composables/useAccount.js
index 08e291e39..c8c245adb 100644
--- a/app/javascript/dashboard/composables/useAccount.js
+++ b/app/javascript/dashboard/composables/useAccount.js
@@ -28,10 +28,11 @@ export function useAccount() {
     return `/app/accounts/${accountId.value}/${url}`;
   };
 
-  const accountScopedRoute = (name, params) => {
+  const accountScopedRoute = (name, params, query) => {
     return {
       name,
       params: { accountId: accountId.value, ...params },
+      query: { ...query },
     };
   };
 
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 9a33b1f99..fcb3c03ac 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -441,9 +441,31 @@
             "ASCENDING": "Ascending",
             "DESCENDING": "Descending"
           }
+        },
+        "FILTERS": {
+          "CREATE_SEGMENT": {
+            "TITLE": "Do you want to save this filter?",
+            "CONFIRM": "Save filter",
+            "LABEL": "Name",
+            "PLACEHOLDER": "Enter the name of the filter",
+            "ERROR": "Enter a valid name",
+            "SUCCESS_MESSAGE": "Filter saved successfully",
+            "ERROR_MESSAGE": "Unable to save filter. Please try again later."
+          },
+          "DELETE_SEGMENT": {
+            "TITLE": "Confirm Deletion",
+            "DESCRIPTION": "Are you sure you want to delete this filter?",
+            "CONFIRM": "Yes, Delete",
+            "CANCEL": "No, Cancel",
+            "SUCCESS_MESSAGE": "Filter deleted successfully",
+            "ERROR_MESSAGE": "Unable to delete filter. Please try again later."
+          }
         }
       }
     },
+    "PAGINATION_FOOTER": {
+      "SHOWING": "Showing {startItem} - {endItem} of {totalItems} contacts"
+    },
     "CARD": {
       "OF": "of",
       "VIEW_DETAILS": "View details",
@@ -457,10 +479,12 @@
             "PLACEHOLDER": "Enter the last name"
           },
           "EMAIL_ADDRESS": {
-            "PLACEHOLDER": "Enter the email address"
+            "PLACEHOLDER": "Enter the email address",
+            "DUPLICATE": "This email address is in use for another contact."
           },
           "PHONE_NUMBER": {
-            "PLACEHOLDER": "Enter the phone number"
+            "PLACEHOLDER": "Enter the phone number",
+            "DUPLICATE": "This phone number is in use for another contact."
           },
           "CITY": {
             "PLACEHOLDER": "Enter the city name"
@@ -474,7 +498,10 @@
           "COMPANY_NAME": {
             "PLACEHOLDER": "Enter the company name"
           }
-        }
+        },
+        "UPDATE_BUTTON": "Update contact",
+        "SUCCESS_MESSAGE": "Contact updated successfully",
+        "ERROR_MESSAGE": "Unable to update contact. Please try again later."
       },
       "SOCIAL_MEDIA": {
         "TITLE": "Edit social links",
@@ -550,6 +577,13 @@
         "SAVE": "Save note",
         "EMPTY_STATE": "There are no notes associated to this contact. You can add a note by typing in the box above."
       }
+    },
+    "EMPTY_STATE": {
+      "TITLE": "No contacts found in this account",
+      "SUBTITLE": "Start adding new contacts by clicking on the button below",
+      "BUTTON_LABEL": "Add contact",
+      "SEARCH_EMPTY_STATE_TITLE": "No contacts matches your search 🔍",
+      "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋"
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
index bc74353c2..29b1faee6 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -83,7 +83,7 @@ export default {
     this.filterTypes = [...this.filterTypes, ...filterTypes];
     this.filterGroups = filterGroups;
 
-    if (this.getAppliedContactFilters.length) {
+    if (this.getAppliedContactFilters.length && !this.isSegmentsView) {
       this.appliedFilters = [...this.getAppliedContactFilters];
     } else if (!this.isSegmentsView) {
       this.appliedFilters.push({
@@ -318,7 +318,7 @@ export default {
           @reset-filter="resetFilter(i, appliedFilters[i])"
           @remove-filter="removeFilter(i)"
         />
-        <div class="mt-4">
+        <div class="flex items-center gap-2 mt-4">
           <woot-button
             icon="add"
             color-scheme="success"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index 68bfb288f..3b4e06244 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -45,6 +45,9 @@ export default {
       return this.$store.getters['contacts/getContact'](this.contactId);
     },
     backUrl() {
+      if (window.history.state?.back || window.history.length > 1) {
+        return '';
+      }
       return `/app/accounts/${this.$route.params.accountId}/contacts`;
     },
   },
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
new file mode 100644
index 000000000..a54ea3c0d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -0,0 +1,298 @@
+<script setup>
+import { onMounted, computed, ref, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { debounce } from '@chatwoot/utils';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+
+import ContactsListLayout from 'dashboard/components-next/Contacts/ContactsListLayout.vue';
+import ContactsList from 'dashboard/components-next/Contacts/Pages/ContactsList.vue';
+import ContactEmptyState from 'dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const DEFAULT_SORT_FIELD = 'last_activity_at';
+const DEBOUNCE_DELAY = 300;
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const { updateUISettings, uiSettings } = useUISettings();
+
+const contacts = useMapGetter('contacts/getContactsList');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const customViewsUiFlags = useMapGetter('customViews/getUIFlags');
+const segments = useMapGetter('customViews/getContactCustomViews');
+const appliedFilters = useMapGetter('contacts/getAppliedContactFilters');
+const meta = useMapGetter('contacts/getMeta');
+
+const searchQuery = computed(() => route.query?.search);
+const searchValue = ref(searchQuery.value || '');
+const pageNumber = computed(() => Number(route.query?.page) || 1);
+
+const parseSortSettings = (sortString = '') => {
+  const hasDescending = sortString.startsWith('-');
+  const sortField = hasDescending ? sortString.slice(1) : sortString;
+  return {
+    sort: sortField || DEFAULT_SORT_FIELD,
+    order: hasDescending ? '-' : '',
+  };
+};
+
+const { contacts_sort_by: contactSortBy = '' } = uiSettings.value ?? {};
+const { sort: initialSort, order: initialOrder } =
+  parseSortSettings(contactSortBy);
+
+const sortState = reactive({
+  activeSort: initialSort,
+  activeOrdering: initialOrder,
+});
+
+const activeLabel = computed(() => route.params.label);
+const activeSegmentId = computed(() => route.params.segmentId);
+const isFetchingList = computed(
+  () => uiFlags.value.isFetching || customViewsUiFlags.value.isFetching
+);
+const currentPage = computed(() => Number(meta.value?.currentPage));
+const totalItems = computed(() => meta.value?.count);
+const activeSegment = computed(() => {
+  if (!activeSegmentId.value) return undefined;
+  return segments.value.find(view => view.id === Number(activeSegmentId.value));
+});
+
+const hasContacts = computed(() => contacts.value.length > 0);
+const isContactIndexView = computed(
+  () => route.name === 'contacts_dashboard_index' && pageNumber.value === 1
+);
+const hasAppliedFilters = computed(() => {
+  return appliedFilters.value.length > 0;
+});
+const showEmptyStateLayout = computed(() => {
+  return (
+    !searchQuery.value &&
+    !hasContacts.value &&
+    isContactIndexView.value &&
+    !hasAppliedFilters.value
+  );
+});
+const showEmptyText = computed(() => {
+  return (
+    (searchQuery.value ||
+      hasAppliedFilters.value ||
+      !isContactIndexView.value) &&
+    !hasContacts.value
+  );
+});
+
+const headerTitle = computed(() => {
+  if (searchQuery.value) return t('CONTACTS_LAYOUT.HEADER.SEARCH_TITLE');
+  if (activeSegmentId.value) return activeSegment.value?.name;
+  if (activeLabel.value) return `#${activeLabel.value}`;
+  return t('CONTACTS_LAYOUT.HEADER.TITLE');
+});
+
+const updatePageParam = (page, search = '') => {
+  const query = {
+    ...route.query,
+    page: page.toString(),
+    ...(search ? { search } : {}),
+  };
+
+  if (!search) {
+    delete query.search;
+  }
+
+  router.replace({ query });
+};
+
+const buildSortAttr = () =>
+  `${sortState.activeOrdering}${sortState.activeSort}`;
+
+const getCommonFetchParams = (page = 1) => ({
+  page,
+  sortAttr: buildSortAttr(),
+  label: activeLabel.value,
+});
+
+const fetchContacts = async (page = 1) => {
+  await store.dispatch('contacts/get', getCommonFetchParams(page));
+  updatePageParam(page);
+};
+
+const fetchSavedOrAppliedFilteredContact = async (payload, page = 1) => {
+  if (!activeSegmentId.value && !hasAppliedFilters.value) return;
+  await store.dispatch('contacts/filter', {
+    ...getCommonFetchParams(page),
+    queryPayload: payload,
+  });
+  updatePageParam(page);
+};
+
+const searchContacts = debounce(async (value, page = 1) => {
+  searchValue.value = value;
+
+  if (!value) {
+    updatePageParam(page);
+    await fetchContacts(page);
+    return;
+  }
+
+  updatePageParam(page, value);
+  await store.dispatch('contacts/search', {
+    ...getCommonFetchParams(page),
+    search: encodeURIComponent(value),
+  });
+}, DEBOUNCE_DELAY);
+
+const fetchContactsBasedOnContext = async page => {
+  updatePageParam(page, searchValue.value);
+  if (isFetchingList.value) return;
+  if (searchQuery.value) {
+    await searchContacts(searchQuery.value, page);
+    return;
+  }
+  // Reset the search value when we change the view
+  searchValue.value = '';
+  // If there are applied filters or active segment with query
+  if (
+    (hasAppliedFilters.value || activeSegment.value?.query) &&
+    !activeLabel.value
+  ) {
+    const queryPayload =
+      activeSegment.value?.query || filterQueryGenerator(appliedFilters.value);
+    await fetchSavedOrAppliedFilteredContact(queryPayload, page);
+    return;
+  }
+  // Default case: fetch regular contacts + label
+  await fetchContacts(page);
+};
+
+const handleSort = async ({ sort, order }) => {
+  Object.assign(sortState, { activeSort: sort, activeOrdering: order });
+
+  await updateUISettings({
+    contacts_sort_by: buildSortAttr(),
+  });
+
+  if (searchQuery.value) {
+    await searchContacts(searchValue.value);
+    return;
+  }
+
+  await (activeSegmentId.value || hasAppliedFilters.value
+    ? fetchSavedOrAppliedFilteredContact(
+        activeSegmentId.value
+          ? activeSegment.value?.query
+          : filterQueryGenerator(appliedFilters.value)
+      )
+    : fetchContacts());
+};
+
+const createContact = async contact => {
+  await store.dispatch('contacts/create', contact);
+};
+
+watch(
+  () => uiSettings.value?.contacts_sort_by,
+  newSortBy => {
+    if (newSortBy) {
+      const { sort, order } = parseSortSettings(newSortBy);
+      sortState.activeSort = sort;
+      sortState.activeOrdering = order;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  [activeLabel, activeSegment],
+  () => {
+    fetchContactsBasedOnContext(pageNumber.value);
+  },
+  { deep: true }
+);
+
+watch(searchQuery, value => {
+  if (isFetchingList.value) return;
+  searchValue.value = value || '';
+  // Reset the view if there is search query when we click on the sidebar group
+  if (value === undefined) {
+    fetchContacts();
+  }
+});
+
+onMounted(async () => {
+  if (!activeSegmentId.value) {
+    if (searchQuery.value) {
+      await searchContacts(searchQuery.value, pageNumber.value);
+      return;
+    }
+    await fetchContacts(pageNumber.value);
+  } else if (activeSegment.value && activeSegmentId.value) {
+    await fetchSavedOrAppliedFilteredContact(
+      activeSegment.value.query,
+      pageNumber.value
+    );
+  }
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+  >
+    <ContactsListLayout
+      :search-value="searchValue"
+      :header-title="headerTitle"
+      :current-page="currentPage"
+      :total-items="totalItems"
+      :show-pagination-footer="!isFetchingList && hasContacts"
+      :active-sort="sortState.activeSort"
+      :active-ordering="sortState.activeOrdering"
+      :active-segment="activeSegment"
+      :segments-id="activeSegmentId"
+      :has-applied-filters="hasAppliedFilters"
+      @update:current-page="fetchContactsBasedOnContext"
+      @search="searchContacts"
+      @update:sort="handleSort"
+      @apply-filter="fetchSavedOrAppliedFilteredContact"
+      @clear-filters="fetchContacts"
+    >
+      <div
+        v-if="isFetchingList"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+
+      <template v-else>
+        <ContactEmptyState
+          v-if="showEmptyStateLayout"
+          class="pt-14"
+          :title="t('CONTACTS_LAYOUT.EMPTY_STATE.TITLE')"
+          :subtitle="t('CONTACTS_LAYOUT.EMPTY_STATE.SUBTITLE')"
+          :button-label="t('CONTACTS_LAYOUT.EMPTY_STATE.BUTTON_LABEL')"
+          @create="createContact"
+        />
+
+        <div
+          v-else-if="showEmptyText"
+          class="flex items-center justify-center py-10"
+        >
+          <span class="text-base text-n-slate-11">
+            {{
+              searchQuery || !hasAppliedFilters
+                ? t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE')
+                : t('CONTACTS_LAYOUT.EMPTY_STATE.LIST_EMPTY_STATE_TITLE')
+            }}
+          </span>
+        </div>
+
+        <ContactsList v-else :contacts="contacts" />
+      </template>
+    </ContactsListLayout>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/routes.js b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
index d9abe796e..7bbefa4a4 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
@@ -1,42 +1,38 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-import ContactsView from './components/ContactsView.vue';
+import ContactsIndex from './pages/ContactsIndex.vue';
 import ContactManageView from './pages/ContactManageView.vue';
 
 export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts'),
-    name: 'contacts_dashboard',
+    component: ContactsIndex,
+    name: 'contacts_dashboard_index',
     meta: {
       permissions: ['administrator', 'agent', 'contact_manage'],
     },
-    component: ContactsView,
-  },
-  {
-    path: frontendURL('accounts/:accountId/contacts/custom_view/:id'),
-    name: 'contacts_segments_dashboard',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
-    component: ContactsView,
-    props: route => {
-      return { segmentsId: route.params.id };
-    },
   },
+
   {
-    path: frontendURL('accounts/:accountId/labels/:label/contacts'),
-    name: 'contacts_labels_dashboard',
+    path: frontendURL('accounts/:accountId/contacts/segments/:segmentId'),
+    component: ContactsIndex,
+    name: 'contacts_dashboard_segments_index',
     meta: {
       permissions: ['administrator', 'agent', 'contact_manage'],
     },
-    component: ContactsView,
-    props: route => {
-      return { label: route.params.label };
+  },
+
+  {
+    path: frontendURL('accounts/:accountId/contacts/labels/:label'),
+    component: ContactsIndex,
+    name: 'contacts_dashboard_labels_index',
+    meta: {
+      permissions: ['administrator', 'agent', 'contact_manage'],
     },
   },
   {
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
-    name: 'contact_profile_dashboard',
+    name: 'contacts_edit',
     meta: {
       permissions: ['administrator', 'agent', 'contact_manage'],
     },
diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js
index deb1c96d1..5b67029c0 100644
--- a/app/javascript/dashboard/store/modules/contacts/actions.js
+++ b/app/javascript/dashboard/store/modules/contacts/actions.js
@@ -4,6 +4,7 @@ import {
 } from 'shared/helpers/CustomErrors';
 import types from '../../mutation-types';
 import ContactAPI from '../../../api/contacts';
+import decamelizeKeys from 'decamelize-keys';
 import AccountActionsAPI from '../../../api/accountActions';
 import AnalyticsHelper from '../../../helper/AnalyticsHelper';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -90,11 +91,16 @@ export const actions = {
   },
 
   update: async ({ commit }, { id, isFormData = false, ...contactParams }) => {
+    const decamelizedContactParams = decamelizeKeys(contactParams, {
+      deep: true,
+    });
     commit(types.SET_CONTACT_UI_FLAG, { isUpdating: true });
     try {
       const response = await ContactAPI.update(
         id,
-        isFormData ? buildContactFormData(contactParams) : contactParams
+        isFormData
+          ? buildContactFormData(decamelizedContactParams)
+          : decamelizedContactParams
       );
       commit(types.EDIT_CONTACT, response.data.payload);
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
@@ -109,10 +115,15 @@ export const actions = {
   },
 
   create: async ({ commit }, { isFormData = false, ...contactParams }) => {
+    const decamelizedContactParams = decamelizeKeys(contactParams, {
+      deep: true,
+    });
     commit(types.SET_CONTACT_UI_FLAG, { isCreating: true });
     try {
       const response = await ContactAPI.create(
-        isFormData ? buildContactFormData(contactParams) : contactParams
+        isFormData
+          ? buildContactFormData(decamelizedContactParams)
+          : decamelizedContactParams
       );
 
       AnalyticsHelper.track(CONTACTS_EVENTS.CREATE_CONTACT);
@@ -126,12 +137,12 @@ export const actions = {
   },
 
   import: async ({ commit }, file) => {
-    commit(types.SET_CONTACT_UI_FLAG, { isCreating: true });
+    commit(types.SET_CONTACT_UI_FLAG, { isImporting: true });
     try {
       await ContactAPI.importContacts(file);
-      commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
+      commit(types.SET_CONTACT_UI_FLAG, { isImporting: false });
     } catch (error) {
-      commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
+      commit(types.SET_CONTACT_UI_FLAG, { isImporting: false });
       if (error.response?.data?.message) {
         throw new ExceptionWithMessage(error.response.data.message);
       }
@@ -139,12 +150,13 @@ export const actions = {
   },
 
   export: async ({ commit }, { payload, label }) => {
+    commit(types.SET_CONTACT_UI_FLAG, { isExporting: true });
     try {
       await ContactAPI.exportContacts({ payload, label });
 
-      commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
+      commit(types.SET_CONTACT_UI_FLAG, { isExporting: false });
     } catch (error) {
-      commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
+      commit(types.SET_CONTACT_UI_FLAG, { isExporting: false });
       if (error.response?.data?.message) {
         throw new Error(error.response.data.message);
       } else {
diff --git a/app/javascript/dashboard/store/modules/contacts/getters.js b/app/javascript/dashboard/store/modules/contacts/getters.js
index c72176171..4c6d98f13 100644
--- a/app/javascript/dashboard/store/modules/contacts/getters.js
+++ b/app/javascript/dashboard/store/modules/contacts/getters.js
@@ -1,7 +1,15 @@
+import camelcaseKeys from 'camelcase-keys';
+
 export const getters = {
   getContacts($state) {
     return $state.sortOrder.map(contactId => $state.records[contactId]);
   },
+  getContactsList($state) {
+    const contacts = $state.sortOrder.map(
+      contactId => $state.records[contactId]
+    );
+    return camelcaseKeys(contacts, { deep: true });
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },
diff --git a/app/javascript/dashboard/store/modules/contacts/index.js b/app/javascript/dashboard/store/modules/contacts/index.js
index ba8d47642..eb1e92434 100644
--- a/app/javascript/dashboard/store/modules/contacts/index.js
+++ b/app/javascript/dashboard/store/modules/contacts/index.js
@@ -15,6 +15,8 @@ const state = {
     isUpdating: false,
     isMerging: false,
     isDeleting: false,
+    isExporting: false,
+    isImporting: false,
   },
   sortOrder: [],
   appliedFilters: [],
diff --git a/package.json b/package.json
index a6258c842..8fe4b5657 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@chatwoot/captain": "0.0.3-alpha.4",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
-    "@chatwoot/utils": "^0.0.25",
+    "@chatwoot/utils": "^0.0.30",
     "@formkit/core": "^1.6.7",
     "@formkit/vue": "^1.6.7",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
@@ -65,6 +65,7 @@
     "countries-and-timezones": "^3.6.0",
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
+    "decamelize-keys": "^2.0.1",
     "dompurify": "3.1.6",
     "floating-vue": "^5.2.2",
     "highlight.js": "^11.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebb88a272..679f94325 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,8 +26,8 @@ importers:
         specifier: 1.1.1-next
         version: 1.1.1-next
       '@chatwoot/utils':
-        specifier: ^0.0.25
-        version: 0.0.25
+        specifier: ^0.0.30
+        version: 0.0.30
       '@formkit/core':
         specifier: ^1.6.7
         version: 1.6.7
@@ -118,6 +118,9 @@ importers:
       date-fns-tz:
         specifier: ^1.3.3
         version: 1.3.8(date-fns@2.21.1)
+      decamelize-keys:
+        specifier: ^2.0.1
+        version: 2.0.1
       dompurify:
         specifier: 3.1.6
         version: 3.1.6
@@ -401,8 +404,8 @@ packages:
   '@chatwoot/prosemirror-schema@1.1.1-next':
     resolution: {integrity: sha512-/M2qZ+ZF7GlQNt1riwVP499fvp3hxSqd5iy8hxyF9pkj9qQ+OKYn5JK+v3qwwqQY3IxhmNOn1Lp6tm7vstrd9Q==}
 
-  '@chatwoot/utils@0.0.25':
-    resolution: {integrity: sha512-2bGfRewHu0Bra47vHwJa3SdZ0VqXK/2q2ampcc6TT3z8ojSfZqpfMdb+1RKJ/Q1tQEYn/0rJTdWtLDRjePF92A==}
+  '@chatwoot/utils@0.0.30':
+    resolution: {integrity: sha512-UfKn2GUV/9PF7zoj17dAoyx5RZkJihjjclhWTtG0SHRfRizKS/pg0SpXSt9ToAEDeNeRtqmD7RrVMUaso8TZxw==}
     engines: {node: '>=10'}
 
   '@codemirror/commands@6.7.0':
@@ -2437,6 +2440,14 @@ packages:
       supports-color:
         optional: true
 
+  decamelize-keys@2.0.1:
+    resolution: {integrity: sha512-nrNeSCtU2gV3Apcmn/EZ+aR20zKDuNDStV67jPiupokD3sOAFeMzslLMCFdKv1sPqzwoe5ZUhsSW9IAVgKSL/Q==}
+    engines: {node: '>=14.16'}
+
+  decamelize@6.0.0:
+    resolution: {integrity: sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
 
@@ -4676,6 +4687,10 @@ packages:
     resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
     engines: {node: '>=10'}
 
+  type-fest@3.13.1:
+    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
+    engines: {node: '>=14.16'}
+
   type-fest@4.26.1:
     resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
     engines: {node: '>=16'}
@@ -5235,7 +5250,7 @@ snapshots:
       prosemirror-utils: 1.2.2(prosemirror-model@1.22.3)(prosemirror-state@1.4.3)
       prosemirror-view: 1.34.1
 
-  '@chatwoot/utils@0.0.25':
+  '@chatwoot/utils@0.0.30':
     dependencies:
       date-fns: 2.29.3
 
@@ -7513,6 +7528,15 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decamelize-keys@2.0.1:
+    dependencies:
+      decamelize: 6.0.0
+      map-obj: 4.3.0
+      quick-lru: 6.1.2
+      type-fest: 3.13.1
+
+  decamelize@6.0.0: {}
+
   decimal.js@10.4.3: {}
 
   deep-eql@5.0.2: {}
@@ -10110,6 +10134,8 @@ snapshots:
 
   type-fest@1.4.0: {}
 
+  type-fest@3.13.1: {}
+
   type-fest@4.26.1: {}
 
   typed-array-buffer@1.0.0:

From 1c12fbceb95a93cd9a01856efd448c8106b748e5 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:55:15 +0530
Subject: [PATCH 30/74] feat: New contacts advanced filter (#10514)

---
 .../Contacts/ContactsHeader/ContactHeader.vue |  34 ++--
 .../ContactListHeaderWrapper.vue              | 101 ++++++----
 .../components-next/filter/ContactsFilter.vue | 174 +++++++++++++++++
 .../components-next/filter/contactProvider.js | 184 ++++++++++++++++++
 .../filter/helper/filterHelper.js             |  41 ++++
 .../filter/helper/filterHelper.spec.js        | 126 ++++++++++++
 .../components-next/filter/provider.js        |  66 +------
 .../dashboard/i18n/locale/en/contact.json     |  31 +++
 .../store/modules/contacts/getters.js         |   3 +
 9 files changed, 643 insertions(+), 117 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/filter/ContactsFilter.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/contactProvider.js
 create mode 100644 app/javascript/dashboard/components-next/filter/helper/filterHelper.js
 create mode 100644 app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 802605ec9..b5511f7e0 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -81,21 +81,25 @@ const emit = defineEmits([
           </Input>
         </div>
         <div class="flex items-center gap-2">
-          <Button
-            :icon="
-              isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
-            "
-            color="slate"
-            size="sm"
-            class="relative"
-            variant="ghost"
-            @click="emit('filter')"
-          >
-            <div
-              v-if="hasActiveFilters && !isSegmentsView"
-              class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
-            />
-          </Button>
+          <div class="relative">
+            <Button
+              id="toggleContactsFilterButton"
+              :icon="
+                isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
+              "
+              color="slate"
+              size="sm"
+              class="relative"
+              variant="ghost"
+              @click="emit('filter')"
+            >
+              <div
+                v-if="hasActiveFilters && !isSegmentsView"
+                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
+              />
+            </Button>
+            <slot name="filter" />
+          </div>
           <Button
             v-if="hasActiveFilters && !isSegmentsView"
             icon="i-lucide-save"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
index 9724d689d..d9ea3982e 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useRouter } from 'vue-router';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -9,6 +9,10 @@ import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
 import contactFilterItems from 'dashboard/routes/dashboard/contacts/contactFilterItems';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
 import countries from 'shared/constants/countries';
+import {
+  useCamelCase,
+  useSnakeCase,
+} from 'dashboard/composables/useTransformKeys';
 
 import ContactsHeader from 'dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue';
 import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
@@ -16,7 +20,7 @@ import ContactExportDialog from 'dashboard/components-next/Contacts/ContactsForm
 import ContactImportDialog from 'dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue';
 import CreateSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue';
 import DeleteSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue';
-import ContactsAdvancedFilters from 'dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue';
+import ContactsFilter from 'dashboard/components-next/filter/ContactsFilter.vue';
 
 const props = defineProps({
   showSearch: {
@@ -74,18 +78,13 @@ const showFiltersModal = ref(false);
 const appliedFilter = ref([]);
 const segmentsQuery = ref({});
 
+const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+const contactAttributes = useMapGetter('attributes/getContactAttributes');
 const hasActiveSegments = computed(
   () => props.activeSegment && props.segmentsId !== 0
 );
 const activeSegmentName = computed(() => props.activeSegment?.name);
 
-const contactFilterItemsList = computed(() =>
-  contactFilterItems.map(filter => ({
-    ...filter,
-    attributeName: t(`CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
-  }))
-);
-
 const openCreateNewContactDialog = async () => {
   await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
   createNewContactDialogRef.value?.dialogRef.open();
@@ -182,12 +181,14 @@ const clearFilters = async () => {
 };
 
 const onApplyFilter = async payload => {
+  payload = useSnakeCase(payload);
   segmentsQuery.value = filterQueryGenerator(payload);
   emit('applyFilter', filterQueryGenerator(payload));
   showFiltersModal.value = false;
 };
 
 const onUpdateSegment = async (payload, segmentName) => {
+  payload = useSnakeCase(payload);
   const payloadData = {
     ...props.activeSegment,
     name: segmentName,
@@ -201,31 +202,52 @@ const setParamsForEditSegmentModal = () => {
   return {
     countries,
     filterTypes: contactFilterItems,
-    allCustomAttributes:
-      store.getters['attributes/getAttributesByModel']('contact_attribute'),
+    allCustomAttributes: useSnakeCase(contactAttributes.value),
   };
 };
 
 const initializeSegmentToFilterModal = segment => {
-  const query = segment?.query?.payload;
+  const query = unref(segment)?.query?.payload;
   if (!Array.isArray(query)) return;
 
-  appliedFilter.value = query.map(filter => ({
-    attribute_key: filter.attribute_key,
-    attribute_model: filter.attribute_model,
-    filter_operator: filter.filter_operator,
-    values: Array.isArray(filter.values)
-      ? generateValuesForEditCustomViews(filter, setParamsForEditSegmentModal())
-      : [],
-    query_operator: filter.query_operator,
-    custom_attribute_type: filter.custom_attribute_type,
-  }));
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    const values = Array.isArray(transformed.values)
+      ? generateValuesForEditCustomViews(
+          useSnakeCase(filter),
+          setParamsForEditSegmentModal()
+        )
+      : [];
+
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values,
+    };
+  });
+
+  appliedFilter.value = [...appliedFilter.value, ...newFilters];
 };
 
 const onToggleFilters = () => {
   appliedFilter.value = [];
   if (hasActiveSegments.value) {
     initializeSegmentToFilterModal(props.activeSegment);
+  } else {
+    appliedFilter.value = props.hasAppliedFilters
+      ? [...appliedFilters.value]
+      : [
+          {
+            attributeKey: 'name',
+            filterOperator: 'equal_to',
+            values: '',
+            queryOperator: 'and',
+            attributeModel: 'standard',
+          },
+        ];
   }
   showFiltersModal.value = true;
 };
@@ -249,28 +271,25 @@ const onToggleFilters = () => {
     @filter="onToggleFilters"
     @create-segment="openCreateSegmentDialog"
     @delete-segment="openDeleteSegmentDialog"
-  />
+  >
+    <template #filter>
+      <ContactsFilter
+        v-if="showFiltersModal"
+        v-model="appliedFilter"
+        :segment-name="activeSegmentName"
+        :is-segment-view="hasActiveSegments"
+        class="absolute mt-1 ltr:right-0 rtl:left-0 top-full"
+        @apply-filter="onApplyFilter"
+        @update-segment="onUpdateSegment"
+        @close="closeAdvanceFiltersModal"
+        @clear-filters="clearFilters"
+      />
+    </template>
+  </ContactsHeader>
 
   <CreateNewContactDialog ref="createNewContactDialogRef" @create="onCreate" />
   <ContactExportDialog ref="contactExportDialogRef" @export="onExport" />
   <ContactImportDialog ref="contactImportDialogRef" @import="onImport" />
   <CreateSegmentDialog ref="createSegmentDialogRef" @create="onCreateSegment" />
   <DeleteSegmentDialog ref="deleteSegmentDialogRef" @delete="onDeleteSegment" />
-  <woot-modal
-    v-model:show="showFiltersModal"
-    :on-close="closeAdvanceFiltersModal"
-    size="medium"
-  >
-    <ContactsAdvancedFilters
-      v-if="showFiltersModal"
-      :on-close="closeAdvanceFiltersModal"
-      :initial-filter-types="contactFilterItemsList"
-      :initial-applied-filters="appliedFilter"
-      :active-segment-name="activeSegmentName"
-      :is-segments-view="hasActiveSegments"
-      @apply-filter="onApplyFilter"
-      @update-segment="onUpdateSegment"
-      @clear-filters="clearFilters"
-    />
-  </woot-modal>
 </template>
diff --git a/app/javascript/dashboard/components-next/filter/ContactsFilter.vue b/app/javascript/dashboard/components-next/filter/ContactsFilter.vue
new file mode 100644
index 000000000..cff2e71e3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ContactsFilter.vue
@@ -0,0 +1,174 @@
+<script setup>
+import { useTemplateRef, onBeforeUnmount, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useTrack } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import { vOnClickOutside } from '@vueuse/components';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useContactFilterContext } from './contactProvider.js';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+
+import Button from 'next/button/Button.vue';
+import ConditionRow from './ConditionRow.vue';
+
+const props = defineProps({
+  isSegmentView: { type: Boolean, default: false },
+  segmentName: { type: String, default: '' },
+});
+
+const emit = defineEmits([
+  'applyFilter',
+  'updateSegment',
+  'close',
+  'clearFilters',
+]);
+const { filterTypes } = useContactFilterContext();
+
+const filters = defineModel({
+  type: Array,
+  default: [],
+});
+const segmentNameLocal = ref(props.segmentName);
+
+const DEFAULT_FILTER = {
+  attributeKey: 'name',
+  filterOperator: 'equal_to',
+  values: '',
+  queryOperator: 'and',
+  attributeModel: 'standard',
+};
+
+const { t } = useI18n();
+const store = useStore();
+
+const resetFilter = () => {
+  emit('clearFilters');
+  filters.value = [{ ...DEFAULT_FILTER }];
+};
+
+const removeFilter = index => {
+  if (filters.value.length === 1) {
+    resetFilter();
+  } else {
+    filters.value.splice(index, 1);
+  }
+};
+
+const addFilter = () => {
+  filters.value.push({ ...DEFAULT_FILTER });
+};
+
+const conditionsRef = useTemplateRef('conditionsRef');
+
+const isConditionsValid = () => {
+  return conditionsRef.value.every(condition => condition.validate());
+};
+
+const updateSavedSegment = () => {
+  if (isConditionsValid()) {
+    emit('updateSegment', filters.value, segmentNameLocal.value);
+  }
+};
+
+function validateAndSubmit() {
+  if (!isConditionsValid()) return;
+
+  store.dispatch(
+    'contacts/setContactFilters',
+    useSnakeCase(JSON.parse(JSON.stringify(filters.value)))
+  );
+  emit('applyFilter', filters.value);
+  useTrack(CONTACTS_EVENTS.APPLY_FILTER, {
+    appliedFilters: filters.value.map(filter => ({
+      key: filter.attributeKey,
+      operator: filter.filterOperator,
+      queryOperator: filter.queryOperator,
+    })),
+  });
+}
+
+const filterModalHeaderTitle = computed(() => {
+  return !props.isSegmentView
+    ? t('CONTACTS_LAYOUT.FILTER.TITLE')
+    : t('CONTACTS_LAYOUT.FILTER.EDIT_SEGMENT');
+});
+
+onBeforeUnmount(() => emit('close'));
+const outsideClickHandler = [
+  () => emit('close'),
+  { ignore: ['#toggleContactsFilterButton'] },
+];
+</script>
+
+<template>
+  <div
+    v-on-click-outside="outsideClickHandler"
+    class="z-40 max-w-3xl lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+  >
+    <h3 class="text-base font-medium leading-6 text-n-slate-12">
+      {{ filterModalHeaderTitle }}
+    </h3>
+    <div v-if="props.isSegmentView">
+      <label class="pb-6 border-b border-n-weak">
+        <div class="mb-2 text-sm text-n-slate-11">
+          {{ $t('CONTACTS_LAYOUT.FILTER.SEGMENT.LABEL') }}
+        </div>
+        <input
+          v-model="segmentNameLocal"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :placeholder="t('CONTACTS_LAYOUT.FILTER.SEGMENT.INPUT_PLACEHOLDER')"
+        />
+      </label>
+    </div>
+    <ul class="grid gap-4 list-none">
+      <template v-for="(filter, index) in filters" :key="filter.id">
+        <ConditionRow
+          v-if="index === 0"
+          ref="conditionsRef"
+          :key="`filter-${filter.attributeKey}-0`"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          :filter-types="filterTypes"
+          :show-query-operator="false"
+          @remove="removeFilter(index)"
+        />
+        <ConditionRow
+          v-else
+          :key="`filter-${filter.attributeKey}-${index}`"
+          ref="conditionsRef"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:query-operator="filters[index - 1].queryOperator"
+          v-model:values="filter.values"
+          show-query-operator
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+      </template>
+    </ul>
+    <div class="flex justify-between gap-2">
+      <Button sm ghost blue @click="addFilter">
+        {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.ADD_FILTER') }}
+      </Button>
+      <div class="flex gap-2">
+        <Button sm faded slate @click="resetFilter">
+          {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.CLEAR_FILTERS') }}
+        </Button>
+        <Button
+          v-if="isSegmentView"
+          sm
+          solid
+          blue
+          :disabled="!segmentNameLocal"
+          @click="updateSavedSegment"
+        >
+          {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.UPDATE_SEGMENT') }}
+        </Button>
+        <Button v-else sm solid blue @click="validateAndSubmit">
+          {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.APPLY_FILTERS') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/contactProvider.js b/app/javascript/dashboard/components-next/filter/contactProvider.js
new file mode 100644
index 000000000..4aceac359
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/contactProvider.js
@@ -0,0 +1,184 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useOperators } from './operators';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { buildAttributesFilterTypes } from './helper/filterHelper.js';
+import countries from 'shared/constants/countries.js';
+
+/**
+ * @typedef {Object} FilterOption
+ * @property {string|number} id
+ * @property {string} name
+ * @property {import('vue').VNode} [icon]
+ */
+
+/**
+ * @typedef {Object} FilterOperator
+ * @property {string} value
+ * @property {string} label
+ * @property {string} icon
+ * @property {boolean} hasInput
+ */
+
+/**
+ * @typedef {Object} FilterType
+ * @property {string} attributeKey - The attribute key
+ * @property {string} value - This is a proxy for the attribute key used in FilterSelect
+ * @property {string} attributeName - The attribute name used to display on the UI
+ * @property {string} label - This is a proxy for the attribute name used in FilterSelect
+ * @property {'multiSelect'|'searchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
+ * @property {FilterOption[]} [options] - The options available for the attribute if it is a multiSelect or singleSelect type
+ * @property {'text'|'number'} dataType
+ * @property {FilterOperator[]} filterOperators - The operators available for the attribute
+ * @property {'standard'|'additional'|'customAttributes'} attributeModel
+ */
+
+/**
+ * @typedef {Object} FilterGroup
+ * @property {string} name
+ * @property {FilterType[]} attributes
+ */
+
+/**
+ * Composable that provides conversation filtering context
+ * @returns {{ filterTypes: import('vue').ComputedRef<FilterType[]>, filterGroups: import('vue').ComputedRef<FilterGroup[]> }}
+ */
+export function useContactFilterContext() {
+  const { t } = useI18n();
+
+  const contactAttributes = useMapGetter('attributes/getContactAttributes');
+
+  const {
+    equalityOperators,
+    containmentOperators,
+    dateOperators,
+    getOperatorTypes,
+  } = useOperators();
+
+  /**
+   * @type {import('vue').ComputedRef<FilterType[]>}
+   */
+  const customFilterTypes = computed(() =>
+    buildAttributesFilterTypes(contactAttributes.value, getOperatorTypes)
+  );
+
+  /**
+   * @type {import('vue').ComputedRef<FilterType[]>}
+   */
+  const filterTypes = computed(() => [
+    {
+      attributeKey: 'name',
+      value: 'name',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.NAME'),
+      label: t('CONTACTS_LAYOUT.FILTER.NAME'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'email',
+      value: 'email',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.EMAIL'),
+      label: t('CONTACTS_LAYOUT.FILTER.EMAIL'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'phone_number',
+      value: 'phone_number',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.PHONE_NUMBER'),
+      label: t('CONTACTS_LAYOUT.FILTER.PHONE_NUMBER'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'identifier',
+      value: 'identifier',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.IDENTIFIER'),
+      label: t('CONTACTS_LAYOUT.FILTER.IDENTIFIER'),
+      inputType: 'plainText',
+      dataType: 'number',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'country_code',
+      value: 'country_code',
+      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      inputType: 'searchSelect',
+      options: countries,
+      dataType: 'number',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'additional',
+    },
+    {
+      attributeKey: 'city',
+      value: 'city',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.CITY'),
+      label: t('CONTACTS_LAYOUT.FILTER.CITY'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'created_at',
+      value: 'created_at',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.CREATED_AT'),
+      label: t('CONTACTS_LAYOUT.FILTER.CREATED_AT'),
+      inputType: 'date',
+      dataType: 'text',
+      filterOperators: dateOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'last_activity_at',
+      value: 'last_activity_at',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.LAST_ACTIVITY'),
+      label: t('CONTACTS_LAYOUT.FILTER.LAST_ACTIVITY'),
+      inputType: 'date',
+      dataType: 'text',
+      filterOperators: dateOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'referer',
+      value: 'referer',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.REFERER_LINK'),
+      label: t('CONTACTS_LAYOUT.FILTER.REFERER_LINK'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'blocked',
+      value: 'blocked',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.BLOCKED'),
+      label: t('CONTACTS_LAYOUT.FILTER.BLOCKED'),
+      inputType: 'searchSelect',
+      options: [
+        {
+          id: 'true',
+          name: t('CONTACTS_LAYOUT.FILTER.BLOCKED_TRUE'),
+        },
+        {
+          id: 'false',
+          name: t('CONTACTS_LAYOUT.FILTER.BLOCKED_FALSE'),
+        },
+      ],
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    ...customFilterTypes.value,
+  ]);
+
+  return { filterTypes };
+}
diff --git a/app/javascript/dashboard/components-next/filter/helper/filterHelper.js b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
new file mode 100644
index 000000000..f1fc0c452
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
@@ -0,0 +1,41 @@
+/**
+ * Determines the input type for a custom attribute based on its key
+ * @param {string} key - The attribute display type key
+ * @returns {'date'|'plainText'|'searchSelect'|'booleanSelect'} The corresponding input type
+ */
+export const getCustomAttributeInputType = key => {
+  switch (key) {
+    case 'date':
+      return 'date';
+    case 'text':
+      return 'plainText';
+    case 'list':
+      return 'searchSelect';
+    case 'checkbox':
+      return 'booleanSelect';
+    default:
+      return 'plainText';
+  }
+};
+
+/**
+ * Builds filter types for custom attributes
+ * @param {Array} attributes - The attributes array
+ * @param {Function} getOperatorTypes - Function to get operator types
+ * @returns {Array} Array of filter types
+ */
+export const buildAttributesFilterTypes = (attributes, getOperatorTypes) => {
+  return attributes.map(attr => ({
+    attributeKey: attr.attributeKey,
+    value: attr.attributeKey,
+    attributeName: attr.attributeDisplayName,
+    label: attr.attributeDisplayName,
+    inputType: getCustomAttributeInputType(attr.attributeDisplayType),
+    filterOperators: getOperatorTypes(attr.attributeDisplayType),
+    options:
+      attr.attributeDisplayType === 'list'
+        ? attr.attributeValues.map(item => ({ id: item, name: item }))
+        : [],
+    attributeModel: 'customAttributes',
+  }));
+};
diff --git a/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js b/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
new file mode 100644
index 000000000..7db5cb2d2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
@@ -0,0 +1,126 @@
+import {
+  getCustomAttributeInputType,
+  buildAttributesFilterTypes,
+} from './filterHelper';
+
+describe('filterHelper', () => {
+  describe('getCustomAttributeInputType', () => {
+    it('returns date for date type', () => {
+      expect(getCustomAttributeInputType('date')).toBe('date');
+    });
+
+    it('returns plainText for text type', () => {
+      expect(getCustomAttributeInputType('text')).toBe('plainText');
+    });
+
+    it('returns searchSelect for list type', () => {
+      expect(getCustomAttributeInputType('list')).toBe('searchSelect');
+    });
+
+    it('returns booleanSelect for checkbox type', () => {
+      expect(getCustomAttributeInputType('checkbox')).toBe('booleanSelect');
+    });
+
+    it('returns plainText for unknown type', () => {
+      expect(getCustomAttributeInputType('unknown')).toBe('plainText');
+    });
+  });
+
+  describe('buildAttributesFilterTypes', () => {
+    const mockGetOperatorTypes = type => {
+      return type === 'list' ? ['is', 'is_not'] : ['contains', 'not_contains'];
+    };
+
+    it('builds filter types for text attributes', () => {
+      const attributes = [
+        {
+          attributeKey: 'test_key',
+          attributeDisplayName: 'Test Name',
+          attributeDisplayType: 'text',
+          attributeValues: [],
+        },
+      ];
+
+      const result = buildAttributesFilterTypes(
+        attributes,
+        mockGetOperatorTypes
+      );
+
+      expect(result).toEqual([
+        {
+          attributeKey: 'test_key',
+          value: 'test_key',
+          attributeName: 'Test Name',
+          label: 'Test Name',
+          inputType: 'plainText',
+          filterOperators: ['contains', 'not_contains'],
+          options: [],
+          attributeModel: 'customAttributes',
+        },
+      ]);
+    });
+
+    it('builds filter types for list attributes with options', () => {
+      const attributes = [
+        {
+          attributeKey: 'list_key',
+          attributeDisplayName: 'List Name',
+          attributeDisplayType: 'list',
+          attributeValues: ['option1', 'option2'],
+        },
+      ];
+
+      const result = buildAttributesFilterTypes(
+        attributes,
+        mockGetOperatorTypes
+      );
+
+      expect(result).toEqual([
+        {
+          attributeKey: 'list_key',
+          value: 'list_key',
+          attributeName: 'List Name',
+          label: 'List Name',
+          inputType: 'searchSelect',
+          filterOperators: ['is', 'is_not'],
+          options: [
+            { id: 'option1', name: 'option1' },
+            { id: 'option2', name: 'option2' },
+          ],
+          attributeModel: 'customAttributes',
+        },
+      ]);
+    });
+
+    it('handles multiple attributes', () => {
+      const attributes = [
+        {
+          attributeKey: 'date_key',
+          attributeDisplayName: 'Date Name',
+          attributeDisplayType: 'date',
+          attributeValues: [],
+        },
+        {
+          attributeKey: 'checkbox_key',
+          attributeDisplayName: 'Checkbox Name',
+          attributeDisplayType: 'checkbox',
+          attributeValues: [],
+        },
+      ];
+
+      const result = buildAttributesFilterTypes(
+        attributes,
+        mockGetOperatorTypes
+      );
+
+      expect(result).toHaveLength(2);
+      expect(result[0].inputType).toBe('date');
+      expect(result[1].inputType).toBe('booleanSelect');
+    });
+
+    it('handles empty attributes array', () => {
+      const result = buildAttributesFilterTypes([], mockGetOperatorTypes);
+      expect(result).toEqual([]);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/components-next/filter/provider.js b/app/javascript/dashboard/components-next/filter/provider.js
index 267732f76..bb775a663 100644
--- a/app/javascript/dashboard/components-next/filter/provider.js
+++ b/app/javascript/dashboard/components-next/filter/provider.js
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useOperators } from './operators';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useChannelIcon } from 'next/icon/provider';
+import { buildAttributesFilterTypes } from './helper/filterHelper';
 import countries from 'shared/constants/countries.js';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
 
@@ -40,26 +41,6 @@ import languages from 'dashboard/components/widgets/conversation/advancedFilterI
  * @property {FilterType[]} attributes
  */
 
-/**
- * Determines the input type for a custom attribute based on its key
- * @param {string} key - The attribute display type key
- * @returns {'date'|'plainText'|'searchSelect'|'booleanSelect'} The corresponding input type
- */
-const customAttributeInputType = key => {
-  switch (key) {
-    case 'date':
-      return 'date';
-    case 'text':
-      return 'plainText';
-    case 'list':
-      return 'searchSelect';
-    case 'checkbox':
-      return 'booleanSelect';
-    default:
-      return 'plainText';
-  }
-};
-
 /**
  * Composable that provides conversation filtering context
  * @returns {{ filterTypes: import('vue').ComputedRef<FilterType[]>, filterGroups: import('vue').ComputedRef<FilterGroup[]> }}
@@ -88,23 +69,9 @@ export function useConversationFilterContext() {
   /**
    * @type {import('vue').ComputedRef<FilterType[]>}
    */
-  const customFilterTypes = computed(() => {
-    return conversationAttributes.value.map(attr => {
-      return {
-        attributeKey: attr.attributeKey,
-        value: attr.attributeKey,
-        attributeName: attr.attributeDisplayName,
-        label: attr.attributeDisplayName,
-        inputType: customAttributeInputType(attr.attributeDisplayType),
-        filterOperators: getOperatorTypes(attr.attributeDisplayType),
-        options:
-          attr.attributeDisplayType === 'list'
-            ? attr.attributeValues.map(item => ({ id: item, name: item }))
-            : [],
-        attributeModel: 'customAttributes',
-      };
-    });
-  });
+  const customFilterTypes = computed(() =>
+    buildAttributesFilterTypes(conversationAttributes.value, getOperatorTypes)
+  );
 
   /**
    * @type {import('vue').ComputedRef<FilterType[]>}
@@ -272,28 +239,5 @@ export function useConversationFilterContext() {
     ...customFilterTypes.value,
   ]);
 
-  const filterGroups = computed(() => {
-    return [
-      {
-        name: t(`FILTER.GROUPS.STANDARD_FILTERS`),
-        attributes: filterTypes.value.filter(
-          filter => filter.attributeModel === 'standard'
-        ),
-      },
-      {
-        name: t(`FILTER.GROUPS.ADDITIONAL_FILTERS`),
-        attributes: filterTypes.value.filter(
-          filter => filter.attributeModel === 'additional'
-        ),
-      },
-      {
-        name: t(`FILTER.GROUPS.CUSTOM_ATTRIBUTES`),
-        attributes: filterTypes.value.filter(
-          filter => filter.attributeModel === 'customAttributes'
-        ),
-      },
-    ];
-  });
-
-  return { filterTypes, filterGroups };
+  return { filterTypes };
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index fcb3c03ac..a99a78eb2 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -466,6 +466,37 @@
     "PAGINATION_FOOTER": {
       "SHOWING": "Showing {startItem} - {endItem} of {totalItems} contacts"
     },
+    "FILTER": {
+      "NAME": "Name",
+      "EMAIL": "Email",
+      "PHONE_NUMBER": "Phone number",
+      "IDENTIFIER": "Identifier",
+      "COUNTRY": "Country",
+      "CITY": "City",
+      "CREATED_AT": "Created at",
+      "LAST_ACTIVITY": "Last activity",
+      "REFERER_LINK": "Referer link",
+      "BLOCKED": "Blocked",
+      "BLOCKED_TRUE": "True",
+      "BLOCKED_FALSE": "False",
+      "BUTTONS": {
+        "CLEAR_FILTERS": "Clear filters",
+        "UPDATE_SEGMENT": "Update segment",
+        "APPLY_FILTERS": "Apply filters",
+        "ADD_FILTER": "Add filter"
+      },
+      "TITLE": "Filter contacts",
+      "EDIT_SEGMENT": "Edit segment",
+      "SEGMENT": {
+        "LABEL": "Segment name",
+        "INPUT_PLACEHOLDER": "Enter the name of the segment"
+      },
+      "GROUPS": {
+        "STANDARD_FILTERS": "Standard filters",
+        "ADDITIONAL_FILTERS": "Additional filters",
+        "CUSTOM_ATTRIBUTES": "Custom attributes"
+      }
+    },
     "CARD": {
       "OF": "of",
       "VIEW_DETAILS": "View details",
diff --git a/app/javascript/dashboard/store/modules/contacts/getters.js b/app/javascript/dashboard/store/modules/contacts/getters.js
index 4c6d98f13..06278d878 100644
--- a/app/javascript/dashboard/store/modules/contacts/getters.js
+++ b/app/javascript/dashboard/store/modules/contacts/getters.js
@@ -23,4 +23,7 @@ export const getters = {
   getAppliedContactFilters: _state => {
     return _state.appliedFilters;
   },
+  getAppliedContactFiltersV4: _state => {
+    return _state.appliedFilters.map(camelcaseKeys);
+  },
 };

From e95680e80057f4e06d9f8b2b0a54fe5f10c0e34c Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Mon, 2 Dec 2024 15:47:54 +0530
Subject: [PATCH 31/74] feat: remove stale ONLINE_PRESENCE contact keys in
 redis (#9558)

50% of Redis memory size comes from ONLINE_PRESENCE keys. This PR adds a
periodic job to remove stale keys from all accounts.
---
 app/jobs/internal/process_stale_redis_keys_job.rb  | 11 +++++++++++
 app/jobs/internal/remove_stale_redis_keys_job.rb   | 14 ++++++++++++++
 .../internal/remove_stale_redis_keys_service.rb    | 10 ++++++++++
 config/schedule.yml                                |  7 +++++++
 4 files changed, 42 insertions(+)
 create mode 100644 app/jobs/internal/process_stale_redis_keys_job.rb
 create mode 100644 app/jobs/internal/remove_stale_redis_keys_job.rb
 create mode 100644 app/services/internal/remove_stale_redis_keys_service.rb

diff --git a/app/jobs/internal/process_stale_redis_keys_job.rb b/app/jobs/internal/process_stale_redis_keys_job.rb
new file mode 100644
index 000000000..3afb3b434
--- /dev/null
+++ b/app/jobs/internal/process_stale_redis_keys_job.rb
@@ -0,0 +1,11 @@
+# housekeeping
+# remove contact inboxes that does not have any conversations
+# and are older than 3 months
+
+class Internal::ProcessStaleRedisKeysJob < ApplicationJob
+  queue_as :low
+
+  def perform(account)
+    Internal::RemoveStaleRedisKeysService.new(account_id: account.id).perform
+  end
+end
diff --git a/app/jobs/internal/remove_stale_redis_keys_job.rb b/app/jobs/internal/remove_stale_redis_keys_job.rb
new file mode 100644
index 000000000..667fa398b
--- /dev/null
+++ b/app/jobs/internal/remove_stale_redis_keys_job.rb
@@ -0,0 +1,14 @@
+# housekeeping
+# ensure stale ONLINE PRESENCE KEYS for contacts are removed periodically
+# should result in 50% redis mem size reduction
+
+class Internal::RemoveStaleRedisKeysJob < ApplicationJob
+  queue_as :scheduled_jobs
+
+  def perform
+    Account.find_each do |account|
+      Rails.logger.info "Enqueuing ProcessStaleRedisKeysJob for account #{account.id}"
+      Internal::ProcessStaleRedisKeysJob.perform_later(account)
+    end
+  end
+end
diff --git a/app/services/internal/remove_stale_redis_keys_service.rb b/app/services/internal/remove_stale_redis_keys_service.rb
new file mode 100644
index 000000000..a3e1da207
--- /dev/null
+++ b/app/services/internal/remove_stale_redis_keys_service.rb
@@ -0,0 +1,10 @@
+class Internal::RemoveStaleRedisKeysService
+  pattr_initialize [:account_id!]
+
+  def perform(account_id)
+    range_start = (Time.zone.now - PRESENCE_DURATION).to_i
+    # exclusive minimum score is specified by prefixing (
+    # we are clearing old records because this could clogg up the sorted set
+    ::Redis::Alfred.zremrangebyscore(presence_key(account_id, 'Contact'), '-inf', "(#{range_start}")
+  end
+end
diff --git a/config/schedule.yml b/config/schedule.yml
index 7a0d2faeb..a92960db8 100644
--- a/config/schedule.yml
+++ b/config/schedule.yml
@@ -26,3 +26,10 @@ remove_stale_contact_inboxes_job.rb:
   cron: '30 22 * * *'
   class: 'Internal::RemoveStaleContactInboxesJob'
   queue: scheduled_jobs
+
+# executed daily at 2230 UTC
+# which is our lowest traffic time
+remove_stale_redis_keys_job.rb:
+  cron: '30 22 * * *'
+  class: 'Internal::RemoveStaleRedisKeysJob'
+  queue: scheduled_jobs

From 0ab7accd3fe3c99e877882841156bffcc1b00fe1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 2 Dec 2024 16:22:05 +0530
Subject: [PATCH 32/74] feat: Contact filter preview (#10516)

# Pull Request Template

## Description

**Screenshots**
<img width="986" alt="image"
src="https://github.com/user-attachments/assets/8df44237-ec51-45d3-aed3-518cded42f5d">

<img width="986" alt="image"
src="https://github.com/user-attachments/assets/2213ce2e-2461-41f0-a05a-0f955a4d7e3a">

**Story**
<img width="992" alt="image"
src="https://github.com/user-attachments/assets/f8e25fe2-11e8-4b9b-8d0b-357f9b7b6e39">
---
 .../Contacts/ContactsHeader/ContactHeader.vue |   4 +-
 .../ContactListHeaderWrapper.vue              |   1 -
 .../ContactsActiveFiltersPreview.vue          |  29 +++++
 .../Contacts/ContactsListLayout.vue           |   7 +-
 .../Contacts/Pages/ContactsList.vue           |   2 +-
 .../HelpCenter/HelpCenterLayout.vue           |   1 +
 .../ArticleEditorControls.vue                 |   3 +
 .../ArticleEditorProperties.vue               |   1 +
 .../PortalSwitcher/PortalSwitcher.vue         |   2 +
 .../components-next/button/Button.story.vue   |   9 +-
 .../components-next/button/Button.vue         |   7 +-
 .../filter/ActiveFilterPreview.story.vue      |  66 ++++++++++
 .../filter/ActiveFilterPreview.vue            | 117 ++++++++++++++++++
 .../filter/fixtures/filterTypes.js            |  45 +++++++
 .../filter/helper/filterHelper.js             |   8 ++
 .../filter/helper/filterHelper.spec.js        |  11 ++
 .../pagination/PaginationFooter.vue           |   4 +
 .../dashboard/i18n/locale/en/contact.json     |   7 +-
 .../contacts/pages/ContactsIndex.vue          |   1 +
 19 files changed, 313 insertions(+), 12 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index b5511f7e0..6e32b8581 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -54,9 +54,9 @@ const emit = defineEmits([
 </script>
 
 <template>
-  <header class="sticky top-0 z-10 px-6 xl:px-0">
+  <header class="sticky top-0 z-10">
     <div
-      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[960px]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
index d9ea3982e..5b27bcf17 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -176,7 +176,6 @@ const closeAdvanceFiltersModal = () => {
 };
 
 const clearFilters = async () => {
-  await store.dispatch('contacts/clearContactFilters');
   emit('clearFilters');
 };
 
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
new file mode 100644
index 000000000..b70cfe72d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
+
+const emit = defineEmits(['clearFilters']);
+
+const { t } = useI18n();
+
+const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+</script>
+
+<template>
+  <ActiveFilterPreview
+    :applied-filters="appliedFilters"
+    :max-visible-filters="2"
+    :more-filters-label="
+      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
+        count: appliedFilters.length - 2,
+      })
+    "
+    :clear-button-label="
+      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
+    "
+    class="max-w-[960px] px-6"
+    @clear-filters="emit('clearFilters')"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
index d408a314a..1727cf21b 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue';
+import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 
 defineProps({
@@ -90,8 +91,12 @@ const updateCurrentPage = page => {
         @apply-filter="emit('applyFilter', $event)"
         @clear-filters="emit('clearFilters')"
       />
-      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
+      <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[960px]">
+          <ContactsActiveFiltersPreview
+            v-if="hasAppliedFilters && isNotSegmentView"
+            @clear-filters="emit('clearFilters')"
+          />
           <slot name="default" />
         </div>
       </main>
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
index 02e86d4de..1ca94ecaf 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -58,7 +58,7 @@ const toggleExpanded = id => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 p-6">
+  <div class="flex flex-col gap-4 px-6 pt-4 pb-6">
     <ContactsCard
       v-for="contact in contacts"
       :id="contact.id"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index b05d5d3f2..9e3c9ee1e 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -76,6 +76,7 @@ const togglePortalSwitcher = () => {
               <Button
                 icon="i-lucide-chevron-down"
                 variant="ghost"
+                color="slate"
                 size="xs"
                 class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
                 @click="togglePortalSwitcher"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
index 6b2c3543d..d46fb5264 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -182,6 +182,7 @@ onMounted(() => {
       <OnClickOutside @trigger="openAgentsList = false">
         <Button
           variant="ghost"
+          color="slate"
           class="!px-0 font-normal hover:!bg-transparent"
           text-variant="info"
           @click="openAgentsList = !openAgentsList"
@@ -214,6 +215,7 @@ onMounted(() => {
           "
           :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
           variant="ghost"
+          color="slate"
           class="!px-2 font-normal hover:!bg-transparent"
           @click="openCategoryList = !openCategoryList"
         >
@@ -244,6 +246,7 @@ onMounted(() => {
           "
           icon="i-lucide-plus"
           variant="ghost"
+          color="slate"
           :disabled="isNewArticle"
           class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
           @click="openProperties = !openProperties"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
index 0a49be942..e957948b2 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -66,6 +66,7 @@ onMounted(() => {
         icon="i-lucide-x"
         size="sm"
         variant="ghost"
+        color="slate"
         class="hover:text-n-slate-11"
         @click="emit('close')"
       />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index a182c78d3..1b4668b91 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -108,6 +108,7 @@ const redirectToPortalHomePage = () => {
           <Button
             icon="i-lucide-arrow-up-right"
             variant="ghost"
+            color="slate"
             icon-lib="lucide"
             size="sm"
             class="!w-6 !h-6 hover:bg-n-slate-2 text-n-slate-11 !p-0.5 rounded-md"
@@ -133,6 +134,7 @@ const redirectToPortalHomePage = () => {
         :key="index"
         :label="portal.name"
         variant="ghost"
+        color="slate"
         trailing-icon
         :icon="isPortalActive(portal) ? 'i-lucide-check' : ''"
         class="!justify-end !px-2 !py-2 hover:!bg-n-alpha-2 [&>.i-lucide-check]:text-n-teal-10 h-9"
diff --git a/app/javascript/dashboard/components-next/button/Button.story.vue b/app/javascript/dashboard/components-next/button/Button.story.vue
index fc0904156..404712b34 100644
--- a/app/javascript/dashboard/components-next/button/Button.story.vue
+++ b/app/javascript/dashboard/components-next/button/Button.story.vue
@@ -114,8 +114,13 @@ const SIZES = ['default', 'sm', 'lg'];
     <!-- Ghost & Link Variants -->
     <Variant title="Ghost & Link Variants">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Ghost Button" variant="ghost" />
-        <Button label="Ghost with Icon" variant="ghost" icon="i-lucide-plus" />
+        <Button label="Ghost Button" variant="ghost" color="slate" />
+        <Button
+          label="Ghost with Icon"
+          variant="ghost"
+          color="slate"
+          icon="i-lucide-plus"
+        />
         <Button label="Link Button" variant="link" />
         <Button label="Link with Icon" variant="link" icon="i-lucide-plus" />
       </div>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index b174ca375..fecdbaf9b 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -88,6 +88,7 @@ const STYLE_CONFIG = {
       faded:
         'bg-n-brand/10 text-n-blue-text hover:bg-n-brand/20 outline-transparent',
       outline: 'text-n-blue-text outline-n-blue-border',
+      ghost: 'text-n-blue-text hover:bg-n-alpha-2 outline-transparent',
       link: 'text-n-blue-text hover:underline outline-transparent',
     },
     ruby: {
@@ -95,6 +96,7 @@ const STYLE_CONFIG = {
       faded:
         'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent',
       outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8',
+      ghost: 'text-n-ruby-11 hover:bg-n-alpha-2 outline-transparent',
       link: 'text-n-ruby-9 hover:underline outline-transparent',
     },
     amber: {
@@ -103,6 +105,7 @@ const STYLE_CONFIG = {
         'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent',
       outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9',
       link: 'text-n-amber-9 hover:underline outline-transparent',
+      ghost: 'text-n-amber-9 hover:bg-n-alpha-2 outline-transparent',
     },
     slate: {
       solid:
@@ -111,6 +114,7 @@ const STYLE_CONFIG = {
         'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
       outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
       link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent',
+      ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
     },
     teal: {
       solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent',
@@ -118,6 +122,7 @@ const STYLE_CONFIG = {
         'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent',
       outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9',
       link: 'text-n-teal-9 hover:underline outline-transparent',
+      ghost: 'text-n-teal-9 hover:bg-n-alpha-2 outline-transparent',
     },
   },
   sizes: {
@@ -151,7 +156,7 @@ const STYLE_CONFIG = {
 
 const variantClasses = computed(() => {
   const variantMap = {
-    ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
+    ghost: `${STYLE_CONFIG.colors[computedColor.value].ghost}`,
     link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
     outline: STYLE_CONFIG.colors[computedColor.value].outline,
     faded: STYLE_CONFIG.colors[computedColor.value].faded,
diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue
new file mode 100644
index 000000000..0c79b97da
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { sampleActiveFilters } from './fixtures/filterTypes';
+import ActiveFilterPreview from './ActiveFilterPreview.vue';
+
+const appliedFilters = ref([...sampleActiveFilters]);
+const maxVisibleFilters = ref(2);
+
+const moreFiltersLabel = computed(
+  () => `${appliedFilters.value.length - maxVisibleFilters.value} more filters`
+);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/ActiveFilterPreview"
+    :layout="{ type: 'grid', width: '960px' }"
+  >
+    <Variant title="Default (2 visible filters)">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters.slice(0, 2)"
+        :max-visible-filters="2"
+        clear-button-label="Clear Filters"
+        more-filters-label=""
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Multiple Filters (with more indicator)">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        :more-filters-label="moreFiltersLabel"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Show All Filters">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters"
+        :max-visible-filters="10"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Single Filter">
+      <ActiveFilterPreview
+        :applied-filters="[appliedFilters[0]]"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="With Object Values">
+      <ActiveFilterPreview
+        :applied-filters="[appliedFilters[6]]"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
new file mode 100644
index 000000000..b35569a8b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { replaceUnderscoreWithSpace } from './helper/filterHelper.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  appliedFilters: {
+    type: Array,
+    default: () => [],
+  },
+  maxVisibleFilters: {
+    type: Number,
+    default: 2,
+  },
+  clearButtonLabel: {
+    type: String,
+    default: '',
+  },
+  moreFiltersLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['clearFilters']);
+
+const shouldCapitalizeFirstLetter = key => {
+  const lowercaseKeys = ['email'];
+  return !lowercaseKeys.includes(key);
+};
+
+const formatOperatorLabel = operator => {
+  const operators = {
+    equal_to: 'is',
+    not_equal_to: 'is not',
+    contains: 'contains',
+    does_not_contain: 'does not contain',
+    is_present: 'is present',
+    is_not_present: 'is not present',
+    is_greater_than: 'is greater than',
+    is_less_than: 'is less than',
+    days_before: 'days before',
+  };
+  return operators[operator] || replaceUnderscoreWithSpace(operator);
+};
+
+const formatFilterValue = value => {
+  if (!value) return '';
+  if (typeof value === 'object' && value.name) {
+    return value.name;
+  }
+  return value;
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center w-full gap-2 mx-auto">
+    <template
+      v-for="(filter, index) in appliedFilters"
+      :key="filter.attributeKey"
+    >
+      <div
+        v-if="index < maxVisibleFilters"
+        class="inline-flex items-center gap-2 h-7"
+      >
+        <div
+          class="flex items-center h-full min-w-0 gap-1 px-2 py-1 text-xs border rounded-lg max-w-72 border-n-weak"
+        >
+          <span
+            class="lowercase whitespace-nowrap first-letter:capitalize text-n-slate-12"
+          >
+            {{ replaceUnderscoreWithSpace(filter.attributeKey) }}
+          </span>
+          <span class="px-1 text-xs text-n-slate-10 whitespace-nowrap">
+            {{ formatOperatorLabel(filter.filterOperator) }}
+          </span>
+          <span
+            v-if="filter.values"
+            class="lowercase truncate text-n-slate-12"
+            :class="{
+              'first-letter:capitalize': shouldCapitalizeFirstLetter(
+                filter.attributeKey
+              ),
+            }"
+          >
+            {{ formatFilterValue(filter.values) }}
+          </span>
+        </div>
+        <template
+          v-if="
+            index < maxVisibleFilters - 1 && index < appliedFilters.length - 1
+          "
+        >
+          <span
+            class="content-center h-full px-1 text-xs font-medium uppercase rounded-lg text-n-slate-10"
+          >
+            {{ filter.queryOperator }}
+          </span>
+        </template>
+      </div>
+    </template>
+    <div
+      v-if="appliedFilters.length > maxVisibleFilters"
+      class="inline-flex items-center content-center px-1 text-xs rounded-lg text-n-slate-10 h-7"
+    >
+      {{ moreFiltersLabel }}
+    </div>
+    <div class="w-px h-3 rounded-lg bg-n-strong" />
+    <Button
+      :label="clearButtonLabel"
+      size="xs"
+      class="!px-1"
+      variant="ghost"
+      @click="emit('clearFilters')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
index fcec5eb08..0eb618535 100644
--- a/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
+++ b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
@@ -556,3 +556,48 @@ export const filterTypes = [
     attributeModel: 'customAttributes',
   },
 ];
+
+export const sampleActiveFilters = [
+  {
+    attributeKey: 'name',
+    filterOperator: 'contains',
+    values: 'John',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'email',
+    filterOperator: 'does_not_contain',
+    values: 'test@chatwoot.com',
+    queryOperator: 'or',
+  },
+  {
+    attributeKey: 'phone_number',
+    filterOperator: 'is_present',
+    values: '+928383822',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'created_at',
+    filterOperator: 'is_greater_than',
+    values: '2024-01-01',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'last_activity',
+    filterOperator: 'days_before',
+    values: '30',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'date_of_birth',
+    filterOperator: 'is_not_present',
+    values: '',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'country',
+    filterOperator: 'not_equal_to',
+    values: { id: 1, name: 'India' },
+    queryOperator: 'and',
+  },
+];
diff --git a/app/javascript/dashboard/components-next/filter/helper/filterHelper.js b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
index f1fc0c452..2160365f6 100644
--- a/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
@@ -39,3 +39,11 @@ export const buildAttributesFilterTypes = (attributes, getOperatorTypes) => {
     attributeModel: 'customAttributes',
   }));
 };
+
+/**
+ * Replaces underscores with spaces in a string
+ * @param {string} text - The input string
+ * @returns {string} The string with underscores replaced by spaces
+ */
+export const replaceUnderscoreWithSpace = text =>
+  text?.replaceAll('_', ' ') ?? '';
diff --git a/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js b/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
index 7db5cb2d2..58cf92cf3 100644
--- a/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
@@ -1,6 +1,7 @@
 import {
   getCustomAttributeInputType,
   buildAttributesFilterTypes,
+  replaceUnderscoreWithSpace,
 } from './filterHelper';
 
 describe('filterHelper', () => {
@@ -123,4 +124,14 @@ describe('filterHelper', () => {
       expect(result).toEqual([]);
     });
   });
+
+  describe('replaceUnderscoreWithSpace', () => {
+    it('replaces underscores with spaces', () => {
+      expect(replaceUnderscoreWithSpace('test_key')).toBe('test key');
+    });
+
+    it('returns empty string if input is null', () => {
+      expect(replaceUnderscoreWithSpace(null)).toBe('');
+    });
+  });
 });
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index a3324a618..4f6f47c85 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -75,6 +75,7 @@ const pageInfo = computed(() => {
         icon="i-lucide-chevrons-left"
         variant="ghost"
         size="sm"
+        color="slate"
         class="!w-8 !h-6"
         :disabled="isFirstPage"
         @click="changePage(1)"
@@ -82,6 +83,7 @@ const pageInfo = computed(() => {
       <Button
         icon="i-lucide-chevron-left"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isFirstPage"
@@ -96,6 +98,7 @@ const pageInfo = computed(() => {
       <Button
         icon="i-lucide-chevron-right"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isLastPage"
@@ -104,6 +107,7 @@ const pageInfo = computed(() => {
       <Button
         icon="i-lucide-chevrons-right"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isLastPage"
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index a99a78eb2..5a0257e0b 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -491,10 +491,9 @@
         "LABEL": "Segment name",
         "INPUT_PLACEHOLDER": "Enter the name of the segment"
       },
-      "GROUPS": {
-        "STANDARD_FILTERS": "Standard filters",
-        "ADDITIONAL_FILTERS": "Additional filters",
-        "CUSTOM_ATTRIBUTES": "Custom attributes"
+      "ACTIVE_FILTERS": {
+        "MORE_FILTERS": "+ {count} more filters",
+        "CLEAR_FILTERS": "Clear filters"
       }
     },
     "CARD": {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
index a54ea3c0d..af18ea684 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -118,6 +118,7 @@ const getCommonFetchParams = (page = 1) => ({
 });
 
 const fetchContacts = async (page = 1) => {
+  await store.dispatch('contacts/clearContactFilters');
   await store.dispatch('contacts/get', getCommonFetchParams(page));
   updatePageParam(page);
 };

From 86bd339a47f89ae61ed00545b815b9235bd1c925 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:16:33 -0800
Subject: [PATCH 33/74] chore(deps): bump vue-i18n from 9.14.0 to 9.14.2
 (#10526)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps
[vue-i18n](https://github.com/intlify/vue-i18n/tree/HEAD/packages/vue-i18n)
from 9.14.0 to 9.14.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/intlify/vue-i18n/releases">vue-i18n's
releases</a>.</em></p>
<blockquote>
<h2>v9.14.2</h2>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🔒 Security Fixes</h3>
<ul>
<li>fix: XSS vulnerability with prototype pollution on AST: <a
href="https://github.com/intlify/vue-i18n/security/advisories/GHSA-9r9m-ffp6-9x4v">https://github.com/intlify/vue-i18n/security/advisories/GHSA-9r9m-ffp6-9x4v</a></li>
<li>fix: prototype pollusion on deepCopy: <a
href="https://github.com/intlify/vue-i18n/security/advisories/GHSA-hjwq-mjwj-4x6c">https://github.com/intlify/vue-i18n/security/advisories/GHSA-hjwq-mjwj-4x6c</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v9.14.1...v9.14.2">https://github.com/intlify/vue-i18n/compare/v9.14.1...v9.14.2</a></p>
<h2>v9.14.1</h2>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🐛 Bug Fixes</h3>
<ul>
<li>fix: messages <code>deepCopy</code> mutates <code>src</code>
arguments by <a
href="https://github.com/BobbieGoede"><code>@​BobbieGoede</code></a> in
<a
href="https://redirect.github.com/intlify/vue-i18n/pull/1975">intlify/vue-i18n#1975</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v9.14.0...v9.14.1">https://github.com/intlify/vue-i18n/compare/v9.14.0...v9.14.1</a></p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/intlify/vue-i18n/commit/5448139375d123c90019f372404de6138ff6b588"><code>5448139</code></a>
release: v9.14.2</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/af67265181fa776dab006afbab85de6a47a34d66"><code>af67265</code></a>
release: v9.14.1</li>
<li>See full diff in <a
href="https://github.com/intlify/vue-i18n/commits/v9.14.2/packages/vue-i18n">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=vue-i18n&package-manager=npm_and_yarn&previous-version=9.14.0&new-version=9.14.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json   |  2 +-
 pnpm-lock.yaml | 40 ++++++++++++++++++++--------------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 8fe4b5657..5978f3696 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "vue-chartjs": "5.3.1",
     "vue-datepicker-next": "^1.0.3",
     "vue-dompurify-html": "^5.1.0",
-    "vue-i18n": "9.14.0",
+    "vue-i18n": "9.14.2",
     "vue-letter": "^0.2.0",
     "vue-multiselect": "3.1.0",
     "vue-router": "~4.4.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 679f94325..e11ba6920 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -194,8 +194,8 @@ importers:
         specifier: ^5.1.0
         version: 5.1.0(vue@3.5.12(typescript@5.6.2))
       vue-i18n:
-        specifier: 9.14.0
-        version: 9.14.0(vue@3.5.12(typescript@5.6.2))
+        specifier: 9.14.2
+        version: 9.14.2(vue@3.5.12(typescript@5.6.2))
       vue-letter:
         specifier: ^0.2.0
         version: 0.2.0
@@ -905,16 +905,16 @@ packages:
   '@internationalized/number@3.5.4':
     resolution: {integrity: sha512-h9huwWjNqYyE2FXZZewWqmCdkw1HeFds5q4Siuoms3hUQC5iPJK3aBmkFZoDSLN4UD0Bl8G22L/NdHpeOr+/7A==}
 
-  '@intlify/core-base@9.14.0':
-    resolution: {integrity: sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==}
+  '@intlify/core-base@9.14.2':
+    resolution: {integrity: sha512-DZyQ4Hk22sC81MP4qiCDuU+LdaYW91A6lCjq8AWPvY3+mGMzhGDfOCzvyR6YBQxtlPjFqMoFk9ylnNYRAQwXtQ==}
     engines: {node: '>= 16'}
 
-  '@intlify/message-compiler@9.14.0':
-    resolution: {integrity: sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==}
+  '@intlify/message-compiler@9.14.2':
+    resolution: {integrity: sha512-YsKKuV4Qv4wrLNsvgWbTf0E40uRv+Qiw1BeLQ0LAxifQuhiMe+hfTIzOMdWj/ZpnTDj4RSZtkXjJM7JDiiB5LQ==}
     engines: {node: '>= 16'}
 
-  '@intlify/shared@9.14.0':
-    resolution: {integrity: sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==}
+  '@intlify/shared@9.14.2':
+    resolution: {integrity: sha512-uRAHAxYPeF+G5DBIboKpPgC/Waecd4Jz8ihtkpJQD5ycb5PwXp0k/+hBGl5dAjwF7w+l74kz/PKA8r8OK//RUw==}
     engines: {node: '>= 16'}
 
   '@isaacs/cliui@8.0.2':
@@ -4934,8 +4934,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-i18n@9.14.0:
-    resolution: {integrity: sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==}
+  vue-i18n@9.14.2:
+    resolution: {integrity: sha512-JK9Pm80OqssGJU2Y6F7DcM8RFHqVG4WkuCqOZTVsXkEzZME7ABejAUqUdA931zEBedc4thBgSUWxeQh4uocJAQ==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
@@ -5770,17 +5770,17 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.15
 
-  '@intlify/core-base@9.14.0':
+  '@intlify/core-base@9.14.2':
     dependencies:
-      '@intlify/message-compiler': 9.14.0
-      '@intlify/shared': 9.14.0
+      '@intlify/message-compiler': 9.14.2
+      '@intlify/shared': 9.14.2
 
-  '@intlify/message-compiler@9.14.0':
+  '@intlify/message-compiler@9.14.2':
     dependencies:
-      '@intlify/shared': 9.14.0
+      '@intlify/shared': 9.14.2
       source-map-js: 1.2.1
 
-  '@intlify/shared@9.14.0': {}
+  '@intlify/shared@9.14.2': {}
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -10406,11 +10406,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.14.0(vue@3.5.12(typescript@5.6.2)):
+  vue-i18n@9.14.2(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      '@intlify/core-base': 9.14.0
-      '@intlify/shared': 9.14.0
-      '@vue/devtools-api': 6.6.3
+      '@intlify/core-base': 9.14.2
+      '@intlify/shared': 9.14.2
+      '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.6.2)
 
   vue-letter@0.2.0:

From 062587487a87c7dc7558bdafbb38bbe8e44dd6c7 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 3 Dec 2024 07:53:41 +0530
Subject: [PATCH 34/74] feat: Improve Contact list (#10522)

---
 .../Contacts/ContactsForm/ContactsForm.vue    |  7 +-
 .../ContactsForm/CreateNewContactDialog.vue   |  7 +-
 .../ContactListHeaderWrapper.vue              | 76 ++++++++++---------
 .../phonenumberinput/PhoneNumberInput.vue     |  9 ++-
 .../dashboard/i18n/locale/en/contact.json     |  6 +-
 .../dashboard/store/modules/customViews.js    |  1 +
 6 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 1813f1057..90329b311 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -214,6 +214,10 @@ const resetValidation = () => {
   v$.value.$reset();
 };
 
+const resetForm = () => {
+  Object.assign(state, defaultState);
+};
+
 watch(() => props.contactData, prepareStateBasedOnProps, {
   immediate: true,
   deep: true,
@@ -224,6 +228,7 @@ defineExpose({
   state,
   resetValidation,
   isFormInvalid,
+  resetForm,
 });
 </script>
 
@@ -261,7 +266,7 @@ defineExpose({
             :placeholder="item.placeholder"
             :message-type="getMessageType(item.key)"
             :custom-input-class="`h-8 !pt-1 !pb-1 ${
-              !isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
+              !isDetailsView ? '[&:not(.error,.focus)]:!border-transparent' : ''
             }`"
             class="w-full"
             @input="
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
index 1a9f183e8..806fcf4ac 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
@@ -27,11 +27,16 @@ const handleDialogConfirm = async () => {
   emit('create', contact.value);
 };
 
+const onSuccess = () => {
+  contactsFormRef.value?.resetForm();
+  dialogRef.value.close();
+};
+
 const closeDialog = () => {
   dialogRef.value.close();
 };
 
-defineExpose({ dialogRef, contactsFormRef });
+defineExpose({ dialogRef, contactsFormRef, onSuccess });
 </script>
 
 <template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
index 5b27bcf17..4905e8eee 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -7,6 +7,10 @@ import { useAlert, useTrack } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
 import contactFilterItems from 'dashboard/routes/dashboard/contacts/contactFilterItems';
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
 import countries from 'shared/constants/countries';
 import {
@@ -23,38 +27,14 @@ import DeleteSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm
 import ContactsFilter from 'dashboard/components-next/filter/ContactsFilter.vue';
 
 const props = defineProps({
-  showSearch: {
-    type: Boolean,
-    default: true,
-  },
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  activeSort: {
-    type: String,
-    default: 'last_activity_at',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  headerTitle: {
-    type: String,
-    default: '',
-  },
-  segmentsId: {
-    type: [String, Number],
-    default: 0,
-  },
-  activeSegment: {
-    type: Object,
-    default: null,
-  },
-  hasAppliedFilters: {
-    type: Boolean,
-    default: false,
-  },
+  showSearch: { type: Boolean, default: true },
+  searchValue: { type: String, default: '' },
+  activeSort: { type: String, default: 'last_activity_at' },
+  activeOrdering: { type: String, default: '' },
+  headerTitle: { type: String, default: '' },
+  segmentsId: { type: [String, Number], default: 0 },
+  activeSegment: { type: Object, default: null },
+  hasAppliedFilters: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -99,8 +79,26 @@ const openDeleteSegmentDialog = () =>
   deleteSegmentDialogRef.value?.dialogRef.open();
 
 const onCreate = async contact => {
-  await store.dispatch('contacts/create', contact);
-  createNewContactDialogRef.value?.dialogRef.close();
+  try {
+    await store.dispatch('contacts/create', contact);
+    createNewContactDialogRef.value?.onSuccess();
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    const i18nPrefix = 'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION';
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('email')) {
+        useAlert(t(`${i18nPrefix}.EMAIL_ADDRESS_DUPLICATE`));
+      } else if (error.data.includes('phone_number')) {
+        useAlert(t(`${i18nPrefix}.PHONE_NUMBER_DUPLICATE`));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t(`${i18nPrefix}.ERROR_MESSAGE`));
+    }
+  }
 };
 
 const onImport = async file => {
@@ -135,11 +133,19 @@ const onCreateSegment = async payload => {
       ...payload,
       query: segmentsQuery.value,
     };
-    await store.dispatch('customViews/create', payloadData);
+    const response = await store.dispatch('customViews/create', payloadData);
     createSegmentDialogRef.value?.dialogRef.close();
     useAlert(
       t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.SUCCESS_MESSAGE')
     );
+    const segmentId = response?.data?.id;
+    if (!segmentId) return;
+    // Navigate to the created segment
+    router.push({
+      name: 'contacts_dashboard_segments_index',
+      params: { segmentId },
+      query: { page: 1 },
+    });
   } catch {
     useAlert(
       t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.ERROR_MESSAGE')
diff --git a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
index 5168bb4b3..e523c306b 100644
--- a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
@@ -91,13 +91,18 @@ const activeCountry = computed(() =>
 const inputBorderClass = computed(() => {
   const errorClass =
     'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
+  const focusClass =
+    'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand';
+
   if (!props.showBorder) {
-    return hasError.value ? errorClass : 'border-transparent';
+    if (hasError.value) return errorClass;
+    return `border-transparent ${focusClass}`;
   }
+
   if (hasError.value) {
     return errorClass;
   }
-  return 'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
+  return `${focusClass} border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak`;
 });
 
 const phoneNumberError = computed(() => {
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 5a0257e0b..aad3a5a06 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -401,7 +401,11 @@
           "ADD_CONTACT": "Add contact",
           "EXPORT_CONTACT": "Export contacts",
           "IMPORT_CONTACT": "Import contacts",
-          "SAVE_CONTACT": "Save contact"
+          "SAVE_CONTACT": "Save contact",
+          "EMAIL_ADDRESS_DUPLICATE": "This email address is in use for another contact.",
+          "PHONE_NUMBER_DUPLICATE": "This phone number is in use for another contact.",
+          "SUCCESS_MESSAGE": "Contact saved successfully",
+          "ERROR_MESSAGE": "Unable to save contact. Please try again later."
         },
         "IMPORT_CONTACT": {
           "TITLE": "Import contacts",
diff --git a/app/javascript/dashboard/store/modules/customViews.js b/app/javascript/dashboard/store/modules/customViews.js
index 9c7f6f0ff..a69bc2c17 100644
--- a/app/javascript/dashboard/store/modules/customViews.js
+++ b/app/javascript/dashboard/store/modules/customViews.js
@@ -70,6 +70,7 @@ export const actions = {
         data: response.data,
         filterType: FILTER_KEYS[obj.filter_type],
       });
+      return response;
     } catch (error) {
       const errorMessage = error?.response?.data?.message;
       throw new Error(errorMessage);

From 50e7ceb19bdb9ae776709569222f3dae505de4fc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:23:58 -0800
Subject: [PATCH 35/74] chore(deps): bump rails-html-sanitizer from 1.6.0 to
 1.6.1 (#10528)

Bumps
[rails-html-sanitizer](https://github.com/rails/rails-html-sanitizer)
from 1.6.0 to 1.6.1.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/rails/rails-html-sanitizer/releases">rails-html-sanitizer's
releases</a>.</em></p>
<blockquote>
<h2>1.6.1 / 2024-12-02</h2>
<p>This is a performance and security release which addresses several
possible XSS vulnerabilities.</p>
<ul>
<li>
<p>The dependency on Nokogiri is updated to v1.15.7 or &gt;=1.16.8.</p>
<p>This change addresses CVE-2024-53985 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-w8gc-x259-rc7x">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-w8gc-x259-rc7x</a>).</p>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>Disallowed tags will be pruned when they appear in foreign content
(i.e. SVG or MathML content),
regardless of the <code>prune:</code> option value. Previously,
disallowed tags were &quot;stripped&quot; unless the
gem was configured with the <code>prune: true</code> option.</p>
<p>The CVEs addressed by this change are:</p>
<ul>
<li>CVE-2024-53986 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-638j-pmjw-jq48">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-638j-pmjw-jq48</a>)</li>
<li>CVE-2024-53987 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-2x5m-9ch4-qgrr">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-2x5m-9ch4-qgrr</a>)</li>
</ul>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>The tags &quot;noscript&quot;, &quot;mglyph&quot;, and
&quot;malignmark&quot; will not be allowed, even if explicitly added to
the allowlist. If applications try to allow any of these tags, a warning
is emitted and the tags
are removed from the allow-list.</p>
<p>The CVEs addressed by this change are:</p>
<ul>
<li>CVE-2024-53988 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-cfjx-w229-hgx5">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-cfjx-w229-hgx5</a>)</li>
<li>CVE-2024-53989 (<a
href="https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-rxv5-gxqc-xx8g">https://github.com/rails/rails-html-sanitizer/security/advisories/GHSA-rxv5-gxqc-xx8g</a>)</li>
</ul>
<p>Please note that we <em>may</em> restore support for allowing
&quot;noscript&quot; in a future release. We do not
expect to ever allow &quot;mglyph&quot; or &quot;malignmark&quot;,
though, especially since browser support is minimal
for these tags.</p>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>Improve performance by eliminating needless operations on attributes
that are being removed. <a
href="https://redirect.github.com/rails/rails-html-sanitizer/issues/188">#188</a></p>
<p><em>Mike Dalessio</em></p>
</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/rails/rails-html-sanitizer/blob/main/CHANGELOG.md">rails-html-sanitizer's
changelog</a>.</em></p>
<blockquote>
<h2>1.6.1 / 2024-12-02</h2>
<p>This is a performance and security release which addresses several
possible XSS vulnerabilities.</p>
<ul>
<li>
<p>The dependency on Nokogiri is updated to v1.15.7 or &gt;=1.16.8.</p>
<p>This change addresses CVE-2024-53985 (GHSA-w8gc-x259-rc7x).</p>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>Disallowed tags will be pruned when they appear in foreign content
(i.e. SVG or MathML content),
regardless of the <code>prune:</code> option value. Previously,
disallowed tags were &quot;stripped&quot; unless the
gem was configured with the <code>prune: true</code> option.</p>
<p>The CVEs addressed by this change are:</p>
<ul>
<li>CVE-2024-53986 (GHSA-638j-pmjw-jq48)</li>
<li>CVE-2024-53987 (GHSA-2x5m-9ch4-qgrr)</li>
</ul>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>The tags &quot;noscript&quot;, &quot;mglyph&quot;, and
&quot;malignmark&quot; will not be allowed, even if explicitly added to
the allowlist. If applications try to allow any of these tags, a warning
is emitted and the tags
are removed from the allow-list.</p>
<p>The CVEs addressed by this change are:</p>
<ul>
<li>CVE-2024-53988 (GHSA-cfjx-w229-hgx5)</li>
<li>CVE-2024-53989 (GHSA-rxv5-gxqc-xx8g)</li>
</ul>
<p>Please note that we <em>may</em> restore support for allowing
&quot;noscript&quot; in a future release. We do not
expect to ever allow &quot;mglyph&quot; or &quot;malignmark&quot;,
though, especially since browser support is minimal
for these tags.</p>
<p><em>Mike Dalessio</em></p>
</li>
<li>
<p>Improve performance by eliminating needless operations on attributes
that are being removed. <a
href="https://redirect.github.com/rails/rails-html-sanitizer/issues/188">#188</a></p>
<p><em>Mike Dalessio</em></p>
</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/5e96b19bbb934284e675109851bd82429622bb6e"><code>5e96b19</code></a>
version bump to v1.6.1</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/383cc7c17f5a6aafed79adff1c419da31a414878"><code>383cc7c</code></a>
doc: update CHANGELOG with assigned CVEs</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/a7b0cfe103ff5d8b17d77fb3660589522dd6bcad"><code>a7b0cfe</code></a>
Combine the noscript/mglyph prevention blocks</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/5658335ede931a47d02b8aa4d3b5800bd3184158"><code>5658335</code></a>
Merge branch 'h1-2509647-noscript' into
flavorjones-2024-security-fixes</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/65fb72f07e875b401bbec479c2a5a3d3b10ad338"><code>65fb72f</code></a>
Merge branch 'h1-2519936-mglyph-foster-parenting' into
flavorjones-2024-secur...</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/3fe22a8b892361c8463f50f4f4a5d08e299c62a2"><code>3fe22a8</code></a>
Merge branch 'h1-2519936-foreign-ns-confusion' into
flavorjones-2024-security...</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/d7a94c125209a9611308fbfdb7420a8786d7e80f"><code>d7a94c1</code></a>
Merge branch 'h1-2503220-nokogiri-serialization' into
flavorjones-2024-securi...</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/3fd6e650f991ce687961da45038b77504114d237"><code>3fd6e65</code></a>
doc: update CHANGELOG</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/16251735e36ebdc302e2f90f2a39cad56879414f"><code>1625173</code></a>
fix: disallow 'noscript' from safe lists</li>
<li><a
href="https://github.com/rails/rails-html-sanitizer/commit/a0a3e8b76b696446ffc6bffcff3bc7b7c6393c72"><code>a0a3e8b</code></a>
fix: disallow 'mglyph' and 'malignmark' from safe lists</li>
<li>Additional commits viewable in <a
href="https://github.com/rails/rails-html-sanitizer/compare/v1.6.0...v1.6.1">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=rails-html-sanitizer&package-manager=bundler&previous-version=1.6.0&new-version=1.6.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
---
 Gemfile.lock | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 4ea52d1e1..298d8e041 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -452,7 +452,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.22.0)
+    loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -471,7 +471,7 @@ GEM
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
+    mini_portile2 (2.8.8)
     minitest (5.25.1)
     mock_redis (0.36.0)
       ruby2_keywords
@@ -502,14 +502,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nokogiri (1.16.8)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.7-arm64-darwin)
+    nokogiri (1.16.8-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-darwin)
+    nokogiri (1.16.8-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.16.8-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -599,9 +599,9 @@ GEM
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
+    rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
-      nokogiri (~> 1.14)
+      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.5)
       actionpack (= 7.0.8.5)
       activesupport (= 7.0.8.5)

From d4b6f710bd9ad8be1d0eebfcfc5b28cba5589a38 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Tue, 3 Dec 2024 08:23:59 +0530
Subject: [PATCH 36/74] chore(heroku): Switch heroku stack to the latest stack
 heroku-24 (#10085)

# Pull Request Template

## Description


- Heroku has marked `heroku-20` stack as EOL by April 2025
- https://help.heroku.com/NPN275RK/heroku-20-end-of-life-faq
- https://devcenter.heroku.com/articles/heroku-24-stack

Fixes https://linear.app/chatwoot/issue/CW-3552/upgrade-heroku-stack-to-heroku-24
---
 app.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app.json b/app.json
index d50040814..08e725c8e 100644
--- a/app.json
+++ b/app.json
@@ -48,7 +48,7 @@
       "size": "basic"
     }
   },
-  "stack": "heroku-20",
+  "stack": "heroku-24",
   "image": "heroku/ruby",
   "addons": [
     {
@@ -58,7 +58,7 @@
       "plan": "heroku-postgresql:essential-0"
     }
   ],
-  "stack": "heroku-20",
+  "stack": "heroku-24",
   "buildpacks": [
     {
       "url": "heroku/nodejs"

From 769b7171f47195b2fa31b616e0fb5b66a71d1e0f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 4 Dec 2024 10:59:47 +0530
Subject: [PATCH 37/74] feat(v4): Add new contact details screen (#10504)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../Contacts/ContactLabels/ContactLabels.vue  | 108 ++++++++
 .../Contacts/ContactsDetailsLayout.vue        |  83 ++++++
 .../ConfirmContactDeleteDialog.vue            |  58 ++++
 .../ContactsForm/ContactMergeForm.vue         |   2 +-
 .../Contacts/ContactsForm/ContactsForm.vue    |  10 +-
 .../Contacts/ContactsHeader/ContactHeader.vue |  10 +-
 .../ContactListHeaderWrapper.vue              |   6 +
 .../ContactsActiveFiltersPreview.vue          |   3 +-
 .../Contacts/ContactsListLayout.vue           |  15 +-
 .../ContactCustomAttributeItem.vue            |  95 +++++++
 .../ContactCustomAttributes.vue               | 132 +++++++++
 .../ContactsSidebar/ContactHistory.vue        |  57 ++++
 .../Contacts/ContactsSidebar/ContactMerge.vue | 142 ++++++++++
 .../Contacts/ContactsSidebar/ContactNotes.vue |  99 +++++++
 .../Contacts/Pages/ContactDetails.vue         | 182 +++++++++++++
 .../Contacts/Pages/ContactsList.vue           |  17 +-
 .../ConversationCard/CardMessagePreview.vue   |  11 +-
 .../CardMessagePreviewWithMeta.vue            |  11 +-
 .../ConversationCard/ConversationCard.vue     |  29 +-
 .../CustomAttributes/DateAttribute.vue        |   2 +-
 .../CustomAttributes/OtherAttribute.vue       |   5 +-
 .../components-next/Editor/Editor.vue         |  18 +-
 .../components-next/breadcrumb/Breadcrumb.vue |   8 -
 .../combobox/ComboBoxDropdown.vue             |   2 +-
 .../filter/ActiveFilterPreview.vue            |   8 +-
 .../components-next/sidebar/Sidebar.vue       |  37 +--
 .../dashboard/composables/useTransformKeys.js |  13 +
 .../dashboard/i18n/locale/en/contact.json     |  34 +++
 .../contacts/pages/ContactManageView.vue      | 250 ++++++++++--------
 .../contacts/pages/ContactsIndex.vue          |   1 +
 .../routes/dashboard/contacts/routes.js       |  76 +++---
 .../dashboard/store/modules/attributes.js     |   6 +
 .../store/modules/contactConversations.js     |   5 +
 .../dashboard/store/modules/contactNotes.js   |   6 +
 .../store/modules/contacts/actions.js         |  19 +-
 .../store/modules/contacts/getters.js         |   7 +
 .../dashboard/store/modules/inboxes.js        |   7 +
 37 files changed, 1353 insertions(+), 221 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
new file mode 100644
index 000000000..255c1b113
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { computed, watch, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/Label/AddLabel.vue';
+
+const props = defineProps({
+  contactId: {
+    type: [String, Number],
+    default: null,
+  },
+});
+
+const store = useStore();
+const route = useRoute();
+
+const showDropdown = ref(false);
+
+const allLabels = useMapGetter('labels/getLabels');
+const contactLabels = useMapGetter('contactLabels/getContactLabels');
+
+const savedLabels = computed(() => {
+  const availableContactLabels = contactLabels.value(props.contactId);
+  return allLabels.value.filter(({ title }) =>
+    availableContactLabels.includes(title)
+  );
+});
+
+const labelMenuItems = computed(() => {
+  return allLabels.value
+    ?.map(label => ({
+      label: label.title,
+      value: label.id,
+      thumbnail: { name: label.title, color: label.color },
+      isSelected: savedLabels.value.some(
+        savedLabel => savedLabel.id === label.id
+      ),
+      action: 'addLabel',
+    }))
+    .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
+});
+
+const fetchLabels = async contactId => {
+  if (!contactId) {
+    return;
+  }
+  store.dispatch('contactLabels/get', contactId);
+};
+
+const handleLabelAction = async ({ action, value }) => {
+  try {
+    // Get current label titles
+    const currentLabels = savedLabels.value.map(label => label.title);
+
+    // Find the label title for the ID (value)
+    const selectedLabel = allLabels.value.find(label => label.id === value);
+    if (!selectedLabel) return;
+
+    let updatedLabels;
+    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', {
+      contactId: props.contactId,
+      labels: updatedLabels,
+    });
+
+    showDropdown.value = false;
+  } catch (error) {
+    // error
+  }
+};
+
+watch(
+  () => props.contactId,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      fetchLabels(newVal);
+    }
+  }
+);
+onMounted(() => {
+  if (route.params.contactId) {
+    fetchLabels(route.params.contactId);
+  }
+});
+</script>
+
+<template>
+  <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"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
new file mode 100644
index 000000000..6e7d42bc9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { computed, useSlots } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+// import Button from 'dashboard/components-next/button/Button.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+
+const props = defineProps({
+  // buttonLabel: {
+  //   type: String,
+  //   default: '',
+  // },
+  selectedContact: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits([
+  // 'message',
+  'goToContactsList',
+]);
+
+const { t } = useI18n();
+const slots = useSlots();
+
+const selectedContactName = computed(() => {
+  return props.selectedContact?.name;
+});
+
+const breadcrumbItems = computed(() => {
+  const items = [
+    {
+      label: t('CONTACTS_LAYOUT.HEADER.BREADCRUMB.CONTACTS'),
+      link: '#',
+    },
+  ];
+  if (props.selectedContact) {
+    items.push({
+      label: selectedContactName.value,
+    });
+  }
+  return items;
+});
+
+const handleBreadcrumbClick = () => {
+  emit('goToContactsList');
+};
+</script>
+
+<template>
+  <section
+    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"
+    >
+      <header class="sticky top-0 z-10 px-6 xl:px-0">
+        <div class="w-full mx-auto max-w-[650px]">
+          <div class="flex items-center justify-between w-full h-20 gap-2">
+            <Breadcrumb
+              :items="breadcrumbItems"
+              @click="handleBreadcrumbClick"
+            />
+            <!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
+          </div>
+        </div>
+      </header>
+      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
+        <div class="w-full py-4 mx-auto max-w-[650px]">
+          <slot name="default" />
+        </div>
+      </main>
+    </div>
+
+    <div
+      v-if="slots.sidebar"
+      class="overflow-y-auto justify-end min-w-[200px] w-full py-6 max-w-[440px] border-l border-n-weak bg-n-solid-2"
+    >
+      <slot name="sidebar" />
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue
new file mode 100644
index 000000000..d9c0deb1b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const dialogRef = ref(null);
+
+const deleteContact = async id => {
+  if (!id) return;
+
+  try {
+    await store.dispatch('contacts/delete', id);
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.API.ERROR_MESSAGE'));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  emit('goToContactsList');
+  await deleteContact(route.params.contactId || props.selectedContact.id);
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.TITLE')"
+    :description="
+      t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION', {
+        contactName: props.selectedContact.name,
+      })
+    "
+    :confirm-button-label="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.CONFIRM')"
+    @confirm="handleDialogConfirm"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
index dc38c4649..8adcce6b2 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
@@ -98,7 +98,7 @@ const { t } = useI18n();
           :size="32"
           rounded-full
         />
-        <div class="flex flex-col gap-1">
+        <div class="flex flex-col w-full min-w-0 gap-1">
           <span class="text-sm leading-4 truncate text-n-slate-11">
             {{ selectedContact.name }}
           </span>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 90329b311..b6b24ce26 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -96,11 +96,11 @@ const prepareStateBasedOnProps = () => {
   } = props.contactData || {};
   const { firstName, lastName } = splitName(name);
   const {
-    description,
-    companyName,
-    countryCode,
-    country,
-    city,
+    description = '',
+    companyName = '',
+    countryCode = '',
+    country = '',
+    city = '',
     socialProfiles = {},
   } = additionalAttributes || {};
 
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 6e32b8581..4406a996c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -38,6 +38,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  isLabelView: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -81,7 +85,7 @@ const emit = defineEmits([
           </Input>
         </div>
         <div class="flex items-center gap-2">
-          <div class="relative">
+          <div v-if="!isLabelView" class="relative">
             <Button
               id="toggleContactsFilterButton"
               :icon="
@@ -101,7 +105,7 @@ const emit = defineEmits([
             <slot name="filter" />
           </div>
           <Button
-            v-if="hasActiveFilters && !isSegmentsView"
+            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
             icon="i-lucide-save"
             color="slate"
             size="sm"
@@ -110,7 +114,7 @@ const emit = defineEmits([
             @click="emit('createSegment')"
           />
           <Button
-            v-if="isSegmentsView"
+            v-if="isSegmentsView && !isLabelView"
             icon="i-lucide-trash"
             color="slate"
             size="sm"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
index 4905e8eee..8b2a53b27 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -35,6 +35,7 @@ const props = defineProps({
   segmentsId: { type: [String, Number], default: 0 },
   activeSegment: { type: Object, default: null },
   hasAppliedFilters: { type: Boolean, default: false },
+  isLabelView: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -256,6 +257,10 @@ const onToggleFilters = () => {
   }
   showFiltersModal.value = true;
 };
+
+defineExpose({
+  onToggleFilters,
+});
 </script>
 
 <template>
@@ -266,6 +271,7 @@ const onToggleFilters = () => {
     :active-ordering="activeOrdering"
     :header-title="headerTitle"
     :is-segments-view="hasActiveSegments"
+    :is-label-view="isLabelView"
     :has-active-filters="hasAppliedFilters"
     :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
     @search="emit('search', $event)"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
index b70cfe72d..65d7de044 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
@@ -4,7 +4,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 
 import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
 
-const emit = defineEmits(['clearFilters']);
+const emit = defineEmits(['clearFilters', 'openFilter']);
 
 const { t } = useI18n();
 
@@ -24,6 +24,7 @@ const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
     "
     class="max-w-[960px] px-6"
+    @open-filter="emit('openFilter')"
     @clear-filters="emit('clearFilters')"
   />
 </template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
index 1727cf21b..9bede6795 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue';
@@ -63,13 +63,23 @@ const emit = defineEmits([
 
 const route = useRoute();
 
+const contactListHeaderWrapper = ref(null);
+
 const isNotSegmentView = computed(() => {
   return route.name !== 'contacts_dashboard_segments_index';
 });
 
+const isLabelView = computed(
+  () => route.name === 'contacts_dashboard_labels_index'
+);
+
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
 };
+
+const openFilter = () => {
+  contactListHeaderWrapper.value?.onToggleFilters();
+};
 </script>
 
 <template>
@@ -78,6 +88,7 @@ const updateCurrentPage = page => {
   >
     <div class="flex flex-col w-full h-full transition-all duration-300">
       <ContactListHeaderWrapper
+        ref="contactListHeaderWrapper"
         :show-search="isNotSegmentView"
         :search-value="searchValue"
         :active-sort="activeSort"
@@ -86,6 +97,7 @@ const updateCurrentPage = page => {
         :active-segment="activeSegment"
         :segments-id="segmentsId"
         :has-applied-filters="hasAppliedFilters"
+        :is-label-view="isLabelView"
         @update:sort="emit('update:sort', $event)"
         @search="emit('search', $event)"
         @apply-filter="emit('applyFilter', $event)"
@@ -96,6 +108,7 @@ const updateCurrentPage = page => {
           <ContactsActiveFiltersPreview
             v-if="hasAppliedFilters && isNotSegmentView"
             @clear-filters="emit('clearFilters')"
+            @open-filter="openFilter"
           />
           <slot name="default" />
         </div>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue
new file mode 100644
index 000000000..dc52d8912
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+
+import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttribute.vue';
+import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
+import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
+import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+const route = useRoute();
+
+const handleDelete = async () => {
+  try {
+    await store.dispatch('contacts/deleteCustomAttributes', {
+      id: route.params.contactId,
+      customAttributes: [props.attribute.attributeKey],
+    });
+    useAlert(
+      t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.DELETE_SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.DELETE_ERROR')
+    );
+  }
+};
+
+const handleUpdate = async value => {
+  try {
+    await store.dispatch('contacts/update', {
+      id: route.params.contactId,
+      customAttributes: {
+        [props.attribute.attributeKey]: value,
+      },
+    });
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.UPDATE_ERROR')
+    );
+  }
+};
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const CurrentAttributeComponent = computed(() => {
+  return (
+    componentMap[props.attribute.attributeDisplayType] || componentMap.default
+  );
+});
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
+    :class="isEditingView ? 'min-h-10' : 'min-h-11'"
+  >
+    <div class="flex items-center justify-between truncate">
+      <span class="text-sm font-medium truncate text-n-slate-12">
+        {{ attribute.attributeDisplayName }}
+      </span>
+    </div>
+
+    <component
+      :is="CurrentAttributeComponent"
+      :attribute="attribute"
+      :is-editing-view="isEditingView"
+      @update="handleUpdate"
+      @delete="handleDelete"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
new file mode 100644
index 000000000..cb9a45ce3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
@@ -0,0 +1,132 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ContactCustomAttributeItem from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+
+const searchQuery = ref('');
+
+const contactAttributes = computed(() => {
+  const attributes = useMapGetter('attributes/getAttributesByModelType');
+  return attributes.value('contact_attribute') || [];
+});
+
+const hasContactAttributes = computed(
+  () => contactAttributes.value?.length > 0
+);
+
+const processContactAttributes = (
+  attributes,
+  customAttributes,
+  filterCondition
+) => {
+  if (!attributes.length || !customAttributes) {
+    return [];
+  }
+
+  return attributes.reduce((result, attribute) => {
+    const { attributeKey } = attribute;
+    const meetsCondition = filterCondition(attributeKey, customAttributes);
+
+    if (meetsCondition) {
+      result.push({
+        ...attribute,
+        value: customAttributes[attributeKey] ?? '',
+      });
+    }
+
+    return result;
+  }, []);
+};
+
+const usedAttributes = computed(() => {
+  return processContactAttributes(
+    contactAttributes.value,
+    props.selectedContact?.customAttributes,
+    (key, custom) => key in custom
+  );
+});
+
+const unusedAttributes = computed(() => {
+  return processContactAttributes(
+    contactAttributes.value,
+    props.selectedContact?.customAttributes,
+    (key, custom) => !(key in custom)
+  );
+});
+
+const filteredUnusedAttributes = computed(() => {
+  return unusedAttributes.value?.filter(attribute =>
+    attribute.attributeDisplayName
+      .toLowerCase()
+      .includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const unusedAttributesCount = computed(() => unusedAttributes.value?.length);
+const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
+const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
+</script>
+
+<template>
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
+      <ContactCustomAttributeItem
+        v-for="attribute in usedAttributes"
+        :key="attribute.id"
+        is-editing-view
+        :attribute="attribute"
+      />
+    </div>
+    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
+      <div class="flex-1 h-[1px] bg-n-slate-5" />
+      <span class="text-sm font-medium text-n-slate-10">{{
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.UNUSED_ATTRIBUTES', {
+          count: unusedAttributesCount,
+        })
+      }}</span>
+      <div class="flex-1 h-[1px] bg-n-slate-5" />
+    </div>
+    <div class="flex flex-col gap-3">
+      <div v-if="!hasNoUnusedAttributes" class="relative">
+        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.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-if="filteredUnusedAttributes.length === 0 && !hasNoUnusedAttributes"
+        class="flex items-center justify-start h-11"
+      >
+        <p class="text-sm text-n-slate-11">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.NO_ATTRIBUTES') }}
+        </p>
+      </div>
+      <div v-if="!hasNoUnusedAttributes" class="flex flex-col gap-2">
+        <ContactCustomAttributeItem
+          v-for="attribute in filteredUnusedAttributes"
+          :key="attribute.id"
+          :attribute="attribute"
+        />
+      </div>
+    </div>
+  </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.EMPTY_STATE') }}
+  </p>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
new file mode 100644
index 000000000..5e536fbe0
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const conversations = useMapGetter(
+  'contactConversations/getAllConversationsByContactId'
+);
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+const isFetching = computed(() => uiFlags.value.isFetching);
+
+const contactConversations = computed(() =>
+  conversations.value(route.params.contactId)
+);
+</script>
+
+<template>
+  <div
+    v-if="isFetching"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+  <div v-else-if="contactConversations.length > 0" class="flex flex-col py-6">
+    <div
+      v-for="conversation in contactConversations"
+      :key="conversation.id"
+      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') }}
+  </p>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
new file mode 100644
index 000000000..65cbfafe2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { reactive, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useRoute } from 'vue-router';
+import { useAlert, useTrack } from 'dashboard/composables';
+import ContactAPI from 'dashboard/api/contacts';
+import { debounce } from '@chatwoot/utils';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactMergeForm from 'dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const state = reactive({
+  primaryContactId: null,
+});
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const searchResults = ref([]);
+const isSearching = ref(false);
+
+const validationRules = {
+  primaryContactId: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isMergingContact = computed(() => uiFlags.value.isMerging);
+
+const primaryContactList = computed(
+  () =>
+    searchResults.value?.map(item => ({
+      value: item.id,
+      label: `(ID: ${item.id}) ${item.name}`,
+    })) ?? []
+);
+
+const onContactSearch = debounce(
+  async query => {
+    isSearching.value = true;
+    searchResults.value = [];
+    try {
+      const {
+        data: { payload },
+      } = await ContactAPI.search(query);
+      searchResults.value = payload.filter(
+        contact => contact.id !== props.selectedContact.id
+      );
+      isSearching.value = false;
+    } catch (error) {
+      useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_ERROR_MESSAGE'));
+    } finally {
+      isSearching.value = false;
+    }
+  },
+  300,
+  false
+);
+
+const resetState = () => {
+  state.primaryContactId = null;
+  searchResults.value = [];
+  isSearching.value = false;
+};
+
+const onMergeContacts = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
+
+  try {
+    await store.dispatch('contacts/merge', {
+      childId: props.selectedContact.id || route.params.contactId,
+      parentId: state.primaryContactId,
+    });
+    emit('goToContactsList');
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SUCCESS_MESSAGE'));
+    resetState();
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 px-6 py-6">
+    <div class="flex flex-col gap-2">
+      <h4 class="text-base text-n-slate-12">
+        {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.TITLE') }}
+      </h4>
+      <p class="text-sm text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.DESCRIPTION') }}
+      </p>
+    </div>
+    <ContactMergeForm
+      v-model:primary-contact-id="state.primaryContactId"
+      :selected-contact="selectedContact"
+      :primary-contact-list="primaryContactList"
+      :is-searching="isSearching"
+      :has-error="!!v$.primaryContactId.$error"
+      :error-message="
+        v$.primaryContactId.$error
+          ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_REQUIRED_ERROR')
+          : ''
+      "
+      @search="onContactSearch"
+    />
+    <div class="flex items-center justify-between gap-3">
+      <Button
+        variant="faded"
+        color="slate"
+        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="resetState"
+      />
+      <Button
+        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CONFIRM')"
+        class="w-full"
+        :is-loading="isMergingContact"
+        :disabled="isMergingContact"
+        @click="onMergeContacts"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
new file mode 100644
index 000000000..dfe3f437c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactNoteItem from './components/ContactNoteItem.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const state = reactive({
+  message: '',
+});
+
+const currentUser = useMapGetter('getCurrentUser');
+const notesByContact = useMapGetter('contactNotes/getAllNotesByContactId');
+const uiFlags = useMapGetter('contactNotes/getUIFlags');
+const isFetchingNotes = computed(() => uiFlags.value.isFetching);
+const isCreatingNote = computed(() => uiFlags.value.isCreating);
+const notes = computed(() => notesByContact.value(route.params.contactId));
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note.user.name;
+};
+
+const onAdd = content => {
+  if (!content) return;
+  const { contactId } = route.params;
+  store.dispatch('contactNotes/create', { content, contactId });
+  state.message = '';
+};
+
+const onDelete = noteId => {
+  if (!noteId) return;
+  const { contactId } = route.params;
+  store.dispatch('contactNotes/delete', { noteId, contactId });
+};
+
+const keyboardEvents = {
+  '$mod+Enter': {
+    action: () => onAdd(state.message),
+    allowOnFocusedInput: true,
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 py-6">
+    <Editor
+      v-model="state.message"
+      :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
+      focus-on-mount
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 px-6"
+    >
+      <template #actions>
+        <div class="flex items-center gap-3">
+          <Button
+            variant="link"
+            color="blue"
+            size="sm"
+            :label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.SAVE')"
+            class="hover:no-underline"
+            :is-loading="isCreatingNote"
+            :disabled="!state.message || isCreatingNote"
+            @click="onAdd(state.message)"
+          />
+        </div>
+      </template>
+    </Editor>
+    <div
+      v-if="isFetchingNotes"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <div v-else-if="notes.length > 0">
+      <ContactNoteItem
+        v-for="note in notes"
+        :key="note.id"
+        :note="note"
+        :written-by="getWrittenBy(note)"
+        @delete="onDelete"
+      />
+    </div>
+    <p v-else class="px-6 py-6 text-sm leading-6 text-center text-n-slate-11">
+      {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EMPTY_STATE') }}
+    </p>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
new file mode 100644
index 000000000..57d2b1d43
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
@@ -0,0 +1,182 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactLabels from 'dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue';
+import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
+import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const confirmDeleteContactDialogRef = ref(null);
+
+const avatarFile = ref(null);
+const avatarUrl = ref('');
+
+const contactsFormRef = ref(null);
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isUpdating = computed(() => uiFlags.value.isUpdating);
+
+const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
+
+const contactData = ref({});
+
+const getInitialContactData = () => {
+  if (!props.selectedContact) return {};
+  return { ...props.selectedContact };
+};
+
+onMounted(() => {
+  Object.assign(contactData.value, getInitialContactData());
+});
+
+const createdAt = computed(() => {
+  return contactData.value?.createdAt
+    ? dynamicTime(contactData.value.createdAt)
+    : '';
+});
+
+const lastActivityAt = computed(() => {
+  return contactData.value?.lastActivityAt
+    ? dynamicTime(contactData.value.lastActivityAt)
+    : '';
+});
+
+const avatarSrc = computed(() => {
+  return avatarUrl.value ? avatarUrl.value : contactData.value?.thumbnail;
+});
+
+const handleFormUpdate = updatedData => {
+  Object.assign(contactData.value, updatedData);
+};
+
+const updateContact = async () => {
+  try {
+    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'));
+  }
+};
+
+const openConfirmDeleteContactDialog = () => {
+  confirmDeleteContactDialogRef.value?.dialogRef.open();
+};
+
+const handleAvatarUpload = async ({ file, url }) => {
+  avatarFile.value = file;
+  avatarUrl.value = url;
+
+  try {
+    await store.dispatch('contacts/update', {
+      ...contactsFormRef.value?.state,
+      avatar: file,
+      isFormData: true,
+    });
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.SUCCESS_MESSAGE'));
+  } catch {
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.ERROR_MESSAGE'));
+  }
+};
+
+const handleAvatarDelete = async () => {
+  try {
+    if (props.selectedContact && props.selectedContact.id) {
+      await store.dispatch('contacts/deleteAvatar', props.selectedContact.id);
+      useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.SUCCESS_MESSAGE'));
+    }
+    avatarFile.value = null;
+    avatarUrl.value = '';
+    contactData.value.thumbnail = null;
+  } catch (error) {
+    useAlert(
+      error.message
+        ? error.message
+        : t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.ERROR_MESSAGE')
+    );
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-8 pb-6">
+    <div class="flex flex-col items-start gap-3">
+      <Avatar
+        :src="avatarSrc || ''"
+        :name="selectedContact?.name || ''"
+        :size="72"
+        allow-upload
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium text-n-slate-12">
+          {{ selectedContact?.name }}
+        </h3>
+        <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>
+    <div class="flex flex-col items-start gap-6">
+      <ContactsForm
+        ref="contactsFormRef"
+        :contact-data="contactData"
+        is-details-view
+        @update="handleFormUpdate"
+      />
+      <Button
+        :label="t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')"
+        size="sm"
+        :is-loading="isUpdating"
+        :disabled="isUpdating || isFormInvalid"
+        @click="updateContact"
+      />
+    </div>
+    <div
+      class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
+    >
+      <div class="flex flex-col gap-2">
+        <h6 class="text-base font-medium text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT') }}
+        </h6>
+        <span class="text-sm text-n-slate-11">
+          {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT_DESCRIPTION') }}
+        </span>
+      </div>
+      <Button
+        :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
+        color="ruby"
+        @click="openConfirmDeleteContactDialog"
+      />
+    </div>
+    <ConfirmContactDeleteDialog
+      ref="confirmDeleteContactDialogRef"
+      :selected-contact="selectedContact"
+      @go-to-contacts-list="emit('goToContactsList')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
index 1ca94ecaf..33532edcf 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -42,14 +42,17 @@ const updateContact = async updatedData => {
 };
 
 const onClickViewDetails = async id => {
-  const params = { contactId: id };
-  if (route.name.includes('segments')) {
-    params.segmentId = route.params.segmentId;
-  } else if (route.name.includes('labels')) {
-    params.label = route.params.label;
-  }
+  const routeTypes = {
+    contacts_dashboard_segments_index: ['contacts_edit_segment', 'segmentId'],
+    contacts_dashboard_labels_index: ['contacts_edit_label', 'label'],
+  };
+  const [name, paramKey] = routeTypes[route.name] || ['contacts_edit'];
+  const params = {
+    contactId: id,
+    ...(paramKey && { [paramKey]: route.params[paramKey] }),
+  };
 
-  await router.push({ name: 'contacts_edit', params, query: route.query });
+  await router.push({ name, params, query: route.query });
 };
 
 const toggleExpanded = id => {
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
index dfa31e100..a81c80b87 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
@@ -13,9 +14,15 @@ const props = defineProps({
 
 const { t } = useI18n();
 
+const { getPlainText } = useMessageFormatter();
+
 const lastNonActivityMessageContent = computed(() => {
-  const { lastNonActivityMessage = {} } = props.conversation;
-  return lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT');
+  const { lastNonActivityMessage = {}, customAttributes = {} } =
+    props.conversation;
+  const { email: { subject } = {} } = customAttributes;
+  return getPlainText(
+    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
+  );
 });
 
 const assignee = computed(() => {
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
index 374da1f88..19dc7008a 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import CardLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
@@ -19,9 +20,15 @@ const props = defineProps({
 
 const { t } = useI18n();
 
+const { getPlainText } = useMessageFormatter();
+
 const lastNonActivityMessageContent = computed(() => {
-  const { lastNonActivityMessage = {} } = props.conversation;
-  return lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT');
+  const { lastNonActivityMessage = {}, customAttributes = {} } =
+    props.conversation;
+  const { email: { subject } = {} } = customAttributes;
+  return getPlainText(
+    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
+  );
 });
 
 const assignee = computed(() => {
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
index d99234a27..38041fa17 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { useRouter, useRoute } from 'vue-router';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
@@ -28,6 +30,9 @@ const props = defineProps({
   },
 });
 
+const router = useRouter();
+const route = useRoute();
+
 const currentContact = computed(() => props.contact);
 
 const currentContactName = computed(() => currentContact.value?.name);
@@ -54,11 +59,31 @@ const showMessagePreviewWithoutMeta = computed(() => {
   const { slaPolicyId, labels = [] } = props.conversation;
   return !slaPolicyId && labels.length === 0;
 });
+
+const onCardClick = e => {
+  const path = frontendURL(
+    conversationUrl({
+      accountId: route.params.accountId,
+      id: props.conversation.id,
+    })
+  );
+
+  if (e.metaKey || e.ctrlKey) {
+    window.open(
+      window.chatwootConfig.hostURL + path,
+      '_blank',
+      'noopener noreferrer nofollow'
+    );
+    return;
+  }
+  router.push({ path });
+};
 </script>
 
 <template>
   <div
-    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out rounded-xl"
+    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out cursor-pointer rounded-xl"
+    @click="onCardClick"
   >
     <Avatar
       :name="currentContactName"
@@ -75,7 +100,7 @@ const showMessagePreviewWithoutMeta = computed(() => {
         <div class="flex items-center gap-2">
           <CardPriorityIcon :priority="conversation.priority || null" />
           <div
-            v-tooltip.top-start="inboxName"
+            v-tooltip.left="inboxName"
             class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
           >
             <Icon
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
index f564f0d1c..ba8090e02 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
@@ -88,7 +88,7 @@ const handleInputUpdate = async () => {
       :class="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12 truncate flex-1': isEditingView,
+        'text-n-slate-12 truncate': isEditingView,
       }"
       @click="toggleEditValue(!isEditingView)"
     >
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
index 8b5b538c3..e76a744be 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
@@ -127,9 +127,8 @@ const handleInputUpdate = async () => {
       :class="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12 truncate flex-1':
-          isEditingView && !isAttributeTypeLink,
-        'truncate flex-1 hover:text-n-brand text-n-blue-text':
+        'text-n-slate-12 truncate': isEditingView && !isAttributeTypeLink,
+        'truncate hover:text-n-brand text-n-blue-text':
           isEditingView && isAttributeTypeLink,
       }"
       @click="toggleEditValue(!isEditingView)"
diff --git a/app/javascript/dashboard/components-next/Editor/Editor.vue b/app/javascript/dashboard/components-next/Editor/Editor.vue
index 806534be7..717658d09 100644
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, useSlots } from 'vue';
 
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
@@ -45,6 +45,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
+const slots = useSlots();
+
 const isFocused = ref(false);
 
 const characterCount = computed(() => props.modelValue.length);
@@ -81,7 +83,7 @@ const handleBlur = () => {
 watch(
   () => props.modelValue,
   newValue => {
-    if (props.maxLength && props.showCharacterCount) {
+    if (props.maxLength && props.showCharacterCount && !slots.actions) {
       if (characterCount.value >= props.maxLength) {
         emit('update:modelValue', newValue.slice(0, props.maxLength));
       }
@@ -119,12 +121,16 @@ watch(
         @blur="handleBlur"
       />
       <div
-        v-if="showCharacterCount"
+        v-if="showCharacterCount || slots.actions"
         class="flex items-center justify-end h-4 ltr:right-3 rtl:left-3"
       >
-        <span class="text-xs tabular-nums text-n-slate-10">
+        <span
+          v-if="showCharacterCount && !slots.actions"
+          class="text-xs tabular-nums text-n-slate-10"
+        >
           {{ characterCount }} / {{ maxLength }}
         </span>
+        <slot v-else name="actions" />
       </div>
     </div>
     <p
@@ -144,7 +150,7 @@ watch(
       @apply gap-2 !important;
 
       .ProseMirror-menubar {
-        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5  !important;
+        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5 !top-0 !relative !important;
 
         .ProseMirror-menuitem {
           @apply h-5 !important;
@@ -163,7 +169,7 @@ watch(
           @apply m-0 !important;
 
           &::before {
-            @apply text-n-slate-11 dark:text-n-slate-11 !important;
+            @apply text-n-slate-10 dark:text-n-slate-10 !important;
           }
         }
       }
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
index e87728d1e..bb848c62b 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -8,14 +8,6 @@ defineProps({
   items: {
     type: Array,
     required: true,
-    validator: value => {
-      return value.every(
-        item =>
-          typeof item.label === 'string' &&
-          (item.link === undefined || typeof item.link === 'string') &&
-          (item.count === undefined || typeof item.count === 'number')
-      );
-    },
   },
 });
 
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
index a39657624..e1cd8a086 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -29,7 +29,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:searchValue', 'select', 'search']);
+const emit = defineEmits(['select', 'search']);
 
 const { t } = useI18n();
 
diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
index b35569a8b..227037772 100644
--- a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
@@ -22,7 +22,7 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['clearFilters']);
+const emit = defineEmits(['clearFilters', 'openFilter']);
 
 const shouldCapitalizeFirstLetter = key => {
   const lowercaseKeys = ['email'];
@@ -64,7 +64,8 @@ const formatFilterValue = value => {
         class="inline-flex items-center gap-2 h-7"
       >
         <div
-          class="flex items-center h-full min-w-0 gap-1 px-2 py-1 text-xs border rounded-lg max-w-72 border-n-weak"
+          class="flex items-center h-full min-w-0 gap-1 px-2 py-1 text-xs border rounded-lg hover:bg-n-solid-2 max-w-72 border-n-weak hover:cursor-pointer"
+          @click="emit('openFilter')"
         >
           <span
             class="lowercase whitespace-nowrap first-letter:capitalize text-n-slate-12"
@@ -101,7 +102,8 @@ const formatFilterValue = value => {
     </template>
     <div
       v-if="appliedFilters.length > maxVisibleFilters"
-      class="inline-flex items-center content-center px-1 text-xs rounded-lg text-n-slate-10 h-7"
+      class="inline-flex items-center content-center px-1 text-xs rounded-lg text-n-slate-10 hover:text-n-slate-11 h-7 hover:cursor-pointer"
+      @click="emit('openFilter')"
     >
       {{ moreFiltersLabel }}
     </div>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 7a43bbdf7..be790a623 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -200,15 +200,9 @@ const menuItems = computed(() => {
           to: accountScopedRoute(
             'contacts_dashboard_index',
             {},
-            {
-              page: 1,
-              search: undefined,
-            }
+            { page: 1, search: undefined }
           ),
-          activeOn: [
-            'contacts_dashboard_index',
-            'contacts_dashboard_edit_index',
-          ],
+          activeOn: ['contacts_dashboard_index', 'contacts_edit'],
         },
         {
           name: 'Segments',
@@ -219,14 +213,13 @@ const menuItems = computed(() => {
             label: view.name,
             to: accountScopedRoute(
               'contacts_dashboard_segments_index',
-              {
-                segmentId: view.id,
-              },
-              {
-                page: 1,
-              }
+              { segmentId: view.id },
+              { page: 1 }
             ),
-            activeOn: ['contacts_dashboard_segments_index'],
+            activeOn: [
+              'contacts_dashboard_segments_index',
+              'contacts_edit_segment',
+            ],
           })),
         },
         {
@@ -242,15 +235,13 @@ const menuItems = computed(() => {
             }),
             to: accountScopedRoute(
               'contacts_dashboard_labels_index',
-              {
-                label: label.title,
-              },
-              {
-                page: 1,
-                search: undefined,
-              }
+              { label: label.title },
+              { page: 1, search: undefined }
             ),
-            activeOn: ['contacts_dashboard_labels_index'],
+            activeOn: [
+              'contacts_dashboard_labels_index',
+              'contacts_edit_label',
+            ],
           })),
         },
       ],
diff --git a/app/javascript/dashboard/composables/useTransformKeys.js b/app/javascript/dashboard/composables/useTransformKeys.js
index e1feaf1a7..6c5f72478 100644
--- a/app/javascript/dashboard/composables/useTransformKeys.js
+++ b/app/javascript/dashboard/composables/useTransformKeys.js
@@ -23,3 +23,16 @@ export function useSnakeCase(payload) {
   const unrefPayload = unref(payload);
   return snakecaseKeys(unrefPayload);
 }
+
+/**
+ * Converts a string from snake_case to camelCase
+ * @param {string} str - String to convert (can contain letters, numbers, or both)
+ *                      Examples: 'hello_world', 'user_123', 'checkbox_2', 'test_string_99'
+ * @returns {string} Converted string in camelCase
+ *                   Examples: 'helloWorld', 'user123', 'checkbox2', 'testString99'
+ */
+export function toCamelCase(str) {
+  return str
+    .toLowerCase()
+    .replace(/_([a-z0-9])/g, (_, char) => char.toUpperCase());
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index aad3a5a06..e0d2efdfd 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -558,7 +558,41 @@
         }
       }
     },
+    "DETAILS": {
+      "CREATED_AT": "Created {date}",
+      "LAST_ACTIVITY": "Last active {date}",
+      "DELETE_CONTACT_DESCRIPTION": "Permanently delete this contact. This action is irreversible",
+      "DELETE_CONTACT": "Delete contact",
+      "DELETE_DIALOG": {
+        "TITLE": "Confirm Deletion",
+        "DESCRIPTION": "Are you sure you want to delete this {contactName} contact?",
+        "CONFIRM": "Yes, Delete",
+        "API": {
+          "SUCCESS_MESSAGE": "Contact deleted successfully",
+          "ERROR_MESSAGE": "Could not delete contact. Please try again later."
+        }
+      },
+      "AVATAR": {
+        "UPLOAD": {
+          "ERROR_MESSAGE": "Could not upload avatar. Please try again later.",
+          "SUCCESS_MESSAGE": "Avatar uploaded successfully"
+        },
+        "DELETE": {
+          "SUCCESS_MESSAGE": "Avatar deleted successfully",
+          "ERROR_MESSAGE": "Could not delete avatar. Please try again later."
+        }
+      }
+    },
     "SIDEBAR": {
+      "TABS": {
+        "ATTRIBUTES": "Attributes",
+        "HISTORY": "History",
+        "NOTES": "Notes",
+        "MERGE": "Merge"
+      },
+      "HISTORY": {
+        "EMPTY_STATE": "There are no previous conversations associated to this contact"
+      },
       "ATTRIBUTES": {
         "SEARCH_PLACEHOLDER": "Search for attributes",
         "UNUSED_ATTRIBUTES": "{count} Used attribute | {count} Unused attributes",
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index 3b4e06244..9002a05de 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -1,123 +1,149 @@
-<script>
-import { mapGetters } from 'vuex';
-import ContactInfoPanel from '../components/ContactInfoPanel.vue';
-import ContactNotes from 'dashboard/modules/notes/NotesOnContactPage.vue';
-import SettingsHeader from '../../settings/SettingsHeader.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'vue-router';
 
-export default {
-  components: {
-    ContactInfoPanel,
-    ContactNotes,
-    SettingsHeader,
-    Spinner,
-    Thumbnail,
-  },
-  props: {
-    contactId: {
-      type: [String, Number],
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedTabIndex: 0,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    tabs() {
-      return [
-        {
-          key: 0,
-          name: this.$t('NOTES.HEADER.TITLE'),
-        },
-      ];
-    },
-    showEmptySearchResult() {
-      const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
-      return hasEmptyResults;
-    },
-    contact() {
-      return this.$store.getters['contacts/getContact'](this.contactId);
-    },
-    backUrl() {
-      if (window.history.state?.back || window.history.length > 1) {
-        return '';
-      }
-      return `/app/accounts/${this.$route.params.accountId}/contacts`;
-    },
-  },
-  mounted() {
-    this.fetchContactDetails();
-  },
-  methods: {
-    onClickTabChange(index) {
-      this.selectedTabIndex = index;
-    },
-    fetchContactDetails() {
-      const { contactId: id } = this;
-      this.$store.dispatch('contacts/show', { id });
-    },
-  },
+import ContactsDetailsLayout from 'dashboard/components-next/Contacts/ContactsDetailsLayout.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ContactDetails from 'dashboard/components-next/Contacts/Pages/ContactDetails.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import ContactNotes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue';
+import ContactHistory from 'dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue';
+import ContactMerge from 'dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue';
+import ContactCustomAttributes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue';
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const contact = useMapGetter('contacts/getContactById');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const activeTab = ref('attributes');
+const contactMergeRef = ref(null);
+
+const isFetchingItem = computed(() => uiFlags.value.isFetchingItem);
+const isMergingContact = computed(() => uiFlags.value.isMerging);
+
+const selectedContact = computed(() => contact.value(route.params.contactId));
+
+const showSpinner = computed(
+  () => isFetchingItem.value || isMergingContact.value
+);
+
+const { t } = useI18n();
+
+const CONTACT_TABS_OPTIONS = [
+  { key: 'ATTRIBUTES', value: 'attributes' },
+  { key: 'HISTORY', value: 'history' },
+  { key: 'NOTES', value: 'notes' },
+  { key: 'MERGE', value: 'merge' },
+];
+
+const tabs = computed(() => {
+  return CONTACT_TABS_OPTIONS.map(tab => ({
+    label: t(`CONTACTS_LAYOUT.SIDEBAR.TABS.${tab.key}`),
+    value: tab.value,
+  }));
+});
+
+const activeTabIndex = computed(() => {
+  return CONTACT_TABS_OPTIONS.findIndex(v => v.value === activeTab.value);
+});
+
+const goToContactsList = () => {
+  if (window.history.state?.back || window.history.length > 1) {
+    router.back();
+  } else {
+    router.push(`/app/accounts/${route.params.accountId}/contacts?page=1`);
+  }
 };
+
+const fetchActiveContact = async () => {
+  if (route.params.contactId) {
+    store.dispatch('contacts/show', { id: route.params.contactId });
+  }
+};
+
+const handleTabChange = tab => {
+  activeTab.value = tab.value;
+};
+
+const fetchContactNotes = () => {
+  const { contactId } = route.params;
+  if (contactId) store.dispatch('contactNotes/get', { contactId });
+};
+
+const fetchContactConversations = () => {
+  const { contactId } = route.params;
+  if (contactId) store.dispatch('contactConversations/get', contactId);
+};
+
+const fetchAttributes = () => {
+  store.dispatch('attributes/get');
+};
+
+onMounted(() => {
+  fetchActiveContact();
+  fetchContactNotes();
+  fetchContactConversations();
+  fetchAttributes();
+});
 </script>
 
 <template>
   <div
-    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
   >
-    <SettingsHeader
-      button-route="new"
-      :header-title="contact.name"
-      show-back-button
-      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
-      :back-url="backUrl"
-      :show-new-button="false"
+    <ContactsDetailsLayout
+      :button-label="$t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
+      :selected-contact="selectedContact"
+      is-detail-view
+      :show-pagination-footer="false"
+      @go-to-contacts-list="goToContactsList"
     >
-      <Thumbnail
-        v-if="contact.thumbnail"
-        :src="contact.thumbnail"
-        :username="contact.name"
-        size="32px"
-        class="mr-2 rtl:mr-0 rtl:ml-2"
-      />
-    </SettingsHeader>
-
-    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
-      <Spinner size="" />
-      <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
-    </div>
-    <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
-      <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
-        <ContactInfoPanel
-          :show-close-button="false"
-          :show-avatar="false"
-          :contact="contact"
-        />
-        <div class="w-3/4 h-full">
-          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
-            <woot-tabs-item
-              v-for="(tab, index) in tabs"
-              :key="tab.key"
-              :index="index"
-              :name="tab.name"
-              :show-badge="false"
-            />
-          </woot-tabs>
-          <div
-            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
-          >
-            <ContactNotes
-              v-if="selectedTabIndex === 0"
-              :contact-id="Number(contactId)"
-            />
-          </div>
-        </div>
+      <div
+        v-if="showSpinner"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
       </div>
-    </div>
+      <ContactDetails
+        v-else-if="selectedContact"
+        :selected-contact="selectedContact"
+        @go-to-contacts-list="goToContactsList"
+      />
+      <template #sidebar>
+        <div class="px-6">
+          <TabBar
+            :tabs="tabs"
+            :initial-active-tab="activeTabIndex"
+            class="w-full [&>button]:w-full bg-n-alpha-black2"
+            @tab-changed="handleTabChange"
+          />
+        </div>
+        <div
+          v-if="isFetchingItem"
+          class="flex items-center justify-center py-10 text-n-slate-11"
+        >
+          <Spinner />
+        </div>
+        <template v-else>
+          <ContactCustomAttributes
+            v-if="activeTab === 'attributes'"
+            :selected-contact="selectedContact"
+          />
+          <ContactNotes v-if="activeTab === 'notes'" />
+          <ContactHistory v-if="activeTab === 'history'" />
+          <ContactMerge
+            v-if="activeTab === 'merge'"
+            ref="contactMergeRef"
+            :selected-contact="selectedContact"
+            @go-to-contacts-list="goToContactsList"
+          />
+        </template>
+      </template>
+    </ContactsDetailsLayout>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
index af18ea684..a491d0829 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -133,6 +133,7 @@ const fetchSavedOrAppliedFilteredContact = async (payload, page = 1) => {
 };
 
 const searchContacts = debounce(async (value, page = 1) => {
+  await store.dispatch('contacts/clearContactFilters');
   searchValue.value = value;
 
   if (!value) {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/routes.js b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
index 7bbefa4a4..ea5238a3b 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
@@ -1,44 +1,60 @@
-/* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
 import ContactsIndex from './pages/ContactsIndex.vue';
 import ContactManageView from './pages/ContactManageView.vue';
 
+const commonMeta = {
+  permissions: ['administrator', 'agent', 'contact_manage'],
+};
+
 export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts'),
     component: ContactsIndex,
-    name: 'contacts_dashboard_index',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
-  },
-
-  {
-    path: frontendURL('accounts/:accountId/contacts/segments/:segmentId'),
-    component: ContactsIndex,
-    name: 'contacts_dashboard_segments_index',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
-  },
-
-  {
-    path: frontendURL('accounts/:accountId/contacts/labels/:label'),
-    component: ContactsIndex,
-    name: 'contacts_dashboard_labels_index',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
+    meta: commonMeta,
+    children: [
+      {
+        path: '',
+        name: 'contacts_dashboard_index',
+        component: ContactsIndex,
+        meta: commonMeta,
+      },
+      {
+        path: 'segments/:segmentId',
+        name: 'contacts_dashboard_segments_index',
+        component: ContactsIndex,
+        meta: commonMeta,
+      },
+      {
+        path: 'labels/:label',
+        name: 'contacts_dashboard_labels_index',
+        component: ContactsIndex,
+        meta: commonMeta,
+      },
+    ],
   },
   {
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
-    name: 'contacts_edit',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
     component: ContactManageView,
-    props: route => {
-      return { contactId: route.params.contactId };
-    },
+    meta: commonMeta,
+    children: [
+      {
+        path: '',
+        name: 'contacts_edit',
+        component: ContactManageView,
+        meta: commonMeta,
+      },
+      {
+        path: 'segments/:segmentId',
+        name: 'contacts_edit_segment',
+        component: ContactManageView,
+        meta: commonMeta,
+      },
+      {
+        path: 'labels/:label',
+        name: 'contacts_edit_label',
+        component: ContactManageView,
+        meta: commonMeta,
+      },
+    ],
   },
 ];
diff --git a/app/javascript/dashboard/store/modules/attributes.js b/app/javascript/dashboard/store/modules/attributes.js
index c7cb771a5..3d0cd78bd 100644
--- a/app/javascript/dashboard/store/modules/attributes.js
+++ b/app/javascript/dashboard/store/modules/attributes.js
@@ -35,6 +35,12 @@ export const getters = {
       record => record.attribute_model === attributeModel
     );
   },
+  getAttributesByModelType: _state => attributeModel => {
+    const records = _state.records.filter(
+      record => record.attribute_model === attributeModel
+    );
+    return camelcaseKeys(records, { deep: true });
+  },
 };
 
 export const actions = {
diff --git a/app/javascript/dashboard/store/modules/contactConversations.js b/app/javascript/dashboard/store/modules/contactConversations.js
index 795578e63..55dfcf441 100644
--- a/app/javascript/dashboard/store/modules/contactConversations.js
+++ b/app/javascript/dashboard/store/modules/contactConversations.js
@@ -1,6 +1,7 @@
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
 import ConversationApi from '../../api/conversations';
+import camelcaseKeys from 'camelcase-keys';
 
 export const createMessagePayload = (payload, message) => {
   const { content, cc_emails, bcc_emails } = message;
@@ -74,6 +75,10 @@ export const getters = {
   getContactConversation: $state => id => {
     return $state.records[Number(id)] || [];
   },
+  getAllConversationsByContactId: $state => id => {
+    const records = $state.records[Number(id)] || [];
+    return camelcaseKeys(records, { deep: true });
+  },
 };
 
 export const actions = {
diff --git a/app/javascript/dashboard/store/modules/contactNotes.js b/app/javascript/dashboard/store/modules/contactNotes.js
index 2a82981a3..005a4f113 100644
--- a/app/javascript/dashboard/store/modules/contactNotes.js
+++ b/app/javascript/dashboard/store/modules/contactNotes.js
@@ -1,5 +1,6 @@
 import types from '../mutation-types';
 import ContactNotesAPI from '../../api/contactNotes';
+import camelcaseKeys from 'camelcase-keys';
 
 export const state = {
   records: {},
@@ -18,6 +19,11 @@ export const getters = {
   getUIFlags(_state) {
     return _state.uiFlags;
   },
+  getAllNotesByContactId: _state => contactId => {
+    const records = _state.records[contactId] || [];
+    const contactNotes = records.sort((r1, r2) => r2.id - r1.id);
+    return camelcaseKeys(contactNotes);
+  },
 };
 
 export const actions = {
diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js
index 5b67029c0..a78b66cba 100644
--- a/app/javascript/dashboard/store/modules/contacts/actions.js
+++ b/app/javascript/dashboard/store/modules/contacts/actions.js
@@ -34,7 +34,7 @@ const buildContactFormData = contactParams => {
   return formData;
 };
 
-export const raiseContactCreateErrors = error => {
+export const handleContactOperationErrors = error => {
   if (error.response?.status === 422) {
     throw new DuplicateContactException(error.response.data.attributes);
   } else if (error.response?.data?.message) {
@@ -91,9 +91,12 @@ export const actions = {
   },
 
   update: async ({ commit }, { id, isFormData = false, ...contactParams }) => {
-    const decamelizedContactParams = decamelizeKeys(contactParams, {
-      deep: true,
-    });
+    const { avatar, customAttributes, ...paramsToDecamelize } = contactParams;
+    const decamelizedContactParams = {
+      ...decamelizeKeys(paramsToDecamelize),
+      ...(customAttributes && { custom_attributes: customAttributes }),
+      ...(avatar && { avatar }),
+    };
     commit(types.SET_CONTACT_UI_FLAG, { isUpdating: true });
     try {
       const response = await ContactAPI.update(
@@ -106,11 +109,7 @@ export const actions = {
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
     } catch (error) {
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
-      if (error.response?.status === 422) {
-        throw new DuplicateContactException(error.response.data.attributes);
-      } else {
-        throw new Error(error);
-      }
+      handleContactOperationErrors(error);
     }
   },
 
@@ -132,7 +131,7 @@ export const actions = {
       return response.data.payload.contact;
     } catch (error) {
       commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
-      return raiseContactCreateErrors(error);
+      return handleContactOperationErrors(error);
     }
   },
 
diff --git a/app/javascript/dashboard/store/modules/contacts/getters.js b/app/javascript/dashboard/store/modules/contacts/getters.js
index 06278d878..5a75ac091 100644
--- a/app/javascript/dashboard/store/modules/contacts/getters.js
+++ b/app/javascript/dashboard/store/modules/contacts/getters.js
@@ -17,6 +17,13 @@ export const getters = {
     const contact = $state.records[id];
     return contact || {};
   },
+  getContactById: $state => id => {
+    const contact = $state.records[id];
+    return camelcaseKeys(contact || {}, {
+      deep: true,
+      stopPaths: ['custom_attributes'],
+    });
+  },
   getMeta: $state => {
     return $state.meta;
   },
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index 8e1dbb301..001cc237e 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -7,6 +7,7 @@ import FBChannel from '../../api/channel/fbChannel';
 import TwilioChannel from '../../api/channel/twilioChannel';
 import { throwErrorMessage } from '../utils/api';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
+import camelcaseKeys from 'camelcase-keys';
 import { ACCOUNT_EVENTS } from '../../helper/AnalyticsHelper/events';
 
 const buildInboxData = inboxParams => {
@@ -92,6 +93,12 @@ export const getters = {
     );
     return inbox || {};
   },
+  getInboxById: $state => inboxId => {
+    const [inbox] = $state.records.filter(
+      record => record.id === Number(inboxId)
+    );
+    return camelcaseKeys(inbox || {}, { deep: true });
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },

From 9b6830a610496be4e03b95fa52ee4adf1110c390 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 5 Dec 2024 03:18:12 +0530
Subject: [PATCH 38/74] fix: Update UI issues with sidebar (#10535)

This PR fixes a few UI issues with the sidebar

1. `z-index` issues with sidebar dropdowns
2. Move the event listener to the root of the dropdown container, it
allows more consistent behaviour of the trigger, earlier the click on
the trigger when the dropdown was open would cause the container to
re-render
3. Use `perserve-open` for the status switcher menu item in the profile
menu.
4. Use `sessionStorage` instead of `localStorage` to preserve sidebar
dropdown info. When opening the dashboard without directly going to a
specific route, any previous known item would get expanded even if it's
link was not active, this caused issues across tabs too, this fixes it.
5. Use `snakeCaseKeys` instead of `decamelize` we had two packages doing
the same thing
6. Update `vueuse` the new version is vue3 only
---
 .../dropdown-menu/base/DropdownContainer.vue  |   4 +-
 .../components-next/sidebar/Sidebar.vue       |   2 +-
 .../sidebar/SidebarProfileMenuStatus.vue      |   4 +-
 .../store/modules/contacts/actions.js         |   6 +-
 package.json                                  |   5 +-
 pnpm-lock.yaml                                | 211 +++++++++++++-----
 6 files changed, 166 insertions(+), 66 deletions(-)

diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
index a3b53f955..373bb526f 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
@@ -21,9 +21,9 @@ provideDropdownContext({
 </script>
 
 <template>
-  <div class="relative space-y-2">
+  <div v-on-click-outside="closeMenu" class="relative space-y-2">
     <slot name="trigger" :is-open :toggle="() => toggle()" />
-    <div v-if="isOpen" v-on-click-outside="closeMenu" class="absolute">
+    <div v-if="isOpen" class="absolute">
       <slot />
     </div>
   </div>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index be790a623..f9b702c33 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -45,7 +45,7 @@ useSidebarKeyboardShortcuts(toggleShortcutModalFn);
 const expandedItem = useStorage(
   'next-sidebar-expanded-item',
   null,
-  localStorage
+  sessionStorage
 );
 
 const setExpandedItem = name => {
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
index 418319cc3..0fdf96162 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@@ -67,7 +67,7 @@ function updateAutoOffline(autoOffline) {
 <template>
   <DropdownSection>
     <div class="grid gap-0">
-      <DropdownItem>
+      <DropdownItem preserve-open>
         <div class="flex-grow flex items-center gap-1">
           {{ $t('SIDEBAR.SET_YOUR_AVAILABILITY') }}
         </div>
@@ -90,7 +90,7 @@ function updateAutoOffline(autoOffline) {
               </div>
             </Button>
           </template>
-          <DropdownBody class="min-w-32">
+          <DropdownBody class="min-w-32 z-20">
             <DropdownItem
               v-for="status in availabilityStatuses"
               :key="status.value"
diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js
index a78b66cba..be1a11790 100644
--- a/app/javascript/dashboard/store/modules/contacts/actions.js
+++ b/app/javascript/dashboard/store/modules/contacts/actions.js
@@ -4,7 +4,7 @@ import {
 } from 'shared/helpers/CustomErrors';
 import types from '../../mutation-types';
 import ContactAPI from '../../../api/contacts';
-import decamelizeKeys from 'decamelize-keys';
+import snakecaseKeys from 'snakecase-keys';
 import AccountActionsAPI from '../../../api/accountActions';
 import AnalyticsHelper from '../../../helper/AnalyticsHelper';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -93,7 +93,7 @@ export const actions = {
   update: async ({ commit }, { id, isFormData = false, ...contactParams }) => {
     const { avatar, customAttributes, ...paramsToDecamelize } = contactParams;
     const decamelizedContactParams = {
-      ...decamelizeKeys(paramsToDecamelize),
+      ...snakecaseKeys(paramsToDecamelize),
       ...(customAttributes && { custom_attributes: customAttributes }),
       ...(avatar && { avatar }),
     };
@@ -114,7 +114,7 @@ export const actions = {
   },
 
   create: async ({ commit }, { isFormData = false, ...contactParams }) => {
-    const decamelizedContactParams = decamelizeKeys(contactParams, {
+    const decamelizedContactParams = snakecaseKeys(contactParams, {
       deep: true,
     });
     commit(types.SET_CONTACT_UI_FLAG, { isCreating: true });
diff --git a/package.json b/package.json
index 5978f3696..08a9d0bf2 100644
--- a/package.json
+++ b/package.json
@@ -53,8 +53,8 @@
     "@vue/compiler-sfc": "^3.5.8",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/components": "^11.1.0",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/components": "^12.0.0",
+    "@vueuse/core": "^12.0.0",
     "activestorage": "^5.2.6",
     "axios": "^1.7.7",
     "camelcase-keys": "^9.1.3",
@@ -65,7 +65,6 @@
     "countries-and-timezones": "^3.6.0",
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
-    "decamelize-keys": "^2.0.1",
     "dompurify": "3.1.6",
     "floating-vue": "^5.2.2",
     "highlight.js": "^11.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e11ba6920..5642db061 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,11 +83,11 @@ importers:
         specifier: ^2.0.4
         version: 2.0.4(vue@3.5.12(typescript@5.6.2))
       '@vueuse/components':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.12(typescript@5.6.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.6.2)
       '@vueuse/core':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.12(typescript@5.6.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.6.2)
       activestorage:
         specifier: ^5.2.6
         version: 5.2.8
@@ -118,9 +118,6 @@ importers:
       date-fns-tz:
         specifier: ^1.3.3
         version: 1.3.8(date-fns@2.21.1)
-      decamelize-keys:
-        specifier: ^2.0.1
-        version: 2.0.1
       dompurify:
         specifier: 3.1.6
         version: 3.1.6
@@ -1805,24 +1802,36 @@ packages:
   '@vue/compiler-core@3.5.12':
     resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
 
+  '@vue/compiler-core@3.5.13':
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+
   '@vue/compiler-core@3.5.8':
     resolution: {integrity: sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==}
 
   '@vue/compiler-dom@3.5.12':
     resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
 
+  '@vue/compiler-dom@3.5.13':
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
+
   '@vue/compiler-dom@3.5.8':
     resolution: {integrity: sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==}
 
   '@vue/compiler-sfc@3.5.12':
     resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
 
+  '@vue/compiler-sfc@3.5.13':
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
+
   '@vue/compiler-sfc@3.5.8':
     resolution: {integrity: sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==}
 
   '@vue/compiler-ssr@3.5.12':
     resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
 
+  '@vue/compiler-ssr@3.5.13':
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
+
   '@vue/compiler-ssr@3.5.8':
     resolution: {integrity: sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==}
 
@@ -1835,20 +1844,37 @@ packages:
   '@vue/reactivity@3.5.12':
     resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
 
+  '@vue/reactivity@3.5.13':
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
+
   '@vue/runtime-core@3.5.12':
     resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
 
+  '@vue/runtime-core@3.5.13':
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
+
   '@vue/runtime-dom@3.5.12':
     resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
 
+  '@vue/runtime-dom@3.5.13':
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
+
   '@vue/server-renderer@3.5.12':
     resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
     peerDependencies:
       vue: 3.5.12
 
+  '@vue/server-renderer@3.5.13':
+    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
+    peerDependencies:
+      vue: 3.5.13
+
   '@vue/shared@3.5.12':
     resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+
   '@vue/shared@3.5.8':
     resolution: {integrity: sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==}
 
@@ -1873,26 +1899,26 @@ packages:
       '@vue/composition-api':
         optional: true
 
-  '@vueuse/components@11.1.0':
-    resolution: {integrity: sha512-8CTbvH1rHfAlqsMdMg6G2OiIvHiHn8HRx0yyJ+Ri/C8J6cLylXAd7VESawoCAkRdAXT4ucPnj/uYHZqEb0JbBQ==}
+  '@vueuse/components@12.0.0':
+    resolution: {integrity: sha512-XpOoBXYRuFuUiiq+HsMX6rGzqvcHdKnbT4sbR0FHYxwSGBHO3Zli8pPTZoLRNBGp4CGov7BRCnANEK/1Ch/6tQ==}
 
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
-  '@vueuse/core@11.1.0':
-    resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
+  '@vueuse/core@12.0.0':
+    resolution: {integrity: sha512-C12RukhXiJCbx4MGhjmd/gH52TjJsc3G0E0kQj/kb19H3Nt6n1CA4DRWuTdWWcaFRdlTe0npWDS942mvacvNBw==}
 
   '@vueuse/metadata@10.11.1':
     resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
-  '@vueuse/metadata@11.1.0':
-    resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}
+  '@vueuse/metadata@12.0.0':
+    resolution: {integrity: sha512-Yzimd1D3sjxTDOlF05HekU5aSGdKjxhuhRFHA7gDWLn57PRbBIh+SF5NmjhJ0WRgF3my7T8LBucyxdFJjIfRJQ==}
 
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
-  '@vueuse/shared@11.1.0':
-    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
+  '@vueuse/shared@12.0.0':
+    resolution: {integrity: sha512-3i6qtcq2PIio5i/vVYidkkcgvmTjCqrf26u+Fd4LhnbBmIT6FN8y6q/GJERp8lfcB9zVEfjdV0Br0443qZuJpw==}
 
   '@xmldom/xmldom@0.7.13':
     resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==}
@@ -2440,14 +2466,6 @@ packages:
       supports-color:
         optional: true
 
-  decamelize-keys@2.0.1:
-    resolution: {integrity: sha512-nrNeSCtU2gV3Apcmn/EZ+aR20zKDuNDStV67jPiupokD3sOAFeMzslLMCFdKv1sPqzwoe5ZUhsSW9IAVgKSL/Q==}
-    engines: {node: '>=14.16'}
-
-  decamelize@6.0.0:
-    resolution: {integrity: sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
 
@@ -3492,6 +3510,9 @@ packages:
   magic-string@0.30.12:
     resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
 
+  magic-string@0.30.14:
+    resolution: {integrity: sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==}
+
   magicast@0.3.4:
     resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
 
@@ -3652,6 +3673,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@5.0.8:
     resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}
     engines: {node: ^18 || >=20}
@@ -3872,6 +3898,9 @@ packages:
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -4123,6 +4152,10 @@ packages:
     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4687,10 +4720,6 @@ packages:
     resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
     engines: {node: '>=10'}
 
-  type-fest@3.13.1:
-    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
-    engines: {node: '>=14.16'}
-
   type-fest@4.26.1:
     resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
     engines: {node: '>=16'}
@@ -4984,6 +5013,14 @@ packages:
       typescript:
         optional: true
 
+  vue@3.5.13:
+    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   vuedraggable@4.1.0:
     resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
     peerDependencies:
@@ -6821,6 +6858,14 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.13':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/shared': 3.5.13
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-core@3.5.8':
     dependencies:
       '@babel/parser': 7.25.6
@@ -6834,6 +6879,11 @@ snapshots:
       '@vue/compiler-core': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/compiler-dom@3.5.13':
+    dependencies:
+      '@vue/compiler-core': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/compiler-dom@3.5.8':
     dependencies:
       '@vue/compiler-core': 3.5.8
@@ -6851,6 +6901,18 @@ snapshots:
       postcss: 8.4.47
       source-map-js: 1.2.1
 
+  '@vue/compiler-sfc@3.5.13':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/compiler-core': 3.5.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      estree-walker: 2.0.2
+      magic-string: 0.30.14
+      postcss: 8.4.49
+      source-map-js: 1.2.1
+
   '@vue/compiler-sfc@3.5.8':
     dependencies:
       '@babel/parser': 7.25.6
@@ -6868,6 +6930,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/compiler-ssr@3.5.13':
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/compiler-ssr@3.5.8':
     dependencies:
       '@vue/compiler-dom': 3.5.8
@@ -6881,11 +6948,20 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.12
 
+  '@vue/reactivity@3.5.13':
+    dependencies:
+      '@vue/shared': 3.5.13
+
   '@vue/runtime-core@3.5.12':
     dependencies:
       '@vue/reactivity': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/runtime-core@3.5.13':
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/runtime-dom@3.5.12':
     dependencies:
       '@vue/reactivity': 3.5.12
@@ -6893,14 +6969,29 @@ snapshots:
       '@vue/shared': 3.5.12
       csstype: 3.1.3
 
+  '@vue/runtime-dom@3.5.13':
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/runtime-core': 3.5.13
+      '@vue/shared': 3.5.13
+      csstype: 3.1.3
+
   '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@vue/compiler-ssr': 3.5.12
       '@vue/shared': 3.5.12
       vue: 3.5.12(typescript@5.6.2)
 
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.6.2))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      vue: 3.5.13(typescript@5.6.2)
+
   '@vue/shared@3.5.12': {}
 
+  '@vue/shared@3.5.13': {}
+
   '@vue/shared@3.5.8': {}
 
   '@vue/test-utils@2.4.6':
@@ -6918,14 +7009,13 @@ snapshots:
       vue: 3.5.12(typescript@5.6.2)
       vue-demi: 0.13.11(vue@3.5.12(typescript@5.6.2))
 
-  '@vueuse/components@11.1.0(vue@3.5.12(typescript@5.6.2))':
+  '@vueuse/components@12.0.0(typescript@5.6.2)':
     dependencies:
-      '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.2))
-      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/core': 12.0.0(typescript@5.6.2)
+      '@vueuse/shared': 12.0.0(typescript@5.6.2)
+      vue: 3.5.13(typescript@5.6.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.2))':
     dependencies:
@@ -6937,19 +7027,18 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@11.1.0(vue@3.5.12(typescript@5.6.2))':
+  '@vueuse/core@12.0.0(typescript@5.6.2)':
     dependencies:
       '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 11.1.0
-      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/metadata': 12.0.0
+      '@vueuse/shared': 12.0.0(typescript@5.6.2)
+      vue: 3.5.13(typescript@5.6.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   '@vueuse/metadata@10.11.1': {}
 
-  '@vueuse/metadata@11.1.0': {}
+  '@vueuse/metadata@12.0.0': {}
 
   '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.6.2))':
     dependencies:
@@ -6958,12 +7047,11 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@11.1.0(vue@3.5.12(typescript@5.6.2))':
+  '@vueuse/shared@12.0.0(typescript@5.6.2)':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+      vue: 3.5.13(typescript@5.6.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   '@xmldom/xmldom@0.7.13': {}
 
@@ -7528,15 +7616,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  decamelize-keys@2.0.1:
-    dependencies:
-      decamelize: 6.0.0
-      map-obj: 4.3.0
-      quick-lru: 6.1.2
-      type-fest: 3.13.1
-
-  decamelize@6.0.0: {}
-
   decimal.js@10.4.3: {}
 
   deep-eql@5.0.2: {}
@@ -8839,6 +8918,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.14:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magicast@0.3.4:
     dependencies:
       '@babel/parser': 7.25.6
@@ -8992,6 +9075,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@3.3.8: {}
+
   nanoid@5.0.8: {}
 
   nanospinner@1.1.0:
@@ -9203,6 +9288,8 @@ snapshots:
 
   picocolors@1.1.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   pidtree@0.6.0: {}
@@ -9481,6 +9568,12 @@ snapshots:
       picocolors: 1.1.0
       source-map-js: 1.2.1
 
+  postcss@8.4.49:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
@@ -10134,8 +10227,6 @@ snapshots:
 
   type-fest@1.4.0: {}
 
-  type-fest@3.13.1: {}
-
   type-fest@4.26.1: {}
 
   typed-array-buffer@1.0.0:
@@ -10455,6 +10546,16 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.2
 
+  vue@3.5.13(typescript@5.6.2):
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/runtime-dom': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.6.2))
+      '@vue/shared': 3.5.13
+    optionalDependencies:
+      typescript: 5.6.2
+
   vuedraggable@4.1.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       sortablejs: 1.14.0

From bf58a18af42542a68d837a276f3982bdad04d8e6 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 5 Dec 2024 03:28:53 +0530
Subject: [PATCH 39/74] fix: Update contact details page errors (#10536)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../ContactsSidebar/ContactCustomAttributes.vue     |  5 +----
 .../dashboard/composables/useTransformKeys.js       | 13 -------------
 .../dashboard/store/modules/attributes.js           |  6 ------
 .../dashboard/store/modules/contacts/actions.js     |  2 +-
 4 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
index cb9a45ce3..f2a5c1ee8 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
@@ -16,10 +16,7 @@ const { t } = useI18n();
 
 const searchQuery = ref('');
 
-const contactAttributes = computed(() => {
-  const attributes = useMapGetter('attributes/getAttributesByModelType');
-  return attributes.value('contact_attribute') || [];
-});
+const contactAttributes = useMapGetter('attributes/getContactAttributes') || [];
 
 const hasContactAttributes = computed(
   () => contactAttributes.value?.length > 0
diff --git a/app/javascript/dashboard/composables/useTransformKeys.js b/app/javascript/dashboard/composables/useTransformKeys.js
index 6c5f72478..e1feaf1a7 100644
--- a/app/javascript/dashboard/composables/useTransformKeys.js
+++ b/app/javascript/dashboard/composables/useTransformKeys.js
@@ -23,16 +23,3 @@ export function useSnakeCase(payload) {
   const unrefPayload = unref(payload);
   return snakecaseKeys(unrefPayload);
 }
-
-/**
- * Converts a string from snake_case to camelCase
- * @param {string} str - String to convert (can contain letters, numbers, or both)
- *                      Examples: 'hello_world', 'user_123', 'checkbox_2', 'test_string_99'
- * @returns {string} Converted string in camelCase
- *                   Examples: 'helloWorld', 'user123', 'checkbox2', 'testString99'
- */
-export function toCamelCase(str) {
-  return str
-    .toLowerCase()
-    .replace(/_([a-z0-9])/g, (_, char) => char.toUpperCase());
-}
diff --git a/app/javascript/dashboard/store/modules/attributes.js b/app/javascript/dashboard/store/modules/attributes.js
index 3d0cd78bd..c7cb771a5 100644
--- a/app/javascript/dashboard/store/modules/attributes.js
+++ b/app/javascript/dashboard/store/modules/attributes.js
@@ -35,12 +35,6 @@ export const getters = {
       record => record.attribute_model === attributeModel
     );
   },
-  getAttributesByModelType: _state => attributeModel => {
-    const records = _state.records.filter(
-      record => record.attribute_model === attributeModel
-    );
-    return camelcaseKeys(records, { deep: true });
-  },
 };
 
 export const actions = {
diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js
index be1a11790..80fe44beb 100644
--- a/app/javascript/dashboard/store/modules/contacts/actions.js
+++ b/app/javascript/dashboard/store/modules/contacts/actions.js
@@ -93,7 +93,7 @@ export const actions = {
   update: async ({ commit }, { id, isFormData = false, ...contactParams }) => {
     const { avatar, customAttributes, ...paramsToDecamelize } = contactParams;
     const decamelizedContactParams = {
-      ...snakecaseKeys(paramsToDecamelize),
+      ...snakecaseKeys(paramsToDecamelize, { deep: true }),
       ...(customAttributes && { custom_attributes: customAttributes }),
       ...(avatar && { avatar }),
     };

From 3edc0542cc0f5e3a91e53412c8fa208e09ab77e6 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 5 Dec 2024 04:32:29 +0530
Subject: [PATCH 40/74] fix: Fix issue with profile picture not updating
 (#10532)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR resolves the issue with updating the profile picture in the profile settings.

**Cause of issue**
The issue can be reproduced with the old `ProfileAvatar.vue` component.
While the exact reason is unclear, it seems related to cases where the
file might be `null`.

**Solution**
Replaced the old `ProfileAvatar.vue` with `Avatar.vue` and tested it. It
works fine. I’ve attached a loom video below.

Fixes https://linear.app/chatwoot/issue/CW-3768/profile-picture-bug

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 app/controllers/api/v1/profiles_controller.rb |  2 +-
 .../components-next/avatar/Avatar.vue         |  2 +-
 .../dashboard/settings/profile/Index.vue      |  1 -
 .../settings/profile/UserProfilePicture.vue   | 18 ++--
 .../dashboard/store/modules/auth.js           |  5 +-
 .../v3/components/Form/ProfileAvatar.vue      | 85 -------------------
 .../api/v1/profiles/avatar.json.jbuilder      |  1 +
 .../api/v1/profiles_controller_spec.rb        |  2 +
 8 files changed, 16 insertions(+), 100 deletions(-)
 delete mode 100644 app/javascript/v3/components/Form/ProfileAvatar.vue
 create mode 100644 app/views/api/v1/profiles/avatar.json.jbuilder

diff --git a/app/controllers/api/v1/profiles_controller.rb b/app/controllers/api/v1/profiles_controller.rb
index bd3c2673c..ae1a1fe30 100644
--- a/app/controllers/api/v1/profiles_controller.rb
+++ b/app/controllers/api/v1/profiles_controller.rb
@@ -17,7 +17,7 @@ class Api::V1::ProfilesController < Api::BaseController
 
   def avatar
     @user.avatar.attachment.destroy! if @user.avatar.attached?
-    head :ok
+    @user.reload
   end
 
   def auto_offline
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index ab87e33c9..fb23b3cff 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -132,7 +132,7 @@ const iconStyles = computed(() => ({
 }));
 
 const initialsStyles = computed(() => ({
-  fontSize: `${props.size > 32 ? 16 : props.size / 2}px`,
+  fontSize: `${Math.min(props.size / 2.5, 24)}px`,
 }));
 
 const invalidateCurrentImage = () => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index be1d166ab..a38046580 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -190,7 +190,6 @@ export default {
       <UserProfilePicture
         :src="avatarUrl"
         :name="name"
-        size="72px"
         @change="updateProfilePicture"
         @delete="deleteProfilePicture"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
index 87ac25efa..d86329b76 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -1,8 +1,6 @@
 <script setup>
-import { computed } from 'vue';
-import ProfileAvatar from 'v3/components/Form/ProfileAvatar.vue';
-import { removeEmoji } from 'shared/helpers/emoji';
-const props = defineProps({
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+defineProps({
   src: {
     type: String,
     default: '',
@@ -15,8 +13,6 @@ const props = defineProps({
 
 const emit = defineEmits(['change', 'delete']);
 
-const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
-
 const updateProfilePicture = e => {
   emit('change', e);
 };
@@ -31,10 +27,12 @@ const deleteProfilePicture = () => {
     <span class="text-sm font-medium text-ash-900">
       {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
     </span>
-    <ProfileAvatar
-      :src="src"
-      :name="userNameWithoutEmoji"
-      @change="updateProfilePicture"
+    <Avatar
+      :src="src || ''"
+      :name="name || ''"
+      :size="72"
+      allow-upload
+      @upload="updateProfilePicture"
       @delete="deleteProfilePicture"
     />
   </div>
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index 695edc3cb..fa49af339 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -133,9 +133,10 @@ export const actions = {
     }
   },
 
-  deleteAvatar: async () => {
+  deleteAvatar: async ({ commit }) => {
     try {
-      await authAPI.deleteAvatar();
+      const response = await authAPI.deleteAvatar();
+      commit(types.SET_CURRENT_USER, response.data);
     } catch (error) {
       // Ignore error
     }
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
deleted file mode 100644
index 32eff693a..000000000
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import InitialsAvatar from './InitialsAvatar.vue';
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['change', 'delete']);
-
-const hasImageLoaded = ref(false);
-const imageLoadedError = ref(false);
-const fileInputRef = ref(null);
-
-const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
-
-const onImageLoadError = () => {
-  imageLoadedError.value = true;
-};
-
-const onImageLoad = () => {
-  hasImageLoaded.value = true;
-  imageLoadedError.value = false;
-};
-
-const openFileInput = () => {
-  fileInputRef.value.click();
-};
-
-const onImageUpload = event => {
-  const [file] = event.target.files;
-  emit('change', {
-    file,
-    url: file ? URL.createObjectURL(file) : null,
-  });
-};
-
-const onAvatarDelete = () => {
-  emit('delete');
-};
-</script>
-
-<template>
-  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
-    <img
-      v-if="shouldShowImage"
-      class="rounded-xl h-[72px] w-[72px]"
-      :alt="name"
-      :src="src"
-      draggable="false"
-      @load="onImageLoad"
-      @error="onImageLoadError"
-    />
-    <InitialsAvatar v-else-if="!shouldShowImage" :name="name" :size="72" />
-
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onImageUpload"
-    />
-    <div class="hidden group-hover:block">
-      <button
-        v-if="src"
-        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
-        @click="onAvatarDelete"
-      >
-        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
-      </button>
-      <button
-        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
-        @click="openFileInput"
-      >
-        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/app/views/api/v1/profiles/avatar.json.jbuilder b/app/views/api/v1/profiles/avatar.json.jbuilder
new file mode 100644
index 000000000..0a4b4f9fa
--- /dev/null
+++ b/app/views/api/v1/profiles/avatar.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/user', formats: [:json], resource: @user
diff --git a/spec/controllers/api/v1/profiles_controller_spec.rb b/spec/controllers/api/v1/profiles_controller_spec.rb
index 28b4c5ed5..50404ad55 100644
--- a/spec/controllers/api/v1/profiles_controller_spec.rb
+++ b/spec/controllers/api/v1/profiles_controller_spec.rb
@@ -180,6 +180,8 @@ RSpec.describe 'Profile API', type: :request do
                as: :json
 
         expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+        expect(json_response['avatar_url']).to be_empty
       end
     end
   end

From f7b0d5dbe2243ceaf784b587586993b860049418 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 5 Dec 2024 10:55:28 +0530
Subject: [PATCH 41/74] fix: Reset contact attributes when form is updated
 (#10539)

---
 .../components-next/Contacts/Pages/ContactDetails.vue          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
index 57d2b1d43..3f92df408 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
@@ -68,7 +68,8 @@ const handleFormUpdate = updatedData => {
 
 const updateContact = async () => {
   try {
-    await store.dispatch('contacts/update', contactData.value);
+    const { customAttributes, ...basicContactData } = contactData.value;
+    await store.dispatch('contacts/update', basicContactData);
     useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
   } catch (error) {
     useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.ERROR_MESSAGE'));

From d635be4b2a8eb1d0045b9d2e5a773fa405598fc5 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 5 Dec 2024 10:56:00 +0530
Subject: [PATCH 42/74] fix: Fetch assignable agents in expanded layout
 (#10540)

---
 .../widgets/conversation/ConversationBox.vue          | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index a1cb09c82..210357a8b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -62,10 +62,13 @@ export default {
     },
   },
   watch: {
-    'currentChat.inbox_id'(inboxId) {
-      if (inboxId) {
-        this.$store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
-      }
+    'currentChat.inbox_id': {
+      immediate: true,
+      handler(inboxId) {
+        if (inboxId) {
+          this.$store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
+        }
+      },
     },
     'currentChat.id'() {
       this.fetchLabels();

From cdff624a0a33842d7760cf299dd36c2c727eb628 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 5 Dec 2024 19:05:04 +0530
Subject: [PATCH 43/74] feat: update notification settings (#10529)

https://github.com/user-attachments/assets/52ecf3f8-0329-4268-906e-d6102338f4af

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../components/SnackbarContainer.vue          |  10 +-
 .../dashboard/constants/appEvents.js          |   5 +
 .../helper/AudioAlerts/AudioMessageHelper.js  |   6 +
 .../AudioAlerts/AudioNotificationStore.js     |  37 +++
 .../DashboardAudioNotificationHelper.js       | 264 ++++++++++--------
 .../AudioAlerts/WindowVisibilityHelper.js     |  21 ++
 .../specs/AudioMessageHelper.spec.js          |  79 ++++++
 .../specs/AudioNotificationStore.spec.js      | 131 +++++++++
 .../specs/WindowVisibilityHelper.spec.js      | 114 ++++++++
 .../dashboard/helper/scriptHelpers.js         |  15 +-
 .../dashboard/i18n/locale/en/settings.json    |  26 +-
 .../settings/profile/AudioAlertCondition.vue  |   9 +-
 .../settings/profile/AudioAlertEvent.vue      |  83 ++++--
 .../settings/profile/AudioAlertTone.vue       |  74 +++--
 .../settings/profile/AudioNotifications.vue   | 179 ++++++------
 .../dashboard/settings/profile/constants.js   |  18 +-
 app/javascript/dashboard/store/utils/api.js   |   8 +-
 app/javascript/entrypoints/dashboard.js       |   7 -
 public/audio/dashboard/chime.mp3              | Bin 0 -> 68868 bytes
 public/audio/dashboard/magic.mp3              | Bin 0 -> 112098 bytes
 public/audio/dashboard/ping.mp3               | Bin 0 -> 41695 bytes
 21 files changed, 794 insertions(+), 292 deletions(-)
 create mode 100644 app/javascript/dashboard/constants/appEvents.js
 create mode 100644 app/javascript/dashboard/helper/AudioAlerts/AudioMessageHelper.js
 create mode 100644 app/javascript/dashboard/helper/AudioAlerts/AudioNotificationStore.js
 create mode 100644 app/javascript/dashboard/helper/AudioAlerts/WindowVisibilityHelper.js
 create mode 100644 app/javascript/dashboard/helper/AudioAlerts/specs/AudioMessageHelper.spec.js
 create mode 100644 app/javascript/dashboard/helper/AudioAlerts/specs/AudioNotificationStore.spec.js
 create mode 100644 app/javascript/dashboard/helper/AudioAlerts/specs/WindowVisibilityHelper.spec.js
 create mode 100644 public/audio/dashboard/chime.mp3
 create mode 100644 public/audio/dashboard/magic.mp3
 create mode 100644 public/audio/dashboard/ping.mp3

diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 549678ebc..b55d3865c 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -26,7 +26,13 @@ export default {
     emitter.off('newToastMessage', this.onNewToastMessage);
   },
   methods: {
-    onNewToastMessage({ message, action }) {
+    onNewToastMessage({ message: originalMessage, action }) {
+      // FIX ME: This is a temporary workaround to pass string from functions
+      // that doesn't have the context of the VueApp.
+      const usei18n = action?.usei18n;
+      const duration = action?.duration || this.duration;
+      const message = usei18n ? this.$t(originalMessage) : originalMessage;
+
       this.snackMessages.push({
         key: new Date().getTime(),
         message,
@@ -34,7 +40,7 @@ export default {
       });
       window.setTimeout(() => {
         this.snackMessages.splice(0, 1);
-      }, this.duration);
+      }, duration);
     },
   },
 };
diff --git a/app/javascript/dashboard/constants/appEvents.js b/app/javascript/dashboard/constants/appEvents.js
new file mode 100644
index 000000000..71f044232
--- /dev/null
+++ b/app/javascript/dashboard/constants/appEvents.js
@@ -0,0 +1,5 @@
+export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
+export const CHATWOOT_RESET = 'CHATWOOT_RESET';
+
+export const ANALYTICS_IDENTITY = 'ANALYTICS_IDENTITY';
+export const ANALYTICS_RESET = 'ANALYTICS_RESET';
diff --git a/app/javascript/dashboard/helper/AudioAlerts/AudioMessageHelper.js b/app/javascript/dashboard/helper/AudioAlerts/AudioMessageHelper.js
new file mode 100644
index 000000000..0590b1a58
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/AudioMessageHelper.js
@@ -0,0 +1,6 @@
+export const getAssignee = message => message?.conversation?.assignee_id;
+export const isConversationUnassigned = message => !getAssignee(message);
+export const isConversationAssignedToMe = (message, currentUserId) =>
+  getAssignee(message) === currentUserId;
+export const isMessageFromCurrentUser = (message, currentUserId) =>
+  message?.sender?.id === currentUserId;
diff --git a/app/javascript/dashboard/helper/AudioAlerts/AudioNotificationStore.js b/app/javascript/dashboard/helper/AudioAlerts/AudioNotificationStore.js
new file mode 100644
index 000000000..233516b99
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/AudioNotificationStore.js
@@ -0,0 +1,37 @@
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions';
+import { getUserPermissions } from 'dashboard/helper/permissionsHelper';
+
+class AudioNotificationStore {
+  constructor(store) {
+    this.store = store;
+  }
+
+  hasUnreadConversation = () => {
+    const mineConversation = this.store.getters.getMineChats({
+      assigneeType: 'me',
+      status: 'open',
+    });
+
+    return mineConversation.some(conv => conv.unread_count > 0);
+  };
+
+  isMessageFromCurrentConversation = message => {
+    return this.store.getters.getSelectedChat?.id === message.conversation_id;
+  };
+
+  hasConversationPermission = user => {
+    const currentAccountId = this.store.getters.getCurrentAccountId;
+    // Get the user permissions for the current account
+    const userPermissions = getUserPermissions(user, currentAccountId);
+    // Check if the user has the required permissions
+    const hasRequiredPermission = [...ROLES, ...CONVERSATION_PERMISSIONS].some(
+      permission => userPermissions.includes(permission)
+    );
+    return hasRequiredPermission;
+  };
+}
+
+export default AudioNotificationStore;
diff --git a/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js b/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
index 26417bcad..ca823fc31 100644
--- a/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
+++ b/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
@@ -1,92 +1,125 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { showBadgeOnFavicon } from './faviconHelper';
 import { initFaviconSwitcher } from './faviconHelper';
+
+import { EVENT_TYPES } from 'dashboard/routes/dashboard/settings/profile/constants.js';
+import GlobalStore from 'dashboard/store';
+import AudioNotificationStore from './AudioNotificationStore';
 import {
-  getAlertAudio,
-  initOnEvents,
-} from 'shared/helpers/AudioNotificationHelper';
-import {
-  ROLES,
-  CONVERSATION_PERMISSIONS,
-} from 'dashboard/constants/permissions.js';
-import { getUserPermissions } from 'dashboard/helper/permissionsHelper.js';
+  isConversationAssignedToMe,
+  isConversationUnassigned,
+  isMessageFromCurrentUser,
+} from './AudioMessageHelper';
+import WindowVisibilityHelper from './WindowVisibilityHelper';
+import { useAlert } from 'dashboard/composables';
 
 const NOTIFICATION_TIME = 30000;
+const ALERT_DURATION = 10000;
+const ALERT_PATH_PREFIX = '/audio/dashboard/';
+const DEFAULT_TONE = 'ding';
+const DEFAULT_ALERT_TYPE = ['none'];
 
-class DashboardAudioNotificationHelper {
-  constructor() {
-    this.recurringNotificationTimer = null;
-    this.audioAlertType = 'none';
-    this.playAlertOnlyWhenHidden = true;
-    this.alertIfUnreadConversationExist = false;
-    this.currentUser = null;
-    this.currentUserId = null;
-    this.audioAlertTone = 'ding';
+export class DashboardAudioNotificationHelper {
+  constructor(store) {
+    if (!store) {
+      throw new Error('store is required');
+    }
+    this.store = new AudioNotificationStore(store);
 
-    this.onAudioListenEvent = async () => {
-      try {
-        await getAlertAudio('', {
-          type: 'dashboard',
-          alertTone: this.audioAlertTone,
-        });
-        initOnEvents.forEach(event => {
-          document.removeEventListener(event, this.onAudioListenEvent, false);
-        });
-        this.playAudioEvery30Seconds();
-      } catch (error) {
-        // Ignore audio fetch errors
-      }
+    this.notificationConfig = {
+      audioAlertType: DEFAULT_ALERT_TYPE,
+      playAlertOnlyWhenHidden: true,
+      alertIfUnreadConversationExist: false,
     };
+
+    this.recurringNotificationTimer = null;
+
+    this.audioConfig = {
+      audio: null,
+      tone: DEFAULT_TONE,
+      hasSentSoundPermissionsRequest: false,
+    };
+
+    this.currentUser = null;
   }
 
-  setInstanceValues = ({
+  intializeAudio = () => {
+    const resourceUrl = `${ALERT_PATH_PREFIX}${this.audioConfig.tone}.mp3`;
+    this.audioConfig.audio = new Audio(resourceUrl);
+    return this.audioConfig.audio.load();
+  };
+
+  playAudioAlert = async () => {
+    try {
+      await this.audioConfig.audio.play();
+    } catch (error) {
+      if (
+        error.name === 'NotAllowedError' &&
+        !this.hasSentSoundPermissionsRequest
+      ) {
+        this.hasSentSoundPermissionsRequest = true;
+        useAlert(
+          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.SOUND_PERMISSION_ERROR',
+          { usei18n: true, duration: ALERT_DURATION }
+        );
+      }
+    }
+  };
+
+  set = ({
     currentUser,
     alwaysPlayAudioAlert,
     alertIfUnreadConversationExist,
-    audioAlertType,
-    audioAlertTone,
+    audioAlertType = DEFAULT_ALERT_TYPE,
+    audioAlertTone = DEFAULT_TONE,
   }) => {
-    this.audioAlertType = audioAlertType;
-    this.playAlertOnlyWhenHidden = !alwaysPlayAudioAlert;
-    this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
+    this.notificationConfig = {
+      ...this.notificationConfig,
+      audioAlertType: audioAlertType.split('+').filter(Boolean),
+      playAlertOnlyWhenHidden: !alwaysPlayAudioAlert,
+      alertIfUnreadConversationExist: alertIfUnreadConversationExist,
+    };
+
     this.currentUser = currentUser;
-    this.currentUserId = currentUser.id;
-    this.audioAlertTone = audioAlertTone;
-    initOnEvents.forEach(e => {
-      document.addEventListener(e, this.onAudioListenEvent, {
-        once: true,
-      });
-    });
+
+    const previousAudioTone = this.audioConfig.tone;
+    this.audioConfig = {
+      ...this.audioConfig,
+      tone: audioAlertTone,
+    };
+
+    if (previousAudioTone !== audioAlertTone) {
+      this.intializeAudio();
+    }
+
     initFaviconSwitcher();
+    this.clearRecurringTimer();
+    this.playAudioEvery30Seconds();
+  };
+
+  shouldPlayAlert = () => {
+    if (this.notificationConfig.playAlertOnlyWhenHidden) {
+      return !WindowVisibilityHelper.isWindowVisible();
+    }
+    return true;
   };
 
   executeRecurringNotification = () => {
-    if (!window.WOOT_STORE) {
-      this.clearSetTimeout();
-      return;
-    }
-
-    const mineConversation = window.WOOT_STORE.getters.getMineChats({
-      assigneeType: 'me',
-      status: 'open',
-    });
-    const hasUnreadConversation = mineConversation.some(conv => {
-      return conv.unread_count > 0;
-    });
-
-    const shouldPlayAlert = !this.playAlertOnlyWhenHidden || document.hidden;
-
-    if (hasUnreadConversation && shouldPlayAlert) {
-      window.playAudioAlert();
+    if (this.store.hasUnreadConversation() && this.shouldPlayAlert()) {
+      this.playAudioAlert();
       showBadgeOnFavicon();
     }
-    this.clearSetTimeout();
+    this.resetRecurringTimer();
   };
 
-  clearSetTimeout = () => {
+  clearRecurringTimer = () => {
     if (this.recurringNotificationTimer) {
       clearTimeout(this.recurringNotificationTimer);
     }
+  };
+
+  resetRecurringTimer = () => {
+    this.clearRecurringTimer();
     this.recurringNotificationTimer = setTimeout(
       this.executeRecurringNotification,
       NOTIFICATION_TIME
@@ -94,67 +127,57 @@ class DashboardAudioNotificationHelper {
   };
 
   playAudioEvery30Seconds = () => {
+    const { audioAlertType, alertIfUnreadConversationExist } =
+      this.notificationConfig;
+
     //  Audio alert is disabled dismiss the timer
-    if (this.audioAlertType === 'none') {
-      return;
-    }
-    // If assigned conversation flag is disabled dismiss the timer
-    if (!this.alertIfUnreadConversationExist) {
-      return;
-    }
+    if (audioAlertType.includes('none')) return;
 
-    this.clearSetTimeout();
-  };
+    // If unread conversation flag is disabled, dismiss the timer
+    if (!alertIfUnreadConversationExist) return;
 
-  isConversationAssignedToCurrentUser = message => {
-    const conversationAssigneeId = message?.conversation?.assignee_id;
-    return conversationAssigneeId === this.currentUserId;
-  };
-
-  // eslint-disable-next-line class-methods-use-this
-  isMessageFromCurrentConversation = message => {
-    return (
-      window.WOOT_STORE.getters.getSelectedChat?.id === message.conversation_id
-    );
-  };
-
-  isMessageFromCurrentUser = message => {
-    return message?.sender_id === this.currentUserId;
-  };
-
-  isUserHasConversationPermission = () => {
-    const currentAccountId = window.WOOT_STORE.getters.getCurrentAccountId;
-    // Get the user permissions for the current account
-    const userPermissions = getUserPermissions(
-      this.currentUser,
-      currentAccountId
-    );
-    // Check if the user has the required permissions
-    const hasRequiredPermission = [...ROLES, ...CONVERSATION_PERMISSIONS].some(
-      permission => userPermissions.includes(permission)
-    );
-    return hasRequiredPermission;
+    this.resetRecurringTimer();
   };
 
   shouldNotifyOnMessage = message => {
-    if (this.audioAlertType === 'mine') {
-      return this.isConversationAssignedToCurrentUser(message);
+    const { audioAlertType } = this.notificationConfig;
+    if (audioAlertType.includes('none')) return false;
+    if (audioAlertType.includes('all')) return true;
+
+    const assignedToMe = isConversationAssignedToMe(
+      message,
+      this.currentUser.id
+    );
+    const isUnassigned = isConversationUnassigned(message);
+
+    const shouldPlayAudio = [];
+
+    if (audioAlertType.includes(EVENT_TYPES.ASSIGNED)) {
+      shouldPlayAudio.push(assignedToMe);
     }
-    return this.audioAlertType === 'all';
+    if (audioAlertType.includes(EVENT_TYPES.UNASSIGNED)) {
+      shouldPlayAudio.push(isUnassigned);
+    }
+    if (audioAlertType.includes(EVENT_TYPES.NOTME)) {
+      shouldPlayAudio.push(!isUnassigned && !assignedToMe);
+    }
+
+    return shouldPlayAudio.some(Boolean);
   };
 
   onNewMessage = message => {
     // If the user does not have the permission to view the conversation, then dismiss the alert
-    if (!this.isUserHasConversationPermission()) {
+    // FIX ME: There shouldn't be a new message if the user has no access to the conversation.
+    if (!this.store.hasConversationPermission(this.currentUser)) {
       return;
     }
 
-    // If the message is sent by the current user or the
-    // correct notification is not enabled, then dismiss the alert
-    if (
-      this.isMessageFromCurrentUser(message) ||
-      !this.shouldNotifyOnMessage(message)
-    ) {
+    // If the message is sent by the current user then dismiss the alert
+    if (isMessageFromCurrentUser(message, this.currentUser.id)) {
+      return;
+    }
+
+    if (!this.shouldNotifyOnMessage(message)) {
       return;
     }
 
@@ -164,21 +187,22 @@ class DashboardAudioNotificationHelper {
       return;
     }
 
-    // If the user looking at the conversation, then dismiss the alert
-    if (this.isMessageFromCurrentConversation(message) && !document.hidden) {
-      return;
-    }
-    // If the user has disabled alerts when active on the dashboard, the dismiss the alert
-    if (this.playAlertOnlyWhenHidden && !document.hidden) {
-      return;
+    if (WindowVisibilityHelper.isWindowVisible()) {
+      // If the user looking at the conversation, then dismiss the alert
+      if (this.store.isMessageFromCurrentConversation(message)) {
+        return;
+      }
+
+      // If the user has disabled alerts when active on the dashboard, the dismiss the alert
+      if (this.notificationConfig.playAlertOnlyWhenHidden) {
+        return;
+      }
     }
 
-    window.playAudioAlert();
+    this.playAudioAlert();
     showBadgeOnFavicon();
     this.playAudioEvery30Seconds();
   };
 }
 
-const notifHelper = new DashboardAudioNotificationHelper();
-window.notifHelper = notifHelper;
-export default notifHelper;
+export default new DashboardAudioNotificationHelper(GlobalStore);
diff --git a/app/javascript/dashboard/helper/AudioAlerts/WindowVisibilityHelper.js b/app/javascript/dashboard/helper/AudioAlerts/WindowVisibilityHelper.js
new file mode 100644
index 000000000..23772c9bd
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/WindowVisibilityHelper.js
@@ -0,0 +1,21 @@
+export class WindowVisibilityHelper {
+  constructor() {
+    this.isVisible = true;
+    this.initializeEvent();
+  }
+
+  initializeEvent = () => {
+    window.addEventListener('blur', () => {
+      this.isVisible = false;
+    });
+    window.addEventListener('focus', () => {
+      this.isVisible = true;
+    });
+  };
+
+  isWindowVisible() {
+    return !document.hidden && this.isVisible;
+  }
+}
+
+export default new WindowVisibilityHelper();
diff --git a/app/javascript/dashboard/helper/AudioAlerts/specs/AudioMessageHelper.spec.js b/app/javascript/dashboard/helper/AudioAlerts/specs/AudioMessageHelper.spec.js
new file mode 100644
index 000000000..9751cf729
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/specs/AudioMessageHelper.spec.js
@@ -0,0 +1,79 @@
+import {
+  getAssignee,
+  isConversationUnassigned,
+  isConversationAssignedToMe,
+  isMessageFromCurrentUser,
+} from '../AudioMessageHelper';
+
+describe('getAssignee', () => {
+  it('should return assignee_id when present', () => {
+    const message = { conversation: { assignee_id: 1 } };
+    expect(getAssignee(message)).toBe(1);
+  });
+
+  it('should return undefined when no assignee_id', () => {
+    const message = { conversation: null };
+    expect(getAssignee(message)).toBeUndefined();
+  });
+
+  it('should handle null message', () => {
+    expect(getAssignee(null)).toBeUndefined();
+  });
+});
+
+describe('isConversationUnassigned', () => {
+  it('should return true when no assignee', () => {
+    const message = { conversation: { assignee_id: null } };
+    expect(isConversationUnassigned(message)).toBe(true);
+  });
+
+  it('should return false when has assignee', () => {
+    const message = { conversation: { assignee_id: 1 } };
+    expect(isConversationUnassigned(message)).toBe(false);
+  });
+
+  it('should handle null message', () => {
+    expect(isConversationUnassigned(null)).toBe(true);
+  });
+});
+
+describe('isConversationAssignedToMe', () => {
+  const currentUserId = 1;
+
+  it('should return true when assigned to current user', () => {
+    const message = { conversation: { assignee_id: 1 } };
+    expect(isConversationAssignedToMe(message, currentUserId)).toBe(true);
+  });
+
+  it('should return false when assigned to different user', () => {
+    const message = { conversation: { assignee_id: 2 } };
+    expect(isConversationAssignedToMe(message, currentUserId)).toBe(false);
+  });
+
+  it('should return false when unassigned', () => {
+    const message = { conversation: { assignee_id: null } };
+    expect(isConversationAssignedToMe(message, currentUserId)).toBe(false);
+  });
+
+  it('should handle null message', () => {
+    expect(isConversationAssignedToMe(null, currentUserId)).toBe(false);
+  });
+});
+
+describe('isMessageFromCurrentUser', () => {
+  const currentUserId = 1;
+
+  it('should return true when message is from current user', () => {
+    const message = { sender: { id: 1 } };
+    expect(isMessageFromCurrentUser(message, currentUserId)).toBe(true);
+  });
+
+  it('should return false when message is from different user', () => {
+    const message = { sender: { id: 2 } };
+    expect(isMessageFromCurrentUser(message, currentUserId)).toBe(false);
+  });
+
+  it('should handle null message', () => {
+    expect(isMessageFromCurrentUser(null, currentUserId)).toBe(false);
+  });
+});
diff --git a/app/javascript/dashboard/helper/AudioAlerts/specs/AudioNotificationStore.spec.js b/app/javascript/dashboard/helper/AudioAlerts/specs/AudioNotificationStore.spec.js
new file mode 100644
index 000000000..5e8971c2d
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/specs/AudioNotificationStore.spec.js
@@ -0,0 +1,131 @@
+import AudioNotificationStore from '../AudioNotificationStore';
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions';
+import { getUserPermissions } from 'dashboard/helper/permissionsHelper';
+vi.mock('dashboard/helper/permissionsHelper', () => ({
+  getUserPermissions: vi.fn(),
+}));
+
+describe('AudioNotificationStore', () => {
+  let store;
+  let audioNotificationStore;
+
+  beforeEach(() => {
+    store = {
+      getters: {
+        getMineChats: vi.fn(),
+        getSelectedChat: null,
+        getCurrentAccountId: 1,
+      },
+    };
+    audioNotificationStore = new AudioNotificationStore(store);
+  });
+
+  describe('hasUnreadConversation', () => {
+    it('should return true when there are unread conversations', () => {
+      store.getters.getMineChats.mockReturnValue([
+        { id: 1, unread_count: 2 },
+        { id: 2, unread_count: 0 },
+      ]);
+
+      expect(audioNotificationStore.hasUnreadConversation()).toBe(true);
+    });
+
+    it('should return false when there are no unread conversations', () => {
+      store.getters.getMineChats.mockReturnValue([
+        { id: 1, unread_count: 0 },
+        { id: 2, unread_count: 0 },
+      ]);
+
+      expect(audioNotificationStore.hasUnreadConversation()).toBe(false);
+    });
+
+    it('should return false when there are no conversations', () => {
+      store.getters.getMineChats.mockReturnValue([]);
+
+      expect(audioNotificationStore.hasUnreadConversation()).toBe(false);
+    });
+
+    it('should call getMineChats with correct parameters', () => {
+      store.getters.getMineChats.mockReturnValue([]);
+      audioNotificationStore.hasUnreadConversation();
+
+      expect(store.getters.getMineChats).toHaveBeenCalledWith({
+        assigneeType: 'me',
+        status: 'open',
+      });
+    });
+  });
+
+  describe('isMessageFromCurrentConversation', () => {
+    it('should return true when message is from selected chat', () => {
+      store.getters.getSelectedChat = { id: 6179 };
+      const message = { conversation_id: 6179 };
+
+      expect(
+        audioNotificationStore.isMessageFromCurrentConversation(message)
+      ).toBe(true);
+    });
+
+    it('should return false when message is from different chat', () => {
+      store.getters.getSelectedChat = { id: 6179 };
+      const message = { conversation_id: 1337 };
+
+      expect(
+        audioNotificationStore.isMessageFromCurrentConversation(message)
+      ).toBe(false);
+    });
+
+    it('should return false when no chat is selected', () => {
+      store.getters.getSelectedChat = null;
+      const message = { conversation_id: 6179 };
+
+      expect(
+        audioNotificationStore.isMessageFromCurrentConversation(message)
+      ).toBe(false);
+    });
+  });
+
+  describe('hasConversationPermission', () => {
+    const mockUser = { id: 'user123' };
+
+    beforeEach(() => {
+      getUserPermissions.mockReset();
+    });
+
+    it('should return true when user has a required role', () => {
+      getUserPermissions.mockReturnValue([ROLES[0]]);
+
+      expect(audioNotificationStore.hasConversationPermission(mockUser)).toBe(
+        true
+      );
+      expect(getUserPermissions).toHaveBeenCalledWith(mockUser, 1);
+    });
+
+    it('should return true when user has a conversation permission', () => {
+      getUserPermissions.mockReturnValue([CONVERSATION_PERMISSIONS[0]]);
+
+      expect(audioNotificationStore.hasConversationPermission(mockUser)).toBe(
+        true
+      );
+    });
+
+    it('should return false when user has no required permissions', () => {
+      getUserPermissions.mockReturnValue(['some-other-permission']);
+
+      expect(audioNotificationStore.hasConversationPermission(mockUser)).toBe(
+        false
+      );
+    });
+
+    it('should return false when user has no permissions', () => {
+      getUserPermissions.mockReturnValue([]);
+
+      expect(audioNotificationStore.hasConversationPermission(mockUser)).toBe(
+        false
+      );
+    });
+  });
+});
diff --git a/app/javascript/dashboard/helper/AudioAlerts/specs/WindowVisibilityHelper.spec.js b/app/javascript/dashboard/helper/AudioAlerts/specs/WindowVisibilityHelper.spec.js
new file mode 100644
index 000000000..6440cc0e0
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/specs/WindowVisibilityHelper.spec.js
@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { WindowVisibilityHelper } from '../WindowVisibilityHelper';
+
+describe('WindowVisibilityHelper', () => {
+  let blurCallback;
+  let focusCallback;
+  let windowEventListeners;
+  let documentHiddenValue = false;
+
+  beforeEach(() => {
+    vi.resetModules();
+    vi.resetAllMocks();
+
+    // Reset event listeners before each test
+    windowEventListeners = {};
+
+    // Mock window.addEventListener
+    window.addEventListener = vi.fn((event, callback) => {
+      windowEventListeners[event] = callback;
+      if (event === 'blur') blurCallback = callback;
+      if (event === 'focus') focusCallback = callback;
+    });
+
+    // Mock document.hidden with a getter that returns our controlled value
+    Object.defineProperty(document, 'hidden', {
+      configurable: true,
+      get: () => documentHiddenValue,
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    documentHiddenValue = false;
+  });
+
+  describe('initialization', () => {
+    it('should add blur and focus event listeners', () => {
+      const helper = new WindowVisibilityHelper();
+      expect(helper.isVisible).toBe(true);
+
+      expect(window.addEventListener).toHaveBeenCalledTimes(2);
+      expect(window.addEventListener).toHaveBeenCalledWith(
+        'blur',
+        expect.any(Function)
+      );
+      expect(window.addEventListener).toHaveBeenCalledWith(
+        'focus',
+        expect.any(Function)
+      );
+    });
+  });
+
+  describe('window events', () => {
+    it('should set isVisible to false on blur', () => {
+      const helper = new WindowVisibilityHelper();
+      blurCallback();
+      expect(helper.isVisible).toBe(false);
+    });
+
+    it('should set isVisible to true on focus', () => {
+      const helper = new WindowVisibilityHelper();
+      blurCallback(); // First blur the window
+      focusCallback(); // Then focus it
+      expect(helper.isVisible).toBe(true);
+    });
+
+    it('should handle multiple blur/focus events', () => {
+      const helper = new WindowVisibilityHelper();
+
+      blurCallback();
+      expect(helper.isVisible).toBe(false);
+
+      focusCallback();
+      expect(helper.isVisible).toBe(true);
+
+      blurCallback();
+      expect(helper.isVisible).toBe(false);
+    });
+  });
+
+  describe('isWindowVisible', () => {
+    it('should return true when document is visible and window is focused', () => {
+      const helper = new WindowVisibilityHelper();
+      documentHiddenValue = false;
+      helper.isVisible = true;
+
+      expect(helper.isWindowVisible()).toBe(true);
+    });
+
+    it('should return false when document is hidden', () => {
+      const helper = new WindowVisibilityHelper();
+      documentHiddenValue = true;
+      helper.isVisible = true;
+
+      expect(helper.isWindowVisible()).toBe(false);
+    });
+
+    it('should return false when window is not focused', () => {
+      const helper = new WindowVisibilityHelper();
+      documentHiddenValue = false;
+      helper.isVisible = false;
+
+      expect(helper.isWindowVisible()).toBe(false);
+    });
+
+    it('should return false when both document is hidden and window is not focused', () => {
+      const helper = new WindowVisibilityHelper();
+      documentHiddenValue = true;
+      helper.isVisible = false;
+
+      expect(helper.isWindowVisible()).toBe(false);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/helper/scriptHelpers.js b/app/javascript/dashboard/helper/scriptHelpers.js
index dd007d0db..55ad6eb13 100644
--- a/app/javascript/dashboard/helper/scriptHelpers.js
+++ b/app/javascript/dashboard/helper/scriptHelpers.js
@@ -1,20 +1,19 @@
+import {
+  ANALYTICS_IDENTITY,
+  CHATWOOT_RESET,
+  CHATWOOT_SET_USER,
+} from '../constants/appEvents';
 import AnalyticsHelper from './AnalyticsHelper';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 import { emitter } from 'shared/helpers/mitt';
 
-export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
-export const CHATWOOT_RESET = 'CHATWOOT_RESET';
-
-export const ANALYTICS_IDENTITY = 'ANALYTICS_IDENTITY';
-export const ANALYTICS_RESET = 'ANALYTICS_RESET';
-
 export const initializeAnalyticsEvents = () => {
   emitter.on(ANALYTICS_IDENTITY, ({ user }) => {
     AnalyticsHelper.identify(user);
   });
 };
 
-const initializeAudioAlerts = user => {
+export const initializeAudioAlerts = user => {
   const { ui_settings: uiSettings } = user || {};
   const {
     always_play_audio_alert: alwaysPlayAudioAlert,
@@ -25,7 +24,7 @@ const initializeAudioAlerts = user => {
     // entire payload for the user during the signup process.
   } = uiSettings || {};
 
-  DashboardAudioNotificationHelper.setInstanceValues({
+  DashboardAudioNotificationHelper.set({
     currentUser: user,
     audioAlertType: audioAlertType || 'none',
     audioAlertTone: audioAlertTone || 'ding',
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 9b2c5fde6..9b1ca70d2 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -61,15 +61,29 @@
         "COPY": "Copy"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
-        "TITLE": "Audio Notifications",
-        "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
+        "TITLE": "Audio Alerts",
+        "NOTE": "Enable audio alerts in dashboard for new messages and conversations.",
+        "PLAY": "Play sound",
         "ALERT_TYPES": {
           "NONE": "None",
           "MINE": "Assigned",
-          "ALL": "All"
+          "ALL": "All",
+          "ASSIGNED": "My assigned conversations",
+          "UNASSIGNED": "Unassigned conversations",
+          "NOTME": "Open conversations assigned to others"
+        },
+        "ALERT_COMBINATIONS": {
+          "NONE": "You haven't selected any options, you won't receive any audio alerts.",
+          "ASSIGNED": "You'll receive alerts for conversations assigned to you.",
+          "UNASSIGNED": "You'll receive alerts for any unassigned conversations.",
+          "NOTME": "You'll receive alerts for conversations assigned to others.",
+          "ASSIGNED+UNASSIGNED": "You'll receive alerts for your assigned conversations and any unattended ones.",
+          "ASSIGNED+NOTME": "You'll receive alerts for conversations assigned to you and to others, but not for unassigned ones.",
+          "NOTME+UNASSIGNED": "You'll receive alerts for unattended conversations and those assigned to others.",
+          "ASSIGNED+NOTME+UNASSIGNED": "You'll receive alerts for all conversations."
         },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "Alert events for conversations",
           "NONE": "None",
           "ASSIGNED": "Assigned Conversations",
           "ALL_CONVERSATIONS": "All Conversations"
@@ -81,7 +95,9 @@
           "TITLE": "Alert conditions:",
           "CONDITION_ONE": "Send audio alerts only if the browser window is not active",
           "CONDITION_TWO": "Send alerts every 30s until all the assigned conversations are read"
-        }
+        },
+        "SOUND_PERMISSION_ERROR": "Autoplay is disabled in your browser. To hear alerts automatically, enable sound permission in your browser settings or interact with the page.",
+        "READ_MORE": "Read more"
       },
       "EMAIL_NOTIFICATIONS_SECTION": {
         "TITLE": "Email Notifications",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
index 18ae1c07e..898d9afb6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
@@ -10,6 +10,7 @@ defineProps({
     required: true,
   },
 });
+
 const emit = defineEmits(['change']);
 const onChange = (id, value) => {
   emit('change', id, value);
@@ -23,18 +24,22 @@ const onChange = (id, value) => {
     >
       {{ label }}
     </label>
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-3 mt-2">
       <div
         v-for="item in items"
         :key="item.id"
         class="flex flex-row items-start gap-2"
       >
         <CheckBox
+          :id="`checkbox-condition-${item.value}`"
           :is-checked="item.model"
           :value="item.value"
           @update="onChange"
         />
-        <label class="text-sm font-normal text-ash-900">
+        <label
+          class="text-sm font-normal text-ash-900"
+          :for="`checkbox-condition-${item.value}`"
+        >
           {{ item.label }}
         </label>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
index ddc6545f6..890956f7e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
-import { ALERT_EVENTS } from './constants';
+import CheckBox from 'v3/components/Form/CheckBox.vue';
+import { ALERT_EVENTS, EVENT_TYPES } from './constants';
 
 const props = defineProps({
   label: {
@@ -9,50 +10,83 @@ const props = defineProps({
   },
   value: {
     type: String,
-    default: 'all',
+    default: '',
   },
 });
 
 const emit = defineEmits(['update']);
 
 const alertEvents = ALERT_EVENTS;
+const alertEventValues = Object.values(EVENT_TYPES);
 
 const selectedValue = computed({
-  get: () => props.value,
-  set: value => {
-    emit('update', value);
+  get: () => {
+    // maintain backward compatibility
+    if (props.value === 'none') return [];
+    if (props.value === 'mine') return [EVENT_TYPES.ASSIGNED];
+    if (props.value === 'all') return [...alertEventValues];
+
+    const validValues = props.value
+      .split('+')
+      .filter(value => alertEventValues.includes(value));
+
+    return [...new Set(validValues)];
   },
+  set: value => {
+    const sortedValues = value.filter(Boolean).sort();
+    const uniqueValues = [...new Set(sortedValues)];
+
+    if (uniqueValues.length === 0) {
+      emit('update', 'none');
+      return;
+    }
+
+    emit('update', uniqueValues.join('+'));
+  },
+});
+
+const setValue = (isChecked, value) => {
+  let updatedValue = selectedValue.value;
+  if (isChecked) {
+    updatedValue.push(value);
+  } else {
+    updatedValue = updatedValue.filter(item => item !== value);
+  }
+
+  selectedValue.value = updatedValue;
+};
+
+const alertDescription = computed(() => {
+  const base =
+    'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_COMBINATIONS.';
+
+  if (props.value === '' || props.value === 'none') {
+    return base + 'NONE';
+  }
+
+  return base + selectedValue.value.join('+').toUpperCase();
 });
 </script>
 
 <template>
   <div>
-    <label
-      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
-    >
+    <label class="pb-1 text-sm font-medium leading-6 text-ash-900">
       {{ label }}
     </label>
-    <div
-      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-xl border-ash-200"
-    >
+    <div class="grid gap-3 mt-2">
       <div
         v-for="option in alertEvents"
         :key="option.value"
-        class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow last:border-r-0"
+        class="flex items-center gap-2"
       >
-        <input
-          :id="`radio-${option.value}`"
-          v-model="selectedValue"
-          class="shadow-sm cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-4 h-4 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[14px] checked:before:h-[14px] checked:border checked:border-primary-600"
-          type="radio"
-          :value="option.value"
+        <CheckBox
+          :id="`checkbox-${option.value}`"
+          :is-checked="selectedValue.includes(option.value)"
+          @update="(_val, isChecked) => setValue(isChecked, option.value)"
         />
         <label
-          :for="`radio-${option.value}`"
-          class="text-sm font-medium"
-          :class="
-            selectedValue === option.value ? 'text-ash-900' : 'text-ash-800'
-          "
+          :for="`checkbox-${option.value}`"
+          class="text-sm text-ash-900 font-normal"
         >
           {{
             $t(
@@ -61,6 +95,9 @@ const selectedValue = computed({
           }}
         </label>
       </div>
+      <div class="text-n-slate-11 text-sm font-medium mt-2">
+        {{ $t(alertDescription) }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 232a7a74a..06d6932d4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -1,12 +1,15 @@
 <script setup>
 import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import * as Sentry from '@sentry/vue';
 import FormSelect from 'v3/components/Form/Select.vue';
 
 const props = defineProps({
   value: {
     type: String,
     required: true,
-    validator: value => ['ding', 'bell'].includes(value),
+    validator: value =>
+      ['ding', 'bell', 'chime', 'magic', 'ping'].includes(value),
   },
   label: {
     type: String,
@@ -25,6 +28,18 @@ const alertTones = computed(() => [
     value: 'bell',
     label: 'Bell',
   },
+  {
+    value: 'chime',
+    label: 'Chime',
+  },
+  {
+    value: 'magic',
+    label: 'Magic',
+  },
+  {
+    value: 'ping',
+    label: 'Ping',
+  },
 ]);
 
 const selectedValue = computed({
@@ -33,25 +48,48 @@ const selectedValue = computed({
     emit('change', value);
   },
 });
+
+const audio = new Audio();
+
+const playAudio = async () => {
+  try {
+    // Has great support https://caniuse.com/mdn-api_htmlaudioelement
+    audio.src = `/audio/dashboard/${selectedValue.value}.mp3`;
+    await audio.play();
+  } catch (error) {
+    Sentry.captureException(error);
+  }
+};
 </script>
 
 <template>
-  <FormSelect
-    v-model="selectedValue"
-    name="alertTone"
-    spacing="compact"
-    :value="selectedValue"
-    :options="alertTones"
-    :label="label"
-    class="max-w-xl"
-  >
-    <option
-      v-for="tone in alertTones"
-      :key="tone.label"
-      :value="tone.value"
-      :selected="tone.value === selectedValue"
+  <div class="flex items-center gap-2">
+    <FormSelect
+      v-model="selectedValue"
+      name="alertTone"
+      spacing="compact"
+      class="flex-grow"
+      :value="selectedValue"
+      :options="alertTones"
+      :label="label"
     >
-      {{ tone.label }}
-    </option>
-  </FormSelect>
+      <option
+        v-for="tone in alertTones"
+        :key="tone.label"
+        :value="tone.value"
+        :selected="tone.value === selectedValue"
+      >
+        {{ tone.label }}
+      </option>
+    </FormSelect>
+    <button
+      v-tooltip.top="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.PLAY')
+      "
+      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-ash-200 ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-primary-500 flex-shrink-0 mt-[28px]"
+      @click="playAudio"
+    >
+      <Icon icon="i-lucide-volume-2" />
+    </button>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
index f09432f83..bd96f3721 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
@@ -1,98 +1,91 @@
-<script>
+<script setup>
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import AudioAlertTone from './AudioAlertTone.vue';
 import AudioAlertEvent from './AudioAlertEvent.vue';
 import AudioAlertCondition from './AudioAlertCondition.vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+const store = useStore();
+import { useI18n } from 'vue-i18n';
+import camelcaseKeys from 'camelcase-keys';
+import { initializeAudioAlerts } from 'dashboard/helper/scriptHelpers';
+import { useStoreGetters } from 'dashboard/composables/store';
 
-export default {
-  components: {
-    AudioAlertEvent,
-    AudioAlertTone,
-    AudioAlertCondition,
-  },
-  setup() {
-    const { uiSettings, updateUISettings } = useUISettings();
+const getters = useStoreGetters();
+const currentUser = computed(() => getters.getCurrentUser.value);
 
-    return {
-      uiSettings,
-      updateUISettings,
-    };
-  },
-  data() {
-    return {
-      audioAlert: '',
-      playAudioWhenTabIsInactive: false,
-      alertIfUnreadConversationExist: false,
-      alertTone: 'ding',
-      audioAlertConditions: [],
-    };
-  },
-  watch: {
-    uiSettings(value) {
-      this.notificationUISettings(value);
-    },
-  },
-  mounted() {
-    this.notificationUISettings(this.uiSettings);
-    this.$store.dispatch('userNotificationSettings/get');
-  },
-  methods: {
-    notificationUISettings(uiSettings) {
-      const {
-        enable_audio_alerts: audioAlert = '',
-        always_play_audio_alert: alwaysPlayAudioAlert,
-        alert_if_unread_assigned_conversation_exist:
-          alertIfUnreadConversationExist,
-        notification_tone: alertTone,
-      } = uiSettings;
-      this.audioAlert = audioAlert;
-      this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
-      this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
-      this.audioAlertConditions = [
-        {
-          id: 'audio1',
-          label: this.$t(
-            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_ONE'
-          ),
-          model: this.playAudioWhenTabIsInactive,
-          value: 'tab_is_inactive',
-        },
-        {
-          id: 'audio2',
-          label: this.$t(
-            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
-          ),
-          model: this.alertIfUnreadConversationExist,
-          value: 'conversations_are_read',
-        },
-      ];
-      this.alertTone = alertTone || 'ding';
-    },
-    handAudioAlertChange(value) {
-      this.audioAlert = value;
-      this.updateUISettings({
-        enable_audio_alerts: this.audioAlert,
-      });
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioAlertConditions(id, value) {
-      if (id === 'tab_is_inactive') {
-        this.updateUISettings({
-          always_play_audio_alert: !value,
-        });
-      } else if (id === 'conversations_are_read') {
-        this.updateUISettings({
-          alert_if_unread_assigned_conversation_exist: value,
-        });
-      }
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioToneChange(value) {
-      this.updateUISettings({ notification_tone: value });
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+const { uiSettings, updateUISettings } = useUISettings();
+
+const { t } = useI18n();
+const audioAlert = ref('');
+const playAudioWhenTabIsInactive = ref(false);
+const alertIfUnreadConversationExist = ref(false);
+const alertTone = ref('ding');
+const audioAlertConditions = ref([]);
+const i18nKeyPrefix = 'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION';
+
+const initializeNotificationUISettings = newUISettings => {
+  const updatedUISettings = camelcaseKeys(newUISettings);
+
+  audioAlert.value = updatedUISettings.enableAudioAlerts;
+  playAudioWhenTabIsInactive.value = !updatedUISettings.alwaysPlayAudioAlert;
+  alertIfUnreadConversationExist.value =
+    updatedUISettings.alertIfUnreadAssignedConversationExist;
+  audioAlertConditions.value = [
+    {
+      id: 'audio1',
+      label: t(`${i18nKeyPrefix}.CONDITIONS.CONDITION_ONE`),
+      model: playAudioWhenTabIsInactive.value,
+      value: 'tab_is_inactive',
     },
+    {
+      id: 'audio2',
+      label: t(`${i18nKeyPrefix}.CONDITIONS.CONDITION_TWO`),
+      model: alertIfUnreadConversationExist.value,
+      value: 'conversations_are_read',
+    },
+  ];
+  alertTone.value = updatedUISettings.notificationTone || 'ding';
+};
+
+watch(
+  uiSettings,
+  value => {
+    initializeNotificationUISettings(value);
   },
+  { immediate: true }
+);
+
+const handleAudioConfigChange = value => {
+  updateUISettings(value);
+  initializeAudioAlerts(currentUser.value);
+  useAlert(t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+};
+
+onMounted(() => {
+  store.dispatch('userNotificationSettings/get');
+});
+
+const handAudioAlertChange = value => {
+  audioAlert.value = value;
+  handleAudioConfigChange({
+    enable_audio_alerts: value,
+  });
+};
+const handleAudioAlertConditions = (id, value) => {
+  if (id === 'tab_is_inactive') {
+    handleAudioConfigChange({
+      always_play_audio_alert: !value,
+    });
+  } else if (id === 'conversations_are_read') {
+    handleAudioConfigChange({
+      alert_if_unread_assigned_conversation_exist: value,
+    });
+  }
+};
+const handleAudioToneChange = value => {
+  handleAudioConfigChange({ notification_tone: value });
 };
 </script>
 
@@ -100,27 +93,19 @@ export default {
   <div id="profile-settings-notifications" class="flex flex-col gap-6">
     <AudioAlertTone
       :value="alertTone"
-      :label="
-        $t(
-          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
-        )
-      "
+      :label="$t(`${i18nKeyPrefix}.DEFAULT_TONE.TITLE`)"
       @change="handleAudioToneChange"
     />
 
     <AudioAlertEvent
-      :label="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
-      "
+      :label="$t(`${i18nKeyPrefix}.ALERT_TYPE.TITLE`)"
       :value="audioAlert"
       @update="handAudioAlertChange"
     />
 
     <AudioAlertCondition
       :items="audioAlertConditions"
-      :label="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
-      "
+      :label="$t(`${i18nKeyPrefix}.CONDITIONS.TITLE`)"
       @change="handleAudioAlertConditions"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/constants.js b/app/javascript/dashboard/routes/dashboard/settings/profile/constants.js
index e25d5b52a..a6c621c2b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/constants.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/constants.js
@@ -36,17 +36,23 @@ export const NOTIFICATION_TYPES = [
   },
 ];
 
+export const EVENT_TYPES = {
+  ASSIGNED: 'assigned',
+  NOTME: 'notme',
+  UNASSIGNED: 'unassigned',
+};
+
 export const ALERT_EVENTS = [
   {
-    value: 'none',
-    label: 'none',
+    value: EVENT_TYPES.ASSIGNED,
+    label: 'assigned',
   },
   {
-    value: 'mine',
-    label: 'mine',
+    value: EVENT_TYPES.UNASSIGNED,
+    label: 'unassigned',
   },
   {
-    value: 'all',
-    label: 'all',
+    value: EVENT_TYPES.NOTME,
+    label: 'notme',
   },
 ];
diff --git a/app/javascript/dashboard/store/utils/api.js b/app/javascript/dashboard/store/utils/api.js
index e8628300b..281b911b5 100644
--- a/app/javascript/dashboard/store/utils/api.js
+++ b/app/javascript/dashboard/store/utils/api.js
@@ -1,15 +1,15 @@
 import fromUnixTime from 'date-fns/fromUnixTime';
 import differenceInDays from 'date-fns/differenceInDays';
 import Cookies from 'js-cookie';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { emitter } from 'shared/helpers/mitt';
 import {
   ANALYTICS_IDENTITY,
   ANALYTICS_RESET,
   CHATWOOT_RESET,
   CHATWOOT_SET_USER,
-} from '../../helper/scriptHelpers';
-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { LocalStorage } from 'shared/helpers/localStorage';
-import { emitter } from 'shared/helpers/mitt';
+} from '../../constants/appEvents';
 
 Cookies.defaults = { sameSite: 'Lax' };
 
diff --git a/app/javascript/entrypoints/dashboard.js b/app/javascript/entrypoints/dashboard.js
index 857a62d12..a2184d074 100644
--- a/app/javascript/entrypoints/dashboard.js
+++ b/app/javascript/entrypoints/dashboard.js
@@ -6,7 +6,6 @@ import axios from 'axios';
 import hljsVuePlugin from '@highlightjs/vue-plugin';
 
 import Multiselect from 'vue-multiselect';
-// import VueFormulate from '@braid/vue-formulate';
 import { plugin, defaultConfig } from '@formkit/vue';
 import WootSwitch from 'components/ui/Switch.vue';
 import WootWizard from 'components/ui/Wizard.vue';
@@ -22,7 +21,6 @@ import router, { initalizeRouter } from 'dashboard/routes';
 import store from 'dashboard/store';
 import constants from 'dashboard/constants/globals';
 import * as Sentry from '@sentry/vue';
-// import { Integrations } from '@sentry/tracing';
 import {
   initializeAnalyticsEvents,
   initializeChatwootEvents,
@@ -101,7 +99,6 @@ app.directive('on-clickaway', onClickaway);
 
 // load common helpers into js
 commonHelpers();
-window.WOOT_STORE = store;
 window.WootConstants = constants;
 window.axios = createAxios(axios);
 // [VITE] Disabled this we don't need it, we can use `useEmitter` directly
@@ -114,7 +111,3 @@ initalizeRouter();
 window.onload = () => {
   app.mount('#app');
 };
-
-window.addEventListener('load', () => {
-  window.playAudioAlert = () => {};
-});
diff --git a/public/audio/dashboard/chime.mp3 b/public/audio/dashboard/chime.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..e48530e1f5cfc0871b6e9c0a37888f0349f11271
GIT binary patch
literal 68868
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
F2>|4}tdIZz

literal 0
HcmV?d00001

diff --git a/public/audio/dashboard/magic.mp3 b/public/audio/dashboard/magic.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..ee8d03dc1efe6efacd5e2779ac3ad99c8899f169
GIT binary patch
literal 112098
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
S6!^G!xVd%z|M`FQ5Bv`|{dHRa

literal 0
HcmV?d00001

diff --git a/public/audio/dashboard/ping.mp3 b/public/audio/dashboard/ping.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..d5304e2f908dadaa249a26f0eace1cd7b0530a4a
GIT binary patch
literal 41695
zcmZs>XH*kkv_3qk1PBnS0V$zM6GI0@3B7kvKuYLUK%|I@B=p|9B2}6c0YN~NP((nQ
zQY=4u6KNs}2nh4Xd)Hm-{qUZ(GIQq4mpy0iXYc(yCpzlVaNytIGdDBSIJ?sW08HN@
z$W;z6AuS<^$N$gE|Gj|6#{ZwE|Np6_hmYIY8-}x=Gys$|0aUcK7z`^bJ3BWwKfj2G
zgoL!TqT<!7s;XLA`uZj&*RS8aNhG?udU@Tx9Tar`K8X~akdT_1m6e}gSXfq8U0q+_
z)YRJA(b3h_*EcvgIyyf7`SbMj!ouq6#>URh-rms>_|K9vlb!y@<bMzUHw2)`|2r*d
zvYJg4`oHD>yMxE`&Hw-j1`M|V0CkN-ol*oqL`FpH4~I!A6pji|rV)rsg#grbyE_XC
z^OV$iWlLNuvAFBXiZXNO``3ukm_g1QWpLpS?+Pcjivj$Dt7Yp2YLz#tFtCN4!;%E5
zu7kK07ywICI@F@>q7X1}7z1+zD9jKs|K}R_I8_%o|0fIte*!qH<u!(goqd^p3Jn1O
zxVQF(eo5wHg|SdHoDnS}FWulG*@PzmUznH;8j!G6=Bof%h!yhKYSDEkE%QTCWB!$B
ztfsRDU$Mq|2S&Jh2~v)db0+YMtlB{x1&8K19_FL&`86dMesA;@Vs3N1amm%aLXXu4
z`cB0B=uNZ`x1-wnIS;dz-^s7LZ~_T5jBJUb@GJlbw1CDTp_hFTu^p;b&)9z=*_s&5
z_$t{kmmjf3|7sEqH>p=TK3C;r{+Kw>s=&#opz}f?+aoNE=H%@Jo@%%7`Iv}cwjguf
zDbF<fo*12)^GeXUJBnIzT=eVtGOt4ZR`|9V>|Jt;R$KrbJMWBVW6(0RDt&`R?7g1F
zBNiN$$3}t|C9ZZOz(0wgawqr~JUI<J0snW*$tTWo%}LERC-KPteFq+crzc)V6@i;z
zPwVL`+CQfHahdrlvHJSG@p?|fpSVc0*PExMyy-sK^zc*g()+JE-chyItpDEX*p9CK
zHFQ|Ac`e~ld&$aYAMZTB%`3rw|2_<p<zuNgYYf{sDwW#3-B8>xPVa@0xbQX_36P7(
z3&QQ0#aV(=XVz4&e85fAK0Yb~OaUzc01XFlC<=j0(17TfBxb9(JSDMI-K>v`?kzc*
zOq^Fk42e1D38-ld3XKWl=yi+Qi$yRFRxp$d{UZRXj!SJ)yB?<=8y!TCv-MqjA`uw{
zNRokQ_ro~W3ntp%1EP~C98kmjm%qv#mN9#R8+tb(fV$<Ei`K#!QO2j_6u3g%x0hN{
zY(=vM0a-^83K9Z2NB!=k=mCkZQ=Xps(R7G7j2mdG7MnJ?Kgbs@r*|4VX$DTk?&>I?
zE*FAUaRNEul_L(XJRK8~!Q<rP*@-c~D;|2$M!B#Y;*;ABp(+^>2sd`V7P0SJKic?j
zmR~wjPHK5I)NuJ#RDjfbu#Er*paA5zSJ|t^^vYs}Qi17-Rk`?)iE$zPe}ec-0R@v0
z=}jy>+H4Th#!hSJJ^HFBpGeW}zP<L7Hx;cP1JSWQ2aOL$5oKiH<Ho7HAGP7y^G&zI
zEHwF*xKr6#+JU|_9(oTY$8?b^=UFw~A!$yiUv-`QePjAc^t_$NitcRZU;yF;OS6|a
z&483BPK1*lo}+Z|7YBvGl197~bon$0UAWX)gS<-<xy3*i!SuFlQRwafZv=S!+<6f|
z`iGl``H)Zwgm~p;0KzjUC_fzZOr<7Qu&p@0-^5*EbL+%YP!;%cP9@`EVDJS9qfB-X
zXspgAoSzbS1)D?=B`}fmb57LV5dfWQ?SI`Etbz=9q{<>V)p-<ce<w@;LI4PGf=XSr
zDp5#0&2?nS>`LViC0RdxQ`ObV4&bqrjw_@eCtJ&4`?^5u!+9R9MudU$oDc%iy3dDF
zAJK7}Rd^+?yDYvGiP30Y(G7m{hAv+K5yh$DI>hPt3o~b!f2b9jeDrbjKT|*ozyQ>f
zVmDm%aU{mh<bYf*rR}Z&3XoXMOoxO$zRPbMu|z}g^Fu|?7m0V!6g<|N*kvV=BiPK$
zqFjElsLo@gq74LunR5Y1*UpTP)esZ9bWjuAGnVEhNA?*rP~ipt64~DCNSDNGFiucY
z!xYBunBHtOXq~~T&=lP~GB|O8sF5S<utT}h2Jo45A+?7LmhfEIkH->~;W=qKohUTy
zoV?;t|F51Jv>Lw6HSXo>VU)tf)?4|w!fZ_hp}^SY!>daN>iIAh1^Lp!%T7b->b(XO
zFRkQd)39|^78QJm!IK|tdI??0Av+&Cz$6=Vlzj>C%YakMZ%tsb5J?y8_i~X)u2>xS
zO+(<#>7P5n#IwwwS`J86=Lao4PYiBwtO)g(b$&!I>~5e+^)u%&oDa(jh&J*G3pU=b
z^twguur9iN1?6uTZ7i-%%(B4X{BVc>&`gs44)aH|w)p*hyTY#@1wbDMlkK~!3bzb4
z!F97Y9jAdfCIB$L5T}CCyj(P%K^4NJ&-vnAIDQ>TmHq;UYNB}o9*;SHfS}6ahJM+W
z%zGlgCwn2T@o`*`-MW|1rIUO?u_Df|3XeldqUc!(2wkj`nHy~#+*oQ5iy|vV63p2N
zDIZ9!G|jQr%wI_gz@~iW@B6#PH@KPUK=50AgW)zBpe6y%@Hv3Q-<qVuy!@RkM}Wb?
z3BU|LJ1hWWP?+>#jaPv-Shqf~ve$_;aE*4__Fnb`?Ls1aky(z40Ta2>Ba?B8;h@p+
zxl>|t3B3czF#fEzpK`vCDjgno?&gzkny{`~V>8KDVdZK7C7YqR-4%7`-Q#|B6-Wf@
zMX*vphEolHwWcwmNOIn}D4chB(Or3s{yDw=4gJ=c_HgGOPus9>s(V@H8DY67*=Gl$
z1Pss*I7xJc+>lXV<#Xu`FNjLwxI*00OH1`*`n@$D)7-6?jkbAbQ(@2Xu1670HFUn?
zI>Fb+<s~?EacVLtg#``nen0v!Cx5Jb3W6H-m5#u_-bIob@r9RE#GVLYMA79UAedAH
zg7TT-4%KHMb->}8NCF$t5gu);9_z#ghfoHMfk8rBtY>LI;koB$UVs@O2;i;IYFZRV
zJPGh8s?r0dgv{TZP;QzC@BaFmyl(urUxVO*d^Ib#w$p7dw9Boh%{2#H!Fi@l#dU#i
zHGEI&LAlQk>im)8pMIVOg9q<@7qa3QY4kQ7+6$xZE_!^@>KPLh0`6}H(}O2^)MbeB
zmkOJWlqoA?1Un4M`o;UiQyQHLrOSvbC*S(TC>an=SEMW1-dQt$2nk%wvfy{EeDg@?
z0!b!H%Q5T^K}opbX~fr|;Ut~3tC09!m`ZH5-f0>HYDBAzt$(skeV#XA?#K~HYLf2!
z9nk_-9Iab^p+GSJK%`#74ZZjKC|+D#ocKIxRb?#$V*zhLt<qZx^D(6gsVnsNle!L4
z{__~DdH#FrEr~bXuJzJ8WIyVyI^!=8{L7as*x%2RbRmCHOQe2(U(0?nRqQXxuQ2<n
zn>{#wtn3R`gS(&UumBqlpcYEQ;%Mx0F&~OEb9Yp7$hq@ls@4EnrWb{gQ(7A!lp;xb
zl&YEiHVHDvQvCCkRJ>xqSJ553NBN5ljqR`v@R;KKgT#I<PXE_`Pl>mX?42%rFR-VA
zYFoPrD(^+g+e$?#vm4i$IOwbArpOFJKp!teZ!uGUNmft0HxNdc_hzGw>}aQ-wo6|q
zMetq?t5w@XiSe%TOlia|ph)9UTz%DG42saX*D$8dp5OTk|FZO?qd77z`N!!JCdc#B
z<VV`XFfhr4ZF1etovq)TtMePexAU)_R?2B{P5o)(>cM0s6hI-;VGQ_f1ESfu_YZTt
z5nYp-kM;n};0{{Fk?qv-*hq!8iiS5PIIX=t;Yy;;b<Y3=`T^F-%(r}*qQb`yzV~Mh
ze9_nXTj`^GLoeta6W{5l%;Dd^nFWSlA9g-Fv6wrZ1FPi0NpM{fJP7rye;)xc0jSgg
zSWg)g;DreLJtxU@5zwvrP_*Mp++|h{48oOzvdRW?Sq<=()aZC^Da*Y73c!U#tNbje
zpqL}#R7?fUEKrVbYGMiIT$7#CJ9VTuf}c6eFL7rzd8wCCCQ;K*+3y`NbRHM&em!FQ
zno*pe$vEgKFoxxWa(aSpyr@_&m1?N0K<HmSKuLMya$2hO{8tTd1*4Ap^fG-Co}2~`
z+fYCe&Yg2zYgTu+QmF?yiZdto1DT4(zH8`#nY~EE`=^2>#o)5dZWd^w5$0)gRyqL~
ztt*0kO29)a+>L!+g$`|OCY2fq=@RG~-)5OLP`_cSQ-|!~Zc~Pu(!sJQ@7v%;sI==j
zLi6k+jO<`POR%QJ5eFiE^GQ;sz_#yZNauL#49BIKrp_=h{iO5NSx2V|c4HwVfCRaD
zjon(4@w0l*7(Bou4zD0?H9&?l!n^U7^DD9O9KvYR0nZC1nLUHXU|nw~6owQ`ewV{U
zbd0=9pK`9B2AK?LuzXw|A-W8yVuHnhreosq#Bj<TlW?(;Y(Bvy^MabRMHYk(TI%D}
z(*qufi-b+1$(als;9`Iz`GnK{3+*L9t}f2#IJ9KUef98-d-V(M{R^_gK?&hVypUpz
z@E_H(L8zHnG#s|mdoA)f@S=6M8>Bnb$cpSR2oT><^SLXpUls!dtkO3__vkVc!>Mt_
z@UZX9I3^_%yL8*xhP!l#$JU*TA6Zn#3tTeOWI5-hA|XBTb#v3L@Wd>PL1>4JG0_zq
zr;n`52fxQ#jlanPFtA-I3JR0ggOqLP#X9N<5_ts%82F2b{I>3XV!hF8K^BR{Wvazf
zuG5%YG)LCJhuchW!{>#8L)<80Z`L`lTimd_hm(wkS`FR!%Y;z+lR<j-q#<>G=C!?H
zm*?STxqV(EZK|`uYlO*%$2Y<4&QmvVVD9%rBXHtJwf$X300!UzVcfnY0?kYNMe+6k
zL=8}tK64l#L?m)LU=4|WpZ$EMUB`-ux%AfRMz)*RT{d$rs9vQ;MzfSvn7u5Qh(scR
z%D-i7MI@KrB<rMc3vpaR(d=p1!n9Z)TmEP1?@h`K51L*_o84ja(r@9VFe`CB^m=H2
zr*Q5;h<Dt^wJ=2xY)4jGnz_l#zX^WTCTM4HmjfQ?@Esx4d|$$gQ$|%3(tU4YU%S8k
zGNJl|ZrR)vQEc8-gHZ;ff1rRjl|p8#cp_U)$#O`ncIYrh+FpeQu7vJ)d=<7bc84wd
za=hkdfHg2MM0@vAQQ=;45!UdgRTCKVTR5uo7de4iumoI-Z3+uiBVmCnBmh1co02O}
zL^@_9xAM~q_rGV1#KV*DmNqXG7$tAssFic^b$owXb2Sn*5vgXfZ@1A@gkiW9!&UcI
zV1H`p4G2y)NHjkV*)S#w^hcj6z8^>%AMUXbDn3|TZ?K<g>s$p3ekRRsNTstBjz6YZ
zN|PO@Q3gA~IdJk5_y}Aq1i?R}+eeS~ISDKT2;({N!8nrUu!Y*y$C`v;I%p(LiH+u*
z0E$^Zq+`e%{XSs&U*oe#MmfX{-Ffwtm~wHT&<pX9>-4Pg2})3TT~hJ7M#RqpPM}$`
zj+1+Zy~l*6Me1Af(4BXVB<Am0_-{qS`>4qJ+u@pemAwLytod2C*Zl)7V<cxtv&k6q
z>pd?P#U06Uge+t@>HSq)6e})oX~X@sEXVws{p_X&sSiny`Zdw~O5nl=zi?H`hyuHr
zvw7zfv$*h^x`2|j=dSRHUtrs17Hhq$c77oN<WfukZ1hA=9InIY@}>Qg|C%DT2e^wD
z)>53f&5{_S4LqZZ{K6V$e2P`MGkj`7gYZ3p<co^f@1g&DxwrX90U!hJTx+O?3I#{q
z^NqN%=nlw;yVGqNKB@jM?s0wO7%q=GNE#Uc1>X+c&dpS;Q`*!-ne>laWjKhu7Sg$U
z{SaJ@rE-jsHCpSc04vV+y@Ve8fK@s_x;hicD~eaDKLYK~N}=-UQOXxnfEU04=by$!
zW_nqNo972kqJL^+<7j>WvEkwTc1gS|e_~mkw->85?7qhe2GEdj1cjatsFlUc8e!A2
zL*l$K))?uNa;wDev2bKk_@=Ram8UctxtC>xrTt=WgVF%UW*V6a@az>S1qF?0`W1t3
zjOj;1qVN}bCnh~|5PdpGH0*ATGu_v^Ep;L7X9r&lEus8zZ^0@jOK8L+@4pND+8lyN
zJ~!}=aa%+9hN<m^5-p%e+V}Jllzb<pX1&H9#=<Gnq~*II3=7J~g@S{SGH@@>Q~AWX
zJaiKe#RD`@V07wB$)7C;f{N66$4ASEO_rT8ed!RS?yBCgk+`0&YvyWI!pG4j4`0Wn
z+XeUz?erW=Q?4>z3-DFu=#`5MQ_66grSAv9fwJJQD)8{zv%eEgw6|T_UxaJY^A{Y=
z?45OMF{SM@Kmi3ZVE3oO5A3@ZV?$o$Fl;C)68w!<qk+=hl#?W3(Nwnd9K6rmQ|Zc@
z(?8d#K@r_g$CIA)zz1pS^ZrC)(8zaUi^Q_7A{jQNXZzN08y`qGYTog-rMz(x-=c|(
zfaW2qP>gnKL>!C*LPg!ud3)D_(b%tjqVPLID&GZ`s>aRjW|p@LQ1lBJ<NOwLdH=fE
zS|lG-=wEgCO-Am;8Qifg8M{?6FzQBkjdM}(%I5AfM{Bv&lk#Vg;Do7q9*}xB`jJ%U
zW47lA#JMq#ZA$_3RDnx0yhc~TOmb-<{rN28o0Ck%rI$d<EEq{~^tB5q5~q;^mhp~)
z11e46@&X862tHk)U<q^-03PPTr=!UN(aVp9Yod?tz{N*W;2ctzfZi_`+h37lA#H<4
zkfJvSlcc<_(Xz2bnz8}7Ez?m*DC-Jy!8XtR>)WFvdgWdSs>XiTY>tq*AivG4FWn!J
zl^9prf1AH@VP|?1ryxQ5%Jx3@?a0+!<wuVs`GHwSYfup^eZyOL&uk(G`~aSWor0&T
zU|mYPKSTv!sR59Qqir!~vWo&%LHkUENfhS2u?nFR&Q)OJr_H5rai$0puj+rztxMWP
zU+hmRIuqlda8m!<BB^HzuyE36${@ygFH%@LCm|v6E-O6zEyS4v7mgA^#&ceocYyja
zT||>*!ga9HHI!(8;0L4T4Skz^-73^|Lz2(wvIM3Xw<rmdx7~bHriQ@Lpn+7S!qBU5
zRFyb~0#+L%1vhzilt6w$FCF?Yf1Dt-wqyWSQYzVYU(T5((NRD5gdrj$$em+&IzrB;
zy><j;Ql#@J*N4`pVxkNq&ASlVvlbCn*(jp<@^7X<*xwjla5?9691o2}o$(rkDZROy
zdJ)$p1M{M&RSbt}IZB~8P3Ig2T^8e*N~lYS^@<^y3Mj<W3aFT5h$s0?L=?j?kI@9o
z>(azO4^%pnEs+%vweX^Ru!_-Lh)%9_BCRM~qU_q=hOqsc?4rlPb)m>W&@{of^RN%x
z{REmKJI}xYo;iRBRxdh?Az02>Ce6LFi^v|wrs9Z1h3hi7`Hxb}uJnfJM^w-xHx7B7
zj=m@}C=(g^Yt$$zZuOH`1liS_C70!~lV5IZ2OlKwq9`4E9_6FM$-)jo6a7z|-2kYD
z;|xRni-4GmZH2YQfYRU<qr(wC=)u)>P*$D70KYN(CQF*hk1`DNtETgBX2PVC^*IJm
zz@t>a6~<ePq7d6EX`{ucuvnyh!jH5B;{`Ke1sP{m#?%<iYqI&~FPuw==5PfBGD^RM
zTJ=HmD-<o1BAWh_$QwhBfC7HcyCF;GXvidEKmf;0pc6!)dPD$fYW)>`T?IP|j`uNw
zM6$#hI+7q!s;h#~M3_Dw7Yu2NCeYF&BUEi$jn6SMt@{oZ3)ML>>cn(cM!Tc}u^4e6
zG@PtynT~298mA?w(y73=rRA=N+K1?<<UJfLLWD(?ES~#m!$_-w3*bj1UOM8e{NCHW
zv_2F@lcYYfu#4t$R7x^om=<YMziwMr?nW$Rr5md|-H+hr2ci=RqQ+)SaOTX|Y<eh)
z!b`eCMV{b#EO=kcEt*;o>jxdPVU;CuW&8IfsOlp(tqXX+U(wVRyB&DI_(bHi!pQgZ
z%inK*bI#Q4dpw0*A-xiP!X;*PCx1BnXTNW2em`dTXbB$W_SQb*&k!GUy*-d@Bqy9S
zbm#q^m)Y_6a2UWUea4f!y|EO$B(|TLO^B$SAIlR-^ZjDZMqA0For|(1b7OABw}B7Y
zXu}BF;+yms0#=-e%&cN1eOTCqM7+ZyJZYc6P(%-3X?eO1G+>JJwxa7779W3lK?k2s
z9HWLUN$@COrRSxL^Uxagxv5nmiMml;{gV2<VS>*#)@8lKk0k8beg)=nVMAXZh3c$p
zI7ej?<;NbLo(N48-Y8_b^4fV<_nC|F!?~@Idm#9$BUwN(r?5J1qy=FNa3@Jae;D#J
zlX^!OsBEeDXj0hYv3N2s8SXT~cRNWDDzO~xJT_4$R5<K`PK6_Au@AfhOHzeth`6d)
z_$r<|k5|`Y-YPP@oQaA=(y{e839_nb8Buh}zWFrTc3K~Yl|=D|8Q6z8Hk{jgDp7UQ
z%Fm)C`=)>CUr_nOtzJu70dX1?jpc{Ih2M^*%ej7tE+qsv7#Jj*f2j7{{fs=u^T{aV
zhgxztUbHlBKQ&^pmKA+1T3-I+W4qKe38HBmcJR!;?gyvm#GHJ}=`-C@<2{YvGA52v
zvteM!pQVJrXL{N8Ij3w_tO|3@fhD!6#=rhQHg-uhXQbz}@x4V}z=g9J_~_fXOUnN&
z-K*G}`?oTy{O<}Lw>C-j(c>U*2*9_F_SS=25J|t9_U6>QCfe2!wRG#tndO{<QLq(U
z3(#u!KE|9!jr`x_R57>Wpy0<tS$UajJ^{P@<KPc)3tYbh9(@FVb%JW(gzu5^>5saw
zqfB0P7={E~;idHH<6%Ho0ha^SU|!k2iz*Y+{a?p8MxvIFGX=d!fc3idrEf1FoZS}`
zw}KkU(=DqZXC0#^ry4tr6O*a2Est?ht<ZR*UF<6v4QT=GciEit|82g-|LFo`0c}?Y
z6A9Oy{M5ucDqRYOjz<)-q_WMvQRU8_xS)?V6hdIa%az!M>9TzWMlzA>8K%clZ=EmU
zBJ1dtulOE0y_jjAEs0Hu%7o72q`z>=F9vkP+rRrDc;Z4nbRpm?vBL0+&7BPh-wAnC
z{$mUZ@{wsAT<!uV0zI{3NnL&+*XDLJz(!5AKl+}EZftWK0%4t&`WSkuPEY~-J6~Yc
zd1MJ8z;Vz?NVbv-1NQZ5ySCWjb}T*4b1Elw43&@orA|<NuJ@GN!ZnXhgU{GZS?GTE
z&hzGUD+sT+Ws?3jv3pGLNvHZAf;=Jr?d~<(iFemE41ef_8uDG~v?~<_zg2))VIU89
z6d(4t9vlG=eL>!^5B0U#YB&fUxVFMdod$Qxi_*d}3yH_27^`v)mLRBH`&eSlIeJ*&
zriTxT$<KQsm4E<yvcj$1+-Pc*XF9c58FGj(hh;xB0x;*Kt=eN>z9RZ2LNw;$!I$?D
z5?mM=U2=qq<DclX#B$S(%g!2w+mi`nM1Z4MWza3KVtW#^<mxORBo>YXh^d5&FjN`*
zMY5#n<YC&)<MV|VG-#;V)h`HN1Sg!qw>vM#A#X|6>*j%A<pB8TJfD8F67oD_s<Q<c
z&}rp7!1NsnqeGC1w=D$2sxJNbfKnkXv|EIMr@1yxTXO*=g8<DMfVfYAYuyMb7VxhP
zPt03FI-8WDucHB603I$S&es7i60MFw9T7D}1b_Y+NW>+f8<zbr#?2|Epz@dg{~W{+
zPr{;Kf;kVb#o+w<Hg^X~&BuC2wnkskz@qd+YE2xgDv#_sbKK8gANEOCh`(umbgcZb
z9$W^+93*|g8{jT@L=WyVoJh|Z;r@vlk4)ZPL<cC1IudO9`1}QMQ|f$tTDUQRR)D&;
zd4@(OX4^ulB$f(*VdJdwRj}@9ykB=tu&<z2;js*KP->DkA{RjxeT4IRd@@;9lUZYW
zuwkJmPK~m}NT*xE61uPAdjCOahfF0MH+;vgrYM!}OQ8p15oafIY51ryJX3Bp^l47+
z`$-LJ4Qmhc=F8c9yo7n7B?QmgKr=I|6cL!F##&JxS>FgCVzjFOpp|}t3?UO5GNJ<L
zK&w6Zn*M;8fIAVFAnEZG?SLz~?<!BzPAARzRDvs~VOUb4u9D)jV(>%?rG1`}GQotD
z=c9exB^y@YJ7FrX6rc>?zf+JAaGO>WHSlOAAPrfJvqJtV1VQaQV7}O5>5T&v4O}#1
zp|*!aQQgSDh%~9T&Rr;X&P(L9UE+p(#q)j^RtUlWL<K5k1uwLz4ZtX{@Fd-!-VrU;
zb4j^$JYlj%bS77K)A`Tc8Ep|ApDKT}?to?TSok7$zQJ@@XM2V3iiJ*=@~u%}AMSyO
z2AaPgB06?Q<&~vQuYS@t0*`G=J`FulW{_77nn1d9mVO26*EfpP@!$#186g`77cPA`
zVlDg<qy<0#K%rTc847uf4VSCf#YMXJ@P+rG*hx6XG7cT*1Wm~cOc*Y<3l_%?DXr-+
zHkQxAlG2yWEP|TxUuc%#xGQ*mNDpM53(p0l5yaRaf>s6hcNUGRHVRHp_w3SP>c}_5
zRVIS=nEYTgGG!t>@!kFEmLUCIK5JTPmC_DsnRpk0gxIOFRB8R*?|BcVdpkm1cnyFt
zybT5`qfV8fKpN{e<Zo^F4mn92e)IbsA(plGGg3_v!b|xfbE#-+ueiyApchWMW3r3l
z0(^1Qz~zXdPVh_@ePpup2N)wYpv9g9oi@$ovCuwU6z8eL228<JP0^kP{NRc2XI=<`
z>4#1yc;aM<A`Q-+OmqkXxqpNi%w(<m9vsfZdu34}QA8qr2CMA1sC=ke9#UXB(S4!I
zp>Ov3eEXv$Dv_m9LO3~X*fPB>00pUS*=KzSPwDX`Gohl-ZTSpeeU^dg5r#8ADFlC=
z`uoA!B9DHsWISWOg}ToX)w-efn5*6YUDk$8wqpcsz)Y4t8~9}u|BE$&C)fMq3i90}
zxnK}9?g{&SR?j|we@i=0*pHi$-2jI2(*cKR?GC?#%ZwvO!&&nbL>-G#cLZt-iN?i|
z<c+&{^n2|8LI{->r}xXQrm@tZZPer21lRTj`R#j6(AO_r+Fm}x?L5cfsZ3#Bv<07$
zWPKK_q>g#7umT;w!Jn?j)F1LqApk#+%Bvy`N@o5oFKBP3wSI389)3=%!9?=v(~*Xl
z0Gh167$+-T-parJvO?_bQ!kAVY2)b_iee+<B~ofrO+`e!DuToiHPO_NZa*m~<{A^+
zR!Zw=@+6`6!{rO9OgHFE?KJf3zk_Mr5^?G{HQ?j##gAb9(NI#FL~K9Wla{NmO8%tN
zDxL+^id7J$1qPE7&UE_@7M^Q!ASe<oYS8JBX-NTa&~R!=8MCEcd=Ed51P3iEkMk<G
zKyOd@7YJ@g7_BI58A$=mo|q>a!(K8}eL#s`%6HI?M7i70Q1Qbdd6iZk+*+cR;Gi`x
zMqDwe{=oP2Kdr8BvJKS(uWtl~b1EeE5AI))?w7KScWzos_2pUrsNlo)T{D(rbgvAh
zO-{MCm*Sf=nJ97kth(rg(MZGogT2edfF|^#h9+naW|)CF;P%Rsk(7SXH`51h#t=Aw
zi5*!P{3F2`(MxiokZ>k6A7U{L^TLa2q)1xIql<YBnyz{Gx^Gxh`v6Rm@XGTa^odY)
zvg2xlAo><x?o8qh@@#f-^6_3}7U!6hDv<4<kkQ{R^3g&TdlEXNp)Rl~Aswbx`ldPq
z&(g*OCqV{1C162dZD-}$p_CX<LTG(^!z&ETquaMM#PONtfZ!9QwA2s+xjX(05Nny_
zVm|a)XLZQUa&|xmI%v56oq6g8V6aeHYKL%BWVTakY{L06K{d^I>IyqI6doYr95rO@
z%~6AC)mhsyu4`iQRxch$a4Q5-f8Z_tVZ*olTPt2T^PC@esF)KLRGEK%BwbF{wrWD=
zd%$|WTd+?}vcM02V~`pALwfh=*mnQ4@9$thFn~U*IAxn%&p6m<;ynR6E*Rlk?WeN0
z8aDCOHn&Ccp)D5(#7N#E-SxlP&!f?9j)qUm^zG>qp-}TL7ZV|noEMEM23JHA23c>N
zY=GcS-I4mxIfg`0fb;I#ho4r1#g=Scw)V`-a$}%$w8g>PwL*K+wFunglwTH8_dnfY
zl7#4p8$Av!EAmHv|Kahpm%aUh;^ux6lt;w1twy#Ie%_C%9+|0KsI>KW4<r;lcmN@5
zhAT;{f%b=~d3=s^1|&-<=d+zOxZH<F%TV)C&z*vmixc0-1iT;BmoN~F%~g;++hQq(
zP%x-?avtagApDFL+*&pf5$rFbB}HPCwAt0Ypl~1(iy|)I60-?V$E5_Ey9cG`Q{x|f
zXE&{e$U32Qdx8aWqJ8Cl(&szW@Lre8t(~^|I%(+|4+~aEu>+49UBA~%?|SlRTa*T^
zy%J5(KR2S(o8=O83LZ^4*n_^OWeKa`-yhpY1>joBQOk7#1OWi>|LidtR<5YDI>$^t
zz_pc8jgf>aaU{_Jx4$oSXOURAxY?vhi5sZsRg}uphpuG5kk_rmR$XnF(AOyz81~3>
zbZa}bF+sV3x*cq=G@uZ@$uIagDzBF*ym(N>7ikMUPFJ=T)6nFlMCg~X!?^@o;tiWC
zjGCEtJktPzWj~KDq$SO9J%4ol>Z!99b14Uswco*X_Y!zxUt2#(uc*-BqxT>P)+}n5
z5W=(Hm5zd7ZGqY!7G2#cPY`@*>^8r6mL_)llg}Mz>Bmzbh9m%DO{?l%Epa=3I^c$x
z13Z=m#gf-?7+y?9P5eX-Mpd({XODGV?Yd>d1avP%PJE7j;s#}eveOXCX>U@0`Kqoc
z^kC-F6?@vt+pF`G_NoK;wPZEb?4DG$$`vh^k3{YJ54yLe`S(SGIbna~l6scL4ena}
z>Ud_;WAnfV;{4{xx19SYQ^drtUi%NXRz*y9K7@Au;~D$l&numOBOWe)>>)8md~C(L
z&ohWZB-1oY$y`x!c`#S=xH<`X6cM16V!Ah)o@bVWYgtf9x}}9s$rX&Icj)&BU|GeG
zIG`}zc{+Na><9tG9|YG}lWxy!oXoBBI7Pxr5RzzBo9a-OWZd?@(EdqgD~uaHwk<0v
zA8t!=aob^^y&yk)FFoAoxlm|L{~zz%{nO!UZj5e!3rD+W(4^T@%|VODt=xZJ!s8*0
z?ZVK!w`-yH>*6U{%=0eL2y*^qhSSaiRsnsLt3Yg9h({Q>mS5&9Y%JLoccz4a1r|&@
zazrJq0v_-<5UvstaTfa{C<}&@!OR!{h2_OLGUQG|68>AV&P+5Jk%Gw#;_0>7HHVZ!
zROcxw6b5XB;W!I7Z}lrV2fhnYIC>4i{Ne|62tEHdULVUYr^Kcj_ct0G4e4tV2UyMA
zYBP+FVWbN-6NkSu<Yna4V-p&`JWOaw`=laxMa0wkT#$;>(vS68i?EVqWia$rn0jNn
zJGc%W{s5!F6N}{I3VBmt^z8q3W%U?lI25b%GkiRmJNGlY@v<s6n;<*QZL|Pm2=1pJ
z#w_Qlh?w>#Gi(olmNgv7c%W}UOYWj^!Ya_@N<jr0$%?PzCxh7&SVB8H!NUc^O?(sT
zof;doHzk0_%Hkqy|6`Fg+h%vB#%x7x6^vA5BFchdHApoowSaM#nsW|47o5jJc`3pS
zu-Y85%H2w)ZyAMJ7CKvB-fMLAVt23zVa_y;+n&{@8TUn)a>bF7d_@w=kn%PfPv<%C
z*PTtr^CUbmF<z+tq_b*67--e@J7doORr0~;KY`#0{-6N-{@4mY?Lc)d!5DM-icL7*
zE@ZM$NN@;YECXPHXjShP4;!<rHB#osffqHY3L#FR=nD-GQl1(>`yNHgbu;wE=ni<t
z*GxY|3;P&3QPqWiUhIv%D_Z4af5&;uO1&K#Ff=@5s_<YkRhE-)GnTos{6tf`iOV`^
zB0tAjRN=z-+>ORjDR3gM>g3aD{pr&bYVb|{*;x$;uB3ozVH+NrcnAVM-^!b4)1zTN
zDbE&ri_qg@(jC$B2&Rz>udKH6pO@)-F_GVG-yFV0`q%i(La6M{Li;R=3k}+meepIN
z?H8oa=ywF}>S}0>+;0^7XCZs+JDG`SMAVjg2aW*eV9iy6;dKgbCM=KklQeUl@RS(P
zXrt+MV1iJ!Y+TvTl^n*)_R><u!|hpB9%2kA0b2wlCjHedYyF`apH+de2Ygo{#8?hX
z8?1R8$0PY;(5h>~7KbD5v?@SvYFs)3Yt~BnJQ4c9GW)GU5X4)=?a&A^d4u4d2ur#U
zL57>h%=MpR1ZdfQoYmdfI~?*-HeX1v*Cfi>k*p3q^0}r8d#t(Z4=OaL6syo9UlPfa
zHd5S6_-Kpoc`9p604_F!hl-G*dugX%r+YKcZ1uO2va8L>iyU@x+Mv&*_;zUhkf@qb
z@k>Xm2%bNQR)KrtMz0R?O3NiLJx(}CQ_R=)?D*AR>YFv!Tyxyc^`p)6z$L4^e&zj4
zS@KxQwN7QUA2=m<$ykQnxpC%rrt?4PK&SAU7(u0ywkK?MYtMA9RAo0a0k>r>EI?n7
zJLyb1`7VE^)`Y%39nf}!xTvQ_{qhbV!P9!6?j!81Zq%ubkgb6o$Dz`-NWF=4*0J2h
z@(6w|2=eKCB6T#@p>phY(UFWyRSW9tbB_p-jQ<|yUk^-ky!qx{hA_>a7BU4&|Kwuy
zK%sMDy3&TeKg*j(=I`J%bnFq4tfux8zw<l|?D7^gxw<3)i|?F)dLTG1-jIuhl=Ov%
zfhR7WxQQK;rn8NX7ZH#y5~ie`aqc&{woC?{;PKtqXJ>YoP#t%AdQ+g(1c2EIPX#Sb
zVqDeaGVVd({fF<UxQl$1+5L}!#nbEQmPYJd{PtKXd*tnP=WbYW<p+xw;xhE&vFw9w
z->SI0pVPo~r`G41!pe*N)7=b)bT!L`D&DVjcipAYxZqUoMq4^x7Z(?MD0yeCFxXo5
zN)<~U>&x22o-+ITJ^SO`vy`L<4#Jzx(&f+@CU)O<o?L9-?2ZIb^8kchT%Wm=C|tQ&
zi<$rQ00XB$q`HShS``KXHQoj4{T#{bT1?3m8{(J7RK{7RrKcC}uy?~~0E{+05g$)Y
zpXdX;CAChsC|iIf!bsVhT&IWAA`5T-LFfyBco%2*uR7!<wH10X8}eCS5ZelBS~SE9
zy?*)*#f7&?=Vc}V31yam?YZ0gTC8Y?G~~ub?NeQkuvV?Loz|JyaEwZ$lIzu%o0etU
zwKh)&gC^ztQA0y@=^YOILo7g^L%0KVOC_F=-H8i9T;uATlw~3e@bBMK?{Cu(hfxUP
z{eT00;nF!n<D2eHPwr`#mGwq40?8R9Vlag&F4D)4M`IHF`$TY9+g+Ol3B#q7R@<L+
z)_zb=hKA#o($0MDlS*J^(){PmTz{QUd*h9jq!MFcdKtOPsX+}zQf%62aqk{jl&E?+
zlFpJuRwGPmgfwdvJbvz)LjY%WvzFfr7>>8c;f%@Q)A#f3UeqlBSrRWfN0gHTG<sb{
zyMyw}dPc&9p?^O2A1>>PN>ryQXyvf$)^Dy=dA|Huc}=FX9VNo=W}wAY`BYL!MM&B^
zKQjdct%R-5Tsac<cQEDjsiq%<)fpH6^^;_Y;iDqn@f#0%5z;M*+PsUg<xyT(sL54k
zi|3V|@60qJ9n<=<bAhySL#Fd}+PV-kSM3EFSWGm!-N5kgkWw#>m*`#kf^IK8yah&|
zNo~uaW%}s6B)v2J^Qk~9`OD=B&fG*o2j^3mQ`MVw^Nsw@4FxsrSfX(V<d&Sqe+Q<@
zQ+_dghNKUE<8*mvf^+#K%#_gd%@;fkXF*}vF>eEu!J}8ypYNW9;!no&!)Kqsd9gD`
z+mHw`A{4>21rNt++|aq|n!H_Aoc@G7W+AH#M=a`#KD!HwmX<?ehHF1^OV{x^t<cR%
zVVciz-(lx<qom|R-jY3Dy{D1e9kCefl+{cA6@kO)s#Sx1E}zzX1|91H9ySX@@Y~o0
z>*?z^I+j!C+ndZY(_h*pO%Ds*xTB8lD&`5AUQAf2SSydOYxFP;_d_(j8w)nt3!CFe
zetE_g|CN%guoKqTb|3T!=g&~X?ZN1(?<h?pGslMzzzgXg!^D3Q^f^>Gq`9%`L!61v
zm9)Fv8~U5>pCg1zymX>_LZ6#Kg)*x$|I{jswaSEQ+!}FV6NR1=FKzp=H{)h<Kt}6J
zO5T+%)1Ijk7?M>Kx#RN>LYn}RDsK3`O<7TOQd^1_T_uN|p!Al1N-0HN;G|&WfhNl}
zPiOBkVIesne5}k&?T(q#cKi6F;iOLz=RG)L^e^C|01k!47U8m{tgqE6)u4Y|6$g@6
zd%37N_^7icPvCJ8${P5(C{zK0Q}H_JH74CN=@8tYQ$NdJAj^lwIS^duy(#E0oCzQ(
zaOA!Iq})XHAvl_ntCJw<Xl(LM7+@ZZWbN>h@QBAez)I0n+=mQZ9@fs|r55s$^W1aw
zSE#`8!WgwB$xcijc=9_<zEerzoucywiE3<>uXKXU#HQcii0Z4?*k~XIP5|n<V-d%J
z8Y{bTxv4O#bNkqI@YNuD(L=<bwhm4Y9$ox3+p#@&<VE>pTeXMSA@z9E#ipcIZUat9
znAK4I!uy#dE0fZ!0a&lX3oY3Zj=XdIt+IXrZ@cdfCurQb*$_YQqOxw?dAI=h1e<;E
zcBFdXhLiN<s{mPrdq%-$<)-lB+1IaB*9}+QFa`>}CExWquPXF~Lse6&m-FXkh}s&5
zcw6fw=xbrZSnh+Rt3L1Z%N(DmCKS=+mBszGMQlRg1&Vf0;s)o1XXRu^!Ja%P5iVn{
z%xqMx>CMFUOQsew^BOm^9x*9&5i4ocSqJcBrPU$7E~$kT0l&I@!wPFE-RPdjRJjb^
z`8-vksn(%^`IQ|AZ4Q5t$s2R0@rFdK0=1&&UL$>w>(GX^PLZiti7he`hVAb&eHNs9
zxbF&{RU~l8AQ*heZAG%J(Kr5S*uQ25g)8(oG@6kKE_5nyKWr*^NJ?UaF-81SHPQxe
zH{x`rOoN50<s%urS$@Jr5_5jsHK<yJry5n(-v>Pokk^e_BMnY|Jg^fKQ_|^|t34@v
zoxH+YKv5uAq>mMS3yG-?bI;UZj&0Vvh;yb|(<#2W@#EUFK!KKP*Xf`4IM;)qT`?af
z_@r~M?6<~zQ1YcSM0K5+`OR8hXn7I^?<B;_Bh#W$F3Z%U(qfgK9K0#|#kfESs}!Ee
z+*DS=?$S6ROQu3qW^4kWQJQh!#`ZsQwoz+Hq2h`blM~9~4A1$?e7?BB_2jjKk<37%
zu)|8K?G3A$muC=CUj~p&_ebsv7oy5jLO_q*XIMy^^yd2QC9~({p*f4wb|J9_ALXv#
zicD#Lf5;OX{MmbxcJ*U!;&aZZ&aQ)7mG$<|uJgRYWc9neFOUDlU#9L)@P4XxZ1GVu
zRC@DObAfh(3R5jYIyCvp(Ts;c&zaC;)p`2$<#5zc=UHzs2i66zTBcH<FEUn@P|<oq
z7LS8WjJt~wCTc~u9SJN<9i|r@pQ+ns^p&EwhNE=9bcZK1(Qf%j{^!gW!GQ4oR9?X=
z)fh+NTk3wwufJgx-<=DK^X&b_q}Wr{`*?6~>S3T!rRfiQ(E$BdJhe{K@<Ur+CqSQV
z*OwbVRQw05SVgU8U)CM0R@xoRxEj75`#q`iXur^%<8~Kgagf6HGLJ~^$fLuKW1VMT
z7G{0+1U&Egb##A=2@K|5c(@(<{>GK#&RVmjk?r1b6S6NWON6SzvkpaYBhcoh1r!Hp
z;edGaGRZ{^X5NgVmS~Uicd<~77cuG-FXKTL&Hwma1M>Av@e~sisv&jZD<Q_+MH3Gt
z6v+@I<Aq!}ACjv^I|THRTFbn+x%D8d@MyL?TE(62#@NksVav&nT}o6oo8vz@G#Ca;
zn0-p`lNYVr6LiskxV05}&8$_UTCe`?)1NippO37#H~F(M^h|kqy?$>OZ`io#(KsSq
zlrY7BjF-}Uks5eOC+n6$k)tHE?rHV+i;q;pbyf8C=Ih$G)VAxvk~6@c1|m0OOicm$
z-v$$j)@C?DAO)qOMF({z5n~;r8z>shJ4I15LXbn#Z{+7ccOnYD#g$;PU2x(zi<+5;
zpHXr0jmkfTUrQx154Rai$NAbPZ3@!Ns===XamJN5>CjK!F8oB7X5$j@psk}ZeXgv5
zapb&6L0HyobD^)ng5s~~Ch@j6ZhveF`bY*Lr$67lJ{eUfRyoN=RI8Wsg}K^uH($q}
zyLsrUhb<_}Ydv&{JdwV|GTOLhy-eqW2X7J8{cV2zdXc&JHFT0{cJ<L#)l73d@Z^2V
zo0XmQ_SG<O&lX%8{;%SO1@Plor)R&D9wYERmH#p)Clt#`h_#*+jlXV&goxU@rWXW^
zSV&(p+}99yR4+?zM6nM3gV1jh^1=PV`%2z_7LwY++-N)5+aeUV9A!%#TUJ6J_dSRb
zhE`@*jg~GiZ~mTUke!`9`8;(x%@K)Wjvx0qm9HK)pJ*?TtSTD3%V9-NF-wn&V~(zQ
zix0yIpU4Wbl*o$5Ur#nQRWdo}(f8W1xqrNWH61?Zeqp!#>6X=iSFw&qg-W%HKtwe5
zCVHy*vS_(a;)c+R&6Ys%?_>82(yfoEKTk}ocz<se$m?D&eod5GNIPSH#dQUli~wZ1
zD3izkYhGT9m`d&kOsPR5rF9j%%r8U6h)<r!$yOo6t&_dvQYs#xUXTPyy4-@)gw(TB
zUlT#^t13pENuPvt59AppTfuMQZSZT6dh%L<<xOwBgL6a0B0sSqhPz}g2pwFXwUEsI
zl-LQcicDgu)rg$iwYr$|u}`pN$;wT%t@g)S?I+pDNSEZj=_~2zLHQzAU+aJ&{c#58
zbkn@gU)YU*ruTm_Nxin|>}ab*B#Bvm$rBjAyj51Aznl3Km$=CL*P1?DJil6X;1ie&
zp3qq5-GN{LDq$f0-S}b=z$grGpy@H>A*di8gLY3N2m=?>gl+9E^#1+*snHE-7hYss
zTIrIZlZEr>CC+~V(0k&#J!HQ=^Yq+7Cu@?E>5y`^U(<e5)kVg#N@QABh{$VPq(xNV
z<XfqOj;D&suSP{*1h2Y^Q&yr7S;4p#E&6UJwvx%b2kADu8n(fU=d&I34F34c^gO@k
zIVFGda#lmFf$zF)PmuI%kdMO+mJL4SNk?Oq19Vp};DYSMk7km){qFNs%r*HF-y5sf
zaOI|>k0nE5L#;%0Jj>Rno`%hw)rMaKw}lDe0Np$^O<T%Y)2I|njEQ`&CBR9`j={1A
zM{==Rtt=-idS4R}u^B>ZhIk~J@Lx?km*<DkNyYizMukgjZM&ShNEN4wzM)TcV=s^E
z`S31VQNJfKt#`zTYFE`xdt6uR8`=G>watS!`)h|m^<G~~-c!jCzjj{<jhuKgCz+|?
z(QG7~mt{7%BDL)#7W|!AxT`+6%6H*tREf7M_GFOd{<}D6OIQlhIUw`N^Y0v&G7P<9
z52KW86rDz)3aan|&;L4v+YkOh=rceieZT)WFYE3cn*EZSQ6ZK!LVD}X4YA93m(T)3
z?@yn=khfLOmVUrvbOotJ=n;QQ!4t{<f>DD6mR)8Kt8>|eu3j`w03&lVwKXo18Xz-P
zI@86bAulxMJ#&mur0IQ+^-3K2_%kjd!cf1f{Y~w6RD2r;%%kBMer>h8NsHlunI*YJ
zV261=Rx&qJXWzM9U?={o4GaJJ-S)u}+NnKrwzv2z5mnk{u>;q3`YZgCTi(w#QkQIQ
z+DP(1Tnn<F%}!0^hYA%nM?Xw33s|caNTj=AvOH0$k<a#w+A^TON=Tu?`c_?j=HT`9
zvKzrmAAByKc(+H(;DLG~Gu6OzA`|9ME&<A<zbv5RBtfVurN+9%0Rrdmz08#!MGi@5
zL6@TSvDA5aC05PW`AD2%xVeLFJLCPGo||C<ka7g8M1^E=TjH?zY?LMy^&OL^xy^B(
zCih)UzfbX~qj^7leVA@f|8c)rz~KvenMKFsgVXS(vJg0(8DXe3gvz8icitfg`H1<4
zVSLS674+i_(s{^dt;kGXAwx>^nStS?^h}0M29HYMnCq*O{#V8U*IS&$E3W0XrnE2<
zi`uD<I#2VH-e<F!0B%XIwEKfqim^>tS^)wtzrM63(@H5yk<D2F_VpPjJn-QP%@^hK
zWjWb9k-}@J2*h>on#@~hqOPpZ@Zo>VK_YvH!LQ3_Z#-z_>v`xPS+VFZ={hW9opt1`
z=yEY<BBi(9XNyIy#NtA*r^toDCl<oXufODY+WWs~8I@j@<ZfS%czOSt=}O11)xBwD
zjyyNlA4}5yAv_j!R=$V!=jXJt20aFEt@!l4Og?Nk?f$-g<Gsb5sX)c)JEQa)d-cbM
zmdoT?C2kLR>83}yvj7fwsLl7byf<1smbyqmJ>)KlR6}j4Zh;5b<L{T6>hU=<T>H%V
z?&&A9b20!tPiOqIy%Wt<x}hu}i7t8jO?rses|W{;*p=B&WZ{DAwBpg$B@ZJW>197z
z7**fU&6f6mv8o_Rs`8&+W|OYE^swqzc_xNNw&K0*e~fx9c2@#eCMK}6s|QC-*)wl+
z=_6JOdfI<1j3!b#ZfYgm_&lUo+9hpvd+{HHUIR!HQUCsx9)-yvY9p^pwVWPgv8{!3
zOStE*p_QG(@6xp<-eor*z8m><VAaq{nhKLWINjq3Y?1F+eOY_E_U1(rf4J(~cl;n&
z=PG2A+Y3=vuVJei#1M=6(Ht~*WBd|80MakB(d3?Uq~TyO-&A_Z$Z9cAe@#3pixI%K
zwLKpuN3&IXVPo@%6K|tj<TvMDfbV$X?5?~!ykqH~9+}xi?~Q(AVQ>}tB45t?a{(3S
zd7%wg>KH!SCmT>tx;%#^XO_s;onHA%_0k$@aFyr!R08$NUZ~Ze+ik5q?H%ee*<b6;
zEc{Ma<fp&CjC$iXbY;KI@44%(H$JQPlJr)L#Y=w2i%H6JzUMgqvt37{yJSN2b=-e1
z8e*#Cny>3mgrqbO6E$zm%T8N7;eIn*uIUK5mZ%py+gXYma&&?kM@sEUspykb*yY+$
zOy6i?%~UsDZ$-^S&+Xki(9C8JkyvsMq_X-omEr_VcsQ~(qUay@)!(u4=$iS{C*iC2
zB_5W91MB<23@eW%My!^pjKyi`-V0cK!*A+74F5bs6>-OZLny6LNb92<UQ#K8zy0$<
z_YVJC*Un$(m_$zlACI25z7Jhp{O|Mc*YbB$=CsE9O@8voq&MktsJ#eN`0wNRqTH=p
zU*&us`FQ!T?U~;H0X6a2=e0<B6@4b4F?b7579B{CdC%XS(oTQ@p_hpSM_Biz>!TA?
zDYtPbCpJiP#5q0+MO?_(s)?IJ`3tUyh8h#6q}qdIQ7>ZnZT*BRzu>;erIp!lW{+mg
zpco8M>~<1GLad`}8qRnbBX$s|;iG0|X69$ObXV77uCXYBKj9;V&50>r-|^+DU1ew!
z<!hC_*q4Q<F99r2-fUlb&smP+t_0~P&C&wwZcoda$YnJVOcOCly)&}8!4o%U5%YF*
z;=!>q(yuiqpFO_OH6{HkCGn*1UinaI`qTI#>R-)==^L8FCm(WmW-zD?mm+rKFK8xm
z8@sW2Kc<Et2B&v1CaJ0iMF@B^8%eisORW-TqU&642iu75AYrzSd)Dcr9R-QZjAn)R
z_E_qJtF=5ESHld%Gpt|VY4+ImpRZJS$m&;KZ@1a!`wv2;B;=BV?){q&{<PGv7rN^G
zvaU@L+x+=!N$R=l)yHxji^S*o=SDeoj5IP`?-r=!4zwqZsneGHKLCnAb-yZJif^Yl
z^Cao@_fFfB0y(=EmqX=t&%fPOb$v_lVrpV(H)r>;(CYeqJr!&OnJP<XWCbOSy0|1T
z057N|2j!{=EWs=WC{fU9LXC-xN>Flu<5^G;H&G)ajM5%tl*$7E#h6)OV5qPj6bvS?
z<uM=!7))RaFsW_n7sFQKQ?<2>cFuD96qlVi;22sEM}gyO(o;IN7?Vtf>#;gx0Dw0t
zgRN25cV%&Wpax8b$!8b6PbjC|dJD8yrJSjr@y_M^{~Fj@A``{8ue*jg{7(xzwl?wY
zY4f(%hvTYJ@TSb#wttID-uB*L=YN|bw)MR?i{|w4Vp7+ib@|P8S{ypHYi|G@Lyr{l
z)7_HB%0MUfNhtX<L_nJ^5-bD&(Rn0_f{6x7SV3$M9FyuH5pk>}!^qg*+843dRs@9y
zb1hd+Vse)#S(CV7H4(HT5VUZewGgJ1Qe{6iOB)0Yb3)+CYB-bcUEY&cha;kjr^2Mq
zC34tqB}*2S&^Nawv@l(rWoGO(ExnwI_Bp|~XLWu2f1YAN0b3NE?bwC7ZskXe&n#We
zt$GS+{n*B0)KZtb!e+IHoodo_O%hESj%f&BIG##<*HUS%PPA2IEp)MkRZKgBh+C*s
z0}ucgU;>D(huI)JL`4T&BLrbLtgt#H2MYIyNO()3U3gKyt!-Nx@LYwULJ@}0W+i}#
zMT*|E!J;A{p_PLqz~teFBQfbyq|M}XRw?W646V!JkEk?In2Wi7Jf*aBhXB&2Wuz`a
zkQ8h<6AU$}bQbKpap!6Ne<hLh{CA{MiFP+Kq{3qwOZuG3Nfx_nQ#`pl0-@A!2{+Hf
zRj+=jS#vh;Sv3y0)xL#&<#k-f+<2a_D}DS;yF{Aa1q>188n&)?16}TC#&2(*joz5}
zM}dnI5*h@+A>X$0=2=+)1KvkvA4t0jfQ%V1fhGh4DjXs@AUF_M33>)bu>|F8Y!y;B
zu!ueQwDC%px^0A>G}^(7fh}8u1)KcfXXy@%)^jZWr)$-UPD}ie3O)b(;6#{!2JT=;
z`#gO3$Ltx8YY(4WVS^{^b1dt6GUdIjKD8;0O+WHyPV6FIUN=yXH}l4&YH5BMP3K+E
z##<%EIoq<l@~^s;E!mRN&0Du}{xZvupy^BXzV`3-yfy~PIYQRg=)s9!Q^h4p*q%us
z<(GBbdO-g$saWy8HyCImWrZJJ4EVg5u4$})zfDj57`J!y_p-}fOR<@N0yzR!QjHNj
z@v>tarf-lb2QZonh{h(901!azAOa0;GU-z)Wv@llBp}$3#N?&{7zLb#z@bcp5&`QP
zo)Pld9x+BuFP3MX@ccQfDTHBzgoYRF+oGOqUMTLvOpYfhUf1%=>tpt=U$H){%o1J7
zY_;9m&n)u0Zz$fYQsex&Zu@{vWDBkL9b=C<BA$pw=HcoYT(Z@>Re4V?CMBC^BCFdn
z*Xs&;UCAXk=Am+`NpoeLi^||?msWI}D)swT{r+!S<{4$p<N0dtc+<+Zw=|HAKaF<9
zF|vpSz1B)b5*#!^jHsg$fX)bQOb7%E8dfk603^7qRaYbYdI@L?1t@RpxQ&($FarXN
z1BB${HNa#<<1re-j!h##sI4t~xJ00OvAOu`jSyf;@xghZ31gc#PX@+YGo?TQM9!(>
z5KT?NatIb5pDJiMuOvR*-8U9PMG>2^KM{hPYDlZ`7N(lyu9@X?0>d~9I%uXiQc_b$
z@XHoF89WKMiba8Vv>m8UuZl*r7&@k}xbWV~xN}CWriLBNFsY1N4l#3i?Mq7^A9&7S
zXZBn}_};NC_cL>bD!u)eCuRXJx!;DeJR*Ptn2Zq+k1HM=U@(x9cUZyzh?N7vQnegq
zviF`Or*H!gM&u+8iaf&@j5jEU+G%H~CHU$qoNirj^X_@>-RvbafygFwa%)_(E0l7_
zADF`&l~~G-ml)PHYgBy5Y$Ta&GrJD*{AOlbFUkFuQ%mM0mwQXk)QTERql#&}e=T<Z
z<J!CBT<y$SzuxOq(^2GZ)jvPItx~Ll9>#7bGbw|kd$TEy&)%A{z9V&M=;!7p&Wckg
ze#S+P7&SY31Qz;NTUxIbQZAj4jDP^`#M2XHz(!*f<p&F{VGf^a&=y^-m;tro&xZ`6
zEp4}eT5XjZhh<Ihhy>R<RKX&aVRM!pAdD!OR09J{&s<N)R=3Nq<YD-bG5K4ZnQOsM
zNq1kg*=1TEzZQ=Jg1|5IrbA6>?W2!G>1AbAif?1wdX{LSQi@ubK#jb4@|WAKodq3f
z4ajZ$2qP$^u}izuU7Cre*O@S}d#u&X^(8a2q)Q&6C9VFdTEmW6rO{8d1g`i5$E_8)
z`qFxzj`ux&$%=F56;SYr1cpu&^<CT2iV%Pcq!MCUD-;w6U<842Ah=*yFp&TI&_v*X
z2A*e3`&dQ#)NC0)XH1_N9fK+DzIQ8GGGzU{GPM;1MivCRNkDCafLm~I15uL1A@>HE
z)NZPgGfWix#iK(2nX<Pa6t#wCE})r7o;TYraHHP)wxHt?V1P^y6Z}-KDpbpaLY0uj
z91JBqd0qVG?N3}AABHmp+g-(tyE~I@lG11<CI+izplnVUhvo+{6YHU$WRg)t>A7Id
z20U6w*%M?`C9GaNqiQD;Jf$2xQVO|)D?Td+l4YiEdYw-0q^BJ!mdtSMA_s{mrq!#+
zcSIln|3wzWty_?gQ4j*b1QH-=i-0Hqk%5JPm=G!wj1U2+DwAh^pjdi!kXdZ*(<TrH
zoC%<iqRmWHR{%*{8B9WAb*{N1EGRqc7@}^}P2JaNQdkX@HS=glklL{&4|iYn<1A1p
z6^k)>a&cpFa}9Do8=af48YLnnVM$W9KaTm8-1nWSb-6^x{jZHxjSF6z3Htd|iqw{~
zbdtr^Z~NTL8#*bqa$VV8wA$^TpGNZd{;{NwrE9|Hu`<OIx7K0oovqtuwAr+EMVHOK
zYfg%HYP{NaLsS75j5$Z4A;B1M03=wHIE=u;nDDSN5Te<H0;u8>2Z7V3?S}64!EaM2
zg*`#SVBiy<7*c8o)fM5SA+AALM6x8oDXC%j3TyA)*7?un!V#g~B@?>uMk5yAxn=nz
zt{A7z<fl1AYSy*ML~_N;m90pw&2q%E8+7vP+PSaa@A0K{MzK4eKk)psn=qaC*_RRK
zfd%GoAt0L7fdcuSEZJ|1csqv^G?D|&)#);DkDEu2JUrtOX{<rDVnx<Iq|4>Mdse?6
z=N9?AYfZzsq8I=VkdQ&>T(baeXN-*z23<x8DTEqfjv=DWS|I?HD#KrLWla`gI%atL
zA^->oOAs(op#^}a8wLR9xa;x1sVTSWJd}F1@N_CaNlkvNHz^zxxhSrpj5%&aS^UE-
zhu#&pDN+}zSDM0phbuI-WaJ?f4Ml$ao!qaLtM@*|-aoEe@lq|FiBwUjjsjgMyrSJp
zuiZ7+N#-U^G&LwDJhkTP8LVha8wtp;mh#(e+ZlBda`&q?+hSqX)G`{&=X&p?S^xXc
zM9csNfoRKncztNotl1xHE3I2al`ZXImFovECH<(c%`UySckbqDs<_e7^7Ag`AxHy$
zwRI-Sjs(F-M2iqIr3_F}fI>5<3^1Tn0V>QWr&0fW(!PDCIBcFktPnej2|#?486a!<
zK7bQy30Dl$<0hYsHycsEr?+z-?>=(Lbr8AjfSd>F7>4UE*<1MV!%w`O-<+n(o3zzq
z(%Ma`$yBnEiyc_EQe90+a;=<aZDF4B#zi6^0gyD8a@IWNe|~y`XF2-)jlq(eaZ7Lp
zF_a&KO6BpnMiY;@0fhwPmK%Vy&DXo$RYY6{1I@}z9yJ56b$vse#jNf({qC}TJC&Wc
zUB1bmxo)n)0e>2flbl!PRAGxgBnWEZjv`7WniylnzC<JgmWaJc4yFnoyWU61QoT>p
zCugt73L2X>@3^oQE=<YKmR_5$@Y3F-$B_t~%al~}Zd)>G3_ZTK>A$pc7;(E$!Egi=
zvGB1L-dNY2uQx*%2|&=y+|1oco3YYl`bKPIl8jYVj<F2_ag3RedKpGgS(^<BXf*Q2
z&`_lLVa1;(rSou{Ty3qhEr`Nwx5Kxjt7#MN-qXIxx^hn9PF2S5P0iVg7El0ZY+VG}
zlOruKlNBBW1{5Sj22KqWWQT=9z(axI)Fi>w&|4U8sS781G6VoH=FZi1RFWqdYfiK_
z8h(0aZgX|zlKeMGYA39$-TC5SybTG|fTFO~3@vLqxm33v?6&0HCnh&VKS_Q*mN#w7
z>|4vW=B2dxUF}b?j<Ma(%O^;SbJ%yixv%Plfh7G;0SU_D?=Of=noI?2KGoNJ_7VEX
zrE8s?dK3lO-BdH8QT3IXKEo1g$k`V3tR3Gtr^aE=OX3NZ(CYp!zUm#BR0OrTWhli~
z7=j$A2oYGK%z*=@6eO@(DFXu`31TTG46XIvxIV(6s47}diV*n3?~KzoAV3OE|Hk_b
z!e#lR6^?c{$cJ&t<%zg8{>M2FIWb<$YqtIj)VjS&^fzg%S=AX-$hBI{kKXFp-c+2c
zQ$0(wtCmr^N_MnV03kG$>Q2~+%;9+H^rw(MWW(!K%^@$!vBHph4D)t<ic%=6b&bUS
z|NGEHyMP9ET}t~{eQLrhxqoL2pIP;REA8Qxs`j*Iy_qMJ!P$#W2LElWGZg*5YhJ$g
zRsNz}FS=}XZ83SXRIY>ozZ!NGpi++&)DQ`m-c}q$98wrE0unF)umCA_M1<6+lmX6+
zH<8CdyRx;Qg+>S>QuGi;f~v&R4SO215|vo1Z?$!QJn3s=D8i)Pco$U)ow&OGhM^7w
zzKS&OzjTn?vYNi6cjXb-o>0|R%ApjsY)EfX-u!M;%InVe3z$*ctBv_%%95r~Q}Vp3
zlPX-Z`g*mi=;@S8W;!~{pn2;}Eh|#dgls-^+3QUS&czDmtae>t32Jwpc8oXMN$=^}
zUwVGr;8O}ykzW7Xn8sii`5wGJmuSQo>0P56g#ls!0HA<FqJmsIhO!}omRYS9m)c{k
z6LlO0>fE0+>3A#0q^Nv>(M@A5fcYO!Ix6@|sA-|QwckkfRUVj!EJAA9&h<4EvPh8O
z&_vOUObr~&*d_s`B!WloeIs`?IMiK`HAN*NnUQQO$Jqm^n9*i=Ah4;5A|ZiFRUD2`
z%&#gbqKB;5F6Z>i$5PwKA_*@_UCH>v<k$JQlGUGXaX05HxomtQ>c6R~jqH~-a{%9n
z%SysuRe{D<L7OUx!3&t-00adWNp%4QD)rK-p_cV6n$$AbXVw)00*#Gy29qL;As`4Q
zCrL%f-2Aq^G@^G}-{+37{v`6wscEy-aUm`1{QpH{_aYT0<n-0E!p$|RYJ+req-<`<
ztqOFH(Pw6PijA16E1>XdZ(3GTEh7_B=;W)(kv6PbiZIFtQi#+uG)rm;UOBU*q-Ie;
znarlJg|>-hNmWnnN_MbG%-}5=QCH3b8@{{ANMiwia?46E$bh1|SSWyl9B(KjkfuZ}
zDq<8YlR`={<kY5q-{vCwzUtu@U6A#ay;DF+2o@4!OLxeFp#viLaHj4}#pN27_MTrX
zuop`uy)f$De&x?RmLn3eRjJqITygyJ*C=bG@j$g#oSfXQYnroe|8)_ONUK(YsO2xr
z$tX<He`S>SA~Tzrn!-dnvXd!-m0YwOiXx`^`pWWxX}Ku5H{^9wS9KU84zCJLYXx%(
zElH>U`_M$YfCcDV%X?8zn!(Dse`g7;SN&Zn?CjI)9k6BntR{W)%E^8i#>VQiXBd${
z1AU~M7g4h&0ko*qrU+`dRbgunRtw04*Ki<cN*lj!11n^$VjGM)4>}+h=<W{SR`8Gk
z0%j-ziE4EwoRnIIo2xXQq{n@urNZv*RuF^EH5ORd9XI8+e;wBfRiC`E{ONL(Q&CS}
zw^Ig>FYQaX_U<)1g`QZu$wusIn!Xg2_LOKiH+83JIoz&T=QO((DcEfoSBpioW@!w|
zJi%TO#MoFVN3PM)R?duiq^{8he2R7FPL>FCxnjS6Zo@MO8~ut}4<L%kqHRO~fq{q&
z32J1AjG<s)K(K{X3@QdhOcL|py_l+FI5Nleu{|x&7Y7P<m5CtfcUk@0b2QMv;YtN2
zf@UeFAu!cELs1%dCEurp=ITRE%kvVqOD)oxN-avMYsGg`&5Z1`C2GnqQtlXc3YPN9
zUpvcr|1qha^Z7uNXEVy*<Bol=eW^)R7ezE>^}SvwPr@zYN-)_ADE4^u2$8{;BGp5=
zh@S;<3mzEV*3SO!B^WaWB+lM~F0<^*mPa!HUv4Q5I3&YFO8_7d&?pg-02nZVf`bzV
zfq@awltDwn!f&eNK^xNoES=3$ETRAeNf|jfa&e(_>0QBKgajmNo~{|q+4nZ?e390_
zg=_g;oh`u-qAW#iO)>d&vD9}nYjW1Fc6v!(ni`Z#EW|0}3uPeecCCs`_bRtq&)?;#
zWA~kTh$;My#@cZp11~W8c9vI9gw<Arp#=FXsDW4trbuHfdRk%i6hn=Y#U@M-#>od(
z9#D^Fx*TyEGp?$Wa=kMT5!xGALA+hOW-s<-yE6a@_Lj<d4H#lT;Xy=(D438Y4oxh#
z#3I`m6aWZGc;Iv_vhXkV(bj@@CA81jxn$bp2Pu3RGmiUO%9dYgJKXAfJA9+DSlmWI
zDdp7xcK_&Ttj*KX*T%z2M^?oth|)kU)$e(wPF<W^v)?zBy4CDw9kY#3qNBSLj9Rg7
z3%>%&sfSPwydMG5_L9Z8{e;V}gHTA3G%+{}io8n#NDvBURd*{>)>y2Y=F}>U+$J<U
z?5xz|7%Tt#&_u`p2Aycidw4}?$f~)2YYCrPIfE<hVU?>luw{LmCVfZ(1!fnGZ}8?@
z@`LkxDiM%CUF2@VkP#tFS(P>n3~0e4(kB@}XnGeEp^wpTMT4b^gS$>tP62cu$8G#m
zGYmNBuvt87$<PETm{MALCzdNYBpOUJ8@l4bG_;b6)b`&&ZN05_8I`+lt9O1Q&h0do
zmBgi&(@oM!Y{e<>Ps}xxg0X~BQy0!-=BBCTHRKgz601_(Wra6u*B+Pd%-$6HyHVJ2
zr#{Up_vLF>>j|&Fe{tI{UAICyxtknwPdZA5cwTg<q~UeGE3r#t&d2nhn@8PAtzB=J
z88Vnf-OPzcQUN!$$qoWjsKSXM%XF(r!a-PpAS~DvW0E8@89)mMnWt7*31RNKvPS0Q
zniQaJBu$qWSThjaCtispkbtb}6){o%f~8XVx*N6~a=;g3^-VPHJWd0z1=_+MlY@;K
zha|Nj`e`%w7{2`9EC7g6Y$xWdQc}gYW)78S7ri%}rh9d9#>^Qb8x{LB)Rw6*q|GKR
z2@;9WmBwap>pH0G2}x6OD+J=XI{A&ho|16p*F+C2)MGcsaE|5FKhG+Swf@OTlacjC
zup7<X$QDuouWl&?%nlg3fn|)6Oc{XAi++n{AOau<S?ItG`aU93?{?-McKRQJA8{ZH
z>_!5mkOM1YVn86_m;U{lkJJ)X1_%XsqR_=_606zg6rGQNglF0HS7v?Is@SHXxRYa~
zh~E2Kj7`knu}RK02(`{j>(z}*wMp`>+M&6AF&w4TZfh8K+lpdS+_NL5<emz!mZ@ni
zwS2m?^5h9S$Ill8$b_au)bN@V7J>-D+QIkBpsjAqXWH!b66>cZq7{1fN}ONsX3{$t
z1@yXF17ZSl?1e{yk{I&fCT0v+jG2KZwnQOYIdmPBHG&y5rE@}Zy4)ak64uU3SkfB}
zjes;awts(X+N@vq*<2qfzt4W)`17>tKy=lxrI@=bq_+lQo;X>nlwQS7QQPITJZ8`B
zJcdyPL}8hHkCQV}*<`MD?vK3@M{-M60=P<a0Xs2yRGLdFkidKeJdn|$iNcu6Ac{m7
z;|Lua7fVt>MgRNIM7e+lMPSPNJ2d*p>uG;$2A^61qa*D-H)Ad^W<9JXeUcTFq^!{C
za%PBPGf-(NM*X_um(VJJ)Ocv}Y1EaAyR~*y01WU6Y>9v%VSox9Y%Vy!0|+Q&&^k%}
zVTJ+*86Zh+4p5AZdE0Or(l@iorgE+0fsBn4gS@zD;VKm%V#k8GCG{TNq8$b@P@O=A
z+UfOksP}6Ec|;+k+@&rkLA*Uj0*u{Y>MHM0W^3F@U_a(`Sa3DrT9uCm6li(XBdjX0
z<!iIjL19kGo4urIG@Nl{p&3FJqD<`EBUxlkLIQgvBqsyanoCWWoh4nSi;zG_qH`0j
zLD935ok@lr4c{rtChs+!2<Bd;2xTu0|H`zMAa~uZ*rX_gNreDJkkOwoAQOzo0UaJ8
z91biTvPg;SMKY6Jb4MGy^0{TN)OEvtf^_Z3VT5=N>VZR4)Uf0(@Zj9&evagF6#nYw
zP@F74mUUvaHh)%sDwQGy^M<KyWj_RRElE!NL*xp9@RH+xW@cAfifU%e5pIt;*wi~Y
zW``Rdz)6_|M(IA9{^s+R>gl7@+i6Kz%UV!=#Fla$Vdak$9@n?pO+i&MgpnD=q=K03
z>kq7owzJ`|j%95{sOA>$m(wE7-Mc4J0cTOUM6wQn4v1&Sm;j6o3>nJ%FhN44fq@{B
z05oA>4r3?0(wOX~{1qKX@gRrnvUxyn@;45PR@XN?Vv#9w9U9}W0^{6cnc1edc1TDR
z`A!`3#Bo-tOOoK;EK@R5dxxvdn9)?!JqJU!$MJi6tHE94vrMzRM{<v7t}$am3A;p2
zI7N)$+Xb3JZFXHV(L{)W6je|ZVaqofWdUSG*Cj&HBo&3z9rCiOHIVC^Mzau0afLBt
z6R0UXwy#;F@hwZ47J@G};Ze{4DH@3|<wyh$m>5u95PHT~Vl`NaS?w%{0%L)pCpvK;
z<05WRwh4CQc4zc<%mNsMdH!SLlNhA9d$$*q*h*Ml67RiQ1Duso#U`TdFADURYwA@l
zrTI(p`?d^Xlah(+(mF`YN;?B2^CYu&QEMw5xs=Cg`EJxkZYvH&E6bnf8p}QmZTa{9
z{52_uq?L{=qel-q|NGEHvVaC!W6JwaPP)pBNk3-@yIHxPEA2fuYUHzJJ(rs8L}7%4
zq8O;ci!I=3w&2=^nnM&(Hscu@In<>#*rEp6?)po-6A1Tc(RHzAhs9sW>o+!O7{~*j
zTI~pGNHj(SNCUtSU??0CU1x?H7#v{&ND2TXS_2-+DXHp4drcg!p@JpHQ6l-9TSd%u
z1(Ls&H>=#JW~9)m0!cA=Tc8Y$<q24vN+KE&Gnh>$6H-l|5uvw5hW-<Dc<pNn7AJ|e
z<uc*Pn(5Rv`<&_Wjj{?#xJxoJ2FNO=Hx=8XGb2=ZUMow?l|?DcCzik-(@x&Qh>#5(
zP&_9-lw3s-6G+KgZ3+q`NdS0@F_^kjitm)Cd36Y`oU)*Y!!BvkOv${<x`T8e4m8?u
z9w90UI2>|<p_(1Uq($&yp@<`kEkmh#fkQL4wH<5kE3GQ8N{|B}m<habXN{u+E&~Mt
zOSHDAPX!GRdj1S}ZS~C{;k?{^3EVl~&jRdmBE>jje~EP@o6E?9m@IJG<gu5nwymUn
z5^6*_A3T<tWxKJ2h0eP}Ug7Qc65<kELCN{M#xlYrjbqyj{1GPzmx?c*iXhJ?<FT}v
zX<XlveB{h+!~JS4p6j<WJC>ZX&CAJGV*xKsw<3l#Sg7+V46q!>6(#~BBH{xEs-QHR
zHvpu8h61xkT2`>|{6UPRbX>&-5Q9F&RqKMTkmLy{kFV^5Ck0a|Z3m_aZ!==b>LXOF
ztKbjH!t{o<CSM!q;!~kxPftAh+(?nVoZr54AZ{;U%V-a$WAP=lxQ_w?iaNR)k}g?9
zR8+xpgIO~kNYg$`%QN=KQ6V)+EEwB}o`rZ8mL!I(32R9yK9huU$;~v<l7o4&(u;F{
zW_hJkwbbKDv$nN>ts)-(+=Pfg7wet4oC%H`6a-w6lExgeZVNJCfFebbfV$P$(qGFG
zA-r)ZSRKk{ME^hu6uYI8w!B>GNe}V*?%J#m+D>I9o|5XlNp%A^*K1=_bd_i&(Mo#`
z_1^M+-H)vTMJ&Y{Su$gklI~N*WwMKLc;-`7b{&OalO8CbIDR@U;<Y(J8Wtcw61Z|n
zA|XR)_<_f&o}&#c)mm!*`_M$QfCf}#%6m^W>buO@k822zSrwBf?C8_#=dtEJmzuRv
z#kHW~lw6Up9F~fd=+LOsQjqb??mT((H}tGlHsf-yEzQ)xS<`8=Nl@x(P_+VO=m#_%
zDO7;*TjBs%$U$h(5Za(t79$8<%_)s13bd>k>$CcG*uM|4!J=fL7v&div<QNL6B2!2
z%m0>m$m03UR|f=A>kdPg4a=fWL>$p5TOErNy2ghuy{lQutT32oEmYlV3sliN)hTef
zzU5l9>{|Q%T1y=!3q>_3yAi@4rmn0!lAy$&p0uGH!Ko%iA_!0t4}?e)O;KB#is+N#
zDJc}YQXcB`!u%a}^*=oJmvWsw6HfK}y>#xz0{?EC9*P6DeCg2<(*lHL2-^Vw0U{SE
z1WLf6D+tBZ!P{}=ZE{lZK`ny-;$;xHbaaI>+~4VqR!r1uhB&ZuO{^*~)}%UKRh<lh
zYQ%i6U|e4@p~7H;sL<w8L!eWXk)A`X<$H>F@27(cSM93hY*Ux1kHBA}p~snt@_~jb
z(kNX~?~fBdS1F>Rizj85N})rDVZ|XX;LmeuoJNc;+zzubPP8VS4%ZvB+I|#LWqUDl
zs?6QHMQ{N(k-1fb9C(nVLK$F~!3B#Nbcli@S23^>RgM=7sf-&OUCvDEebG}((d-B@
z<1-Jw^|RP97GpWuns=(b3B^x@&8E#WQW=*<T$*tt(I}^?RB^U`7bGOGBABd)w>^m1
z*1<@xmD|-4-g=~AJdXw)w&~lH&#75;3B~k~R{)NBt8;U4flBZ@G)XZ>?95Lj28!{k
zWVa#>I_cDypCt~9J(PVe&V&$PRrC&tZB6y!Et$Vpzf%YH*2C_8{?3?(Ko@ImxNN{u
zgHe$rG5|y2!I)#L!%Q?W0wk^ng=?sM-bLM4iVJCQbBN(613e5}YwJsuBt{qCrnANu
zFRymx={?NiTc(X)kICk2Ni0dL(%g;E=Zo<x%RJ^Ic57oxR>~c5nvi@McRSUpXM46O
zZ_?l16{uy?HEAYEjVg*x(#xZF?s<-Ipnx%mH4Zw2gc2gl$kiyIR5^&Aa?xXcS8Tm(
z<+^L)9};~y_f}&qEbLS>JX8Ps&_up~1{7z?`!6=Szf7r*X9k~GWrr>7=+o;bF6I54
z8h!tZ&2SgDw<y{W1m3#sG72YnQ8G}BK}+-_Stn5H1_=iMB(&84byKZ(!;RggJQ0WL
z9bNB1C?M1fHQ$OMh>$hwJ#Vs$-K?*&?KOzS+~xPHQB@`a-pVE+_xd}YRw9y_XC)EY
zWjzFLF_sf^`CWRomR9fQ{JFoiO^$n@r=pHpvj5wrjSvJt*~lJK4E5vW#qZF&ZK|9(
z8iS8K^QhmfO(-xdYu$(vb|+{D7zRxw$XR#`4xjVQe4?)(eNta~eGbNvv$LJOvaZSs
z@3)eJksc%}qI!tHTA%{NQHwYXBt#J?5;9=j<i&#2-JChpG6y-@SSIG+7|7?wWlmzw
zOURVFH-;sWiPBxQEw4{<l39MNzM_pTDBQLDh{`T%+`kE3nJs93%`8$Me`R!>mc>T~
z=g!j3PSSleHxkM#0M?XY0mBj~oVHZDEIcvM(xEBRcO9oICb>T=k{DQWj@3zjK<M<q
z$P{7dm0j`LkxRdF85zzsVuduOY{(|m_sudJcQnlIg+OAQ3mzpkyxh7;RRJ$fHvw&A
z%F14H=L;Yzlaxa=G9e0svfW8skBGjx(W$JnhMu{gw!WY$905cDIyp?cN!Xoi(pOD(
zHvPn8YdVtcdJD1W3YubWLm(1K_@9;0%bsU0o^9%TAZyst-n-ja<ML~kGGSF~$l{gh
zvcE$`V(xTQ7jI2xGkye<#kp{FL80qSZYMQYwyA|&OV=oIv@58gRF4@^CgGAn1rei5
z_%O?odMDjBb@R;LtbCmq_+Blud^5@rkM(u3g<Pbb5Ss4q?242DciUUg=+jj}2?|z}
z<`qVnO_Tvh1s7Ew3qr&P0)kw%b4w?P-JOd#$bdeqs+^IA8xE$#Rfb|S7f>NJ>8-A?
z=;Y?g#S#Z};{q&;?r~X=Y)(zlRk(6tM@r80DbP?Au1(E)aI)6hJZW1t#_6f*spAZ1
z<p@2XtM?=L&)i;unv(cgeW5bQ6HRMwn@W0lka`&D(0mA#T9n1I_sNwJT1(&3{v)h`
zyRkQ|QDssO6Cg3!xtAo0AT;f?;s5*4M8<#yP-RMc8BF@QY>A&`=AT*JqbKa>)8frB
zW<7_ReQy)M1$mreixyxUAXpP(Fb@G@3^W^I&{_g@yii;%vcQdwA9^R3*kF=B%dS-!
za#Hylnbphi`{fTW0OM|q8tz6jlG5i(Gb?}tfXNy30|ZoloQO;?=)1CNc(pB>YD%_m
zO6*fkT!-+Y!dYI;Yw!*h^1E|6RL1LND9)#9%_p%y`tn$ero-!2dtEW8qaqU7@g_W2
zyH^fD8lsS35fX@zI8nu)S_&ee5@l5+n?%tXFK!OTJK>3_+wBibcA0S$ZgRJ`?%G`h
zPpz`yro8CDDs=^Dps$+<USz2TtPES|S1`Y*o!Mh@qf)yP1|L-_3bOQ$P9$n^DkJ<j
zJtKIY1a^0eg>=xDP73plwY`cxs>dCU6lct*gpaQN(erD;j|9y%)!Bamn)O{z5)4Rj
z8*_b3{ne@4*h0avfvJjh#O}L^O(IYSZgx9boPrI#7lP8Y@Kgo#rQE{40}r!Igw@_r
z`dOD5G2uqd^gq3(<<I%z1+~rG$yZhZcXBxz7?jKi5ean%q#SaxA`sk*fRT>SsaD$h
zXG&n=HW#6qw+Y44<&HpiO*Nf17J`Jq?$YxvHL6)^ElMS_xMF%Kl}z)O&K9}zc;V_8
zV$`xTQgR%hw>^z{s+7I4Usv}^$Yn9Q*R0;o%&N7!dCDej$0hW3`<&F&PP8;oc~tdi
zooPJWt8)~P!;@)He2S$CHAF__wc}G@gAuOMkt9rxsYx{%c+K?Zk*htg>n@_zEmu3%
z<A~#^qrv&D?%k-jQ5XBPxUNIQ0*quVq)bT?-Gc&P(CLe!k-#JdC^3&Sb9JGXV(2w#
z9AWi00Gvjt?D%d6iRs#)KO-pkbYxeuwB{U03=HWvN=nikSMjfS&5A=u5E$CuWzGfJ
zZwR^&<pfx>#(5d8Bwawe29)p~xYm$ZRu^XAJQ(8bSsi78hgeAD*oq<q1LNODPb*Eu
zkws+j5|KVbz-ui(EPItYk;tHPBZ!`}BG}t4;(am}bhO^Oc%TW!>vHz7VjvH_NaYeR
zLIJ0}l9nC_3JMav3=kt4AhvN~LQFw^|NGEH(*Oo6UrPHJO!~b{nU7)SpIJqVEA2fw
zD&?<aeTSOusk)uSl+o2@ARuLdkO7haltA_>F&cMCLYEwv<;!>6I8!!fBSoF4<P5_t
zsFRHy<KP`sYN`+n9Q8%8GcOm+IASe#EKeq$?o~pn>gY`F4a}K*sfhW`GkTfrCUA<)
z3JSFC3nq!1-NAUz0j&kXlag=7XGfrr#S*q|E8`5@$P5uCuEDv*l@C3G$uL&w_Km5c
z=v^lHi00&NRj+b;D(sCCHhpDrbuP?=0yF|CmqiZrol|5e90HxWCb5JSv5h$xNtBfe
zbw^>hY%JwdFQ%Tm+;e10MB_AqWd+WF82s$oQ4oXyHW6*ET56KFL{??DOQ|o{dU<9I
zy@vkiJi>(*1D@gGi#Q_>sV!npE$s#L^@*qr?9SYyK5K8CJRpTD=*^UBa%6`AXfDp!
zgo!A+ZY(UWjY88Xf&pN_YIE*B?UDmdk6B;I#UECSC7F9vju}TSBV$hzDhaIi)!p3O
zX>|d2lDnE<IRb|Y0fsS@Vq61-Gl^^)*I;>2+7p~~e4my;jU|vZ^;T07qrokgQO_CZ
z)oShiqFMv8Dda{K^n5GGmrCt&1>(m%96a6;%gt(x&i0pZU|`GKz<-*epJN(scSqCW
zT|jP$-!Zn`Jq2=dv#^seYe^nx4o~1cyHZVfwdX&u*)-dgggW%-5g&^|{c$P<n3gDw
z3iO(`qp@^!jt^QGyfOPcNBVv-j9Z@S>>}f-V|#NZDcBvlJnbHdq+&T3VxH`wAR|Z=
z0%`!!Erp?6d1#kKgy6<wZmTMOnKDDWB_fsAmoTB;gW!PZrF^IrqfC!;e#F?ZEK9hp
zL2g4;kvtgiAS}1URm5RLZ&8)(^EGDbh)zUlHHa^u#mf$>O~aObsZ@xk0|nyoD$@`+
z3#ygHnQdhVT3)gkpkWpGJKW<IPc=rLP$SjsO2H`v+C)x`r01f=qP!MJ+!|R#aFQ7M
zLAP*+&GN0?S>G$CmjrpayNe9LT$KTe24Y2s0<CoSOHq+Z!dy{-MsOquA`+_X!L)+j
zDwAvV{&7(30uIeb&p%SCVnQLn#I?IBF;2q&`_M$+0tMb<%li*aYQd}-Z(-@XST&O?
z?L5`$<*{Y`hnl@Sve`#ZUo%Hxw29CKr#q6ZKG3|Pq3rbnriy}M%#JwQGh8d`0sO3W
z4T`Fm5L&dWgAIv7&0FK<BzLrUKu;#QZpQJRjmz&BQ60UC@+&^;6Hy)Q>oeWFqYEUZ
zFsX4ET?3^kY1Zbb&y0dM7Pja5(zMO~;#(zg4u!>Z3M3B$?e5Enc0o3pON&BULjV)l
zyM?Sq^L9s!6>xG!kYN)-ag*-b)gOm%DP05fsu2L90f>;kY^4qfD7|HmtH;{x$MxNx
zX~rZfzkMAJyhcdUve|bLnpq3W-BvwySt0H;=2;DVtY5<vJTdLmYpz<J-c9e%SJTHP
zM!XAQ!O6lq^&_?TTD0-sQ~mf;NoinBZ;9f02cki91&~Dq&_M<=yhxPEQROvi4AOp&
z$Er-mvaeI=NLxM*Z0ha)=zFRmf4WPVGA|=~(I%U`fYL()@I*EcUua}`DMrW<m5M-&
zq5*oW3PBfx#3{fdof`1jI3WV{<!J?70nvMLq#B&?5)71KY*-01GpG+7+ZvZnaInVa
zu*9csiB~sJ?8}w}`i<(DTD3kEnU_#iv&M3zz5R6-@|APDgEsR2d9YbTPAuM8msr)<
zNktu7r5_v>PI_mpfQMSiTIw9_Ht|WBmi`ROwLRQTF@IqeeB0f}etQ=m|GiUAz(4xi
zaU4>72qk7K64p*?FgDAa>!M2-F<oDzQ!RsGho%!NLryWkTMpqdU+wGxR{4^f>~f^Y
za}+ob6_L_!^15rC5qHe@aBr1{EF3ExA8n{)tnxCuY=X^pa?O@WSf-k>{Vj*yXsz><
zyl<|GAwap-kFyp|SkXKU<-P}^hbqs$k@#U{$e~%ag4F1ky{_ucs>)LS+S*p@o%<CZ
zSdxNS`&74F&eAR0yLOVw0&gsCmOw%v)nFmj+DDNlm&ims38Fx&?6@u^MY6+Os9Tpl
z!Q2+$)=-ediRgbJxXYHF%Hi*#<y*FCn|Y1X-;6(zdAMRp7MCcgqIG1__0KFkyqKF~
zLkUc=mF@btP~9w`ua=rtyrOq#*Tk{oX(=D++b;k6z(n!@1<Pp6dk-~euZqc^VeF4q
z;c+eOu-fXyvt_-88tp|#Mv)_n6w1bU#YYzwqzqY_M`(njvY8U;EZNs2Ubif|amv=N
zM&{WG$V*kvFHxUpK+Ys+75C+45-+#AuN3A2TPt#)>Jv%;sTm?h4J5^}63w@0E0OXN
zTLmqXqQTb-GK#>H@pn!e$+m{A@<gKT#yia&8b(M6&GBL*^E6By!le!P;##?$f1uV^
zaTx#GKSE-TB7z2x!*okhzY@Xp<DxuyTEfpZrUx3BFB`;ZSNm;wds7MGNuH;YSVr-D
zq9;QU?9Nf33e<!G8gZ#&PX%F6O+Lw*T1-PGtLD*pTQ|Fy?-d?1c}2kL-QL@2bpgJ0
zr)22Vgtn4Qko+#NHbhDS#6tlRUy}c^vd*+;^{c~CnQN~6%9Bu3A#uRhX4uPdRax!v
z)NWbzIHq|;F)X8jSw>S-F+>Fuiw8P<aN)`uXWh#7kk<FlUssEPA-*_vO;Xvh;khxh
z<qbaf>lDSuS2Yv)rL!=_idmf}22<6Y->gU;O9Uzcap^M)Rbpyx2a;8kV5$kdS~4je
za;ip3g6<Kc!u@9UW;HQ^vbNNv04vh!C=oSh=&vcFQI3k7gG&me_>BnmsWcU7ZAL3n
z37c}<7QF~TNA4|Utfr*Hy=vUOrOTJX|D&}$-Q84YR&6N6lop^`+VdlZ7R;iX!Db-#
z99*=n9WKAbx#prqrCSW%>^odvYArEZS|nV%Ys(1gsso6^66ipPViCtNz#aD-5EcLq
zFf$kk2pTAg2tlxMCgKAEKs%U4U}S-oZR3Y9hEhC1Ak0se{_f+vFi(7qI%Foz#Yi+?
zF%l*vRyTr6u&@Y8Xr#tTOyx6<Nfd+Vu+G!?x|SIP?L;M~TFxRgN`#0|Y4W|i7GjbC
zWt)~ZlJzRh4%<`*SA#}M?->atLh+q$*}W>&o_3GMmH+#|MC5=4ab(MT3?90*jQL+>
zgUMDQqb=;P*rJv)Wxa+Pt>dCe;(CcVBt%hWWDzRj$&#~&5k$0XiL_EQ&m}CT-8!kO
zz3ww%SJ~TW=q<dvuX3|m{UDvgJ{4!?G*v1W;j3z<JW3Vz)_!LGR_|`pOOOY&jk+U)
zc&Z>m9DW(0At(|8R0WWwf<Q2;GU2nwam#EAHPDsS+r@1MVTo;F*l+@e_UpOhQEnOJ
zkKS7HLc`G&qFTg`9HwtfEp`hR&DUPDjwaNg^O3o&D2^x-xW09A_*@VpmJ>+<9fuuf
z*TX285`H8MiGEnEv!vdf{$#5S?Z082^tSg08>nW<n|Ygmz3<0p^UL=$&h3h*ar4!>
zyvv)G12?TFTQt@kmB(Oq`dR@HSfc>705rG*M2C%t030@eH!^{fse182lw3k{qYS}l
zK#~cAEX$j%$x~9bp0d`l&$&}(n!q)Xz4)S<%Q!ZDhUGSt%N`wxJ+51n$~Wvu6Zca|
z<gSEtizhj6R{!Sq!Dzn=dS#ju3nnvI6A-G5L=hgjcBV@Pc40|RcK-EcNFDXEOcAC6
zAXXOwSO8!F8nVFA1|1*(A$Pz70mV#2M1vks4j$7Wr)e|M$r6~L0DHn%016obU!Iyu
zWx0OVPc9;jL%RpyV469I;Cz}QFzP7VE*uk=Q0UCTQIjXBj?B@iG;Zz{iv$!R2^g&%
z5YVOtg7;FANzS6WD5F1Y^x~8%kCn0BElCYc?CKkinW0e^WH!VDl~q1&jP>lYg=U&6
zIO`$@YfoI-l*=jMA{sE$r6*(>hMtvIdfBa6mr?wgC8A7CRYg01lcE7_T9bK8EWj-;
zUdjUIKuO1s1C<!$2*|q(Ap43*j6Chh3c(>n00}?~xNjV27}6<#Sux(`jSmU{vY#<6
zYi}9;5b4APM3PLvy$5gK;Mh?TuzE^eDpCcH&T~R8NLe@{|NFpX;(!E&WlH-d9+=9E
z*?(z<y;7x<BkeqN>n}3p{gxYL&zCc9QZdwvPM!0bW_I+A*p?kLV}@|%Ww8towA~dJ
zNDavm8mE>rDoyD-yZbJx0$=Wu<4BPJW+{Opfwl&U1T^X}!8iyxERBH92tpt&6@^>N
zVXCsV2TjL`nki_32belnvS&4h9&OfQQq8=R*+2h5Pc3mH)}D9vye5(gW~vH}7#JZQ
z4^?c~NquS=08e<A%9zDT;sb`o=NlCf#siY$OWArN;j3>SoxhN@@mS=1qQdHz(w$7>
z%F8Vfs%DPV*3?=q#$Q8U1irE)!CcXc2eP6qNFqwp2IZL2j21}4hX^syWXV^urY93A
zn^%(ut+%Dz?c92p0spbNpcG4#uCN(Ltcq)-IqE1{g;jWoR=Y%CU+j^kwbn-PD2fIy
zR1_sjGR}Pb2DE8%vGdN94CE!8w$t@~S0A-OF(}4$5sRvWqehRII>O7u*A}#(?iJ^T
ztU-4dinHTtJJVlZWj@n~Syo^RkE<^RlNXeJl*lKkS_Se+uCoZfWHHThiI9dTMv!ER
zf;05k*Y^8+;8Av@6b2h52s<RyPdc`$bqwB``!6ZEyIAukB7L^oq9F1sFhf{{l39cw
zW`iLEEr1}60V)iSE!BsvM8lwVBeRYy6kUQd4zn?rMo1g%GQCM-__He%lEa4%UA<z`
z<~3f!gH~x(&eTwD!HO!}p~Law5tw<J3|d}RM+sTGY;`T^NXpob8mx<lDV|!dH+S=@
z5kx#WaWnK&Hoc!1vPq`8hbeelylrD{7}(938ZIw&c$8h!&#J;X?7uX|>Tm?>XKrn^
zGXwv|)5%Jrszk&^A5dlBGD8j(qNSlxh`|vnS{XsrG<aXw%hKONkQfLw3mZM}mf$i7
z$Z-dDm#=#5ac7e0^t(3@cptcatn_*-NQJWNdaB_-nZ;lzjpx_@`@lrt00p0A%liyA
zs;x|UZ(-)1R~4fz?4=x{-?5{4h8q~Y6CveOD+C5|PMHkzSMOC6&?g1yQthsBZwAi9
z;FVPoQi;lO(c#Rg9QShG)J-u9<e=-QxHh935sa2)x`?|Pgr26N4;nTKAdzV<#|z<<
z7<tac+q06RYGNiC41iXstQa9vIKfdUG8rPV&<0T<IWIv)NhRE#YI*u-Z&ON;O+G7?
z;arcQ)yVvhs$|oP$RUFfsZ)}wWg5Ldh6m?oiy(C^zH!Z<@~Ov?!5MlN3$`n+LV>mG
zu_~fy8e!)WS=Gy2Gg$fKZ9))vaj<1{idnweah92uq0t1RqX+K;vnbMKIt+bv*%HpM
zH!|PeN#$i#;iM=KiF&+86=j--K}1Z9LvW0SLI(i>5&pjKO8x8Kd6onBwMmeq^@%`-
z1Vcdx4ImPWzEOBlV`Vl3Dpe|Mu9xx~ZJa1NOy5IIRUHfMKQ~pgKQ3(dcK|~Y#$=l>
z{b;gSyB9NZb09eQeto3mqND4|tIy5-N}X}Zq5I`yP6fl0O9Dw+XA46DkUimM<sX&l
z3i8<0*A@txj!AlbM;I9;IoA1D)=m&T4dpqw?T<up7N;^x!iokc+%<aTqQx4PmVv|l
zevLrfovP}krd5;#rqON2NN^^JqNcBOjdsKWA%GC!8m3UC1tt0c)4kVSZ7ynYEFrse
z?U|kvp*;>Xkq98v0L;IXSsA6cSQy1uV2$Zzsu<XVQp`}SDz>I0tXQE;Z&E+|9z=%!
z36F19TCF>29#_~xjn<xY@pCs=KeMeTzO(M9DUC?dD!@y(9!QR}p^k3sD$+u;AGJlq
z8de<B-U_S0GVwSr_fjm=A5QS9{~CE#A~H|=|MdUuX1l<G|63&HQKs<31%T!;kP!}<
z<^aI$7m87X2Y^>OgaAN{g;9mUR<)9Bw=RbwG9^$F1^cPVbRMZ?@B;t)&_vRJ1&U(J
z`z$spv+S7vWrn&J&6_dou-NL>Gi8028y#VSmt+rQ!uDU2&_M2ZI*8<@s?8e!Rml`9
z#HI-ms6(PwSgFzZ`g60YI<1W3^GFsb)~@_3(_Y9>S)?eCSTQt31d}%1h`I@p)Z=nu
zfRHwnbO%w9Q?IS>MKSy0a+=a<+@$3;X+sa286}~{V2M3u%aXEZ9k9%KNMStGP20VR
zmM|986Le7HeUl78T>zEIlQM)z@zQ`M0)(zA7$CtIYDo@^RxH965xj>RG%do6uG<pG
zqcvwy7&0=;9o9bXHM_B>CN}a#M+KJNLWtl?qWN;7JEx1)pCo>I7@S#~KNZ1a^T&$n
z?)_RUV+&%|cL`Ch5G@MfN-G)Iq>uukmgXI<F3NiY;Wkd5vM*^;ElS+mT-pkFHXRd<
z-pB4<(Z@AyytF|jRyLxncyyZ3vHYs3ihCvjV+a=_Qs>41$<`2&1h)hc9!x~2s(Ir^
z!#T|WCNOEOB)TN>P+^b}u^@%oEo`b)0mvR`{S_od<ZMgpJgZR5K=P5aR-CJmYaC|F
z$R&UG^Z&eZH7Cz$pG^Px_IbY#<8ydgmrJfzrkT{@S7QssHf_!kyz4we%0B!>W9aD*
zL?Ycxr5Al&%T!4y4_agxBvU|R;l)5B9tjpglNex7;DFE=gbZ}3NI7enwfa7QOhCee
zMbt`mVMHf2tv03<9I9zY<!y2-n6iixp^$^sCPXwO8B5NesW%77J@<oRbJFM*MHzsg
zS913ryOUaq(^r<oqV*j<$7M5@GSy~<1+?lJiRj#}0G^G>qOqteIJnXR1(RukE#qcU
z#IV7EK@mB;S+pXwNwE!16?%$DZce6C*RIm4qJz84FrC&cwoQ718K2UKBEnICnnqCe
zg=8|C2A8Kmw2hro7_vKF+r{dw?&?XvNYVvL3!9yqO4md*!2tvPf<p}5C`(Xiy1>AJ
z2$7DVrOZ1J1P2ob3ko12NtNjBhh_t&XcGEm-p86}JC%85vQy$ego;F8kTFx|>m^g~
zGxCoN$;<oP%ld!ZiXZW`Qa>&gIh85luQhUUH094QnPxen;Zlbj;L*-TGXML)Wc7dq
zWoJqINFEs5tr;J036BwlmnZD(YpZRvWIea16hp-1%xg%6pmtSM^DzRTJZzF$WsD02
z!qt?*L`)nFS<EN^3N&KE!U5EBqaFk^oMQ19SQv?zwUXFyL{ttMXzqIL%9&JTOi8lE
z<4n29F_2aeBsQfi%{p2kbQtp5B}{FY2lVPi+Zl+o%5*TNt<MAU9Ls9eVp&3&MHR13
zqeUpsawy^hCl^AptBnzlA;ig1po<{ztk|7WP*D^JOR&hw1+<+UpnVGCCYL_1vT#j<
zF()EbrY68QD%2<(i8{u2$%LGJb#)>KAxzUI<id=yoQh&`KhEx_RV1Xk48J+Ki(<^l
z%sB!9>~S|`ilDC3L>U(i3=Mt@aO_eB49^Py!=u=%k#0-RPNsn?=l09P+-%09Fy_(0
zKpuSSN?#)F#Zqh;SmNWXh*X5ySx3zZi=uN+rjI7=QR(3U*`h}0NKEB=DnOG&`vqx~
z3`pY9in&bARWA|7mU`u;)Doo{wUIeyV3IkaM^)3Zp&UYm<5`NT)SR13wV0jhXym;!
zwsSP-n%3VHrs;N@KK}daHE^5jTfYQn8W3LL8DtM(r$rJn8?ed_m&w$I$RLzmY@^2F
z_1QZ(ib3?B^)EqAOns&`C}qoh5wgs9nDj9R$Yu5i>kmur;fc-N<;l)SwnZBvIhQ2H
zm7!pW5mI%5I&&K<v{0L?qG`GE%*mE<nV<3Bst=jFZ$9NC{c5>tbVMOG?91UAUK7(#
zmoWsZCsH6moi9(*QS|AWT6^bZ=c+XeLM)}_+f<W*81=M^rSMZI5!?%n*@r=?YJ%W3
zk&<DFYJp0PN?ht_Bw+0C4)&g^cDM4W_;y1dg^3&}HD1h}C(;N=$r%eR$Z(8AV30=z
znUt6rw05Jz91;MsZ>EC5RURD?%^I%AEfmz5;>@F5Yn(wTH4Pw<EJ@$gS?+%f|NFp1
z=>P>(Wy<>rHd?B!8INg(wH1M%DeNTJYP~dNJ%pnqQfA&qyx%sa{3$p=$w0Vd+_Gns
ziW9cjnb>%NPFW8K#&=cZ7OAKIEsDg-&jexSWz|!ff%UeFsBXJj+IxZsIzjCjrYh2t
zAP`gw0uadhDzzqHkI^|(tiYeBZg(BloNjQK#DXgySC2Vopc&a+)}J_8qspHo5StUA
z)ZY{>l#>)CWYN-LTbQpxC#Ht{=$Mx#g{@CXR&g_+?VWX76Yd-KiGeh1)JS2YMWjnW
z7%@i4#z0!S8>B?Z4MxX^4Ma9NB_+Q~OScMQ(IOy9sEEkJ?|Bu^AJ6>~?&ChM>psro
zIL}W!FIdXA>RpF;_dcmuw#lCzp>7H;40mH0Mb2j5fcK<GB+l4L)%;W=GhQz^;l63!
zy?;yf3$MzHHtFZ~z4BIz@%aP-HklK+=dBiqvM(4qtaB|Qe~&}5@4U^!a#AWGvK8Yf
zO(a1sLR*v|<>Amz@FvWqMQ;P_TK3<K=P!Ap*fPR3{!K1tmPAA{)Qr$&NscKShb%&m
zUjA)<N!U5u{0F~t>$$_)(BC$NrcX~M0+pacD2apf;rQ6FI;MdWQ@3GBd7xQY-atv!
zJEQvQ&IEIT=fz>>6i&J<Y}P?s<TR!{S_2^~CtO@D4em|~K;!<We%5QbSStr7+W1++
z2h><e$z{8yInubB+^sGi{r8&TT=H(OP&=HP<yC33Q};X4>>daG4shBW{JiW`5~6FS
z4W5ew&4*-Lmt3${E@^uu<Y@;ddb>~onX)SwE0WFm`~{>R)myT$EqNKH<l}KH576t0
z8MFWd5(LS8yT}$@!vfB0EFEHbPP)qfjHZ@(c!;bk*(4|;4W?z^e{R_~*!O=c5{VyZ
zDvGSDA?pdSQOJx&{ye3kW@<Ma94&XHqPqs9z|-^j%Vs;(tYtnc<Wm1vx_J$%-pJhv
z5VO5hA#xo5mnW0bIY{SVHEq+`JXDkF8Q4jmwc0XM%k^SKIqIL|{g_Fkpnq=QL)KlO
zFiOa$M&Vr|=Y3Hnw*x)2a9R=x0sY_9-lqWAyN#Vk@uB9JeqZ|1`+;!f!UvxNp%#j6
zj~YZz5+PA>l<5^)Ci%+r`t{}c(nFOVrlK5>^>6;)Iqv2|@?<Hsk$g-gQ|YuBq3QCv
zLTJEyP#PVlgy~E<6wMYn+Yl;cJXppA*}?LNabM>OSaeZ-t4k4+SRhE@)rP+NN46a8
z{~<{;xF~w+y$T98#2>l%@}_@L;@!uU*?a8}KUl1eyvShE+7FmW+-kL=!3wLUo8BB$
zL{!3=ejCw_VGzaX44XR<4xll`OoiUmkWi!k09vCm16?WY1mPI1U|uyNHf75c4;`jr
zt634L5vN%+ZZcy=b?D%Un%89k1iw+I6WKfA=qt(Tnch=ND?Cp@(S2r)v=d<GRkwAE
zlc2MuWlTw|&rW$4IJPU%tjq52SG4*eC<jqMOF9_Aj#iq!CZ$mJ)FYpbarQguT{o;|
zQQk6mdo!(IbNG`^=xHJ$cmtRtusbeXaNqM=<ylTQvS+89py74K#jrViNc;g_EHUy-
z?339R<G%G!$T<|u78Xp_4`Ddiu>Vxj=HcOBl^4IDT#N;YadKUwOo30KX$n&_Iqh`%
z4W6?&4Q|A50sMkiE2b3tU+YrLwY8ji)zksYF?`^+i-V<-c5OV#P?3I#?X0FDoN6z4
zL|qwh+y&qmDh20fOw<D(!hN|w=FBK*!6cYYc->^>u!n@_e#`hG_b#=p{cBCthNSyx
z77ZB4p?q=+R?cSw+PW~tbJOYQ0To-f_xRe6dF$5E235UnK{drO>q9s-jKc`g048P-
zmc;L3@(dG!viK~GJa_(|Nn)dE_NKcNqOF}#DK+xWoDc+R#JH$`wim6?UQR79*UwJR
zeT_-fc3$m_)_!alMllD+Y|A+fg#z^5_}p86cZjeg8;J@gkRt4Q=KQ6MAB5XH)N?aS
zPaC_(TsJXM_$=y6?dt7)53{Qp%YL^l3P7zZ{G7;VyX4Pv#~(Wh%r6%>z(*zOTs`gQ
z;!F>vHr)uZKKsvow$4|$J$q#*4_`CG`O!A%HEa)n{vEoTU+7)cbYz@wU8a4obTlbX
zSm0oA>d%%S`P<fgp-lo?ucVQvEvFjHJGVW=7?|T(+!wl&0Y!#9I?}3V2}QJ|(PRq&
zJi3bD|L(?L`+|^#cLQ>2Y-*9qf8Qf-<ZrxqSoJw!PCW*xEX~borqisbtR*Ld0RZ6h
z8de!rme!A|!m8PErE!Xzrd%*rD};tgb=CIiM2Twt@f0e1^Y`NyVEay_prnXlu;prH
zaq0n-vmMF**8Ot~kMumxjR{HpI>vE);dGVo&B95&j{p1<^Cv!-&O7p{kA3y2>24@C
zrYSbe6M6a<r)IW-{aliSXQpN@ezkn8a^()wDgA(PO*LXUTNXsD1G2q$|I`NXE&km%
zQJL<Lx=1zlv3zj8-5p{aa{p9@!=pO1wP0@V7++!#BaUPH1xc&jFxfiz`jN}lUm;m@
zsxwrzWM{$gY)yN4TIb|2_7`p4BLCcVug&fUQ3_Y=+&9*uMLI@5<cBd7v=r1JR<&Cu
z$bO}8>xLU$9B$w5G4ZYwihQpblw!Grzl*s{y)26-PI9YZQ7YUZIc;fqLnl2|gkr8t
zv>Y@>fIE^{VsjZrdb`zkLl_Je$Puv5S?ru+Z^T^S-R&H_eJ~+lM@Oq6ES(I?&=n5S
zxX~dTDcb6h`C&7sG!-U!;zDa$Q?Vlbq*Mn51(ro)zIne0xM!|>yodL7r3NJiVoiRI
zhU`rl)zf!yyoo7wZhu*~+xD~ir`jFEIR>wXy*Oo|4TMTm#z)&~+6=Au1abyx4n$3*
z%&3!h>;*xj89G~)Pd;LfLuJ|ApjuVu$m!bDXuB>t7(Iag;(pp*Wc^<*SKtGO*ioO4
zVV4SzJ&ym)9&5v&=3GDSI5o-j{l9<h4-^0uxAAjc-mi1gXV<-PuaV5f!UwWp#z+OX
zM^)k+T9pmpLIQyh#oF1DFaC4leaW#_iWP-&F*9pWxZfeFF`P?i{dGh{4tDUiH^{a_
zDo!yfj50A^Z!j*ioLxC`h8+ZQUY-_TIdF2~p#u}vx2~1d1o1XROMn$Poj`R)9$Gs_
zw^{V8i?qXf8L2D^_@ofw2u_gmZ9x{WT8ugjZSB=g?7$?n1Q>~2D>h-QZgI}<>0Y`)
z7NpCrBdL)oL)PX6lE)|$%(c;i%F1QSmxww(`{pOgp9h2omEFQ=+{luvimN%#<8mAv
zI>iLj^0kWy&>Ve7QsYR%GuJ1k>aq?1t7l*{g|U$W@zS62ubqA5Axdu_dE#nP#i)fu
z#nsN+kj<%-JcwXzn{-<FN&)X7T~CwTK^;n3+9nNFsbFoYZF!cmxxJg6JZ0@~pC&_?
z6GhqJ!dGRmWN{>&pO{(fpY{o}g37aiox-f4Bk0*n`u%{jy6>N0?&Ht$d|G~^a=E5B
zCpfP{w@t27(hsVW^iogKJ}|8`*p{vPbQ2>JWCh6D5^LHwdD<ZV>7w4#eWvrGmB3el
zBm+2UMA_6T%!6&P@faZ3y>N-i#fmnY`OUSZ$+_{O40cX`k?#Xo8gMr6Cv@t&ORcS1
zFeSJoZ6@)AU1`j~hd-$UIbFHkA(-MXDu_>6mk6^bJ@BqEx_?_VUoY8Y<Bn>Zf8jVA
zkpRl%5=9(}<3)pc2xxsA<X5S>c&zFW?g=LGT-3U|JaPHXO2mBE(WpSV)>d*jj~(ND
z=p*i*^Itoxq4g_@9pI_H-VT>wV(*NqtU=_;bg+^|Fol!7P=cfFGut6y!}4qP&6*iy
zLcGof2-tN6?JCn|^G(felmTQ(CiYH@+2^ok7h#@Kj=NSHtnya*!k(j+fqyTPG9E|W
zzqN`|lN|dCUFuuwmiMS`%Ay_&{@>L87zfbscy;b9DD-AO<?<>P&o+M*<&h03zpn_r
zXpq~Ks?OG}wY+K-oyli2CyjrN4f(ZjO&G?uKs?lG^#<BcTCgJ;-wW+oD4~BcK%Z-i
zVkjA<yleSCRS<}({)QL?Wg=J((_q5MttG`gnaII55iiD~n4m1AwDNd`-@tK-$j@}H
z6VR}_;GgDjC;kB&jV8ViR24q&E`*~W53xv1^KjuEN@0j!SY-v|d<h5%3v$RX$75Vy
zPr6zkah@y{^D`<dtlV)nKBzZ7zG@mz&usA?EI+o$BP~5fl~jaS-pnuW(=Y$>^xjhN
z@PwoLv6NW-ZgDx@{Y~Z$d5fb#<@AQ2oS^DfZEyXznC@!je20h4Bd-6gd`tcF(y0^G
z9aBX#2D*B88$TYp@RBhI@}vQ|kYyHyj1pxf5QxvI&T|+9IDNML7|J5;dqaqaFWs79
zEW5jfmvLv_6m@e(kzUMTuLAcskI3DhrdIlj>(R?x-@AXa#+HBXA*(;MKAh%ODTcs4
zetq&m;QE@+KZ6mY5rth%ZIAdl5Ifa3-s=F{qc1}KpLZ_t4ZUMnZ^~7P+<rY`5hbvY
z!HELgj%^Wg49>d(zKv3F0K8Jzs8w0tZ;jC#(5XxFyQ$$As15PVI!MnDrkoDz;#VBa
zy>wLc^jzjFbPc!8aX_>71$CmD9s3bf-w4bCZ;cv2E{0)^@6FQ}Hr<nKf|*(xvt>=Z
z=sR!+_C>m|sAX<CVmDcG06ip)$jIpC&!@a-!&E)m&&GO1bsEUAL}d_jw7w#Ow$3zh
z-f!tp{k-aW_Hbqi5(*T7Lk88T0PJ=4yh)v~Buew|F*=vkzdl^NdlCE~R3!{sq3d1o
zb$|j(73Y7_SZ8mu*k4Z9mM)|^Xh-nsZU}fnWY@YG`a^Pj$6a#KqwrE7!m>A`gpAs=
zasPDbq0nJ!H?eY0>@e1M!phBx<H}@oTa5!a*^Hgv<u6<Di@NTO9p`8j7QS*w(%!>2
zE-JD<E4(l=`t$~N>z3Wuhkkuy6&R(X)61I?N$y&kV|PzJjX7;K-l?l2p^>8~<%rN`
zQt8sm%i|-3$9js|?%uXxZ<aHMQ8n;2BJh=dXgs~~ekni-ZW)2D@)I6?7my8LF=68$
zES39~M9=JlVps=|Ij|)^3h7pP46Bmj=s=b@W(!Gs(E&f{_@~V)XV~^jy=OB==r>PG
z+z-F4%P@7?lftD(NHUCPx8k6v-GDE<WdXK{?ggh~eJ)JJ|A}wvyc>)s%9PN@t)0GR
zVVAn0Zw3eGyUXc`5J4c3=b^gu6}1WLl&3j;yElN@J=jEVVE)7L-KqR6s8u#pKX}Y6
z6F<B(;h-jG0qf8STd_s3Kkr7n`SGJkoaGLv-%r-3EhMKW&tl2GBbb0wD8z#YF#vE?
zs8Cd>;|odB5H-*Ak*RMT%eG<;XH6|i!&vF%(Tht~8h?M4JUP+h6v_cD69LM$tnt#N
zn~!SZ^nrR3;E!Lg-Rrnz{MCW&7;p11^l5)+{IAlzv(>S`ldn=^ZoQNgxOrSs6SI>O
z1LGu=_*<q@^}dpB^0u(*ZdP^k5dO^qWl#=eXh`ML)o3y+&cD2bXy)CmVFG#TRA8uo
z;Np+iN|sflL$C(J3Bl5(ZhmS2T{bL}o}v*^xHU~)xLRTim_nTagw!UL#On<R!zdRO
zr65$m0x)J6$3uglqOv1q<|nj(b$fD{#aJ@C!df;#I=wYx>ooUn89E8DdUIs>pyG#?
zNgkkgF5^OLy;9cUVF$t6=1_}gg2nsSuI-E)r;*T4B(@z@6)vQ2pjL`U4dHM_m}cEN
z1TIz0(G-%KJ93%cmDIhqUlY_FwJ6DwHR0>N8BMPWYCoCw7SYc6Vk=P_(hIFDk!R5r
zI#4{BG!-KUZGS9R-u|Xh)A07wkJH6!*<YBdBArFK@qG+LmV+UlE?brK6+-9|${5%&
zx8fr=pQP%w45yp)=NXDwRPb}8O(~-JgpMdaC~kanCo>;ek(z^1u3({YG8J{AVJfS;
zh|hyw=y5UgC_G`S<23W~^zw=kGw1e|0&tKCKX>L|qz2Kw@W(cBa%u8SC%sMFFoc{{
ziAjuJo|22y^3*5b26v&QGvB7awXhNPw<Oa4SfINX0Tpa16PzAGs`YO+r8}ejW7{^A
zF5kWh<tAkDp7(^pi{5npBmDdD)A#c7lS9i_o{rBYY5`8CzB5&SdDfWZw`O7JYO*N*
zBSG7Bs_%7gW89DuxQ4A(N8z=(>{L855fo1a5LPVj*U=uFB5AA2?KoQr)!;U)kKfX{
zG;fx19oJGOVp}WX6yNjGY>kk0c5#7}9a&5zV&dOjGz7VSBLrF~s^-1Q&TA&q5Ze%B
zd@nRaZ%6{ko)6iQU0c^CAw!St)8jX?qN(^I%i@`HmXH1O%FR~1Lh2-#V0eGG=?!yl
zCHnki2itaby<+eJ3eB4L`8;d6@;<OO9UiJ2z-il?Zqxq9Q28p`AWGQRRdPEH$jzGU
z&4_Uc-zk5+;z1NMP0bKj0OoRL*GO3RkjF{V-Jo%zjaVNI>mX6FPrbEx^BpLx7*YXK
z6Y@@})s+`O-m5>3e`lR4U+JC3z-i@X$Kx)ona{%ng>U(+=>96c`_K33?By%FzflX1
zIe#9q#GXCPDJ_UOI?xgGKd2<&4=$$OX;$qyEbNg+yT3eKEj~F>ev$q62$LJU7Im%?
z;2i5~L@2TlPx%!d75?Abs=buims*+{#7kCa*z<*!-Lf7eRIbr;Erm_*m{CQaq{0iA
zpDm=%{WUlN#fI#GaN!tvS3#_mAQc0ILIm|%9VsnDkCB!}_v4%(WyvsN)t2-9AR!lM
zU{8OO(u-jqRkqvvtop8TeGkku==`4K6>G@?nP(QMQLca=6vKG*ZA*`h$5<vMrU+|9
zOxfOOHVNF^F+Y4$st^&kQUE_;$HRTbg9V<Rolm}A`k7{TBL?~GQH2DdOoI!G5Ur5l
zEFot}F&KPhR<}x5+q=m^uNpi4LXC0oVrE`Kid{z}<{MZSZ*kwtpE#i_7*sQH7X5Ga
z;fA|rRM2<wB3B|2Z4@-TEE9zyTFRsg*(lZK1SVPk)6rhUR#NC@B__UuxCkKWtGEs~
zg1ovn9uFX>Ob<c?c>{F68~#s1%W*WaS)<3gO5eXDzsz`JOD$N`1g4Wh8FyZhuOvj$
z$q(evG{RCqUI)s@^gfj)>@|6^zy-6XO2_Yp$X5aiSI2LkBS6=ms^x7J-c__IjWYf7
z&jIr;O7PR!O90;AVQ#X-wooVxIl0~Q@yoqgd0`EYsqQ<EjqxOtLE7<?bwIal`w)Zt
zqd7e;*^+{;>=@_lJ(-&|%CrHh60W)m<2ce(*^*<D-p$B3UGpS>0-ztpNN3truDF(2
zG@}c9%O@+raVT5S==bb)*N*h5*m0|uW>ZSVTv3tM$b_EqQi**+yAG63JVr^BEjJ6)
zcjg-wLw>Qx1SjwIgf#ybwZ;8oQ@jZG*MOL)SIv#?sH(6I(C{=jkQ}aOc-N*qfkD|g
zk1m)uaOe>pj9bErJ+pxoC$vj8?AvXy<Po$f?d-t>5wqdt^l8!S^Nzh!n{>c{svJ*?
zR`s(Me0V{aLg2X6%1=)d@Pw&Eo=n)J6c^6G-FHDLNeZDz{+pifxL(I)q3C%e=8a97
zb6V$l0();`FzoJ?T<c<CfC)T!lq~d!o{Gwfo?3A|2{sJNJJrsdKtWg+#a)gxxT*}_
zf9yFQ!_l#uYVOR!{h!BL7I^G`yQii9^0B9XwW&W$T$6M%cJThf=oO+c(~o!W1_zp?
z8L!!4lIsp`)ryd?;l6w6H{BJ{(m1>Y>tMqQFH+kxBb}(;x@W4Q)D^^}XxZc$!~o=Y
z*=h<xa#Vtz7S4wWzy<_z5M<}*q$ent47E8LoZ_|t>Mk%W3ybS`wThNz&<v>EOR}LZ
zf`F4#niPz9`e#O0BA=hgNr6)<+YdFW^ra^2>b#GUDo7%m80&2>Hg<c5K1Ym{m^D-h
zXS1-T!M_cL1Z~oDcTx?m!Y5Mo%eTI7lL`rK3lm)*diNV`Yq|xaro^{y6i0>vQx|8C
zd!E#fqJ=EHQ*=VDn-?U#d)Ws_VL?y=MvQ?;{}D)i>G(Qt>9$dfcV(MGETL)jvT!!#
z+rulokdz(_0ITqgulJ95-iFyA6X|W<{KnO4lw7`SA1`EF)Tgs`+Yn8zi%N2X#OsUS
zfP18g(NSw_s~HYl<D>qcgcjofHJR{G9sZC%z_FRDErfojDR7Xqn09uxg`QLfX-RNe
z<?i#3O4h`8`|PLKJhnG{u@>=*&iR|(N$k-_^DZ+H7cR<XuW4862A=EgKYJrSzL~l}
zpRDFMRDL_nORd6%|6cgBXsY(TI`s@0nw9bSq9^v{@%g9i0Pa%XHb>uIcb{KbTt9v~
zlucZG|E=BJrm?=E;?Cps#Ch?iysN+qrYySxQznm@#~+Iyz2*F{_JL_?h0|RVuOyzS
zZBVFK0>Ckmosx7YApKCuJbi+-jX6E!HD5VhfC>Fj=AvS?3vWvMs~5voVwWy|tuy-C
zfGK@T>1Z2p&v5@To)6%(LSGcWL&)CE(RFE=A1M_z%uX^p;?y(a5C+mCFtmCBz&&U-
zU1|<VpluT+s+&smC}yBB5#|?_FtlQ<t{F2=rAG=I4yLl#HIQKmI50Fcs~F|S&ftH8
zfGzuC%4xN@jCmnbi2903{}0A}v0f;3)Yw;hekO2gcZ=VKN<igV_tR)^u8a{rV7wfo
z9Nh20dOZW4k(95OVJBkB`_=gvzB9S70+kfv#7C#rLamh-XvA+WzA~W^^<54*4k9n`
z9C3_X`wyl{_REGb$mz<D26wsc)(J02GWf*Ye{V20VGg6Yh-sUf@15Tt@1Y~hdDIGX
z9n2VChE#dFOPQLSKpjy^`D3%oUmSSpmr^n|US4><P3e=JV!S-lxbP1Q_emCIqOZ<P
zCY-)MU$390GgXXiM$$oZm1qztQBI2JbaJX8BL$T+53PNoHYpBIpBp?#<#g?~u3rL9
zhGdSRf$_MwmqmB9_+*I1hjkiO{_gtCPB9E@)_}4P{ZN<P*9X0~wu+}*Sc@9UTY%{#
z>RZSoK4S&z`~I@En;Ct`Vqsp9wti1si-9SDijE;i9D}AdRFFx)s74hz*Dm<JOy=+A
zAE8`zx2p0?Tx};_{qD;7rB>Z#ZcNlq_mEzr-zVdEZN%~2Y)JW$c{!TC*9^5r<CYO&
zVd|@v?B1cF&n(|&OooHg$;j_A{L8&eDtR>KMo6<;?qL2BW&OVF@2fT(nxj&*D5G4I
zB%Nk`@T{C1U=BmBd-FdDjZ*;9)8OaA{71iz=w{thnmAxrA34C=DKSGxcW0}t*E=Dg
zov|)%oFy}1a72F)B-u*9OV(k`QY7R%tDG?mi{~GHUE2RUjtta_iq3hRAsSiXZcw`b
zdHl7FDsIkM$rNbXH%-GUS@I<tSh7qzJ?d$tkdc(kg}CVuyW08v@SjRSir2Z~>Meo8
z%O|~#D*pfIo)FT%2cPve%~&7m^QiKidaV6oAA&y-iT`fHQ5M52mRPxxk;8U)i%KGS
zTtbY2f<}=cfhy6c48iMlTyZzWibY0N&K1ZS-9I`I*HBO=TLE(A0Q3T0k3G&7TZ*${
zSPGW66!cV`5l_1Y%kC}8bes1Xi>e5nAX@fYJ+1!Q3y!5B1o|-s&bfOBgmoK}S;9gS
z20Ln=vKEKZq!c{6t*Pedr04h-+8dn5a?(oV#4WXAV_Pb0Q9>Mr{^>}Q;C)|-ZRNcm
zy$rAXUP=GH^|(p<V(;gl3%TAm2OqCNLv|Yh93OU`MZbwyy8kCaY5c6wZ$u^ZJX*3e
zaJ#<y%{%vv|H8j`m-wBWC5|gPZ*-Zfhbs2;IUZq}b~lR@3}p5s-f*(_x45P~j>Snl
zaI8(iQR^Z2kV^C|3REmiYc_eE<>`dvBnp<8Var5gCZRRI>>#v|S4h<nAlCIqr0MzV
z54)fQVTf`+Jzip1j#pbuhD3{J&&f9If;cB39rXo7M8+!brkST5_~uSXr40O#f(8bN
zjF;VnhWfgy7*9W`wcPqzKjJ<Hr4C4EFF@dpb;YAnmQ#YUw3Qu5k*}yT|I#HMC_H|E
zPl>6qt4^-H#~w<2`ttJDMTPe(Ktx69s2!KwPvIh$wNf&E&NiTe`w^}{3sy<v1&{Dd
zM9bxiqBdlj*R`b@d<_+}11V;t+Q5rXis)ql4`|&6wDmtM{fl_&9j0G9A6rzj!Rb-R
zc_#?H&=*$qd;q+j@EireoD}2|RjN{@+PJ(4je_A^b@EB_qMTyUQ{)>wB&VM^*Dh}>
z{x^2FO%eG5uQf7xjm|U?)0Uj$HyL9!{*3PG6L*Km`e{l(YQ`lmB?tMA<cg~w^1gf8
z^>J(a(X7VP%l9g;lpSyXU%JB!3R=Hx__?G&&_{W?7tXj`j;~70>0rx=s#n6ni3~r;
zZB+rNcEHJ@<dv`87e+*(8jDi@_&{vvL&dpt4Gk;w{AMv#7^d6N{?|ejI{>-cD1EbC
zK@qI&l0r`Pa8H?7dEH<<Z9m1JoA=Rs^y{7)X`;xMex-7RE%88-Lnq;RO+hz@_Xn=>
zTqXV>^8(deH=`k(pn+|7Ga{7er<60TD%CHkR)JIn5cuFP8<n_AE^4Q%b0ta&{~joZ
zbg!U)+*L)DKikf)s^j}}VH|jQ7P$BCWjzmP`VoGLXq1r1fUgPEy<vpWcU22jGnPx=
z<|wP_+6?LBxym#Yh3C9`T%0bzdW&l%E}o%HhYS<hG68eWJ3O1JBm8_^%KfXAXzxK@
zREAoEKB;*n!W`0&qSM|L!I}Ibc{vkNZkZam0sWlXn5NkbQ_Jn3&p^Gp3`lwIfu&id
zz|+?=7H2+D6Nid<(;5ULY;-~6<rNib{^Y^2`kl)?d3=p)VLfdSSFN=yu-}%$6+DWR
mNVU?2;$Z*KQhZxMWOI5+DH9!2eFYggS=qY(fBxUQf&T-bJ3|Nn

literal 0
HcmV?d00001


From 41106bccb7923ab9de390c30be5864b2f40b453b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 6 Dec 2024 03:54:10 +0530
Subject: [PATCH 44/74] chore: Fix issues with Contact pages (#10544)

---
 .../Contacts/ContactsDetailsLayout.vue        |  2 +-
 .../Contacts/ContactsHeader/ContactHeader.vue |  4 +-
 .../ContactsActiveFiltersPreview.vue          | 43 ++++++++++++-
 .../Contacts/ContactsListLayout.vue           | 63 ++++++-------------
 .../ContactsSidebar/ContactHistory.vue        | 25 ++++----
 .../components/ContactNoteItem.vue            |  2 +-
 .../ConversationCard/ConversationCard.vue     |  2 +-
 .../filter/ActiveFilterPreview.vue            | 32 ++++------
 .../contacts/pages/ContactsIndex.vue          |  1 +
 9 files changed, 86 insertions(+), 88 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
index 6e7d42bc9..34c31aac1 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -50,7 +50,7 @@ const handleBreadcrumbClick = () => {
 
 <template>
   <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full 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"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 4406a996c..7e67c5629 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -93,7 +93,7 @@ const emit = defineEmits([
               "
               color="slate"
               size="sm"
-              class="relative"
+              class="relative w-8"
               variant="ghost"
               @click="emit('filter')"
             >
@@ -109,7 +109,6 @@ const emit = defineEmits([
             icon="i-lucide-save"
             color="slate"
             size="sm"
-            class="relative"
             variant="ghost"
             @click="emit('createSegment')"
           />
@@ -118,7 +117,6 @@ const emit = defineEmits([
             icon="i-lucide-trash"
             color="slate"
             size="sm"
-            class="relative"
             variant="ghost"
             @click="emit('deleteSegment')"
           />
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
index 65d7de044..36162520d 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
@@ -1,28 +1,67 @@
 <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="appliedFilters"
+    :applied-filters="activeFilterQueryData"
     :max-visible-filters="2"
     :more-filters-label="
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
-        count: appliedFilters.length - 2,
+        count: activeFilterQueryData.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')"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
index 9bede6795..22b32d7b8 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -7,50 +7,18 @@ 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,
-  },
+  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 },
 });
 
 const emit = defineEmits([
@@ -106,7 +74,12 @@ const openFilter = () => {
       <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[960px]">
           <ContactsActiveFiltersPreview
-            v-if="hasAppliedFilters && isNotSegmentView"
+            v-if="
+              (hasAppliedFilters || !isNotSegmentView) &&
+              !isFetchingList &&
+              !isLabelView
+            "
+            :active-segment="activeSegment"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"
           />
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
index 5e536fbe0..3763d198a 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
@@ -34,22 +34,19 @@ const contactConversations = computed(() =>
   >
     <Spinner />
   </div>
-  <div v-else-if="contactConversations.length > 0" class="flex flex-col py-6">
-    <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
       v-for="conversation in contactConversations"
       :key="conversation.id"
-      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>
+      :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"
+    />
   </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') }}
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
index 81f7a147f..504be1547 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
@@ -28,7 +28,7 @@ const handleDelete = () => {
 
 <template>
   <div
-    class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
+    class="flex flex-col gap-2 py-2 mx-6 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">
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
index 38041fa17..bb643ee22 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
@@ -82,7 +82,7 @@ const onCardClick = e => {
 
 <template>
   <div
-    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out cursor-pointer rounded-xl"
+    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
     @click="onCardClick"
   >
     <Avatar
diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
index 227037772..959d95ccc 100644
--- a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
@@ -4,22 +4,11 @@ import { replaceUnderscoreWithSpace } from './helper/filterHelper.js';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
-  appliedFilters: {
-    type: Array,
-    default: () => [],
-  },
-  maxVisibleFilters: {
-    type: Number,
-    default: 2,
-  },
-  clearButtonLabel: {
-    type: String,
-    default: '',
-  },
-  moreFiltersLabel: {
-    type: String,
-    default: '',
-  },
+  appliedFilters: { type: Array, default: () => [] },
+  maxVisibleFilters: { type: Number, default: 2 },
+  clearButtonLabel: { type: String, default: '' },
+  moreFiltersLabel: { type: String, default: '' },
+  showClearButton: { type: Boolean, default: true },
 });
 
 const emit = defineEmits(['clearFilters', 'openFilter']);
@@ -46,6 +35,9 @@ const formatOperatorLabel = operator => {
 
 const formatFilterValue = value => {
   if (!value) return '';
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
   if (typeof value === 'object' && value.name) {
     return value.name;
   }
@@ -55,10 +47,7 @@ const formatFilterValue = value => {
 
 <template>
   <div class="flex flex-wrap items-center w-full gap-2 mx-auto">
-    <template
-      v-for="(filter, index) in appliedFilters"
-      :key="filter.attributeKey"
-    >
+    <template v-for="(filter, index) in appliedFilters" :key="index">
       <div
         v-if="index < maxVisibleFilters"
         class="inline-flex items-center gap-2 h-7"
@@ -107,8 +96,9 @@ const formatFilterValue = value => {
     >
       {{ moreFiltersLabel }}
     </div>
-    <div class="w-px h-3 rounded-lg bg-n-strong" />
+    <div v-if="showClearButton" class="w-px h-3 rounded-lg bg-n-strong" />
     <Button
+      v-if="showClearButton"
       :label="clearButtonLabel"
       size="xs"
       class="!px-1"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
index a491d0829..76ae7eb4e 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -256,6 +256,7 @@ onMounted(async () => {
       :active-ordering="sortState.activeOrdering"
       :active-segment="activeSegment"
       :segments-id="activeSegmentId"
+      :is-fetching-list="isFetchingList"
       :has-applied-filters="hasAppliedFilters"
       @update:current-page="fetchContactsBasedOnContext"
       @search="searchContacts"

From 67c90231b66a9351ac2d423e7800b4c969cc4c6c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 6 Dec 2024 06:01:47 +0530
Subject: [PATCH 45/74] feat: Add compose conversation components (#10457)

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../components-next/Editor/Editor.vue         |   2 +-
 .../ArticleEditorProperties.vue               |   2 +-
 .../components/ActionButtons.vue              | 260 ++++++++++++++
 .../components/AttachmentPreviews.vue         |  88 +++++
 .../components/ComposeNewConversationForm.vue | 332 ++++++++++++++++++
 .../components/ContactSelector.vue            | 141 ++++++++
 .../components/EmailOptions.vue               | 139 ++++++++
 .../components/InboxEmptyState.vue            |   9 +
 .../components/InboxSelector.vue              |  91 +++++
 .../components/MessageEditor.vue              |  65 ++++
 .../components/WhatsAppOptions.vue            | 126 +++++++
 .../components/WhatsappTemplateParser.vue     | 176 ++++++++++
 .../ComposeNewConversationForm.story.vue      |  92 +++++
 .../components/story/fixtures.js              | 168 +++++++++
 .../helpers/composeConversationHelper.js      | 118 +++++++
 .../specs/composeConversationHelper.spec.js   | 171 +++++++++
 .../dropdown-menu/DropdownMenu.vue            |  11 +-
 .../inline-input/InlineInput.vue              |  57 ++-
 .../components-next/taginput/TagInput.vue     | 240 ++++++++++---
 .../components-next/textarea/TextArea.vue     |   2 +-
 .../dashboard/i18n/locale/en/contact.json     |  48 +++
 app/javascript/histoire.setup.ts              |   7 +
 22 files changed, 2285 insertions(+), 60 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/story/ComposeNewConversationForm.story.vue
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js

diff --git a/app/javascript/dashboard/components-next/Editor/Editor.vue b/app/javascript/dashboard/components-next/Editor/Editor.vue
index 717658d09..671a628dc 100644
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -169,7 +169,7 @@ watch(
           @apply m-0 !important;
 
           &::before {
-            @apply text-n-slate-10 dark:text-n-slate-10 !important;
+            @apply text-n-slate-11 dark:text-n-slate-11;
           }
         }
       }
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
index e957948b2..4de31a6ba 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -111,7 +111,7 @@ onMounted(() => {
             custom-label-class="min-w-[120px]"
           />
         </div>
-        <div class="flex justify-between w-full gap-2 py-2">
+        <div class="flex justify-between w-full gap-3 py-2">
           <label
             class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
           >
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
new file mode 100644
index 000000000..e0b8817d8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -0,0 +1,260 @@
+<script setup>
+import { defineAsyncComponent, ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+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 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,
+  },
+  hasNoInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isDropdownActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+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 messageSignature = useMapGetter('getMessageSignature');
+const signatureToApply = computed(() => messageSignature.value);
+
+const {
+  fetchSignatureFlagFromUISettings,
+  setSignatureFlagForInbox,
+  isEditorHotKeyEnabled,
+} = useUISettings();
+
+const sendWithSignature = computed(() => {
+  return fetchSignatureFlagFromUISettings(props.channelType);
+});
+
+const isSignatureEnabledForInbox = computed(() => {
+  return props.isEmailOrWebWidgetInbox && sendWithSignature.value;
+});
+
+const setSignature = () => {
+  if (signatureToApply.value) {
+    if (isSignatureEnabledForInbox.value) {
+      emit('addSignature', signatureToApply.value);
+    } else {
+      emit('removeSignature', signatureToApply.value);
+    }
+  }
+};
+
+const toggleMessageSignature = () => {
+  setSignatureFlagForInbox(props.channelType, !sendWithSignature.value);
+  setSignature();
+};
+
+const onClickInsertEmoji = emoji => {
+  emit('insertEmoji', emoji);
+};
+
+const useFileUpload = () => {
+  // Empty function for testing purposes
+  // TODO: Will use useFileUpload composable later
+  return {
+    onFileUpload: () => {},
+  };
+};
+
+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="isEmailOrWebWidgetInbox"
+        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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue b/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
new file mode 100644
index 000000000..2e03f64c0
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
@@ -0,0 +1,88 @@
+<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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
new file mode 100644
index 000000000..7e72c7038
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -0,0 +1,332 @@
+<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,
+} 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 },
+});
+
+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 => {
+  emit('searchContacts', 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', value);
+};
+
+const searchBccEmails = value => {
+  showBccEmailsDropdown.value = true;
+  emit('searchContacts', 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();
+  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="absolute right-0 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"
+      :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-no-inbox="showNoInboxAlert"
+      :is-dropdown-active="isAnyDropdownActive"
+      @insert-emoji="onClickInsertEmoji"
+      @add-signature="handleAddSignature"
+      @remove-signature="handleRemoveSignature"
+      @attach-file="handleAttachFile"
+      @discard="$emit('discard')"
+      @send-message="handleSendMessage"
+      @send-whatsapp-message="handleSendWhatsappMessage"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
new file mode 100644
index 000000000..744018764
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
@@ -0,0 +1,141 @@
+<script setup>
+import { computed } 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';
+
+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 { t } = useI18n();
+
+const contactsList = computed(() => {
+  return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
+    id,
+    label: `${name} (${email})`,
+    value: id,
+    thumbnail: { name, src: thumbnail },
+    ...rest,
+    name,
+    email,
+    action: 'contact',
+  }));
+});
+
+const selectedContactLabel = computed(() => {
+  return `${props.selectedContact?.name} (${props.selectedContact?.email})`;
+});
+</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('COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.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('COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.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(
+                  'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.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(
+            'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.TAG_INPUT_PLACEHOLDER'
+          )
+        "
+        mode="single"
+        :menu-items="contactsList"
+        :show-dropdown="showContactsDropdown"
+        :is-loading="isLoading"
+        :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
+        allow-create
+        type="email"
+        class="flex-1 min-h-7"
+        :class="
+          hasErrors
+            ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
+            : ''
+        "
+        @focus="emit('updateDropdown', 'contacts', true)"
+        @input="emit('searchContacts', $event)"
+        @on-click-outside="emit('updateDropdown', 'contacts', false)"
+        @add="emit('setSelectedContact', $event)"
+        @remove="emit('clearSelectedContact')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue b/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
new file mode 100644
index 000000000..ac7e8d659
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
@@ -0,0 +1,139 @@
+<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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue b/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue
new file mode 100644
index 000000000..7fed98806
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue
@@ -0,0 +1,9 @@
+<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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
new file mode 100644
index 000000000..a41ce9274
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -0,0 +1,91 @@
+<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 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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
new file mode 100644
index 000000000..ca54f7eca
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+
+defineProps({
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    required: true,
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+  hasAttachments: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
+</script>
+
+<template>
+  <div
+    v-if="isEmailOrWebWidgetInbox"
+    class="flex-1 h-full"
+    :class="!hasAttachments && 'min-h-[200px]'"
+  >
+    <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'
+          : ''
+      "
+      :show-character-count="false"
+    />
+  </div>
+  <div v-else class="flex-1 h-full" :class="!hasAttachments && 'min-h-[200px]'">
+    <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"
+      auto-height
+      :custom-text-area-class="
+        hasErrors
+          ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+          : ''
+      "
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
new file mode 100644
index 000000000..8d32509b8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
@@ -0,0 +1,126 @@
+<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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
new file mode 100644
index 000000000..85f69a665
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
@@ -0,0 +1,176 @@
+<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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/story/ComposeNewConversationForm.story.vue b/app/javascript/dashboard/components-next/NewConversation/components/story/ComposeNewConversationForm.story.vue
new file mode 100644
index 000000000..192c1b8ae
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/story/ComposeNewConversationForm.story.vue
@@ -0,0 +1,92 @@
+<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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js b/app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js
new file mode 100644
index 000000000..5c80466fa
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js
@@ -0,0 +1,168 @@
+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',
+};
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
new file mode 100644
index 000000000..1ea15acf6
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -0,0 +1,118 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+export const convertChannelTypeToLabel = channelType => {
+  const [, type] = channelType.split('::');
+  return type ? type.charAt(0).toUpperCase() + type.slice(1) : channelType;
+};
+
+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} (${convertChannelTypeToLabel(channelType)})`;
+};
+
+export const buildContactableInboxesList = contactInboxes => {
+  if (!contactInboxes) return [];
+  return contactInboxes.map(
+    ({ name, id, email, channelType, phoneNumber, ...rest }) => ({
+      id,
+      label: generateLabelForContactableInboxesList({
+        name,
+        email,
+        channelType,
+        phoneNumber,
+      }),
+      action: 'inbox',
+      value: id,
+      name,
+      email,
+      phoneNumber,
+      channelType,
+      ...rest,
+    })
+  );
+};
+
+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,
+  };
+};
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
new file mode 100644
index 000000000..9f9e9cabd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -0,0 +1,171 @@
+import { describe, it, expect } from 'vitest';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import * as helpers from '../composeConversationHelper';
+
+describe('composeConversationHelper', () => {
+  describe('convertChannelTypeToLabel', () => {
+    it('converts channel type with namespace to capitalized label', () => {
+      expect(helpers.convertChannelTypeToLabel('Channel::Email')).toBe('Email');
+      expect(helpers.convertChannelTypeToLabel('Channel::Whatsapp')).toBe(
+        'Whatsapp'
+      );
+    });
+
+    it('returns original value if no namespace found', () => {
+      expect(helpers.convertChannelTypeToLabel('email')).toBe('email');
+    });
+  });
+
+  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 (Api)');
+    });
+  });
+
+  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,
+        label: 'Email Inbox (support@example.com)',
+        action: 'inbox',
+        value: 1,
+        name: 'Email Inbox',
+        email: 'support@example.com',
+        channelType: INBOX_TYPES.EMAIL,
+      });
+    });
+  });
+
+  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,
+      });
+    });
+  });
+});
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 0b24b597d..cc4c3c4bf 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -25,6 +25,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['action']);
@@ -81,7 +85,6 @@ onMounted(() => {
       }"
       :disabled="item.disabled"
       @click="handleAction(item)"
-      @keydown.enter="handleAction(item)"
     >
       <slot name="thumbnail" :item="item">
         <Avatar
@@ -102,7 +105,11 @@ onMounted(() => {
       v-if="filteredMenuItems.length === 0"
       class="text-sm text-n-slate-11 px-2 py-1.5"
     >
-      {{ t('DROPDOWN_MENU.EMPTY_STATE') }}
+      {{
+        isSearching
+          ? t('DROPDOWN_MENU.SEARCHING')
+          : t('DROPDOWN_MENU.EMPTY_STATE')
+      }}
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
index 7731e84bb..f63662745 100644
--- a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
@@ -1,9 +1,7 @@
 <script setup>
-defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
+import { ref, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
   type: {
     type: String,
     default: 'text',
@@ -32,13 +30,49 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue', 'enterPress']);
+const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+
+const modelValue = defineModel({
+  type: [String, Number],
+  default: '',
+});
+
+const inlineInputRef = ref(null);
 
 const onEnterPress = () => {
   emit('enterPress');
 };
+
+const handleInput = event => {
+  emit('input', event.target.value);
+  modelValue.value = event.target.value;
+};
+
+const handleBlur = event => {
+  emit('blur', event.target.value);
+};
+
+const handleFocus = event => {
+  emit('focus', event.target.value);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    if (props.focusOnMount) {
+      inlineInputRef.value?.focus();
+    }
+  });
+});
+
+defineExpose({
+  focus: () => inlineInputRef.value?.focus(),
+});
 </script>
 
 <template>
@@ -49,7 +83,7 @@ const onEnterPress = () => {
       v-if="label"
       :for="id"
       :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-11"
     >
       {{ label }}
     </label>
@@ -57,13 +91,16 @@ const onEnterPress = () => {
     <slot name="prefix" />
     <input
       :id="id"
-      :value="modelValue"
+      ref="inlineInputRef"
+      v-model="modelValue"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :class="customInputClass"
-      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
-      @input="$emit('update:modelValue', $event.target.value)"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
       @keydown.enter.prevent="onEnterPress"
     />
   </div>
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 8e3a33b6c..943b71c72 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -1,51 +1,168 @@
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
+import { vOnClickOutside } from '@vueuse/components';
+import { email } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
 const props = defineProps({
-  modelValue: {
+  placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  type: { type: String, default: 'text' },
+  isLoading: { type: Boolean, default: false },
+  menuItems: {
     type: Array,
     default: () => [],
+    validator: value =>
+      value.every(
+        ({ action, value: tagValue, label }) => action && tagValue && label
+      ),
   },
-  placeholder: {
+  showDropdown: { type: Boolean, default: false },
+  mode: {
     type: String,
-    default: '',
+    default: 'multiple',
+    validator: value => ['single', 'multiple'].includes(value),
   },
+  focusOnMount: { type: Boolean, default: false },
+  allowCreate: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits([
+  'update:modelValue',
+  'input',
+  'blur',
+  'focus',
+  'onClickOutside',
+  'add',
+  'remove',
+]);
 
+const modelValue = defineModel({
+  type: Array,
+  default: () => [],
+});
+
+const MODE = {
+  SINGLE: 'single',
+  MULTIPLE: 'multiple',
+};
+
+const tagInputRef = ref(null);
 const tags = ref(props.modelValue);
 const newTag = ref('');
-const isFocused = ref(false);
+const isFocused = ref(true);
 
-const showInput = computed(() => isFocused.value || tags.value.length === 0);
+const rules = computed(() => ({
+  newTag: props.type === 'email' ? { email } : {},
+}));
 
-const addTag = () => {
-  if (newTag.value.trim()) {
-    tags.value.push(newTag.value.trim());
-    newTag.value = '';
-    emit('update:modelValue', tags.value);
+const v$ = useVuelidate(rules, { newTag });
+const isNewTagInValidType = computed(() => v$.value.$invalid);
+
+const showInput = computed(() =>
+  props.mode === MODE.SINGLE
+    ? isFocused.value && !tags.value.length
+    : isFocused.value || !tags.value.length
+);
+
+const showDropdownMenu = computed(() =>
+  props.mode === MODE.SINGLE && tags.value.length >= 1
+    ? false
+    : props.showDropdown
+);
+
+const filteredMenuItems = computed(() => {
+  if (props.mode === MODE.SINGLE && tags.value.length >= 1) return [];
+
+  const availableMenuItems = props.menuItems.filter(
+    item => !tags.value.includes(item.label)
+  );
+
+  // Only show typed value as suggestion if:
+  // 1. There's a value being typed
+  // 2. The value isn't already in the tags
+  // 3. There are no menu items available
+  const trimmedNewTag = newTag.value.trim();
+  if (
+    trimmedNewTag &&
+    !tags.value.includes(trimmedNewTag) &&
+    !availableMenuItems.length &&
+    !props.isLoading
+  ) {
+    return [
+      {
+        label: trimmedNewTag,
+        value: trimmedNewTag,
+        email: trimmedNewTag,
+        thumbnail: { name: trimmedNewTag, src: '' },
+        action: 'create',
+      },
+    ];
   }
+
+  return availableMenuItems;
+});
+
+const emitDataOnAdd = emailValue => {
+  const matchingMenuItem = props.menuItems.find(
+    item => item.email === emailValue
+  );
+
+  return matchingMenuItem
+    ? emit('add', { email: emailValue, ...matchingMenuItem })
+    : emit('add', { value: emailValue, action: 'create' });
+};
+
+const addTag = async () => {
+  const trimmedTag = newTag.value.trim();
+  if (!trimmedTag) return;
+
+  if (props.mode === MODE.SINGLE && tags.value.length >= 1) {
+    newTag.value = '';
+    return;
+  }
+
+  if (props.type === 'email' || props.allowCreate) {
+    if (!(await v$.value.$validate())) return;
+    emitDataOnAdd(trimmedTag);
+  }
+
+  tags.value.push(trimmedTag);
+  newTag.value = '';
+  modelValue.value = tags.value;
+  tagInputRef.value?.focus();
 };
 
 const removeTag = index => {
   tags.value.splice(index, 1);
-  emit('update:modelValue', tags.value);
+  modelValue.value = tags.value;
+  emit('remove');
+};
+
+const handleDropdownAction = async ({ email: emailAddress, ...rest }) => {
+  if (props.mode === MODE.SINGLE && tags.value.length >= 1) return;
+
+  if (props.type === 'email' && props.showDropdown) {
+    newTag.value = emailAddress;
+    if (!(await v$.value.$validate())) return;
+    emit('add', { email: emailAddress, ...rest });
+  }
+
+  tags.value.push(emailAddress);
+  newTag.value = '';
+  modelValue.value = tags.value;
+  tagInputRef.value?.focus();
 };
 
 const handleFocus = () => {
+  emit('focus');
+  tagInputRef.value?.focus();
   isFocused.value = true;
 };
 
-const handleClickOutside = () => {
-  if (tags.value.length > 0) {
-    isFocused.value = false;
-  }
-};
-
 const handleKeydown = event => {
   if (event.key === ',') {
     event.preventDefault();
@@ -53,43 +170,76 @@ const handleKeydown = event => {
   }
 };
 
+const handleClickOutside = () => {
+  if (tags.value.length) isFocused.value = false;
+  emit('onClickOutside');
+};
+
 watch(
   () => props.modelValue,
   newValue => {
     tags.value = newValue;
   }
 );
+
+watch(
+  () => newTag.value,
+  async newValue => {
+    if (props.type === 'email' && newValue.trim()?.length > 2) {
+      await v$.value.$validate();
+    }
+  }
+);
+
+const handleInput = e => emit('input', e);
+const handleBlur = e => emit('blur', e);
 </script>
 
 <template>
-  <OnClickOutside @trigger="handleClickOutside">
+  <div
+    v-on-click-outside="() => handleClickOutside()"
+    class="flex flex-wrap w-full gap-2 border border-transparent focus:outline-none"
+    tabindex="0"
+    @focus="handleFocus"
+    @click="handleFocus"
+  >
     <div
-      class="flex flex-wrap w-full gap-2 border border-transparent focus:outline-none"
-      tabindex="0"
-      @focus="handleFocus"
-      @click="handleFocus"
+      v-for="(tag, index) in tags"
+      :key="index"
+      class="flex items-center justify-center max-w-full gap-1 px-3 py-1 rounded-lg h-7 bg-n-alpha-2"
     >
-      <div
-        v-for="(tag, index) in tags"
-        :key="index"
-        class="flex items-center justify-center max-w-full gap-1 px-3 py-1 rounded-lg h-7 bg-n-alpha-2"
-      >
-        <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">
-          {{ tag }}
-        </span>
-        <span
-          class="flex-shrink-0 cursor-pointer i-lucide-x size-3.5 text-n-slate-11"
-          @click.stop="removeTag(index)"
-        />
-      </div>
-      <InlineInput
-        v-if="showInput"
-        v-model="newTag"
-        :placeholder="placeholder"
-        custom-input-class="flex-grow"
-        @enter-press="addTag"
-        @keydown="handleKeydown"
+      <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">{{
+        tag
+      }}</span>
+      <span
+        class="flex-shrink-0 cursor-pointer i-lucide-x size-3.5 text-n-slate-11"
+        @click.stop="removeTag(index)"
       />
     </div>
-  </OnClickOutside>
+    <div class="relative flex items-center gap-2 flex-1 min-w-[200px] w-full">
+      <InlineInput
+        v-if="showInput"
+        ref="tagInputRef"
+        v-model="newTag"
+        :placeholder="placeholder"
+        :type="type"
+        :disabled="disabled"
+        class="w-full"
+        :focus-on-mount="focusOnMount"
+        :custom-input-class="`w-full ${isNewTagInValidType ? '!text-n-ruby-9 dark:!text-n-ruby-9' : ''}`"
+        @enter-press="addTag"
+        @focus="handleFocus"
+        @input="handleInput"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
+      />
+      <DropdownMenu
+        v-if="showDropdownMenu"
+        :menu-items="filteredMenuItems"
+        :is-searching="isLoading"
+        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        @action="handleDropdownAction"
+      />
+    </div>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/textarea/TextArea.vue b/app/javascript/dashboard/components-next/textarea/TextArea.vue
index 5e5860fad..16e0fe052 100644
--- a/app/javascript/dashboard/components-next/textarea/TextArea.vue
+++ b/app/javascript/dashboard/components-next/textarea/TextArea.vue
@@ -179,7 +179,7 @@ onMounted(() => {
         }"
         :disabled="disabled"
         rows="1"
-        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index e0d2efdfd..e6bfe7cbd 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -653,5 +653,53 @@
       "SEARCH_EMPTY_STATE_TITLE": "No contacts matches your search 🔍",
       "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋"
     }
+  },
+
+  "COMPOSE_NEW_CONVERSATION": {
+    "CONTACT_SEARCH": {
+      "ERROR_MESSAGE": "We couldn’t complete the search. Please try again."
+    },
+    "FORM": {
+      "GO_TO_CONVERSATION": "View",
+      "SUCCESS_MESSAGE": "The message was sent successfully!",
+      "ERROR_MESSAGE": "An error occurred while creating the conversation. Please try again later.",
+      "NO_INBOX_ALERT": "There are no available inboxes to start a conversation with this contact.",
+      "CONTACT_SELECTOR": {
+        "LABEL": "To:",
+        "TAG_INPUT_PLACEHOLDER": "Type an email address to search for the contact and press Enter",
+        "CONTACT_CREATING": "Creating contact..."
+      },
+      "INBOX_SELECTOR": {
+        "LABEL": "Via:",
+        "BUTTON": "Show inboxes"
+      },
+      "EMAIL_OPTIONS": {
+        "SUBJECT_LABEL": "Subject :",
+        "SUBJECT_PLACEHOLDER": "Enter your email subject here",
+        "CC_LABEL": "Cc:",
+        "CC_PLACEHOLDER": "Type an email address to search for the contact and press Enter",
+        "BCC_LABEL": "Bcc:",
+        "BCC_PLACEHOLDER": "Type an email address to search for the contact and press Enter",
+        "BCC_BUTTON": "Bcc"
+      },
+      "MESSAGE_EDITOR": {
+        "PLACEHOLDER": "Write your message here..."
+      },
+      "WHATSAPP_OPTIONS": {
+        "LABEL": "Select template",
+        "SEARCH_PLACEHOLDER": "Search templates",
+        "EMPTY_STATE": "No templates found",
+        "TEMPLATE_PARSER": {
+          "TEMPLATE_NAME": "WhatsApp template: {templateName}",
+          "VARIABLES": "Variables",
+          "BACK": "Go back",
+          "SEND_MESSAGE": "Send message"
+        }
+      },
+      "ACTION_BUTTONS": {
+        "DISCARD": "Discard",
+        "SEND": "Send ({keyCode})"
+      }
+    }
   }
 }
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index 8ea1a31c2..7642da78d 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -4,6 +4,7 @@ import i18nMessages from 'dashboard/i18n';
 import { createI18n } from 'vue-i18n';
 import { vResizeObserver } from '@vueuse/components';
 import store from 'dashboard/store';
+import FloatingVue from 'floating-vue';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
 import { directive as onClickaway } from 'vue3-click-away';
@@ -17,6 +18,12 @@ const i18n = createI18n({
 export const setupVue3 = defineSetupVue3(({ app }) => {
   app.use(store);
   app.use(i18n);
+  app.use(FloatingVue, {
+    instantMove: true,
+    arrowOverflow: false,
+    disposeTimeout: 5000000,
+  });
+
   app.directive('resize', vResizeObserver);
   app.use(VueDOMPurifyHTML, domPurifyConfig);
   app.directive('on-clickaway', onClickaway);

From b116ab5ad3fb11a8b594eae5ff9a5b4aa844ef86 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 6 Dec 2024 09:46:29 +0530
Subject: [PATCH 46/74] feat(v4): Compose new conversation without multiple
 clicks (#10545)

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../Contacts/ContactsDetailsLayout.vue        |  22 +-
 .../Contacts/ContactsForm/ContactsForm.vue    |   6 +-
 .../Contacts/ContactsHeader/ContactHeader.vue |  19 +-
 .../components/ContactMoreActions.vue         |   2 +-
 .../components/ContactSortMenu.vue            |   2 +-
 .../NewConversation/ComposeConversation.vue   | 209 +++++++++++++++
 .../components/ActionButtons.vue              |  11 +-
 .../components/ComposeNewConversationForm.vue |  12 +-
 .../components/ContactSelector.vue            |  36 +--
 .../components/InboxSelector.vue              |   2 +-
 .../helpers/composeConversationHelper.js      |  68 +++++
 .../specs/composeConversationHelper.spec.js   | 240 +++++++++++++++++-
 .../dropdown-menu/DropdownMenu.vue            |   4 +-
 .../components-next/sidebar/Sidebar.vue       |  34 ++-
 .../sidebar/SidebarProfileMenu.vue            |   2 +-
 .../components-next/taginput/TagInput.vue     |   6 +-
 .../layout/config/sidebarItems/contacts.js    |  10 +-
 .../layout/config/sidebarItems/primaryMenu.js |   2 +-
 .../composables/spec/useFileUpload.spec.js    | 146 +++++++++++
 .../dashboard/composables/useFileUpload.js    |  91 +++++++
 .../dashboard/i18n/locale/en/components.json  |   3 +-
 .../dashboard/i18n/locale/en/contact.json     |   7 +-
 .../dashboard/routes/dashboard/Dashboard.vue  |   1 -
 .../contacts/pages/ContactManageView.vue      |   6 +-
 .../conversation/contact/ConversationForm.vue |   6 +-
 .../store/modules/contacts/actions.js         |   4 +-
 26 files changed, 850 insertions(+), 101 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
 create mode 100644 app/javascript/dashboard/composables/spec/useFileUpload.spec.js
 create mode 100644 app/javascript/dashboard/composables/useFileUpload.js

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
index 34c31aac1..764f46141 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -2,24 +2,22 @@
 import { computed, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-// 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([
-  // 'message',
-  'goToContactsList',
-]);
+const emit = defineEmits(['goToContactsList']);
 
 const { t } = useI18n();
 const slots = useSlots();
@@ -62,7 +60,11 @@ const handleBreadcrumbClick = () => {
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
             />
-            <!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
+            <ComposeConversation>
+              <template #trigger="{ toggle }">
+                <Button :label="buttonLabel" size="sm" @click="toggle" />
+              </template>
+            </ComposeConversation>
           </div>
         </div>
       </header>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index b6b24ce26..a49236cb1 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -41,11 +41,11 @@ const FORM_CONFIG = {
 };
 
 const SOCIAL_CONFIG = {
-  FACEBOOK: 'i-ri-facebook-circle-fill',
-  GITHUB: 'i-ri-github-fill',
-  INSTAGRAM: 'i-ri-instagram-line',
   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',
 };
 
 const defaultState = {
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 7e67c5629..44350bba1 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -4,6 +4,7 @@ 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: {
@@ -18,10 +19,10 @@ defineProps({
     type: String,
     required: true,
   },
-  //   buttonLabel: {
-  //     type: String,
-  //     default: '',
-  //   },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
   activeSort: {
     type: String,
     default: 'last_activity_at',
@@ -48,7 +49,6 @@ const emit = defineEmits([
   'search',
   'filter',
   'update:sort',
-  //   'message',
   'add',
   'import',
   'export',
@@ -131,9 +131,12 @@ const emit = defineEmits([
             @export="emit('export')"
           />
         </div>
-        <!-- 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 class="w-px h-4 bg-n-strong" />
+        <ComposeConversation>
+          <template #trigger="{ toggle }">
+            <Button :label="buttonLabel" size="sm" @click="toggle" />
+          </template>
+        </ComposeConversation>
       </div>
     </div>
   </header>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
index c37a7854c..d5932535c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
@@ -55,7 +55,7 @@ const handleContactAction = ({ action }) => {
     <DropdownMenu
       v-if="showActionsDropdown"
       :menu-items="contactMenuItems"
-      class="right-0 mt-1 w-52 top-full"
+      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
       @action="handleContactAction($event)"
     />
   </div>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
index edf4bd70f..b263b882d 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
@@ -109,7 +109,7 @@ const handleOrderChange = value => {
     <div
       v-if="isMenuOpen"
       v-on-clickaway="() => (isMenuOpen = false)"
-      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"
+      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"
     >
       <div class="flex items-center justify-between gap-2">
         <span class="text-sm text-n-slate-12">
diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
new file mode 100644
index 000000000..347325b16
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -0,0 +1,209 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+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',
+  },
+});
+
+const route = useRoute();
+const store = useStore();
+const { t } = useI18n();
+
+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 directUploadsEnabled = computed(
+  () => globalConfig.value.directUploadsEnabled
+);
+const contactId = computed(() => route.params.contactId || null);
+const activeContact = computed(() => contactById.value(contactId.value));
+
+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 && contactId.value) {
+      // Add null check for contactInboxes
+      const contactInboxes = activeContact.value?.contactInboxes || [];
+      selectedContact.value = {
+        ...activeContact.value,
+        contactInboxes: processContactableInboxes(contactInboxes),
+      };
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+onMounted(() => resetContacts());
+
+const keyboardEvents = {
+  Escape: {
+    action: () => {
+      if (showComposeNewConversation.value) {
+        showComposeNewConversation.value = false;
+      }
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div class="relative z-40">
+    <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"
+      @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>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
index e0b8817d8..89784037d 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -3,7 +3,7 @@ import { defineAsyncComponent, ref, computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-// import { useFileUpload } from 'dashboard/composables/useFileUpload';
+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';
@@ -110,19 +110,10 @@ const onClickInsertEmoji = emoji => {
   emit('insertEmoji', emoji);
 };
 
-const useFileUpload = () => {
-  // Empty function for testing purposes
-  // TODO: Will use useFileUpload composable later
-  return {
-    onFileUpload: () => {},
-  };
-};
-
 const { onFileUpload } = useFileUpload({
   isATwilioSMSChannel: props.isTwilioSmsInbox,
   attachFile: ({ blob, file }) => {
     if (!file) return;
-
     const reader = new FileReader();
     reader.readAsDataURL(file.file);
     reader.onloadend = () => {
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
index 7e72c7038..b1596ac04 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -141,7 +141,11 @@ const isAnyDropdownActive = computed(() => {
 });
 
 const handleContactSearch = value => {
-  emit('searchContacts', value);
+  showContactsDropdown.value = true;
+  emit('searchContacts', {
+    keys: ['email', 'phone_number', 'name'],
+    query: value,
+  });
 };
 
 const handleDropdownUpdate = (type, value) => {
@@ -156,12 +160,12 @@ const handleDropdownUpdate = (type, value) => {
 
 const searchCcEmails = value => {
   showCcEmailsDropdown.value = true;
-  emit('searchContacts', value);
+  emit('searchContacts', { keys: ['email'], query: value });
 };
 
 const searchBccEmails = value => {
   showBccEmailsDropdown.value = true;
-  emit('searchContacts', value);
+  emit('searchContacts', { keys: ['email'], query: value });
 };
 
 const setSelectedContact = async ({ value, action, ...rest }) => {
@@ -250,7 +254,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <template>
   <div
-    class="absolute right-0 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"
+    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"
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
index 744018764..9903f18ef 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 
 import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-
 const props = defineProps({
   contacts: {
     type: Array,
@@ -43,20 +42,19 @@ const props = defineProps({
     default: false,
   },
 });
-
 const emit = defineEmits([
   'searchContacts',
   'setSelectedContact',
   'clearSelectedContact',
   'updateDropdown',
 ]);
-
+const i18nPrefix = 'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR';
 const { t } = useI18n();
 
 const contactsList = computed(() => {
   return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
     id,
-    label: `${name} (${email})`,
+    label: email ? `${name} (${email})` : name,
     value: id,
     thumbnail: { name, src: thumbnail },
     ...rest,
@@ -69,13 +67,19 @@ const contactsList = computed(() => {
 const selectedContactLabel = computed(() => {
   return `${props.selectedContact?.name} (${props.selectedContact?.email})`;
 });
+
+const errorClass = computed(() => {
+  return props.hasErrors
+    ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
+    : '';
+});
 </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('COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.LABEL') }}
+        {{ t(`${i18nPrefix}.LABEL`) }}
       </label>
 
       <div
@@ -83,9 +87,7 @@ const selectedContactLabel = computed(() => {
         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('COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.CONTACT_CREATING')
-          }}
+          {{ t(`${i18nPrefix}.CONTACT_CREATING`) }}
         </span>
       </div>
       <div
@@ -95,9 +97,7 @@ const selectedContactLabel = computed(() => {
         <span class="text-sm truncate text-n-slate-12">
           {{
             isCreatingContact
-              ? t(
-                  'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.CONTACT_CREATING'
-                )
+              ? t(`${i18nPrefix}.CONTACT_CREATING`)
               : selectedContactLabel
           }}
         </span>
@@ -112,11 +112,7 @@ const selectedContactLabel = computed(() => {
       </div>
       <TagInput
         v-else
-        :placeholder="
-          t(
-            'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.TAG_INPUT_PLACEHOLDER'
-          )
-        "
+        :placeholder="t(`${i18nPrefix}.TAG_INPUT_PLACEHOLDER`)"
         mode="single"
         :menu-items="contactsList"
         :show-dropdown="showContactsDropdown"
@@ -125,12 +121,8 @@ const selectedContactLabel = computed(() => {
         allow-create
         type="email"
         class="flex-1 min-h-7"
-        :class="
-          hasErrors
-            ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
-            : ''
-        "
-        @focus="emit('updateDropdown', 'contacts', true)"
+        :class="errorClass"
+        focus-on-mount
         @input="emit('searchContacts', $event)"
         @on-click-outside="emit('updateDropdown', 'contacts', false)"
         @add="emit('setSelectedContact', $event)"
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
index a41ce9274..4e1b0f510 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -54,7 +54,7 @@ const targetInboxLabel = computed(() => {
       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 text-n-slate-12">
+      <span class="text-sm truncate text-n-slate-12">
         {{ targetInboxLabel }}
       </span>
       <Button
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
index 1ea15acf6..119552f61 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -1,4 +1,6 @@
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import camelcaseKeys from 'camelcase-keys';
+import ContactAPI from 'dashboard/api/contacts';
 
 export const convertChannelTypeToLabel = channelType => {
   const [, type] = channelType.split('::');
@@ -45,6 +47,18 @@ export const buildContactableInboxesList = contactInboxes => {
   );
 };
 
+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
@@ -116,3 +130,57 @@ export const prepareWhatsAppMessagePayload = ({
     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 })
+  );
+  return camelcaseKeys(payload, { deep: true });
+};
+
+export const createNewContact = async email => {
+  const payload = {
+    name: getCapitalizedNameFromEmail(email),
+    email,
+  };
+
+  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);
+};
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
index 9f9e9cabd..dcfa3b051 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest';
+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('convertChannelTypeToLabel', () => {
     it('converts channel type with namespace to capitalized label', () => {
@@ -90,6 +93,35 @@ describe('composeConversationHelper', () => {
     });
   });
 
+  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' }];
@@ -168,4 +200,210 @@ describe('composeConversationHelper', () => {
       });
     });
   });
+
+  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('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,
+            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,
+            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',
+        });
+      });
+    });
+
+    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([]);
+      });
+    });
+  });
 });
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index cc4c3c4bf..b9824755e 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -75,8 +75,8 @@ onMounted(() => {
       />
     </div>
     <button
-      v-for="item in filteredMenuItems"
-      :key="item.action"
+      v-for="(item, index) in filteredMenuItems"
+      :key="index"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
         'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index f9b702c33..d5e968f4a 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -7,17 +7,17 @@ import { useMapGetter } from 'dashboard/composables/store';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
-
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
+
+import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
 import SidebarProfileMenu from './SidebarProfileMenu.vue';
 import ChannelLeaf from './ChannelLeaf.vue';
-import SidebarNotificationBell from './SidebarNotificationBell.vue';
 import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
 import Logo from 'next/icon/Logo.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 const emit = defineEmits([
-  'openNotificationPanel',
   'closeKeyShortcutModal',
   'openKeyShortcutModal',
   'showCreateAccountModal',
@@ -27,7 +27,6 @@ const { accountScopedRoute } = useAccount();
 const store = useStore();
 const searchShortcut = useKbd([`$mod`, 'k']);
 const { t } = useI18n();
-const enableNewConversation = false;
 
 const toggleShortcutModalFn = show => {
   if (show) {
@@ -481,7 +480,7 @@ const menuItems = computed(() => {
       <div class="flex gap-2 px-2">
         <RouterLink
           :to="{ name: 'search' }"
-          class="flex items-center w-full gap-2 px-2 py-1 border rounded-lg border-n-weak bg-n-solid-3 dark:bg-n-black/30"
+          class="flex items-center w-full gap-2 px-2 py-1 rounded-lg h-7 outline outline-1 outline-n-weak bg-n-solid-3 dark:bg-n-black/30"
         >
           <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-11" />
           <span class="flex-grow text-left">
@@ -493,14 +492,17 @@ const menuItems = computed(() => {
             {{ searchShortcut }}
           </span>
         </RouterLink>
-        <button
-          v-if="enableNewConversation"
-          class="flex items-center w-full gap-2 px-2 py-1 border rounded-lg border-n-weak bg-n-solid-3"
-        >
-          <span
-            class="flex-shrink-0 i-lucide-square-pen size-4 text-n-slate-11"
-          />
-        </button>
+        <ComposeConversation align-position="right">
+          <template #trigger="{ toggle }">
+            <Button
+              icon="i-lucide-pen-line"
+              color="slate"
+              size="sm"
+              class="!h-7 !bg-n-solid-3 dark:!bg-n-black/30 !outline-n-weak !text-n-slate-11"
+              @click="toggle"
+            />
+          </template>
+        </ComposeConversation>
       </div>
     </section>
     <nav class="grid flex-grow gap-2 px-2 pb-5 overflow-y-scroll no-scrollbar">
@@ -518,12 +520,6 @@ const menuItems = computed(() => {
       <SidebarProfileMenu
         @open-key-shortcut-modal="emit('openKeyShortcutModal')"
       />
-      <div v-if="false" class="flex items-center">
-        <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
-        <SidebarNotificationBell
-          @open-notification-panel="emit('openNotificationPanel')"
-        />
-      </div>
     </section>
   </aside>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
index 347e2e25d..b9bb9f421 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -120,7 +120,7 @@ const allowedMenuItems = computed(() => {
         </div>
       </button>
     </template>
-    <DropdownBody class="left-0 bottom-12 z-50 w-80 mb-1">
+    <DropdownBody class="ltr:left-0 rtl:right-0 bottom-12 z-50 w-80 mb-2">
       <SidebarProfileMenuStatus />
       <DropdownSeparator />
       <template v-for="item in allowedMenuItems" :key="item.label">
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 943b71c72..5338eadc6 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -216,9 +216,11 @@ const handleBlur = e => emit('blur', e);
         @click.stop="removeTag(index)"
       />
     </div>
-    <div class="relative flex items-center gap-2 flex-1 min-w-[200px] w-full">
+    <div
+      v-if="showInput || showDropdownMenu"
+      class="relative flex items-center gap-2 flex-1 min-w-[200px] w-full"
+    >
       <InlineInput
-        v-if="showInput"
         ref="tagInputRef"
         v-model="newTag"
         :placeholder="placeholder"
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
index fe148163e..3cef2237b 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
@@ -3,10 +3,12 @@ import { frontendURL } from '../../../../helper/URLHelper';
 const contacts = accountId => ({
   parentNav: 'contacts',
   routes: [
-    'contacts_dashboard',
+    'contacts_dashboard_index',
+    'contacts_dashboard_segments_index',
+    'contacts_dashboard_labels_index',
     'contacts_edit',
-    'contacts_segments_dashboard',
-    'contacts_labels_dashboard',
+    'contacts_edit_segment',
+    'contacts_edit_label',
   ],
   menuItems: [
     {
@@ -14,7 +16,7 @@ const contacts = accountId => ({
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
-      toStateName: 'contacts_dashboard',
+      toStateName: 'contacts_dashboard_index',
     },
   ],
 });
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index 5a50bd440..59de35564 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -31,7 +31,7 @@ const primaryMenuItems = accountId => [
     label: 'CONTACTS',
     featureFlag: FEATURE_FLAGS.CRM,
     toState: frontendURL(`accounts/${accountId}/contacts`),
-    toStateName: 'contacts_dashboard',
+    toStateName: 'contacts_dashboard_index',
   },
   {
     icon: 'arrow-trending-lines',
diff --git a/app/javascript/dashboard/composables/spec/useFileUpload.spec.js b/app/javascript/dashboard/composables/spec/useFileUpload.spec.js
new file mode 100644
index 000000000..27e17dc43
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useFileUpload.spec.js
@@ -0,0 +1,146 @@
+import { useFileUpload } from '../useFileUpload';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { DirectUpload } from 'activestorage';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL } from 'shared/constants/messages';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(message => message),
+}));
+vi.mock('vue-i18n');
+vi.mock('activestorage');
+vi.mock('shared/helpers/FileHelper');
+
+describe('useFileUpload', () => {
+  const mockAttachFile = vi.fn();
+  const mockTranslate = vi.fn();
+
+  const mockFile = {
+    file: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    useMapGetter.mockImplementation(getter => {
+      const getterMap = {
+        getCurrentAccountId: { value: '123' },
+        getCurrentUser: { value: { access_token: 'test-token' } },
+        getSelectedChat: { value: { id: '456' } },
+        'globalConfig/get': { value: { directUploadsEnabled: true } },
+      };
+      return getterMap[getter];
+    });
+
+    useI18n.mockReturnValue({ t: mockTranslate });
+    checkFileSizeLimit.mockReturnValue(true);
+  });
+
+  it('should handle direct file upload when enabled', () => {
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    const mockBlob = { signed_id: 'test-blob' };
+    DirectUpload.mockImplementation(() => ({
+      create: callback => callback(null, mockBlob),
+    }));
+
+    onFileUpload(mockFile);
+
+    expect(DirectUpload).toHaveBeenCalledWith(
+      mockFile.file,
+      '/api/v1/accounts/123/conversations/456/direct_uploads',
+      expect.any(Object)
+    );
+    expect(mockAttachFile).toHaveBeenCalledWith({
+      file: mockFile,
+      blob: mockBlob,
+    });
+  });
+
+  it('should handle indirect file upload when direct upload is disabled', () => {
+    useMapGetter.mockImplementation(getter => {
+      const getterMap = {
+        getCurrentAccountId: { value: '123' },
+        getCurrentUser: { value: { access_token: 'test-token' } },
+        getSelectedChat: { value: { id: '456' } },
+        'globalConfig/get': { value: { directUploadsEnabled: false } },
+      };
+      return getterMap[getter];
+    });
+
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(mockFile);
+
+    expect(DirectUpload).not.toHaveBeenCalled();
+    expect(mockAttachFile).toHaveBeenCalledWith({ file: mockFile });
+  });
+
+  it('should show alert when file size exceeds limit', () => {
+    checkFileSizeLimit.mockReturnValue(false);
+    mockTranslate.mockReturnValue('File size exceeds limit');
+
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(mockFile);
+
+    expect(useAlert).toHaveBeenCalledWith('File size exceeds limit');
+    expect(mockAttachFile).not.toHaveBeenCalled();
+  });
+
+  it('should use different max file size for Twilio SMS channel', () => {
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: true,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(mockFile);
+
+    expect(checkFileSizeLimit).toHaveBeenCalledWith(
+      mockFile,
+      MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+    );
+  });
+
+  it('should handle direct upload errors', () => {
+    const mockError = 'Upload failed';
+    DirectUpload.mockImplementation(() => ({
+      create: callback => callback(mockError, null),
+    }));
+
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(mockFile);
+
+    expect(useAlert).toHaveBeenCalledWith(mockError);
+    expect(mockAttachFile).not.toHaveBeenCalled();
+  });
+
+  it('should do nothing when file is null', () => {
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(null);
+
+    expect(checkFileSizeLimit).not.toHaveBeenCalled();
+    expect(mockAttachFile).not.toHaveBeenCalled();
+    expect(useAlert).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/javascript/dashboard/composables/useFileUpload.js b/app/javascript/dashboard/composables/useFileUpload.js
new file mode 100644
index 000000000..dd6779250
--- /dev/null
+++ b/app/javascript/dashboard/composables/useFileUpload.js
@@ -0,0 +1,91 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { DirectUpload } from 'activestorage';
+import {
+  MAXIMUM_FILE_UPLOAD_SIZE,
+  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+} from 'shared/constants/messages';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+
+/**
+ * Composable for handling file uploads in conversations
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.isATwilioSMSChannel - Whether the current channel is Twilio SMS
+ * @param {Function} options.attachFile - Callback function to handle file attachment
+ * @returns {Object} File upload methods and utilities
+ */
+export const useFileUpload = ({ isATwilioSMSChannel, attachFile }) => {
+  const { t } = useI18n();
+
+  const accountId = useMapGetter('getCurrentAccountId');
+  const currentUser = useMapGetter('getCurrentUser');
+  const currentChat = useMapGetter('getSelectedChat');
+  const globalConfig = useMapGetter('globalConfig/get');
+
+  const maxFileSize = computed(() =>
+    isATwilioSMSChannel
+      ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+      : MAXIMUM_FILE_UPLOAD_SIZE
+  );
+
+  const handleDirectFileUpload = file => {
+    if (!file) return;
+
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      const upload = new DirectUpload(
+        file.file,
+        `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
+        {
+          directUploadWillCreateBlobWithXHR: xhr => {
+            xhr.setRequestHeader(
+              'api_access_token',
+              currentUser.value.access_token
+            );
+          },
+        }
+      );
+
+      upload.create((error, blob) => {
+        if (error) {
+          useAlert(error);
+        } else {
+          attachFile({ file, blob });
+        }
+      });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
+    }
+  };
+
+  const handleIndirectFileUpload = file => {
+    if (!file) return;
+
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      attachFile({ file });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
+    }
+  };
+
+  const onFileUpload = file => {
+    if (globalConfig.value.directUploadsEnabled) {
+      handleDirectFileUpload(file);
+    } else {
+      handleIndirectFileUpload(file);
+    }
+  };
+
+  return {
+    onFileUpload,
+  };
+};
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index cafedd5fa..0bbc0c65a 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -12,7 +12,8 @@
   },
   "DROPDOWN_MENU": {
     "SEARCH_PLACEHOLDER": "Search...",
-    "EMPTY_STATE": "No results found."
+    "EMPTY_STATE": "No results found.",
+    "SEARCHING": "Searching..."
   },
   "DIALOG": {
     "BUTTONS": {
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index e6bfe7cbd..3826823ed 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -393,6 +393,7 @@
       "SEARCH_TITLE": "Search contacts",
       "SEARCH_PLACEHOLDER": "Search...",
       "MESSAGE_BUTTON": "Message",
+      "SEND_MESSAGE": "Send message",
       "BREADCRUMB": {
         "CONTACTS": "Contacts"
       },
@@ -666,7 +667,7 @@
       "NO_INBOX_ALERT": "There are no available inboxes to start a conversation with this contact.",
       "CONTACT_SELECTOR": {
         "LABEL": "To:",
-        "TAG_INPUT_PLACEHOLDER": "Type an email address to search for the contact and press Enter",
+        "TAG_INPUT_PLACEHOLDER": "Search for a contact with name, email or phone number",
         "CONTACT_CREATING": "Creating contact..."
       },
       "INBOX_SELECTOR": {
@@ -677,9 +678,9 @@
         "SUBJECT_LABEL": "Subject :",
         "SUBJECT_PLACEHOLDER": "Enter your email subject here",
         "CC_LABEL": "Cc:",
-        "CC_PLACEHOLDER": "Type an email address to search for the contact and press Enter",
+        "CC_PLACEHOLDER": "Search for a contact with their email address",
         "BCC_LABEL": "Bcc:",
-        "BCC_PLACEHOLDER": "Type an email address to search for the contact and press Enter",
+        "BCC_PLACEHOLDER": "Search for a contact with their email address",
         "BCC_BUTTON": "Bcc"
       },
       "MESSAGE_EDITOR": {
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 3b3199afe..97f24741f 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -178,7 +178,6 @@ export default {
     <NextSidebar
       v-if="showNextSidebar"
       @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-create-account-modal="openCreateAccountModal"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index 9002a05de..d22048a37 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -63,6 +63,10 @@ const goToContactsList = () => {
 const fetchActiveContact = async () => {
   if (route.params.contactId) {
     store.dispatch('contacts/show', { id: route.params.contactId });
+    await store.dispatch(
+      'contacts/fetchContactableInbox',
+      route.params.contactId
+    );
   }
 };
 
@@ -97,7 +101,7 @@ onMounted(() => {
     class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
   >
     <ContactsDetailsLayout
-      :button-label="$t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
+      :button-label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
       :selected-contact="selectedContact"
       is-detail-view
       :show-pagination-footer="false"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index c6d60eb53..47517798b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -138,7 +138,7 @@ export default {
     },
     selectedInbox: {
       get() {
-        const inboxList = this.contact.contactableInboxes || [];
+        const inboxList = this.contact.contact_inboxes || [];
         return (
           inboxList.find(inbox => {
             return inbox.inbox?.id && inbox.inbox?.id === this.targetInbox?.id;
@@ -152,7 +152,7 @@ export default {
       },
     },
     showNoInboxAlert() {
-      if (!this.contact.contactableInboxes) {
+      if (!this.contact.contact_inboxes) {
         return false;
       }
       return this.inboxes.length === 0 && !this.uiFlags.isFetchingInboxes;
@@ -166,7 +166,7 @@ export default {
         : this.$t('CONVERSATION.FOOTER.ENABLE_SIGN_TOOLTIP');
     },
     inboxes() {
-      const inboxList = this.contact.contactableInboxes || [];
+      const inboxList = this.contact.contact_inboxes || [];
       return inboxList.map(inbox => ({
         ...inbox.inbox,
         sourceId: inbox.source_id,
diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js
index 80fe44beb..e8da81482 100644
--- a/app/javascript/dashboard/store/modules/contacts/actions.js
+++ b/app/javascript/dashboard/store/modules/contacts/actions.js
@@ -205,8 +205,8 @@ export const actions = {
     try {
       const response = await ContactAPI.getContactableInboxes(id);
       const contact = {
-        id,
-        contactableInboxes: response.data.payload,
+        id: Number(id),
+        contact_inboxes: response.data.payload,
       };
       commit(types.SET_CONTACT_ITEM, contact);
     } catch (error) {

From 3fd585f40b477efad373a518eb87918c6c591f30 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 6 Dec 2024 12:05:30 +0530
Subject: [PATCH 47/74] feat: Throttle meta request for large chat size
 (#10518)

For large accounts with huge volumes of messages, it can be very
wasteful to make the meta request so often. It also puts un-necessary
load on the DB bombarding it with so many requests. This PR fixes it by
throttling the requests to 5 seconds for all users with more than 1000
accessible chats.

### Why not cache this value in the backend?

Well, it's a bit tricky, since a user can have different permissions
over inboxes and can see different chats, maintaining a cache for each
of them is not effective, besides the requests will reach the server
anyway.
---
 .../dashboard/store/modules/conversationStats.js   | 14 +++++++++++++-
 .../specs/conversationStats/actions.spec.js        |  4 ++--
 .../specs/conversationStats/mutations.spec.js      |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/store/modules/conversationStats.js b/app/javascript/dashboard/store/modules/conversationStats.js
index 201bf6564..025e3352f 100644
--- a/app/javascript/dashboard/store/modules/conversationStats.js
+++ b/app/javascript/dashboard/store/modules/conversationStats.js
@@ -5,6 +5,7 @@ const state = {
   mineCount: 0,
   unAssignedCount: 0,
   allCount: 0,
+  updatedOn: null,
 };
 
 export const getters = {
@@ -12,7 +13,17 @@ export const getters = {
 };
 
 export const actions = {
-  get: async ({ commit }, params) => {
+  get: async ({ commit, state: $state }, params) => {
+    const currentTime = new Date();
+    const lastUpdatedTime = new Date($state.updatedOn);
+
+    // Skip large accounts from making too many requests
+    if (currentTime - lastUpdatedTime < 10000 && $state.allCount > 1000) {
+      // eslint-disable-next-line no-console
+      console.warn('Skipping conversation meta fetch');
+      return;
+    }
+
     try {
       const response = await ConversationApi.meta(params);
       const {
@@ -40,6 +51,7 @@ export const mutations = {
     $state.mineCount = mineCount;
     $state.allCount = allCount;
     $state.unAssignedCount = unAssignedCount;
+    $state.updatedOn = new Date();
   },
 };
 
diff --git a/app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js
index 33d927103..4572387ac 100644
--- a/app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js
@@ -11,7 +11,7 @@ describe('#actions', () => {
     it('sends correct mutations if API is success', async () => {
       axios.get.mockResolvedValue({ data: { meta: { mine_count: 1 } } });
       await actions.get(
-        { commit },
+        { commit, state: { updatedOn: null } },
         { inboxId: 1, assigneeTpe: 'me', status: 'open' }
       );
       expect(commit.mock.calls).toEqual([
@@ -21,7 +21,7 @@ describe('#actions', () => {
     it('sends correct actions if API is error', async () => {
       axios.get.mockRejectedValue({ message: 'Incorrect header' });
       await actions.get(
-        { commit },
+        { commit, state: { updatedOn: null } },
         { inboxId: 1, assigneeTpe: 'me', status: 'open' }
       );
       expect(commit.mock.calls).toEqual([]);
diff --git a/app/javascript/dashboard/store/modules/specs/conversationStats/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversationStats/mutations.spec.js
index e49d938e3..e625eb13c 100644
--- a/app/javascript/dashboard/store/modules/specs/conversationStats/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversationStats/mutations.spec.js
@@ -14,6 +14,7 @@ describe('#mutations', () => {
         mineCount: 1,
         unAssignedCount: 1,
         allCount: 2,
+        updatedOn: expect.any(Date),
       });
     });
   });

From afb3e3e649dbd68c6c8298ba19686a6cb93f10e0 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 6 Dec 2024 12:16:57 +0530
Subject: [PATCH 48/74] fix: Fix issues with contact routes in old navigation
 sidebar (#10547)

---
 .../Contacts/ContactsSidebar/ContactMerge.vue |   5 +-
 .../Contacts/Pages/ContactDetails.vue         |  31 ++--
 .../helpers/composeConversationHelper.js      |   9 +-
 .../specs/composeConversationHelper.spec.js   |  16 +-
 .../layout/config/sidebarItems/contacts.js    |   2 +-
 .../layout/sidebarComponents/Secondary.vue    |  10 +-
 app/javascript/dashboard/helper/inbox.js      |  27 ++--
 .../dashboard/helper/specs/inbox.spec.js      | 152 +++++++++++-------
 .../contacts/pages/ContactManageView.vue      |   1 +
 9 files changed, 149 insertions(+), 104 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
index 65cbfafe2..2a0e79931 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
@@ -20,7 +20,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['goToContactsList']);
+const emit = defineEmits(['goToContactsList', 'resetTab']);
 
 const { t } = useI18n();
 const store = useStore();
@@ -74,6 +74,9 @@ const onContactSearch = debounce(
 );
 
 const resetState = () => {
+  if (state.primaryContactId === null) {
+    emit('resetTab');
+  }
   state.primaryContactId = null;
   searchResults.value = [];
   isSearching.value = false;
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
index 3f92df408..d46ffd850 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
@@ -130,15 +130,28 @@ const handleAvatarDelete = async () => {
         <h3 class="text-base font-medium text-n-slate-12">
           {{ selectedContact?.name }}
         </h3>
-        <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 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>
       </div>
       <ContactLabels :contact-id="selectedContact?.id" />
     </div>
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
index 119552f61..ef3d0e88d 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -1,12 +1,8 @@
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
 import camelcaseKeys from 'camelcase-keys';
 import ContactAPI from 'dashboard/api/contacts';
 
-export const convertChannelTypeToLabel = channelType => {
-  const [, type] = channelType.split('::');
-  return type ? type.charAt(0).toUpperCase() + type.slice(1) : channelType;
-};
-
 export const generateLabelForContactableInboxesList = ({
   name,
   email,
@@ -22,7 +18,7 @@ export const generateLabelForContactableInboxesList = ({
   ) {
     return `${name} (${phoneNumber})`;
   }
-  return `${name} (${convertChannelTypeToLabel(channelType)})`;
+  return name;
 };
 
 export const buildContactableInboxesList = contactInboxes => {
@@ -30,6 +26,7 @@ export const buildContactableInboxesList = contactInboxes => {
   return contactInboxes.map(
     ({ name, id, email, channelType, phoneNumber, ...rest }) => ({
       id,
+      icon: getInboxIconByType(channelType, phoneNumber, 'line'),
       label: generateLabelForContactableInboxesList({
         name,
         email,
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
index dcfa3b051..ca30235d1 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -6,19 +6,6 @@ import * as helpers from '../composeConversationHelper';
 vi.mock('dashboard/api/contacts');
 
 describe('composeConversationHelper', () => {
-  describe('convertChannelTypeToLabel', () => {
-    it('converts channel type with namespace to capitalized label', () => {
-      expect(helpers.convertChannelTypeToLabel('Channel::Email')).toBe('Email');
-      expect(helpers.convertChannelTypeToLabel('Channel::Whatsapp')).toBe(
-        'Whatsapp'
-      );
-    });
-
-    it('returns original value if no namespace found', () => {
-      expect(helpers.convertChannelTypeToLabel('email')).toBe('email');
-    });
-  });
-
   describe('generateLabelForContactableInboxesList', () => {
     const contact = {
       name: 'John Doe',
@@ -59,7 +46,7 @@ describe('composeConversationHelper', () => {
           ...contact,
           channelType: 'Channel::Api',
         })
-      ).toBe('John Doe (Api)');
+      ).toBe('John Doe');
     });
   });
 
@@ -83,6 +70,7 @@ describe('composeConversationHelper', () => {
       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,
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
index 3cef2237b..e4150d47d 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
@@ -15,7 +15,7 @@ const contacts = accountId => ({
       icon: 'contact-card-group',
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/contacts`),
+      toState: frontendURL(`accounts/${accountId}/contacts?page=1`),
       toStateName: 'contacts_dashboard_index',
     },
   ],
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index efe89d4c6..c36b6f611 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -134,7 +134,7 @@ export default {
         icon: 'number-symbol',
         label: 'TAGGED_WITH',
         hasSubMenu: true,
-        key: 'label',
+        key: 'labels',
         newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
         newLinkTag: 'NEW_LABEL',
         toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
@@ -147,7 +147,7 @@ export default {
           color: label.color,
           truncateLabel: true,
           toState: frontendURL(
-            `accounts/${this.accountId}/labels/${label.title}/contacts`
+            `accounts/${this.accountId}/contacts/labels/${label.title}`
           ),
         })),
       };
@@ -194,7 +194,7 @@ export default {
         icon: 'folder',
         label: 'CUSTOM_VIEWS_SEGMENTS',
         hasSubMenu: true,
-        key: 'custom_view',
+        key: 'segments',
         children: this.customViews
           .filter(view => view.filter_type === 'contact')
           .map(view => ({
@@ -202,7 +202,7 @@ export default {
             label: view.name,
             truncateLabel: true,
             toState: frontendURL(
-              `accounts/${this.accountId}/contacts/custom_view/${view.id}`
+              `accounts/${this.accountId}/contacts/segments/${view.id}`
             ),
           })),
       };
@@ -247,7 +247,7 @@ export default {
     <transition-group
       name="menu-list"
       tag="ul"
-      class="pt-2 reset-base list-none"
+      class="pt-2 list-none reset-base"
     >
       <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 6f318218b..87574b64f 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -12,17 +12,17 @@ export const INBOX_TYPES = {
 };
 
 const INBOX_ICON_MAP = {
-  [INBOX_TYPES.WEB]: 'i-ri-global-fill',
-  [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
-  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
-  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-fill',
-  [INBOX_TYPES.API]: 'i-ri-cloudy-fill',
-  [INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
-  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
-  [INBOX_TYPES.LINE]: 'i-ri-line-fill',
+  [INBOX_TYPES.WEB]: 'i-ri-global',
+  [INBOX_TYPES.FB]: 'i-ri-messenger',
+  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x',
+  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp',
+  [INBOX_TYPES.API]: 'i-ri-cloudy',
+  [INBOX_TYPES.EMAIL]: 'i-ri-mail',
+  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram',
+  [INBOX_TYPES.LINE]: 'i-ri-line',
 };
 
-const DEFAULT_ICON = 'i-ri-chat-1-fill';
+const DEFAULT_ICON = 'i-ri-chat-1';
 
 export const getInboxSource = (type, phoneNumber, inbox) => {
   switch (type) {
@@ -110,15 +110,16 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
-export const getInboxIconByType = (type, phoneNumber) => {
+export const getInboxIconByType = (type, phoneNumber, variant = 'fill') => {
   // Special case for Twilio (whatsapp and sms)
   if (type === INBOX_TYPES.TWILIO) {
     return phoneNumber?.startsWith('whatsapp')
-      ? 'i-ri-whatsapp-fill'
-      : 'i-ri-chat-1-fill';
+      ? `i-ri-whatsapp-${variant}`
+      : `i-ri-chat-1-${variant}`;
   }
 
-  return INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
+  const baseIcon = INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
+  return `${baseIcon}-${variant}`;
 };
 
 export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
diff --git a/app/javascript/dashboard/helper/specs/inbox.spec.js b/app/javascript/dashboard/helper/specs/inbox.spec.js
index 621c131f2..0d5625603 100644
--- a/app/javascript/dashboard/helper/specs/inbox.spec.js
+++ b/app/javascript/dashboard/helper/specs/inbox.spec.js
@@ -41,70 +41,112 @@ describe('#Inbox Helpers', () => {
   });
 
   describe('getInboxIconByType', () => {
-    it('returns correct icon for web widget', () => {
-      expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
+    describe('fill variant (default)', () => {
+      it('returns correct icon for web widget', () => {
+        expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
+      });
+
+      it('returns correct icon for Facebook', () => {
+        expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
+      });
+
+      it('returns correct icon for Twitter', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
+          'i-ri-twitter-x-fill'
+        );
+      });
+
+      it('returns correct icon for WhatsApp', () => {
+        expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
+          'i-ri-whatsapp-fill'
+        );
+      });
+
+      it('returns correct icon for API', () => {
+        expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
+      });
+
+      it('returns correct icon for Email', () => {
+        expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
+      });
+
+      it('returns correct icon for Telegram', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
+          'i-ri-telegram-fill'
+        );
+      });
+
+      it('returns correct icon for Line', () => {
+        expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
+      });
+
+      it('returns default icon for unknown type', () => {
+        expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
+      });
+
+      it('returns default icon for undefined type', () => {
+        expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
+      });
     });
 
-    it('returns correct icon for Facebook', () => {
-      expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
-    });
+    describe('line variant', () => {
+      it('returns correct line icon for web widget', () => {
+        expect(getInboxIconByType(INBOX_TYPES.WEB, null, 'line')).toBe(
+          'i-ri-global-line'
+        );
+      });
 
-    it('returns correct icon for Twitter', () => {
-      expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
-        'i-ri-twitter-x-fill'
-      );
+      it('returns correct line icon for Facebook', () => {
+        expect(getInboxIconByType(INBOX_TYPES.FB, null, 'line')).toBe(
+          'i-ri-messenger-line'
+        );
+      });
+
+      it('returns correct line icon for unknown type', () => {
+        expect(getInboxIconByType('UNKNOWN_TYPE', null, 'line')).toBe(
+          'i-ri-chat-1-line'
+        );
+      });
     });
 
     describe('Twilio cases', () => {
-      it('returns WhatsApp icon for Twilio WhatsApp number', () => {
-        expect(
-          getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
-        ).toBe('i-ri-whatsapp-fill');
+      describe('fill variant', () => {
+        it('returns WhatsApp icon for Twilio WhatsApp number', () => {
+          expect(
+            getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
+          ).toBe('i-ri-whatsapp-fill');
+        });
+
+        it('returns SMS icon for regular Twilio number', () => {
+          expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
+            'i-ri-chat-1-fill'
+          );
+        });
+
+        it('returns SMS icon when phone number is undefined', () => {
+          expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
+            'i-ri-chat-1-fill'
+          );
+        });
       });
 
-      it('returns SMS icon for regular Twilio number', () => {
-        expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
-          'i-ri-chat-1-fill'
-        );
+      describe('line variant', () => {
+        it('returns WhatsApp line icon for Twilio WhatsApp number', () => {
+          expect(
+            getInboxIconByType(
+              INBOX_TYPES.TWILIO,
+              'whatsapp:+1234567890',
+              'line'
+            )
+          ).toBe('i-ri-whatsapp-line');
+        });
+
+        it('returns SMS line icon for regular Twilio number', () => {
+          expect(
+            getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890', 'line')
+          ).toBe('i-ri-chat-1-line');
+        });
       });
-
-      it('returns SMS icon when phone number is undefined', () => {
-        expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
-          'i-ri-chat-1-fill'
-        );
-      });
-    });
-
-    it('returns correct icon for WhatsApp', () => {
-      expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
-        'i-ri-whatsapp-fill'
-      );
-    });
-
-    it('returns correct icon for API', () => {
-      expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
-    });
-
-    it('returns correct icon for Email', () => {
-      expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
-    });
-
-    it('returns correct icon for Telegram', () => {
-      expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
-        'i-ri-telegram-fill'
-      );
-    });
-
-    it('returns correct icon for Line', () => {
-      expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
-    });
-
-    it('returns default icon for unknown type', () => {
-      expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
-    });
-
-    it('returns default icon for undefined type', () => {
-      expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
     });
   });
 
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index d22048a37..8b07646e0 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -145,6 +145,7 @@ onMounted(() => {
             ref="contactMergeRef"
             :selected-contact="selectedContact"
             @go-to-contacts-list="goToContactsList"
+            @reset-tab="handleTabChange(CONTACT_TABS_OPTIONS[0])"
           />
         </template>
       </template>

From 1b430ffae244a1c745d1be84dcc1d2e3f46054ff Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:40:06 +0530
Subject: [PATCH 49/74] fix: New compose conversation form (#10548)

---
 .../Contacts/ContactsDetailsLayout.vue        |  6 +-
 .../NewConversation/ComposeConversation.vue   | 18 +++--
 .../components/ContactSelector.vue            |  9 ++-
 .../helpers/composeConversationHelper.js      |  7 +-
 .../specs/composeConversationHelper.spec.js   | 68 +++++++++++++++++++
 .../dropdown-menu/DropdownMenu.vue            |  2 +-
 .../components-next/taginput/TagInput.vue     | 18 ++---
 .../sidebarComponents/SecondaryNavItem.vue    | 10 ++-
 app/javascript/dashboard/helper/inbox.js      | 47 ++++++++-----
 9 files changed, 150 insertions(+), 35 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
index 764f46141..ad007af1c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -1,6 +1,7 @@
 <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 Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
@@ -21,6 +22,9 @@ const emit = defineEmits(['goToContactsList']);
 
 const { t } = useI18n();
 const slots = useSlots();
+const route = useRoute();
+
+const contactId = computed(() => route.params.contactId);
 
 const selectedContactName = computed(() => {
   return props.selectedContact?.name;
@@ -60,7 +64,7 @@ const handleBreadcrumbClick = () => {
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
             />
-            <ComposeConversation>
+            <ComposeConversation :contact-id="contactId">
               <template #trigger="{ toggle }">
                 <Button :label="buttonLabel" size="sm" @click="toggle" />
               </template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
index 347325b16..2ec22140b 100644
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -2,7 +2,7 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { debounce } from '@chatwoot/utils';
@@ -21,9 +21,12 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  contactId: {
+    type: String,
+    default: null,
+  },
 });
 
-const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
 
@@ -44,8 +47,8 @@ const uiFlags = useMapGetter('contactConversations/getUIFlags');
 const directUploadsEnabled = computed(
   () => globalConfig.value.directUploadsEnabled
 );
-const contactId = computed(() => route.params.contactId || null);
-const activeContact = computed(() => contactById.value(contactId.value));
+
+const activeContact = computed(() => contactById.value(props.contactId));
 
 const composePopoverClass = computed(() => {
   return props.alignPosition === 'right'
@@ -149,7 +152,7 @@ const toggle = () => {
 watch(
   activeContact,
   () => {
-    if (activeContact.value && contactId.value) {
+    if (activeContact.value && props.contactId) {
       // Add null check for contactInboxes
       const contactInboxes = activeContact.value?.contactInboxes || [];
       selectedContact.value = {
@@ -177,7 +180,10 @@ useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div class="relative z-40">
+  <div
+    v-on-click-outside="() => (showComposeNewConversation = false)"
+    class="relative z-40"
+  >
     <slot
       name="trigger"
       :is-open="showComposeNewConversation"
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
index 9903f18ef..33a2f8f20 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
@@ -65,7 +65,14 @@ const contactsList = computed(() => {
 });
 
 const selectedContactLabel = computed(() => {
-  return `${props.selectedContact?.name} (${props.selectedContact?.email})`;
+  const { name, email = '', phoneNumber = '' } = props.selectedContact || {};
+  if (email) {
+    return `${name} (${email})`;
+  }
+  if (phoneNumber) {
+    return `${name} (${phoneNumber})`;
+  }
+  return name || '';
 });
 
 const errorClass = computed(() => {
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
index ef3d0e88d..c6bb9b526 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -154,7 +154,12 @@ export const searchContacts = async ({ keys, query }) => {
     'name',
     generateContactQuery({ keys, query })
   );
-  return camelcaseKeys(payload, { deep: true });
+  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 email => {
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
index ca30235d1..54c4eab60 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -297,6 +297,70 @@ describe('composeConversationHelper', () => {
         });
       });
 
+      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: [] },
@@ -310,6 +374,8 @@ describe('composeConversationHelper', () => {
         const mockPayload = [
           {
             id: 1,
+            name: 'John Doe',
+            phone_number: '+1234567890',
             contact_inboxes: [
               {
                 inbox_id: 1,
@@ -332,6 +398,8 @@ describe('composeConversationHelper', () => {
         expect(result).toEqual([
           {
             id: 1,
+            name: 'John Doe',
+            phoneNumber: '+1234567890',
             contactInboxes: [
               {
                 inboxId: 1,
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index b9824755e..95b368dae 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -95,7 +95,7 @@ onMounted(() => {
           rounded-full
         />
       </slot>
-      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
+      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
       <span v-if="item.label" class="min-w-0 text-sm truncate">{{
         item.label
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 5338eadc6..63d757415 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -81,17 +81,19 @@ const filteredMenuItems = computed(() => {
     item => !tags.value.includes(item.label)
   );
 
-  // Only show typed value as suggestion if:
+  // Show typed value as suggestion only if:
   // 1. There's a value being typed
   // 2. The value isn't already in the tags
-  // 3. There are no menu items available
-  const trimmedNewTag = newTag.value.trim();
-  if (
+  // 3. Email validation passes (if type is email) and There are no menu items available
+  const trimmedNewTag = newTag.value?.trim();
+  const shouldShowTypedValue =
     trimmedNewTag &&
     !tags.value.includes(trimmedNewTag) &&
+    !props.isLoading &&
     !availableMenuItems.length &&
-    !props.isLoading
-  ) {
+    (props.type === 'email' ? !isNewTagInValidType.value : true);
+
+  if (shouldShowTypedValue) {
     return [
       {
         label: trimmedNewTag,
@@ -117,7 +119,7 @@ const emitDataOnAdd = emailValue => {
 };
 
 const addTag = async () => {
-  const trimmedTag = newTag.value.trim();
+  const trimmedTag = newTag.value?.trim();
   if (!trimmedTag) return;
 
   if (props.mode === MODE.SINGLE && tags.value.length >= 1) {
@@ -185,7 +187,7 @@ watch(
 watch(
   () => newTag.value,
   async newValue => {
-    if (props.type === 'email' && newValue.trim()?.length > 2) {
+    if (props.type === 'email' && newValue?.trim()?.length > 2) {
       await v$.value.$validate();
     }
   }
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 952f212ee..a38bbd20b 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -119,6 +119,13 @@ export default {
         this.menuItem.toStateName === 'settings_applications'
       );
     },
+    isContactsDefaultRoute() {
+      return (
+        this.menuItem.toStateName === 'contacts_dashboard_index' &&
+        (this.$store.state.route.name === 'contacts_dashboard_index' ||
+          this.$store.state.route.name === 'contacts_edit')
+      );
+    },
     isCurrentRoute() {
       return this.$store.state.route.name.includes(this.menuItem.toStateName);
     },
@@ -130,6 +137,7 @@ export default {
         this.isAllConversations ||
         this.isMentions ||
         this.isUnattended ||
+        this.isContactsDefaultRoute ||
         this.isCurrentRoute
       ) {
         return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
@@ -242,7 +250,7 @@ export default {
       </span>
     </router-link>
 
-    <ul v-if="hasSubMenu" class="reset-base list-none">
+    <ul v-if="hasSubMenu" class="list-none reset-base">
       <SecondaryChildNavItem
         v-for="child in menuItem.children"
         :key="child.id"
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 87574b64f..b608f4110 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -11,18 +11,31 @@ export const INBOX_TYPES = {
   SMS: 'Channel::Sms',
 };
 
-const INBOX_ICON_MAP = {
-  [INBOX_TYPES.WEB]: 'i-ri-global',
-  [INBOX_TYPES.FB]: 'i-ri-messenger',
-  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x',
-  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp',
-  [INBOX_TYPES.API]: 'i-ri-cloudy',
-  [INBOX_TYPES.EMAIL]: 'i-ri-mail',
-  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram',
-  [INBOX_TYPES.LINE]: 'i-ri-line',
+const INBOX_ICON_MAP_FILL = {
+  [INBOX_TYPES.WEB]: 'i-ri-global-fill',
+  [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
+  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
+  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-fill',
+  [INBOX_TYPES.API]: 'i-ri-cloudy-fill',
+  [INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
+  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
+  [INBOX_TYPES.LINE]: 'i-ri-line-fill',
 };
 
-const DEFAULT_ICON = 'i-ri-chat-1';
+const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
+
+const INBOX_ICON_MAP_LINE = {
+  [INBOX_TYPES.WEB]: 'i-ri-global-line',
+  [INBOX_TYPES.FB]: 'i-ri-messenger-line',
+  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-line',
+  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-line',
+  [INBOX_TYPES.API]: 'i-ri-cloudy-line',
+  [INBOX_TYPES.EMAIL]: 'i-ri-mail-line',
+  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-line',
+  [INBOX_TYPES.LINE]: 'i-ri-line-line',
+};
+
+const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
 
 export const getInboxSource = (type, phoneNumber, inbox) => {
   switch (type) {
@@ -111,15 +124,17 @@ export const getInboxClassByType = (type, phoneNumber) => {
 };
 
 export const getInboxIconByType = (type, phoneNumber, variant = 'fill') => {
+  const iconMap =
+    variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
+  const defaultIcon =
+    variant === 'fill' ? DEFAULT_ICON_FILL : DEFAULT_ICON_LINE;
+
   // Special case for Twilio (whatsapp and sms)
-  if (type === INBOX_TYPES.TWILIO) {
-    return phoneNumber?.startsWith('whatsapp')
-      ? `i-ri-whatsapp-${variant}`
-      : `i-ri-chat-1-${variant}`;
+  if (type === INBOX_TYPES.TWILIO && phoneNumber?.startsWith('whatsapp')) {
+    return iconMap[INBOX_TYPES.WHATSAPP];
   }
 
-  const baseIcon = INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
-  return `${baseIcon}-${variant}`;
+  return iconMap[type] ?? defaultIcon;
 };
 
 export const getInboxWarningIconClass = (type, reauthorizationRequired) => {

From d902bb1d6f890e8b8edcf465171721a9bd803c48 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Sat, 7 Dec 2024 02:01:01 +0530
Subject: [PATCH 50/74] fix: Remove duplicate contactable inbox in the
 conversation form (#10554)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../api/v1/accounts/contacts_controller.rb    |  2 +-
 app/javascript/dashboard/api/contacts.js      |  8 +++
 .../Contacts/Pages/ContactDetails.vue         |  4 ++
 .../NewConversation/ComposeConversation.vue   |  1 -
 .../helpers/composeConversationHelper.js      | 69 +++++++++++++-----
 .../specs/composeConversationHelper.spec.js   | 71 +++++++++++++++++++
 .../contacts/pages/ContactManageView.vue      |  2 +-
 .../v1/accounts/contacts/show.json.jbuilder   |  2 +-
 .../v1/accounts/contacts/update.json.jbuilder |  2 +-
 9 files changed, 137 insertions(+), 24 deletions(-)

diff --git a/app/controllers/api/v1/accounts/contacts_controller.rb b/app/controllers/api/v1/accounts/contacts_controller.rb
index 250c64a86..0d8e0ed93 100644
--- a/app/controllers/api/v1/accounts/contacts_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -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]
+  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
 
   def index
     @contacts_count = resolved_contacts.count
diff --git a/app/javascript/dashboard/api/contacts.js b/app/javascript/dashboard/api/contacts.js
index 85c4bba1d..2eee3f484 100644
--- a/app/javascript/dashboard/api/contacts.js
+++ b/app/javascript/dashboard/api/contacts.js
@@ -27,6 +27,14 @@ 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`);
   }
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
index d46ffd850..aec21a976 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
@@ -70,6 +70,10 @@ const updateContact = async () => {
   try {
     const { customAttributes, ...basicContactData } = contactData.value;
     await store.dispatch('contacts/update', basicContactData);
+    await store.dispatch(
+      'contacts/fetchContactableInbox',
+      props.selectedContact.id
+    );
     useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
   } catch (error) {
     useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.ERROR_MESSAGE'));
diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
index 2ec22140b..b5d57f202 100644
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -153,7 +153,6 @@ watch(
   activeContact,
   () => {
     if (activeContact.value && props.contactId) {
-      // Add null check for contactInboxes
       const contactInboxes = activeContact.value?.contactInboxes || [];
       selectedContact.value = {
         ...activeContact.value,
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
index c6bb9b526..12a5e76b3 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -3,6 +3,15 @@ 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,
@@ -21,27 +30,49 @@ export const generateLabelForContactableInboxesList = ({
   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(
-    ({ 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,
-    })
-  );
+
+  return contactInboxes.map(transformInbox).sort(compareInboxes);
 };
 
 export const getCapitalizedNameFromEmail = email => {
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
index 54c4eab60..5a2d0092d 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -463,3 +463,74 @@ describe('composeConversationHelper', () => {
     });
   });
 });
+
+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([]);
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index 8b07646e0..9f99157e6 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -62,7 +62,7 @@ const goToContactsList = () => {
 
 const fetchActiveContact = async () => {
   if (route.params.contactId) {
-    store.dispatch('contacts/show', { id: route.params.contactId });
+    await store.dispatch('contacts/show', { id: route.params.contactId });
     await store.dispatch(
       'contacts/fetchContactableInbox',
       route.params.contactId
diff --git a/app/views/api/v1/accounts/contacts/show.json.jbuilder b/app/views/api/v1/accounts/contacts/show.json.jbuilder
index 524a393bf..1add73326 100644
--- a/app/views/api/v1/accounts/contacts/show.json.jbuilder
+++ b/app/views/api/v1/accounts/contacts/show.json.jbuilder
@@ -1,3 +1,3 @@
 json.payload do
-  json.partial! 'api/v1/models/contact', formats: [:json], resource: @contact, with_contact_inboxes: true
+  json.partial! 'api/v1/models/contact', formats: [:json], resource: @contact, with_contact_inboxes: @include_contact_inboxes
 end
diff --git a/app/views/api/v1/accounts/contacts/update.json.jbuilder b/app/views/api/v1/accounts/contacts/update.json.jbuilder
index 524a393bf..1add73326 100644
--- a/app/views/api/v1/accounts/contacts/update.json.jbuilder
+++ b/app/views/api/v1/accounts/contacts/update.json.jbuilder
@@ -1,3 +1,3 @@
 json.payload do
-  json.partial! 'api/v1/models/contact', formats: [:json], resource: @contact, with_contact_inboxes: true
+  json.partial! 'api/v1/models/contact', formats: [:json], resource: @contact, with_contact_inboxes: @include_contact_inboxes
 end

From 2ce7c8b84544b7d2ba13fc66618543e83bd348bc Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 9 Dec 2024 15:59:26 +0530
Subject: [PATCH 51/74] fix: sidebar collapsed on reload (#10561)

When reloading a page, the sidebar item that is actively selected is
collapsed by default. This PR fixes it by expanding it on reload
---
 .../dashboard/components-next/sidebar/SidebarGroup.vue   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index 051375b68..f22e003f1 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted, nextTick } from 'vue';
 import { useSidebarContext } from './provider';
 import { useRoute, useRouter } from 'vue-router';
 import Policy from 'dashboard/components/policy.vue';
@@ -113,6 +113,13 @@ const toggleTrigger = () => {
   }
   setExpandedItem(props.name);
 };
+
+onMounted(async () => {
+  await nextTick();
+  if (hasActiveChild.value) {
+    setExpandedItem(props.name);
+  }
+});
 </script>
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->

From 472f6d9345fa6cfafb07e055b2931026988cc1d7 Mon Sep 17 00:00:00 2001
From: giquieu <giquieu@gmail.com>
Date: Mon, 9 Dec 2024 12:36:17 -0300
Subject: [PATCH 52/74] feat: Ability to lock the conversation to a single
 thread in API channels (#10329)

Added the possibility to mark as a single conversation in the API type
inbox. This allows the conversation builder to search for the last
conversation.
I thought about searching for the last conversation with created_at:
desc order, as is done in some channels... but I didn't change the way
the conversation is searched.

Fixes: #7726

Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 .../dashboard/settings/inbox/Settings.vue     |  5 +-
 spec/builders/conversation_builder_spec.rb    | 62 +++++++++++++++----
 2 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 530106f0a..b91fc2414 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -175,7 +175,10 @@ export default {
     },
     canLocktoSingleConversation() {
       return (
-        this.isASmsInbox || this.isAWhatsAppChannel || this.isAFacebookInbox
+        this.isASmsInbox ||
+        this.isAWhatsAppChannel ||
+        this.isAFacebookInbox ||
+        this.isAPIInbox
       );
     },
     inboxNameLabel() {
diff --git a/spec/builders/conversation_builder_spec.rb b/spec/builders/conversation_builder_spec.rb
index 956aec966..c0c5f248b 100644
--- a/spec/builders/conversation_builder_spec.rb
+++ b/spec/builders/conversation_builder_spec.rb
@@ -3,39 +3,77 @@ require 'rails_helper'
 describe ConversationBuilder do
   let(:account) { create(:account) }
   let!(:sms_channel) { create(:channel_sms, account: account) }
+  let!(:api_channel) { create(:channel_api, account: account) }
   let!(:sms_inbox) { create(:inbox, channel: sms_channel, account: account) }
+  let!(:api_inbox) { create(:inbox, channel: api_channel, account: account) }
   let(:contact) { create(:contact, account: account) }
-  let(:contact_inbox) { create(:contact_inbox, contact: contact, inbox: sms_inbox) }
+  let(:contact_sms_inbox) { create(:contact_inbox, contact: contact, inbox: sms_inbox) }
+  let(:contact_api_inbox) { create(:contact_inbox, contact: contact, inbox: api_inbox) }
 
   describe '#perform' do
-    it 'creates conversation' do
+    it 'creates sms conversation' do
       conversation = described_class.new(
-        contact_inbox: contact_inbox,
+        contact_inbox: contact_sms_inbox,
         params: {}
       ).perform
 
-      expect(conversation.contact_inbox_id).to eq(contact_inbox.id)
+      expect(conversation.contact_inbox_id).to eq(contact_sms_inbox.id)
     end
 
-    context 'when lock_to_single_conversation is true for inbox' do
+    it 'creates api conversation' do
+      conversation = described_class.new(
+        contact_inbox: contact_api_inbox,
+        params: {}
+      ).perform
+
+      expect(conversation.contact_inbox_id).to eq(contact_api_inbox.id)
+    end
+
+    context 'when lock_to_single_conversation is true for sms inbox' do
       before do
         sms_inbox.update!(lock_to_single_conversation: true)
       end
 
-      it 'creates conversation when existing conversation is not present' do
+      it 'creates sms conversation when existing conversation is not present' do
         conversation = described_class.new(
-          contact_inbox: contact_inbox,
+          contact_inbox: contact_sms_inbox,
           params: {}
         ).perform
 
-        expect(conversation.contact_inbox_id).to eq(contact_inbox.id)
+        expect(conversation.contact_inbox_id).to eq(contact_sms_inbox.id)
       end
 
-      it 'returns last from existing conversations when existing conversation is not present' do
-        create(:conversation, contact_inbox: contact_inbox)
-        existing_conversation = create(:conversation, contact_inbox: contact_inbox)
+      it 'returns last from existing sms conversations when existing conversation is not present' do
+        create(:conversation, contact_inbox: contact_sms_inbox)
+        existing_conversation = create(:conversation, contact_inbox: contact_sms_inbox)
         conversation = described_class.new(
-          contact_inbox: contact_inbox,
+          contact_inbox: contact_sms_inbox,
+          params: {}
+        ).perform
+
+        expect(conversation.id).to eq(existing_conversation.id)
+      end
+    end
+
+    context 'when lock_to_single_conversation is true for api inbox' do
+      before do
+        api_inbox.update!(lock_to_single_conversation: true)
+      end
+
+      it 'creates conversation when existing api conversation is not present' do
+        conversation = described_class.new(
+          contact_inbox: contact_api_inbox,
+          params: {}
+        ).perform
+
+        expect(conversation.contact_inbox_id).to eq(contact_api_inbox.id)
+      end
+
+      it 'returns last from existing api conversations when existing conversation is not present' do
+        create(:conversation, contact_inbox: contact_api_inbox)
+        existing_conversation = create(:conversation, contact_inbox: contact_api_inbox)
+        conversation = described_class.new(
+          contact_inbox: contact_api_inbox,
           params: {}
         ).perform
 

From aebcbb63e489921c53c297964ea45db1400480e1 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 9 Dec 2024 17:48:46 -0800
Subject: [PATCH 53/74] chore(deps): bump nanoid from 3.3.7 to 3.3.8 (#10565)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps [nanoid](https://github.com/ai/nanoid) from 3.3.7 to 3.3.8.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ai/nanoid/blob/main/CHANGELOG.md">nanoid's
changelog</a>.</em></p>
<blockquote>
<h2>3.3.8</h2>
<ul>
<li>Fixed a way to break Nano ID by passing non-integer size (by <a
href="https://github.com/myndzi"><code>@​myndzi</code></a>).</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/ai/nanoid/commit/3044cd5e73f4cf31795f61f6e6b961c8c0a5c744"><code>3044cd5</code></a>
Release 3.3.8 version</li>
<li><a
href="https://github.com/ai/nanoid/commit/4fe34959c34e5b3573889ed4f24fe91d1d3e7231"><code>4fe3495</code></a>
Update size limit</li>
<li><a
href="https://github.com/ai/nanoid/commit/d643045f40d6dc8afa000a644d857da1436ed08c"><code>d643045</code></a>
Fix pool pollution, infinite loop (<a
href="https://redirect.github.com/ai/nanoid/issues/510">#510</a>)</li>
<li>See full diff in <a
href="https://github.com/ai/nanoid/compare/3.3.7...3.3.8">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=nanoid&package-manager=npm_and_yarn&previous-version=3.3.7&new-version=3.3.8)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 pnpm-lock.yaml | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5642db061..03fac16f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3668,11 +3668,6 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -9073,8 +9068,6 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  nanoid@3.3.7: {}
-
   nanoid@3.3.8: {}
 
   nanoid@5.0.8: {}
@@ -9564,7 +9557,7 @@ snapshots:
 
   postcss@8.4.47:
     dependencies:
-      nanoid: 3.3.7
+      nanoid: 3.3.8
       picocolors: 1.1.0
       source-map-js: 1.2.1
 

From 1b0e94ec95a43b814d39ef17aab446db435c552e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:53:24 +0530
Subject: [PATCH 54/74] feat: Flag icon component (#10564)

---
 .../Contacts/ContactsCard/ContactsCard.vue    | 27 ++++--
 .../dashboard/components-next/flag/Flag.vue   | 24 +++++
 .../components-next/flag/story/Flag.story.vue | 93 +++++++++++++++++++
 .../conversation/contact/ContactInfo.vue      |  9 +-
 .../conversation/contact/ContactInfoRow.vue   |  5 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  8 ++
 7 files changed, 153 insertions(+), 14 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/flag/Flag.vue
 create mode 100644 app/javascript/dashboard/components-next/flag/story/Flag.story.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
index 9875ae2ac..a3b0bf37c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -6,6 +6,7 @@ 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({
@@ -56,13 +57,19 @@ const countryDetails = computed(() => {
 
   if (!activeCountry) return null;
 
-  const parts = [
-    activeCountry.emoji,
-    city ? `${city},` : null,
-    activeCountry.name,
-  ].filter(Boolean);
+  return {
+    countryCode: activeCountry.id,
+    city: city ? `${city},` : null,
+    name: activeCountry.name,
+  };
+});
 
-  return parts.length ? parts.join(' ') : null;
+const formattedLocation = computed(() => {
+  if (!countryDetails.value) return '';
+
+  return [countryDetails.value.city, countryDetails.value.name]
+    .filter(Boolean)
+    .join(' ');
 });
 
 const handleFormUpdate = updatedData => {
@@ -114,8 +121,12 @@ 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="text-sm truncate text-n-slate-11">
-            {{ countryDetails }}
+          <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>
           <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
           <Button
diff --git a/app/javascript/dashboard/components-next/flag/Flag.vue b/app/javascript/dashboard/components-next/flag/Flag.vue
new file mode 100644
index 000000000..5868ce552
--- /dev/null
+++ b/app/javascript/dashboard/components-next/flag/Flag.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { h, defineProps } from 'vue';
+
+const props = defineProps({
+  country: { type: String, required: true },
+  squared: { type: Boolean, default: false },
+});
+
+const renderFlag = () => {
+  const classes = ['fi', `fi-${props.country.toLowerCase()}`, 'flex-shrink-0'];
+  if (props.squared) {
+    classes.push('fis');
+  }
+  return h('span', { class: classes });
+};
+</script>
+
+<template>
+  <component :is="renderFlag" />
+</template>
+
+<style>
+@import 'flag-icons/css/flag-icons.min.css';
+</style>
diff --git a/app/javascript/dashboard/components-next/flag/story/Flag.story.vue b/app/javascript/dashboard/components-next/flag/story/Flag.story.vue
new file mode 100644
index 000000000..d0b6ddfe7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/flag/story/Flag.story.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue';
+import Flag from '../Flag.vue';
+import countries from 'shared/constants/countries';
+
+const BasicTemplate = {
+  components: { Flag },
+  props: {
+    country: {
+      type: String,
+      default: 'us',
+    },
+    squared: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  template: `
+    <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+      <Flag :country="country" :squared="squared" />
+    </div>
+  `,
+};
+
+const SizeVariants = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+      <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+        <Flag country="in" class="!size-4" :squared="isSquared" />
+        <Flag country="in" class="!size-6" :squared="isSquared" />
+        <Flag country="in" class="!size-8" :squared="isSquared" />
+        <Flag country="in" class="!size-10" :squared="isSquared" />
+      </div>
+    </div>
+  `,
+};
+
+const AllFlags = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { countries, isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+
+      <div class="grid grid-cols-2 gap-4 p-4 border rounded border-n-strong md:grid-cols-3 lg:grid-cols-4">
+        <div 
+          v-for="country in countries" 
+          :key="country.id"
+          class="flex items-center gap-2 px-4 py-2 border rounded border-n-strong"
+        >
+          <Flag 
+            :country="country.id" 
+            :squared="isSquared"
+            class="size-6" 
+          />
+          <span class="text-sm">{{ country.name }}</span>
+        </div>
+      </div>
+    </div>
+  `,
+};
+</script>
+
+<template>
+  <Story title="Components/Flag">
+    <Variant title="Basic Usage">
+      <BasicTemplate country="us" :squared="false" />
+    </Variant>
+
+    <Variant title="Size Variants">
+      <SizeVariants />
+    </Variant>
+
+    <Variant title="All Flags">
+      <AllFlags />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index ffc7155f5..10b1b52b9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -9,7 +9,6 @@ import SocialIcons from './SocialIcons.vue';
 import EditContact from './EditContact.vue';
 import NewConversation from './NewConversation.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
-import { getCountryFlag } from 'dashboard/helper/flag';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   isAConversationRoute,
@@ -127,8 +126,12 @@ export default {
     },
     findCountryFlag(countryCode, cityAndCountry) {
       try {
-        const countryFlag = countryCode ? getCountryFlag(countryCode) : '🌎';
-        return `${cityAndCountry} ${countryFlag}`;
+        if (!countryCode) {
+          return `${cityAndCountry} 🌎`;
+        }
+
+        const code = countryCode?.toLowerCase();
+        return `${cityAndCountry} <span class="fi fi-${code} size-3.5"></span>`;
       } catch (error) {
         return '';
       }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 3924ec22d..80383b840 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -87,10 +87,9 @@ export default {
       />
       <span
         v-if="value"
+        v-dompurify-html="value"
         class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
-      >
-        {{ value }}
-      </span>
+      />
       <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>
diff --git a/package.json b/package.json
index 08a9d0bf2..d4a8d2c94 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
     "dompurify": "3.1.6",
+    "flag-icons": "^7.2.3",
     "floating-vue": "^5.2.2",
     "highlight.js": "^11.10.0",
     "idb": "^8.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03fac16f7..ae1eb3d45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -121,6 +121,9 @@ importers:
       dompurify:
         specifier: 3.1.6
         version: 3.1.6
+      flag-icons:
+        specifier: ^7.2.3
+        version: 7.2.3
       floating-vue:
         specifier: ^5.2.2
         version: 5.2.2(vue@3.5.12(typescript@5.6.2))
@@ -2854,6 +2857,9 @@ packages:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  flag-icons@7.2.3:
+    resolution: {integrity: sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==}
+
   flat-cache@3.1.0:
     resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
     engines: {node: '>=12.0.0'}
@@ -8159,6 +8165,8 @@ snapshots:
       locate-path: 7.2.0
       path-exists: 5.0.0
 
+  flag-icons@7.2.3: {}
+
   flat-cache@3.1.0:
     dependencies:
       flatted: 3.2.9

From 9a405d65baa3f79913971f4aa35e5ff5c98a3f39 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Wed, 11 Dec 2024 01:08:25 +0530
Subject: [PATCH 55/74] fix: RemoveStaleRedisKeys service (#10562)

Fixes issues with RemoveStaleRedisKeys service

Co-authored-by: Sojan <sojan@pepalo.com>
---
 .../internal/process_stale_redis_keys_job.rb   |  3 ++-
 .../internal/remove_stale_redis_keys_job.rb    |  8 +++++---
 .../remove_stale_redis_keys_service.rb         | 11 ++++++++---
 .../process_stale_redis_keys_job_spec.rb       | 15 +++++++++++++++
 .../remove_stale_redis_keys_job_spec.rb        | 13 +++++++++++++
 .../remove_stale_redis_keys_service_spec.rb    | 18 ++++++++++++++++++
 6 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 spec/jobs/internal/process_stale_redis_keys_job_spec.rb
 create mode 100644 spec/jobs/internal/remove_stale_redis_keys_job_spec.rb
 create mode 100644 spec/services/internal/remove_stale_redis_keys_service_spec.rb

diff --git a/app/jobs/internal/process_stale_redis_keys_job.rb b/app/jobs/internal/process_stale_redis_keys_job.rb
index 3afb3b434..30c3cffed 100644
--- a/app/jobs/internal/process_stale_redis_keys_job.rb
+++ b/app/jobs/internal/process_stale_redis_keys_job.rb
@@ -6,6 +6,7 @@ class Internal::ProcessStaleRedisKeysJob < ApplicationJob
   queue_as :low
 
   def perform(account)
-    Internal::RemoveStaleRedisKeysService.new(account_id: account.id).perform
+    removed_count = Internal::RemoveStaleRedisKeysService.new(account_id: account.id).perform
+    Rails.logger.info "Successfully cleaned up Redis keys for account #{account.id} (removed #{removed_count} keys)"
   end
 end
diff --git a/app/jobs/internal/remove_stale_redis_keys_job.rb b/app/jobs/internal/remove_stale_redis_keys_job.rb
index 667fa398b..da3892b3c 100644
--- a/app/jobs/internal/remove_stale_redis_keys_job.rb
+++ b/app/jobs/internal/remove_stale_redis_keys_job.rb
@@ -6,9 +6,11 @@ class Internal::RemoveStaleRedisKeysJob < ApplicationJob
   queue_as :scheduled_jobs
 
   def perform
-    Account.find_each do |account|
-      Rails.logger.info "Enqueuing ProcessStaleRedisKeysJob for account #{account.id}"
-      Internal::ProcessStaleRedisKeysJob.perform_later(account)
+    Account.find_in_batches(batch_size: 100) do |accounts|
+      accounts.each do |account|
+        Rails.logger.info "Enqueuing ProcessStaleRedisKeysJob for account #{account.id}"
+        Internal::ProcessStaleRedisKeysJob.perform_later(account)
+      end
     end
   end
 end
diff --git a/app/services/internal/remove_stale_redis_keys_service.rb b/app/services/internal/remove_stale_redis_keys_service.rb
index a3e1da207..553cc6c6a 100644
--- a/app/services/internal/remove_stale_redis_keys_service.rb
+++ b/app/services/internal/remove_stale_redis_keys_service.rb
@@ -1,10 +1,15 @@
 class Internal::RemoveStaleRedisKeysService
   pattr_initialize [:account_id!]
 
-  def perform(account_id)
-    range_start = (Time.zone.now - PRESENCE_DURATION).to_i
+  def perform
+    Rails.logger.info "Removing redis stale keys for account #{@account_id}"
+    range_start = (Time.zone.now - OnlineStatusTracker::PRESENCE_DURATION).to_i
     # exclusive minimum score is specified by prefixing (
     # we are clearing old records because this could clogg up the sorted set
-    ::Redis::Alfred.zremrangebyscore(presence_key(account_id, 'Contact'), '-inf', "(#{range_start}")
+    ::Redis::Alfred.zremrangebyscore(
+      OnlineStatusTracker.presence_key(@account_id, 'Contact'),
+      '-inf',
+      "(#{range_start}"
+    )
   end
 end
diff --git a/spec/jobs/internal/process_stale_redis_keys_job_spec.rb b/spec/jobs/internal/process_stale_redis_keys_job_spec.rb
new file mode 100644
index 000000000..6189b1b5c
--- /dev/null
+++ b/spec/jobs/internal/process_stale_redis_keys_job_spec.rb
@@ -0,0 +1,15 @@
+require 'rails_helper'
+
+RSpec.describe Internal::ProcessStaleRedisKeysJob do
+  let(:account) { create(:account) }
+
+  describe '#perform' do
+    it 'calls the RemoveStaleRedisKeysService with the correct account ID' do
+      expect(Internal::RemoveStaleRedisKeysService).to receive(:new)
+        .with(account_id: account.id)
+        .and_call_original
+
+      described_class.perform_now(account)
+    end
+  end
+end
diff --git a/spec/jobs/internal/remove_stale_redis_keys_job_spec.rb b/spec/jobs/internal/remove_stale_redis_keys_job_spec.rb
new file mode 100644
index 000000000..a1b98c9db
--- /dev/null
+++ b/spec/jobs/internal/remove_stale_redis_keys_job_spec.rb
@@ -0,0 +1,13 @@
+require 'rails_helper'
+
+RSpec.describe Internal::RemoveStaleRedisKeysJob do
+  let(:account) { create(:account) }
+
+  describe '#perform' do
+    it 'enqueues ProcessStaleRedisKeysJob for the account' do
+      expect(Internal::ProcessStaleRedisKeysJob).to receive(:perform_later).with(account)
+
+      described_class.perform_now
+    end
+  end
+end
diff --git a/spec/services/internal/remove_stale_redis_keys_service_spec.rb b/spec/services/internal/remove_stale_redis_keys_service_spec.rb
new file mode 100644
index 000000000..75d182aab
--- /dev/null
+++ b/spec/services/internal/remove_stale_redis_keys_service_spec.rb
@@ -0,0 +1,18 @@
+require 'rails_helper'
+
+RSpec.describe Internal::RemoveStaleRedisKeysService, type: :service do
+  let(:account_id) { 1 }
+  let(:service) { described_class.new(account_id: account_id) }
+
+  describe '#perform' do
+    it 'removes stale Redis keys for the specified account' do
+      presence_key = OnlineStatusTracker.presence_key(account_id, 'Contact')
+
+      # Mock Redis calls
+      expect(Redis::Alfred).to receive(:zremrangebyscore)
+        .with(presence_key, '-inf', anything)
+
+      service.perform
+    end
+  end
+end

From 10a03339801492ab9fa91ed513770c6dbe7be031 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Tue, 10 Dec 2024 15:36:48 -0800
Subject: [PATCH 56/74] feat(ee): Add copilot integration (v1) to the
 conversation sidebar (#10566)

---
 .../integrations/captain_controller.rb        | 29 ++++++-
 app/javascript/dashboard/api/integrations.js  |  4 +
 .../dashboard/assets/scss/_woot.scss          | 26 ++++++
 .../components-next/copilot/Copilot.story.vue | 60 ++++++++++++++
 .../components-next/copilot/Copilot.vue       | 68 ++++++++++++++++
 .../copilot/CopilotAgentMessage.vue           | 31 ++++++++
 .../copilot/CopilotAssistantMessage.vue       | 27 +++++++
 .../components-next/copilot/CopilotInput.vue  | 34 ++++++++
 .../copilot/CopilotLoader.story.vue           | 12 +++
 .../components-next/copilot/CopilotLoader.vue | 22 ++++++
 .../dashboard/components/ChatList.vue         | 11 +--
 .../components/copilot/CopilotContainer.vue   | 58 ++++++++++++++
 .../widgets/conversation/ConversationBox.vue  | 26 ++----
 .../conversation/ConversationSidebar.vue      | 79 +++++++++++++++++++
 .../i18n/locale/en/conversation.json          |  4 +
 .../i18n/locale/en/integrations.json          |  8 ++
 .../dashboard/conversation/ContactPanel.vue   |  4 +-
 .../conversation/contact/ContactInfo.vue      |  2 +-
 app/models/concerns/llm_formattable.rb        |  7 ++
 app/models/conversation.rb                    |  1 +
 .../conversation_llm_formatter.rb             | 32 ++++++++
 .../llm_formatter/default_llm_formatter.rb    |  9 +++
 .../llm_text_formatter_service.rb             | 20 +++++
 config/routes.rb                              |  1 +
 .../integrations/captain_controller_spec.rb   | 45 ++++++++++-
 .../conversation_llm_formatter_spec.rb        | 51 ++++++++++++
 theme/colors.js                               | 15 ++++
 27 files changed, 650 insertions(+), 36 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/copilot/Copilot.story.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/Copilot.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotInput.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotLoader.vue
 create mode 100644 app/javascript/dashboard/components/copilot/CopilotContainer.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
 create mode 100644 app/models/concerns/llm_formattable.rb
 create mode 100644 app/services/llm_formatter/conversation_llm_formatter.rb
 create mode 100644 app/services/llm_formatter/default_llm_formatter.rb
 create mode 100644 app/services/llm_formatter/llm_text_formatter_service.rb
 create mode 100644 spec/services/llm_formatter/conversation_llm_formatter_spec.rb

diff --git a/app/controllers/api/v1/accounts/integrations/captain_controller.rb b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
index 15e81b726..6813d14b5 100644
--- a/app/controllers/api/v1/accounts/integrations/captain_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
@@ -2,10 +2,22 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
   before_action :hook
 
   def proxy
+    request_url = build_request_url(request_path)
     response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
     render plain: response.body, status: response.code
   end
 
+  def copilot
+    request_url = build_request_url(build_request_path("/assistants/#{hook.settings['assistant_id']}/copilot"))
+    params = {
+      previous_messages: copilot_params[:previous_messages],
+      conversation_history: conversation_history,
+      message: copilot_params[:message]
+    }
+    response = HTTParty.send(:post, request_url, body: params.to_json, headers: headers)
+    render plain: response.body, status: response.code
+  end
+
   private
 
   def headers
@@ -17,15 +29,19 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     }
   end
 
+  def build_request_path(route)
+    "api/accounts/#{hook.settings['account_id']}#{route}"
+  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}"
+    build_request_path(request_route)
   end
 
-  def request_url
+  def build_request_url(request_path)
     base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
     URI.join(base_url, request_path).to_s
   end
@@ -47,6 +63,15 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     request_route.start_with?('/') ? request_route : "/#{request_route}"
   end
 
+  def conversation_history
+    conversation = Current.account.conversations.find_by!(display_id: copilot_params[:conversation_id])
+    conversation.to_llm_text
+  end
+
+  def copilot_params
+    params.permit(:previous_messages, :conversation_id, :message)
+  end
+
   def permitted_params
     params.permit(:method, :route, body: {})
   end
diff --git a/app/javascript/dashboard/api/integrations.js b/app/javascript/dashboard/api/integrations.js
index 59a3e244a..b78a2ea7e 100644
--- a/app/javascript/dashboard/api/integrations.js
+++ b/app/javascript/dashboard/api/integrations.js
@@ -36,6 +36,10 @@ class IntegrationsAPI extends ApiClient {
   requestCaptain(body) {
     return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
   }
+
+  requestCaptainCopilot(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/copilot`, body);
+  }
 }
 
 export default new IntegrationsAPI();
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index e3474e616..fdd467f5f 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -72,6 +72,19 @@
     --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;
@@ -147,6 +160,19 @@
     --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;
diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.story.vue b/app/javascript/dashboard/components-next/copilot/Copilot.story.vue
new file mode 100644
index 000000000..ece5ec31f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.story.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue';
+import Copilot from './Copilot.vue';
+
+const supportAgent = {
+  available_name: 'Pranav Raj',
+  avatar_url:
+    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
+};
+
+const messages = ref([
+  {
+    id: 1,
+    role: 'user',
+    content: 'Hi there! How can I help you today?',
+  },
+  {
+    id: 2,
+    role: 'assistant',
+    content:
+      "Hello! I'm the AI assistant. I'll be helping the support team today.",
+  },
+]);
+
+const isCaptainTyping = ref(false);
+
+const sendMessage = message => {
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+
+  // Simulate AI response
+  isCaptainTyping.value = true;
+  setTimeout(() => {
+    isCaptainTyping.value = false;
+    messages.value.push({
+      id: messages.value.length + 1,
+      role: 'assistant',
+      content: 'This is a simulated AI response.',
+    });
+  }, 2000);
+};
+</script>
+
+<template>
+  <Story
+    title="Captain/Copilot"
+    :layout="{ type: 'grid', width: '400px', height: '800px' }"
+  >
+    <Copilot
+      :support-agent="supportAgent"
+      :messages="messages"
+      :is-captain-typing="isCaptainTyping"
+      @send-message="sendMessage"
+    />
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.vue b/app/javascript/dashboard/components-next/copilot/Copilot.vue
new file mode 100644
index 000000000..3839532f2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.vue
@@ -0,0 +1,68 @@
+<script setup>
+import CopilotInput from './CopilotInput.vue';
+import CopilotLoader from './CopilotLoader.vue';
+import CopilotAgentMessage from './CopilotAgentMessage.vue';
+import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
+import { nextTick, ref, watch } from 'vue';
+
+const props = defineProps({
+  supportAgent: {
+    type: Object,
+    default: () => ({}),
+  },
+  messages: {
+    type: Array,
+    default: () => [],
+  },
+  isCaptainTyping: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['sendMessage']);
+
+const COPILOT_USER_ROLES = ['assistant', 'system'];
+
+const sendMessage = message => {
+  emit('sendMessage', message);
+};
+const chatContainer = ref(null);
+
+const scrollToBottom = async () => {
+  await nextTick();
+  if (chatContainer.value) {
+    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+  }
+};
+
+watch(
+  [() => props.messages, () => props.isCaptainTyping],
+  () => {
+    scrollToBottom();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col ]mx-auto h-full text-sm leading-6 tracking-tight">
+    <div ref="chatContainer" class="flex-1 overflow-y-auto py-4 space-y-6 px-4">
+      <template v-for="message in messages" :key="message.id">
+        <CopilotAgentMessage
+          v-if="message.role === 'user'"
+          :support-agent="supportAgent"
+          :message="message"
+        />
+        <CopilotAssistantMessage
+          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
+          :message="message"
+        />
+      </template>
+
+      <CopilotLoader v-if="isCaptainTyping" />
+    </div>
+
+    <CopilotInput class="mx-3 mb-4 mt-px" @send="sendMessage" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue b/app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue
new file mode 100644
index 000000000..ef8c2faf4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue
@@ -0,0 +1,31 @@
+<script setup>
+import Avatar from '../avatar/Avatar.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  supportAgent: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <Avatar
+      :name="supportAgent.available_name"
+      :src="supportAgent.avatar_url"
+      :size="24"
+      rounded-full
+    />
+    <div class="space-y-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
+      <div class="break-words">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue b/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
new file mode 100644
index 000000000..a14508150
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
@@ -0,0 +1,27 @@
+<script setup>
+import Avatar from '../avatar/Avatar.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <Avatar
+      name="Captain Copilot"
+      icon-name="i-woot-captain"
+      :size="24"
+      rounded-full
+    />
+    <div class="flex flex-col gap-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
+      <div class="break-words">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotInput.vue b/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
new file mode 100644
index 000000000..bf14945b5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['send']);
+const message = ref('');
+
+const sendMessage = () => {
+  if (message.value.trim()) {
+    emit('send', message.value);
+    message.value = '';
+  }
+};
+</script>
+
+<template>
+  <form
+    class="border border-n-weak bg-n-alpha-3 rounded-lg h-12 flex"
+    @submit.prevent="sendMessage"
+  >
+    <input
+      v-model="message"
+      type="text"
+      :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
+      class="w-full reset-base bg-transparent px-4 py-3 text-n-slate-11 text-sm"
+      @keyup.enter="sendMessage"
+    />
+    <button
+      class="h-auto w-12 flex items-center justify-center text-n-slate-11"
+      type="submit"
+    >
+      <i class="i-ph-arrow-up" />
+    </button>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue b/app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue
new file mode 100644
index 000000000..3a5de84c7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue
@@ -0,0 +1,12 @@
+<script setup>
+import CopilotLoader from './CopilotLoader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/CopilotLoader"
+    :layout="{ type: 'grid', width: '400px', height: '800px' }"
+  >
+    <CopilotLoader />
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotLoader.vue b/app/javascript/dashboard/components-next/copilot/CopilotLoader.vue
new file mode 100644
index 000000000..723439f33
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotLoader.vue
@@ -0,0 +1,22 @@
+<script>
+// Copilot Loader Component
+</script>
+
+<template>
+  <div class="flex justify-start">
+    <div class="flex items-center space-x-2">
+      <span class="text-n-iris-11 font-medium">
+        {{ $t('CAPTAIN.COPILOT.LOADER') }}
+      </span>
+      <div class="flex space-x-1">
+        <div
+          class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce [animation-delay:-0.3s]"
+        />
+        <div
+          class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce [animation-delay:-0.15s]"
+        />
+        <div class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 0108e02df..953d5f2cc 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -785,7 +785,7 @@ watch(conversationFilters, (newVal, oldVal) => {
     class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
     :class="[
       { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
+      isOnExpandedLayout ? 'basis-full' : 'w-[360px]',
     ]"
   >
     <slot />
@@ -916,12 +916,3 @@ watch(conversationFilters, (newVal, oldVal) => {
     </Teleport>
   </div>
 </template>
-
-<style scoped>
-@tailwind components;
-@layer components {
-  .flex-basis-clamp {
-    flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/copilot/CopilotContainer.vue b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
new file mode 100644
index 000000000..940408ef8
--- /dev/null
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -0,0 +1,58 @@
+<script setup>
+import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
+import IntegrationsAPI from 'dashboard/api/integrations';
+import { useMapGetter } from 'dashboard/composables/store';
+import { ref } from 'vue';
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+const currentUser = useMapGetter('getCurrentUser');
+const messages = ref([]);
+
+const isCaptainTyping = ref(false);
+
+const sendMessage = async message => {
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+  isCaptainTyping.value = true;
+
+  try {
+    const { data } = await IntegrationsAPI.requestCaptainCopilot({
+      previous_history: messages.value
+        .map(m => ({
+          role: m.role,
+          content: m.content,
+        }))
+        .slice(0, -1),
+      message,
+      conversation_id: props.conversationId,
+    });
+    messages.value.push({
+      id: new Date().getTime(),
+      role: 'assistant',
+      content: data.message,
+    });
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log(error);
+  } finally {
+    isCaptainTyping.value = false;
+  }
+};
+</script>
+
+<template>
+  <Copilot
+    :messages="messages"
+    :support-agent="currentUser"
+    :is-captain-typing="isCaptainTyping"
+    @send-message="sendMessage"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 210357a8b..f56b2a581 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -1,14 +1,14 @@
 <script>
 import { mapGetters } from 'vuex';
-import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
 import ConversationHeader from './ConversationHeader.vue';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
 import EmptyState from './EmptyState/EmptyState.vue';
 import MessagesView from './MessagesView.vue';
+import ConversationSidebar from './ConversationSidebar.vue';
 
 export default {
   components: {
-    ContactPanel,
+    ConversationSidebar,
     ConversationHeader,
     DashboardAppFrame,
     EmptyState,
@@ -138,17 +138,11 @@ export default {
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
-      <div
-        v-show="showContactPanel"
-        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
-      >
-        <ContactPanel
-          v-if="showContactPanel"
-          :conversation-id="currentChat.id"
-          :inbox-id="currentChat.inbox_id"
-          :on-toggle="onToggleContactPanel"
-        />
-      </div>
+      <ConversationSidebar
+        v-if="showContactPanel"
+        :current-chat="currentChat"
+        @toggle-contact-panel="onToggleContactPanel"
+      />
     </div>
     <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"
@@ -180,10 +174,4 @@ export default {
     }
   }
 }
-
-.conversation-sidebar-wrap {
-  &::v-deep .contact--panel {
-    @apply w-full h-full max-w-full;
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
new file mode 100644
index 000000000..e4b46333c
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed, ref } from 'vue';
+import CopilotContainer from '../../copilot/CopilotContainer.vue';
+import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  currentChat: {
+    required: true,
+    type: Object,
+  },
+});
+
+const emit = defineEmits(['toggleContactPanel']);
+
+const getters = useStoreGetters();
+
+const captainIntegration = computed(() =>
+  getters['integrations/getIntegration'].value('captain', null)
+);
+const { t } = useI18n();
+
+const CONTACT_TABS_OPTIONS = [
+  { key: 'CONTACT', value: 'contact' },
+  { key: 'COPILOT', value: 'copilot' },
+];
+
+const tabs = computed(() => {
+  return CONTACT_TABS_OPTIONS.map(tab => ({
+    label: t(`CONVERSATION.SIDEBAR.${tab.key}`),
+    value: tab.value,
+  }));
+});
+const activeTab = ref(0);
+const toggleContactPanel = () => {
+  emit('toggleContactPanel');
+};
+
+const handleTabChange = selectedTab => {
+  activeTab.value = tabs.value.findIndex(
+    tabItem => tabItem.value === selectedTab.value
+  );
+};
+
+const showCopilotTab = computed(() => {
+  return captainIntegration.value && captainIntegration.value.enabled;
+});
+</script>
+
+<template>
+  <div
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] flex flex-col bg-n-solid-2"
+  >
+    <div v-if="showCopilotTab" class="p-2">
+      <TabBar
+        :tabs="tabs"
+        :initial-active-tab="activeTab"
+        class="w-full [&>button]:w-full"
+        @tab-changed="handleTabChange"
+      />
+    </div>
+    <div class="overflow-auto flex flex-1">
+      <ContactPanel
+        v-if="!activeTab"
+        :conversation-id="currentChat.id"
+        :inbox-id="currentChat.inbox_id"
+        :on-toggle="toggleContactPanel"
+      />
+      <CopilotContainer
+        v-else-if="activeTab === 1 && showCopilotTab"
+        :key="currentChat.id"
+        :conversation-id="currentChat.id"
+        class="flex-1"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 9a6a64d6d..f9c3b784a 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -219,6 +219,10 @@
         "DELETE": "Delete",
         "CANCEL": "Cancel"
       }
+    },
+    "SIDEBAR": {
+      "CONTACT": "Contact",
+      "COPILOT": "Copilot"
     }
   },
   "EMAIL_TRANSCRIPT": {
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index f6e8cbc3a..e04164902 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -299,5 +299,13 @@
         "ERROR": "There was an error unlinking the issue, please try again"
       }
     }
+  },
+  "CAPTAIN": {
+    "NAME": "Captain",
+    "COPILOT": {
+      "SEND_MESSAGE": "Send message...",
+      "LOADER": "Captain is thinking",
+      "YOU": "You"
+    }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index e998a85a1..8739b4f26 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -92,9 +92,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
-  >
+  <div class="w-full">
     <ContactInfo
       :contact="contact"
       :channel-type="channelType"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 10b1b52b9..f42672ddd 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -174,7 +174,7 @@ export default {
 </script>
 
 <template>
-  <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
+  <div class="relative items-center w-full p-4">
     <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
       <div class="flex flex-row justify-between">
         <Thumbnail
diff --git a/app/models/concerns/llm_formattable.rb b/app/models/concerns/llm_formattable.rb
new file mode 100644
index 000000000..086ccc46a
--- /dev/null
+++ b/app/models/concerns/llm_formattable.rb
@@ -0,0 +1,7 @@
+module LlmFormattable
+  extend ActiveSupport::Concern
+
+  def to_llm_text
+    LlmFormatter::LlmTextFormatterService.new(self).format
+  end
+end
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index df4bbf31c..ba60f5295 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -51,6 +51,7 @@
 
 class Conversation < ApplicationRecord
   include Labelable
+  include LlmFormattable
   include AssignmentHandler
   include AutoAssignmentHandler
   include ActivityMessageHandler
diff --git a/app/services/llm_formatter/conversation_llm_formatter.rb b/app/services/llm_formatter/conversation_llm_formatter.rb
new file mode 100644
index 000000000..07afc2cac
--- /dev/null
+++ b/app/services/llm_formatter/conversation_llm_formatter.rb
@@ -0,0 +1,32 @@
+class LlmFormatter::ConversationLlmFormatter < LlmFormatter::DefaultLlmFormatter
+  def format
+    sections = []
+    sections << "Conversation ID: ##{@record.display_id}"
+    sections << "Channel: #{@record.inbox.channel.name}"
+    sections << 'Message History:'
+    sections << if @record.messages.any?
+                  build_messages
+                else
+                  'No messages in this conversation'
+                end
+
+    sections.join("\n")
+  end
+
+  private
+
+  def build_messages
+    return "No messages in this conversation\n" if @record.messages.empty?
+
+    message_text = ''
+    @record.messages.chat.order(created_at: :asc).each do |message|
+      message_text << format_message(message)
+    end
+    message_text
+  end
+
+  def format_message(message)
+    sender = message.message_type == 'incoming' ? 'User' : 'Support agent'
+    "#{sender}: #{message.content}\n"
+  end
+end
diff --git a/app/services/llm_formatter/default_llm_formatter.rb b/app/services/llm_formatter/default_llm_formatter.rb
new file mode 100644
index 000000000..b82a039cf
--- /dev/null
+++ b/app/services/llm_formatter/default_llm_formatter.rb
@@ -0,0 +1,9 @@
+class LlmFormatter::DefaultLlmFormatter
+  def initialize(record)
+    @record = record
+  end
+
+  def format
+    # override this
+  end
+end
diff --git a/app/services/llm_formatter/llm_text_formatter_service.rb b/app/services/llm_formatter/llm_text_formatter_service.rb
new file mode 100644
index 000000000..0f1f37cf8
--- /dev/null
+++ b/app/services/llm_formatter/llm_text_formatter_service.rb
@@ -0,0 +1,20 @@
+class LlmFormatter::LlmTextFormatterService
+  def initialize(record)
+    @record = record
+  end
+
+  def format
+    formatter_class = find_formatter
+    formatter_class.new(@record).format
+  end
+
+  private
+
+  def find_formatter
+    formatter_name = "LlmFormatter::#{@record.class.name}LlmFormatter"
+    formatter_class = formatter_name.safe_constantize
+    raise FormatterNotFoundError, "No formatter found for #{@record.class.name}" unless formatter_class
+
+    formatter_class
+  end
+end
diff --git a/config/routes.rb b/config/routes.rb
index 1c913155b..d33a40827 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -220,6 +220,7 @@ Rails.application.routes.draw do
             resource :captain, controller: 'captain', only: [] do
               collection do
                 post :proxy
+                post :copilot
               end
             end
             resources :hooks, only: [:show, :create, :update, :destroy] do
diff --git a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
index 3dfb49294..078736e06 100644
--- a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
@@ -2,13 +2,15 @@ require 'rails_helper'
 
 RSpec.describe 'Captain Integrations API', type: :request do
   let!(:account) { create(:account) }
+  let(:conversation) { create(:conversation, account: account) }
   let!(:agent) { create(:user, account: account, role: :agent) }
   let!(:hook) do
     create(:integrations_hook, account: account, app_id: 'captain', settings: {
              access_token: SecureRandom.hex,
              account_email: Faker::Internet.email,
              assistant_id: '1',
-             account_id: '1'
+             account_id: '1',
+             inbox_ids: []
            })
   end
   let(:captain_api_url) { 'https://captain.example.com/' }
@@ -77,4 +79,45 @@ RSpec.describe 'Captain Integrations API', type: :request do
       end
     end
   end
+
+  describe 'POST /api/v1/accounts/{account.id}/integrations/captain/copilot' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        post copilot_api_v1_account_integrations_captain_url(account_id: account.id),
+             params: { method: 'get', route: 'some_route' },
+             as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      context 'when valid request method and route' do
+        let(:route) { 'assistants/1/copilot' }
+        let(:method) { 'get' }
+
+        it 'proxies the request to Copilot API' do
+          stub_request(:post, "#{captain_api_url}api/accounts/#{hook.settings['account_id']}/#{route}")
+            .with(headers: {
+                    'X-User-Email' => hook.settings['account_email'],
+                    'X-User-Token' => hook.settings['access_token'],
+                    'Content-Type' => 'application/json'
+                  })
+            .to_return(status: 200, body: 'Success', headers: {})
+
+          post copilot_api_v1_account_integrations_captain_url(account_id: account.id),
+               params: {
+                 message: 'hello',
+                 previous_messages: [],
+                 conversation_id: conversation.display_id
+               },
+               headers: agent.create_new_auth_token,
+               as: :json
+
+          expect(response).to have_http_status(:success)
+          expect(response.body).to eq('Success')
+        end
+      end
+    end
+  end
 end
diff --git a/spec/services/llm_formatter/conversation_llm_formatter_spec.rb b/spec/services/llm_formatter/conversation_llm_formatter_spec.rb
new file mode 100644
index 000000000..3838b8126
--- /dev/null
+++ b/spec/services/llm_formatter/conversation_llm_formatter_spec.rb
@@ -0,0 +1,51 @@
+require 'rails_helper'
+
+RSpec.describe LlmFormatter::ConversationLlmFormatter do
+  let(:account) { create(:account) }
+  let(:conversation) { create(:conversation, account: account) }
+  let(:formatter) { described_class.new(conversation) }
+
+  describe '#format' do
+    context 'when conversation has no messages' do
+      it 'returns basic conversation info with no messages' do
+        expected_output = [
+          "Conversation ID: ##{conversation.display_id}",
+          "Channel: #{conversation.inbox.channel.name}",
+          'Message History:',
+          'No messages in this conversation'
+        ].join("\n")
+
+        expect(formatter.format).to eq(expected_output)
+      end
+    end
+
+    context 'when conversation has messages' do
+      it 'formats messages in chronological order with sender labels' do
+        create(
+          :message,
+          conversation: conversation,
+          message_type: 'incoming',
+          content: 'Hello, I need help'
+        )
+
+        create(
+          :message,
+          conversation: conversation,
+          message_type: 'outgoing',
+          content: 'How can I assist you today?'
+        )
+
+        expected_output = [
+          "Conversation ID: ##{conversation.display_id}",
+          "Channel: #{conversation.inbox.channel.name}",
+          'Message History:',
+          'User: Hello, I need help',
+          'Support agent: How can I assist you today?',
+          ''
+        ].join("\n")
+
+        expect(formatter.format).to eq(expected_output)
+      end
+    end
+  end
+end
diff --git a/theme/colors.js b/theme/colors.js
index 150106c65..47fd65c8d 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -300,6 +300,21 @@ export const colors = {
       12: 'rgb(var(--slate-12) / <alpha-value>)',
     },
 
+    iris: {
+      1: 'rgb(var(--iris-1) / <alpha-value>)',
+      2: 'rgb(var(--iris-2) / <alpha-value>)',
+      3: 'rgb(var(--iris-3) / <alpha-value>)',
+      4: 'rgb(var(--iris-4) / <alpha-value>)',
+      5: 'rgb(var(--iris-5) / <alpha-value>)',
+      6: 'rgb(var(--iris-6) / <alpha-value>)',
+      7: 'rgb(var(--iris-7) / <alpha-value>)',
+      8: 'rgb(var(--iris-8) / <alpha-value>)',
+      9: 'rgb(var(--iris-9) / <alpha-value>)',
+      10: 'rgb(var(--iris-10) / <alpha-value>)',
+      11: 'rgb(var(--iris-11) / <alpha-value>)',
+      12: 'rgb(var(--iris-12) / <alpha-value>)',
+    },
+
     ruby: {
       1: 'rgb(var(--ruby-1) / <alpha-value>)',
       2: 'rgb(var(--ruby-2) / <alpha-value>)',

From ccb117d36a2d97135f8a8a26d2d412189f3cf477 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 10 Dec 2024 18:53:43 -0800
Subject: [PATCH 57/74] chore(deps): bump actionpack from 7.0.8.5 to 7.0.8.7
 (#10569)

Bumps [actionpack](https://github.com/rails/rails) from 7.0.8.5 to
7.0.8.7.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/rails/rails/releases">actionpack's
releases</a>.</em></p>
<blockquote>
<h2>7.0.8.7</h2>
<h2>Active Support</h2>
<ul>
<li>No changes.</li>
</ul>
<h2>Active Model</h2>
<ul>
<li>No changes.</li>
</ul>
<h2>Active Record</h2>
<ul>
<li>No changes.</li>
</ul>
<h2>Action View</h2>
<ul>
<li>No changes.</li>
</ul>
<h2>Action Pack</h2>
<ul>
<li>
<p>Add validation to content security policies to disallow spaces and
semicolons.
Developers should use multiple arguments, and different directive
methods instead.</p>
<p>[CVE-2024-54133]</p>
<p><em>Gannon McGibbon</em></p>
</li>
</ul>
<h2>Active Job</h2>
<ul>
<li>No changes.</li>
</ul>
<h2>Action Mailer</h2>
<ul>
<li>No changes.</li>
</ul>
<h2>Action Cable</h2>
<ul>
<li>No changes.</li>
</ul>
<h2>Active Storage</h2>
<ul>
<li>No changes.</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/rails/rails/commit/778eab826538be6da355d848aecaea2245e3b8ce"><code>778eab8</code></a>
Preparing for 7.0.8.7 release</li>
<li><a
href="https://github.com/rails/rails/commit/cb16a3bb515b5d769f73926d9757270ace691f1d"><code>cb16a3b</code></a>
Add CSP directive validation</li>
<li><a
href="https://github.com/rails/rails/commit/bc979c5cf4e29e2aba95b7b13ca53e7a02fddee2"><code>bc979c5</code></a>
Preparing for 7.0.8.6 release</li>
<li>See full diff in <a
href="https://github.com/rails/rails/compare/v7.0.8.5...v7.0.8.7">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=actionpack&package-manager=bundler&previous-version=7.0.8.5&new-version=7.0.8.7)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 Gemfile.lock | 116 +++++++++++++++++++++++++--------------------------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 298d8e041..74cdbeea8 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -33,70 +33,70 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actioncable (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    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)
+    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)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    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)
+    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)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.5)
-      actionview (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionpack (7.0.8.7)
+      actionview (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       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.5)
-      actionpack (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    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)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionview (7.0.8.7)
+      activesupport (= 7.0.8.7)
       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.5)
-      activesupport (= 7.0.8.5)
+    activejob (7.0.8.7)
+      activesupport (= 7.0.8.7)
       globalid (>= 0.3.6)
-    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)
+    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)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    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)
+    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)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.8.5)
+    activesupport (7.0.8.7)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -472,7 +472,7 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.8)
-    minitest (5.25.1)
+    minitest (5.25.4)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -502,14 +502,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.8)
+    nokogiri (1.17.1)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.8-arm64-darwin)
+    nokogiri (1.17.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.8-x86_64-darwin)
+    nokogiri (1.17.1-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.8-x86_64-linux)
+    nokogiri (1.17.1-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -581,20 +581,20 @@ GEM
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    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)
+    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)
       bundler (>= 1.15.0)
-      railties (= 7.0.8.5)
+      railties (= 7.0.8.7)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -602,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.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    railties (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)

From a3290bfd42ab6bd836ebe4a5abc39b5bc62f35bc Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Wed, 11 Dec 2024 08:06:21 -0800
Subject: [PATCH 58/74] fix: Update design of the conversation sidebar,
 chatlist (#10572)

- Increase the sidebar and chatlist width on screens bigger than 2xl
- Fix background of the copilot sidebar
- Increase the breakpoint for hiding chatlist from 1024 to 1200
---
 app/javascript/dashboard/components/ChatList.vue       |  4 ++--
 .../widgets/conversation/ConversationBox.vue           | 10 ++++------
 .../widgets/conversation/ConversationSidebar.vue       |  2 +-
 .../components/widgets/conversation/MessagesView.vue   |  5 ++---
 app/javascript/dashboard/constants/globals.js          |  2 +-
 .../routes/dashboard/conversation/ConversationView.vue | 10 +---------
 6 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 953d5f2cc..796c37451 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -782,10 +782,10 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'w-[360px]',
+      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
     ]"
   >
     <slot />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index f56b2a581..46cdaf221 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -98,8 +98,10 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
-    :class="{ 'with-border-right': !isOnExpandedLayout }"
+    class="conversation-details-wrap bg-n-background"
+    :class="{
+      'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
+    }"
   >
     <ConversationHeader
       v-if="currentChat.id"
@@ -159,10 +161,6 @@ export default {
 <style lang="scss" scoped>
 .conversation-details-wrap {
   @apply flex flex-col min-w-0 w-full;
-
-  &.with-border-right {
-    @apply border-r border-slate-50 dark:border-slate-700;
-  }
 }
 
 .dashboard-app--tabs {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index e4b46333c..3d2509686 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -51,7 +51,7 @@ const showCopilotTab = computed(() => {
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] flex flex-col bg-n-solid-2"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
   >
     <div v-if="showCopilotTab" class="p-2">
       <TabBar
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index ba4d9393f..acfc9b69b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -468,9 +468,7 @@ export default {
         size="tiny"
         color-scheme="secondary"
         class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
-        :class="
-          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
-        "
+        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
@@ -558,6 +556,7 @@ export default {
 
 <style scoped>
 @tailwind components;
+
 @layer components {
   .rounded-bl-calc {
     border-bottom-left-radius: calc(1.5rem + 1px);
diff --git a/app/javascript/dashboard/constants/globals.js b/app/javascript/dashboard/constants/globals.js
index 864e2a6e6..4c731e9d8 100644
--- a/app/javascript/dashboard/constants/globals.js
+++ b/app/javascript/dashboard/constants/globals.js
@@ -35,7 +35,7 @@ export default {
   HELP_CENTER_DOCS_URL:
     'https://www.chatwoot.com/docs/product/others/help-center',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
-  SMALL_SCREEN_BREAKPOINT: 1024,
+  SMALL_SCREEN_BREAKPOINT: 1200,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {
     UNTIL_NEXT_REPLY: 'until_next_reply',
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index f91861096..af548d5da 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -193,7 +193,7 @@ export default {
 </script>
 
 <template>
-  <section class="bg-white conversation-page dark:bg-slate-900">
+  <section class="flex w-full h-full">
     <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
@@ -219,11 +219,3 @@ export default {
     <CmdBarConversationSnooze />
   </section>
 </template>
-
-<style lang="scss" scoped>
-.conversation-page {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-</style>

From 99c699ea3466fe0cfdcc72e8b424ceea738929f5 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 12 Dec 2024 07:12:46 +0530
Subject: [PATCH 59/74] fix: links rendering in sidebar profile (#10574)

This pull request includes several changes to the `DropdownItem.vue` and `SidebarProfileMenu.vue` components to improve the handling of links.

Earlier we passed the link `/super_admin` to RouterLink directly, which would trigger validations internally and the dropdown item would not render in case of any errors. This PR fixes this by handling the native links appropriately

Fixes #10571
---
 .../dropdown-menu/base/DropdownItem.vue            | 14 +++++++++++---
 .../components-next/sidebar/SidebarProfileMenu.vue | 13 +++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
index 821b4218b..9db3a09d4 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
@@ -6,7 +6,8 @@ import { useDropdownContext } from './provider.js';
 const props = defineProps({
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
-  link: { type: String, default: '' },
+  link: { type: [String, Object], default: '' },
+  nativeLink: { type: Boolean, default: false },
   click: { type: Function, default: null },
   preserveOpen: { type: Boolean, default: false },
 });
@@ -18,7 +19,13 @@ defineOptions({
 const { closeMenu } = useDropdownContext();
 
 const componentIs = computed(() => {
-  if (props.link) return 'router-link';
+  if (props.link) {
+    if (props.nativeLink && typeof props.link === 'string') {
+      return 'a';
+    }
+
+    return 'router-link';
+  }
   if (props.click) return 'button';
 
   return 'div';
@@ -41,7 +48,8 @@ const triggerClick = () => {
       :class="{
         'hover:bg-n-alpha-2 rounded-lg w-full gap-3': !$slots.default,
       }"
-      :href="props.link || null"
+      :href="componentIs === 'a' ? props.link : null"
+      :to="componentIs === 'router-link' ? props.link : null"
       @click="triggerClick"
     >
       <slot>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
index b9bb9f421..7498ecd91 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { computed } from 'vue';
 import Auth from 'dashboard/api/auth';
-import { useRouter } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import Avatar from 'next/avatar/Avatar.vue';
@@ -21,7 +20,6 @@ defineOptions({
 });
 
 const { t } = useI18n();
-const router = useRouter();
 
 const globalConfig = useMapGetter('globalConfig/get');
 const currentUser = useMapGetter('getCurrentUser');
@@ -49,9 +47,7 @@ const menuItems = computed(() => {
       show: true,
       label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
       icon: 'i-lucide-user-pen',
-      click: () => {
-        router.push({ name: 'profile_settings_index' });
-      },
+      link: { name: 'profile_settings_index' },
     },
     {
       show: true,
@@ -66,15 +62,16 @@ const menuItems = computed(() => {
       show: true,
       label: t('SIDEBAR_ITEMS.DOCS'),
       icon: 'i-lucide-book',
-      click: () => {
-        window.open('https://www.chatwoot.com/hc/user-guide/en', '_blank');
-      },
+      link: 'https://www.chatwoot.com/hc/user-guide/en',
+      nativeLink: true,
+      target: '_blank',
     },
     {
       show: currentUser.value.type === 'SuperAdmin',
       label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
       icon: 'i-lucide-castle',
       link: '/super_admin',
+      nativeLink: true,
       target: '_blank',
     },
     {

From 86d37622c84289e1d0b2c945dc541eb5f6383984 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 12 Dec 2024 08:59:24 +0530
Subject: [PATCH 60/74] chore: Remove unused files in contact (#10570)

---
 .../ContactListHeaderWrapper.vue              |   9 +-
 .../ConversationAdvancedFilter.vue            | 407 ---------------
 .../helper/specs/validations.spec.js          |  43 +-
 .../dashboard/helper/validations.js           |  23 -
 .../dashboard/i18n/locale/en/contact.json     | 109 +---
 .../contact/components/AddCustomAttribute.vue | 109 ----
 .../contact/components/ContactAttribute.vue   | 131 -----
 .../contact/components/ContactFields.vue      | 115 -----
 .../contact/components/ContactPanel.vue       | 106 ----
 .../modules/notes/NotesOnContactPage.vue      |  50 --
 .../modules/notes/components/AddNote.vue      |  62 ---
 .../modules/notes/components/ContactNote.vue  | 139 -----
 .../modules/notes/components/NoteList.vue     |  61 ---
 .../contacts/components/AddReminder.vue       | 140 ------
 .../contacts/components/ContactInfoPanel.vue  | 175 -------
 .../contacts/components/ContactLabels.vue     |  85 ----
 .../components/ContactsAdvancedFilters.vue    | 368 --------------
 .../contacts/components/ContactsTable.vue     | 190 -------
 .../components/ContactsTable/CountryCell.vue  |  36 --
 .../components/ContactsTable/EmailCell.vue    |  22 -
 .../components/ContactsTable/NameCell.vue     |  52 --
 .../components/ContactsTable/ProfilesCell.vue |  33 --
 .../components/ContactsTable/TelCell.vue      |  40 --
 .../contacts/components/ContactsView.vue      | 475 ------------------
 .../dashboard/contacts/components/Header.vue  | 230 ---------
 .../contacts/components/ImportContacts.vue    |  96 ----
 .../contacts/components/ReminderItem.vue      | 126 -----
 .../contacts/components/SectionHeader.vue     |  73 ---
 .../contacts/components/TimelineCard.vue      | 133 -----
 .../components/specs/AddReminder.spec.js      |  46 --
 .../conversation/ContactCustomAttributes.vue  |  67 ---
 .../conversation/contact/CreateContact.vue    |  62 ---
 32 files changed, 10 insertions(+), 3803 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
 delete mode 100644 app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
 delete mode 100644 app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
 delete mode 100644 app/javascript/dashboard/modules/contact/components/ContactFields.vue
 delete mode 100644 app/javascript/dashboard/modules/contact/components/ContactPanel.vue
 delete mode 100644 app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
 delete mode 100644 app/javascript/dashboard/modules/notes/components/AddNote.vue
 delete mode 100644 app/javascript/dashboard/modules/notes/components/ContactNote.vue
 delete mode 100644 app/javascript/dashboard/modules/notes/components/NoteList.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/CountryCell.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/EmailCell.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/NameCell.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/ProfilesCell.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/TelCell.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js
 delete mode 100644 app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
index 8b2a53b27..627addff8 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -106,10 +106,15 @@ const onImport = async file => {
   try {
     await store.dispatch('contacts/import', file);
     contactImportDialogRef.value?.dialogRef.close();
-    useAlert(t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.SUCCESS_MESSAGE')
+    );
     useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
   } catch (error) {
-    useAlert(error.message ?? t('IMPORT_CONTACTS.ERROR_MESSAGE'));
+    useAlert(
+      error.message ??
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.ERROR_MESSAGE')
+    );
     useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
   }
 };
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
deleted file mode 100644
index b9d81ec4e..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ /dev/null
@@ -1,407 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import FilterInputBox from '../FilterInput/Index.vue';
-import languages from './advancedFilterItems/languages';
-import countries from 'shared/constants/countries.js';
-import { mapGetters } from 'vuex';
-import { filterAttributeGroups } from './advancedFilterItems';
-import { useFilter } from 'shared/composables/useFilter';
-import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
-import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
-import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    FilterInputBox,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    initialFilterTypes: {
-      type: Array,
-      default: () => [],
-    },
-    initialAppliedFilters: {
-      type: Array,
-      default: () => [],
-    },
-    activeFolderName: {
-      type: String,
-      default: '',
-    },
-    isFolderView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['applyFilter', 'updateFolder'],
-  setup() {
-    const { setFilterAttributes } = useFilter({
-      filteri18nKey: 'FILTER',
-      attributeModel: 'conversation_attribute',
-    });
-    return {
-      setFilterAttributes,
-    };
-  },
-  data() {
-    return {
-      show: true,
-      appliedFilters: this.initialAppliedFilters,
-      activeFolderNewName: this.activeFolderName,
-      filterTypes: this.initialFilterTypes,
-      filterAttributeGroups,
-      filterGroups: [],
-      allCustomAttributes: [],
-      attributeModel: 'conversation_attribute',
-      filtersFori18n: 'FILTER',
-      validationErrors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      getAppliedConversationFilters: 'getAppliedConversationFilters',
-    }),
-    filterModalHeaderTitle() {
-      return !this.isFolderView
-        ? this.$t('FILTER.TITLE')
-        : this.$t('FILTER.EDIT_CUSTOM_FILTER');
-    },
-    filterModalSubTitle() {
-      return !this.isFolderView
-        ? this.$t('FILTER.SUBTITLE')
-        : this.$t('FILTER.CUSTOM_VIEWS_SUBTITLE');
-    },
-  },
-  mounted() {
-    const { filterGroups, filterTypes } = this.setFilterAttributes();
-
-    this.filterTypes = [...this.filterTypes, ...filterTypes];
-    this.filterGroups = filterGroups;
-
-    this.$store.dispatch('campaigns/get');
-    if (this.getAppliedConversationFilters.length) {
-      this.appliedFilters = [];
-      this.appliedFilters = [...this.getAppliedConversationFilters];
-    } else if (!this.isFolderView) {
-      this.appliedFilters.push({
-        attribute_key: 'status',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        attribute_model: 'standard',
-      });
-    }
-  },
-  methods: {
-    getOperatorTypes(key) {
-      switch (key) {
-        case 'list':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'text':
-          return OPERATORS.OPERATOR_TYPES_3;
-        case 'number':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'link':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'date':
-          return OPERATORS.OPERATOR_TYPES_4;
-        case 'checkbox':
-          return OPERATORS.OPERATOR_TYPES_1;
-        default:
-          return OPERATORS.OPERATOR_TYPES_1;
-      }
-    },
-    customAttributeInputType(key) {
-      switch (key) {
-        case 'date':
-          return 'date';
-        case 'text':
-          return 'plain_text';
-        case 'list':
-          return 'search_select';
-        case 'checkbox':
-          return 'search_select';
-        default:
-          return 'plain_text';
-      }
-    },
-    getAttributeModel(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.attributeModel;
-    },
-    getInputType(key, operator) {
-      if (key === 'created_at' || key === 'last_activity_at')
-        if (operator === 'days_before') return 'plain_text';
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.inputType;
-    },
-    getOperators(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.filterOperators;
-    },
-    statusFilterItems() {
-      return {
-        open: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
-        },
-        resolved: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.resolved.TEXT'),
-        },
-        pending: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.pending.TEXT'),
-        },
-        snoozed: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.snoozed.TEXT'),
-        },
-        all: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
-        },
-      };
-    },
-    getDropdownValues(type) {
-      const statusFilters = this.statusFilterItems();
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ](this.attributeModel);
-
-      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type &&
-          attr.attribute_display_type === 'checkbox'
-        );
-      });
-
-      if (isCustomAttributeCheckbox) {
-        return [
-          {
-            id: true,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-          },
-          {
-            id: false,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-          },
-        ];
-      }
-
-      const isCustomAttributeList = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type && attr.attribute_display_type === 'list'
-        );
-      });
-
-      if (isCustomAttributeList) {
-        return allCustomAttributes
-          .find(attr => attr.attribute_key === type)
-          .attribute_values.map(item => {
-            return {
-              id: item,
-              name: item,
-            };
-          });
-      }
-
-      switch (type) {
-        case 'status':
-          return [
-            ...Object.keys(statusFilters).map(status => {
-              return {
-                id: status,
-                name: statusFilters[status].TEXT,
-              };
-            }),
-          ];
-        case 'assignee_id':
-          return this.$store.getters['agents/getAgents'];
-        case 'contact':
-          return this.$store.getters['contacts/getContacts'];
-        case 'inbox_id':
-          return this.$store.getters['inboxes/getInboxes'];
-        case 'team_id':
-          return this.$store.getters['teams/getTeams'];
-        case 'campaign_id':
-          return this.$store.getters['campaigns/getAllCampaigns'].map(i => {
-            return {
-              id: i.id,
-              name: i.title,
-            };
-          });
-        case 'labels':
-          return this.$store.getters['labels/getLabels'].map(i => {
-            return {
-              id: i.title,
-              name: i.title,
-            };
-          });
-        case 'browser_language':
-          return languages;
-        case 'country_code':
-          return countries;
-        default:
-          return undefined;
-      }
-    },
-    appendNewFilter() {
-      if (this.isFolderView) {
-        this.setQueryOperatorOnLastQuery();
-      } else {
-        this.appliedFilters.push({
-          attribute_key: 'status',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      }
-    },
-    setQueryOperatorOnLastQuery() {
-      const lastItemIndex = this.appliedFilters.length - 1;
-      this.appliedFilters[lastItemIndex] = {
-        ...this.appliedFilters[lastItemIndex],
-        query_operator: 'and',
-      };
-      this.$nextTick(() => {
-        this.appliedFilters.push({
-          attribute_key: 'status',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      });
-    },
-    removeFilter(index) {
-      if (this.appliedFilters.length <= 1) {
-        useAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
-      } else {
-        this.appliedFilters.splice(index, 1);
-      }
-    },
-    submitFilterQuery() {
-      this.validationErrors = validateConversationOrContactFilters(
-        this.appliedFilters
-      );
-      if (Object.keys(this.validationErrors).length === 0) {
-        this.$store.dispatch(
-          'setConversationFilters',
-          JSON.parse(JSON.stringify(this.appliedFilters))
-        );
-        this.$emit('applyFilter', this.appliedFilters);
-        useTrack(CONVERSATION_EVENTS.APPLY_FILTER, {
-          applied_filters: this.appliedFilters.map(filter => ({
-            key: filter.attribute_key,
-            operator: filter.filter_operator,
-            query_operator: filter.query_operator,
-          })),
-        });
-      }
-    },
-    updateSavedCustomViews() {
-      this.$emit('updateFolder', this.appliedFilters, this.activeFolderNewName);
-    },
-    resetFilter(index, currentFilter) {
-      this.appliedFilters[index].filter_operator = this.filterTypes.find(
-        filter => filter.attributeKey === currentFilter.attribute_key
-      ).filterOperators[0].value;
-      this.appliedFilters[index].values = '';
-    },
-    showUserInput(operatorType) {
-      if (operatorType === 'is_present' || operatorType === 'is_not_present')
-        return false;
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isFolderView">
-        <label class="input-label" :class="{ error: !activeFolderNewName }">
-          {{ $t('FILTER.FOLDER_LABEL') }}
-          <input
-            v-model="activeFolderNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeFolderNewName" class="message">
-            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="mb-1">
-          {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
-        </label>
-      </div>
-      <div
-        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
-      >
-        <FilterInputBox
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          grouped-filters
-          :error-message="
-            validationErrors[`filter_${i}`]
-              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
-              : ''
-          "
-          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @remove-filter="removeFilter(i)"
-        />
-        <div class="mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isFolderView"
-            :disabled="!activeFolderNewName"
-            @click="updateSavedCustomViews"
-          >
-            {{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.folder-input {
-  @apply w-[50%];
-}
-</style>
diff --git a/app/javascript/dashboard/helper/specs/validations.spec.js b/app/javascript/dashboard/helper/specs/validations.spec.js
index 57016cfdc..e697fbffd 100644
--- a/app/javascript/dashboard/helper/specs/validations.spec.js
+++ b/app/javascript/dashboard/helper/specs/validations.spec.js
@@ -1,46 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import {
-  validateConversationOrContactFilters,
-  validateAutomation,
-} from '../validations';
-
-describe('validateConversationOrContactFilters', () => {
-  it('should return no errors for valid filters', () => {
-    const validFilters = [
-      { attribute_key: 'name', filter_operator: 'contains', values: 'John' },
-      { attribute_key: 'email', filter_operator: 'is_present' },
-    ];
-    const errors = validateConversationOrContactFilters(validFilters);
-    expect(errors).toEqual({});
-  });
-
-  it('should return errors for invalid filters', () => {
-    const invalidFilters = [
-      { attribute_key: '', filter_operator: 'contains', values: 'John' },
-      { attribute_key: 'email', filter_operator: '' },
-      { attribute_key: 'age', filter_operator: 'equals' },
-    ];
-    const errors = validateConversationOrContactFilters(invalidFilters);
-    expect(errors).toEqual({
-      filter_0: 'ATTRIBUTE_KEY_REQUIRED',
-      filter_1: 'FILTER_OPERATOR_REQUIRED',
-      filter_2: 'VALUE_REQUIRED',
-    });
-  });
-
-  it('should validate days_before operator correctly', () => {
-    const filters = [
-      { attribute_key: 'date', filter_operator: 'days_before', values: '0' },
-      { attribute_key: 'date', filter_operator: 'days_before', values: '999' },
-      { attribute_key: 'date', filter_operator: 'days_before', values: '500' },
-    ];
-    const errors = validateConversationOrContactFilters(filters);
-    expect(errors).toEqual({
-      filter_0: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
-      filter_1: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
-    });
-  });
-});
+import { validateAutomation } from '../validations';
 
 describe('validateAutomation', () => {
   it('should return no errors for a valid automation', () => {
diff --git a/app/javascript/dashboard/helper/validations.js b/app/javascript/dashboard/helper/validations.js
index 4347f55aa..58f3faa1a 100644
--- a/app/javascript/dashboard/helper/validations.js
+++ b/app/javascript/dashboard/helper/validations.js
@@ -65,29 +65,6 @@ export const validateSingleFilter = filter => {
   return null;
 };
 
-/**
- * Validates filters for conversations or contacts.
- *
- * @param {Array} filters - An array of filter objects to validate.
- * @param {string} filters[].attribute_key - The key of the attribute to filter on.
- * @param {string} filters[].filter_operator - The operator to use for filtering.
- * @param {string|number} [filters[].values] - The value(s) to filter by (required for most operators).
- *
- * @returns {Object} An object containing any validation errors, keyed by filter index.
- */
-export const validateConversationOrContactFilters = filters => {
-  const errors = {};
-
-  filters.forEach((filter, index) => {
-    const error = validateSingleFilter(filter);
-    if (error) {
-      errors[`filter_${index}`] = error;
-    }
-  });
-
-  return errors;
-};
-
 // ------------------------------------------------------------------
 // ---------------------- Automation Validation ---------------------
 // ------------------------------------------------------------------
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 3826823ed..f26c6ed46 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -57,46 +57,6 @@
     "TITLE": "Edit contact",
     "DESC": "Edit contact details"
   },
-  "CREATE_CONTACT": {
-    "BUTTON_LABEL": "New Contact",
-    "TITLE": "Create new contact",
-    "DESC": "Add basic information details about the contact."
-  },
-  "IMPORT_CONTACTS": {
-    "BUTTON_LABEL": "Import",
-    "TITLE": "Import Contacts",
-    "DESC": "Import contacts through a CSV file.",
-    "DOWNLOAD_LABEL": "Download a sample csv.",
-    "FORM": {
-      "LABEL": "CSV File",
-      "SUBMIT": "Import",
-      "CANCEL": "Cancel"
-    },
-    "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
-    "ERROR_MESSAGE": "There was an error, please try again"
-  },
-  "EXPORT_CONTACTS": {
-    "BUTTON_LABEL": "Export",
-    "TITLE": "Export Contacts",
-    "DESC": "Export contacts to a CSV file.",
-    "SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
-    "ERROR_MESSAGE": "There was an error, please try again",
-    "CONFIRM": {
-      "TITLE": "Export Contacts",
-      "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
-      "YES": "Yes, Export",
-      "NO": "No, Cancel"
-    }
-  },
-  "DELETE_NOTE": {
-    "CONFIRM": {
-      "TITLE": "Confirm Deletion",
-      "MESSAGE": "Are you want sure to delete this note?",
-      "YES": "Yes, Delete it",
-      "NO": "No, Keep it"
-    }
-  },
   "DELETE_CONTACT": {
     "BUTTON_LABEL": "Delete Contact",
     "TITLE": "Delete contact",
@@ -224,79 +184,14 @@
     }
   },
   "CONTACTS_PAGE": {
-    "HEADER": "Contacts",
-    "FIELDS": "Contact fields",
-    "SEARCH_BUTTON": "Search",
-    "SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
-    "FILTER_CONTACTS": "Filter",
-    "FILTER_CONTACTS_SAVE": "Save filter",
-    "FILTER_CONTACTS_DELETE": "Delete filter",
-    "FILTER_CONTACTS_EDIT": "Edit segment",
     "LIST": {
-      "LOADING_MESSAGE": "Loading contacts...",
-      "404": "No contacts matches your search 🔍",
-      "NO_CONTACTS": "There are no available contacts",
       "TABLE_HEADER": {
-        "NAME": "Name",
-        "PHONE_NUMBER": "Phone Number",
-        "CONVERSATIONS": "Conversations",
-        "LAST_ACTIVITY": "Last Activity",
-        "CREATED_AT": "Created At",
-        "COUNTRY": "Country",
-        "CITY": "City",
-        "SOCIAL_PROFILES": "Social Profiles",
-        "COMPANY": "Company",
-        "EMAIL_ADDRESS": "Email Address"
-      },
-      "VIEW_DETAILS": "View details"
-    }
-  },
-  "CONTACT_PROFILE": {
-    "BACK_BUTTON": "Contacts",
-    "LOADING": "Loading contact profile..."
-  },
-  "REMINDER": {
-    "ADD_BUTTON": {
-      "BUTTON": "Add",
-      "TITLE": "Shift + Enter to create a task"
-    },
-    "FOOTER": {
-      "DUE_DATE": "Due date",
-      "LABEL_TITLE": "Set type"
-    }
-  },
-  "NOTES": {
-    "FETCHING_NOTES": "Fetching notes...",
-    "NOT_AVAILABLE": "There are no notes created for this contact",
-    "HEADER": {
-      "TITLE": "Notes"
-    },
-    "LIST": {
-      "LABEL": "added a note"
-    },
-    "ADD": {
-      "BUTTON": "Add",
-      "PLACEHOLDER": "Add a note",
-      "TITLE": "Shift + Enter to create a note"
-    },
-    "CONTENT_HEADER": {
-      "DELETE": "Delete note"
-    }
-  },
-  "EVENTS": {
-    "HEADER": {
-      "TITLE": "Activities"
-    },
-    "BUTTON": {
-      "PILL_BUTTON_NOTES": "notes",
-      "PILL_BUTTON_EVENTS": "events",
-      "PILL_BUTTON_CONVO": "conversations"
+        "SOCIAL_PROFILES": "Social Profiles"
+      }
     }
   },
   "CUSTOM_ATTRIBUTES": {
-    "ADD_BUTTON_TEXT": "Add attributes",
     "BUTTON": "Add custom attribute",
-    "NOT_AVAILABLE": "There are no custom attributes available for this contact.",
     "COPY_SUCCESSFUL": "Copied to clipboard successfully",
     "SHOW_MORE": "Show all attributes",
     "SHOW_LESS": "Show less attributes",
diff --git a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
deleted file mode 100644
index ec32c5381..000000000
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
-import Modal from 'dashboard/components/Modal.vue';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    isCreating: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['create', 'cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      attributeValue: '',
-      attributeName: '',
-    };
-  },
-  validations: {
-    attributeName: {
-      required,
-      minLength: minLength(2),
-    },
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    attributeNameError() {
-      if (this.v$.attributeName.$error) {
-        return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
-      }
-      return '';
-    },
-  },
-  methods: {
-    addCustomAttribute() {
-      this.$emit('create', {
-        attributeValue: this.attributeValue,
-        attributeName: this.attributeName || '',
-      });
-      this.reset();
-      this.$emit('cancel');
-    },
-    onClose() {
-      this.reset();
-      this.$emit('cancel');
-    },
-    reset() {
-      this.attributeValue = '';
-      this.attributeName = '';
-    },
-  },
-};
-</script>
-
-<template>
-  <Modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
-      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
-    />
-    <form class="w-full" @submit.prevent="addCustomAttribute">
-      <woot-input
-        v-model="attributeName"
-        :class="{ error: v$.attributeName.$error }"
-        class="w-full"
-        :error="attributeNameError"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
-        @blur="v$.attributeName.$touch"
-        @input="v$.attributeName.$touch"
-      />
-      <woot-input
-        v-model="attributeValue"
-        class="w-full"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
-      />
-      <div class="flex items-center justify-end gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.attributeName.$invalid || isCreating"
-          :is-loading="isCreating"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </Modal>
-</template>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
deleted file mode 100644
index ee8b3074b..000000000
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  props: {
-    label: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    showEdit: { type: Boolean, default: false },
-  },
-  emits: ['update'],
-  data() {
-    return {
-      isEditing: false,
-      editedValue: this.value,
-    };
-  },
-  methods: {
-    focusInput() {
-      this.$refs.inputfield.focus();
-    },
-    onEdit() {
-      this.isEditing = true;
-      this.$nextTick(() => {
-        this.focusInput();
-      });
-    },
-    onUpdate() {
-      this.isEditing = false;
-      this.$emit('update', this.editedValue);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="contact-attribute">
-    <div class="title-wrap">
-      <h4 class="text-sm title">
-        <div class="title--icon">
-          <EmojiOrIcon :icon="icon" :emoji="emoji" />
-        </div>
-        {{ label }}
-      </h4>
-    </div>
-    <div v-show="isEditing">
-      <div class="mb-2 w-full flex items-center">
-        <input
-          ref="inputfield"
-          v-model="editedValue"
-          type="text"
-          class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
-          autofocus="true"
-          @keyup.enter="onUpdate"
-        />
-        <div>
-          <woot-button
-            size="small"
-            icon="ion-checkmark"
-            class="rounded-l-none rtl:rounded-r-none"
-            @click="onUpdate"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      v-show="!isEditing"
-      class="value--view"
-      :class="{ 'is-editable': showEdit }"
-    >
-      <p class="value">
-        {{ value || '---' }}
-      </p>
-      <woot-button
-        v-if="showEdit"
-        variant="clear link"
-        size="small"
-        color-scheme="secondary"
-        icon="edit"
-        class-names="edit-button"
-        @click="onEdit"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.contact-attribute {
-  margin-bottom: var(--space-small);
-}
-.title-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-mini);
-}
-.title {
-  display: flex;
-  align-items: center;
-  margin: 0;
-}
-.title--icon {
-  width: var(--space-two);
-}
-.edit-button {
-  display: none;
-}
-.value--view {
-  display: flex;
-
-  &.is-editable:hover {
-    .value {
-      background: var(--color-background);
-    }
-    .edit-button {
-      display: block;
-    }
-  }
-}
-.value {
-  display: inline-block;
-  min-width: var(--space-mega);
-  border-radius: var(--border-radius-small);
-  word-break: break-all;
-  margin: 0 var(--space-smaller) 0 var(--space-normal);
-  padding: var(--space-micro) var(--space-smaller);
-}
-</style>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
deleted file mode 100644
index 71f92c969..000000000
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script>
-import Attribute from './ContactAttribute.vue';
-
-export default {
-  components: { Attribute },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['update', 'createAttribute'],
-
-  computed: {
-    additionalAttributes() {
-      return this.contact.additional_attributes || {};
-    },
-    company() {
-      const { company = {} } = this.contact;
-      return company;
-    },
-    customAttributes() {
-      const { custom_attributes: customAttributes = {} } = this.contact;
-      return customAttributes;
-    },
-    customAttributekeys() {
-      return Object.keys(this.customAttributes).filter(key => {
-        const value = this.customAttributes[key];
-        return value !== null && value !== undefined;
-      });
-    },
-  },
-  methods: {
-    onEmailUpdate(value) {
-      this.$emit('update', { email: value });
-    },
-    onPhoneUpdate(value) {
-      this.$emit('update', { phone_number: value });
-    },
-    onLocationUpdate(value) {
-      this.$emit('update', { location: value });
-    },
-    handleCustomCreate() {
-      this.$emit('createAttribute');
-    },
-    onCustomAttributeUpdate(key, value) {
-      this.$emit('update', { custom_attributes: { [key]: value } });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="contact-fields">
-    <h3 class="text-lg title">
-      {{ $t('CONTACTS_PAGE.FIELDS') }}
-    </h3>
-    <Attribute
-      :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="mail"
-      emoji=""
-      :value="contact.email"
-      show-edit
-      @update="onEmailUpdate"
-    />
-    <Attribute
-      :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="call"
-      emoji=""
-      :value="contact.phone_number"
-      show-edit
-      @update="onPhoneUpdate"
-    />
-    <Attribute
-      v-if="additionalAttributes.location"
-      :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="map"
-      emoji="🌍"
-      :value="additionalAttributes.location"
-      show-edit
-      @update="onLocationUpdate"
-    />
-    <div
-      v-for="attribute in customAttributekeys"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <Attribute
-        :label="attribute"
-        icon="chevron-right"
-        :value="customAttributes[attribute]"
-        show-edit
-        @update="value => onCustomAttributeUpdate(attribute, value)"
-      />
-    </div>
-    <woot-button
-      size="small"
-      variant="link"
-      icon="add"
-      @click="handleCustomCreate"
-    >
-      {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
-    </woot-button>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.contact-fields {
-  margin-top: var(--space-medium);
-}
-
-.title {
-  margin-bottom: var(--space-normal);
-}
-</style>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
deleted file mode 100644
index 568a8bf69..000000000
--- a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact.vue';
-import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation.vue';
-import AddCustomAttribute from 'dashboard/modules/contact/components/AddCustomAttribute.vue';
-import ContactIntro from './ContactIntro.vue';
-import ContactFields from './ContactFields.vue';
-
-export default {
-  components: {
-    AddCustomAttribute,
-    ContactFields,
-    ContactIntro,
-    EditContact,
-    NewConversation,
-  },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      showCustomAttributeModal: false,
-      showEditModal: false,
-      showConversationModal: false,
-    };
-  },
-  computed: {
-    enableNewConversation() {
-      return this.contact && this.contact.id;
-    },
-  },
-  methods: {
-    toggleCustomAttributeModal() {
-      this.showCustomAttributeModal = !this.showCustomAttributeModal;
-    },
-    toggleEditModal() {
-      this.showEditModal = !this.showEditModal;
-    },
-    toggleConversationModal() {
-      this.showConversationModal = !this.showConversationModal;
-    },
-    createCustomAttribute(data) {
-      const { id } = this.contact;
-      const { attributeValue, attributeName } = data;
-      const updatedFields = {
-        id,
-        custom_attributes: {
-          [attributeName]: attributeValue,
-        },
-      };
-      this.updateContact(updatedFields);
-    },
-    updateField(data) {
-      const { id } = this.contact;
-      const updatedFields = {
-        id,
-        ...data,
-      };
-      this.updateContact(updatedFields);
-    },
-    updateContact(contactItem) {
-      this.$store.dispatch('contacts/update', contactItem);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="panel">
-    <ContactIntro
-      :contact="contact"
-      @message="toggleConversationModal"
-      @edit="toggleEditModal"
-    />
-    <ContactFields
-      :contact="contact"
-      @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
-    />
-    <EditContact
-      v-if="showEditModal"
-      :show="showEditModal"
-      :contact="contact"
-      @cancel="toggleEditModal"
-    />
-    <NewConversation
-      v-if="enableNewConversation"
-      :show="showConversationModal"
-      :contact="contact"
-      @cancel="toggleConversationModal"
-    />
-    <AddCustomAttribute
-      :show="showCustomAttributeModal"
-      @cancel="toggleCustomAttributeModal"
-      @create="createCustomAttribute"
-    />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.panel {
-  padding: var(--space-normal) var(--space-normal);
-}
-</style>
diff --git a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
deleted file mode 100644
index caaa9285d..000000000
--- a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import NoteList from './components/NoteList.vue';
-
-export default {
-  components: {
-    NoteList,
-  },
-  props: {
-    contactId: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapGetters({ uiFlags: 'contactNotes/getUIFlags' }),
-    notes() {
-      return this.$store.getters['contactNotes/getAllNotesByContact'](
-        this.contactId
-      );
-    },
-  },
-  mounted() {
-    this.fetchContactNotes();
-  },
-  methods: {
-    fetchContactNotes() {
-      const { contactId } = this;
-      if (contactId) this.$store.dispatch('contactNotes/get', { contactId });
-    },
-    onAdd(content) {
-      const { contactId } = this;
-      this.$store.dispatch('contactNotes/create', { content, contactId });
-    },
-    onDelete(noteId) {
-      const { contactId } = this;
-      this.$store.dispatch('contactNotes/delete', { noteId, contactId });
-    },
-  },
-};
-</script>
-
-<template>
-  <NoteList
-    :is-fetching="uiFlags.isFetching"
-    :notes="notes"
-    @add="onAdd"
-    @delete="onDelete"
-  />
-</template>
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
deleted file mode 100644
index 55c825695..000000000
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-
-const emit = defineEmits(['add']);
-
-const noteContent = ref('');
-
-const buttonDisabled = computed(() => noteContent.value === '');
-
-const onAdd = () => {
-  if (noteContent.value !== '') {
-    emit('add', noteContent.value);
-  }
-  noteContent.value = '';
-};
-
-const keyboardEvents = {
-  '$mod+Enter': {
-    action: () => onAdd(),
-    allowOnFocusedInput: true,
-  },
-};
-useKeyboardEvents(keyboardEvents);
-</script>
-
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100"
-  >
-    <WootMessageEditor
-      v-model="noteContent"
-      class="input--note"
-      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
-      :enable-suggestions="false"
-    />
-    <div class="flex justify-end w-full">
-      <woot-button
-        color-scheme="warning"
-        :title="$t('NOTES.ADD.TITLE')"
-        :is-disabled="buttonDisabled"
-        @click="onAdd"
-      >
-        {{ $t('NOTES.ADD.BUTTON') }} {{ '(⌘⏎)' }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.input--note {
-  &::v-deep .ProseMirror-menubar {
-    padding: 0;
-    margin-top: var(--space-minus-small);
-  }
-
-  &::v-deep .ProseMirror-woot-style {
-    max-height: 22.5rem;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
deleted file mode 100644
index 206154136..000000000
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    note: {
-      type: String,
-      default: '',
-    },
-    user: {
-      type: Object,
-      default: () => {},
-    },
-    createdAt: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ['delete'],
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
-  data() {
-    return {
-      showDeleteModal: false,
-    };
-  },
-  computed: {
-    readableTime() {
-      return dynamicTime(this.createdAt);
-    },
-    noteAuthor() {
-      return this.user || {};
-    },
-    noteAuthorName() {
-      return this.noteAuthor.name || this.$t('APP_GLOBAL.DELETED_USER');
-    },
-  },
-
-  methods: {
-    toggleDeleteModal() {
-      this.showDeleteModal = !this.showDeleteModal;
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-    confirmDeletion() {
-      this.onDelete();
-      this.closeDelete();
-    },
-    closeDelete() {
-      this.showDeleteModal = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
-  >
-    <div class="flex items-end justify-between gap-1 text-xs">
-      <div class="flex items-center">
-        <Thumbnail
-          :title="noteAuthorName"
-          :src="noteAuthor.thumbnail"
-          :username="noteAuthorName"
-          size="20px"
-        />
-        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
-          <span class="font-medium text-slate-800 dark:text-slate-100">
-            {{ noteAuthorName }}
-          </span>
-          <span class="text-slate-700 dark:text-slate-100">
-            {{ $t('NOTES.LIST.LABEL') }}
-          </span>
-          <span class="font-medium text-slate-700 dark:text-slate-100">
-            {{ readableTime }}
-          </span>
-        </div>
-      </div>
-      <div class="flex invisible actions">
-        <woot-button
-          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
-          variant="smooth"
-          size="tiny"
-          icon="delete"
-          color-scheme="secondary"
-          @click="toggleDeleteModal"
-        />
-      </div>
-      <woot-delete-modal
-        v-if="showDeleteModal"
-        v-model:show="showDeleteModal"
-        :on-close="closeDelete"
-        :on-confirm="confirmDeletion"
-        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
-        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
-        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
-        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
-      />
-    </div>
-    <p
-      v-dompurify-html="formatMessage(note || '')"
-      class="mt-4 note__content"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-// For RTL direction view
-.app-rtl--wrapper {
-  .note__content {
-    ::v-deep {
-      p {
-        unicode-bidi: plaintext;
-      }
-    }
-  }
-}
-
-.note-wrap:hover {
-  .actions {
-    @apply visible;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/notes/components/NoteList.vue b/app/javascript/dashboard/modules/notes/components/NoteList.vue
deleted file mode 100644
index ffbc1da83..000000000
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-import AddNote from './AddNote.vue';
-import ContactNote from './ContactNote.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    AddNote,
-    ContactNote,
-    Spinner,
-  },
-
-  props: {
-    notes: {
-      type: Array,
-      default: () => [],
-    },
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['add', 'edit', 'delete'],
-
-  methods: {
-    onAddNote(value) {
-      this.$emit('add', value);
-    },
-    onEditNote(value) {
-      this.$emit('edit', value);
-    },
-    onDeleteNote(value) {
-      this.$emit('delete', value);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <AddNote @add="onAddNote" />
-    <ContactNote
-      v-for="note in notes"
-      :id="note.id"
-      :key="note.id"
-      :note="note.content"
-      :user="note.user"
-      :created-at="note.created_at"
-      @edit="onEditNote"
-      @delete="onDeleteNote"
-    />
-
-    <div v-if="isFetching" class="text-center p-4 text-base">
-      <Spinner size="" />
-      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
-    </div>
-    <div v-else-if="!notes.length" class="text-center p-4 text-base">
-      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
deleted file mode 100644
index 9cf017f9c..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script>
-export default {
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['add'],
-  data() {
-    return {
-      content: '',
-      date: '',
-      label: '',
-    };
-  },
-  computed: {
-    buttonDisabled() {
-      return this.content && this.date === '';
-    },
-  },
-  methods: {
-    resetValue() {
-      this.content = '';
-      this.date = '';
-    },
-
-    optionSelected(event) {
-      this.label = event.target.value;
-    },
-
-    onAdd() {
-      const task = {
-        content: this.content,
-        date: this.date,
-        label: this.label,
-      };
-      this.$emit('add', task);
-      this.resetValue();
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="wrap">
-    <div class="input-select-wrap">
-      <textarea
-        v-model="content"
-        class="input--reminder"
-        @keydown.enter.shift.exact="onAdd"
-      />
-      <div class="select-wrap">
-        <div class="select">
-          <div class="input-group">
-            <i class="ion-android-calendar input-group-label" />
-            <input
-              v-model="date"
-              type="text"
-              :placeholder="$t('REMINDER.FOOTER.DUE_DATE')"
-              class="input-group-field"
-            />
-          </div>
-          <div class="task-wrap">
-            <select class="task__type" @change="optionSelected($event)">
-              <option value="" disabled selected>
-                {{ $t('REMINDER.FOOTER.LABEL_TITLE') }}
-              </option>
-              <option
-                v-for="option in options"
-                :key="option.id"
-                :value="option.id"
-              >
-                {{ option.name }}
-              </option>
-            </select>
-          </div>
-        </div>
-        <woot-button
-          size="tiny"
-          color-scheme="primary"
-          class-names="add-button"
-          :title="$t('REMINDER.ADD_BUTTON.TITLE')"
-          :is-disabled="buttonDisabled"
-          @click="onAdd"
-        >
-          {{ $t('REMINDER.ADD_BUTTON.BUTTON') }}
-        </woot-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.wrap {
-  display: flex;
-  margin-bottom: var(--space-smaller);
-  width: 100%;
-
-  .input-select-wrap {
-    padding: var(--space-small) var(--space-small);
-    width: 100%;
-
-    .input--reminder {
-      font-size: var(--font-size-mini);
-      margin-bottom: var(--space-small);
-      resize: none;
-    }
-
-    .select-wrap {
-      display: flex;
-      justify-content: space-between;
-
-      .select {
-        display: flex;
-      }
-    }
-
-    .input-group {
-      margin-bottom: 0;
-      font-size: var(--font-size-mini);
-
-      .input-group-field {
-        height: var(--space-medium);
-        font-size: var(--font-size-micro);
-      }
-    }
-
-    .task-wrap {
-      .task__type {
-        margin: 0 0 0 var(--space-smaller);
-        height: var(--space-medium);
-        width: fit-content;
-        padding: 0 var(--space-two) 0 var(--space-smaller);
-        font-size: var(--font-size-micro);
-      }
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
deleted file mode 100644
index 5455a1a26..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
-import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
-import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
-import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
-import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
-import Draggable from 'vuedraggable';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-export default {
-  components: {
-    AccordionItem,
-    ContactConversations,
-    ContactInfo,
-    ContactLabel,
-    CustomAttributes,
-    Draggable,
-  },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    showAvatar: {
-      type: Boolean,
-      default: true,
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup() {
-    const {
-      updateUISettings,
-      isContactSidebarItemOpen,
-      contactSidebarItemsOrder,
-      toggleSidebarUIState,
-    } = useUISettings();
-
-    return {
-      updateUISettings,
-      isContactSidebarItemOpen,
-      contactSidebarItemsOrder,
-      toggleSidebarUIState,
-    };
-  },
-  data() {
-    return {
-      dragEnabled: true,
-      contactSidebarItems: [],
-      dragging: false,
-    };
-  },
-  computed: {
-    hasContactAttributes() {
-      const { custom_attributes: customAttributes } = this.contact;
-      return customAttributes && Object.keys(customAttributes).length;
-    },
-  },
-  mounted() {
-    this.contactSidebarItems = this.contactSidebarItemsOrder;
-  },
-  methods: {
-    onDragEnd() {
-      this.dragging = false;
-      this.updateUISettings({
-        contact_sidebar_items_order: this.contactSidebarItems,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="relative w-1/4 h-full min-h-screen overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
-    :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
-  >
-    <ContactInfo
-      :show-close-button="showCloseButton"
-      :show-avatar="showAvatar"
-      :contact="contact"
-      close-icon-name="dismiss"
-      @panel-close="onClose"
-      @toggle-panel="onClose"
-    />
-    <div class="list-group">
-      <Draggable
-        :list="contactSidebarItems"
-        :disabled="!dragEnabled"
-        ghost-class="ghost"
-        item-key="name"
-        @start="dragging = true"
-        @end="onDragEnd"
-      >
-        <template #item="{ element }">
-          <div :key="element.name" class="list-group-item">
-            <div v-if="element.name === 'contact_attributes'">
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-                :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_custom_attr_open', value)
-                "
-              >
-                <CustomAttributes
-                  :contact-id="contact.id"
-                  attribute-type="contact_attribute"
-                  attribute-from="contact_panel"
-                  :custom-attributes="contact.custom_attributes"
-                  :empty-state-message="
-                    $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
-                  "
-                />
-              </AccordionItem>
-            </div>
-            <div v-if="element.name === 'contact_labels'">
-              <AccordionItem
-                :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
-                :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_labels_open', value)
-                "
-              >
-                <ContactLabel :contact-id="contact.id" class="contact-labels" />
-              </AccordionItem>
-            </div>
-            <div v-if="element.name === 'previous_conversation'">
-              <AccordionItem
-                :title="
-                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
-                "
-                :is-open="isContactSidebarItemOpen('is_ct_prev_conv_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_prev_conv_open', value)
-                "
-              >
-                <ContactConversations
-                  v-if="contact.id"
-                  :contact-id="contact.id"
-                  conversation-id=""
-                />
-              </AccordionItem>
-            </div>
-          </div>
-        </template>
-      </Draggable>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .contact--profile {
-    @apply pb-3 mb-4;
-  }
-}
-
-.list-group {
-  .list-group-item {
-    @apply bg-white dark:bg-slate-900;
-  }
-}
-
-.conversation--details {
-  @apply py-0 px-4;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
deleted file mode 100644
index 921c86a85..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import LabelSelector from 'dashboard/components/widgets/LabelSelector.vue';
-
-export default {
-  components: { LabelSelector },
-  props: {
-    contactId: {
-      type: [String, Number],
-      required: true,
-    },
-  },
-
-  computed: {
-    savedLabels() {
-      const availableContactLabels = this.$store.getters[
-        'contactLabels/getContactLabels'
-      ](this.contactId);
-      return this.allLabels.filter(({ title }) =>
-        availableContactLabels.includes(title)
-      );
-    },
-
-    ...mapGetters({
-      allLabels: 'labels/getLabels',
-    }),
-  },
-
-  watch: {
-    contactId(newContactId, prevContactId) {
-      if (newContactId && newContactId !== prevContactId) {
-        this.fetchLabels(newContactId);
-      }
-    },
-  },
-
-  mounted() {
-    const { contactId } = this;
-    this.fetchLabels(contactId);
-  },
-
-  methods: {
-    async onUpdateLabels(selectedLabels) {
-      try {
-        await this.$store.dispatch('contactLabels/update', {
-          contactId: this.contactId,
-          labels: selectedLabels,
-        });
-      } catch (error) {
-        useAlert(this.$t('CONTACT_PANEL.LABELS.CONTACT.ERROR'));
-      }
-    },
-
-    addItem(value) {
-      const result = this.savedLabels.map(item => item.title);
-      result.push(value.title);
-      this.onUpdateLabels(result);
-    },
-
-    removeItem(value) {
-      const result = this.savedLabels
-        .map(label => label.title)
-        .filter(label => label !== value);
-      this.onUpdateLabels(result);
-    },
-
-    async fetchLabels(contactId) {
-      if (!contactId) {
-        return;
-      }
-      this.$store.dispatch('contactLabels/get', contactId);
-    },
-  },
-};
-</script>
-
-<template>
-  <LabelSelector
-    :all-labels="allLabels"
-    :saved-labels="savedLabels"
-    @add="addItem"
-    @remove="removeItem"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
deleted file mode 100644
index 29b1faee6..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
-import countries from 'shared/constants/countries.js';
-import { mapGetters } from 'vuex';
-import { filterAttributeGroups } from '../contactFilterItems';
-import { useFilter } from 'shared/composables/useFilter';
-import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
-import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    FilterInputBox,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    initialFilterTypes: {
-      type: Array,
-      default: () => [],
-    },
-    initialAppliedFilters: {
-      type: Array,
-      default: () => [],
-    },
-    isSegmentsView: {
-      type: Boolean,
-      default: false,
-    },
-    activeSegmentName: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['applyFilter', 'clearFilters', 'updateSegment'],
-  setup() {
-    const { setFilterAttributes } = useFilter({
-      filteri18nKey: 'CONTACTS_FILTER',
-      attributeModel: 'contact_attribute',
-    });
-    return {
-      setFilterAttributes,
-    };
-  },
-  data() {
-    return {
-      show: true,
-      appliedFilters: this.initialAppliedFilters,
-      activeSegmentNewName: this.activeSegmentName,
-      filterTypes: this.initialFilterTypes,
-      filterGroups: [],
-      allCustomAttributes: [],
-      filterAttributeGroups,
-      attributeModel: 'contact_attribute',
-      filtersFori18n: 'CONTACTS_FILTER',
-      validationErrors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    filterModalHeaderTitle() {
-      return !this.isSegmentsView
-        ? this.$t('CONTACTS_FILTER.TITLE')
-        : this.$t('CONTACTS_FILTER.EDIT_CUSTOM_SEGMENT');
-    },
-    filterModalSubTitle() {
-      return !this.isSegmentsView
-        ? this.$t('CONTACTS_FILTER.SUBTITLE')
-        : this.$t('CONTACTS_FILTER.CUSTOM_VIEWS_SUBTITLE');
-    },
-  },
-  mounted() {
-    const { filterGroups, filterTypes } = this.setFilterAttributes();
-    this.filterTypes = [...this.filterTypes, ...filterTypes];
-    this.filterGroups = filterGroups;
-
-    if (this.getAppliedContactFilters.length && !this.isSegmentsView) {
-      this.appliedFilters = [...this.getAppliedContactFilters];
-    } else if (!this.isSegmentsView) {
-      this.appliedFilters.push({
-        attribute_key: 'name',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        attribute_model: 'standard',
-      });
-    }
-  },
-  methods: {
-    getOperatorTypes(key) {
-      switch (key) {
-        case 'list':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'text':
-          return OPERATORS.OPERATOR_TYPES_3;
-        case 'number':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'link':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'date':
-          return OPERATORS.OPERATOR_TYPES_4;
-        case 'checkbox':
-          return OPERATORS.OPERATOR_TYPES_1;
-        default:
-          return OPERATORS.OPERATOR_TYPES_1;
-      }
-    },
-    customAttributeInputType(key) {
-      switch (key) {
-        case 'date':
-          return 'date';
-        case 'text':
-          return 'plain_text';
-        case 'list':
-          return 'search_select';
-        case 'checkbox':
-          return 'search_select';
-        default:
-          return 'plain_text';
-      }
-    },
-    getAttributeModel(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.attributeModel;
-    },
-    getInputType(key, operator) {
-      if (key === 'created_at' || key === 'last_activity_at')
-        if (operator === 'days_before') return 'plain_text';
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.inputType;
-    },
-    getOperators(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.filterOperators;
-    },
-    getDropdownValues(type) {
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ](this.attributeModel);
-      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type &&
-          attr.attribute_display_type === 'checkbox'
-        );
-      });
-      if (isCustomAttributeCheckbox || type === 'blocked') {
-        return [
-          {
-            id: true,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-          },
-          {
-            id: false,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-          },
-        ];
-      }
-
-      const isCustomAttributeList = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type && attr.attribute_display_type === 'list'
-        );
-      });
-
-      if (isCustomAttributeList) {
-        return allCustomAttributes
-          .find(attr => attr.attribute_key === type)
-          .attribute_values.map(item => {
-            return {
-              id: item,
-              name: item,
-            };
-          });
-      }
-      switch (type) {
-        case 'country_code':
-          return countries;
-        default:
-          return undefined;
-      }
-    },
-    appendNewFilter() {
-      if (this.isSegmentsView) {
-        this.setQueryOperatorOnLastQuery();
-      } else {
-        this.appliedFilters.push({
-          attribute_key: 'name',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      }
-    },
-    setQueryOperatorOnLastQuery() {
-      const lastItemIndex = this.appliedFilters.length - 1;
-      this.appliedFilters[lastItemIndex] = {
-        ...this.appliedFilters[lastItemIndex],
-        query_operator: 'and',
-      };
-      this.$nextTick(() => {
-        this.appliedFilters.push({
-          attribute_key: 'name',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      });
-    },
-    removeFilter(index) {
-      if (this.appliedFilters.length <= 1) {
-        useAlert(this.$t('CONTACTS_FILTER.FILTER_DELETE_ERROR'));
-      } else {
-        this.appliedFilters.splice(index, 1);
-      }
-    },
-    submitFilterQuery() {
-      this.validationErrors = validateConversationOrContactFilters(
-        this.appliedFilters
-      );
-      if (Object.keys(this.validationErrors).length === 0) {
-        this.$store.dispatch(
-          'contacts/setContactFilters',
-          JSON.parse(JSON.stringify(this.appliedFilters))
-        );
-        this.$emit('applyFilter', this.appliedFilters);
-        useTrack(CONTACTS_EVENTS.APPLY_FILTER, {
-          applied_filters: this.appliedFilters.map(filter => ({
-            key: filter.attribute_key,
-            operator: filter.filter_operator,
-            query_operator: filter.query_operator,
-          })),
-        });
-      }
-    },
-    updateSegment() {
-      this.$emit(
-        'updateSegment',
-        this.appliedFilters,
-        this.activeSegmentNewName
-      );
-    },
-    resetFilter(index, currentFilter) {
-      this.appliedFilters[index].filter_operator = this.filterTypes.find(
-        filter => filter.attributeKey === currentFilter.attribute_key
-      ).filterOperators[0].value;
-      this.appliedFilters[index].values = '';
-    },
-    showUserInput(operatorType) {
-      if (operatorType === 'is_present' || operatorType === 'is_not_present')
-        return false;
-      return true;
-    },
-    clearFilters() {
-      this.$emit('clearFilters');
-      this.onClose();
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isSegmentsView">
-        <label class="input-label" :class="{ error: !activeSegmentNewName }">
-          {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
-          <input
-            v-model="activeSegmentNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeSegmentNewName" class="message">
-            {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="input-label">
-          {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
-        </label>
-      </div>
-      <div
-        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
-      >
-        <FilterInputBox
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          grouped-filters
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :error-message="
-            validationErrors[`filter_${i}`]
-              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
-              : ''
-          "
-          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @remove-filter="removeFilter(i)"
-        />
-        <div class="flex items-center gap-2 mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-          <woot-button
-            v-if="hasAppliedFilters && !isSegmentsView"
-            icon="subtract"
-            color-scheme="alert"
-            variant="smooth"
-            size="small"
-            @click="clearFilters"
-          >
-            {{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isSegmentsView"
-            :disabled="!activeSegmentNewName"
-            @click="updateSegment"
-          >
-            {{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.folder-input {
-  @apply w-[50%];
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
deleted file mode 100644
index 067682939..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script setup>
-import { h, ref, computed, defineEmits } from 'vue';
-import {
-  useVueTable,
-  createColumnHelper,
-  getCoreRowModel,
-} from '@tanstack/vue-table';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import { useI18n } from 'vue-i18n';
-
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-
-// Table components
-import Table from 'dashboard/components/table/Table.vue';
-import NameCell from './ContactsTable/NameCell.vue';
-import EmailCell from './ContactsTable/EmailCell.vue';
-import TelCell from './ContactsTable/TelCell.vue';
-import CountryCell from './ContactsTable/CountryCell.vue';
-import ProfilesCell from './ContactsTable/ProfilesCell.vue';
-
-const props = defineProps({
-  contacts: {
-    type: Array,
-    default: () => [],
-  },
-  showSearchEmptyState: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['onSortChange']);
-const { t } = useI18n();
-
-const tableData = computed(() => {
-  if (props.isLoading) {
-    return [];
-  }
-
-  return props.contacts.map(item => {
-    // Note: The attributes used here is in snake case
-    // as it simplier the sort attribute calculation
-    const additional = item.additional_attributes || {};
-    const { last_activity_at: lastActivityAt } = item;
-    const { created_at: createdAt } = item;
-    return {
-      ...item,
-      profiles: additional.social_profiles || {},
-      last_activity_at: lastActivityAt ? dynamicTime(lastActivityAt) : null,
-      created_at: createdAt ? dynamicTime(createdAt) : null,
-    };
-  });
-});
-
-const defaulSpanRender = cellProps =>
-  h(
-    'span',
-    {
-      class: cellProps.getValue() ? '' : 'text-slate-300 dark:text-slate-700',
-    },
-    cellProps.getValue() ? cellProps.getValue() : '---'
-  );
-
-const columnHelper = createColumnHelper();
-const columns = [
-  columnHelper.accessor('name', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
-    cell: cellProps => h(NameCell, cellProps),
-    size: 250,
-  }),
-  columnHelper.accessor('email', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
-    cell: cellProps => h(EmailCell, { email: cellProps.getValue() }),
-    size: 250,
-  }),
-  columnHelper.accessor('phone_number', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
-    size: 200,
-    cell: cellProps =>
-      h(TelCell, {
-        phoneNumber: cellProps.getValue(),
-        defaultCountry: cellProps.row.original.country_code,
-      }),
-  }),
-  columnHelper.accessor('company_name', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('city', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
-    cell: defaulSpanRender,
-    size: 200,
-  }),
-  columnHelper.accessor('country', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
-    size: 200,
-    cell: cellProps =>
-      h(CountryCell, {
-        countryCode: cellProps.row.original.country_code,
-        country: cellProps.getValue(),
-      }),
-  }),
-  columnHelper.accessor('profiles', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
-    size: 200,
-    enableSorting: false,
-    cell: cellProps =>
-      h(ProfilesCell, {
-        profiles: cellProps.getValue(),
-      }),
-  }),
-  columnHelper.accessor('last_activity_at', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('created_at', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-];
-
-// type ColumnSort = {
-//   id: string
-//   desc: boolean
-// }
-// type SortingState = ColumnSort[]
-const sortingState = ref([{ last_activity_at: 'desc' }]);
-
-const table = useVueTable({
-  get data() {
-    return tableData.value;
-  },
-  columns,
-  enableMultiSort: false,
-  getCoreRowModel: getCoreRowModel(),
-  state: {
-    get sorting() {
-      return sortingState.value;
-    },
-  },
-  onSortingChange: updater => {
-    // onSortingChange returns a callback that allows us to trigger the sort when we need
-    // See more docs here: https://tanstack.com/table/latest/docs/api/features/sorting#onsortingchange
-    // IMO, I don't like this API, but it's what we have for now. Would be great if we could just listen the the changes
-    // to the sorting state and emit the event when it changes
-    // But we can easily wrap this later as a separate composable
-    const updatedSortState = updater(sortingState.value);
-    // we pick the first item from the array, as we are not using multi-sorting
-    const [sort] = updatedSortState;
-
-    if (sort) {
-      sortingState.value = updatedSortState;
-      emit('onSortChange', { [sort.id]: sort.desc ? 'desc' : 'asc' });
-    } else {
-      // If the sorting is empty, we reset to the default sorting
-      sortingState.value = [{ last_activity_at: 'desc' }];
-      emit('onSortChange', {});
-    }
-  },
-});
-</script>
-
-<template>
-  <section class="flex-1 h-full overflow-auto bg-white dark:bg-slate-900">
-    <section class="overflow-x-auto">
-      <Table fixed :table="table" type="compact" />
-    </section>
-
-    <EmptyState
-      v-if="showSearchEmptyState"
-      :title="$t('CONTACTS_PAGE.LIST.404')"
-    />
-    <EmptyState
-      v-else-if="!isLoading && !contacts.length"
-      :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
-    />
-    <div v-if="isLoading" class="flex items-center justify-center text-base">
-      <Spinner />
-      <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-  </section>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/CountryCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/CountryCell.vue
deleted file mode 100644
index 4d3d591f6..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/CountryCell.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import { getCountryFlag } from 'dashboard/helper/flag';
-
-const props = defineProps({
-  countryCode: {
-    type: String,
-    default: '',
-  },
-  country: {
-    type: String,
-    default: '',
-  },
-});
-
-const countryFlag = computed(() => {
-  if (!props.countryCode) {
-    return '';
-  }
-
-  return getCountryFlag(props.countryCode);
-});
-
-const formattedCountryName = computed(() => {
-  if (!props.country) {
-    return '';
-  }
-
-  return `${countryFlag.value} ${props.country}`;
-});
-</script>
-
-<template>
-  <BaseCell :content="formattedCountryName" />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/EmailCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/EmailCell.vue
deleted file mode 100644
index e2a023351..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/EmailCell.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-defineProps({
-  email: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <BaseCell>
-    <a
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      class="text-woot-500 dark:text-woot-500"
-      :href="`mailto:${email}`"
-    >
-      {{ email }}
-    </a>
-  </BaseCell>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/NameCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/NameCell.vue
deleted file mode 100644
index 68c0e6f01..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/NameCell.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { inject } from 'vue';
-
-defineProps({
-  row: {
-    type: Object,
-    required: true,
-  },
-});
-
-const route = useRoute();
-const openContactInfoPanel = inject('openContactInfoPanel');
-const isRTL = useMapGetter('accounts/isRTL');
-</script>
-
-<template>
-  <BaseCell>
-    <woot-button
-      variant="clear"
-      class="!px-0"
-      @click="() => openContactInfoPanel(row.original.id)"
-    >
-      <div class="items-center flex" :class="{ 'flex-row-reverse': isRTL }">
-        <Thumbnail
-          size="32px"
-          :src="row.original.thumbnail"
-          :username="row.original.name"
-          :status="row.original.availability_status"
-        />
-        <div class="items-start flex flex-col my-0 mx-2">
-          <h6 class="overflow-hidden text-base whitespace-nowrap text-ellipsis">
-            <router-link
-              :to="`/app/accounts/${route.params.accountId}/contacts/${row.original.id}`"
-              class="text-sm font-medium m-0 capitalize"
-            >
-              {{ row.original.name }}
-            </router-link>
-          </h6>
-          <button
-            class="button clear small link text-slate-600 dark:text-slate-200"
-          >
-            {{ $t('CONTACTS_PAGE.LIST.VIEW_DETAILS') }}
-          </button>
-        </div>
-      </div>
-    </woot-button>
-  </BaseCell>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/ProfilesCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/ProfilesCell.vue
deleted file mode 100644
index 5252a2066..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/ProfilesCell.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
-const props = defineProps({
-  profiles: {
-    type: Object,
-    required: true,
-  },
-});
-
-const filteredProfiles = computed(() =>
-  Object.keys(props.profiles).filter(profile => props.profiles[profile])
-);
-</script>
-
-<template>
-  <BaseCell class="flex gap-2 items-center text-slate-300 dark:text-slate-400">
-    <template v-if="filteredProfiles.length">
-      <a
-        v-for="profile in filteredProfiles"
-        :key="profile"
-        :href="`https://${profile}.com/${profiles[profile]}`"
-        target="_blank"
-        class="hover:text-slate-500"
-        rel="noopener noreferrer nofollow"
-      >
-        <FluentIcon class="size-4" :icon="`brand-${profile}`" />
-      </a>
-    </template>
-  </BaseCell>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/TelCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/TelCell.vue
deleted file mode 100644
index 17beb1ec5..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/TelCell.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import { parsePhoneNumber } from 'libphonenumber-js';
-
-const props = defineProps({
-  phoneNumber: {
-    type: String,
-    default: '',
-  },
-  defaultCountry: {
-    type: String,
-    default: '',
-  },
-});
-
-const formattedNumber = computed(() => {
-  if (!props.phoneNumber) {
-    return '';
-  }
-
-  try {
-    const parsedNumber = parsePhoneNumber(
-      props.phoneNumber,
-      props.defaultCountry
-    );
-
-    if (parsedNumber) {
-      return parsedNumber.formatInternational();
-    }
-    return props.phoneNumber;
-  } catch (error) {
-    return props.phoneNumber;
-  }
-});
-</script>
-
-<template>
-  <BaseCell :content="formattedNumber" />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
deleted file mode 100644
index 8fb292414..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ /dev/null
@@ -1,475 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-
-import ContactsHeader from './Header.vue';
-import ContactsTable from './ContactsTable.vue';
-import ContactInfoPanel from './ContactInfoPanel.vue';
-import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact.vue';
-import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
-import ImportContacts from './ImportContacts.vue';
-import ContactsAdvancedFilters from './ContactsAdvancedFilters.vue';
-import contactFilterItems from '../contactFilterItems';
-import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
-import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
-import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
-import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import countries from 'shared/constants/countries.js';
-import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
-import { useTrack } from 'dashboard/composables';
-
-const DEFAULT_PAGE = 1;
-const FILTER_TYPE_CONTACT = 1;
-
-export default {
-  components: {
-    ContactsHeader,
-    ContactsTable,
-    TableFooter,
-    ContactInfoPanel,
-    CreateContact,
-    ImportContacts,
-    ContactsAdvancedFilters,
-    AddCustomViews,
-    DeleteCustomViews,
-  },
-  provide() {
-    return {
-      openContactInfoPanel: this.openContactInfoPanel,
-    };
-  },
-  props: {
-    label: { type: String, default: '' },
-    segmentsId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      searchQuery: '',
-      showCreateModal: false,
-      showImportModal: false,
-      selectedContactId: '',
-      sortConfig: { last_activity_at: 'desc' },
-      showFiltersModal: false,
-      contactFilterItems: contactFilterItems.map(filter => ({
-        ...filter,
-        attributeName: this.$t(
-          `CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}`
-        ),
-      })),
-      segmentsQuery: {},
-      filterType: FILTER_TYPE_CONTACT,
-      showAddSegmentsModal: false,
-      showDeleteSegmentsModal: false,
-      appliedFilter: [],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'contacts/getContacts',
-      uiFlags: 'contacts/getUIFlags',
-      meta: 'contacts/getMeta',
-      segments: 'customViews/getContactCustomViews',
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    showEmptySearchResult() {
-      const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
-      return hasEmptyResults;
-    },
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    hasActiveSegments() {
-      return this.activeSegment && this.segmentsId !== 0;
-    },
-    isContactAndLabelDashboard() {
-      return (
-        this.$route.name === 'contacts_dashboard' ||
-        this.$route.name === 'contacts_labels_dashboard'
-      );
-    },
-    pageTitle() {
-      if (this.hasActiveSegments) {
-        return this.activeSegment.name;
-      }
-      if (this.label) {
-        return `#${this.label}`;
-      }
-      return this.$t('CONTACTS_PAGE.HEADER');
-    },
-    selectedContact() {
-      if (this.selectedContactId) {
-        const contact = this.records.find(
-          item => this.selectedContactId === item.id
-        );
-        return contact;
-      }
-      return undefined;
-    },
-    showContactViewPane() {
-      return this.selectedContactId !== '';
-    },
-    wrapClass() {
-      return this.showContactViewPane ? 'w-[75%]' : 'w-full';
-    },
-    pageParameter() {
-      const selectedPageNumber = Number(this.$route.query?.page);
-      return !Number.isNaN(selectedPageNumber) &&
-        selectedPageNumber >= DEFAULT_PAGE
-        ? selectedPageNumber
-        : DEFAULT_PAGE;
-    },
-    activeSegment() {
-      if (this.segmentsId) {
-        const [firstValue] = this.segments.filter(
-          view => view.id === Number(this.segmentsId)
-        );
-        return firstValue;
-      }
-      return undefined;
-    },
-    activeSegmentName() {
-      return this.activeSegment?.name;
-    },
-  },
-  watch: {
-    label() {
-      this.fetchContacts(DEFAULT_PAGE);
-      if (this.hasAppliedFilters) {
-        this.clearFilters();
-      }
-    },
-    activeSegment() {
-      if (this.hasActiveSegments) {
-        const payload = this.activeSegment.query;
-        this.fetchSavedFilteredContact(payload, DEFAULT_PAGE);
-      }
-      if (this.hasAppliedFilters && this.$route.name === 'contacts_dashboard') {
-        this.fetchFilteredContacts(DEFAULT_PAGE);
-      } else {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-  },
-  mounted() {
-    this.fetchContacts(this.pageParameter);
-  },
-  methods: {
-    updatePageParam(page) {
-      window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
-    },
-    getSortAttribute() {
-      let sortAttr = Object.keys(this.sortConfig).reduce((acc, sortKey) => {
-        const sortOrder = this.sortConfig[sortKey];
-        if (sortOrder) {
-          const sortOrderSign = sortOrder === 'asc' ? '' : '-';
-          return `${sortOrderSign}${sortKey}`;
-        }
-        return acc;
-      }, '');
-      if (!sortAttr) {
-        this.sortConfig = { last_activity_at: 'desc' };
-        sortAttr = '-last_activity_at';
-      }
-      return sortAttr;
-    },
-    fetchContacts(page) {
-      if (this.isContactAndLabelDashboard) {
-        this.updatePageParam(page);
-        let value = '';
-        if (this.searchQuery.charAt(0) === '+') {
-          value = this.searchQuery.substring(1);
-        } else {
-          value = this.searchQuery;
-        }
-        const requestParams = {
-          page,
-          sortAttr: this.getSortAttribute(),
-          label: this.label,
-        };
-        if (!value) {
-          this.$store.dispatch('contacts/get', requestParams);
-        } else {
-          this.$store.dispatch('contacts/search', {
-            search: encodeURIComponent(value),
-            ...requestParams,
-          });
-        }
-      }
-    },
-    fetchSavedFilteredContact(payload, page) {
-      if (this.hasActiveSegments) {
-        this.updatePageParam(page);
-        this.$store.dispatch('contacts/filter', {
-          queryPayload: payload,
-          page,
-        });
-      }
-    },
-    fetchFilteredContacts(page) {
-      if (this.hasAppliedFilters) {
-        const payload = this.segmentsQuery;
-        this.updatePageParam(page);
-        this.$store.dispatch('contacts/filter', {
-          queryPayload: payload,
-          page,
-        });
-      }
-    },
-
-    onInputSearch(event) {
-      const newQuery = event.target.value;
-      const refetchAllContacts = !!this.searchQuery && newQuery === '';
-      this.searchQuery = newQuery;
-      if (refetchAllContacts) {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-    onSearchSubmit() {
-      this.selectedContactId = '';
-      if (this.searchQuery) {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-    onPageChange(page) {
-      this.selectedContactId = '';
-      if (this.segmentsId !== 0) {
-        const payload = this.activeSegment.query;
-        this.fetchSavedFilteredContact(payload, page);
-      }
-      if (this.hasAppliedFilters) {
-        this.fetchFilteredContacts(page);
-      } else {
-        this.fetchContacts(page);
-      }
-    },
-    openContactInfoPanel(contactId) {
-      this.selectedContactId = contactId;
-      this.showContactInfoPanelPane = true;
-    },
-    closeContactInfoPanel() {
-      this.selectedContactId = '';
-      this.showContactInfoPanelPane = false;
-    },
-    onToggleCreate() {
-      this.showCreateModal = !this.showCreateModal;
-    },
-    onToggleSaveFilters() {
-      this.showAddSegmentsModal = true;
-    },
-    onCloseAddSegmentsModal() {
-      this.showAddSegmentsModal = false;
-    },
-    onToggleDeleteFilters() {
-      this.showDeleteSegmentsModal = true;
-    },
-    onCloseDeleteSegmentsModal() {
-      this.showDeleteSegmentsModal = false;
-    },
-    onToggleImport() {
-      this.showImportModal = !this.showImportModal;
-    },
-    onSortChange(params) {
-      this.sortConfig = params;
-      this.fetchContacts(this.meta.currentPage);
-
-      const sortBy =
-        Object.entries(params).find(pair => Boolean(pair[1])) || [];
-
-      useTrack(CONTACTS_EVENTS.APPLY_SORT, {
-        appliedOn: sortBy[0],
-        order: sortBy[1],
-      });
-    },
-    onToggleFilters() {
-      if (this.hasActiveSegments) {
-        this.initializeSegmentToFilterModal(this.activeSegment);
-      }
-      this.showFiltersModal = true;
-    },
-    closeAdvanceFiltersModal() {
-      this.showFiltersModal = false;
-      this.appliedFilter = [];
-    },
-    onApplyFilter(payload) {
-      this.closeContactInfoPanel();
-      this.segmentsQuery = filterQueryGenerator(payload);
-      this.$store.dispatch('contacts/filter', {
-        queryPayload: filterQueryGenerator(payload),
-      });
-      this.showFiltersModal = false;
-    },
-    onUpdateSegment(payload, segmentName) {
-      const payloadData = {
-        ...this.activeSegment,
-        name: segmentName,
-        query: filterQueryGenerator(payload),
-      };
-      this.$store.dispatch('customViews/update', payloadData);
-      this.closeAdvanceFiltersModal();
-    },
-    clearFilters() {
-      this.$store.dispatch('contacts/clearContactFilters');
-      this.fetchContacts(this.pageParameter);
-    },
-    onExportSubmit() {
-      let query = { payload: [] };
-
-      if (this.hasActiveSegments) {
-        query = this.activeSegment.query;
-      } else if (this.hasAppliedFilters) {
-        query = filterQueryGenerator(this.getAppliedContactFilters);
-      }
-
-      try {
-        this.$store.dispatch('contacts/export', {
-          ...query,
-          label: this.label,
-        });
-        useAlert(this.$t('EXPORT_CONTACTS.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(error.message || this.$t('EXPORT_CONTACTS.ERROR_MESSAGE'));
-      }
-    },
-    setParamsForEditSegmentModal() {
-      // Here we are setting the params for edit segment modal to show the existing values.
-
-      // For custom attributes we get only attribute key.
-      // So we are mapping it to find the input type of the attribute to show in the edit segment modal.
-      const params = {
-        countries: countries,
-        filterTypes: contactFilterItems,
-        allCustomAttributes:
-          this.$store.getters['attributes/getAttributesByModel'](
-            'contact_attribute'
-          ),
-      };
-      return params;
-    },
-    initializeSegmentToFilterModal(activeSegment) {
-      // Here we are setting the params for edit segment modal.
-      //  To show the existing values. when we click on edit segment button.
-
-      // Here we get the query from the active segment.
-      // And we are mapping the query to the actual values.
-      // To show in the edit segment modal by the help of generateValuesForEditCustomViews helper.
-      const query = activeSegment?.query?.payload;
-      if (!Array.isArray(query)) return;
-
-      this.appliedFilter.push(
-        ...query.map(filter => ({
-          attribute_key: filter.attribute_key,
-          attribute_model: filter.attribute_model,
-          filter_operator: filter.filter_operator,
-          values: Array.isArray(filter.values)
-            ? generateValuesForEditCustomViews(
-                filter,
-                this.setParamsForEditSegmentModal()
-              )
-            : [],
-          query_operator: filter.query_operator,
-          custom_attribute_type: filter.custom_attribute_type,
-        }))
-      );
-    },
-    openSavedItemInSegment() {
-      const lastItemInSegments = this.segments[this.segments.length - 1];
-      const lastItemId = lastItemInSegments.id;
-      this.$router.push({
-        name: 'contacts_segments_dashboard',
-        params: { id: lastItemId },
-      });
-    },
-    openLastItemAfterDeleteInSegment() {
-      if (this.segments.length > 0) {
-        this.openSavedItemInSegment();
-      } else {
-        this.$router.push({ name: 'contacts_dashboard' });
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-row w-full">
-    <div class="flex flex-col h-full" :class="wrapClass">
-      <ContactsHeader
-        :search-query="searchQuery"
-        :header-title="pageTitle"
-        :segments-id="segmentsId"
-        this-selected-contact-id=""
-        @on-input-search="onInputSearch"
-        @on-toggle-create="onToggleCreate"
-        @on-toggle-filter="onToggleFilters"
-        @on-search-submit="onSearchSubmit"
-        @on-toggle-import="onToggleImport"
-        @on-export-submit="onExportSubmit"
-        @on-toggle-save-filter="onToggleSaveFilters"
-        @on-toggle-delete-filter="onToggleDeleteFilters"
-        @on-toggle-edit-filter="onToggleFilters"
-      />
-      <ContactsTable
-        :contacts="records"
-        :show-search-empty-state="showEmptySearchResult"
-        :is-loading="uiFlags.isFetching"
-        :active-contact-id="selectedContactId"
-        @on-sort-change="onSortChange"
-      />
-      <TableFooter
-        class="border-t border-slate-75 dark:border-slate-700/50"
-        :current-page="Number(meta.currentPage)"
-        :total-count="meta.count"
-        :page-size="15"
-        @page-change="onPageChange"
-      />
-    </div>
-
-    <AddCustomViews
-      v-if="showAddSegmentsModal"
-      :custom-views-query="segmentsQuery"
-      :filter-type="filterType"
-      :open-last-saved-item="openSavedItemInSegment"
-      @close="onCloseAddSegmentsModal"
-    />
-    <DeleteCustomViews
-      v-if="showDeleteSegmentsModal"
-      v-model:show="showDeleteSegmentsModal"
-      :active-custom-view="activeSegment"
-      :custom-views-id="segmentsId"
-      :active-filter-type="filterType"
-      :open-last-item-after-delete="openLastItemAfterDeleteInSegment"
-      @close="onCloseDeleteSegmentsModal"
-    />
-
-    <ContactInfoPanel
-      v-if="showContactViewPane"
-      :contact="selectedContact"
-      :on-close="closeContactInfoPanel"
-    />
-    <CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
-    <woot-modal v-model:show="showImportModal" :on-close="onToggleImport">
-      <ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
-    </woot-modal>
-    <woot-modal
-      v-model:show="showFiltersModal"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <ContactsAdvancedFilters
-        v-if="showFiltersModal"
-        :on-close="closeAdvanceFiltersModal"
-        :initial-filter-types="contactFilterItems"
-        :initial-applied-filters="appliedFilter"
-        :active-segment-name="activeSegmentName"
-        :is-segments-view="hasActiveSegments"
-        @apply-filter="onApplyFilter"
-        @update-segment="onUpdateSegment"
-        @clear-filters="clearFilters"
-      />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
deleted file mode 100644
index f942536cd..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    searchQuery: {
-      type: String,
-      default: '',
-    },
-    segmentsId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  emits: [
-    'onToggleSaveFilter',
-    'onToggleEditFilter',
-    'onToggleDeleteFilter',
-    'onToggleCreate',
-    'onToggleFilter',
-    'onToggleImport',
-    'onExportSubmit',
-    'onSearchSubmit',
-    'onInputSearch',
-  ],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      showCreateModal: false,
-      showImportModal: false,
-    };
-  },
-  computed: {
-    searchButtonClass() {
-      return this.searchQuery !== ''
-        ? 'opacity-100 translate-x-0 visible'
-        : '-translate-x-px opacity-0 invisible';
-    },
-    ...mapGetters({
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    hasActiveSegments() {
-      return this.segmentsId !== 0;
-    },
-    exportDescription() {
-      return this.hasAppliedFilters
-        ? this.$t('EXPORT_CONTACTS.CONFIRM.FILTERED_MESSAGE')
-        : this.$t('EXPORT_CONTACTS.CONFIRM.MESSAGE');
-    },
-  },
-  methods: {
-    onToggleSegmentsModal() {
-      this.$emit('onToggleSaveFilter');
-    },
-    onToggleEditSegmentsModal() {
-      this.$emit('onToggleEditFilter');
-    },
-    onToggleDeleteSegmentsModal() {
-      this.$emit('onToggleDeleteFilter');
-    },
-    toggleCreate() {
-      this.$emit('onToggleCreate');
-    },
-    toggleFilter() {
-      this.$emit('onToggleFilter');
-    },
-    toggleImport() {
-      this.$emit('onToggleImport');
-    },
-    async submitExport() {
-      const ok =
-        await this.$refs.confirmExportContactsDialog.showConfirmation();
-
-      if (ok) {
-        this.$emit('onExportSubmit');
-      }
-    },
-    submitSearch() {
-      this.$emit('onSearchSubmit');
-    },
-    inputSearch(event) {
-      this.$emit('onInputSearch', event);
-    },
-  },
-};
-</script>
-
-<template>
-  <header
-    class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
-  >
-    <div class="flex justify-between w-full px-4 py-2">
-      <div class="flex flex-col items-center w-full gap-2 md:flex-row">
-        <div class="flex justify-between w-full gap-2">
-          <div
-            class="flex items-center justify-center max-w-full min-w-[6.25rem]"
-          >
-            <woot-sidemenu-icon />
-            <h1
-              class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-            >
-              {{ headerTitle }}
-            </h1>
-          </div>
-          <div
-            class="max-w-[400px] min-w-[100px] flex items-center relative mx-2"
-          >
-            <div class="flex items-center absolute h-full left-2.5">
-              <fluent-icon
-                icon="search"
-                class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
-              />
-            </div>
-            <input
-              type="text"
-              :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
-              class="!pl-9 !pr-[3.75rem] !text-sm !w-full !h-[2.375rem] !m-0 border-slate-100 dark:border-slate-600"
-              :value="searchQuery"
-              @keyup.enter="submitSearch"
-              @input="inputSearch"
-            />
-            <woot-button
-              :is-loading="false"
-              class="absolute h-8 px-2 py-0 ml-2 transition-transform duration-100 ease-linear clear right-1"
-              :class-names="searchButtonClass"
-              @click="submitSearch"
-            >
-              {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
-            </woot-button>
-          </div>
-        </div>
-        <div class="flex gap-1">
-          <div v-if="hasActiveSegments" class="flex gap-2">
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="secondary"
-              icon="edit"
-              @click="onToggleEditSegmentsModal"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
-            </woot-button>
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="alert"
-              icon="delete"
-              @click="onToggleDeleteSegmentsModal"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
-            </woot-button>
-          </div>
-          <div v-if="!hasActiveSegments" class="relative">
-            <div
-              v-if="hasAppliedFilters"
-              class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
-            />
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="secondary"
-              data-testid="create-new-contact"
-              icon="filter"
-              @click="toggleFilter"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
-            </woot-button>
-          </div>
-
-          <woot-button
-            v-if="hasAppliedFilters && !hasActiveSegments"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            color-scheme="alert"
-            variant="clear"
-            icon="save"
-            @click="onToggleSegmentsModal"
-          >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
-          </woot-button>
-          <woot-button
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            color-scheme="success"
-            icon="person-add"
-            data-testid="create-new-contact"
-            @click="toggleCreate"
-          >
-            {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
-          </woot-button>
-
-          <woot-button
-            v-if="isAdmin"
-            color-scheme="info"
-            icon="upload"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            @click="toggleImport"
-          >
-            {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
-          </woot-button>
-
-          <woot-button
-            v-if="isAdmin"
-            color-scheme="info"
-            icon="download"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            @click="submitExport"
-          >
-            {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-    <woot-confirm-modal
-      ref="confirmExportContactsDialog"
-      :title="$t('EXPORT_CONTACTS.CONFIRM.TITLE')"
-      :description="exportDescription"
-      :confirm-label="$t('EXPORT_CONTACTS.CONFIRM.YES')"
-      :cancel-label="$t('EXPORT_CONTACTS.CONFIRM.NO')"
-    />
-  </header>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
deleted file mode 100644
index a6954b501..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import Modal from '../../../../components/Modal.vue';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      show: true,
-      file: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    csvUrl() {
-      return '/downloads/import-contacts-sample.csv';
-    },
-  },
-  mounted() {
-    useTrack(CONTACTS_EVENTS.IMPORT_MODAL_OPEN);
-  },
-  methods: {
-    async uploadFile() {
-      try {
-        if (!this.file) return;
-        await this.$store.dispatch('contacts/import', this.file);
-        this.onClose();
-        useAlert(this.$t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
-        useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
-      } catch (error) {
-        useAlert(error.message || this.$t('IMPORT_CONTACTS.ERROR_MESSAGE'));
-        useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
-      }
-    },
-    handleFileUpload() {
-      this.file = this.$refs.file.files[0];
-    },
-  },
-};
-</script>
-
-<template>
-  <Modal v-model:show="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
-        <p>
-          {{ $t('IMPORT_CONTACTS.DESC') }}
-          <a :href="csvUrl" download="import-contacts-sample">{{
-            $t('IMPORT_CONTACTS.DOWNLOAD_LABEL')
-          }}</a>
-        </p>
-      </woot-modal-header>
-      <div class="flex flex-col p-8">
-        <div class="w-full">
-          <label>
-            <span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
-            <input
-              id="file"
-              ref="file"
-              type="file"
-              accept="text/csv"
-              @change="handleFileUpload"
-            />
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-full">
-            <woot-button
-              :disabled="uiFlags.isCreating || !file"
-              :loading="uiFlags.isCreating"
-              @click="uploadFile"
-            >
-              {{ $t('IMPORT_CONTACTS.FORM.SUBMIT') }}
-            </woot-button>
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('IMPORT_CONTACTS.FORM.CANCEL') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Modal>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
deleted file mode 100644
index 412024de9..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script>
-export default {
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    isCompleted: {
-      type: Boolean,
-      default: false,
-    },
-    date: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['completed', 'edit', 'delete'],
-
-  methods: {
-    onClick() {
-      this.$emit('completed', this.isCompleted);
-    },
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="reminder-wrap">
-    <div class="status-wrap">
-      <input :checked="isCompleted" type="radio" @click="onClick" />
-    </div>
-    <div class="wrap">
-      <p class="content">
-        {{ text }}
-      </p>
-      <div class="footer">
-        <div class="meta">
-          <woot-label
-            :title="date"
-            description="date"
-            icon="ion-android-calendar"
-            color-scheme="secondary"
-          />
-          <woot-label
-            :title="label"
-            description="label"
-            color-scheme="secondary"
-          />
-        </div>
-        <div class="actions">
-          <woot-button
-            variant="smooth"
-            size="small"
-            icon="edit"
-            color-scheme="secondary"
-            class="action-button"
-            @click="onEdit"
-          />
-          <woot-button
-            variant="smooth"
-            size="small"
-            icon="ion-trash-b"
-            color-scheme="secondary"
-            class="action-button"
-            @click="onDelete"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.reminder-wrap {
-  display: flex;
-  margin-bottom: var(--space-smaller);
-
-  .status-wrap {
-    padding: var(--space-small) var(--space-smaller);
-    margin-top: var(--space-smaller);
-  }
-
-  .wrap {
-    padding: var(--space-small);
-
-    .footer {
-      display: flex;
-      justify-content: space-between;
-
-      .meta {
-        display: flex;
-      }
-    }
-  }
-}
-
-.actions {
-  display: none;
-
-  .action-button {
-    margin-right: var(--space-small);
-    height: var(--space-medium);
-    width: var(--space-medium);
-  }
-}
-
-.reminder-wrap:hover {
-  .actions {
-    display: flex;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
deleted file mode 100644
index a9c4e1982..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script>
-export default {
-  emits: ['notes', 'events', 'conversation'],
-
-  methods: {
-    onClickNotes() {
-      this.$emit('notes');
-    },
-
-    onClickEvents() {
-      this.$emit('events');
-    },
-
-    onClickConversation() {
-      this.$emit('conversation');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="wrap">
-    <div class="header">
-      <h5 class="text-lg text-black-900 dark:text-slate-200">
-        {{ $t('EVENTS.HEADER.TITLE') }}
-      </h5>
-    </div>
-    <div class="button-wrap">
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickNotes"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_NOTES') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickEvents"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_EVENTS') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickConversation"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_CONVO') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.wrap {
-  width: 100%;
-  padding: var(--space-normal);
-
-  .button-wrap {
-    display: flex;
-
-    .pill-button {
-      margin-right: var(--space-small);
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
deleted file mode 100644
index 48547f690..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!-- Unused file deprecated -->
-<script>
-import { dynamicTime } from 'shared/helpers/timeHelper';
-export default {
-  props: {
-    eventType: {
-      type: String,
-      default: '',
-    },
-    eventPath: {
-      type: String,
-      default: '',
-    },
-    eventBody: {
-      type: String,
-      default: '',
-    },
-    timeStamp: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ['more'],
-
-  computed: {
-    readableTime() {
-      return dynamicTime(this.timeStamp);
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('more');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="timeline-card-wrap">
-    <div class="icon-chatbox">
-      <i class="ion-chatboxes" />
-    </div>
-    <div class="card-wrap">
-      <div class="header">
-        <div class="text-wrap">
-          <h6 class="text-sm">
-            {{ eventType }}
-          </h6>
-          <span class="event-path">{{ 'on' }} {{ eventPath }}</span>
-        </div>
-        <div class="date-wrap">
-          <span>{{ readableTime }}</span>
-        </div>
-      </div>
-      <div class="comment-wrap">
-        <p class="comment">
-          {{ eventBody }}
-        </p>
-      </div>
-    </div>
-    <div class="icon-more" @click="onClick">
-      <i class="ion-android-more-vertical" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.timeline-card-wrap {
-  display: flex;
-  width: 100%;
-  color: var(--color-body);
-  padding: var(--space-small);
-
-  .icon-chatbox {
-    width: var(--space-large);
-    height: var(--space-large);
-    border-radius: 50%;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    border: 1px solid var(--color-border);
-    background-color: var(--color-background);
-
-    .ion-chatboxes {
-      font-size: var(--font-size-default);
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .card-wrap {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: var(--space-smaller) var(--space-normal) 0;
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-
-      .text-wrap {
-        display: flex;
-      }
-
-      .event-path {
-        font-size: var(--font-size-mini);
-        margin-left: var(--space-smaller);
-      }
-
-      .date-wrap {
-        font-size: var(--font-size-micro);
-      }
-    }
-
-    .comment-wrap {
-      border: 1px solid var(--color-border-light);
-
-      .comment {
-        padding: var(--space-small);
-        font-size: var(--font-size-mini);
-        margin: 0;
-      }
-    }
-  }
-
-  .icon-more {
-    .ion-android-more-vertical {
-      font-size: var(--font-size-medium);
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js b/app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js
deleted file mode 100644
index 549910263..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import AddReminder from '../AddReminder.vue';
-
-let wrapper;
-
-describe('AddReminder', () => {
-  beforeEach(() => {
-    wrapper = shallowMount(AddReminder, {
-      mocks: {
-        $t: x => x,
-        $store: { getters: {}, state: {} },
-      },
-      stubs: { WootButton: { template: '<button />' } },
-    });
-  });
-
-  it('tests resetValue', () => {
-    const resetValue = vi.spyOn(wrapper.vm, 'resetValue');
-    wrapper.vm.content = 'test';
-    wrapper.vm.date = '08/11/2022';
-    wrapper.vm.resetValue();
-    expect(wrapper.vm.content).toEqual('');
-    expect(wrapper.vm.date).toEqual('');
-    expect(resetValue).toHaveBeenCalled();
-  });
-
-  it('tests optionSelected', () => {
-    const optionSelected = vi.spyOn(wrapper.vm, 'optionSelected');
-    wrapper.vm.label = '';
-    wrapper.vm.optionSelected({ target: { value: 'test' } });
-    expect(wrapper.vm.label).toEqual('test');
-    expect(optionSelected).toHaveBeenCalled();
-  });
-
-  it('tests onAdd', () => {
-    const onAdd = vi.spyOn(wrapper.vm, 'onAdd');
-    wrapper.vm.label = 'label';
-    wrapper.vm.content = 'content';
-    wrapper.vm.date = '08/11/2022';
-    wrapper.vm.onAdd();
-    expect(onAdd).toHaveBeenCalled();
-    expect(wrapper.emitted().add[0]).toEqual([
-      { content: 'content', date: '08/11/2022', label: 'label' },
-    ]);
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
deleted file mode 100644
index 0a409e65d..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-import MessageFormatter from 'shared/helpers/MessageFormatter.js';
-
-export default {
-  props: {
-    customAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    listOfAttributes() {
-      return Object.keys(this.customAttributes).filter(key => {
-        const value = this.customAttributes[key];
-        return value !== null && value !== undefined && value !== '';
-      });
-    },
-  },
-  methods: {
-    valueWithLink(attribute) {
-      const parsedAttribute = this.parseAttributeToString(attribute);
-      const messageFormatter = new MessageFormatter(parsedAttribute);
-      return messageFormatter.formattedMessage;
-    },
-    parseAttributeToString(attribute) {
-      switch (typeof attribute) {
-        case 'string':
-          return attribute;
-        case 'object':
-          return JSON.stringify(attribute);
-        default:
-          return `${attribute}`;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="custom-attributes--panel">
-    <div
-      v-for="attribute in listOfAttributes"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <div class="custom-attribute--row__attribute">
-        {{ attribute }}
-      </div>
-      <div>
-        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
-      </div>
-    </div>
-    <p v-if="!listOfAttributes.length">
-      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
-    </p>
-  </div>
-</template>
-
-<style scoped>
-.custom-attributes--panel {
-  margin-bottom: var(--space-normal);
-}
-
-.custom-attribute--row__attribute {
-  font-weight: 500;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
deleted file mode 100644
index 6df8db0bb..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import ContactForm from './ContactForm.vue';
-
-export default {
-  components: {
-    ContactForm,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['cancel', 'update:show'],
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-  },
-  methods: {
-    onCancel() {
-      this.$emit('cancel');
-    },
-    onSuccess() {
-      this.$emit('cancel');
-    },
-    async onSubmit(contactItem) {
-      await this.$store.dispatch('contacts/create', contactItem);
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal
-    v-model:show="localShow"
-    :on-close="onCancel"
-    modal-type="right-aligned"
-  >
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('CREATE_CONTACT.TITLE')"
-        :header-content="$t('CREATE_CONTACT.DESC')"
-      />
-      <ContactForm
-        :in-progress="uiFlags.isCreating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>

From 757fac79d1e59527f9f039c450bc924529e0e174 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:12:07 +0530
Subject: [PATCH 61/74] chore: Update chat list header UI (#10573)

---
 .../dashboard/assets/scss/widgets/_tabs.scss  |   8 ++
 .../dashboard/components/ChatList.vue         |   2 +
 .../dashboard/components/ChatListHeader.vue   | 123 +++++++++++++-----
 .../dashboard/components/ui/Tabs/Tabs.vue     |   9 +-
 .../conversation/ConversationBasicFilter.vue  |  35 ++---
 .../widgets/conversation/FilterItem.vue       |   2 +-
 .../conversation/ConversationView.vue         |  12 ++
 .../conversation/search/PopOverSearch.vue     |  12 +-
 .../conversation/search/SwitchLayout.vue      |  30 ++---
 9 files changed, 161 insertions(+), 72 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index b9999fac9..01ccaf671 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -6,6 +6,14 @@
   @apply border-b border-slate-50 dark:border-slate-800/50;
 }
 
+.tabs--container--compact.tab--chat-type {
+  .tabs-title {
+    a {
+      @apply py-2 text-sm;
+    }
+  }
+}
+
 .tabs {
   @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 796c37451..0438d24af 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -794,6 +794,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
+      :is-on-expanded-layout="isOnExpandedLayout"
       @add-folders="onClickOpenAddFoldersModal"
       @delete-folders="onClickOpenDeleteFoldersModal"
       @filters-modal="onToggleAdvanceFiltersModal"
@@ -823,6 +824,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       v-if="!hasAppliedFiltersOrActiveFolders"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
+      is-compact
       @chat-tab-change="updateAssigneeTab"
     />
 
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index 175b69ef1..6cc60190c 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -1,6 +1,13 @@
 <script setup>
 import { computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import wootConstants from 'dashboard/constants/globals';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
+import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   pageTitle: {
@@ -19,6 +26,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isOnExpandedLayout: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const emit = defineEmits([
@@ -29,6 +40,13 @@ const emit = defineEmits([
   'filtersModal',
 ]);
 
+const { uiSettings, updateUISettings } = useUISettings();
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
 const onBasicFilterChange = (value, type) => {
   emit('basicFilterChange', value, type);
 };
@@ -36,26 +54,48 @@ const onBasicFilterChange = (value, type) => {
 const hasAppliedFiltersOrActiveFolders = computed(() => {
   return props.hasAppliedFilters || props.hasActiveFolders;
 });
+
+const showV4View = computed(() => {
+  return isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CHATWOOT_V4
+  );
+});
+
+const toggleConversationLayout = () => {
+  const { LAYOUT_TYPES } = wootConstants;
+  const {
+    conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
+  } = uiSettings.value;
+  const newViewType =
+    conversationDisplayType === LAYOUT_TYPES.CONDENSED
+      ? LAYOUT_TYPES.EXPANDED
+      : LAYOUT_TYPES.CONDENSED;
+  updateUISettings({
+    conversation_display_type: newViewType,
+    previously_used_conversation_display_type: newViewType,
+  });
+};
 </script>
 
 <template>
   <div
-    class="flex items-center justify-between px-4 py-0"
+    class="flex items-center justify-between px-4 pb-0"
     :class="{
-      'pb-3 border-b border-slate-75 dark:border-slate-700':
-        hasAppliedFiltersOrActiveFolders,
+      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+      'pt-2.5': showV4View,
     }"
   >
     <div class="flex max-w-[85%] justify-center items-center">
       <h1
-        class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100"
+        class="text-lg font-medium break-words truncate text-n-slate-12"
         :title="pageTitle"
       >
         {{ pageTitle }}
       </h1>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>
@@ -63,67 +103,82 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
     <div class="flex items-center gap-1">
       <template v-if="hasAppliedFilters && !hasActiveFolders">
         <div class="relative">
-          <woot-button
+          <NextButton
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
-            size="tiny"
-            variant="smooth"
-            color-scheme="secondary"
-            icon="save"
+            icon="i-lucide-save"
+            slate
+            xs
+            faded
             @click="emit('addFolders')"
           />
-          <div id="saveFilterTeleportTarget" class="absolute mt-2 z-40" />
+          <div
+            id="saveFilterTeleportTarget"
+            class="absolute z-40 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
         </div>
-
-        <woot-button
+        <NextButton
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="alert"
-          icon="dismiss-circle"
+          icon="i-lucide-circle-x"
+          ruby
+          faded
+          xs
           @click="emit('resetFilters')"
         />
       </template>
       <template v-if="hasActiveFolders">
         <div class="relative">
-          <woot-button
+          <NextButton
             id="toggleConversationFilterButton"
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
-            size="tiny"
-            variant="smooth"
-            color-scheme="secondary"
-            icon="edit"
+            icon="i-lucide-pen-line"
+            slate
+            xs
+            faded
             @click="emit('filtersModal')"
           />
           <div
             id="conversationFilterTeleportTarget"
-            class="absolute mt-2 z-40"
+            class="absolute z-40 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
           />
         </div>
-        <woot-button
+        <NextButton
+          id="toggleConversationFilterButton"
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="alert"
-          icon="delete"
+          icon="i-lucide-trash-2"
+          ruby
+          xs
+          faded
           @click="emit('deleteFolders')"
         />
       </template>
       <div v-else class="relative">
-        <woot-button
+        <NextButton
           id="toggleConversationFilterButton"
           v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="filter"
-          size="tiny"
+          icon="i-lucide-list-filter"
+          slate
+          xs
+          faded
           @click="emit('filtersModal')"
         />
-        <div id="conversationFilterTeleportTarget" class="absolute mt-2 z-40" />
+        <div
+          id="conversationFilterTeleportTarget"
+          class="absolute z-40 mt-2"
+          :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+        />
       </div>
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
+        :is-on-expanded-layout="isOnExpandedLayout"
         @change-filter="onBasicFilterChange"
       />
+      <SwitchLayout
+        v-if="showV4View"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="toggleConversationLayout"
+      />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
index 3a7344fb4..83653d8a6 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
@@ -11,6 +11,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isCompact: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['change']);
@@ -59,7 +63,10 @@ onMounted(() => {
 
 <template>
   <div
-    :class="{ 'tabs--container--with-border': border }"
+    :class="{
+      'tabs--container--with-border': border,
+      'tabs--container--compact': isCompact,
+    }"
     class="tabs--container"
   >
     <button
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index 39971b4a6..e328f86b4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -3,6 +3,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import FilterItem from './FilterItem.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const CHAT_STATUS_FILTER_ITEMS = Object.freeze([
   'open',
@@ -26,6 +27,13 @@ const SORT_ORDER_ITEMS = Object.freeze([
 export default {
   components: {
     FilterItem,
+    NextButton,
+  },
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: ['changeFilter'],
   setup() {
@@ -85,22 +93,25 @@ export default {
 
 <template>
   <div class="relative flex">
-    <woot-button
+    <NextButton
       v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
-      variant="smooth"
-      size="tiny"
-      color-scheme="secondary"
-      class="selector-button"
-      icon="sort-icon"
+      icon="i-lucide-arrow-up-down"
+      slate
+      faded
+      xs
       @click="toggleDropdown"
     />
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
+      class="mt-1 dropdown-pane dropdown-pane--open !w-52 !p-4 top-6 border !border-n-weak dark:!border-n-weak !bg-n-alpha-3 dark:!bg-n-alpha-3 backdrop-blur-[100px]"
+      :class="{
+        'ltr:left-0 rtl:right-0': !isOnExpandedLayout,
+        'ltr:right-0 rtl:left-0': isOnExpandedLayout,
+      }"
     >
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <FilterItem
@@ -112,7 +123,7 @@ export default {
         />
       </div>
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <FilterItem
@@ -126,9 +137,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.basic-filter {
-  @apply w-52 p-4 top-6;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
index 87a1f73b6..9b5e7f9a6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
@@ -40,7 +40,7 @@ export default {
 <template>
   <select
     v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-weak text-n-slate-12"
     @change="onTabChange()"
   >
     <option v-for="value in items" :key="value" :value="value">
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index af548d5da..d0e1610e9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAccount } from 'dashboard/composables/useAccount';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import PopOverSearch from './search/PopOverSearch.vue';
@@ -8,6 +9,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export default {
   components: {
@@ -52,10 +54,12 @@ export default {
   },
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
+    const { accountId } = useAccount();
 
     return {
       uiSettings,
       updateUISettings,
+      accountId,
     };
   },
   data() {
@@ -67,6 +71,7 @@ export default {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -90,6 +95,12 @@ export default {
       }
       return false;
     },
+    showPopOverSearch() {
+      return !this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
   },
   watch: {
     conversationId() {
@@ -205,6 +216,7 @@ export default {
       @conversation-load="onConversationLoad"
     >
       <PopOverSearch
+        v-if="showPopOverSearch"
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle-conversation-layout="toggleConversationLayout"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 09c4e11ba..3adb9910e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -34,25 +34,25 @@ export default {
 <template>
   <div class="relative">
     <div
-      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
+      class="flex px-4 pb-1 justify-between items-center flex-row gap-1 pt-2.5 border-b border-transparent"
     >
       <woot-sidemenu-icon
         size="tiny"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
+        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5 flex-shrink-0 focus:!bg-n-solid-3 dark:!hover:bg-n-solid-2 hover:!bg-n-alpha-2"
       />
       <router-link
         :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
+        class="inline-flex items-center flex-1 h-6 min-w-0 gap-1 px-2 py-0 text-left rounded-md rtl:mr-2.5 search-link rtl:text-right bg-n-slate-9/10 hover:bg-n-slate-3"
       >
-        <div class="flex">
+        <div class="flex flex-shrink-0">
           <fluent-icon
             icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
+            class="search--icon text-n-slate-11"
             size="16"
           />
         </div>
         <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
+          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-n-slate-11"
         >
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </p>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
index 4ebe1ac8f..faf0a124f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     isOnExpandedLayout: {
       type: Boolean,
@@ -16,22 +21,17 @@ export default {
 </script>
 
 <template>
-  <woot-button
+  <NextButton
     v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-    icon="arrow-right-import"
-    size="tiny"
-    variant="smooth"
-    color-scheme="secondary"
-    class="layout-switch__container"
-    :class="{ expanded: isOnExpandedLayout }"
+    :icon="
+      isOnExpandedLayout
+        ? 'i-lucide-arrow-left-to-line'
+        : 'i-lucide-arrow-right-to-line'
+    "
+    slate
+    xs
+    faded
+    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0"
     @click="toggle"
   />
 </template>
-
-<style lang="scss" soped>
-.layout-switch__container {
-  &.expanded .icon {
-    transform: rotate(180deg);
-  }
-}
-</style>

From 67e52d7d512b37a6ca4c2fdfae4d83153ccea78d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:22:52 +0530
Subject: [PATCH 62/74] fix: Chat list header overflow issue (#10577)

# Pull Request Template

## Description

This PR fixes the overflow issue with the chat list header title.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Before**
<img width="484" alt="image"
src="https://github.com/user-attachments/assets/e46f6daf-e2f3-4f1c-ba33-00a932d7788f"
/>


**After**
<img width="484" alt="image"
src="https://github.com/user-attachments/assets/d45808aa-ebbd-47e4-be32-f643c22b363f"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/components/ChatListHeader.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index 6cc60190c..441693a72 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -80,22 +80,22 @@ const toggleConversationLayout = () => {
 
 <template>
   <div
-    class="flex items-center justify-between px-4 pb-0"
+    class="flex items-center justify-between gap-2 px-4 pb-0"
     :class="{
       'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
       'pt-2.5': showV4View,
     }"
   >
-    <div class="flex max-w-[85%] justify-center items-center">
+    <div class="flex items-center justify-center min-w-0">
       <h1
-        class="text-lg font-medium break-words truncate text-n-slate-12"
+        class="text-lg font-medium truncate text-n-slate-12"
         :title="pageTitle"
       >
         {{ pageTitle }}
       </h1>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>

From 19ff5bdd5e53c576edef43b07ab171f46fcdcfdd Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 13 Dec 2024 07:12:22 +0530
Subject: [PATCH 63/74] feat: Add new message bubbles (#10481)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../dashboard/assets/scss/_woot.scss          |    8 +-
 .../components-next/icon/FileIcon.story.vue   |   36 +
 .../components-next/icon/FileIcon.vue         |   38 +
 .../components-next/message/Message.vue       |  352 ++++
 .../components-next/message/MessageError.vue  |   31 +
 .../components-next/message/MessageMeta.vue   |   77 +
 .../components-next/message/MessageStatus.vue |   93 +
 .../message/bubbles/Activity.vue              |   16 +
 .../message/bubbles/Attachments.vue           |   30 +
 .../components-next/message/bubbles/Audio.vue |   44 +
 .../components-next/message/bubbles/Base.vue  |   90 +
 .../message/bubbles/BaseAttachment.vue        |   78 +
 .../message/bubbles/Contact.vue               |  137 ++
 .../components-next/message/bubbles/Dyte.vue  |  109 ++
 .../message/bubbles/Email/EmailMeta.vue       |   98 ++
 .../message/bubbles/Email/Index.vue           |  133 ++
 .../message/bubbles/Email/removeReply.js      |  126 ++
 .../components-next/message/bubbles/File.vue  |   73 +
 .../components-next/message/bubbles/Image.vue |  111 ++
 .../message/bubbles/InstagramStory.vue        |   89 +
 .../message/bubbles/Location.vue              |  108 ++
 .../message/bubbles/Text/FormattedContent.vue |   31 +
 .../message/bubbles/Text/Index.vue            |   65 +
 .../message/bubbles/Unsupported.vue           |    9 +
 .../components-next/message/bubbles/Video.vue |   84 +
 .../message/chips/AttachmentChips.vue         |  106 ++
 .../components-next/message/chips/Audio.vue   |  133 ++
 .../components-next/message/chips/File.vue    |   72 +
 .../components-next/message/chips/Image.vue   |   52 +
 .../components-next/message/chips/Video.vue   |   52 +
 .../components-next/message/constants.js      |   72 +
 .../message/fixtures/emailConversation.js     |  382 +++++
 .../message/fixtures/instagramConversation.js | 1096 ++++++++++++
 .../message/fixtures/newsletterEmail.js       |  156 ++
 .../message/fixtures/simpleEmail.js           |   85 +
 .../message/fixtures/textOnly.js              |  715 ++++++++
 .../message/fixtures/textWithMedia.js         | 1526 +++++++++++++++++
 .../components-next/message/provider.js       |   33 +
 .../message/stories/EmailMessages.story.vue   |   45 +
 .../stories/InstagramBubbles.story.vue        |  137 ++
 .../stories/InstagramMessages.story.vue       |   44 +
 .../message/stories/MediaBubbles.story.vue    |  260 +++
 .../message/stories/MessageBubbles.story.vue  |  181 ++
 .../message/stories/TextMessages.story.vue    |   45 +
 .../dashboard/composables/useTransformKeys.js |   12 +-
 .../dashboard/i18n/locale/en/chatlist.json    |    7 +-
 .../i18n/locale/en/conversation.json          |   13 +-
 .../dashboard/i18n/locale/en/settings.json    |    4 +
 package.json                                  |    2 +
 pnpm-lock.yaml                                |  269 +++
 tailwind.config.js                            |  132 +-
 theme/colors.js                               |    1 +
 theme/icons.js                                |  116 ++
 53 files changed, 7781 insertions(+), 33 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/icon/FileIcon.story.vue
 create mode 100644 app/javascript/dashboard/components-next/icon/FileIcon.vue
 create mode 100644 app/javascript/dashboard/components-next/message/Message.vue
 create mode 100644 app/javascript/dashboard/components-next/message/MessageError.vue
 create mode 100644 app/javascript/dashboard/components-next/message/MessageMeta.vue
 create mode 100644 app/javascript/dashboard/components-next/message/MessageStatus.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Activity.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Audio.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Base.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Contact.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/File.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Image.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Location.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Video.vue
 create mode 100644 app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
 create mode 100644 app/javascript/dashboard/components-next/message/chips/Audio.vue
 create mode 100644 app/javascript/dashboard/components-next/message/chips/File.vue
 create mode 100644 app/javascript/dashboard/components-next/message/chips/Image.vue
 create mode 100644 app/javascript/dashboard/components-next/message/chips/Video.vue
 create mode 100644 app/javascript/dashboard/components-next/message/constants.js
 create mode 100644 app/javascript/dashboard/components-next/message/fixtures/emailConversation.js
 create mode 100644 app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
 create mode 100644 app/javascript/dashboard/components-next/message/fixtures/newsletterEmail.js
 create mode 100644 app/javascript/dashboard/components-next/message/fixtures/simpleEmail.js
 create mode 100644 app/javascript/dashboard/components-next/message/fixtures/textOnly.js
 create mode 100644 app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
 create mode 100644 app/javascript/dashboard/components-next/message/provider.js
 create mode 100644 app/javascript/dashboard/components-next/message/stories/EmailMessages.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/InstagramBubbles.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/InstagramMessages.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/MediaBubbles.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/MessageBubbles.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/TextMessages.story.vue
 create mode 100644 theme/icons.js

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index fdd467f5f..c6304cf19 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -135,6 +135,7 @@
     --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;
@@ -142,10 +143,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.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
 
-  body.dark {
+  .dark {
     /* slate */
     --slate-1: 17 17 19;
     --slate-2: 24 25 27;
@@ -221,6 +222,7 @@
     --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;
@@ -230,7 +232,7 @@
     --black-alpha-2: 0, 0, 0, 0.2;
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
   /* NEXT COLORS END */
 
diff --git a/app/javascript/dashboard/components-next/icon/FileIcon.story.vue b/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
new file mode 100644
index 000000000..3a831b96f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
@@ -0,0 +1,36 @@
+<script setup>
+import FileIcon from './FileIcon.vue';
+const files = [
+  { name: 'file.7z', type: '7z' },
+  { name: 'file.zip', type: 'zip' },
+  { name: 'file.rar', type: 'rar' },
+  { name: 'file.tar', type: 'tar' },
+  { name: 'file.csv', type: 'csv' },
+  { name: 'file.docx', type: 'docx' },
+  { name: 'file.doc', type: 'doc' },
+  { name: 'file.odt', type: 'odt' },
+  { name: 'file.pdf', type: 'pdf' },
+  { name: 'file.ppt', type: 'ppt' },
+  { name: 'file.pptx', type: 'pptx' },
+  { name: 'file.rtf', type: 'rtf' },
+  { name: 'file.json', type: 'json' },
+  { name: 'file.txt', type: 'txt' },
+  { name: 'file.xls', type: 'xls' },
+  { name: 'file.xlsx', type: 'xlsx' },
+];
+</script>
+
+<template>
+  <Story title="Components/Icons/FileIcon">
+    <div class="grid grid-cols-4 gap-5">
+      <div
+        v-for="file in files"
+        :key="file.type"
+        class="flex items-center gap-2"
+      >
+        <FileIcon :file-type="file.type" class="size-6" />
+        <p>{{ file.name }}</p>
+      </div>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/FileIcon.vue b/app/javascript/dashboard/components-next/icon/FileIcon.vue
new file mode 100644
index 000000000..8dd9e7ce1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/FileIcon.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { fileType } = defineProps({
+  fileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const fileTypeIcon = computed(() => {
+  const fileIconMap = {
+    '7z': 'i-woot-file-zip',
+    csv: 'i-woot-file-csv',
+    doc: 'i-woot-file-doc',
+    docx: 'i-woot-file-doc',
+    json: 'i-woot-file-txt',
+    odt: 'i-woot-file-doc',
+    pdf: 'i-woot-file-pdf',
+    ppt: 'i-woot-file-ppt',
+    pptx: 'i-woot-file-ppt',
+    rar: 'i-woot-file-zip',
+    rtf: 'i-woot-file-doc',
+    tar: 'i-woot-file-zip',
+    txt: 'i-woot-file-txt',
+    xls: 'i-woot-file-xls',
+    xlsx: 'i-woot-file-xls',
+    zip: 'i-woot-file-zip',
+  };
+
+  return fileIconMap[fileType] || 'i-teenyicons-text-document-solid';
+});
+</script>
+
+<template>
+  <Icon :icon="fileTypeIcon" />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
new file mode 100644
index 000000000..07bcc203b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -0,0 +1,352 @@
+<script setup>
+import { computed, defineAsyncComponent } from 'vue';
+import { provideMessageContext } from './provider.js';
+import {
+  MESSAGE_TYPES,
+  ATTACHMENT_TYPES,
+  MESSAGE_VARIANTS,
+  SENDER_TYPES,
+  ORIENTATION,
+  MESSAGE_STATUS,
+} from './constants';
+
+import Avatar from 'next/avatar/Avatar.vue';
+
+import TextBubble from './bubbles/Text/Index.vue';
+import ActivityBubble from './bubbles/Activity.vue';
+import ImageBubble from './bubbles/Image.vue';
+import FileBubble from './bubbles/File.vue';
+import AudioBubble from './bubbles/Audio.vue';
+import VideoBubble from './bubbles/Video.vue';
+import InstagramStoryBubble from './bubbles/InstagramStory.vue';
+import AttachmentsBubble from './bubbles/Attachments.vue';
+import EmailBubble from './bubbles/Email/Index.vue';
+import UnsupportedBubble from './bubbles/Unsupported.vue';
+import ContactBubble from './bubbles/Contact.vue';
+import DyteBubble from './bubbles/Dyte.vue';
+const LocationBubble = defineAsyncComponent(
+  () => import('./bubbles/Location.vue')
+);
+
+import MessageError from './MessageError.vue';
+import MessageMeta from './MessageMeta.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} ContentAttributes
+ * @property {string} externalError - an error message to be shown if the message failed to send
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {ContentAttributes} [contentAttributes={}] - Additional attributes of the message content
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ * @property {Sender|null} [sender=null] - The sender information
+ * @property {boolean} [private=false] - Whether the message is private
+ * @property {number|null} [senderId=null] - The ID of the sender
+ * @property {number} createdAt - Timestamp when the message was created
+ * @property {number} currentUserId - The ID of the current user
+ * @property {number} id - The unique identifier for the message
+ * @property {number} messageType - The type of message (must be one of MESSAGE_TYPES)
+ * @property {string|null} [error=null] - Error message if the message failed to send
+ * @property {string|null} [senderType=null] - The type of the sender
+ * @property {string} content - The message content
+ */
+
+// eslint-disable-next-line vue/define-macros-order
+const props = defineProps({
+  id: { type: Number, required: true },
+  messageType: {
+    type: Number,
+    required: true,
+    validator: value => Object.values(MESSAGE_TYPES).includes(value),
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  senderId: {
+    type: Number,
+    default: null,
+  },
+  senderType: {
+    type: String,
+    default: null,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => {},
+  },
+  currentUserId: {
+    type: Number,
+    required: true,
+  },
+  groupWithNext: {
+    type: Boolean,
+    default: false,
+  },
+  inReplyTo: {
+    type: Object,
+    default: null,
+  },
+  isEmailInbox: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Computes the message variant based on props
+ * @type {import('vue').ComputedRef<'user'|'agent'|'activity'|'private'|'bot'|'template'>}
+ */
+const variant = computed(() => {
+  if (props.private) return MESSAGE_VARIANTS.PRIVATE;
+  if (props.isEmailInbox) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) {
+      return MESSAGE_VARIANTS.EMAIL;
+    }
+  }
+  if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
+  if (props.contentAttributes.isUnsupported)
+    return MESSAGE_VARIANTS.UNSUPPORTED;
+
+  const variants = {
+    [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
+    [MESSAGE_TYPES.ACTIVITY]: MESSAGE_VARIANTS.ACTIVITY,
+    [MESSAGE_TYPES.OUTGOING]: MESSAGE_VARIANTS.AGENT,
+    [MESSAGE_TYPES.TEMPLATE]: MESSAGE_VARIANTS.TEMPLATE,
+  };
+
+  return variants[props.messageType] || MESSAGE_VARIANTS.USER;
+});
+
+const isMyMessage = computed(() => {
+  const senderId = props.senderId ?? props.sender?.id;
+  const senderType = props.senderType ?? props.sender?.type;
+
+  if (!senderType || !senderId) return false;
+
+  return (
+    senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
+    props.currentUserId === senderId
+  );
+});
+
+/**
+ * Computes the message orientation based on sender type and message type
+ * @returns {import('vue').ComputedRef<'left'|'right'|'center'>} The computed orientation
+ */
+const orientation = computed(() => {
+  if (isMyMessage.value) {
+    return ORIENTATION.RIGHT;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return ORIENTATION.CENTER;
+
+  return ORIENTATION.LEFT;
+});
+
+const flexOrientationClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'justify-start',
+    [ORIENTATION.RIGHT]: 'justify-end',
+    [ORIENTATION.CENTER]: 'justify-center',
+  };
+
+  return map[orientation.value];
+});
+
+const gridClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
+    [ORIENTATION.RIGHT]: 'grid grid-cols-1fr',
+  };
+
+  return map[orientation.value];
+});
+
+const gridTemplate = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: `
+      "avatar bubble"
+      "spacer meta"
+    `,
+    [ORIENTATION.RIGHT]: `
+      "bubble"
+      "meta"
+    `,
+  };
+
+  return map[orientation.value];
+});
+
+const shouldGroupWithNext = computed(() => {
+  if (props.status === MESSAGE_STATUS.FAILED) return false;
+
+  return props.groupWithNext;
+});
+
+const shouldShowAvatar = computed(() => {
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return false;
+  if (orientation.value === ORIENTATION.RIGHT) return false;
+
+  return true;
+});
+
+const componentToRender = computed(() => {
+  if (props.isEmailInbox && !props.private) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
+  }
+
+  if (props.contentAttributes.isUnsupported) {
+    return UnsupportedBubble;
+  }
+
+  if (props.contentAttributes.type === 'dyte') {
+    return DyteBubble;
+  }
+
+  if (props.contentAttributes.imageType === 'story_mention') {
+    return InstagramStoryBubble;
+  }
+
+  if (props.attachments.length === 1) {
+    const fileType = props.attachments[0].fileType;
+
+    if (!props.content) {
+      if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
+      if (fileType === ATTACHMENT_TYPES.FILE) return FileBubble;
+      if (fileType === ATTACHMENT_TYPES.AUDIO) return AudioBubble;
+      if (fileType === ATTACHMENT_TYPES.VIDEO) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.IG_REEL) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.LOCATION) return LocationBubble;
+    }
+    // Attachment content is the name of the contact
+    if (fileType === ATTACHMENT_TYPES.CONTACT) return ContactBubble;
+  }
+
+  if (props.attachments.length > 1 && !props.content) {
+    return AttachmentsBubble;
+  }
+
+  return TextBubble;
+});
+
+provideMessageContext({
+  variant,
+  inReplyTo: props.inReplyTo,
+  orientation,
+  isMyMessage,
+});
+</script>
+
+<template>
+  <div
+    class="flex w-full"
+    :data-message-id="props.id"
+    :class="[flexOrientationClass, shouldGroupWithNext ? 'mb-2' : 'mb-4']"
+  >
+    <div v-if="variant === MESSAGE_VARIANTS.ACTIVITY">
+      <ActivityBubble :content="content" />
+    </div>
+    <div
+      v-else
+      :class="[
+        gridClass,
+        {
+          'gap-y-2': !shouldGroupWithNext,
+          'w-full': variant === MESSAGE_VARIANTS.EMAIL,
+        },
+      ]"
+      class="gap-x-3"
+      :style="{
+        gridTemplateAreas: gridTemplate,
+      }"
+    >
+      <div
+        v-if="!shouldGroupWithNext && shouldShowAvatar"
+        class="[grid-area:avatar] flex items-end"
+      >
+        <Avatar
+          :name="sender ? sender.name : ''"
+          :src="sender?.thumbnail"
+          :size="24"
+        />
+      </div>
+      <div
+        class="[grid-area:bubble]"
+        :class="{
+          'pl-9': ORIENTATION.RIGHT === orientation,
+        }"
+      >
+        <Component :is="componentToRender" v-bind="props" />
+      </div>
+      <MessageError
+        v-if="contentAttributes.externalError"
+        class="[grid-area:meta]"
+        :class="flexOrientationClass"
+        :error="contentAttributes.externalError"
+      />
+      <MessageMeta
+        v-else-if="!shouldGroupWithNext"
+        class="[grid-area:meta]"
+        :class="flexOrientationClass"
+        :sender="props.sender"
+        :status="props.status"
+        :private="props.private"
+        :is-my-message="isMyMessage"
+        :created-at="props.createdAt"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/MessageError.vue b/app/javascript/dashboard/components-next/message/MessageError.vue
new file mode 100644
index 000000000..128ab0b06
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/MessageError.vue
@@ -0,0 +1,31 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  error: { type: String, required: true },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="text-xs text-n-ruby-11 flex items-center gap-1.5">
+    <span>{{ t('CHAT_LIST.FAILED_TO_SEND') }}</span>
+    <div class="relative group">
+      <div
+        class="bg-n-alpha-2 rounded-md size-5 grid place-content-center cursor-pointer"
+      >
+        <Icon
+          icon="i-lucide-alert-triangle"
+          class="text-n-ruby-11 size-[14px]"
+        />
+      </div>
+      <div
+        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 right-0 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+      >
+        {{ error }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/MessageMeta.vue b/app/javascript/dashboard/components-next/message/MessageMeta.vue
new file mode 100644
index 000000000..237fb7c5b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/MessageMeta.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+
+import MessageStatus from './MessageStatus.vue';
+import Icon from 'next/icon/Icon.vue';
+
+import { MESSAGE_STATUS } from './constants';
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {boolean} [private=false] - Whether the message is private
+ * @property {isMyMessage} [private=false] - Whether the message is sent by the current user or not
+ * @property {number} createdAt - Timestamp when the message was created
+ * @property {Sender|null} [sender=null] - The sender information
+ */
+
+const props = defineProps({
+  sender: {
+    type: Object,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  isMyMessage: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+});
+
+const readableTime = computed(() =>
+  messageTimestamp(props.createdAt, 'LLL d, h:mm a')
+);
+
+const showSender = computed(() => !props.isMyMessage && props.sender);
+</script>
+
+<template>
+  <div class="text-xs text-n-slate-11 flex items-center gap-1.5">
+    <div class="inline">
+      <span v-if="showSender" class="inline capitalize">{{ sender.name }}</span>
+      <span v-if="showSender && readableTime" class="inline"> • </span>
+      <span class="inline">{{ readableTime }}</span>
+    </div>
+    <Icon
+      v-if="props.private"
+      icon="i-lucide-lock-keyhole"
+      class="text-n-slate-10 size-3"
+    />
+    <MessageStatus v-if="props.isMyMessage" :status />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/MessageStatus.vue b/app/javascript/dashboard/components-next/message/MessageStatus.vue
new file mode 100644
index 000000000..d8f996cf5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/MessageStatus.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { MESSAGE_STATUS } from './constants';
+
+import Icon from 'next/icon/Icon.vue';
+
+const { status } = defineProps({
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+});
+
+const { t } = useI18n();
+
+const progresIconSequence = [
+  'i-lucide-clock-1',
+  'i-lucide-clock-2',
+  'i-lucide-clock-3',
+  'i-lucide-clock-4',
+  'i-lucide-clock-5',
+  'i-lucide-clock-6',
+  'i-lucide-clock-7',
+  'i-lucide-clock-8',
+  'i-lucide-clock-9',
+  'i-lucide-clock-10',
+  'i-lucide-clock-11',
+  'i-lucide-clock-12',
+];
+
+const progessIcon = ref(progresIconSequence[0]);
+
+const rotateIcon = () => {
+  const currentIndex = progresIconSequence.indexOf(progessIcon.value);
+  const nextIndex = (currentIndex + 1) % progresIconSequence.length;
+  progessIcon.value = progresIconSequence[nextIndex];
+};
+
+useIntervalFn(rotateIcon, 500, {
+  immediate: status === MESSAGE_STATUS.PROGRESS,
+  immediateCallback: false,
+});
+
+const statusIcon = computed(() => {
+  const statusIconMap = {
+    [MESSAGE_STATUS.SENT]: 'i-lucide-check',
+    [MESSAGE_STATUS.DELIVERED]: 'i-lucide-check-check',
+    [MESSAGE_STATUS.READ]: 'i-lucide-check-check',
+  };
+
+  return statusIconMap[status];
+});
+
+const statusColor = computed(() => {
+  const statusIconMap = {
+    [MESSAGE_STATUS.SENT]: 'text-n-slate-10',
+    [MESSAGE_STATUS.DELIVERED]: 'text-n-slate-10',
+    [MESSAGE_STATUS.READ]: 'text-[#7EB6FF]',
+  };
+
+  return statusIconMap[status];
+});
+
+const tooltipText = computed(() => {
+  const statusTextMap = {
+    [MESSAGE_STATUS.SENT]: t('CHAT_LIST.SENT'),
+    [MESSAGE_STATUS.DELIVERED]: t('CHAT_LIST.DELIVERED'),
+    [MESSAGE_STATUS.READ]: t('CHAT_LIST.MESSAGE_READ'),
+    [MESSAGE_STATUS.PROGRESS]: t('CHAT_LIST.SENDING'),
+  };
+
+  return statusTextMap[status];
+});
+</script>
+
+<template>
+  <Icon
+    v-if="status === MESSAGE_STATUS.PROGRESS"
+    v-tooltip.top-start="tooltipText"
+    :icon="progessIcon"
+    class="text-n-slate-10"
+  />
+  <Icon
+    v-else
+    v-tooltip.top-start="tooltipText"
+    :icon="statusIcon"
+    :class="statusColor"
+    class="size-[14px]"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Activity.vue b/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
new file mode 100644
index 000000000..72fa1a3b9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
@@ -0,0 +1,16 @@
+<script setup>
+import BaseBubble from './Base.vue';
+
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <BaseBubble class="px-2 py-0.5" data-bubble-name="activity">
+    <span v-dompurify-html="content" />
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
new file mode 100644
index 000000000..af3593d82
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
@@ -0,0 +1,30 @@
+<script setup>
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <BaseBubble class="grid gap-2 bg-transparent" data-bubble-name="attachments">
+    <AttachmentChips :attachments="attachments" class="gap-1" />
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
new file mode 100644
index 000000000..eed369abc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+</script>
+
+<template>
+  <BaseBubble class="bg-transparent" data-bubble-name="audio">
+    <AudioChip
+      :attachment="attachment"
+      class="p-2 text-n-slate-12 bg-n-alpha-3"
+    />
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
new file mode 100644
index 000000000..a6530f743
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { computed } from 'vue';
+
+import { emitter } from 'shared/helpers/mitt';
+import { useMessageContext } from '../provider.js';
+import { useI18n } from 'vue-i18n';
+
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
+
+const { variant, orientation, inReplyTo } = useMessageContext();
+const { t } = useI18n();
+
+const varaintBaseMap = {
+  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
+  [MESSAGE_VARIANTS.PRIVATE]:
+    'bg-n-solid-amber text-n-amber-12 [&_.prosemirror-mention-node]:font-semibold',
+  [MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 text-n-slate-12',
+  [MESSAGE_VARIANTS.ACTIVITY]: 'bg-n-alpha-1 text-n-slate-11 text-sm',
+  [MESSAGE_VARIANTS.BOT]: 'bg-n-solid-iris text-n-slate-12',
+  [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
+  [MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
+  [MESSAGE_VARIANTS.EMAIL]: 'bg-n-alpha-2 w-full',
+  [MESSAGE_VARIANTS.UNSUPPORTED]:
+    'bg-n-solid-amber/70 border border-dashed border-n-amber-12 text-n-amber-12',
+};
+
+const orientationMap = {
+  [ORIENTATION.LEFT]: 'rounded-xl rounded-bl-sm',
+  [ORIENTATION.RIGHT]: 'rounded-xl rounded-br-sm',
+  [ORIENTATION.CENTER]: 'rounded-md',
+};
+
+const messageClass = computed(() => {
+  const classToApply = [varaintBaseMap[variant.value]];
+
+  if (variant.value !== MESSAGE_VARIANTS.ACTIVITY) {
+    classToApply.push(orientationMap[orientation.value]);
+  } else {
+    classToApply.push('rounded-lg');
+  }
+
+  return classToApply;
+});
+
+const scrollToMessage = () => {
+  emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
+    messageId: this.message.id,
+  });
+};
+
+const previewMessage = computed(() => {
+  if (!inReplyTo) return '';
+
+  const { content, attachments } = inReplyTo;
+
+  if (content) return content;
+  if (attachments?.length) {
+    const firstAttachment = attachments[0];
+    const fileType = firstAttachment.fileType ?? firstAttachment.file_type;
+
+    return t(`CHAT_LIST.ATTACHMENTS.${fileType}.CONTENT`);
+  }
+
+  return t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND');
+});
+</script>
+
+<template>
+  <div
+    class="text-sm min-w-32 break-words"
+    :class="[
+      messageClass,
+      {
+        'max-w-md': variant !== MESSAGE_VARIANTS.EMAIL,
+      },
+    ]"
+  >
+    <div
+      v-if="inReplyTo"
+      class="bg-n-alpha-black1 rounded-lg p-2"
+      @click="scrollToMessage"
+    >
+      <span class="line-clamp-2">
+        {{ previewMessage }}
+      </span>
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
new file mode 100644
index 000000000..45880d521
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseBubble from './Base.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  icon: { type: [String, Object], required: true },
+  iconBgColor: { type: String, default: 'bg-n-alpha-3' },
+  sender: { type: Object, default: () => ({}) },
+  senderTranslationKey: { type: String, required: true },
+  content: { type: String, required: true },
+  action: {
+    type: Object,
+    required: true,
+    validator: action => {
+      return action.label && (action.href || action.onClick);
+    },
+  },
+});
+
+const { t } = useI18n();
+
+const senderName = computed(() => {
+  return props.sender.name;
+});
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden grid gap-4 min-w-64 p-0"
+    data-bubble-name="attachment"
+  >
+    <slot name="before" />
+    <div class="grid gap-3 px-3 pt-3 z-20">
+      <div
+        class="size-8 rounded-lg grid place-content-center"
+        :class="iconBgColor"
+      >
+        <slot name="icon">
+          <Icon :icon="icon" class="text-white size-4" />
+        </slot>
+      </div>
+      <div class="space-y-1">
+        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+          {{
+            t(senderTranslationKey, {
+              sender: senderName,
+            })
+          }}
+        </div>
+        <slot>
+          <div v-if="content" class="truncate text-sm text-n-slate-11">
+            {{ content }}
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div v-if="action" class="px-3 pb-3">
+      <a
+        v-if="action.href"
+        :href="action.href"
+        rel="noreferrer noopener nofollow"
+        target="_blank"
+        class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
+      >
+        {{ action.label }}
+      </a>
+      <button
+        v-else
+        class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        @click="action.onClick"
+      >
+        {{ action.label }}
+      </button>
+    </div>
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Contact.vue b/app/javascript/dashboard/components-next/message/bubbles/Contact.vue
new file mode 100644
index 000000000..ce16e1b1e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Contact.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { computed } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const $store = useStore();
+const { t } = useI18n();
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const phoneNumber = computed(() => {
+  return attachment.value.fallbackTitle;
+});
+
+const formattedPhoneNumber = computed(() => {
+  return phoneNumber.value.replace(/\s|-|[A-Za-z]/g, '');
+});
+
+const rawPhoneNumber = computed(() => {
+  return phoneNumber.value.replace(/\D/g, '');
+});
+
+const name = computed(() => {
+  return props.content;
+});
+
+function getContactObject() {
+  const contactItem = {
+    name: name.value,
+    phone_number: `+${rawPhoneNumber.value}`,
+  };
+  return contactItem;
+}
+
+async function filterContactByNumber(searchCandidate) {
+  const query = {
+    attribute_key: 'phone_number',
+    filter_operator: 'equal_to',
+    values: [searchCandidate],
+    attribute_model: 'standard',
+    custom_attribute_type: '',
+  };
+
+  const queryPayload = { payload: [query] };
+  const contacts = await $store.dispatch('contacts/filter', {
+    queryPayload,
+    resetState: false,
+  });
+  return contacts.shift();
+}
+
+function openContactNewTab(contactId) {
+  const accountId = window.location.pathname.split('/')[3];
+  const url = `/app/accounts/${accountId}/contacts/${contactId}`;
+  window.open(url, '_blank');
+}
+
+async function addContact() {
+  try {
+    let contact = await filterContactByNumber(rawPhoneNumber);
+    if (!contact) {
+      contact = await $store.dispatch('contacts/create', getContactObject());
+      useAlert(t('CONTACT_FORM.SUCCESS_MESSAGE'));
+    }
+    openContactNewTab(contact.id);
+  } catch (error) {
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('phone_number')) {
+        useAlert(t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t('CONTACT_FORM.ERROR_MESSAGE'));
+    }
+  }
+}
+
+const action = computed(() => ({
+  label: t('CONVERSATION.SAVE_CONTACT'),
+  onClick: addContact,
+}));
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-teenyicons-user-circle-solid"
+    icon-bg-color="bg-[#D6409F]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.CONTACT"
+    :content="phoneNumber"
+    :action="formattedPhoneNumber ? action : null"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue b/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
new file mode 100644
index 000000000..63932c18d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { computed, ref } from 'vue';
+import DyteAPI from 'dashboard/api/integrations/dyte';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+
+const props = defineProps({
+  contentAttributes: {
+    type: String,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const meetingData = computed(() => {
+  return useCamelCase(props.contentAttributes.data);
+});
+
+const isLoading = ref(false);
+const dyteAuthToken = ref('');
+
+const meetingLink = computed(() => {
+  return buildDyteURL(meetingData.value.roomName, dyteAuthToken.value);
+});
+
+const joinTheCall = async () => {
+  isLoading.value = true;
+  try {
+    const { data: { authResponse: { authToken } = {} } = {} } =
+      await DyteAPI.addParticipantToMeeting(meetingData.value.messageId);
+    dyteAuthToken.value = authToken;
+  } catch (err) {
+    useAlert(t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const leaveTheRoom = () => {
+  this.dyteAuthToken = '';
+};
+const action = computed(() => ({
+  label: t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN'),
+  onClick: joinTheCall,
+}));
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-ph-video-camera-fill"
+    icon-bg-color="bg-[#2781F6]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.MEETING"
+    :action="action"
+  >
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+    <div v-else>
+      {{ '' }}
+    </div>
+  </BaseAttachmentBubble>
+</template>
+
+<style lang="scss">
+.join-call-button {
+  margin: var(--space-small) 0;
+}
+
+.video-call--container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-high);
+  padding: var(--space-smaller);
+  background: var(--b-800);
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  button {
+    position: absolute;
+    top: var(--space-smaller);
+    right: 10rem;
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
new file mode 100644
index 000000000..0549a806d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
@@ -0,0 +1,98 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_STATUS } from '../../constants';
+
+const props = defineProps({
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const hasError = computed(() => {
+  return props.status === MESSAGE_STATUS.FAILED;
+});
+
+const fromEmail = computed(() => {
+  return props.contentAttributes?.email?.from ?? [];
+});
+
+const toEmail = computed(() => {
+  return props.contentAttributes?.email?.to ?? [];
+});
+
+const ccEmail = computed(() => {
+  return (
+    props.contentAttributes?.ccEmails ??
+    props.contentAttributes?.email?.cc ??
+    []
+  );
+});
+
+const senderName = computed(() => {
+  return props.sender.name ?? '';
+});
+
+const bccEmail = computed(() => {
+  return (
+    props.contentAttributes?.bccEmails ??
+    props.contentAttributes?.email?.bcc ??
+    []
+  );
+});
+
+const subject = computed(() => {
+  return props.contentAttributes?.email?.subject ?? '';
+});
+
+const showMeta = computed(() => {
+  return (
+    fromEmail.value[0] ||
+    toEmail.value.length ||
+    ccEmail.value.length ||
+    bccEmail.value.length ||
+    subject.value
+  );
+});
+</script>
+
+<template>
+  <section
+    v-show="showMeta"
+    class="p-4 space-y-1 pr-9 border-b border-n-strong"
+    :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
+  >
+    <template v-if="showMeta">
+      <div v-if="fromEmail[0]">
+        <span :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'">
+          {{ senderName }}
+        </span>
+        &lt;{{ fromEmail[0] }}&gt;
+      </div>
+      <div v-if="toEmail.length">
+        {{ $t('EMAIL_HEADER.TO') }}: {{ toEmail.join(', ') }}
+      </div>
+      <div v-if="ccEmail.length">
+        {{ $t('EMAIL_HEADER.CC') }}:
+        {{ ccEmail.join(', ') }}
+      </div>
+      <div v-if="bccEmail.length">
+        {{ $t('EMAIL_HEADER.BCC') }}:
+        {{ bccEmail.join(', ') }}
+      </div>
+      <div v-if="subject">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+        {{ subject }}
+      </div>
+    </template>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
new file mode 100644
index 000000000..ec32c1c37
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -0,0 +1,133 @@
+<script setup>
+import { computed, useTemplateRef, ref, onMounted } from 'vue';
+import { Letter } from 'vue-letter';
+
+import Icon from 'next/icon/Icon.vue';
+import { EmailQuoteExtractor } from './removeReply.js';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+
+import EmailMeta from './EmailMeta.vue';
+import { MESSAGE_STATUS, MESSAGE_TYPES } from '../../constants';
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageType: {
+    type: Number,
+    required: true,
+  },
+});
+
+const isExpandable = ref(false);
+const isExpanded = ref(false);
+const showQuotedMessage = ref(false);
+const contentContainer = useTemplateRef('contentContainer');
+
+onMounted(() => {
+  isExpandable.value = contentContainer.value.scrollHeight > 400;
+});
+
+const isOutgoing = computed(() => {
+  return props.messageType === MESSAGE_TYPES.OUTGOING;
+});
+
+const fullHTML = computed(() => {
+  return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
+});
+
+const unquotedHTML = computed(() => {
+  return EmailQuoteExtractor.extractQuotes(fullHTML.value);
+});
+
+const hasQuotedMessage = computed(() => {
+  return EmailQuoteExtractor.hasQuotes(fullHTML.value);
+});
+
+const textToShow = computed(() => {
+  const text =
+    props.contentAttributes?.email?.textContent?.full ?? props.content;
+  return text.replace(/\n/g, '<br>');
+});
+</script>
+
+<template>
+  <BaseBubble class="w-full overflow-hidden" data-bubble-name="email">
+    <EmailMeta :status :sender :content-attributes />
+    <section
+      ref="contentContainer"
+      class="p-4"
+      :class="{
+        'max-h-[400px] overflow-hidden relative': !isExpanded && isExpandable,
+      }"
+    >
+      <div
+        v-if="isExpandable && !isExpanded"
+        class="absolute left-0 right-0 bottom-0 h-40 p-8 flex items-end bg-gradient-to-t dark:from-[#24252b] from-[#F5F5F6] dark:via-[rgba(36,37,43,0.5)] via-[rgba(245,245,246,0.50)] dark:to-transparent to-[rgba(245,245,246,0.00)]"
+      >
+        <button
+          class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
+          @click="isExpanded = true"
+        >
+          <Icon icon="i-lucide-maximize-2" />
+          {{ $t('EMAIL_HEADER.EXPAND') }}
+        </button>
+      </div>
+      <FormattedContent v-if="isOutgoing && content" :content="content" />
+      <template v-else>
+        <Letter
+          v-if="showQuotedMessage"
+          class-name="prose prose-email !max-w-none"
+          :html="fullHTML"
+          :text="textToShow"
+        />
+        <Letter
+          v-else
+          class-name="prose prose-email !max-w-none"
+          :html="unquotedHTML"
+          :text="textToShow"
+        />
+      </template>
+      <button
+        v-if="hasQuotedMessage"
+        class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
+        @click="showQuotedMessage = !showQuotedMessage"
+      >
+        <template v-if="showQuotedMessage">
+          {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+        </template>
+        <template v-else>
+          {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+        </template>
+        <Icon
+          :icon="
+            showQuotedMessage ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
+          "
+        />
+      </button>
+    </section>
+    <section v-if="attachments.length" class="px-4 pb-4 space-y-2">
+      <AttachmentChips :attachments="attachments" class="gap-1" />
+    </section>
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js b/app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js
new file mode 100644
index 000000000..50b0c9df9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js
@@ -0,0 +1,126 @@
+// Quote detection strategies
+const QUOTE_INDICATORS = [
+  '.gmail_quote_container',
+  '.gmail_quote',
+  '.OutlookQuote',
+  '.email-quote',
+  '.quoted-text',
+  '.quote',
+  '[class*="quote"]',
+  '[class*="Quote"]',
+];
+
+// Regex patterns for quote identification
+const QUOTE_PATTERNS = [
+  /On .* wrote:/i,
+  /-----Original Message-----/i,
+  /Sent: /i,
+  /From: /i,
+];
+
+export class EmailQuoteExtractor {
+  /**
+   * Remove quotes from email HTML and return cleaned HTML
+   * @param {string} htmlContent - Full HTML content of the email
+   * @returns {string} HTML content with quotes removed
+   */
+  static extractQuotes(htmlContent) {
+    // Create a temporary DOM element to parse HTML
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+
+    // Remove elements matching class selectors
+    QUOTE_INDICATORS.forEach(selector => {
+      tempDiv.querySelectorAll(selector).forEach(el => {
+        el.remove();
+      });
+    });
+
+    // Remove text-based quotes
+    const textNodeQuotes = this.findTextNodeQuotes(tempDiv);
+    textNodeQuotes.forEach(el => {
+      el.remove();
+    });
+
+    return tempDiv.innerHTML;
+  }
+
+  /**
+   * Check if HTML content contains any quotes
+   * @param {string} htmlContent - Full HTML content of the email
+   * @returns {boolean} True if quotes are detected, false otherwise
+   */
+  static hasQuotes(htmlContent) {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+
+    // Check for class-based quotes
+    // eslint-disable-next-line no-restricted-syntax
+    for (const selector of QUOTE_INDICATORS) {
+      if (tempDiv.querySelector(selector)) {
+        return true;
+      }
+    }
+
+    // Check for text-based quotes
+    const textNodeQuotes = this.findTextNodeQuotes(tempDiv);
+    return textNodeQuotes.length > 0;
+  }
+
+  /**
+   * Find text nodes that match quote patterns
+   * @param {Element} rootElement - Root element to search
+   * @returns {Element[]} Array of parent block elements containing quote-like text
+   */
+  static findTextNodeQuotes(rootElement) {
+    const quoteBlocks = [];
+    const treeWalker = document.createTreeWalker(
+      rootElement,
+      NodeFilter.SHOW_TEXT,
+      null,
+      false
+    );
+
+    for (
+      let currentNode = treeWalker.nextNode();
+      currentNode !== null;
+      currentNode = treeWalker.nextNode()
+    ) {
+      const isQuoteLike = QUOTE_PATTERNS.some(pattern =>
+        pattern.test(currentNode.textContent)
+      );
+
+      if (isQuoteLike) {
+        const parentBlock = this.findParentBlock(currentNode);
+        if (parentBlock && !quoteBlocks.includes(parentBlock)) {
+          quoteBlocks.push(parentBlock);
+        }
+      }
+    }
+
+    return quoteBlocks;
+  }
+
+  /**
+   * Find the closest block-level parent element by recursively traversing up the DOM tree.
+   * This method searches for common block-level elements like DIV, P, BLOCKQUOTE, and SECTION
+   * that contain the text node. It's used to identify and remove entire block-level elements
+   * that contain quote-like text, rather than just removing the text node itself. This ensures
+   * proper structural removal of quoted content while maintaining HTML integrity.
+   * @param {Node} node - Starting node to find parent
+   * @returns {Element|null} Block-level parent element
+   */
+  static findParentBlock(node) {
+    const blockElements = ['DIV', 'P', 'BLOCKQUOTE', 'SECTION'];
+    let current = node.parentElement;
+
+    while (current) {
+      if (blockElements.includes(current.tagName)) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+
+    return null;
+  }
+}
diff --git a/app/javascript/dashboard/components-next/message/bubbles/File.vue b/app/javascript/dashboard/components-next/message/bubbles/File.vue
new file mode 100644
index 000000000..c58642f0f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/File.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import BaseAttachmentBubble from './BaseAttachment.vue';
+import FileIcon from 'next/icon/FileIcon.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const url = computed(() => {
+  return props.attachments[0].dataUrl;
+});
+
+const fileName = computed(() => {
+  if (url.value) {
+    const filename = url.value.substring(url.value.lastIndexOf('/') + 1);
+    return filename || t('CONVERSATION.UNKNOWN_FILE_TYPE');
+  }
+  return t('CONVERSATION.UNKNOWN_FILE_TYPE');
+});
+
+const fileType = computed(() => {
+  return fileName.value.split('.').pop();
+});
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-teenyicons-user-circle-solid"
+    icon-bg-color="bg-n-alpha-3 dark:bg-n-alpha-white"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.FILE"
+    :content="decodeURI(fileName)"
+    :action="{
+      href: url,
+      label: $t('CONVERSATION.DOWNLOAD'),
+    }"
+  >
+    <template #icon>
+      <FileIcon :file-type="fileType" class="size-4" />
+    </template>
+  </BaseAttachmentBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Image.vue b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
new file mode 100644
index 000000000..9caa897fa
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { ref, computed } from 'vue';
+import BaseBubble from './Base.vue';
+import Button from 'next/button/Button.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from 'next/message/provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['error']);
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const hasError = ref(false);
+const showGallery = ref(false);
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
+
+const downloadAttachment = async () => {
+  const response = await fetch(attachment.value.dataUrl);
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `attachment${attachment.value.extension || ''}`;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(a);
+};
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden relative group border-[4px] border-n-weak"
+    data-bubble-name="image"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="hasError"
+      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.MEDIA.IMAGE_UNAVAILABLE') }}
+      </p>
+    </div>
+    <template v-else>
+      <img
+        :src="attachment.dataUrl"
+        :width="attachment.width"
+        :height="attachment.height"
+        @click="onClick"
+        @error="handleError"
+      />
+      <div
+        class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
+      >
+        <Button xs solid slate icon="i-lucide-expand" class="opacity-60" />
+        <Button
+          xs
+          solid
+          slate
+          icon="i-lucide-download"
+          class="opacity-60"
+          @click="downloadAttachment"
+        />
+      </div>
+    </template>
+  </BaseBubble>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="handleError"
+    @close="() => (showGallery = false)"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
new file mode 100644
index 000000000..a3741d704
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+import Icon from 'next/icon/Icon.vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['error']);
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const { variant } = useMessageContext();
+const hasImgStoryError = ref(false);
+const hasVideoStoryError = ref(false);
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+
+const onImageLoadError = () => {
+  hasImgStoryError.value = true;
+  emit('error');
+};
+
+const onVideoLoadError = () => {
+  hasVideoStoryError.value = true;
+  emit('error');
+};
+</script>
+
+<template>
+  <BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
+    <div v-if="content" class="mb-2" v-html="formattedContent" />
+    <img
+      v-if="!hasImgStoryError"
+      class="rounded-lg max-w-80"
+      :src="attachment.dataUrl"
+      @error="onImageLoadError"
+    />
+    <video
+      v-else-if="!hasVideoStoryError"
+      class="rounded-lg max-w-80"
+      controls
+      :src="attachment.dataUrl"
+      @error="onVideoLoadError"
+    />
+    <div
+      v-else
+      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
+      </p>
+    </div>
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Location.vue b/app/javascript/dashboard/components-next/message/bubbles/Location.vue
new file mode 100644
index 000000000..5266f3a81
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Location.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+import { useI18n } from 'vue-i18n';
+import maplibregl from 'maplibre-gl';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const lat = computed(() => {
+  return attachment.value.coordinatesLat;
+});
+const long = computed(() => {
+  return attachment.value.coordinatesLong;
+});
+
+const title = computed(() => {
+  return attachment.value.fallbackTitle;
+});
+
+const mapUrl = computed(
+  () => `https://maps.google.com/?q=${lat.value},${long.value}`
+);
+
+const mapContainer = useTemplateRef('mapContainer');
+
+const setupMap = () => {
+  const map = new maplibregl.Map({
+    style: 'https://tiles.openfreemap.org/styles/positron',
+    center: [long.value, lat.value],
+    zoom: 9.5,
+    container: mapContainer.value,
+    attributionControl: false,
+    dragPan: false,
+    dragRotate: false,
+    scrollZoom: false,
+    touchZoom: false,
+    touchRotate: false,
+    keyboard: false,
+    doubleClickZoom: false,
+  });
+
+  return map;
+};
+
+onMounted(async () => {
+  await nextTick();
+  setupMap();
+});
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-ph-navigation-arrow-fill"
+    icon-bg-color="bg-[#0D9B8A]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.LOCATION"
+    :content="title"
+    :action="{
+      label: t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP'),
+      href: mapUrl,
+    }"
+  >
+    <template #before>
+      <div
+        ref="mapContainer"
+        class="z-10 w-full max-w-md -mb-12 min-w-64 h-28"
+      />
+    </template>
+  </BaseAttachmentBubble>
+</template>
+
+<style>
+@import 'maplibre-gl/dist/maplibre-gl.css';
+</style>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
new file mode 100644
index 000000000..a2f247bbc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../../provider.js';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../../constants';
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+
+const { variant } = useMessageContext();
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+</script>
+
+<template>
+  <span
+    v-dompurify-html="formattedContent"
+    class="[&>p:last-child]:mb-0 [&>ul]:list-inside"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
new file mode 100644
index 000000000..dc573760e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import FormattedContent from './FormattedContent.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+import { MESSAGE_TYPES } from '../../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageType: {
+    type: Number,
+    required: true,
+    validator: value => Object.values(MESSAGE_TYPES).includes(value),
+  },
+});
+
+const isTemplate = computed(() => {
+  return props.messageType === MESSAGE_TYPES.TEMPLATE;
+});
+</script>
+
+<template>
+  <BaseBubble class="flex flex-col gap-3 px-4 py-3" data-bubble-name="text">
+    <FormattedContent v-if="content" :content="content" />
+    <AttachmentChips :attachments="attachments" class="gap-2" />
+    <template v-if="isTemplate">
+      <div
+        v-if="contentAttributes.submittedEmail"
+        class="px-2 py-1 rounded-lg bg-n-alpha-3"
+      >
+        {{ contentAttributes.submittedEmail }}
+      </div>
+    </template>
+  </BaseBubble>
+</template>
+
+<style>
+p:last-child {
+  margin-bottom: 0;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
new file mode 100644
index 000000000..5268cb02c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
@@ -0,0 +1,9 @@
+<script setup>
+import BaseBubble from './Base.vue';
+</script>
+
+<template>
+  <BaseBubble class="px-4 py-3 text-sm" data-bubble-name="unsupported">
+    {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Video.vue b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
new file mode 100644
index 000000000..2d8586111
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
@@ -0,0 +1,84 @@
+<script setup>
+import { ref, computed } from 'vue';
+import BaseBubble from './Base.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from 'next/message/provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+import { ATTACHMENT_TYPES } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+const emit = defineEmits(['error']);
+const hasError = ref(false);
+const showGallery = ref(false);
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const isReel = computed(() => {
+  return attachment.value.fileType === ATTACHMENT_TYPES.IG_REEL;
+});
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden relative group border-[4px] border-n-weak"
+    data-bubble-name="video"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="isReel"
+      class="absolute p-2 flex items-start justify-end size-12 bg-gradient-to-bl from-n-alpha-black1 to-transparent right-0"
+    >
+      <Icon icon="i-lucide-instagram" class="text-white" />
+    </div>
+    <video
+      controls
+      :src="attachment.dataUrl"
+      :class="{
+        'max-w-48': isReel,
+        'max-w-full': !isReel,
+      }"
+      @error="handleError"
+    />
+  </BaseBubble>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="onError"
+    @close="() => (showGallery = false)"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
new file mode 100644
index 000000000..4fd1d6428
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { computed, defineOptions, useAttrs } from 'vue';
+
+import ImageChip from 'next/message/chips/Image.vue';
+import VideoChip from 'next/message/chips/Video.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
+import FileChip from 'next/message/chips/File.vue';
+import { useMessageContext } from '../provider.js';
+
+import { ATTACHMENT_TYPES } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+const { orientation } = useMessageContext();
+
+const classToApply = computed(() => {
+  const baseClasses = [attrs.class, 'flex', 'flex-wrap'];
+
+  if (orientation.value === 'right') {
+    baseClasses.push('justify-end');
+  }
+
+  return baseClasses;
+});
+
+const allAttachments = computed(() => {
+  return Array.isArray(props.attachments) ? props.attachments : [];
+});
+
+const mediaAttachments = computed(() => {
+  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
+  const mediaTypes = allAttachments.value.filter(attachment =>
+    allowedTypes.includes(attachment.fileType)
+  );
+
+  return mediaTypes.sort(
+    (a, b) =>
+      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
+  );
+});
+
+const recordings = computed(() => {
+  return allAttachments.value.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
+  );
+});
+
+const files = computed(() => {
+  return allAttachments.value.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
+  );
+});
+</script>
+
+<template>
+  <div v-if="mediaAttachments.length" :class="classToApply">
+    <template v-for="attachment in mediaAttachments" :key="attachment.id">
+      <ImageChip
+        v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
+        :attachment="attachment"
+      />
+      <VideoChip
+        v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
+        :attachment="attachment"
+      />
+    </template>
+  </div>
+  <div v-if="recordings.length" :class="classToApply">
+    <div v-for="attachment in recordings" :key="attachment.id">
+      <AudioChip
+        class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
+        :attachment="attachment"
+      />
+    </div>
+  </div>
+  <div v-if="files.length" :class="classToApply">
+    <FileChip
+      v-for="attachment in files"
+      :key="attachment.id"
+      :attachment="attachment"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Audio.vue b/app/javascript/dashboard/components-next/message/chips/Audio.vue
new file mode 100644
index 000000000..2388c80be
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue
@@ -0,0 +1,133 @@
+<script setup>
+import { computed, useTemplateRef, ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const timeStampURL = computed(() => {
+  return timeStampAppendedURL(attachment.dataUrl);
+});
+
+const audioPlayer = useTemplateRef('audioPlayer');
+
+const isPlaying = ref(false);
+const isMuted = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+
+const onLoadedMetadata = () => {
+  duration.value = audioPlayer.value.duration;
+};
+
+const formatTime = time => {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};
+
+const toggleMute = () => {
+  audioPlayer.value.muted = !audioPlayer.value.muted;
+  isMuted.value = audioPlayer.value.muted;
+};
+
+const onTimeUpdate = () => {
+  currentTime.value = audioPlayer.value.currentTime;
+};
+
+const seek = event => {
+  const time = Number(event.target.value);
+  audioPlayer.value.currentTime = time;
+  currentTime.value = time;
+};
+
+const playOrPause = () => {
+  if (isPlaying.value) {
+    audioPlayer.value.pause();
+    isPlaying.value = false;
+  } else {
+    audioPlayer.value.play();
+    isPlaying.value = true;
+  }
+};
+
+const onEnd = () => {
+  isPlaying.value = false;
+  currentTime.value = 0;
+};
+
+const downloadAudio = async () => {
+  const response = await fetch(timeStampURL.value);
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  const filename = timeStampURL.value.split('/').pop().split('?')[0] || 'audio';
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(anchor);
+};
+</script>
+
+<template>
+  <audio
+    ref="audioPlayer"
+    controls
+    class="hidden"
+    @loadedmetadata="onLoadedMetadata"
+    @timeupdate="onTimeUpdate"
+    @ended="onEnd"
+  >
+    <source :src="timeStampURL" />
+  </audio>
+  <div
+    v-bind="$attrs"
+    class="rounded-xl w-full gap-1 p-1.5 bg-n-alpha-white flex items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
+  >
+    <button class="p-0 border-0 size-8" @click="playOrPause">
+      <Icon
+        v-if="isPlaying"
+        class="size-8"
+        icon="i-teenyicons-pause-small-solid"
+      />
+      <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
+    </button>
+    <div class="tabular-nums text-xs">
+      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+    </div>
+    <div class="flex items-center px-2">
+      <input
+        type="range"
+        min="0"
+        :max="duration"
+        :value="currentTime"
+        class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
+        @input="seek"
+      />
+    </div>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="toggleMute"
+    >
+      <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
+      <Icon v-else class="size-4" icon="i-lucide-volume-2" />
+    </button>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="downloadAudio"
+    >
+      <Icon class="size-4" icon="i-lucide-download" />
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/File.vue b/app/javascript/dashboard/components-next/message/chips/File.vue
new file mode 100644
index 000000000..03d3b9c48
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/File.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FileIcon from 'next/icon/FileIcon.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const fileName = computed(() => {
+  const url = attachment.dataUrl;
+  if (url) {
+    const filename = url.substring(url.lastIndexOf('/') + 1);
+    return filename || t('CONVERSATION.UNKNOWN_FILE_TYPE');
+  }
+  return t('CONVERSATION.UNKNOWN_FILE_TYPE');
+});
+
+const fileType = computed(() => {
+  return fileName.value.split('.').pop();
+});
+
+const textColorClass = computed(() => {
+  const colorMap = {
+    '7z': 'dark:text-[#EDEEF0] text-[#2F265F]',
+    csv: 'text-amber-12',
+    doc: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    docx: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    json: 'text-n-slate-12',
+    odt: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    pdf: 'text-n-ruby-12',
+    ppt: 'dark:text-[#FFE0C2] text-[#582D1D]',
+    pptx: 'dark:text-[#FFE0C2] text-[#582D1D]',
+    rar: 'dark:text-[#EDEEF0] text-[#2F265F]',
+    rtf: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    tar: 'dark:text-[#EDEEF0] text-[#2F265F]',
+    txt: 'text-n-slate-12',
+    xls: 'text-n-teal-12',
+    xlsx: 'text-n-teal-12',
+    zip: 'dark:text-[#EDEEF0] text-[#2F265F]',
+  };
+
+  return colorMap[fileType.value] || 'text-n-slate-12';
+});
+</script>
+
+<template>
+  <div
+    class="h-9 bg-n-alpha-white gap-2 items-center flex px-2 rounded-lg border border-n-strong"
+  >
+    <FileIcon class="flex-shrink-0" :file-type="fileType" />
+    <span class="mr-1 max-w-32 truncate" :class="textColorClass">
+      {{ fileName }}
+    </span>
+    <a
+      v-tooltip="t('CONVERSATION.DOWNLOAD')"
+      class="flex-shrink-0 h-9 grid place-content-center cursor-pointer text-n-slate-11"
+      :href="url"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+    >
+      <Icon icon="i-lucide-download" />
+    </a>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Image.vue b/app/javascript/dashboard/components-next/message/chips/Image.vue
new file mode 100644
index 000000000..3a1ad1888
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/Image.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from '../provider.js';
+
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+const hasError = ref(false);
+const showGallery = ref(false);
+
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+};
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="hasError"
+      class="flex flex-col items-center justify-center gap-1 text-xs text-center rounded-lg size-full bg-n-alpha-1 text-n-slate-11"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      {{ $t('COMPONENTS.MEDIA.LOADING_FAILED') }}
+    </div>
+    <img
+      v-else
+      class="object-cover w-full h-full"
+      :src="attachment.dataUrl"
+      @error="handleError"
+    />
+  </div>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="handleError"
+    @close="() => (showGallery = false)"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Video.vue b/app/javascript/dashboard/components-next/message/chips/Video.vue
new file mode 100644
index 000000000..c9904b998
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/Video.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from '../provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const showGallery = ref(false);
+
+const { filteredCurrentChatAttachments } = useMessageContext();
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
+    @click="showGallery = true"
+  >
+    <video
+      :src="attachment.dataUrl"
+      class="w-full h-full object-cover"
+      muted
+      playsInline
+    />
+    <div
+      class="absolute w-full h-full inset-0 p-1 flex items-center justify-center"
+    >
+      <div
+        class="size-7 bg-n-slate-1/60 backdrop-blur-sm rounded-full overflow-hidden shadow-[0_5px_15px_rgba(0,0,0,0.4)]"
+      >
+        <Icon
+          icon="i-teenyicons-play-small-solid"
+          class="size-7 text-n-slate-12/80 backdrop-blur"
+        />
+      </div>
+    </div>
+  </div>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="onError"
+    @close="() => (showGallery = false)"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/constants.js b/app/javascript/dashboard/components-next/message/constants.js
new file mode 100644
index 000000000..7a7cc47e0
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -0,0 +1,72 @@
+export const MESSAGE_TYPES = {
+  INCOMING: 0,
+  OUTGOING: 1,
+  ACTIVITY: 2,
+  TEMPLATE: 3,
+};
+
+export const MESSAGE_VARIANTS = {
+  USER: 'user',
+  AGENT: 'agent',
+  ACTIVITY: 'activity',
+  PRIVATE: 'private',
+  BOT: 'bot',
+  ERROR: 'error',
+  TEMPLATE: 'template',
+  EMAIL: 'email',
+  UNSUPPORTED: 'unsupported',
+};
+
+export const SENDER_TYPES = {
+  CONTACT: 'Contact',
+  USER: 'User',
+};
+
+export const ORIENTATION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center',
+};
+
+export const MESSAGE_STATUS = {
+  SENT: 'sent',
+  DELIVERED: 'delivered',
+  READ: 'read',
+  FAILED: 'failed',
+  PROGRESS: 'progress',
+};
+
+export const ATTACHMENT_TYPES = {
+  IMAGE: 'image',
+  AUDIO: 'audio',
+  VIDEO: 'video',
+  FILE: 'file',
+  LOCATION: 'location',
+  FALLBACK: 'fallback',
+  SHARE: 'share',
+  STORY_MENTION: 'story_mention',
+  CONTACT: 'contact',
+  IG_REEL: 'ig_reel',
+};
+
+export const CONTENT_TYPES = {
+  TEXT: 'text',
+  INPUT_TEXT: 'input_text',
+  INPUT_TEXTAREA: 'input_textarea',
+  INPUT_EMAIL: 'input_email',
+  INPUT_SELECT: 'input_select',
+  CARDS: 'cards',
+  FORM: 'form',
+  ARTICLE: 'article',
+  INCOMING_EMAIL: 'incoming_email',
+  INPUT_CSAT: 'input_csat',
+  INTEGRATIONS: 'integrations',
+  STICKER: 'sticker',
+};
+
+export const MEDIA_TYPES = [
+  ATTACHMENT_TYPES.IMAGE,
+  ATTACHMENT_TYPES.VIDEO,
+  ATTACHMENT_TYPES.AUDIO,
+  ATTACHMENT_TYPES.IG_REEL,
+];
diff --git a/app/javascript/dashboard/components-next/message/fixtures/emailConversation.js b/app/javascript/dashboard/components-next/message/fixtures/emailConversation.js
new file mode 100644
index 000000000..8d75d107e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/emailConversation.js
@@ -0,0 +1,382 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 60913,
+      content:
+        'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      content_type: 'incoming_email',
+      status: 'sent',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/mixed; boundary=00000000000098e88e0628704c8b',
+          date: '2024-12-04T17:13:53+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr"><p>Dear Sam,</p><p>We are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?</p><p>Looking forward to your response.</p><p>Best regards,<br>Alex<br>T-Shirt Co.</p></div>\n',
+            reply:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+            quoted:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+          },
+          in_reply_to: null,
+          message_id:
+            'CAM_Qp+-tdJ2Muy4XZmQfYKOPzsFwrH5H=6j=snsFZEDw@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 2,
+          subject: 'Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: 'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.\n',
+            reply:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+            quoted:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      created_at: 1733312661,
+      private: false,
+      source_id: 'CAM_Qp+-tdJ2Muy4XZmQfYKOPzsFwrH5H=6j=snsFZEDw@mail.gmail.com',
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 826,
+          message_id: 60913,
+          file_type: 'file',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdFdKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--10170e22f42401a9259e17eba6e59877127353d0/requirements.pdf',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdFdKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--10170e22f42401a9259e17eba6e59877127353d0/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--31a6ed995cc4ac2dd2fa023068ee23b23efa1efb/requirements.pdf',
+          file_size: 841909,
+          width: null,
+          height: null,
+        },
+        {
+          id: 18,
+          message_id: 5307,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/quantity-requirements.xls',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/all-files.zip',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 60914,
+      content:
+        'Dear Alex,\r\n\r\nThank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.\r\n\r\nBest regards,  \r\nSam  \r\nFabricMart',
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 1,
+      created_at: 1733312726,
+      updated_at: '2024-12-04T11:45:34.451Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60914@reply.chatwoot.dev',
+      content_type: 'text',
+      content_attributes: {
+        cc_emails: [],
+        bcc_emails: [],
+        to_emails: [],
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Dear Alex,\r\n\r\nThank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.\r\n\r\nBest regards,  \r\nSam  \r\nFabricMart',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 0,
+        last_activity_at: 1733312726,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      attachments: [
+        {
+          id: 827,
+          message_id: 60914,
+          file_type: 'file',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--31a6ed995cc4ac2dd2fa023068ee23b23efa1efb/quotation.pdf',
+          file_size: 841909,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 110,
+        name: 'Alex',
+        available_name: 'Alex',
+        avatar_url:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+      },
+    },
+    {
+      id: 60915,
+      content:
+        'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>',
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      created_at: 1733312835,
+      updated_at: '2024-12-04T11:47:15.876Z',
+      private: false,
+      status: 'sent',
+      source_id: 'CAM_Qp+_70EiYJ_nKMgJ6MZaD58Tq3E57QERcZgnd10g@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=0000000000007191be06287054c4',
+          date: '2024-12-04T17:16:07+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr"><p>Dear Sam,</p><p>Thank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?</p><p>Best,<br>Alex</p></div><br><div class="gmail_quote gmail_quote_container"><div dir="ltr" class="gmail_attr">On Wed, 4 Dec 2024 at 17:15, Sam from CottonMart &lt;<a href="mailto:sam@cottonmart.test">sam@cottonmart.test</a>&gt; wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">  <p>Dear Alex,</p>\n<p>Thank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.</p>\n<p>Best regards,<br>\nSam<br>\nFabricMart</p>\n\n    attachment [<a href="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf" target="_blank">click here to view</a>]\n</blockquote></div>\n',
+            reply:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n>',
+            quoted:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?\n\nBest,\nAlex',
+          },
+          in_reply_to:
+            'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60914@reply.chatwoot.dev',
+          message_id:
+            'CAM_Qp+_70EiYJ_nKMgJ6MZaD58Tq3E57QERcZgnd10g@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: 'Re: Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: 'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test>\nwrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>\n',
+            reply:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>',
+            quoted:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 1,
+        last_activity_at: 1733312835,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      message_type: 1,
+      content_type: 'text',
+      source_id:
+        'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+      processed_message_content:
+        "Dear Alex,\r\n\r\nPlease find attached images of our cotton fabric samples. Let us know if you'd like physical samples sent to you. \r\n\r\nWarm regards,  \r\nSam",
+      id: 60916,
+      content:
+        "Dear Alex,\r\n\r\nPlease find attached images of our cotton fabric samples. Let us know if you'd like physical samples sent to you. \r\n\r\nWarm regards,  \r\nSam",
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      created_at: 1733312866,
+      updated_at: '2024-12-04T11:47:53.564Z',
+      private: false,
+      status: 'sent',
+      content_attributes: {
+        cc_emails: [],
+        bcc_emails: [],
+        to_emails: [],
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 0,
+        last_activity_at: 1733312866,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      attachments: [
+        {
+          id: 828,
+          message_id: 60916,
+          file_type: 'image',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/image.png',
+          file_size: 1617507,
+          width: 1600,
+          height: 900,
+        },
+      ],
+      sender: {
+        id: 110,
+        name: 'Alex',
+        available_name: 'Alex',
+        avatar_url:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-12-04T11:47:46.879Z', '2024-12-04T11:47:53.564Z'],
+        source_id: [
+          null,
+          'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+        ],
+      },
+    },
+    {
+      id: 60917,
+      content:
+        "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      created_at: 1733312969,
+      updated_at: '2024-12-04T11:49:29.337Z',
+      private: false,
+      status: 'sent',
+      source_id: 'CAM_Qp+8LuzLTWZXkecjzJAgmb9RAQGm+qTmg@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/related; boundary=0000000000007701030628705e31',
+          date: '2024-12-04T17:18:54+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr">Great we were looking for something in a different finish see image attached<br><br><img src="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGlKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--408309fa40f1cfea87ee3320a062a5d16ce09d4e/image.png" alt="image.png" width="472" height="305"><br><div><br></div><div>Let me know if you have different finish options?<br><br>Best Regards</div></div><br><div class="gmail_quote gmail_quote_container"><div dir="ltr" class="gmail_attr">On Wed, 4 Dec 2024 at 17:17, Sam from CottonMart &lt;<a href="mailto:sam@cottonmart.test">sam@cottonmart.test</a>&gt; wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">  <p>Dear Alex,</p>\n<p>Please find attached images of our cotton fabric samples. Let us know if you&#39;d like physical samples sent to you.</p>\n<p>Warm regards,<br>\nSam</p>\n\n    attachment [<a href="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png" target="_blank">click here to view</a>]\n</blockquote></div>\n',
+            reply:
+              'Great we were looking for something in a different finish see image attached\n\n[image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n>',
+            quoted:
+              'Great we were looking for something in a different finish see image attached\n\n[image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+          },
+          in_reply_to:
+            'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+          message_id: 'CAM_Qp+8LuzLTWZXkecjzJAgmb9RAQGm+qTmg@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 1,
+          subject: 'Re: Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+            reply:
+              "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+            quoted:
+              'Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 1,
+        last_activity_at: 1733312969,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js b/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
new file mode 100644
index 000000000..2fbbf11d5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
@@ -0,0 +1,1096 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://videos.pexels.com/video-files/7722989/7722989-uhd_1440_2560_25fps.mp4',
+          thumb_url:
+            'https://videos.pexels.com/video-files/7722989/7722989-uhd_1440_2560_25fps.mp4',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+          thumb_url:
+            'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://chatwoot.dev/definitely-broken-image',
+          thumb_url: 'https://chatwoot.dev/definitely-broken-image',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
+    {
+      id: 26433202,
+      content: 'Hi, Jane here (testing)',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAxOTk2NDIwNjc5NDQ5NzE1NDMxNzMzMTQ2NDE5MgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26433214,
+      content: 'Hey Jane, I am Jane',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692765959,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDQzOTQ5ODg4NzY4NTUxMTc5Mzk5MjUzMTk2OAZDZD',
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+    },
+    {
+      id: 26433277,
+      content: 'Conversation was marked resolved by Jane Doe',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692766051,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 26434177,
+      content: 'Hi, it’s me again',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767416,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzI5NjY0ODY1MDg1Nzg1MDAxMDk4MTEwNTY2NAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434185,
+      content: 'Hi',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767429,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzUxNjQ1NDAzOTYwMTYwNDk5ODcyMzUzNDg0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434188,
+      content: 'It',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767431,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzUyODEzODkyNjcyMDkxMTUwMzM4OTYyMjI3MgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434190,
+      content: 'Is',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767432,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzU0MzY1ODQzMDc2NDU0MDM4MTA5Nzg4NTY5NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434193,
+      content: 'Me',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767434,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzU1OTg2MjEyNDU0NTg2MzE0NjA3NTU4NjU2MAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434195,
+      content: 'Again',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767435,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzU3Nzk3MzE1NjMyNDE3NTI1NzU2MTcyNjk3NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434914,
+      content: 'Conversation was marked resolved by Jane Doe',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692768629,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 26436726,
+      content: '😁',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692770672,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjEwNzM4NDA4NTgwMzUxNzY3OTYxNTM4MDI5MTU4NAZDZD',
+      sender: {
+        id: 10,
+        name: 'Jane',
+        available_name: 'Jane',
+        avatar_url:
+          'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4a2c0c8e787a381c0a809905e7cb172d5a40f589/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/73185.jpeg',
+        type: 'user',
+        availability_status: 'offline',
+        thumbnail:
+          'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4a2c0c8e787a381c0a809905e7cb172d5a40f589/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/73185.jpeg',
+      },
+    },
+    {
+      id: 27405598,
+      content: 'Guess what? I am back!',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016247,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA4NDE2Mjk1NDQ4MTc3NzQyMDMxNjE3NjI4NTY5NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 27405678,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016327,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA4NTYwNDk1OTA2MzI4MDc4NjI2MDE5OTczNTI5NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 27405690,
+      content: 'Some pictures from Thailand',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016341,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA4NTg3MTk4NzkzMjM4NTc5Njk2Mjk4MzYwODMyMAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 27406085,
+      content: 'byeeee',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016698,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA5MjUxODA3NzE2MDgxOTE5NDkwOTM0NTk3MjIyNAZDZD',
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+    },
+    {
+      id: 27406088,
+      content: 'Conversation was marked resolved by Jane Doe',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016701,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 27406404,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694017101,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA5OTkxNDU3Mzc0MDA2NTA4ODY0OTAzNzg3MzE1MgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2201627,
+          message_id: 27406404,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://random.imagecdn.app/500/500',
+          thumb_url: 'https://random.imagecdn.app/500/500',
+          file_size: 141072,
+          width: 1170,
+          height: 1560,
+        },
+      ],
+    },
+    {
+      id: 27408430,
+      content: 'Conversation was marked resolved by Jane Doe',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694019236,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 27788386,
+      content: 'Me again',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519468,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2Njg4MTgxMDMyNzQxODM4OTc5NjEzMDY1MjE2MAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 27788409,
+      content: "Yeah, it's you again",
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519479,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2NzE5MzQ2NTQxMjIxMjU2NjA1NjUwNzUzOTQ1NgZDZD',
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+    },
+    {
+      id: 27788443,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519516,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2NzgxMjMzMjI3NzY2MjM5NjAxMDE0NDQ2NDg5NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2224875,
+          message_id: 27788443,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://random.imagecdn.app/500/500',
+          thumb_url: 'https://random.imagecdn.app/500/500',
+          file_size: 236151,
+          width: 1170,
+          height: 1560,
+        },
+      ],
+    },
+    {
+      id: 27788464,
+      content: 'Try this',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519542,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2ODQ3ODA4Mzg0OTAxODU2ODAwMjkwNzQwNjMzNgZDZD',
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+      attachments: [
+        {
+          id: 2224876,
+          message_id: 27788464,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2lvYnc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c7278d793ca8de35ea7a824cfbb82ffb630b410a/facebook.png',
+          thumb_url:
+            'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2lvYnc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c7278d793ca8de35ea7a824cfbb82ffb630b410a/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--624b3ceb3fdf42c4b07c7818563fe60603b6095b/facebook.png',
+          file_size: 256,
+          width: 24,
+          height: 24,
+        },
+      ],
+    },
+    {
+      id: 27788479,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519551,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2ODQ2ODAxNjAwMzQ4NDc2Mjg3NzUzNTk3NzQ3MgZDZD',
+      attachments: [
+        {
+          id: 2224877,
+          message_id: 27788479,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL21vYnc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1ca7bc279638b97f4eec6eb86452d5a982a84c04/image-1478688519564287',
+          thumb_url:
+            'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL21vYnc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1ca7bc279638b97f4eec6eb86452d5a982a84c04/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--624b3ceb3fdf42c4b07c7818563fe60603b6095b/image-1478688519564287',
+          file_size: 209,
+          width: 24,
+          height: 24,
+        },
+      ],
+    },
+    {
+      id: 27803044,
+      content: 'Assigned to Jane Doe by Pranav Raj',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694530879,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 28252665,
+      content: 'Conversation was marked resolved by Jane Doe',
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      created_at: 1695109325,
+      updated_at: '2023-09-19T07:42:06.172Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {
+        slack: 'cw-origin-1695109326.110599',
+      },
+      additional_attributes: {},
+      processed_message_content: 'Conversation was marked resolved by Jane Doe',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1695109325,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+    },
+    {
+      message_type: 0,
+      content_type: 'text',
+      processed_message_content: 'Hi',
+      id: 89088319,
+      content: 'Hi',
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      created_at: 1733387681,
+      updated_at: '2024-12-05T08:34:42.693Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTM1ODkwMDgwNTE5MTc3ODA4Nzg2Njg0Mzc5MTM2MAZDZD',
+      content_attributes: {
+        in_reply_to_external_id: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 70222869,
+      external_source_ids: {
+        slack: 'cw-origin-1733387682.631519',
+      },
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1733387681,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      previous_changes: {
+        updated_at: ['2024-12-05T08:34:41.463Z', '2024-12-05T08:34:42.693Z'],
+        external_source_ids: [
+          {},
+          {
+            slack: 'cw-origin-1733387682.631519',
+          },
+        ],
+      },
+    },
+    {
+      message_type: 1,
+      content_type: 'text',
+      processed_message_content: 'Just testing here, ignore',
+      id: 89088510,
+      content: 'Just testing here, ignore',
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      created_at: 1733387731,
+      updated_at: '2024-12-05T08:35:32.207Z',
+      private: true,
+      status: 'sent',
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {
+        slack: 'cw-origin-1733387732.139069',
+      },
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1733387731,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: null,
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+      previous_changes: {
+        updated_at: ['2024-12-05T08:35:31.809Z', '2024-12-05T08:35:32.207Z'],
+        external_source_ids: [
+          {},
+          {
+            slack: 'cw-origin-1733387732.139069',
+          },
+        ],
+      },
+    },
+    {
+      id: 89088542,
+      content: null,
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      created_at: 1733387740,
+      updated_at: '2024-12-05T08:35:40.796Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTM2MDAyMjg0NTc1ODQ0NzY0NDcwNDU3NTA2MjAxNgZDZD',
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to_external_id: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 70222869,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: null,
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1733387740,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+      attachments: [
+        {
+          id: 7141485,
+          message_id: 89088542,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://random.imagecdn.app/500/500',
+          thumb_url: 'https://random.imagecdn.app/500/500',
+          file_size: 63957,
+          width: null,
+          height: null,
+        },
+        {
+          id: 7141486,
+          message_id: 89088542,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://random.imagecdn.app/500/500',
+          thumb_url: 'https://random.imagecdn.app/500/500',
+          file_size: 43486,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 89088799,
+      content: null,
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      created_at: 1733387803,
+      updated_at: '2024-12-05T08:36:43.200Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTM2MTE2ODI4MTc0MDMzMDA3NzAwNzkxNTI1Mzc2MAZDZD',
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to_external_id: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 70222869,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: null,
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1733387803,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+      attachments: [
+        {
+          id: 7141507,
+          message_id: 89088799,
+          file_type: 'ig_reel',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://videos.pexels.com/video-files/2023708/2023708-hd_720_1280_30fps.mp4',
+          thumb_url:
+            'https://videos.pexels.com/video-files/2023708/2023708-hd_720_1280_30fps.mp4',
+          file_size: 2464867,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 89129832,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to_external_id: null,
+        is_unsupported: true,
+      },
+      created_at: 1733399171,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTU3MDg2NDAzNzQ0ODY5NjA0NDc2MzA5MjA5MDg4MAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/newsletterEmail.js b/app/javascript/dashboard/components-next/message/fixtures/newsletterEmail.js
new file mode 100644
index 000000000..50fa36ea1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/newsletterEmail.js
@@ -0,0 +1,156 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 60703,
+      content:
+        'News, tips, and behind the scenes technical mumbo jumbo\n\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates\n---------------\n\nYou can always check out the Fresh Produce ( https://community.fly.io/c/fresh-produce/27?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\n\n* You can auto-deploy your apps ( https://community.fly.io/t/auto-deploy-on-push-to-github/22306?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on Fly.io when you push your code to GitHub, and see the checks and deployments ( https://community.fly.io/t/github-checks-and-deployments/22669?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on the Github side.\n* If you want to update machine size ( https://community.fly.io/t/update-machine-size-from-the-dashboard/22600?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), update the size of your builder ( https://community.fly.io/t/you-can-now-resize-your-depot-builders/22578?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), or clone machines ( https://community.fly.io/t/clone-machines-from-the-web-ui/22542?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), you can do it all from the dashboard!\n\nInside Flyball\n--------------\n\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some improvements to the Support portal ( https://community.fly.io/t/redesigned-support-portal/22534?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that are available to anyone with paid support. We\'ve also just shipped "impact levels ( https://community.fly.io/t/support-impact-levels/22538?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\n\nFeature story: why we got rid of plans\n--------------------------------------\n\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\n\nUsers are doing all kinds of things on Fly.io—like sorting through the US Patent system ( https://fly.io/customers/amplified?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) and helping teenagers in New Zealand learn outside of school ( https://fly.io/customers/mymahi?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\n\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\n\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\n\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\n\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\n\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made this calculator ( https://fly.io/calculator?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) so you can just plug in what you need and have it spit out an approximate total.\n\nIn this brave new world, your invoice will be:\n\n* whatever compute/product resources you use, pro-rated for the time you use them, plus\n* whichever add-ons you pick, like Support and/or Compliance\n\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\n\nOur aim in getting rid of plans here was to make pricing simpler. Some folks have pointed out ( https://community.fly.io/t/were-making-pricing-simpler/22168?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\n\nGiven that, was this the right call, on balance? We think so, since we figure:\n\n* Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\n* For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\n* With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.\n\nUnsubscribe ( http://track.customer.io/unsubscribe/= ) ・\nManage Subscriptions ( http://track.customer.io/manage_subscription_preferences/= ) ・\nView in Browser ( http://track.customer.io/deliveries/= )',
+      account_id: 51,
+      inbox_id: 991,
+      conversation_id: 33,
+      message_type: 0,
+      created_at: 1733141022,
+      updated_at: '2024-12-02T12:03:42.467Z',
+      private: false,
+      status: 'sent',
+      source_id: '20241130215847.b6abc8cb4ce389f3@cio106219.news.fly.io',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=b57cedbb0790b6a0fe63723dd18c9d5416068481beced4287232b787e1bb',
+          date: '2024-11-30T21:58:47+00:00',
+          from: ['team@news.fly.io'],
+          html_content: {
+            full: '<!DOCTYPE html><!-- Change the lang and dir attributes to match the language of your email and the direction of that language. --><html lang="und" dir="auto" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" style="color-scheme: light dark; supported-color-schemes: light dark;"><head>\r\n    <meta charset="utf-8"/>\r\n    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>\r\n    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>\r\n    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/>\r\n    <meta name="x-apple-disable-message-reformatting"/>\r\n    <meta name="color-scheme" content="light dark"/>\r\n    <meta name="supported-color-schemes" content="light dark"/>\r\n\r\n    <title>Fly.io November &#39;24 Newsletter</title>\r\n\r\n    <link rel="preconnect" href="https://fonts.googleapis.com" media="screen"/>\r\n    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" media="screen"/>\r\n    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;family=Ovo&amp;display=swap" rel="stylesheet" media="screen"/>\r\n\r\n    <!--[if mso]>\r\n    <noscript>\r\n      <xml>\r\n        <o:OfficeDocumentSettings>\r\n          <o:PixelsPerInch>96</o:PixelsPerInch>\r\n        </o:OfficeDocumentSettings>\r\n      </xml>\r\n    </noscript>\r\n    <![endif]-->\r\n    \r\n    <style type="text/css">\r\na:hover {\r\n  text-decoration: none;\r\n}\r\n</style>\r\n    <style type="text/css" data-name="media">\r\n@media screen and (max-width:600px) {\r\n  h1 {\r\n    font-size: 2.25em;\r\n  }\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n  body {\r\n    background-color: #262524 !important;\r\n  }\r\n\r\n  .container {\r\n    background-color: #262524 !important;\r\n    color: #EDEEEF !important;\r\n  }\r\n\r\n  a {\r\n    color: #7EABCE !important;\r\n  }\r\n\r\n  code {\r\n    background-color: #4c4a47 !important;\r\n  }\r\n}\r\n</style>\r\n    <style type="text/css" data-name="interactive">\r\ninput:checked + .tabs .tab:hover {\r\n  background-color: #1185d7;\r\n}\r\ninput:focus-visible + .tab {\r\n  outline: 2px solid #10618B;\r\n}\r\ninput:checked + .tabs .interactive-heading {\r\n  display: inline-block !important;\r\n}\r\n</style>\r\n  </head>\r\n  <body class="body" style="margin: 0; padding: 0; word-spacing: normal;"><div style="display: none; max-height: 0px; overflow: hidden; mso-hide:all;">Episode #5: why we got rid of plans ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­  </div>\r\n    \r\n    <div role="article" aria-label="Fly.io Newsletter - June 2024" lang="und" dir="auto" class="wrapper" style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: &#39;cv02&#39;, &#39;cv03&#39;, &#39;cv04&#39;, &#39;cv11&#39;; line-height: 1.5; -webkit-text-size-adjust: 100%; font-weight: 375; letter-spacing: -.005em; font-size: medium; font-size: max(16px, 1rem); font-family: &#39;Inter&#39;, ui-sans-serif, system-ui, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;, &#39;Noto Color Emoji&#39; !important;">\r\n      <!-- Change the preheader text to something you want to be seen at in the inbox -->\r\n      <div style="display: none;">News, tips, and behind the scenes technical mumbo jumbo\r\n      <!-- the below code adds spacing after the preheader text -->\r\n       ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\r\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\r\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \r\n      </div>\r\n      <!--[if true]>\r\n      <table role="presentation" width="100%" align="center" cellpadding="16" border="0" style="background:#4f4f4f;">\r\n        <tr><td></td>\r\n          <td style="width:37.5em;background:#fffffe">\r\n      <![endif]-->\r\n      <div style="max-width:37.5em; margin:0 auto;background:#fffffe; padding:2em;overflow: auto;" class="container">\r\n        <img style="display: block; margin: auto; width: 8em;" src="https://userimg-assets.customeriomail.com/images/client-env-161421/1718249384403_logo-landscape-cookies2_01J07T9TJ2YJ616YPND9M0M3P8.png"/>\r\n        \r\n        <br/>\r\n<p>Hello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you&#39;re doing well, and ask that you holler if we can help with something. Onward!</p>\r\n\r\n<h3 style="margin: 1em 0; font-size: 1.6em; font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: -0.015em; word-spacing: 0.015em; font-family: &#39;Ovo&#39;, serif !important;">Product updates</h3>\r\n\r\n<p>You can always check out the <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL2MvZnJlc2gtcHJvZHVjZS8yNz91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo2MTN9/c370aeeb5186be56bff342368bba9168095da891eddca9e3a5f4bdb9e771d03f">Fresh Produce</a> page to see what we&#39;ve been fiddling with lately. Here are some of the highlights since we last checked in:</p>\r\n\r\n<ul>\r\n  <li>You can <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvYXV0by1kZXBsb3ktb24tcHVzaC10by1naXRodWIvMjIzMDY_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMH0/164b95c7adefbeb39a47c3ec466a0721fe20b834cc9cdfd634cdeb64f5e1e3c6">auto-deploy your apps</a> on Fly.io when you push your code to GitHub, and see the <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvZ2l0aHViLWNoZWNrcy1hbmQtZGVwbG95bWVudHMvMjI2Njk_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMX0/8a09b38b182b26b413b655ff54755f73efac8f2ede1627f266acbc20e54efd39">checks and deployments</a> on the Github side.</li>\r\n  <li>If you want to <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvdXBkYXRlLW1hY2hpbmUtc2l6ZS1mcm9tLXRoZS1kYXNoYm9hcmQvMjI2MDA_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMn0/174640eda7158337140cfd76b8c45cf0ce6853b29f51a9023f2205cf5a3129cd">update machine size</a>, <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QveW91LWNhbi1ub3ctcmVzaXplLXlvdXItZGVwb3QtYnVpbGRlcnMvMjI1Nzg_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxM30/9c28dcdb486734994cc46aaeedd22db61a58514b61243600b4ae4eacba33cc6a">update the size of your builder</a>, or <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvY2xvbmUtbWFjaGluZXMtZnJvbS10aGUtd2ViLXVpLzIyNTQyP3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTR9/3462f8770e26c5e8db70a7b8b5d5e03484cf8ab4f2cff175d9eea8f875e5c0f4">clone machines</a>, you can do it all from the dashboard!</li>\r\n</ul>\r\n\r\n<h3 style="margin: 1em 0; font-size: 1.6em; font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: -0.015em; word-spacing: 0.015em; font-family: &#39;Ovo&#39;, serif !important;">Inside Flyball</h3>\r\n\r\n<p>A big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we&#39;ve made some <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvcmVkZXNpZ25lZC1zdXBwb3J0LXBvcnRhbC8yMjUzND91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE1fQ/ab18015af8390f888d015ed2727951cff23109011f9681da0f8e479570aacc98">improvements to the Support portal</a> that are available to anyone with paid support. We&#39;ve also just shipped &#34;<a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvc3VwcG9ydC1pbXBhY3QtbGV2ZWxzLzIyNTM4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTZ9/c2c82ebd2dccf18b2a760f4ef42ccb26eeaa2b5c0bc547d1de94d049dfa4df88">impact levels</a>&#34; on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we&#39;re curious to know what you think, so hit us with your feedback.</p>\r\n\r\n<h3 style="margin: 1em 0; font-size: 1.6em; font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: -0.015em; word-spacing: 0.015em; font-family: &#39;Ovo&#39;, serif !important;">Feature story: why we got rid of plans</h3>\r\n\r\n<p>When you&#39;re looking for a platform to host your app, one of the first questions you&#39;ll ask is: &#34;how much is this gonna cost me?&#34; Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a &#34;42&#34; on the pricing page and leave it at that.</p>\r\n\r\n<p>Users are doing all kinds of things on Fly.io—like <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL2FtcGxpZmllZD91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE3fQ/c2999a79411d9262699016bfdb21574eb0bacd8974a5921b398d8813436d00e7">sorting through the US Patent system</a> and <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL215bWFoaT91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE4fQ/dd55e313d1cbca385eaaf4e3510b2d79cdc383d2ba539c7df9ad525166e83852">helping teenagers in New Zealand learn outside of school</a>—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: &#34;it depends.&#34; Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you <em>think</em> different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.</p>\r\n\r\n<p>In the beginning, there was usage based pricing. Fly.io actually launched on the &#34;á la carte&#34; side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said &#34;You bet!&#34; But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.</p>\r\n\r\n<p>We ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in &#34;allowances&#34; (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.</p>\r\n\r\n<p>This worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won&#39;t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn&#39;t get a sense for how much it would cost.</p>\r\n\r\n<p>We also realized that the groupings we came up with might not actually make sense for some of Fly.io&#39;s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? &#34;There must be consistency!&#34; we said. (We were getting pretty fired up at this point.)</p>\r\n\r\n<p>So, we got rid of Plans. Instead of grouping resources together, we&#39;ve gone pure &#34;pay as you go.&#34; We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you&#39;re in for. You don&#39;t even have to do the math! We made <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY2FsY3VsYXRvcj91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE5fQ/393875c8cc124b8c05a7d3c389233b405fd2231406358e71cff2b248830fc7e0">this calculator</a> so you can just plug in what you need and have it spit out an approximate total.</p>\r\n\r\n<p>In this brave new world, your invoice will be:</p>\r\n\r\n<ul>\r\n  <li>whatever compute/product resources you use, pro-rated for the time you use them, plus</li>\r\n  <li>whichever add-ons you pick, like Support and/or Compliance</li>\r\n</ul>\r\n\r\n<p>To be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.</p>\r\n\r\n<p>Our aim in getting rid of plans here was to make pricing simpler. <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvd2VyZS1tYWtpbmctcHJpY2luZy1zaW1wbGVyLzIyMTY4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MjB9/983935cc539a8f00dd7dfdc6df9ed20fa014b352a7803f53f2739410fc90480c">Some folks have pointed out</a> that separating out Support and Compliance as &#34;add-ons&#34; means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous &#34;Launch&#34; plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.</p>\r\n\r\n<p>Given that, was this the right call, on balance? We think so, since we figure:</p>\r\n\r\n<ul>\r\n  <li>Users who are already on a plan with us probably understand our pricing well enough, so we haven&#39;t touched anything about their set-up.</li>\r\n  <li>For prospective users, being able to easily and quickly answer the &#34;how much is it gonna cost me&#34; question is crucial.</li>\r\n  <li>With this new set-up, we&#39;re able to price each element at what it <em>actually</em> costs us to provide it to you, plus the margin that allows us to make this a viable business.</li>\r\n</ul>\r\n      </div>\r\n      <div style="text-align:center; margin: 1.5em auto;">\r\n        <hr/>\r\n            <a href="https://go.news.fly.io/unsubscribe/=" class="untracked">Unsubscribe</a> ・\r\n            <a href="https://go.news.fly.io/manage_subscription_preferences/=">Manage Subscriptions</a> ・ \r\n            <a href="https://go.news.fly.io/deliveries/=">View in Browser</a>\r\n      </div>\r\n      <!--[if true]>\r\n      </td>\r\n      <td></td>\r\n      </tr>\r\n      </table>\r\n      <![endif]-->\r\n    </div>\r\n  \r\n<img src="https://go.news.fly.io/e/o/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0ifQ==" style="height: 1px !important; max-height: 1px !important; max-width: 1px !important; width: 1px !important; display: none !important;" alt=""/></body></html><!-- Change the lang and dir attributes to match the language of your email and the direction of that language. Change the aria-label to match the title of your email-->',
+            reply:
+              'Episode #5: why we got rid of plans ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n\nNews, tips, and behind the scenes technical mumbo jumbo   ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates\n\nYou can always check out the [Fresh Produce](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL2MvZnJlc2gtcHJvZHVjZS8yNz91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo2MTN9/c370aeeb5186be56bff342368bba9168095da891eddca9e3a5f4bdb9e771d03f) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\n\n- You can [auto-deploy your apps](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvYXV0by1kZXBsb3ktb24tcHVzaC10by1naXRodWIvMjIzMDY_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMH0/164b95c7adefbeb39a47c3ec466a0721fe20b834cc9cdfd634cdeb64f5e1e3c6) on Fly.io when you push your code to GitHub, and see the [checks and deployments](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvZ2l0aHViLWNoZWNrcy1hbmQtZGVwbG95bWVudHMvMjI2Njk_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMX0/8a09b38b182b26b413b655ff54755f73efac8f2ede1627f266acbc20e54efd39) on the Github side.\n- If you want to [update machine size](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvdXBkYXRlLW1hY2hpbmUtc2l6ZS1mcm9tLXRoZS1kYXNoYm9hcmQvMjI2MDA_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMn0/174640eda7158337140cfd76b8c45cf0ce6853b29f51a9023f2205cf5a3129cd), [update the size of your builder](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QveW91LWNhbi1ub3ctcmVzaXplLXlvdXItZGVwb3QtYnVpbGRlcnMvMjI1Nzg_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxM30/9c28dcdb486734994cc46aaeedd22db61a58514b61243600b4ae4eacba33cc6a), or [clone machines](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvY2xvbmUtbWFjaGluZXMtZnJvbS10aGUtd2ViLXVpLzIyNTQyP3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTR9/3462f8770e26c5e8db70a7b8b5d5e03484cf8ab4f2cff175d9eea8f875e5c0f4), you can do it all from the dashboard!\n\nInside Flyball\n\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some [improvements to the Support portal](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvcmVkZXNpZ25lZC1zdXBwb3J0LXBvcnRhbC8yMjUzND91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE1fQ/ab18015af8390f888d015ed2727951cff23109011f9681da0f8e479570aacc98) that are available to anyone with paid support. We\'ve also just shipped "[impact levels](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvc3VwcG9ydC1pbXBhY3QtbGV2ZWxzLzIyNTM4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTZ9/c2c82ebd2dccf18b2a760f4ef42ccb26eeaa2b5c0bc547d1de94d049dfa4df88)" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\n\nFeature story: why we got rid of plans\n\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\n\nUsers are doing all kinds of things on Fly.io—like [sorting through the US Patent system](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL2FtcGxpZmllZD91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE3fQ/c2999a79411d9262699016bfdb21574eb0bacd8974a5921b398d8813436d00e7) and [helping teenagers in New Zealand learn outside of school](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL215bWFoaT91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE4fQ/dd55e313d1cbca385eaaf4e3510b2d79cdc383d2ba539c7df9ad525166e83852)—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\n\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\n\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\n\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\n\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\n\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made [this calculator](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY2FsY3VsYXRvcj91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE5fQ/393875c8cc124b8c05a7d3c389233b405fd2231406358e71cff2b248830fc7e0) so you can just plug in what you need and have it spit out an approximate total.\n\nIn this brave new world, your invoice will be:\n\n- whatever compute/product resources you use, pro-rated for the time you use them, plus\n- whichever add-ons you pick, like Support and/or Compliance\n\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\n\nOur aim in getting rid of plans here was to make pricing simpler. [Some folks have pointed out](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvd2VyZS1tYWtpbmctcHJpY2luZy1zaW1wbGVyLzIyMTY4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MjB9/983935cc539a8f00dd7dfdc6df9ed20fa014b352a7803f53f2739410fc90480c) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\n\nGiven that, was this the right call, on balance? We think so, since we figure:\n\n- Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\n- For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\n- With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.\n\n---------------------------------------------------------------\n[Unsubscribe](https://go.news.fly.io/unsubscribe/=) ・ [Manage Subscriptions](https://go.news.fly.io/manage_subscription_preferences/=) ・ [View in Browser](https://go.news.fly.io/deliveries/=)\n[]',
+            quoted:
+              'Episode #5: why we got rid of plans ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n\nNews, tips, and behind the scenes technical mumbo jumbo   ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates\n\nYou can always check out the [Fresh Produce](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL2MvZnJlc2gtcHJvZHVjZS8yNz91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo2MTN9/c370aeeb5186be56bff342368bba9168095da891eddca9e3a5f4bdb9e771d03f) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\n\n- You can [auto-deploy your apps](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvYXV0by1kZXBsb3ktb24tcHVzaC10by1naXRodWIvMjIzMDY_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMH0/164b95c7adefbeb39a47c3ec466a0721fe20b834cc9cdfd634cdeb64f5e1e3c6) on Fly.io when you push your code to GitHub, and see the [checks and deployments](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvZ2l0aHViLWNoZWNrcy1hbmQtZGVwbG95bWVudHMvMjI2Njk_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMX0/8a09b38b182b26b413b655ff54755f73efac8f2ede1627f266acbc20e54efd39) on the Github side.\n- If you want to [update machine size](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvdXBkYXRlLW1hY2hpbmUtc2l6ZS1mcm9tLXRoZS1kYXNoYm9hcmQvMjI2MDA_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMn0/174640eda7158337140cfd76b8c45cf0ce6853b29f51a9023f2205cf5a3129cd), [update the size of your builder](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QveW91LWNhbi1ub3ctcmVzaXplLXlvdXItZGVwb3QtYnVpbGRlcnMvMjI1Nzg_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxM30/9c28dcdb486734994cc46aaeedd22db61a58514b61243600b4ae4eacba33cc6a), or [clone machines](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvY2xvbmUtbWFjaGluZXMtZnJvbS10aGUtd2ViLXVpLzIyNTQyP3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTR9/3462f8770e26c5e8db70a7b8b5d5e03484cf8ab4f2cff175d9eea8f875e5c0f4), you can do it all from the dashboard!\n\nInside Flyball\n\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some [improvements to the Support portal](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvcmVkZXNpZ25lZC1zdXBwb3J0LXBvcnRhbC8yMjUzND91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE1fQ/ab18015af8390f888d015ed2727951cff23109011f9681da0f8e479570aacc98) that are available to anyone with paid support. We\'ve also just shipped "[impact levels](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvc3VwcG9ydC1pbXBhY3QtbGV2ZWxzLzIyNTM4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTZ9/c2c82ebd2dccf18b2a760f4ef42ccb26eeaa2b5c0bc547d1de94d049dfa4df88)" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\n\nFeature story: why we got rid of plans\n\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\n\nUsers are doing all kinds of things on Fly.io—like [sorting through the US Patent system](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL2FtcGxpZmllZD91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE3fQ/c2999a79411d9262699016bfdb21574eb0bacd8974a5921b398d8813436d00e7) and [helping teenagers in New Zealand learn outside of school](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL215bWFoaT91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE4fQ/dd55e313d1cbca385eaaf4e3510b2d79cdc383d2ba539c7df9ad525166e83852)—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\n\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\n\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\n\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\n\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\n\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made [this calculator](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY2FsY3VsYXRvcj91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE5fQ/393875c8cc124b8c05a7d3c389233b405fd2231406358e71cff2b248830fc7e0) so you can just plug in what you need and have it spit out an approximate total.\n\nIn this brave new world, your invoice will be:\n\n- whatever compute/product resources you use, pro-rated for the time you use them, plus\n- whichever add-ons you pick, like Support and/or Compliance\n\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\n\nOur aim in getting rid of plans here was to make pricing simpler. [Some folks have pointed out](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvd2VyZS1tYWtpbmctcHJpY2luZy1zaW1wbGVyLzIyMTY4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MjB9/983935cc539a8f00dd7dfdc6df9ed20fa014b352a7803f53f2739410fc90480c) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\n\nGiven that, was this the right call, on balance? We think so, since we figure:\n\n- Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\n- For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\n- With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.',
+          },
+          in_reply_to: null,
+          message_id: '20241130215847.b6abc8cb4ce389f3@cio106219.news.fly.io',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: "Fly.io November '24 Newsletter",
+          text_content: {
+            full: 'News, tips, and behind the scenes technical mumbo jumbo\r\n\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\r\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\r\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \r\n\r\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\r\n\r\nProduct updates\r\n---------------\r\n\r\nYou can always check out the Fresh Produce ( https://community.fly.io/c/fresh-produce/27?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\r\n\r\n* You can auto-deploy your apps ( https://community.fly.io/t/auto-deploy-on-push-to-github/22306?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on Fly.io when you push your code to GitHub, and see the checks and deployments ( https://community.fly.io/t/github-checks-and-deployments/22669?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on the Github side.\r\n* If you want to update machine size ( https://community.fly.io/t/update-machine-size-from-the-dashboard/22600?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), update the size of your builder ( https://community.fly.io/t/you-can-now-resize-your-depot-builders/22578?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), or clone machines ( https://community.fly.io/t/clone-machines-from-the-web-ui/22542?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), you can do it all from the dashboard!\r\n\r\nInside Flyball\r\n--------------\r\n\r\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some improvements to the Support portal ( https://community.fly.io/t/redesigned-support-portal/22534?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that are available to anyone with paid support. We\'ve also just shipped "impact levels ( https://community.fly.io/t/support-impact-levels/22538?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\r\n\r\nFeature story: why we got rid of plans\r\n--------------------------------------\r\n\r\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\r\n\r\nUsers are doing all kinds of things on Fly.io—like sorting through the US Patent system ( https://fly.io/customers/amplified?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) and helping teenagers in New Zealand learn outside of school ( https://fly.io/customers/mymahi?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\r\n\r\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\r\n\r\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\r\n\r\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\r\n\r\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\r\n\r\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made this calculator ( https://fly.io/calculator?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) so you can just plug in what you need and have it spit out an approximate total.\r\n\r\nIn this brave new world, your invoice will be:\r\n\r\n* whatever compute/product resources you use, pro-rated for the time you use them, plus\r\n* whichever add-ons you pick, like Support and/or Compliance\r\n\r\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\r\n\r\nOur aim in getting rid of plans here was to make pricing simpler. Some folks have pointed out ( https://community.fly.io/t/were-making-pricing-simpler/22168?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\r\n\r\nGiven that, was this the right call, on balance? We think so, since we figure:\r\n\r\n* Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\r\n* For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\r\n* With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.\r\n\r\nUnsubscribe ( http://track.customer.io/unsubscribe/= ) ・\r\nManage Subscriptions ( http://track.customer.io/manage_subscription_preferences/= ) ・\r\nView in Browser ( http://track.customer.io/deliveries/= )',
+            reply:
+              'News, tips, and behind the scenes technical mumbo jumbo\n\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates\n---------------\n\nYou can always check out the Fresh Produce ( https://community.fly.io/c/fresh-produce/27?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\n\n* You can auto-deploy your apps ( https://community.fly.io/t/auto-deploy-on-push-to-github/22306?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on Fly.io when you push your code to GitHub, and see the checks and deployments ( https://community.fly.io/t/github-checks-and-deployments/22669?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on the Github side.\n* If you want to update machine size ( https://community.fly.io/t/update-machine-size-from-the-dashboard/22600?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), update the size of your builder ( https://community.fly.io/t/you-can-now-resize-your-depot-builders/22578?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), or clone machines ( https://community.fly.io/t/clone-machines-from-the-web-ui/22542?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), you can do it all from the dashboard!\n\nInside Flyball\n--------------\n\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some improvements to the Support portal ( https://community.fly.io/t/redesigned-support-portal/22534?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that are available to anyone with paid support. We\'ve also just shipped "impact levels ( https://community.fly.io/t/support-impact-levels/22538?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\n\nFeature story: why we got rid of plans\n--------------------------------------\n\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\n\nUsers are doing all kinds of things on Fly.io—like sorting through the US Patent system ( https://fly.io/customers/amplified?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) and helping teenagers in New Zealand learn outside of school ( https://fly.io/customers/mymahi?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\n\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\n\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\n\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\n\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\n\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made this calculator ( https://fly.io/calculator?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) so you can just plug in what you need and have it spit out an approximate total.\n\nIn this brave new world, your invoice will be:\n\n* whatever compute/product resources you use, pro-rated for the time you use them, plus\n* whichever add-ons you pick, like Support and/or Compliance\n\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\n\nOur aim in getting rid of plans here was to make pricing simpler. Some folks have pointed out ( https://community.fly.io/t/were-making-pricing-simpler/22168?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\n\nGiven that, was this the right call, on balance? We think so, since we figure:\n\n* Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\n* For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\n* With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.\n\nUnsubscribe ( http://track.customer.io/unsubscribe/= ) ・\nManage Subscriptions ( http://track.customer.io/manage_subscription_preferences/= ) ・\nView in Browser ( http://track.customer.io/deliveries/= )',
+            quoted:
+              "News, tips, and behind the scenes technical mumbo jumbo\n\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you're doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates",
+          },
+          to: ['shivam@chatwoot.com'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111249,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        "News, tips, and behind the scenes technical mumbo jumbo\n\n\n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you're doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates",
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 0,
+        last_activity_at: 1733141022,
+        contact_inbox: {
+          source_id: 'team@news.fly.io',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id:
+            'email:20241130215847.b6abc8cb4ce389f3@cio106219.news.fly.io',
+        },
+        custom_attributes: {},
+        email: 'team@news.fly.io',
+        id: 111249,
+        identifier: null,
+        name: 'Fly.io Team',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 60714,
+      content:
+        'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+      account_id: 51,
+      inbox_id: 991,
+      conversation_id: 44,
+      message_type: 0,
+      created_at: 1733141025,
+      updated_at: '2024-12-02T12:03:45.272Z',
+      private: false,
+      status: 'sent',
+      source_id: '7baNGWOeR1CfiWUWYlMXow@geopod-ismtpd-2',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=1e7683c70dae8b1a431814bc5779c7c187eb712e01a6f20c47756c722d87',
+          date: '2024-12-02T05:36:05+00:00',
+          from: ['contactwwod@myhq.in'],
+          html_content: {
+            full: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\r\n<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">\r\n    <head>\r\n      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r\n      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">\r\n      <!--[if !mso]><!-->\r\n      <meta http-equiv="X-UA-Compatible" content="IE=Edge">\r\n      <!--<![endif]-->\r\n      <!--[if (gte mso 9)|(IE)]>\r\n      <xml>\r\n        <o:OfficeDocumentSettings>\r\n          <o:AllowPNG/>\r\n          <o:PixelsPerInch>96</o:PixelsPerInch>\r\n        </o:OfficeDocumentSettings>\r\n      </xml>\r\n      <![endif]-->\r\n      <!--[if (gte mso 9)|(IE)]>\r\n  <style type="text/css">\r\n    body {width: 600px;margin: 0 auto;}\r\n    table {border-collapse: collapse;}\r\n    table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}\r\n    img {-ms-interpolation-mode: bicubic;}\r\n  </style>\r\n<![endif]-->\r\n      <style type="text/css">\r\n    body, p, div {\r\n      font-family: arial,helvetica,sans-serif;\r\n      font-size: 14px;\r\n    }\r\n    body {\r\n      color: #000000;\r\n    }\r\n    body a {\r\n      color: #1188E6;\r\n      text-decoration: none;\r\n    }\r\n    p { margin: 0; padding: 0; }\r\n    table.wrapper {\r\n      width:100% !important;\r\n      table-layout: fixed;\r\n      -webkit-font-smoothing: antialiased;\r\n      -webkit-text-size-adjust: 100%;\r\n      -moz-text-size-adjust: 100%;\r\n      -ms-text-size-adjust: 100%;\r\n    }\r\n    img.max-width {\r\n      max-width: 100% !important;\r\n    }\r\n    .column.of-2 {\r\n      width: 50%;\r\n    }\r\n    .column.of-3 {\r\n      width: 33.333%;\r\n    }\r\n    .column.of-4 {\r\n      width: 25%;\r\n    }\r\n    ul ul ul ul  {\r\n      list-style-type: disc !important;\r\n    }\r\n    ol ol {\r\n      list-style-type: lower-roman !important;\r\n    }\r\n    ol ol ol {\r\n      list-style-type: lower-latin !important;\r\n    }\r\n    ol ol ol ol {\r\n      list-style-type: decimal !important;\r\n    }\r\n    @media screen and (max-width:480px) {\r\n      .preheader .rightColumnContent,\r\n      .footer .rightColumnContent {\r\n        text-align: left !important;\r\n      }\r\n      .preheader .rightColumnContent div,\r\n      .preheader .rightColumnContent span,\r\n      .footer .rightColumnContent div,\r\n      .footer .rightColumnContent span {\r\n        text-align: left !important;\r\n      }\r\n      .preheader .rightColumnContent,\r\n      .preheader .leftColumnContent {\r\n        font-size: 80% !important;\r\n        padding: 5px 0;\r\n      }\r\n      table.wrapper-mobile {\r\n        width: 100% !important;\r\n        table-layout: fixed;\r\n      }\r\n      img.max-width {\r\n        height: auto !important;\r\n        max-width: 100% !important;\r\n      }\r\n      a.bulletproof-button {\r\n        display: block !important;\r\n        width: auto !important;\r\n        font-size: 80%;\r\n        padding-left: 0 !important;\r\n        padding-right: 0 !important;\r\n      }\r\n      .columns {\r\n        width: 100% !important;\r\n      }\r\n      .column {\r\n        display: block !important;\r\n        width: 100% !important;\r\n        padding-left: 0 !important;\r\n        padding-right: 0 !important;\r\n        margin-left: 0 !important;\r\n        margin-right: 0 !important;\r\n      }\r\n      .social-icon-column {\r\n        display: inline-block !important;\r\n      }\r\n    }\r\n  </style>\r\n      <!--user entered Head Start--><!--End Head user entered-->\r\n    </head>\r\n    <body>\r\n      <center class="wrapper" data-link-color="#1188E6" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">\r\n        <div class="webkit">\r\n          <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">\r\n            <tr>\r\n              <td valign="top" bgcolor="#FFFFFF" width="100%">\r\n                <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">\r\n                  <tr>\r\n                    <td width="100%">\r\n                      <table width="100%" cellpadding="0" cellspacing="0" border="0">\r\n                        <tr>\r\n                          <td>\r\n                            <!--[if mso]>\r\n    <center>\r\n    <table><tr><td width="600">\r\n  <![endif]-->\r\n                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">\r\n                                      <tr>\r\n                                        <td role="modules-container" style="padding:0px 0px 0px 0px; color:#000000; text-align:left;" bgcolor="#FFFFFF" width="100%" align="left"><table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0" width="100%" style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">\r\n    <tr>\r\n      <td role="module-content">\r\n        <p></p>\r\n      </td>\r\n    </tr>\r\n  </table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="eacb393a-0436-46cd-bd8e-30e8f600abb3">\r\n    <tbody>\r\n      <tr>\r\n        <td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">\r\n          <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/04dab37225190aa7/ca1c1b30-6e2b-4a9a-abf3-1893193cc4dd/1200x99.png">\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="d9ddc2d7-5162-43df-8e6c-2215c715763e">\r\n    <tbody>\r\n      <tr>\r\n        <td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">\r\n          <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/04dab37225190aa7/e13b2ded-0ded-4789-9920-49d64f9f3f0d/1200x678.png">\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="778f29eb-eec9-4844-93ed-19f1faec3161" data-mc-module-version="2019-10-22">\r\n    <tbody>\r\n      <tr>\r\n        <td style="padding:18px 0px 18px 10px; line-height:22px; text-align:inherit; background-color:#f7f7f7;" height="100%" valign="top" bgcolor="#f7f7f7" role="module-content"><div><div style="font-family: inherit; text-align: inherit"><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 24px">Get </span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 24px"><strong>more productive days</strong></span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 24px"> at a better price</span><span style="font-family: helvetica, sans-serif; font-size: 24px">&nbsp;</span></div><div></div></div></td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="782348f7-234d-431f-851a-908af773b520" data-mc-module-version="2019-10-22">\r\n    <tbody>\r\n      <tr>\r\n        <td style="padding:18px 0px 18px 10px; line-height:22px; text-align:inherit; background-color:#f7f7f7;" height="100%" valign="top" bgcolor="#f7f7f7" role="module-content"><div><div style="font-family: inherit; text-align: inherit"><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">Hey there,</span><span style="font-family: helvetica, sans-serif; font-size: 16px"><br>\r\n<br>\r\n</span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">Your 5 day bundle is coming to an end.</span></div>\r\n<div style="font-family: inherit; text-align: inherit"><span style="font-family: helvetica, sans-serif; font-size: 16px"><br>\r\n</span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">To get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.</span><span style="font-family: helvetica, sans-serif; font-size: 16px"><br>\r\n<br>\r\n</span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">Book day pass bundles of 10 at </span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px"><strong>30% off</strong></span><span style="font-family: helvetica, sans-serif; font-size: 16px"><br>\r\n</span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">Use code: </span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px"><strong>BUNDLE30</strong></span><span style="font-family: helvetica, sans-serif; font-size: 16px"><strong>&nbsp;</strong></span></div><div></div></div></td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table border="0" cellpadding="0" cellspacing="0" class="module" data-role="module-button" data-type="button" role="module" style="table-layout:fixed;" width="100%" data-muid="d5de0ef7-db7f-4eea-acc9-6a79b6e42e46">\r\n      <tbody>\r\n        <tr>\r\n          <td align="left" bgcolor="f7f7f7" class="outer-td" style="padding:0px 0px 0px 10px; background-color:f7f7f7;">\r\n            <table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile" style="text-align:center;">\r\n              <tbody>\r\n                <tr>\r\n                <td align="center" bgcolor="#1e22aa" class="inner-td" style="border-radius:6px; font-size:16px; text-align:left; background-color:inherit;">\r\n                  <a href="http://url492.myhq.in/ls/click?upn=" style="background-color:#1e22aa; border:1px solid #333333; border-color:#333333; border-radius:6px; border-width:1px; color:#ffffff; display:inline-block; font-size:16px; font-weight:normal; letter-spacing:0px; line-height:normal; padding:12px 18px 12px 18px; text-align:center; text-decoration:none; border-style:solid;" target="https://wework.co.in/workspaces/on-demand/day-pass-bundles?utm_source=sendgrid_email&utm_medium=sendgrid_email&utm_campaign=myHQ_sendgrid_bundle_upsell&utm_term=sendgrid_email_bundle_upsell&utm_content=sendgrid_email_%20bundle_upsell_CTA">Book now</a>\r\n                </td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="5c4e7155-d9cf-4262-9d03-958d03c22f1f" data-mc-module-version="2019-10-22">\r\n    <tbody>\r\n      <tr>\r\n        <td style="padding:18px 0px 18px 10px; line-height:22px; text-align:inherit; background-color:#f7f7f7;" height="100%" valign="top" bgcolor="#f7f7f7" role="module-content"><div><div style="font-family: inherit; text-align: start"><span style="box-sizing: border-box; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-weight: bold; font-stretch: inherit; line-height: inherit; font-family: helvetica, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 16px; vertical-align: baseline; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space-collapse: preserve; text-wrap: wrap; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-color: rgb(247, 247, 247)">Why book a day pass bundle?</span></div>\r\n<div style="font-family: inherit; text-align: start"><br></div>\r\n<div style="font-family: inherit; text-align: inherit; margin-left: 0px"><span style="box-sizing: border-box; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-weight: 700; font-stretch: inherit; line-height: inherit; font-family: helvetica, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 16px; vertical-align: baseline; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space-collapse: preserve; text-wrap: wrap; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline; background-color: rgb(247, 247, 247)">Explore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing &amp; on-site parking for multiple productive days in a row.</span><span style="background-color: rgb(247, 247, 247)">&nbsp;</span></div><div></div></div></td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="6e1adfd1-27a0-418a-8982-ff353d88ce13">\r\n    <tbody>\r\n      <tr>\r\n        <td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">\r\n          <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/04dab37225190aa7/46db5fd4-9558-402a-ac47-93a618a1f37a/569x358.png">\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table border="0" cellpadding="0" cellspacing="0" class="module" data-role="module-button" data-type="button" role="module" style="table-layout:fixed;" width="100%" data-muid="d5de0ef7-db7f-4eea-acc9-6a79b6e42e46.1">\r\n      <tbody>\r\n        <tr>\r\n          <td align="left" bgcolor="#F7F7F7" class="outer-td" style="padding:0px 0px 0px 10px; background-color:#F7F7F7;">\r\n            <table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile" style="text-align:center;">\r\n              <tbody>\r\n                <tr>\r\n                <td align="center" bgcolor="#1e22aa" class="inner-td" style="border-radius:6px; font-size:16px; text-align:left; background-color:inherit;">\r\n                  <a href="http://url492.myhq.in/ls/click?upn=" style="background-color:#1e22aa; border:1px solid #333333; border-color:#333333; border-radius:6px; border-width:1px; color:#ffffff; display:inline-block; font-size:16px; font-weight:normal; letter-spacing:0px; line-height:normal; padding:12px 18px 12px 18px; text-align:center; text-decoration:none; border-style:solid;" target="https://wework.co.in/workspaces/on-demand/day-pass-bundles?utm_source=sendgrid_email&utm_medium=sendgrid_email&utm_campaign=myHQ_sendgrid_bundle_upsell&utm_term=sendgrid_email_bundle_upsell&utm_content=sendgrid_email_%20bundle_upsell_CTA">Book now</a>\r\n                </td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="5bdd1e34-b004-465c-b9cf-59adce68649c" data-mc-module-version="2019-10-22">\r\n    <tbody>\r\n      <tr>\r\n        <td style="padding:18px 0px 18px 10px; line-height:11px; text-align:inherit; background-color:#f7f7f7;" height="100%" valign="top" bgcolor="#f7f7f7" role="module-content"><div><div style="font-family: inherit; text-align: inherit"><span style="white-space-collapse: preserve; text-wrap: wrap; font-size: 9px">*T&amp;Cs apply </span></div>\r\n<ul>\r\n  <li style="text-align: inherit; font-size: 9px; font-size: 9px"><span style="white-space-collapse: preserve; text-wrap: wrap; font-size: 9px">Offer applicable at all locations across India</span></li>\r\n  <li style="text-align: inherit; font-size: 9px; font-size: 9px"><span style="white-space-collapse: preserve; text-wrap: wrap; font-size: 9px">Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand</span></li>\r\n  <li style="text-align: inherit; font-size: 9px; font-size: 9px"><span style="white-space-collapse: preserve; text-wrap: wrap; font-size: 9px">Offer valid for one time use only</span><span style="font-size: 9px">&nbsp;</span></li>\r\n</ul><div></div></div></td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="f01742d8-f6cd-4903-9bda-016d66baa598">\r\n    <tbody>\r\n      <tr>\r\n        <td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">\r\n          <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/04dab37225190aa7/2d67bc44-55bc-4354-badc-044734a955d7/1200x268.png">\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table><div data-role="module-unsubscribe" class="module" role="module" data-type="unsubscribe" style="color:#1e22aa; font-size:12px; line-height:20px; padding:16px 16px 16px 16px; text-align:Center;" data-muid="4e838cf3-9892-4a6d-94d6-170e474d21e5"><p style="font-family:helvetica,sans-serif; font-size:12px; line-height:20px;"><a class="Unsubscribe--unsubscribeLink" href="<%asm_group_unsubscribe_raw_url%>" target="_blank" style="">Unsubscribe</a></p></div></td>\r\n                                      </tr>\r\n                                    </table>\r\n                                    <!--[if mso]>\r\n                                  </td>\r\n                                </tr>\r\n                              </table>\r\n                            </center>\r\n                            <![endif]-->\r\n                          </td>\r\n                        </tr>\r\n                      </table>\r\n                    </td>\r\n                  </tr>\r\n                </table>\r\n              </td>\r\n            </tr>\r\n          </table>\r\n        </div>\r\n      </center>\r\n    <p>If you&nbsp;unsubscribe, you will not receive any email communication on your WeWork transactions and benefits from the myHQ team&nbsp;<a href="http://url492.myhq.in/wf/unsubscribe?upn="> click here </a>.</p>\r\n<img src="http://url492.myhq.in/wf/open?upn=" alt="" width="1" height="1" border="0" style="height:1px !important;width:1px !important;border-width:0 !important;margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;"/></body>\r\n  </html>`,
+            reply: `[]\n[]\n\nGet more productive days at a better price\n\nHey there,\nYour 5 day bundle is coming to an end.\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\nBook day pass bundles of 10 at 30% off Use code: BUNDLE30\n\n[Book now](http://url492.myhq.in/ls/click?upn=)\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\n[]\n\n[Book now](http://url492.myhq.in/ls/click?upn=)\n\n*T&Cs apply \n\n- Offer applicable at all locations across India\n- Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n-  Offer valid for one time use only\n\n[]\n\n[Unsubscribe](<%asm_group_unsubscribe_raw_url%>)\n\nIf you unsubscribe, you will not receive any email communication on your WeWork transactions and benefits from the myHQ team [click here](http://url492.myhq.in/wf/unsubscribe?upn=).\n\n[]`,
+            quoted: `[]\n[]\n\nGet more productive days at a better price\n\nHey there,\nYour 5 day bundle is coming to an end.\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\nBook day pass bundles of 10 at 30% off Use code: BUNDLE30\n\n[Book now](http://url492.myhq.in/ls/click?upn=)\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\n[]\n\n[Book now](http://url492.myhq.in/ls/click?upn=)\n\n*T&Cs apply \n\n- Offer applicable at all locations across India\n- Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n-  Offer valid for one time use only\n\n[]\n\n[Unsubscribe](<%asm_group_unsubscribe_raw_url%>)\n\nIf you unsubscribe, you will not receive any email communication on your WeWork transactions and benefits from the myHQ team [click here](http://url492.myhq.in/wf/unsubscribe?upn=).\n\n[]`,
+          },
+          in_reply_to: null,
+          message_id: '7baNGWOeR1CfiWUWYlMXow@geopod-ismtpd-2',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: 'Book your favourite workspaces at discounted prices',
+          text_content: {
+            full: 'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+            reply:
+              'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+            quoted:
+              'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+          },
+          to: ['shivam@chatwoot.com'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111254,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 0,
+        last_activity_at: 1733141025,
+        contact_inbox: {
+          source_id: 'contactwwod@myhq.in',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id: 'email:7baNGWOeR1CfiWUWYlMXow@geopod-ismtpd-2',
+        },
+        custom_attributes: {},
+        email: 'contactwwod@myhq.in',
+        id: 111254,
+        identifier: null,
+        name: 'WeWork India',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/simpleEmail.js b/app/javascript/dashboard/components-next/message/fixtures/simpleEmail.js
new file mode 100644
index 000000000..c6aaf7694
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/simpleEmail.js
@@ -0,0 +1,85 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 60716,
+      content:
+        "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.\n------------------------------\nKey Updates\n\n   1.\n\n   *Integration Status*:\n   The initial integration with Chatwoot has been successful. We've tested:\n   - API connectivity\n      - Multi-channel messaging\n      - Real-time chat updates\n   2.\n\n   *Upcoming Tasks*:\n   - Streamlining notification workflows\n      - Enhancing webhook reliability\n      - Testing team collaboration features\n\n*Note:*\nDon’t forget to check out the automation capabilities in Chatwoot for\nhandling repetitive queries. It can save a ton of time!\n\n------------------------------\nFeatures We Love\n\nHere’s what stood out so far:\n\n   - *Unified Inbox*: All customer conversations in one place.\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\n   - *Integrations*: Works seamlessly with CRM and Slack.\n\n------------------------------\nAction Items For Next Week:\n\n   1. Implement the webhook for *ticket prioritization*.\n   2. Test *CSAT surveys* post-chat sessions.\n   3. Review *analytics dashboard* insights.\n\n------------------------------\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\nMetric Value Change (%)\nTotal Conversations 350 +25%\nAverage Response Time 3 minutes -15%\nCSAT Score 92% +10%\n------------------------------\nFeedback\n\n*Do let me know if you have additional feedback or ideas to improve our\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\nchanges:*\n\n[image: Chatwoot Dashboard Screenshot]\n------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+      account_id: 51,
+      inbox_id: 991,
+      conversation_id: 46,
+      message_type: 0,
+      created_at: 1733141025,
+      updated_at: '2024-12-02T12:03:45.663Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=0000000000009d889e0628477235',
+          date: '2024-12-02T16:29:39+05:30',
+          from: ['hey@shivam.dev'],
+          html_content: {
+            full: '<div dir="ltr"><h3><span style="font-size:small;font-weight:normal">Hi Team,</span></h3>\r\n<p>I hope this email finds you well! I wanted to share some updates regarding our integration with <strong>Chatwoot</strong> and outline some key features we’ve explored.</p>\r\n<hr>\r\n<h3>Key Updates</h3>\r\n<ol>\r\n<li>\r\n<p><strong>Integration Status</strong>:<br>\r\nThe initial integration with Chatwoot has been successful. We&#39;ve tested:</p>\r\n<ul>\r\n<li>API connectivity</li>\r\n<li>Multi-channel messaging</li>\r\n<li>Real-time chat updates</li>\r\n</ul>\r\n</li>\r\n<li>\r\n<p><strong>Upcoming Tasks</strong>:</p>\r\n<ul>\r\n<li>Streamlining notification workflows</li>\r\n<li>Enhancing webhook reliability</li>\r\n<li>Testing team collaboration features</li>\r\n</ul>\r\n</li>\r\n</ol>\r\n<blockquote>\r\n<p><strong>Note:</strong><br>\r\nDon’t forget to check out the automation capabilities in Chatwoot for handling repetitive queries. It can save a ton of time!</p>\r\n</blockquote>\r\n<hr>\r\n<h3>Features We Love</h3>\r\n<p>Here’s what stood out so far:</p>\r\n<ul>\r\n<li><strong>Unified Inbox</strong>: All customer conversations in one place.</li>\r\n<li><strong>Customizable Workflows</strong>: Tailored to our team’s unique needs.</li>\r\n<li><strong>Integrations</strong>: Works seamlessly with CRM and Slack.</li>\r\n</ul>\r\n<hr>\r\n<h3>Action Items</h3>\r\n<h4>For Next Week:</h4>\r\n<ol>\r\n<li>Implement the webhook for <strong>ticket prioritization</strong>.</li>\r\n<li>Test <strong>CSAT surveys</strong> post-chat sessions.</li>\r\n<li>Review <strong>analytics dashboard</strong> insights.</li>\r\n</ol>\r\n<hr>\r\n<h3>Data Snapshot</h3>\r\n<p>Here’s a quick overview of our conversation stats this week:</p>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th>Metric</th>\r\n<th>Value</th>\r\n<th>Change (%)</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td>Total Conversations</td>\r\n<td>350</td>\r\n<td>+25%</td>\r\n</tr>\r\n<tr>\r\n<td>Average Response Time</td>\r\n<td>3 minutes</td>\r\n<td>-15%</td>\r\n</tr>\r\n<tr>\r\n<td>CSAT Score</td>\r\n<td>92%</td>\r\n<td>+10%</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n<hr>\r\n<h3>Feedback</h3>\r\n<p><i>Do let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:</i></p>\r\n<p><img src="https://via.placeholder.com/600x300" alt="Chatwoot Dashboard Screenshot" title="Chatwoot Dashboard"></p>\r\n<hr>\r\n<p>Looking forward to hearing your thoughts!</p>\r\n<p>Best regards,<br>~ Shivam Mishra<br></p></div>\r\n',
+            reply:
+              "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.\n\n---------------------------------------------------------------\n\nKey Updates\n\n-\n\nIntegration Status:\nThe initial integration with Chatwoot has been successful. We've tested:\n\n- API connectivity\n- Multi-channel messaging\n- Real-time chat updates\n\n-\n\nUpcoming Tasks:\n\n- Streamlining notification workflows\n- Enhancing webhook reliability\n- Testing team collaboration features\n\n>\n---------------------------------------------------------------\n\nFeatures We Love\n\nHere’s what stood out so far:\n\n-  Unified Inbox: All customer conversations in one place.\n-  Customizable Workflows: Tailored to our team’s unique needs.\n-  Integrations: Works seamlessly with CRM and Slack.\n\n---------------------------------------------------------------\n\nAction Items\n\nFor Next Week:\n\n- Implement the webhook for ticket prioritization.\n- Test CSAT surveys post-chat sessions.\n- Review analytics dashboard insights.\n\n---------------------------------------------------------------\n\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\n\nMetric\tValue\tChange (%)\nTotal Conversations\t350\t+25%\nAverage Response Time\t3 minutes\t-15%\nCSAT Score\t92%\t+10%\n---------------------------------------------------------------\n\nFeedback\n\nDo let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:\n\n[Chatwoot Dashboard]\n\n---------------------------------------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+            quoted:
+              'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.',
+          },
+          in_reply_to: null,
+          message_id:
+            'CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: 'Update on Chatwoot Integration and Features',
+          text_content: {
+            full: "Hi Team,\r\n\r\nI hope this email finds you well! I wanted to share some updates regarding\r\nour integration with *Chatwoot* and outline some key features we’ve\r\nexplored.\r\n------------------------------\r\nKey Updates\r\n\r\n   1.\r\n\r\n   *Integration Status*:\r\n   The initial integration with Chatwoot has been successful. We've tested:\r\n   - API connectivity\r\n      - Multi-channel messaging\r\n      - Real-time chat updates\r\n   2.\r\n\r\n   *Upcoming Tasks*:\r\n   - Streamlining notification workflows\r\n      - Enhancing webhook reliability\r\n      - Testing team collaboration features\r\n\r\n*Note:*\r\nDon’t forget to check out the automation capabilities in Chatwoot for\r\nhandling repetitive queries. It can save a ton of time!\r\n\r\n------------------------------\r\nFeatures We Love\r\n\r\nHere’s what stood out so far:\r\n\r\n   - *Unified Inbox*: All customer conversations in one place.\r\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\r\n   - *Integrations*: Works seamlessly with CRM and Slack.\r\n\r\n------------------------------\r\nAction Items For Next Week:\r\n\r\n   1. Implement the webhook for *ticket prioritization*.\r\n   2. Test *CSAT surveys* post-chat sessions.\r\n   3. Review *analytics dashboard* insights.\r\n\r\n------------------------------\r\nData Snapshot\r\n\r\nHere’s a quick overview of our conversation stats this week:\r\nMetric Value Change (%)\r\nTotal Conversations 350 +25%\r\nAverage Response Time 3 minutes -15%\r\nCSAT Score 92% +10%\r\n------------------------------\r\nFeedback\r\n\r\n*Do let me know if you have additional feedback or ideas to improve our\r\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\r\nchanges:*\r\n\r\n[image: Chatwoot Dashboard Screenshot]\r\n------------------------------\r\n\r\nLooking forward to hearing your thoughts!\r\n\r\nBest regards,\r\n~ Shivam Mishra\r\n",
+            reply:
+              "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.\n------------------------------\nKey Updates\n\n   1.\n\n   *Integration Status*:\n   The initial integration with Chatwoot has been successful. We've tested:\n   - API connectivity\n      - Multi-channel messaging\n      - Real-time chat updates\n   2.\n\n   *Upcoming Tasks*:\n   - Streamlining notification workflows\n      - Enhancing webhook reliability\n      - Testing team collaboration features\n\n*Note:*\nDon’t forget to check out the automation capabilities in Chatwoot for\nhandling repetitive queries. It can save a ton of time!\n\n------------------------------\nFeatures We Love\n\nHere’s what stood out so far:\n\n   - *Unified Inbox*: All customer conversations in one place.\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\n   - *Integrations*: Works seamlessly with CRM and Slack.\n\n------------------------------\nAction Items For Next Week:\n\n   1. Implement the webhook for *ticket prioritization*.\n   2. Test *CSAT surveys* post-chat sessions.\n   3. Review *analytics dashboard* insights.\n\n------------------------------\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\nMetric Value Change (%)\nTotal Conversations 350 +25%\nAverage Response Time 3 minutes -15%\nCSAT Score 92% +10%\n------------------------------\nFeedback\n\n*Do let me know if you have additional feedback or ideas to improve our\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\nchanges:*\n\n[image: Chatwoot Dashboard Screenshot]\n------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+            quoted:
+              'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.',
+          },
+          to: ['shivam@chatwoot.com'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 1,
+        last_activity_at: 1733141025,
+        contact_inbox: {
+          source_id: 'hey@shivam.dev',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id:
+            'email:CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'hey@shivam.dev',
+        id: 111256,
+        identifier: null,
+        name: 'Shivam Mishra',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/textOnly.js b/app/javascript/dashboard/components-next/message/fixtures/textOnly.js
new file mode 100644
index 000000000..a79791e4f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/textOnly.js
@@ -0,0 +1,715 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 5272,
+      content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      created_at: 1732195656,
+      private: false,
+      source_id: null,
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5273,
+      content: 'Give the team a way to reach you.',
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 3,
+      content_type: 'text',
+      status: 'read',
+      content_attributes: {},
+      created_at: 1732195656,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 5274,
+      content: 'Get notified by email',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 3,
+      created_at: 1732195656,
+      updated_at: '2024-11-21T13:27:53.612Z',
+      private: false,
+      status: 'read',
+      source_id: null,
+      content_type: 'input_email',
+      content_attributes: {
+        submitted_email: 'hey@example.com',
+      },
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Get notified by email',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 1,
+        last_activity_at: 1732195656,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+    {
+      id: 5275,
+      content:
+        'Does the Startup plan include the two users from the Free plan, or do I have to buy those separately?',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195735,
+      updated_at: '2024-11-21T13:28:55.508Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Does the Startup plan include the two users from the Free plan, or do I have to buy those separately?',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 1,
+        last_activity_at: 1732195735,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'John self-assigned this conversation',
+      id: 5276,
+      content: 'John self-assigned this conversation',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 2,
+      created_at: 1732195741,
+      updated_at: '2024-11-21T13:30:26.788Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195826,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:29:01.570Z', '2024-11-21T13:30:26.788Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Hey thanks for your interest in upgrading, no, the seats are not included, you will have to purchase them alongside the rest. How many seats are you planning to upgrade to?',
+      id: 5277,
+      content:
+        'Hey thanks for your interest in upgrading, no, the seats are not included, you will have to purchase them alongside the rest. How many seats are you planning to upgrade to?',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195826,
+      updated_at: '2024-11-21T13:30:26.837Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195826,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:30:26.149Z', '2024-11-21T13:30:26.837Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5278,
+      content: "Oh, that's unfortunate",
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195820,
+      updated_at: '2024-11-21T13:30:38.070Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: "Oh, that's unfortunate",
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195820,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5279,
+      content:
+        'I plan to upgrade to 4 agents for now, but will grow to 6 in the next three months. ',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195820,
+      updated_at: '2024-11-21T13:31:05.284Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'I plan to upgrade to 4 agents for now, but will grow to 6 in the next three months. ',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195885,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+
+    {
+      id: 5280,
+      content: 'Is it possible to get a discount?',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195886,
+      updated_at: '2024-11-21T13:31:12.545Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Is it possible to get a discount?',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195872,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        '[@Bruce](mention://user/30/Bruce) should we offer them a discount',
+      id: 5281,
+      content:
+        '[@Bruce](mention://user/30/Bruce) should we offer them a discount',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195887,
+      updated_at: '2024-11-21T13:32:59.863Z',
+      private: true,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195972,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:31:27.914Z', '2024-11-21T13:32:59.863Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Sure, you can use the discount code KQS3242A at the checkout to get 30% off on your yearly subscription. This coupon only applies for a year, I hope this helps',
+      id: 5282,
+      content:
+        'Sure, you can use the discount code KQS3242A at the checkout to get 30% off on your yearly subscription. This coupon only applies for a year, I hope this helps',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195972,
+      updated_at: '2024-11-21T13:32:59.902Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195972,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:32:52.722Z', '2024-11-21T13:32:59.902Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5283,
+      content: 'Great, thanks',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195982,
+      updated_at: '2024-11-21T13:33:02.142Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Great, thanks',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195982,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+
+    {
+      id: 5284,
+      content: 'Really appreciate it',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195984,
+      updated_at: '2024-11-21T13:33:04.856Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Really appreciate it',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195984,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'progress',
+      content_type: 'text',
+      processed_message_content: ' Happy to help :)',
+      id: 5285,
+      content: ' Happy to help :)',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195991,
+      updated_at: '2024-11-21T13:33:12.229Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195991,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:33:11.667Z', '2024-11-21T13:33:12.229Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'failed',
+      content_type: 'text',
+      processed_message_content:
+        "Let us know if you have any questions, I'll close this conversation for now",
+      id: 5286,
+      content:
+        "Let us know if you have any questions, I'll close this conversation for now",
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732196013,
+      updated_at: '2024-11-21T13:33:33.879Z',
+      private: false,
+      source_id: null,
+      content_attributes: {
+        external_error:
+          'Business account is restricted from messaging users in this country.',
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196013,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:33:33.511Z', '2024-11-21T13:33:33.879Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5287,
+      content: 'John set the priority to urgent',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 2,
+      created_at: 1732196017,
+      updated_at: '2024-11-21T13:33:37.569Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'John set the priority to urgent',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196017,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+    {
+      id: 5288,
+      content: 'John added billing',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 2,
+      created_at: 1732196020,
+      updated_at: '2024-11-21T13:33:40.207Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'John added billing',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196020,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+    {
+      id: 5289,
+      content: 'John added delivery',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 2,
+      created_at: 1732196020,
+      updated_at: '2024-11-21T13:33:40.822Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'John added delivery',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196020,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+    {
+      id: 5290,
+      content: 'Conversation was marked resolved by John',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 2,
+      created_at: 1732196029,
+      updated_at: '2024-11-21T13:33:49.059Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Conversation was marked resolved by John',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196029,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js b/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
new file mode 100644
index 000000000..05e5faf5b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
@@ -0,0 +1,1526 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 5296,
+      content: 'Hey, I want to get my Macbook repaird',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      created_at: 1732710571,
+      private: false,
+      source_id: null,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5296,
+      content: '',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      created_at: 1732710571,
+      private: false,
+      source_id: null,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 378,
+          message_id: 5314,
+          file_type: 'location',
+          account_id: 2,
+          coordinates_lat: 37.7937545,
+          coordinates_long: -122.3997472,
+          fallback_title: 'Chatwoot Inc',
+          extension: null,
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 5296,
+      content: 'Shivam Mishra',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      created_at: 1732710571,
+      private: false,
+      source_id: null,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 378,
+          message_id: 5314,
+          file_type: 'contact',
+          account_id: 2,
+          coordinates_lat: 37.7937545,
+          coordinates_long: -122.3997472,
+          fallback_title: '+919999999999',
+          extension: null,
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 5297,
+      content: 'Give the team a way to reach you.',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 3,
+      content_type: 'text',
+      status: 'read',
+      content_attributes: {},
+      created_at: 1732710572,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 5298,
+      content: 'Get notified by email',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 3,
+      content_type: 'input_email',
+      status: 'read',
+      content_attributes: {
+        submitted_email: 'anthony@example.com',
+      },
+      created_at: 1732710572,
+      private: false,
+      source_id: null,
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'Conversation was reopened by John',
+      id: 5299,
+      content: 'Conversation was reopened by John',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 2,
+      created_at: 1732710724,
+      updated_at: '2024-11-27T12:32:43.389Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710762,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:32:04.150Z', '2024-11-27T12:32:43.389Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'John self-assigned this conversation',
+      id: 5300,
+      content: 'John self-assigned this conversation',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 2,
+      created_at: 1732710731,
+      updated_at: '2024-11-27T12:32:43.419Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710762,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:32:11.416Z', '2024-11-27T12:32:43.419Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for? I see you own a Macbook Pro 2022 Model. Is that correct?",
+      id: 5301,
+      content:
+        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for? I see you own a Macbook Pro 2022 Model. Is that correct?",
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732710762,
+      updated_at: '2024-11-27T12:32:43.458Z',
+      private: false,
+      source_id: null,
+      content_attributes: {
+        in_reply_to: 5296,
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710762,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:32:42.481Z', '2024-11-27T12:32:43.458Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5302,
+      content:
+        'I dropped my laptop and the screen is not cracked, can you fix it?',
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710776,
+      updated_at: '2024-11-27T12:32:56.684Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: 5301,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'I dropped my laptop and the screen is not cracked, can you fix it?',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710776,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'John added repair',
+      id: 5303,
+      content: 'John added repair',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 2,
+      created_at: 1732710805,
+      updated_at: '2024-11-27T12:33:30.138Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710809,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:33:25.620Z', '2024-11-27T12:33:30.138Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Sure, will it be possible to share an image of the same?',
+      id: 5304,
+      content: 'Sure, will it be possible to share an image of the same?',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732710809,
+      updated_at: '2024-11-27T12:33:30.167Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710809,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:33:29.116Z', '2024-11-27T12:33:30.167Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5305,
+      content: null,
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710822,
+      updated_at: '2024-11-27T12:33:42.634Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: null,
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710822,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 17,
+          message_id: 5305,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 983912,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5306,
+      content: 'There you go',
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710827,
+      updated_at: '2024-11-27T12:33:47.262Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'There you go',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710827,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5307,
+      content: null,
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710841,
+      updated_at: '2024-11-27T12:34:01.991Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: null,
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710841,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 18,
+          message_id: 5307,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/registrations.xls',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/all-files.zip',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5308,
+      content: "Here's the invoice too",
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710847,
+      updated_at: '2024-11-27T12:34:07.380Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: "Here's the invoice too",
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710847,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        '[@Bruce](mention://user/30/Bruce) do you think this is covered? Seems like they are out of damage insurance by a week',
+      id: 5309,
+      content:
+        '[@Bruce](mention://user/30/Bruce) do you think this is covered? Seems like they are out of damage insurance by a week',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732710890,
+      updated_at: '2024-11-27T12:36:46.586Z',
+      private: true,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711005,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:34:50.013Z', '2024-11-27T12:36:46.586Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        '[@John](mention://user/1/John) They have been a customer for a while, we can offer a 30% discount on the repair',
+      id: 5310,
+      content:
+        '[@John](mention://user/1/John) They have been a customer for a while, we can offer a 30% discount on the repair',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732710942,
+      updated_at: '2024-11-27T12:36:46.631Z',
+      private: true,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 30,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711005,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 30,
+        name: 'Bruce',
+        available_name: 'Bruce',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc3dKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--76f2acbf7e24fe4c4aa7b053051df9c74ea9d8aa/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/67.jpg',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc3dKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--76f2acbf7e24fe4c4aa7b053051df9c74ea9d8aa/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/67.jpg',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:35:42.614Z', '2024-11-27T12:36:46.631Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        "This document suggests you are out of the damage coverage period. But we can repair this for sure, and since you've been a customer for a while and the coverage is off just by a week, we can offer a 30% discount on the repair. Does that work?",
+      id: 5311,
+      content:
+        "This document suggests you are out of the damage coverage period. But we can repair this for sure, and since you've been a customer for a while and the coverage is off just by a week, we can offer a 30% discount on the repair. Does that work?",
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732711005,
+      updated_at: '2024-11-27T12:36:46.715Z',
+      private: false,
+      source_id: null,
+      content_attributes: {
+        in_reply_to: 5307,
+        in_reply_to_external_id: null,
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711005,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:36:45.557Z', '2024-11-27T12:36:46.715Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'John set the priority to medium',
+      id: 5312,
+      content: 'John set the priority to medium',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 2,
+      created_at: 1732711008,
+      updated_at: '2024-11-27T12:37:05.985Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711025,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:36:48.047Z', '2024-11-27T12:37:05.985Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5313,
+      content: 'This is perfect, thanks a lot. Let me know the next steps',
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732711025,
+      updated_at: '2024-11-27T12:37:05.439Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'This is perfect, thanks a lot. Let me know the next steps',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732711025,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        "Sure, you can fill this form and mail the item to us. And we will replace the screen within 5 business days and dispatch it for you. I've also attached and estimate for the repair and the shipping charges",
+      id: 5314,
+      content:
+        "Sure, you can fill this form and mail the item to us. And we will replace the screen within 5 business days and dispatch it for you. I've also attached and estimate for the repair and the shipping charges",
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732711103,
+      updated_at: '2024-11-27T12:38:24.668Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711103,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 19,
+          message_id: 5314,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+        {
+          id: 25,
+          message_id: 5314,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+        {
+          id: 26,
+          message_id: 5314,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+        {
+          id: 20,
+          message_id: 5314,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/agreement.doc',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+        {
+          id: 20,
+          message_id: 5314,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/all-files.zip',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+        {
+          id: 20,
+          message_id: 5314,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/business-card.pdf',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+        {
+          id: 22,
+          message_id: 5314,
+          file_type: 'video',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4',
+          thumb_url:
+            'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4',
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:38:23.382Z', '2024-11-27T12:38:24.668Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'This is a video demo of how to safely pack your device for mail',
+      id: 5318,
+      content:
+        'This is a video demo of how to safely pack your device for mail',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732788718,
+      updated_at: '2024-11-28T10:11:59.587Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732788718,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 21,
+          message_id: 5318,
+          file_type: 'video',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaVVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2b713098fcdb9fde921f7575ac7d7539d0ffd5df/CleanShot%202024-11-26%20at%2018.07.56.mp4',
+          thumb_url: '',
+          file_size: 1176246,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-28T10:11:58.967Z', '2024-11-28T10:11:59.587Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: null,
+      id: 5319,
+      content: "Here's a recording of the call",
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732788745,
+      updated_at: '2024-11-28T10:12:25.906Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732788745,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 22,
+          message_id: 5319,
+          file_type: 'audio',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3',
+          thumb_url: '',
+          file_size: 345644,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-28T10:12:25.364Z', '2024-11-28T10:12:25.906Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: null,
+      id: 5319,
+      content: null,
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732788745,
+      updated_at: '2024-11-28T10:12:25.906Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732788745,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 22,
+          message_id: 5319,
+          file_type: 'audio',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3',
+          thumb_url: '',
+          file_size: 345644,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-28T10:12:25.364Z', '2024-11-28T10:12:25.906Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Hope this helps\n\n--\n\n~ John Acme  \n![](http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHNGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--49eeccbbf9eea2ce5c72c6ed6a7eb0cf0be024b1/picologo.png?cw_image_height=24px)Picoletter',
+      id: 5320,
+      content:
+        'Hope this helps\n\n--\n\n~ John Acme  \n![](http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHNGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--49eeccbbf9eea2ce5c72c6ed6a7eb0cf0be024b1/picologo.png?cw_image_height=24px)Picoletter',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732788759,
+      updated_at: '2024-11-28T10:12:40.464Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732788759,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-28T10:12:39.665Z', '2024-11-28T10:12:40.464Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5315,
+      content: "Great. I'll send it across. Thanks",
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732711121,
+      updated_at: '2024-11-27T12:38:41.127Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: "Great. I'll send it across. Thanks",
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732711121,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Glad I could help. Let me know if you need some other help',
+      id: 5316,
+      content: 'Glad I could help. Let me know if you need some other help',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732711141,
+      updated_at: '2024-11-27T12:39:02.247Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711141,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: 'busy',
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:39:01.126Z', '2024-11-27T12:39:02.247Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5317,
+      content: 'Conversation was marked resolved by John',
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 2,
+      created_at: 1732711142,
+      updated_at: '2024-11-27T12:39:02.911Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Conversation was marked resolved by John',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711142,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+    },
+    {
+      id: 5323,
+      content: 'These are all the files you requested',
+      inbox_id: 486,
+      echo_id: '9f7432284767',
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1732795624,
+      private: false,
+      source_id: null,
+      sender_type: 'Contact',
+      sender_id: 599,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 27,
+          message_id: 5323,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 26126,
+          width: null,
+          height: null,
+        },
+        {
+          id: 28,
+          message_id: 5323,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 58696,
+          width: null,
+          height: null,
+        },
+        {
+          id: 28,
+          message_id: 5323,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3aa5f4c3a2a034b6e68800d4787d369254ab1eb4/multi.zip',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3aa5f4c3a2a034b6e68800d4787d369254ab1eb4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkUzSmxjMmw2WlY5MGIxOW1hV3hzV3dkcEFmb3ciLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--328463286cffa0d7d9a36a3a30bfa1daed3a5ee6/multi.webp',
+          file_size: 58696,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 5323,
+      content: null,
+      inbox_id: 486,
+      echo_id: '9f7432284767',
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1732795624,
+      private: false,
+      source_id: null,
+      sender_type: 'Contact',
+      sender_id: 599,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 27,
+          message_id: 5323,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 26126,
+          width: null,
+          height: null,
+        },
+        {
+          id: 28,
+          message_id: 5323,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 58696,
+          width: null,
+          height: null,
+        },
+        {
+          id: 28,
+          message_id: 5323,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3aa5f4c3a2a034b6e68800d4787d369254ab1eb4/list-with-all-data.csv',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3aa5f4c3a2a034b6e68800d4787d369254ab1eb4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkUzSmxjMmw2WlY5MGIxOW1hV3hzV3dkcEFmb3ciLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--328463286cffa0d7d9a36a3a30bfa1daed3a5ee6/multi.webp',
+          file_size: 58696,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      conversation_id: 43,
+      status: 'progress',
+      content_type: 'text',
+      processed_message_content: ' Happy to help :)',
+      id: 5285,
+      content: ' Happy to help :)',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195991,
+      updated_at: '2024-11-21T13:33:12.229Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195991,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:33:11.667Z', '2024-11-21T13:33:12.229Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'failed',
+      content_type: 'text',
+      processed_message_content:
+        "Let us know if you have any questions, I'll close this conversation for now",
+      id: 5286,
+      content:
+        "Let us know if you have any questions, I'll close this conversation for now",
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732196013,
+      updated_at: '2024-11-21T13:33:33.879Z',
+      private: false,
+      source_id: null,
+      content_attributes: {
+        external_error:
+          'Business account is restricted from messaging users in this country.',
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196013,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:33:33.511Z', '2024-11-21T13:33:33.879Z'],
+        status: ['sent', 'read'],
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/provider.js b/app/javascript/dashboard/components-next/message/provider.js
new file mode 100644
index 000000000..cf35c6c40
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/provider.js
@@ -0,0 +1,33 @@
+import { inject, provide, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { ATTACHMENT_TYPES } from './constants';
+
+const MessageControl = Symbol('MessageControl');
+
+export function useMessageContext() {
+  const context = inject(MessageControl, null);
+  if (context === null) {
+    throw new Error(`Component is missing a parent <Message /> component.`);
+  }
+
+  const currentChatAttachments = useMapGetter('getSelectedChatAttachments');
+  const filteredCurrentChatAttachments = computed(() => {
+    const attachments = currentChatAttachments.value.filter(attachment =>
+      [
+        ATTACHMENT_TYPES.IMAGE,
+        ATTACHMENT_TYPES.VIDEO,
+        ATTACHMENT_TYPES.IG_REEL,
+        ATTACHMENT_TYPES.AUDIO,
+      ].includes(attachment.file_type)
+    );
+
+    return useSnakeCase(attachments);
+  });
+
+  return { ...context, filteredCurrentChatAttachments };
+}
+
+export function provideMessageContext(context) {
+  provide(MessageControl, context);
+}
diff --git a/app/javascript/dashboard/components-next/message/stories/EmailMessages.story.vue b/app/javascript/dashboard/components-next/message/stories/EmailMessages.story.vue
new file mode 100644
index 000000000..7988e2745
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/EmailMessages.story.vue
@@ -0,0 +1,45 @@
+<script setup>
+import Message from '../Message.vue';
+
+import simpleEmail from '../fixtures/simpleEmail.js';
+import fullConversation from '../fixtures/emailConversation.js';
+import newsletterEmail from '../fixtures/newsletterEmail.js';
+
+const failedEmail = {
+  ...simpleEmail[0],
+  status: 'failed',
+  senderId: 1,
+  senderType: 'User',
+  contentAttributes: {
+    ...simpleEmail[0].contentAttributes,
+    externalError: 'Failed to send email',
+  },
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Messages/Email"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Simple Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <template v-for="message in fullConversation" :key="message.id">
+          <Message :current-user-id="1" is-email-inbox v-bind="message" />
+        </template>
+      </div>
+    </Variant>
+    <Variant title="Newsletter">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <template v-for="message in newsletterEmail" :key="message.id">
+          <Message :current-user-id="1" is-email-inbox v-bind="message" />
+        </template>
+      </div>
+    </Variant>
+    <Variant title="Failed Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" is-email-inbox v-bind="failedEmail" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/InstagramBubbles.story.vue b/app/javascript/dashboard/components-next/message/stories/InstagramBubbles.story.vue
new file mode 100644
index 000000000..7d58d8eaf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/InstagramBubbles.story.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import Message from '../Message.vue';
+
+const currentUserId = ref(1);
+
+const state = reactive({
+  useCurrentUserId: false,
+});
+
+const getMessage = overrides => {
+  const contentAttributes = {
+    inReplyTo: null,
+    ...(overrides.contentAttributes ?? {}),
+  };
+
+  const sender = {
+    additionalAttributes: {},
+    customAttributes: {},
+    email: 'hey@example.com',
+    id: 597,
+    identifier: null,
+    name: 'John Doe',
+    phoneNumber: null,
+    thumbnail: '',
+    type: 'contact',
+    ...(overrides.sender ?? {}),
+  };
+
+  return {
+    id: 5272,
+    content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+    inboxId: 475,
+    conversationId: 43,
+    messageType: 0,
+    contentType: 'text',
+    status: 'sent',
+    createdAt: 1732195656,
+    private: false,
+    sourceId: null,
+    ...overrides,
+    sender,
+    contentAttributes,
+  };
+};
+
+const getAttachment = (type, url, overrides) => {
+  return {
+    id: 22,
+    messageId: 5319,
+    fileType: type,
+    accountId: 2,
+    extension: null,
+    dataUrl: url,
+    thumbUrl: '',
+    fileSize: 345644,
+    width: null,
+    height: null,
+    ...overrides,
+  };
+};
+
+const baseSenderData = computed(() => {
+  return {
+    messageType: state.useCurrentUserId ? 1 : 0,
+    senderId: state.useCurrentUserId ? currentUserId.value : 597,
+    sender: {
+      id: state.useCurrentUserId ? currentUserId.value : 597,
+      type: state.useCurrentUserId ? 'User' : 'Contact',
+    },
+  };
+});
+
+const instagramStory = computed(() =>
+  getMessage({
+    content: 'cwtestinglocal mentioned you in the story: ',
+    contentAttributes: {
+      imageType: 'story_mention',
+    },
+    attachments: [
+      getAttachment(
+        'image',
+        'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const unsupported = computed(() =>
+  getMessage({
+    content: null,
+    contentAttributes: {
+      isUnsupported: true,
+    },
+    ...baseSenderData.value,
+  })
+);
+
+const igReel = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment(
+        'ig_reel',
+        'https://videos.pexels.com/video-files/2023708/2023708-hd_720_1280_30fps.mp4'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Instagram"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Instagram Reel">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="igReel" />
+      </div>
+    </Variant>
+
+    <Variant title="Instagram Story">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="instagramStory" />
+      </div>
+    </Variant>
+
+    <Variant title="Unsupported">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="unsupported" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/InstagramMessages.story.vue b/app/javascript/dashboard/components-next/message/stories/InstagramMessages.story.vue
new file mode 100644
index 000000000..6bc97c981
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/InstagramMessages.story.vue
@@ -0,0 +1,44 @@
+<script setup>
+import Message from '../Message.vue';
+import instagramConversation from '../fixtures/instagramConversation.js';
+
+const messages = instagramConversation;
+
+const shouldGroupWithNext = index => {
+  if (index === messages.length - 1) return false;
+
+  const current = messages[index];
+  const next = messages[index + 1];
+
+  if (next.status === 'failed') return false;
+
+  const nextSenderId = next.senderId ?? next.sender?.id;
+  const currentSenderId = current.senderId ?? current.sender?.id;
+  if (currentSenderId !== nextSenderId) return false;
+
+  // Check if messages are in the same minute by rounding down to nearest minute
+  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
+};
+
+const getReplyToMessage = message => {
+  const idToCheck = message.contentAttributes.inReplyTo;
+  if (!idToCheck) return null;
+
+  return messages.find(candidate => idToCheck === candidate.id);
+};
+</script>
+
+<template>
+  <Story title="Components/Messages/Instagram" :layout="{ type: 'single' }">
+    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+      <template v-for="(message, index) in messages" :key="message.id">
+        <Message
+          :current-user-id="1"
+          :group-with-next="shouldGroupWithNext(index)"
+          :in-reply-to="getReplyToMessage(message)"
+          v-bind="message"
+        />
+      </template>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/MediaBubbles.story.vue b/app/javascript/dashboard/components-next/message/stories/MediaBubbles.story.vue
new file mode 100644
index 000000000..2b4152f47
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/MediaBubbles.story.vue
@@ -0,0 +1,260 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import Message from '../Message.vue';
+
+const currentUserId = ref(1);
+
+const state = reactive({
+  useCurrentUserId: false,
+});
+
+const getMessage = overrides => {
+  const contentAttributes = {
+    inReplyTo: null,
+    ...(overrides.contentAttributes ?? {}),
+  };
+
+  const sender = {
+    additionalAttributes: {},
+    customAttributes: {},
+    email: 'hey@example.com',
+    id: 597,
+    identifier: null,
+    name: 'John Doe',
+    phoneNumber: null,
+    thumbnail: '',
+    type: 'contact',
+    ...(overrides.sender ?? {}),
+  };
+
+  return {
+    id: 5272,
+    content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+    inboxId: 475,
+    conversationId: 43,
+    messageType: 0,
+    contentType: 'text',
+    status: 'sent',
+    createdAt: 1732195656,
+    private: false,
+    sourceId: null,
+    ...overrides,
+    sender,
+    contentAttributes,
+  };
+};
+
+const getAttachment = (type, url, overrides) => {
+  return {
+    id: 22,
+    messageId: 5319,
+    fileType: type,
+    accountId: 2,
+    extension: null,
+    dataUrl: url,
+    thumbUrl: '',
+    fileSize: 345644,
+    width: null,
+    height: null,
+    ...overrides,
+  };
+};
+
+const baseSenderData = computed(() => {
+  return {
+    messageType: state.useCurrentUserId ? 1 : 0,
+    senderId: state.useCurrentUserId ? currentUserId.value : 597,
+    sender: {
+      id: state.useCurrentUserId ? currentUserId.value : 597,
+      type: state.useCurrentUserId ? 'User' : 'Contact',
+    },
+  };
+});
+
+const audioMessage = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment(
+        'audio',
+        'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const brokenImageMessage = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [getAttachment('image', 'https://chatwoot.dev/broken.png')],
+    ...baseSenderData.value,
+  })
+);
+
+const imageMessage = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment(
+        'image',
+        'https://images.pexels.com/photos/28506417/pexels-photo-28506417/free-photo-of-motorbike-on-scenic-road-in-surat-thani-thailand.jpeg'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const videoMessage = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment(
+        'video',
+        'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const attachmentsOnly = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment('image', 'https://chatwoot.dev/broken.png'),
+      getAttachment(
+        'video',
+        'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4'
+      ),
+      getAttachment(
+        'image',
+        'https://images.pexels.com/photos/28506417/pexels-photo-28506417/free-photo-of-motorbike-on-scenic-road-in-surat-thani-thailand.jpeg'
+      ),
+      getAttachment('file', 'https://chatwoot.dev/invoice.pdf'),
+      getAttachment('file', 'https://chatwoot.dev/logs.txt'),
+      getAttachment('file', 'https://chatwoot.dev/contacts.xls'),
+      getAttachment('file', 'https://chatwoot.dev/customers.csv'),
+      getAttachment('file', 'https://chatwoot.dev/warehousing-policy.docx'),
+      getAttachment('file', 'https://chatwoot.dev/pitch-deck.ppt'),
+      getAttachment('file', 'https://chatwoot.dev/all-files.tar'),
+      getAttachment(
+        'audio',
+        'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const singleFile = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [getAttachment('file', 'https://chatwoot.dev/all-files.tar')],
+    ...baseSenderData.value,
+  })
+);
+
+const contact = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment('contact', null, {
+        fallbackTitle: '+919999999999',
+      }),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const location = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment('location', null, {
+        coordinatesLat: 37.7937545,
+        coordinatesLong: -122.3997472,
+        fallbackTitle: 'Chatwoot Inc',
+      }),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const dyte = computed(() => {
+  return getMessage({
+    messageType: 1,
+    contentType: 'integrations',
+    contentAttributes: {
+      type: 'dyte',
+      data: {
+        meetingId: 'f16bebe6-08b9-4593-899a-849f59c47397',
+        roomName: 'zcufnc-adbjcg',
+      },
+    },
+    senderId: 1,
+    sender: {
+      id: 1,
+      name: 'Shivam Mishra',
+      availableName: 'Shivam Mishra',
+      type: 'user',
+    },
+  });
+});
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Media"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <!-- Media Types -->
+    <Variant title="Audio">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="audioMessage" />
+      </div>
+    </Variant>
+    <Variant title="Image">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="imageMessage" />
+      </div>
+    </Variant>
+    <Variant title="Broken Image">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="brokenImageMessage" />
+      </div>
+    </Variant>
+    <Variant title="Video">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="videoMessage" />
+      </div>
+    </Variant>
+
+    <!-- Files and Attachments -->
+    <Variant title="Multiple Attachments">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="attachmentsOnly" />
+      </div>
+    </Variant>
+    <Variant title="File">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="singleFile" />
+      </div>
+    </Variant>
+    <Variant title="Contact">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="contact" />
+      </div>
+    </Variant>
+    <Variant title="Location">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="location" />
+      </div>
+    </Variant>
+    <Variant title="Dyte Video">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="dyte" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/MessageBubbles.story.vue b/app/javascript/dashboard/components-next/message/stories/MessageBubbles.story.vue
new file mode 100644
index 000000000..1fd027d25
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/MessageBubbles.story.vue
@@ -0,0 +1,181 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import Message from '../Message.vue';
+
+const currentUserId = ref(1);
+
+const state = reactive({
+  useCurrentUserId: false,
+});
+
+const getMessage = overrides => {
+  const contentAttributes = {
+    inReplyTo: null,
+    ...(overrides.contentAttributes ?? {}),
+  };
+
+  const sender = {
+    additionalAttributes: {},
+    customAttributes: {},
+    email: 'hey@example.com',
+    id: 597,
+    identifier: null,
+    name: 'John Doe',
+    phoneNumber: null,
+    thumbnail: '',
+    type: 'contact',
+    ...(overrides.sender ?? {}),
+  };
+
+  return {
+    id: 5272,
+    content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+    inboxId: 475,
+    conversationId: 43,
+    messageType: 0,
+    contentType: 'text',
+    status: 'sent',
+    createdAt: 1732195656,
+    private: false,
+    sourceId: null,
+    ...overrides,
+    sender,
+    contentAttributes,
+  };
+};
+
+const getAttachment = (type, url, overrides) => {
+  return {
+    id: 22,
+    messageId: 5319,
+    fileType: type,
+    accountId: 2,
+    extension: null,
+    dataUrl: url,
+    thumbUrl: '',
+    fileSize: 345644,
+    width: null,
+    height: null,
+    ...overrides,
+  };
+};
+
+const baseSenderData = computed(() => {
+  return {
+    messageType: state.useCurrentUserId ? 1 : 0,
+    senderId: state.useCurrentUserId ? currentUserId.value : 597,
+    sender: {
+      id: state.useCurrentUserId ? currentUserId.value : 597,
+      type: state.useCurrentUserId ? 'User' : 'Contact',
+    },
+  };
+});
+
+const simpleText = computed(() =>
+  getMessage({
+    ...baseSenderData.value,
+  })
+);
+const privateText = computed(() =>
+  getMessage({ private: true, ...baseSenderData.value })
+);
+
+const activityMessage = computed(() =>
+  getMessage({
+    content: 'John self-assigned this conversation',
+    messageType: 2,
+  })
+);
+
+const email = computed(() =>
+  getMessage({
+    content: null,
+    contentType: 'incoming_email',
+    contentAttributes: {
+      email: {
+        bcc: null,
+        cc: null,
+        contentType:
+          'multipart/alternative; boundary=0000000000009d889e0628477235',
+        date: '2024-12-02T16:29:39+05:30',
+        from: ['hey@shivam.dev'],
+        htmlContent: {
+          full: '<div dir="ltr"><h3><span style="font-size:small;font-weight:normal">Hi Team,</span></h3>\r\n<p>I hope this email finds you well! I wanted to share some updates regarding our integration with <strong>Chatwoot</strong> and outline some key features we’ve explored.</p>\r\n<hr>\r\n<h3>Key Updates</h3>\r\n<ol>\r\n<li>\r\n<p><strong>Integration Status</strong>:<br>\r\nThe initial integration with Chatwoot has been successful. We&#39;ve tested:</p>\r\n<ul>\r\n<li>API connectivity</li>\r\n<li>Multi-channel messaging</li>\r\n<li>Real-time chat updates</li>\r\n</ul>\r\n</li>\r\n<li>\r\n<p><strong>Upcoming Tasks</strong>:</p>\r\n<ul>\r\n<li>Streamlining notification workflows</li>\r\n<li>Enhancing webhook reliability</li>\r\n<li>Testing team collaboration features</li>\r\n</ul>\r\n</li>\r\n</ol>\r\n<blockquote>\r\n<p><strong>Note:</strong><br>\r\nDon’t forget to check out the automation capabilities in Chatwoot for handling repetitive queries. It can save a ton of time!</p>\r\n</blockquote>\r\n<hr>\r\n<h3>Features We Love</h3>\r\n<p>Here’s what stood out so far:</p>\r\n<ul>\r\n<li><strong>Unified Inbox</strong>: All customer conversations in one place.</li>\r\n<li><strong>Customizable Workflows</strong>: Tailored to our team’s unique needs.</li>\r\n<li><strong>Integrations</strong>: Works seamlessly with CRM and Slack.</li>\r\n</ul>\r\n<hr>\r\n<h3>Action Items</h3>\r\n<h4>For Next Week:</h4>\r\n<ol>\r\n<li>Implement the webhook for <strong>ticket prioritization</strong>.</li>\r\n<li>Test <strong>CSAT surveys</strong> post-chat sessions.</li>\r\n<li>Review <strong>analytics dashboard</strong> insights.</li>\r\n</ol>\r\n<hr>\r\n<h3>Data Snapshot</h3>\r\n<p>Here’s a quick overview of our conversation stats this week:</p>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th>Metric</th>\r\n<th>Value</th>\r\n<th>Change (%)</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td>Total Conversations</td>\r\n<td>350</td>\r\n<td>+25%</td>\r\n</tr>\r\n<tr>\r\n<td>Average Response Time</td>\r\n<td>3 minutes</td>\r\n<td>-15%</td>\r\n</tr>\r\n<tr>\r\n<td>CSAT Score</td>\r\n<td>92%</td>\r\n<td>+10%</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n<hr>\r\n<h3>Feedback</h3>\r\n<p><i>Do let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:</i></p>\r\n<p><img src="https://via.placeholder.com/600x300" alt="Chatwoot Dashboard Screenshot" title="Chatwoot Dashboard"></p>\r\n<hr>\r\n<p>Looking forward to hearing your thoughts!</p>\r\n<p>Best regards,<br>~ Shivam Mishra<br></p></div>\r\n',
+          reply:
+            "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.\n\n---------------------------------------------------------------\n\nKey Updates\n\n-\n\nIntegration Status:\nThe initial integration with Chatwoot has been successful. We've tested:\n\n- API connectivity\n- Multi-channel messaging\n- Real-time chat updates\n\n-\n\nUpcoming Tasks:\n\n- Streamlining notification workflows\n- Enhancing webhook reliability\n- Testing team collaboration features\n\n>\n---------------------------------------------------------------\n\nFeatures We Love\n\nHere’s what stood out so far:\n\n-  Unified Inbox: All customer conversations in one place.\n-  Customizable Workflows: Tailored to our team’s unique needs.\n-  Integrations: Works seamlessly with CRM and Slack.\n\n---------------------------------------------------------------\n\nAction Items\n\nFor Next Week:\n\n- Implement the webhook for ticket prioritization.\n- Test CSAT surveys post-chat sessions.\n- Review analytics dashboard insights.\n\n---------------------------------------------------------------\n\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\n\nMetric\tValue\tChange (%)\nTotal Conversations\t350\t+25%\nAverage Response Time\t3 minutes\t-15%\nCSAT Score\t92%\t+10%\n---------------------------------------------------------------\n\nFeedback\n\nDo let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:\n\n[Chatwoot Dashboard]\n\n---------------------------------------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+          quoted:
+            'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.',
+        },
+        inReplyTo: null,
+        messageId:
+          'CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+        multipart: true,
+        numberOfAttachments: 0,
+        subject: 'Update on Chatwoot Integration and Features',
+        textContent: {
+          full: "Hi Team,\r\n\r\nI hope this email finds you well! I wanted to share some updates regarding\r\nour integration with *Chatwoot* and outline some key features we’ve\r\nexplored.\r\n------------------------------\r\nKey Updates\r\n\r\n   1.\r\n\r\n   *Integration Status*:\r\n   The initial integration with Chatwoot has been successful. We've tested:\r\n   - API connectivity\r\n      - Multi-channel messaging\r\n      - Real-time chat updates\r\n   2.\r\n\r\n   *Upcoming Tasks*:\r\n   - Streamlining notification workflows\r\n      - Enhancing webhook reliability\r\n      - Testing team collaboration features\r\n\r\n*Note:*\r\nDon’t forget to check out the automation capabilities in Chatwoot for\r\nhandling repetitive queries. It can save a ton of time!\r\n\r\n------------------------------\r\nFeatures We Love\r\n\r\nHere’s what stood out so far:\r\n\r\n   - *Unified Inbox*: All customer conversations in one place.\r\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\r\n   - *Integrations*: Works seamlessly with CRM and Slack.\r\n\r\n------------------------------\r\nAction Items For Next Week:\r\n\r\n   1. Implement the webhook for *ticket prioritization*.\r\n   2. Test *CSAT surveys* post-chat sessions.\r\n   3. Review *analytics dashboard* insights.\r\n\r\n------------------------------\r\nData Snapshot\r\n\r\nHere’s a quick overview of our conversation stats this week:\r\nMetric Value Change (%)\r\nTotal Conversations 350 +25%\r\nAverage Response Time 3 minutes -15%\r\nCSAT Score 92% +10%\r\n------------------------------\r\nFeedback\r\n\r\n*Do let me know if you have additional feedback or ideas to improve our\r\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\r\nchanges:*\r\n\r\n[image: Chatwoot Dashboard Screenshot]\r\n------------------------------\r\n\r\nLooking forward to hearing your thoughts!\r\n\r\nBest regards,\r\n~ Shivam Mishra\r\n",
+          reply:
+            "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.\n------------------------------\nKey Updates\n\n   1.\n\n   *Integration Status*:\n   The initial integration with Chatwoot has been successful. We've tested:\n   - API connectivity\n      - Multi-channel messaging\n      - Real-time chat updates\n   2.\n\n   *Upcoming Tasks*:\n   - Streamlining notification workflows\n      - Enhancing webhook reliability\n      - Testing team collaboration features\n\n*Note:*\nDon’t forget to check out the automation capabilities in Chatwoot for\nhandling repetitive queries. It can save a ton of time!\n\n------------------------------\nFeatures We Love\n\nHere’s what stood out so far:\n\n   - *Unified Inbox*: All customer conversations in one place.\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\n   - *Integrations*: Works seamlessly with CRM and Slack.\n\n------------------------------\nAction Items For Next Week:\n\n   1. Implement the webhook for *ticket prioritization*.\n   2. Test *CSAT surveys* post-chat sessions.\n   3. Review *analytics dashboard* insights.\n\n------------------------------\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\nMetric Value Change (%)\nTotal Conversations 350 +25%\nAverage Response Time 3 minutes -15%\nCSAT Score 92% +10%\n------------------------------\nFeedback\n\n*Do let me know if you have additional feedback or ideas to improve our\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\nchanges:*\n\n[image: Chatwoot Dashboard Screenshot]\n------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+          quoted:
+            'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.',
+        },
+        to: ['shivam@chatwoot.com'],
+      },
+      ccEmail: null,
+      bccEmail: null,
+    },
+    attachments: [
+      getAttachment(
+        'video',
+        'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4'
+      ),
+      getAttachment(
+        'image',
+        'https://images.pexels.com/photos/28506417/pexels-photo-28506417/free-photo-of-motorbike-on-scenic-road-in-surat-thani-thailand.jpeg'
+      ),
+      getAttachment('file', 'https://chatwoot.dev/invoice.pdf'),
+      getAttachment('file', 'https://chatwoot.dev/logs.txt'),
+      getAttachment('file', 'https://chatwoot.dev/contacts.xls'),
+      getAttachment('file', 'https://chatwoot.dev/customers.csv'),
+      getAttachment('file', 'https://chatwoot.dev/warehousing-policy.docx'),
+      getAttachment('file', 'https://chatwoot.dev/pitch-deck.ppt'),
+      getAttachment('file', 'https://chatwoot.dev/all-files.tar'),
+      getAttachment(
+        'audio',
+        'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Bubbles"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Text">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="simpleText" />
+      </div>
+    </Variant>
+    <Variant title="Activity">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="activityMessage" />
+      </div>
+    </Variant>
+    <Variant title="Private Message">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="privateText" />
+      </div>
+    </Variant>
+
+    <!-- Platform Specific -->
+    <Variant title="Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" is-email-inbox v-bind="email" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/TextMessages.story.vue b/app/javascript/dashboard/components-next/message/stories/TextMessages.story.vue
new file mode 100644
index 000000000..b06b2195c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/TextMessages.story.vue
@@ -0,0 +1,45 @@
+<script setup>
+import Message from '../Message.vue';
+
+import textWithMedia from '../fixtures/textWithMedia.js';
+
+const messages = textWithMedia;
+
+const shouldGroupWithNext = index => {
+  if (index === messages.length - 1) return false;
+
+  const current = messages[index];
+  const next = messages[index + 1];
+
+  if (next.status === 'failed') return false;
+
+  const nextSenderId = next.senderId ?? next.sender?.id;
+  const currentSenderId = current.senderId ?? current.sender?.id;
+  if (currentSenderId !== nextSenderId) return false;
+
+  // Check if messages are in the same minute by rounding down to nearest minute
+  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
+};
+
+const getReplyToMessage = message => {
+  const idToCheck = message.contentAttributes.inReplyTo;
+  if (!idToCheck) return null;
+
+  return messages.find(candidate => idToCheck === candidate.id);
+};
+</script>
+
+<template>
+  <Story title="Components/Messages/Text" :layout="{ type: 'single' }">
+    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+      <template v-for="(message, index) in messages" :key="message.id">
+        <Message
+          :current-user-id="1"
+          :group-with-next="shouldGroupWithNext(index)"
+          :in-reply-to="getReplyToMessage(message)"
+          v-bind="message"
+        />
+      </template>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/composables/useTransformKeys.js b/app/javascript/dashboard/composables/useTransformKeys.js
index e1feaf1a7..4f4767a87 100644
--- a/app/javascript/dashboard/composables/useTransformKeys.js
+++ b/app/javascript/dashboard/composables/useTransformKeys.js
@@ -7,19 +7,23 @@ import snakecaseKeys from 'snakecase-keys';
 /**
  * Vue composable that converts object keys to camelCase
  * @param {Object|Array|import('vue').Ref<Object|Array>} payload - Object or array to convert
+ * @param {Object} [options] - Options object
+ * @param {boolean} [options.deep=false] - Should convert keys of nested objects
  * @returns {Object|Array} Converted payload with camelCase keys
  */
-export function useCamelCase(payload) {
+export function useCamelCase(payload, options) {
   const unrefPayload = unref(payload);
-  return camelcaseKeys(unrefPayload);
+  return camelcaseKeys(unrefPayload, options);
 }
 
 /**
  * Vue composable that converts object keys to snake_case
  * @param {Object|Array|import('vue').Ref<Object|Array>} payload - Object or array to convert
+ * @param {Object} [options] - Options object
+ * @param {boolean} [options.deep=false] - Should convert keys of nested objects
  * @returns {Object|Array} Converted payload with snake_case keys
  */
-export function useSnakeCase(payload) {
+export function useSnakeCase(payload, options) {
   const unrefPayload = unref(payload);
-  return snakecaseKeys(unrefPayload);
+  return snakecaseKeys(unrefPayload, options);
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json
index 1458bf58a..dd5e1416c 100644
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -6,6 +6,7 @@
     "LIST": {
       "404": "There are no active conversations in this group."
     },
+    "FAILED_TO_SEND": "Failed to send",
     "TAB_HEADING": "Conversations",
     "MENTION_HEADING": "Mentions",
     "UNATTENDED_HEADING": "Unattended",
@@ -93,6 +94,9 @@
       "location": {
         "CONTENT": "Location"
       },
+      "ig_reel": {
+        "CONTENT": "Instagram Reel"
+      },
       "fallback": {
         "CONTENT": "has shared a url"
       }
@@ -126,6 +130,7 @@
     "NO_CONTENT": "No content available",
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",
     "SHOW_QUOTED_TEXT": "Show Quoted Text",
-    "MESSAGE_READ": "Read"
+    "MESSAGE_READ": "Read",
+    "SENDING": "Sending"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index f9c3b784a..d6dc025e0 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -38,10 +38,16 @@
     "REMOVE_SELECTION": "Remove Selection",
     "DOWNLOAD": "Download",
     "UNKNOWN_FILE_TYPE": "Unknown File",
-    "SAVE_CONTACT": "Save",
+    "SAVE_CONTACT": "Save Contact",
+    "SHARED_ATTACHMENT": {
+      "CONTACT": "{sender} has shared a contact",
+      "LOCATION": "{sender} has shared a location",
+      "FILE": "{sender} has shared a file",
+      "MEETING": "{sender} has started a meeting"
+    },
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
     "REPLIED_TO_STORY": "Replied to your story",
-    "UNSUPPORTED_MESSAGE": "This message is unsupported.",
+    "UNSUPPORTED_MESSAGE": "This message is unsupported. You can view this message on the Facebook / Instagram app.",
     "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
     "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
@@ -314,7 +320,8 @@
     "TO": "To",
     "BCC": "Bcc",
     "CC": "Cc",
-    "SUBJECT": "Subject"
+    "SUBJECT": "Subject",
+    "EXPAND": "Expand email"
   },
   "CONVERSATION_PARTICIPANTS": {
     "SIDEBAR_MENU_TITLE": "Participating",
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 9b1ca70d2..5da12cec8 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -236,6 +236,10 @@
     },
     "FORM_BUBBLE": {
       "SUBMIT": "Submit"
+    },
+    "MEDIA": {
+      "IMAGE_UNAVAILABLE": "This image is no longer available.",
+      "LOADING_FAILED": "Loading failed"
     }
   },
   "CONFIRM_EMAIL": "Verifying...",
diff --git a/package.json b/package.json
index d4a8d2c94..ec06e9375 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "idb": "^8.0.0",
     "js-cookie": "^3.0.5",
     "libphonenumber-js": "^1.11.9",
+    "maplibre-gl": "^4.7.1",
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
     "md5": "^2.3.0",
@@ -109,6 +110,7 @@
     "@iconify-json/lucide": "^1.2.11",
     "@iconify-json/ph": "^1.2.1",
     "@iconify-json/ri": "^1.2.3",
+    "@iconify-json/teenyicons": "^1.2.1",
     "@size-limit/file": "^8.2.4",
     "@vitest/coverage-v8": "2.0.1",
     "@vue/test-utils": "^2.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ae1eb3d45..d1b4e58a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -139,6 +139,9 @@ importers:
       libphonenumber-js:
         specifier: ^1.11.9
         version: 1.11.9
+      maplibre-gl:
+        specifier: ^4.7.1
+        version: 4.7.1
       markdown-it:
         specifier: ^13.0.2
         version: 13.0.2
@@ -245,6 +248,9 @@ importers:
       '@iconify-json/ri':
         specifier: ^1.2.3
         version: 1.2.3
+      '@iconify-json/teenyicons':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@size-limit/file':
         specifier: ^8.2.4
         version: 8.2.6(size-limit@8.2.6)
@@ -893,6 +899,9 @@ packages:
   '@iconify-json/ri@1.2.3':
     resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==}
 
+  '@iconify-json/teenyicons@1.2.1':
+    resolution: {integrity: sha512-PaVv+zrQEO6I/9YfEwxkJfYSrCIWyOoSv/ZOVgETsr0MOqN9k7ecnHF/lPrgpyCLkwLzPX7MyFm3/gmziwjSiw==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -985,6 +994,34 @@ packages:
     resolution: {integrity: sha512-dUz8OmYvlY5A9wXaroHIMSPASpSYRLCqbPvxGSyHguhtTQIy24lC+EGxQlwv71AhRCO55WOtgwhzQLpw27JaJQ==}
     engines: {node: '>=8'}
 
+  '@mapbox/geojson-rewind@0.5.2':
+    resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
+    hasBin: true
+
+  '@mapbox/jsonlint-lines-primitives@2.0.2':
+    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
+    engines: {node: '>= 0.6'}
+
+  '@mapbox/point-geometry@0.1.0':
+    resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==}
+
+  '@mapbox/tiny-sdf@2.0.6':
+    resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==}
+
+  '@mapbox/unitbezier@0.0.1':
+    resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
+
+  '@mapbox/vector-tile@1.3.1':
+    resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==}
+
+  '@mapbox/whoots-js@3.1.0':
+    resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
+    engines: {node: '>=6.0.0'}
+
+  '@maplibre/maplibre-gl-style-spec@20.4.0':
+    resolution: {integrity: sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==}
+    hasBin: true
+
   '@material/mwc-icon@0.25.3':
     resolution: {integrity: sha512-36076AWZIRSr8qYOLjuDDkxej/HA0XAosrj7TS1ZeLlUBnLUtbDtvc1S7KSa0hqez7ouzOqGaWK24yoNnTa2OA==}
     deprecated: MWC beta is longer supported. Please upgrade to @material/web
@@ -1734,12 +1771,24 @@ packages:
   '@types/fs-extra@9.0.13':
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
 
+  '@types/geojson-vt@3.2.5':
+    resolution: {integrity: sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==}
+
+  '@types/geojson@7946.0.14':
+    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
+
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
   '@types/linkify-it@5.0.0':
     resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
 
+  '@types/mapbox__point-geometry@0.1.4':
+    resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
+
+  '@types/mapbox__vector-tile@1.3.4':
+    resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
+
   '@types/markdown-it@12.2.3':
     resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
 
@@ -1749,6 +1798,12 @@ packages:
   '@types/node@22.7.0':
     resolution: {integrity: sha512-MOdOibwBs6KW1vfqz2uKMlxq5xAfAZ98SZjO8e3XnAbFnTJtAspqhWk7hrdSAs9/Y14ZWMiy7/MxMUzAOadYEw==}
 
+  '@types/pbf@3.0.5':
+    resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
+
+  '@types/supercluster@7.1.3':
+    resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
+
   '@types/trusted-types@2.0.2':
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
 
@@ -2554,6 +2609,9 @@ packages:
     resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
     engines: {node: '>=4'}
 
+  earcut@3.0.0:
+    resolution: {integrity: sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -2924,6 +2982,9 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  geojson-vt@4.0.2:
+    resolution: {integrity: sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -2955,6 +3016,9 @@ packages:
     resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
     engines: {node: '>= 0.4'}
 
+  gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -2975,6 +3039,10 @@ packages:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
 
+  global-prefix@4.0.0:
+    resolution: {integrity: sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==}
+    engines: {node: '>=16'}
+
   global@4.4.0:
     resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
 
@@ -3114,6 +3182,9 @@ packages:
   idb@8.0.0:
     resolution: {integrity: sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==}
 
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
   ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
@@ -3146,6 +3217,10 @@ packages:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  ini@4.1.3:
+    resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   internal-slot@1.0.5:
     resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
     engines: {node: '>= 0.4'}
@@ -3297,6 +3372,10 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
+
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -3374,6 +3453,9 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json-stringify-pretty-compact@4.0.0:
+    resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==}
+
   json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -3381,6 +3463,9 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  kdbush@4.0.2:
+    resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
+
   keycode@2.2.1:
     resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==}
 
@@ -3534,6 +3619,10 @@ packages:
     resolution: {integrity: sha512-2L3MIgJynYrZ3TYMriLDLWocz15okFakV6J12HXvMXDHui2x/zgChzg1u9mFFGbbGWE+GsLpQByt4POb9Or+uA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  maplibre-gl@4.7.1:
+    resolution: {integrity: sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==}
+    engines: {node: '>=16.14.0', npm: '>=8.1.0'}
+
   markdown-it-anchor@8.6.7:
     resolution: {integrity: sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==}
     peerDependencies:
@@ -3666,6 +3755,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  murmurhash-js@1.0.0:
+    resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
+
   mux.js@6.0.1:
     resolution: {integrity: sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==}
     engines: {node: '>=8', npm: '>=5'}
@@ -3893,6 +3985,10 @@ packages:
     resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
     engines: {node: '>= 14.16'}
 
+  pbf@3.3.0:
+    resolution: {integrity: sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==}
+    hasBin: true
+
   picocolors@1.0.1:
     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
 
@@ -4157,6 +4253,9 @@ packages:
     resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
     engines: {node: ^10 || ^12 || >=14}
 
+  potpack@2.0.0:
+    resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4229,6 +4328,9 @@ packages:
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
+  protocol-buffers-schema@3.6.0:
+    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
+
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -4253,6 +4355,12 @@ packages:
     resolution: {integrity: sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==}
     engines: {node: '>=12'}
 
+  quickselect@2.0.0:
+    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+
+  quickselect@3.0.0:
+    resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==}
+
   radix-vue@1.9.9:
     resolution: {integrity: sha512-DuL2o7jxNjzlSP5Ko+kJgrW5db+jC3RlnYQIs3WITTqgzfdeP7hXjcqIUveY1f0uXRpOAN3OAd5MZ/SpRyQzQQ==}
     peerDependencies:
@@ -4301,6 +4409,9 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
+  resolve-protobuf-schema@2.1.0:
+    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -4345,6 +4456,9 @@ packages:
   rust-result@1.0.0:
     resolution: {integrity: sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -4582,6 +4696,9 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  supercluster@8.0.1:
+    resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4660,6 +4777,9 @@ packages:
     resolution: {integrity: sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
+  tinyqueue@3.0.0:
+    resolution: {integrity: sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==}
+
   tinyspy@3.0.2:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
@@ -4917,6 +5037,9 @@ packages:
       jsdom:
         optional: true
 
+  vt-pbf@3.1.3:
+    resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
+
   vue-chartjs@5.3.1:
     resolution: {integrity: sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A==}
     peerDependencies:
@@ -5106,6 +5229,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
@@ -5786,6 +5914,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/teenyicons@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.32':
@@ -5908,6 +6040,35 @@ snapshots:
     dependencies:
       '@lukeed/csprng': 1.0.1
 
+  '@mapbox/geojson-rewind@0.5.2':
+    dependencies:
+      get-stream: 6.0.1
+      minimist: 1.2.8
+
+  '@mapbox/jsonlint-lines-primitives@2.0.2': {}
+
+  '@mapbox/point-geometry@0.1.0': {}
+
+  '@mapbox/tiny-sdf@2.0.6': {}
+
+  '@mapbox/unitbezier@0.0.1': {}
+
+  '@mapbox/vector-tile@1.3.1':
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+
+  '@mapbox/whoots-js@3.1.0': {}
+
+  '@maplibre/maplibre-gl-style-spec@20.4.0':
+    dependencies:
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/unitbezier': 0.0.1
+      json-stringify-pretty-compact: 4.0.0
+      minimist: 1.2.8
+      quickselect: 2.0.0
+      rw: 1.3.3
+      tinyqueue: 3.0.0
+
   '@material/mwc-icon@0.25.3':
     dependencies:
       lit: 2.2.6
@@ -6749,10 +6910,24 @@ snapshots:
     dependencies:
       '@types/node': 22.7.0
 
+  '@types/geojson-vt@3.2.5':
+    dependencies:
+      '@types/geojson': 7946.0.14
+
+  '@types/geojson@7946.0.14': {}
+
   '@types/json5@0.0.29': {}
 
   '@types/linkify-it@5.0.0': {}
 
+  '@types/mapbox__point-geometry@0.1.4': {}
+
+  '@types/mapbox__vector-tile@1.3.4':
+    dependencies:
+      '@types/geojson': 7946.0.14
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/pbf': 3.0.5
+
   '@types/markdown-it@12.2.3':
     dependencies:
       '@types/linkify-it': 5.0.0
@@ -6764,6 +6939,12 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/pbf@3.0.5': {}
+
+  '@types/supercluster@7.1.3':
+    dependencies:
+      '@types/geojson': 7946.0.14
+
   '@types/trusted-types@2.0.2': {}
 
   '@types/web-bluetooth@0.0.20': {}
@@ -7697,6 +7878,8 @@ snapshots:
 
   dset@3.1.4: {}
 
+  earcut@3.0.0: {}
+
   eastasianwidth@0.2.0: {}
 
   editorconfig@1.0.4:
@@ -8224,6 +8407,8 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  geojson-vt@4.0.2: {}
+
   get-caller-file@2.0.5: {}
 
   get-east-asian-width@1.2.0: {}
@@ -8253,6 +8438,8 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
 
+  gl-matrix@3.4.3: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -8283,6 +8470,12 @@ snapshots:
     dependencies:
       ini: 4.1.1
 
+  global-prefix@4.0.0:
+    dependencies:
+      ini: 4.1.3
+      kind-of: 6.0.3
+      which: 4.0.0
+
   global@4.4.0:
     dependencies:
       min-document: 2.19.0
@@ -8478,6 +8671,8 @@ snapshots:
 
   idb@8.0.0: {}
 
+  ieee754@1.2.1: {}
+
   ignore@5.2.4: {}
 
   immutable@4.3.7:
@@ -8503,6 +8698,8 @@ snapshots:
 
   ini@4.1.1: {}
 
+  ini@4.1.3: {}
+
   internal-slot@1.0.5:
     dependencies:
       get-intrinsic: 1.2.4
@@ -8635,6 +8832,8 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  isexe@3.1.1: {}
+
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-report@3.0.1:
@@ -8756,6 +8955,8 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json-stringify-pretty-compact@4.0.0: {}
+
   json5@1.0.2:
     dependencies:
       minimist: 1.2.8
@@ -8766,6 +8967,8 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  kdbush@4.0.2: {}
+
   keycode@2.2.1: {}
 
   keyv@4.5.3:
@@ -8939,6 +9142,35 @@ snapshots:
 
   map-obj@5.0.0: {}
 
+  maplibre-gl@4.7.1:
+    dependencies:
+      '@mapbox/geojson-rewind': 0.5.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/tiny-sdf': 2.0.6
+      '@mapbox/unitbezier': 0.0.1
+      '@mapbox/vector-tile': 1.3.1
+      '@mapbox/whoots-js': 3.1.0
+      '@maplibre/maplibre-gl-style-spec': 20.4.0
+      '@types/geojson': 7946.0.14
+      '@types/geojson-vt': 3.2.5
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/mapbox__vector-tile': 1.3.4
+      '@types/pbf': 3.0.5
+      '@types/supercluster': 7.1.3
+      earcut: 3.0.0
+      geojson-vt: 4.0.2
+      gl-matrix: 3.4.3
+      global-prefix: 4.0.0
+      kdbush: 4.0.2
+      murmurhash-js: 1.0.0
+      pbf: 3.3.0
+      potpack: 2.0.0
+      quickselect: 3.0.0
+      supercluster: 8.0.1
+      tinyqueue: 3.0.0
+      vt-pbf: 3.1.3
+
   markdown-it-anchor@8.6.7(@types/markdown-it@12.2.3)(markdown-it@12.3.2):
     dependencies:
       '@types/markdown-it': 12.2.3
@@ -9065,6 +9297,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  murmurhash-js@1.0.0: {}
+
   mux.js@6.0.1:
     dependencies:
       '@babel/runtime': 7.25.6
@@ -9285,6 +9519,11 @@ snapshots:
 
   pathval@2.0.0: {}
 
+  pbf@3.3.0:
+    dependencies:
+      ieee754: 1.2.1
+      resolve-protobuf-schema: 2.1.0
+
   picocolors@1.0.1: {}
 
   picocolors@1.1.0: {}
@@ -9575,6 +9814,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  potpack@2.0.0: {}
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
@@ -9680,6 +9921,8 @@ snapshots:
 
   proto-list@1.2.4: {}
 
+  protocol-buffers-schema@3.6.0: {}
+
   proxy-from-env@1.1.0: {}
 
   psl@1.9.0: {}
@@ -9694,6 +9937,10 @@ snapshots:
 
   quick-lru@6.1.2: {}
 
+  quickselect@2.0.0: {}
+
+  quickselect@3.0.0: {}
+
   radix-vue@1.9.9(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@floating-ui/dom': 1.6.12
@@ -9749,6 +9996,10 @@ snapshots:
 
   resolve-from@4.0.0: {}
 
+  resolve-protobuf-schema@2.1.0:
+    dependencies:
+      protocol-buffers-schema: 3.6.0
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.15.1
@@ -9809,6 +10060,8 @@ snapshots:
     dependencies:
       individual: 2.0.0
 
+  rw@1.3.3: {}
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
@@ -10076,6 +10329,10 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  supercluster@8.0.1:
+    dependencies:
+      kdbush: 4.0.2
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -10176,6 +10433,8 @@ snapshots:
 
   tinypool@1.0.0: {}
 
+  tinyqueue@3.0.0: {}
+
   tinyspy@3.0.2: {}
 
   to-fast-properties@2.0.0: {}
@@ -10460,6 +10719,12 @@ snapshots:
       - supports-color
       - terser
 
+  vt-pbf@3.1.3:
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/vector-tile': 1.3.1
+      pbf: 3.3.0
+
   vue-chartjs@5.3.1(chart.js@4.4.4)(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       chart.js: 4.4.4
@@ -10647,6 +10912,10 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.1
+
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
diff --git a/tailwind.config.js b/tailwind.config.js
index 9af26b294..93c164cac 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 const { slateDark } = require('@radix-ui/colors');
 import { colors } from './theme/colors';
+import { icons } from './theme/icons';
 const defaultTheme = require('tailwindcss/defaultTheme');
 const {
   iconsPlugin,
@@ -28,6 +29,7 @@ const tailwindConfig = {
     './app/javascript/portal/**/*.vue',
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',
+    './app/javascript/dashboard/components-next/**/*.vue',
     './app/javascript/dashboard/helper/**/*.js',
     './app/javascript/dashboard/components-next/**/*.js',
     './app/views/**/*.html.erb',
@@ -39,6 +41,112 @@ const tailwindConfig = {
         inter: ['Inter', ...defaultSansFonts],
         interDisplay: ['Inter Display', ...defaultSansFonts],
       },
+      typography: {
+        email: {
+          css: {
+            color: 'rgb(var(--slate-11))',
+            lineHeight: '1.6',
+            fontSize: '14px',
+            '*': {
+              '&:first-child': {
+                marginTop: '0',
+              },
+            },
+
+            strong: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+            },
+
+            b: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+            },
+
+            h1: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+              fontSize: '1.25rem',
+              '&:first-child': {
+                marginTop: '0',
+              },
+            },
+            h2: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+              fontSize: '1rem',
+              '&:first-child': {
+                marginTop: '0',
+              },
+            },
+            h3: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+              fontSize: '1rem',
+              '&:first-child': {
+                marginTop: '0',
+              },
+            },
+            hr: {
+              marginTop: '1.5em',
+              marginBottom: '1.5em',
+            },
+            a: {
+              color: 'rgb(var(--text-blue))',
+              textDecoration: 'underline',
+            },
+            'ul li': {
+              margin: '0 0 0.5em 1.5em',
+              listStyleType: 'disc',
+            },
+            'ol li': {
+              margin: '0 0 0.5em 1.5em',
+              listStyleType: 'decimal',
+            },
+            blockquote: {
+              fontStyle: 'italic',
+              color: 'rgb(var(--slate-11))',
+              borderLeft: `4px solid rgb(var(--border-strong))`,
+              paddingLeft: '1em',
+            },
+            code: {
+              backgroundColor: 'rgb(var(--alpha-3))',
+              color: 'rgb(var(--solid-amber))',
+              padding: '0.2em 0.4em',
+              borderRadius: '4px',
+              fontSize: '0.95em',
+            },
+            pre: {
+              backgroundColor: 'rgb(var(--alpha-3))',
+              padding: '1em',
+              borderRadius: '6px',
+              overflowX: 'auto',
+            },
+            table: {
+              width: '100%',
+              borderCollapse: 'collapse',
+            },
+            th: {
+              padding: '0.75em',
+              color: 'rgb(var(--slate-12))',
+              borderBottom: `1px solid rgb(var(--border-strong))`,
+              textAlign: 'left',
+              fontWeight: '600',
+            },
+            tr: {
+              borderBottom: `1px solid rgb(var(--border-strong))`,
+            },
+            td: {
+              padding: '0.75em',
+              borderBottom: `1px solid rgb(var(--border-strong))`,
+            },
+            img: {
+              maxWidth: '100%',
+              height: 'auto',
+            },
+          },
+        },
+      },
     },
     screens: {
       xs: '480px',
@@ -111,28 +219,8 @@ const tailwindConfig = {
     require('@tailwindcss/typography'),
     iconsPlugin({
       collections: {
-        woot: {
-          icons: {
-            'logic-or': {
-              body: `<rect x="14" y="5" width="2" height="13" rx="1" fill="currentColor"/><rect x="8" y="5" width="2" height="13" rx="1" fill="currentColor"/>`,
-              width: 24,
-              height: 24,
-            },
-            alert: {
-              body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
-              width: 2,
-              height: 12,
-            },
-            captain: {
-              body: `<path d="M150.485 213.282C150.485 200.856 160.559 190.782 172.985 190.782C185.411 190.782 195.485 200.856 195.485 213.282V265.282C195.485 277.709 185.411 287.782 172.985 287.782C160.559 287.782 150.485 277.709 150.485 265.282V213.282Z" fill="currentColor"/>
-              <path d="M222.485 213.282C222.485 200.856 232.559 190.782 244.985 190.782C257.411 190.782 267.485 200.856 267.485 213.282V265.282C267.485 277.709 257.411 287.782 244.985 287.782C232.559 287.782 222.485 277.709 222.485 265.282V213.282Z" fill="currentColor"/>
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M412.222 109.961C317.808 96.6217 240.845 96.0953 144.309 109.902C119.908 113.392 103.762 115.751 91.4521 119.354C80.0374 122.694 73.5457 126.678 68.1762 132.687C57.0576 145.13 55.592 159.204 54.0765 208.287C52.587 256.526 55.5372 299.759 61.1249 348.403C64.1025 374.324 66.1515 391.817 69.4229 405.117C72.526 417.732 76.2792 424.515 81.4954 429.708C86.7533 434.942 93.4917 438.633 105.859 441.629C118.94 444.797 136.104 446.713 161.613 449.5C244.114 458.514 305.869 458.469 388.677 449.548C414.495 446.767 431.939 444.849 445.216 441.702C457.83 438.712 464.612 435.047 469.797 429.962C474.873 424.985 478.752 418.118 482.116 404.874C485.626 391.056 488.014 372.772 491.47 345.913C497.636 297.99 502.076 255.903 502.248 209.798C502.433 160.503 501.426 146.477 490.181 133.468C484.75 127.185 478.148 123.053 466.473 119.612C453.865 115.897 437.283 113.502 412.222 109.961ZM138.414 68.5711C238.977 54.1882 319.888 54.7514 418.047 68.6199L419.483 68.8227C442.724 72.1054 462.359 74.8786 478.244 79.5601C495.387 84.6124 509.724 92.2821 521.706 106.145C544.308 132.295 544.161 163.321 543.965 204.542C543.956 206.327 543.948 208.131 543.941 209.954C543.758 258.703 539.048 302.844 532.821 351.247L532.656 352.528C529.407 377.787 526.729 398.602 522.522 415.166C518.098 432.584 511.485 447.517 498.968 459.792C486.56 471.959 471.897 478.282 454.819 482.33C438.691 486.153 418.624 488.314 394.436 490.919L393.136 491.059C307.385 500.297 242.618 500.349 157.091 491.004L155.772 490.86C131.921 488.255 112.062 486.086 96.056 482.209C79.0408 478.087 64.4759 471.637 52.1005 459.316C39.6835 446.955 33.1618 432.265 28.94 415.102C24.9582 398.915 22.6435 378.759 19.8561 354.488L19.7052 353.174C13.9746 303.287 10.8315 257.908 12.4035 206.997C12.4606 205.15 12.5151 203.323 12.5691 201.516C13.7911 160.603 14.7077 129.914 37.1055 104.847C48.989 91.5477 63.035 84.1731 79.7563 79.2794C95.2643 74.7408 114.386 72.0068 137.018 68.7707C137.482 68.7044 137.948 68.6379 138.414 68.5711Z" fill="currentColor"/>`,
-              width: 556,
-              height: 556,
-            },
-          },
-        },
-        ...getIconCollections(['lucide', 'logos', 'ri', 'ph']),
+        woot: { icons },
+        ...getIconCollections(['lucide', 'logos', 'ri', 'ph', 'teenyicons']),
       },
     }),
   ],
diff --git a/theme/colors.js b/theme/colors.js
index 47fd65c8d..1bf16f6a8 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -370,6 +370,7 @@ export const colors = {
       active: 'rgb(var(--solid-active) / <alpha-value>)',
       amber: 'rgb(var(--solid-amber) / <alpha-value>)',
       blue: 'rgb(var(--solid-blue) / <alpha-value>)',
+      iris: 'rgb(var(--solid-iris) / <alpha-value>)',
     },
     alpha: {
       1: 'rgba(var(--alpha-1))',
diff --git a/theme/icons.js b/theme/icons.js
new file mode 100644
index 000000000..265c859b4
--- /dev/null
+++ b/theme/icons.js
@@ -0,0 +1,116 @@
+export const icons = {
+  'logic-or': {
+    body: `<rect x="14" y="5" width="2" height="13" rx="1" fill="currentColor"/><rect x="8" y="5" width="2" height="13" rx="1" fill="currentColor"/>`,
+    width: 24,
+    height: 24,
+  },
+  alert: {
+    body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
+    width: 2,
+    height: 12,
+  },
+  captain: {
+    body: `<path d="M150.485 213.282C150.485 200.856 160.559 190.782 172.985 190.782C185.411 190.782 195.485 200.856 195.485 213.282V265.282C195.485 277.709 185.411 287.782 172.985 287.782C160.559 287.782 150.485 277.709 150.485 265.282V213.282Z" fill="currentColor"/>
+    <path d="M222.485 213.282C222.485 200.856 232.559 190.782 244.985 190.782C257.411 190.782 267.485 200.856 267.485 213.282V265.282C267.485 277.709 257.411 287.782 244.985 287.782C232.559 287.782 222.485 277.709 222.485 265.282V213.282Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M412.222 109.961C317.808 96.6217 240.845 96.0953 144.309 109.902C119.908 113.392 103.762 115.751 91.4521 119.354C80.0374 122.694 73.5457 126.678 68.1762 132.687C57.0576 145.13 55.592 159.204 54.0765 208.287C52.587 256.526 55.5372 299.759 61.1249 348.403C64.1025 374.324 66.1515 391.817 69.4229 405.117C72.526 417.732 76.2792 424.515 81.4954 429.708C86.7533 434.942 93.4917 438.633 105.859 441.629C118.94 444.797 136.104 446.713 161.613 449.5C244.114 458.514 305.869 458.469 388.677 449.548C414.495 446.767 431.939 444.849 445.216 441.702C457.83 438.712 464.612 435.047 469.797 429.962C474.873 424.985 478.752 418.118 482.116 404.874C485.626 391.056 488.014 372.772 491.47 345.913C497.636 297.99 502.076 255.903 502.248 209.798C502.433 160.503 501.426 146.477 490.181 133.468C484.75 127.185 478.148 123.053 466.473 119.612C453.865 115.897 437.283 113.502 412.222 109.961ZM138.414 68.5711C238.977 54.1882 319.888 54.7514 418.047 68.6199L419.483 68.8227C442.724 72.1054 462.359 74.8786 478.244 79.5601C495.387 84.6124 509.724 92.2821 521.706 106.145C544.308 132.295 544.161 163.321 543.965 204.542C543.956 206.327 543.948 208.131 543.941 209.954C543.758 258.703 539.048 302.844 532.821 351.247L532.656 352.528C529.407 377.787 526.729 398.602 522.522 415.166C518.098 432.584 511.485 447.517 498.968 459.792C486.56 471.959 471.897 478.282 454.819 482.33C438.691 486.153 418.624 488.314 394.436 490.919L393.136 491.059C307.385 500.297 242.618 500.349 157.091 491.004L155.772 490.86C131.921 488.255 112.062 486.086 96.056 482.209C79.0408 478.087 64.4759 471.637 52.1005 459.316C39.6835 446.955 33.1618 432.265 28.94 415.102C24.9582 398.915 22.6435 378.759 19.8561 354.488L19.7052 353.174C13.9746 303.287 10.8315 257.908 12.4035 206.997C12.4606 205.15 12.5151 203.323 12.5691 201.516C13.7911 160.603 14.7077 129.914 37.1055 104.847C48.989 91.5477 63.035 84.1731 79.7563 79.2794C95.2643 74.7408 114.386 72.0068 137.018 68.7707C137.482 68.7044 137.948 68.6379 138.414 68.5711Z" fill="currentColor"/>`,
+    width: 556,
+    height: 556,
+  },
+  'file-csv': {
+    body: `<g clip-path="url(#clip0_2931_148091)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM3.46583 15.9741C3.66935 16.0317 3.86903 16.0605 4.06487 16.0605C4.23383 16.0605 4.39607 16.0374 4.55159 15.9914C4.70903 15.9434 4.84919 15.8771 4.97206 15.7926C5.09495 15.7082 5.19191 15.6102 5.26295 15.4989C5.33591 15.3875 5.37239 15.2675 5.37239 15.1389C5.37239 15.0198 5.33207 14.9238 5.25143 14.8509C5.17271 14.776 5.07863 14.7386 4.96919 14.7386C4.83671 14.7386 4.74359 14.7683 4.68983 14.8278C4.63799 14.8854 4.59575 14.9507 4.56311 15.0237C4.54007 15.0813 4.50935 15.1389 4.47095 15.1965C4.43447 15.2522 4.38359 15.2982 4.31831 15.3347C4.25495 15.3712 4.17046 15.3894 4.06487 15.3894C3.93431 15.3894 3.80951 15.352 3.69047 15.2771C3.57335 15.2022 3.47831 15.0803 3.40535 14.9114C3.33239 14.7405 3.29591 14.5139 3.29591 14.2317C3.29591 13.9475 3.33239 13.721 3.40535 13.552C3.47831 13.383 3.57335 13.2611 3.69047 13.1862C3.80951 13.1094 3.93431 13.071 4.06487 13.071C4.17046 13.071 4.25495 13.0893 4.31831 13.1258C4.38359 13.1622 4.43447 13.2093 4.47095 13.2669C4.50935 13.3226 4.54007 13.3792 4.56311 13.4368C4.59575 13.5098 4.63799 13.576 4.68983 13.6355C4.74359 13.6931 4.83671 13.7219 4.96919 13.7219C5.07863 13.7219 5.17271 13.6854 5.25143 13.6125C5.33207 13.5395 5.37239 13.4426 5.37239 13.3216C5.37239 13.193 5.33687 13.073 5.26583 12.9616C5.19479 12.8502 5.09687 12.7523 4.97206 12.6678C4.84919 12.5834 4.70999 12.5181 4.55447 12.472C4.39895 12.424 4.23575 12.4 4.06487 12.4C3.86903 12.4 3.66935 12.4288 3.46583 12.4864C3.26423 12.544 3.07799 12.6419 2.9071 12.7802C2.73623 12.9165 2.59895 13.1037 2.49527 13.3418C2.39159 13.5779 2.33975 13.8746 2.33975 14.2317C2.33975 14.5869 2.39159 14.8826 2.49527 15.1187C2.59895 15.3549 2.73623 15.5421 2.9071 15.6803C3.07799 15.8186 3.26423 15.9165 3.46583 15.9741ZM6.76232 15.9626C6.97736 16.0278 7.22408 16.0605 7.50248 16.0605C7.80584 16.0605 8.07368 16.0154 8.30599 15.9251C8.53832 15.8349 8.71976 15.7072 8.85032 15.5421C8.98088 15.375 9.04615 15.1792 9.04615 14.9546C9.04615 14.7376 8.99048 14.5581 8.87912 14.416C8.76776 14.2739 8.61416 14.1578 8.41831 14.0675C8.22439 13.9773 8.00072 13.9014 7.74728 13.84C7.49384 13.7766 7.30568 13.7094 7.1828 13.6384C7.06184 13.5674 7.00136 13.4829 7.00136 13.385C7.00136 13.3216 7.02248 13.2669 7.06472 13.2208C7.10696 13.1728 7.16648 13.1363 7.24328 13.1114C7.32008 13.0845 7.4084 13.071 7.50824 13.071C7.64456 13.071 7.75976 13.0922 7.85384 13.1344C7.94792 13.1766 8.02184 13.2294 8.07559 13.2928C8.12551 13.3408 8.18984 13.3926 8.26856 13.4483C8.34728 13.504 8.44136 13.5318 8.5508 13.5318C8.66216 13.5318 8.75144 13.5002 8.81863 13.4368C8.88776 13.3715 8.92232 13.2832 8.92232 13.1718C8.92232 13.0778 8.89832 12.9933 8.85032 12.9184C8.80232 12.8435 8.73896 12.7782 8.66024 12.7226C8.52776 12.617 8.36264 12.5373 8.16488 12.4835C7.96712 12.4278 7.76264 12.4 7.55143 12.4C7.26536 12.4 7.00808 12.4403 6.7796 12.521C6.55304 12.6016 6.37352 12.7168 6.24103 12.8666C6.10856 13.0163 6.04232 13.1939 6.04232 13.3994C6.04232 13.6778 6.14407 13.9168 6.3476 14.1165C6.55304 14.3162 6.88423 14.4678 7.3412 14.5715C7.59272 14.6291 7.77992 14.6877 7.9028 14.7472C8.02567 14.8048 8.08712 14.895 8.08712 15.0179C8.08712 15.0947 8.06215 15.161 8.01224 15.2166C7.96232 15.2723 7.89416 15.3155 7.80775 15.3462C7.72328 15.375 7.62728 15.3894 7.51976 15.3894C7.3604 15.3894 7.22888 15.3587 7.1252 15.2973C7.02152 15.2358 6.93032 15.1648 6.8516 15.0842C6.7844 15.0208 6.7124 14.9651 6.6356 14.9171C6.55879 14.8691 6.46472 14.8451 6.35335 14.8451C6.2228 14.8451 6.1268 14.8854 6.06536 14.9661C6.00392 15.0467 5.9732 15.1293 5.9732 15.2138C5.9732 15.4019 6.06344 15.5632 6.24392 15.6976C6.3764 15.807 6.5492 15.8954 6.76232 15.9626ZM10.6578 15.8877C10.7673 15.9664 10.9122 16.0058 11.0927 16.0058H11.2252C11.4076 16.0058 11.5535 15.9664 11.663 15.8877C11.7724 15.809 11.8511 15.6928 11.8991 15.5392L12.7055 12.9904C12.7132 12.9616 12.718 12.9338 12.7199 12.9069C12.7238 12.88 12.7257 12.8541 12.7257 12.8291C12.7257 12.6966 12.6825 12.593 12.5961 12.5181C12.5116 12.4432 12.4031 12.4058 12.2706 12.4058C12.1132 12.4058 12.0009 12.4461 11.9337 12.5267C11.8684 12.6054 11.8166 12.7245 11.7782 12.8838L11.159 15.2051L10.5455 12.8838C10.5071 12.7245 10.4543 12.6054 10.3871 12.5267C10.3218 12.4461 10.2095 12.4058 10.0502 12.4058C9.92153 12.4058 9.81305 12.4422 9.72472 12.5152C9.6364 12.5882 9.59225 12.6918 9.59225 12.8262C9.59225 12.8493 9.59416 12.8752 9.59801 12.904C9.60184 12.9328 9.6076 12.9616 9.61528 12.9904L10.4188 15.5392C10.4687 15.6928 10.5484 15.809 10.6578 15.8877Z" fill="#FFC53D"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#FFC53D"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148091">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-doc': {
+    body: `<g clip-path="url(#clip0_2931_148089)">
+    <path d="M4.2927 15.238C4.1847 15.28 4.06369 15.301 3.92969 15.301H3.63569V12.985H3.92969C4.06369 12.985 4.1847 13.007 4.2927 13.051C4.4007 13.093 4.4927 13.16 4.5687 13.252C4.6467 13.344 4.7067 13.464 4.7487 13.612C4.7907 13.758 4.8117 13.935 4.8117 14.143C4.8117 14.349 4.7907 14.526 4.7487 14.674C4.7067 14.822 4.6467 14.942 4.5687 15.034C4.4927 15.126 4.4007 15.194 4.2927 15.238Z" fill="#3E63DD"/>
+    <path d="M8.36858 15.229C8.26458 15.319 8.14258 15.364 8.00258 15.364C7.86058 15.364 7.73658 15.319 7.63058 15.229C7.52457 15.137 7.44257 15.001 7.38457 14.821C7.32857 14.641 7.30057 14.419 7.30057 14.155C7.30057 13.893 7.32857 13.673 7.38457 13.495C7.44257 13.315 7.52457 13.179 7.63058 13.087C7.73658 12.995 7.86058 12.949 8.00258 12.949C8.14258 12.949 8.26458 12.995 8.36858 13.087C8.47258 13.179 8.55358 13.315 8.61158 13.495C8.66959 13.673 8.69859 13.893 8.69859 14.155C8.69859 14.419 8.66959 14.641 8.61158 14.821C8.55358 15.001 8.47258 15.137 8.36858 15.229Z" fill="#3E63DD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM4.3557 12.319C4.1937 12.297 4.0527 12.286 3.93269 12.286H3.20669C2.83868 12.286 2.65468 12.47 2.65468 12.838V15.448C2.65468 15.816 2.83868 16 3.20669 16H3.93269C4.0527 16 4.1937 15.989 4.3557 15.967C4.5177 15.945 4.6827 15.901 4.8507 15.835C5.0187 15.767 5.17471 15.666 5.31871 15.532C5.46471 15.396 5.58171 15.216 5.66971 14.992C5.75971 14.766 5.80471 14.483 5.80471 14.143C5.80471 13.803 5.75971 13.521 5.66971 13.297C5.58171 13.071 5.46471 12.891 5.31871 12.757C5.17471 12.621 5.0187 12.52 4.8507 12.454C4.6827 12.386 4.5177 12.341 4.3557 12.319ZM7.39057 15.964C7.59057 16.03 7.79458 16.063 8.00258 16.063C8.20658 16.063 8.40858 16.03 8.60858 15.964C8.81059 15.896 8.99259 15.788 9.15459 15.64C9.31859 15.492 9.44959 15.296 9.54759 15.052C9.6456 14.808 9.6946 14.509 9.6946 14.155C9.6946 13.801 9.6456 13.503 9.54759 13.261C9.44959 13.017 9.31859 12.821 9.15459 12.673C8.99259 12.525 8.81059 12.418 8.60858 12.352C8.40858 12.284 8.20658 12.25 8.00258 12.25C7.79458 12.25 7.59057 12.284 7.39057 12.352C7.19057 12.418 7.00757 12.525 6.84157 12.673C6.67757 12.821 6.54656 13.017 6.44856 13.261C6.35056 13.503 6.30156 13.801 6.30156 14.155C6.30156 14.509 6.35056 14.808 6.44856 15.052C6.54656 15.296 6.67757 15.492 6.84157 15.64C7.00757 15.788 7.19057 15.896 7.39057 15.964ZM11.4275 15.973C11.6395 16.033 11.8475 16.063 12.0515 16.063C12.2275 16.063 12.3965 16.039 12.5585 15.991C12.7225 15.941 12.8685 15.872 12.9965 15.784C13.1245 15.696 13.2255 15.594 13.2995 15.478C13.3755 15.362 13.4135 15.237 13.4135 15.103C13.4135 14.979 13.3715 14.879 13.2875 14.803C13.2055 14.725 13.1075 14.686 12.9935 14.686C12.8555 14.686 12.7585 14.717 12.7025 14.779C12.6485 14.839 12.6045 14.907 12.5705 14.983C12.5465 15.043 12.5145 15.103 12.4745 15.163C12.4365 15.221 12.3835 15.269 12.3155 15.307C12.2495 15.345 12.1615 15.364 12.0515 15.364C11.9155 15.364 11.7855 15.325 11.6615 15.247C11.5395 15.169 11.4405 15.042 11.3645 14.866C11.2885 14.688 11.2505 14.452 11.2505 14.158C11.2505 13.862 11.2885 13.626 11.3645 13.45C11.4405 13.274 11.5395 13.147 11.6615 13.069C11.7855 12.989 11.9155 12.949 12.0515 12.949C12.1615 12.949 12.2495 12.968 12.3155 13.006C12.3835 13.044 12.4365 13.093 12.4745 13.153C12.5145 13.211 12.5465 13.27 12.5705 13.33C12.6045 13.406 12.6485 13.475 12.7025 13.537C12.7585 13.597 12.8555 13.627 12.9935 13.627C13.1075 13.627 13.2055 13.589 13.2875 13.513C13.3715 13.437 13.4135 13.336 13.4135 13.21C13.4135 13.076 13.3765 12.951 13.3025 12.835C13.2285 12.719 13.1265 12.617 12.9965 12.529C12.8685 12.441 12.7235 12.373 12.5615 12.325C12.3995 12.275 12.2295 12.25 12.0515 12.25C11.8475 12.25 11.6395 12.28 11.4275 12.34C11.2175 12.4 11.0235 12.502 10.8455 12.646C10.6674 12.788 10.5244 12.983 10.4164 13.231C10.3084 13.477 10.2544 13.786 10.2544 14.158C10.2544 14.528 10.3084 14.836 10.4164 15.082C10.5244 15.328 10.6674 15.523 10.8455 15.667C11.0235 15.811 11.2175 15.913 11.4275 15.973Z" fill="#3E63DD"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#3E63DD"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148089">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-pdf': {
+    body: `<g clip-path="url(#clip0_2931_148088)">
+    <path d="M3.83969 14.011V12.985H4.1847C4.2547 12.985 4.3227 12.99 4.3887 13C4.4547 13.01 4.5137 13.032 4.5657 13.066C4.6197 13.1 4.6617 13.151 4.6917 13.219C4.7237 13.285 4.7397 13.374 4.7397 13.486C4.7397 13.6 4.7237 13.692 4.6917 13.762C4.6617 13.832 4.6197 13.885 4.5657 13.921C4.5137 13.955 4.4547 13.979 4.3887 13.993C4.3227 14.005 4.2547 14.011 4.1847 14.011H3.83969Z" fill="#E54666"/>
+    <path d="M8.10758 15.238C7.99958 15.28 7.87858 15.301 7.74458 15.301H7.45057V12.985H7.74458C7.87858 12.985 7.99958 13.007 8.10758 13.051C8.21558 13.093 8.30758 13.16 8.38358 13.252C8.46158 13.344 8.52158 13.464 8.56358 13.612C8.60559 13.758 8.62659 13.935 8.62659 14.143C8.62659 14.349 8.60559 14.526 8.56358 14.674C8.52158 14.822 8.46158 14.942 8.38358 15.034C8.30758 15.126 8.21558 15.194 8.10758 15.238Z" fill="#E54666"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM3.83969 14.71H4.3377C4.4297 14.71 4.5347 14.703 4.6527 14.689C4.7727 14.673 4.8947 14.642 5.0187 14.596C5.14471 14.55 5.26071 14.483 5.36671 14.395C5.47471 14.305 5.56071 14.186 5.62471 14.038C5.69071 13.89 5.72371 13.706 5.72371 13.486C5.72371 13.266 5.69071 13.084 5.62471 12.94C5.56071 12.794 5.47471 12.677 5.36671 12.589C5.26071 12.501 5.14471 12.436 5.0187 12.394C4.8947 12.35 4.7727 12.321 4.6527 12.307C4.5347 12.293 4.4297 12.286 4.3377 12.286H3.41069C3.04269 12.286 2.85868 12.47 2.85868 12.838V15.448C2.85868 15.816 3.02268 16 3.35069 16C3.67669 16 3.83969 15.816 3.83969 15.448V14.71ZM8.17058 12.319C8.00858 12.297 7.86758 12.286 7.74758 12.286H7.02157C6.65356 12.286 6.46956 12.47 6.46956 12.838V15.448C6.46956 15.816 6.65356 16 7.02157 16H7.74758C7.86758 16 8.00858 15.989 8.17058 15.967C8.33258 15.945 8.49758 15.901 8.66559 15.835C8.83359 15.767 8.98959 15.666 9.13359 15.532C9.27959 15.396 9.39659 15.216 9.48459 14.992C9.57459 14.766 9.61959 14.483 9.61959 14.143C9.61959 13.803 9.57459 13.521 9.48459 13.297C9.39659 13.071 9.27959 12.891 9.13359 12.757C8.98959 12.621 8.83359 12.52 8.66559 12.454C8.49758 12.386 8.33258 12.341 8.17058 12.319ZM13.1405 12.895C13.2345 12.833 13.2815 12.746 13.2815 12.634C13.2815 12.52 13.2345 12.434 13.1405 12.376C13.0465 12.316 12.9085 12.286 12.7265 12.286H11.1755C10.8095 12.286 10.6264 12.47 10.6264 12.838V15.502C10.6264 15.868 10.7894 16.051 11.1155 16.051C11.4455 16.051 11.6105 15.868 11.6105 15.502V14.788H12.5915C12.8955 14.788 13.0475 14.672 13.0475 14.44C13.0475 14.206 12.8955 14.089 12.5915 14.089H11.6105V12.985H12.7265C12.9085 12.985 13.0465 12.955 13.1405 12.895Z" fill="#E54666"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#E54666"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148088">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-ppt': {
+    body: `<g clip-path="url(#clip0_2931_148086)">
+    <path d="M3.83969 14.011V12.985H4.1847C4.2547 12.985 4.3227 12.99 4.3887 13C4.4547 13.01 4.5137 13.032 4.5657 13.066C4.6197 13.1 4.6617 13.151 4.6917 13.219C4.7237 13.285 4.7397 13.374 4.7397 13.486C4.7397 13.6 4.7237 13.692 4.6917 13.762C4.6617 13.832 4.6197 13.885 4.5657 13.921C4.5137 13.955 4.4547 13.979 4.3887 13.993C4.3227 14.005 4.2547 14.011 4.1847 14.011H3.83969Z" fill="#F76808"/>
+    <path d="M7.65458 14.011V12.985H7.99958C8.06958 12.985 8.13758 12.99 8.20358 13C8.26958 13.01 8.32858 13.032 8.38058 13.066C8.43458 13.1 8.47658 13.151 8.50658 13.219C8.53858 13.285 8.55458 13.374 8.55458 13.486C8.55458 13.6 8.53858 13.692 8.50658 13.762C8.47658 13.832 8.43458 13.885 8.38058 13.921C8.32858 13.955 8.26958 13.979 8.20358 13.993C8.13758 14.005 8.06958 14.011 7.99958 14.011H7.65458Z" fill="#F76808"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM3.83969 14.71H4.3377C4.4297 14.71 4.5347 14.703 4.6527 14.689C4.7727 14.673 4.8947 14.642 5.0187 14.596C5.14471 14.55 5.26071 14.483 5.36671 14.395C5.47471 14.305 5.56071 14.186 5.62471 14.038C5.69071 13.89 5.72371 13.706 5.72371 13.486C5.72371 13.266 5.69071 13.084 5.62471 12.94C5.56071 12.794 5.47471 12.677 5.36671 12.589C5.26071 12.501 5.14471 12.436 5.0187 12.394C4.8947 12.35 4.7727 12.321 4.6527 12.307C4.5347 12.293 4.4297 12.286 4.3377 12.286H3.41069C3.04269 12.286 2.85868 12.47 2.85868 12.838V15.448C2.85868 15.816 3.02268 16 3.35069 16C3.67669 16 3.83969 15.816 3.83969 15.448V14.71ZM7.65458 14.71H8.15258C8.24458 14.71 8.34958 14.703 8.46758 14.689C8.58758 14.673 8.70959 14.642 8.83359 14.596C8.95959 14.55 9.07559 14.483 9.18159 14.395C9.28959 14.305 9.37559 14.186 9.43959 14.038C9.50559 13.89 9.53859 13.706 9.53859 13.486C9.53859 13.266 9.50559 13.084 9.43959 12.94C9.37559 12.794 9.28959 12.677 9.18159 12.589C9.07559 12.501 8.95959 12.436 8.83359 12.394C8.70959 12.35 8.58758 12.321 8.46758 12.307C8.34958 12.293 8.24458 12.286 8.15258 12.286H7.22557C6.85757 12.286 6.67357 12.47 6.67357 12.838V15.448C6.67357 15.816 6.83757 16 7.16557 16C7.49157 16 7.65458 15.816 7.65458 15.448V14.71ZM13.4105 12.634C13.4105 12.402 13.2265 12.286 12.8585 12.286H10.7704C10.5924 12.286 10.4554 12.316 10.3594 12.376C10.2654 12.434 10.2184 12.52 10.2184 12.634C10.2184 12.746 10.2654 12.833 10.3594 12.895C10.4554 12.955 10.5924 12.985 10.7704 12.985H11.3225V15.502C11.3225 15.868 11.4855 16.051 11.8115 16.051C12.1395 16.051 12.3035 15.868 12.3035 15.502V12.985H12.9605C13.1085 12.985 13.2205 12.955 13.2965 12.895C13.3725 12.833 13.4105 12.746 13.4105 12.634Z" fill="#F76808"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#F76808"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148086">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-txt': {
+    body: `<g clip-path="url(#clip0_2931_148087)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM5.78071 12.634C5.78071 12.402 5.59671 12.286 5.22871 12.286H3.14069C2.96268 12.286 2.82568 12.316 2.72968 12.376C2.63568 12.434 2.58868 12.52 2.58868 12.634C2.58868 12.746 2.63568 12.833 2.72968 12.895C2.82568 12.955 2.96268 12.985 3.14069 12.985H3.69269V15.502C3.69269 15.868 3.85569 16.051 4.1817 16.051C4.5097 16.051 4.6737 15.868 4.6737 15.502V12.985H5.33071C5.47871 12.985 5.59071 12.955 5.66671 12.895C5.74271 12.833 5.78071 12.746 5.78071 12.634ZM6.63757 15.952C6.71557 16.022 6.82457 16.057 6.96457 16.057C7.09657 16.057 7.19657 16.022 7.26457 15.952C7.33457 15.882 7.41057 15.782 7.49257 15.652L7.99358 14.869L8.48858 15.652C8.57058 15.78 8.64559 15.88 8.71359 15.952C8.78359 16.022 8.88659 16.057 9.02259 16.057C9.15859 16.057 9.26759 16.024 9.34959 15.958C9.43359 15.892 9.47559 15.808 9.47559 15.706C9.47559 15.656 9.46659 15.605 9.44859 15.553C9.43259 15.501 9.40159 15.44 9.35559 15.37L8.54858 14.158L9.41559 12.907C9.47959 12.817 9.51159 12.723 9.51159 12.625C9.51159 12.497 9.46959 12.403 9.38559 12.343C9.30359 12.281 9.20159 12.25 9.07959 12.25C8.95159 12.25 8.84859 12.282 8.77059 12.346C8.69259 12.408 8.60458 12.52 8.50658 12.682L8.00558 13.501L7.49257 12.682C7.42657 12.576 7.36957 12.492 7.32157 12.43C7.27357 12.366 7.22057 12.32 7.16257 12.292C7.10657 12.264 7.03357 12.25 6.94357 12.25C6.82357 12.25 6.71857 12.282 6.62856 12.346C6.53856 12.41 6.49356 12.503 6.49356 12.625C6.49356 12.669 6.49856 12.714 6.50856 12.76C6.52056 12.804 6.54456 12.852 6.58056 12.904L7.45657 14.194L6.64056 15.37C6.59656 15.436 6.56556 15.493 6.54756 15.541C6.53156 15.589 6.52356 15.638 6.52356 15.688C6.52356 15.792 6.56156 15.88 6.63757 15.952ZM13.4105 12.634C13.4105 12.402 13.2265 12.286 12.8585 12.286H10.7704C10.5924 12.286 10.4554 12.316 10.3594 12.376C10.2654 12.434 10.2184 12.52 10.2184 12.634C10.2184 12.746 10.2654 12.833 10.3594 12.895C10.4554 12.955 10.5924 12.985 10.7704 12.985H11.3225V15.502C11.3225 15.868 11.4855 16.051 11.8115 16.051C12.1395 16.051 12.3035 15.868 12.3035 15.502V12.985H12.9605C13.1085 12.985 13.2205 12.955 13.2965 12.895C13.3725 12.833 13.4105 12.746 13.4105 12.634Z" fill="#696E77"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#696E77"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148087">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-xls': {
+    body: `<g clip-path="url(#clip0_2931_148085)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM2.82268 15.952C2.90068 16.022 3.00968 16.057 3.14969 16.057C3.28169 16.057 3.38169 16.022 3.44969 15.952C3.51969 15.882 3.59569 15.782 3.67769 15.652L4.1787 14.869L4.6737 15.652C4.7557 15.78 4.8307 15.88 4.8987 15.952C4.9687 16.022 5.07171 16.057 5.20771 16.057C5.34371 16.057 5.45271 16.024 5.53471 15.958C5.61871 15.892 5.66071 15.808 5.66071 15.706C5.66071 15.656 5.65171 15.605 5.63371 15.553C5.61771 15.501 5.58671 15.44 5.54071 15.37L4.7337 14.158L5.60071 12.907C5.66471 12.817 5.69671 12.723 5.69671 12.625C5.69671 12.497 5.65471 12.403 5.57071 12.343C5.48871 12.281 5.38671 12.25 5.26471 12.25C5.13671 12.25 5.0337 12.282 4.9557 12.346C4.8777 12.408 4.7897 12.52 4.6917 12.682L4.1907 13.501L3.67769 12.682C3.61169 12.576 3.55469 12.492 3.50669 12.43C3.45869 12.366 3.40569 12.32 3.34769 12.292C3.29169 12.264 3.21869 12.25 3.12869 12.25C3.00868 12.25 2.90368 12.282 2.81368 12.346C2.72368 12.41 2.67868 12.503 2.67868 12.625C2.67868 12.669 2.68368 12.714 2.69368 12.76C2.70568 12.804 2.72968 12.852 2.76568 12.904L3.64169 14.194L2.82568 15.37C2.78168 15.436 2.75068 15.493 2.73268 15.541C2.71668 15.589 2.70868 15.638 2.70868 15.688C2.70868 15.792 2.74668 15.88 2.82268 15.952ZM8.89059 15.301H7.90358V12.811C7.90358 12.441 7.73958 12.256 7.41157 12.256C7.08357 12.256 6.91957 12.441 6.91957 12.811V15.448C6.91957 15.816 7.10357 16 7.47157 16H8.89059C9.06859 16 9.20459 15.97 9.29859 15.91C9.39459 15.85 9.44259 15.764 9.44259 15.652C9.44259 15.54 9.39459 15.454 9.29859 15.394C9.20459 15.332 9.06859 15.301 8.89059 15.301ZM11.0465 15.961C11.2705 16.029 11.5275 16.063 11.8175 16.063C12.1335 16.063 12.4125 16.016 12.6545 15.922C12.8965 15.828 13.0855 15.695 13.2215 15.523C13.3575 15.349 13.4255 15.145 13.4255 14.911C13.4255 14.685 13.3675 14.498 13.2515 14.35C13.1355 14.202 12.9755 14.081 12.7715 13.987C12.5695 13.893 12.3365 13.814 12.0725 13.75C11.8085 13.684 11.6125 13.614 11.4845 13.54C11.3585 13.466 11.2955 13.378 11.2955 13.276C11.2955 13.21 11.3175 13.153 11.3615 13.105C11.4055 13.055 11.4675 13.017 11.5475 12.991C11.6275 12.963 11.7195 12.949 11.8235 12.949C11.9655 12.949 12.0855 12.971 12.1835 13.015C12.2815 13.059 12.3585 13.114 12.4145 13.18C12.4665 13.23 12.5335 13.284 12.6155 13.342C12.6975 13.4 12.7955 13.429 12.9095 13.429C13.0255 13.429 13.1185 13.396 13.1885 13.33C13.2605 13.262 13.2965 13.17 13.2965 13.054C13.2965 12.956 13.2715 12.868 13.2215 12.79C13.1715 12.712 13.1055 12.644 13.0235 12.586C12.8855 12.476 12.7135 12.393 12.5075 12.337C12.3015 12.279 12.0885 12.25 11.8685 12.25C11.5705 12.25 11.3025 12.292 11.0645 12.376C10.8285 12.46 10.6414 12.58 10.5034 12.736C10.3654 12.892 10.2964 13.077 10.2964 13.291C10.2964 13.581 10.4024 13.83 10.6144 14.038C10.8285 14.246 11.1735 14.404 11.6495 14.512C11.9115 14.572 12.1065 14.633 12.2345 14.695C12.3625 14.755 12.4265 14.849 12.4265 14.977C12.4265 15.057 12.4005 15.126 12.3485 15.184C12.2965 15.242 12.2255 15.287 12.1355 15.319C12.0475 15.349 11.9475 15.364 11.8355 15.364C11.6695 15.364 11.5325 15.332 11.4245 15.268C11.3165 15.204 11.2215 15.13 11.1395 15.046C11.0695 14.98 10.9945 14.922 10.9145 14.872C10.8345 14.822 10.7364 14.797 10.6204 14.797C10.4844 14.797 10.3844 14.839 10.3204 14.923C10.2564 15.007 10.2244 15.093 10.2244 15.181C10.2244 15.377 10.3184 15.545 10.5064 15.685C10.6444 15.799 10.8245 15.891 11.0465 15.961Z" fill="#29A383"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#29A383"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148085">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-zip': {
+    body: `<g clip-path="url(#clip0_2931_148090)">
+    <path d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H3V2H2.5C2.22386 2 2 2.22386 2 2.5C2 2.77614 2.22386 3 2.5 3H3V4H2.5C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H3V6H2.5C2.22386 6 2 6.22386 2 6.5C2 6.77614 2.22386 7 2.5 7H3V8H2.5C2.22386 8 2 8.22386 2 8.5C2 8.77614 2.22386 9 2.5 9H3V10H2.5C2.22386 10 2 10.2239 2 10.5C2 10.7761 2.22386 11 2.5 11H3V12H2.5C2.22386 12 2 12.2239 2 12.5C2 12.7761 2.22386 13 2.5 13H3V14H2.75C2.33579 14 2 14.3358 2 14.75V15.5C2 16.3284 2.67157 17 3.5 17C4.32843 17 5 16.3284 5 15.5V14.75C5 14.3358 4.66421 14 4.25 14H4V13H4.5C4.77614 13 5 12.7761 5 12.5C5 12.2239 4.77614 12 4.5 12H4V11H4.5C4.77614 11 5 10.7761 5 10.5C5 10.2239 4.77614 10 4.5 10H4V9H4.5C4.77614 9 5 8.77614 5 8.5C5 8.22386 4.77614 8 4.5 8H4V7H4.5C4.77614 7 5 6.77614 5 6.5C5 6.22386 4.77614 6 4.5 6H4V5H4.5C4.77614 5 5 4.77614 5 4.5C5 4.22386 4.77614 4 4.5 4H4V3H4.5C4.77614 3 5 2.77614 5 2.5C5 2.22386 4.77614 2 4.5 2H4V0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578Z" fill="#6958AD"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#6958AD"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148090">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+};

From 9220afce6e75b528cca85e7cd5764e0bc1e616da Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:13:16 +0530
Subject: [PATCH 64/74] feat: Insert captain response to reply editor (#10581)

---
 .../components-next/copilot/Copilot.vue       |  9 +++--
 .../copilot/CopilotAssistantMessage.vue       | 35 ++++++++++++++++++-
 .../components/copilot/CopilotContainer.vue   |  5 +++
 .../conversation/ConversationSidebar.vue      |  9 +++--
 .../widgets/conversation/ReplyBox.vue         |  2 ++
 .../i18n/locale/en/integrations.json          |  3 +-
 app/javascript/shared/constants/busEvents.js  |  1 +
 7 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.vue b/app/javascript/dashboard/components-next/copilot/Copilot.vue
index 3839532f2..2fcb15bcc 100644
--- a/app/javascript/dashboard/components-next/copilot/Copilot.vue
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.vue
@@ -18,6 +18,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
 });
 
 const emit = defineEmits(['sendMessage']);
@@ -47,7 +51,7 @@ watch(
 
 <template>
   <div class="flex flex-col ]mx-auto h-full text-sm leading-6 tracking-tight">
-    <div ref="chatContainer" class="flex-1 overflow-y-auto py-4 space-y-6 px-4">
+    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
       <template v-for="message in messages" :key="message.id">
         <CopilotAgentMessage
           v-if="message.role === 'user'"
@@ -57,12 +61,13 @@ watch(
         <CopilotAssistantMessage
           v-else-if="COPILOT_USER_ROLES.includes(message.role)"
           :message="message"
+          :conversation-inbox-type="conversationInboxType"
         />
       </template>
 
       <CopilotLoader v-if="isCaptainTyping" />
     </div>
 
-    <CopilotInput class="mx-3 mb-4 mt-px" @send="sendMessage" />
+    <CopilotInput class="mx-3 mt-px mb-4" @send="sendMessage" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue b/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
index a14508150..dd9d1defd 100644
--- a/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
@@ -1,12 +1,36 @@
 <script setup>
+import { computed } from 'vue';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from '../avatar/Avatar.vue';
 
-defineProps({
+const props = defineProps({
   message: {
     type: Object,
     required: true,
   },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
 });
+
+const insertIntoRichEditor = computed(() => {
+  return [INBOX_TYPES.WEB, INBOX_TYPES.EMAIL].includes(
+    props.conversationInboxType
+  );
+});
+
+const useCopilotResponse = () => {
+  if (insertIntoRichEditor.value) {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
+  } else {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, props.message?.content);
+  }
+};
 </script>
 
 <template>
@@ -22,6 +46,15 @@ defineProps({
       <div class="break-words">
         {{ message.content }}
       </div>
+      <div class="flex flex-row mt-1">
+        <Button
+          :label="$t('CAPTAIN.COPILOT.USE')"
+          faded
+          sm
+          slate
+          @click="useCopilotResponse"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/copilot/CopilotContainer.vue b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
index 940408ef8..443a79ebf 100644
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -8,6 +8,10 @@ const props = defineProps({
     type: [Number, String],
     required: true,
   },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
 });
 const currentUser = useMapGetter('getCurrentUser');
 const messages = ref([]);
@@ -53,6 +57,7 @@ const sendMessage = async message => {
     :messages="messages"
     :support-agent="currentUser"
     :is-captain-typing="isCaptainTyping"
+    :conversation-inbox-type="conversationInboxType"
     @send-message="sendMessage"
   />
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index 3d2509686..a0b07d44b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -6,7 +6,7 @@ import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.v
 import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import { useI18n } from 'vue-i18n';
 
-defineProps({
+const props = defineProps({
   currentChat: {
     required: true,
     type: Object,
@@ -16,11 +16,13 @@ defineProps({
 const emit = defineEmits(['toggleContactPanel']);
 
 const getters = useStoreGetters();
+const { t } = useI18n();
 
 const captainIntegration = computed(() =>
   getters['integrations/getIntegration'].value('captain', null)
 );
-const { t } = useI18n();
+
+const channelType = computed(() => props.currentChat?.meta?.channel || '');
 
 const CONTACT_TABS_OPTIONS = [
   { key: 'CONTACT', value: 'contact' },
@@ -61,7 +63,7 @@ const showCopilotTab = computed(() => {
         @tab-changed="handleTabChange"
       />
     </div>
-    <div class="overflow-auto flex flex-1">
+    <div class="flex flex-1 overflow-auto">
       <ContactPanel
         v-if="!activeTab"
         :conversation-id="currentChat.id"
@@ -71,6 +73,7 @@ const showCopilotTab = computed(() => {
       <CopilotContainer
         v-else-if="activeTab === 1 && showCopilotTab"
         :key="currentChat.id"
+        :conversation-inbox-type="channelType"
         :conversation-id="currentChat.id"
         class="flex-1"
       />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 3d490894a..235dfdae3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -459,11 +459,13 @@ export default {
       BUS_EVENTS.NEW_CONVERSATION_MODAL,
       this.onNewConversationModalActive
     );
+    emitter.on(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, this.addIntoEditor);
   },
   unmounted() {
     document.removeEventListener('paste', this.onPaste);
     document.removeEventListener('keydown', this.handleKeyEvents);
     emitter.off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
+    emitter.off(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, this.addIntoEditor);
     emitter.off(
       BUS_EVENTS.NEW_CONVERSATION_MODAL,
       this.onNewConversationModalActive
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index e04164902..c96735ab8 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -305,7 +305,8 @@
     "COPILOT": {
       "SEND_MESSAGE": "Send message...",
       "LOADER": "Captain is thinking",
-      "YOU": "You"
+      "YOU": "You",
+      "USE": "Use this"
     }
   }
 }
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index 2229a8b4c..8ae15c3f8 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -14,4 +14,5 @@ export const BUS_EVENTS = {
   SHOW_TOAST: 'newToastMessage',
   NEW_CONVERSATION_MODAL: 'newConversationModal',
   INSERT_INTO_RICH_EDITOR: 'insertIntoRichEditor',
+  INSERT_INTO_NORMAL_EDITOR: 'insertIntoNormalEditor',
 };

From 9410b3bcbbb7aba4b790f33bea52a430bf69466c Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Mon, 16 Dec 2024 16:53:01 +0530
Subject: [PATCH 65/74] feat: add multiarch arm64 support in ce docker images
 (#10582)

---
 .github/workflows/publish_foss_docker.yml | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/publish_foss_docker.yml b/.github/workflows/publish_foss_docker.yml
index d48b82a58..732b22a28 100644
--- a/.github/workflows/publish_foss_docker.yml
+++ b/.github/workflows/publish_foss_docker.yml
@@ -12,6 +12,7 @@ on:
       - master
     tags:
       - v*
+# pull_request:
   workflow_dispatch:
 
 jobs:
@@ -40,7 +41,9 @@ jobs:
 
       - name: set docker tag
         run: |
-          echo "DOCKER_TAG=chatwoot/chatwoot:$GIT_REF-ce" >> $GITHUB_ENV
+          # Replace forward slashes with hyphens in the ref name
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          echo "DOCKER_TAG=chatwoot/chatwoot:$SANITIZED_REF-ce" >> $GITHUB_ENV
 
       - name: replace docker tag if master
         if: github.ref_name == 'master'
@@ -48,6 +51,7 @@ jobs:
           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@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -58,6 +62,6 @@ jobs:
         with:
           context: .
           file: docker/Dockerfile
-          platforms: linux/amd64
-          push: true
+          platforms: linux/amd64, linux/arm64
+          push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
           tags: ${{ env.DOCKER_TAG }}

From e3109dbb22746ebc2668444e2471251f871dcb1d Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Tue, 17 Dec 2024 16:31:55 +0530
Subject: [PATCH 66/74] chore: pin bundler version to 2.5.x in circleci
 (#10596)

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 459faf1c8..b8a628677 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -74,7 +74,7 @@ jobs:
             source ~/.rvm/scripts/rvm
             rvm install "3.3.3"
             rvm use 3.3.3 --default
-            gem install bundler
+            gem install bundler -v 2.5.16
 
       - run:
           name: Install Application Dependencies

From b34dac7bbe3c910186083b680e51aad5ea60b44b Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 17 Dec 2024 17:16:37 +0530
Subject: [PATCH 67/74] feat: validate query conditions (#10595)

Query conditions can take in arbitrary values, this can cause SQL
errors. This PR fixes it
---
 .../api/v1/accounts/contacts_controller.rb    |  1 +
 .../v1/accounts/conversations_controller.rb   |  1 +
 app/helpers/filter_helper.rb                  |  8 +++++++
 app/models/automation_rule.rb                 | 19 +++++++++++++++
 .../condition_validation_service.rb           | 11 ++++++++-
 app/services/contacts/filter_service.rb       |  1 +
 app/services/conversations/filter_service.rb  |  1 +
 app/services/filter_service.rb                |  6 +++++
 config/locales/en.yml                         |  1 +
 lib/custom_exceptions/custom_filter.rb        |  6 +++++
 .../automation_rules_controller_spec.rb       | 17 +++++++++++++
 .../condition_validation_service_spec.rb      | 11 +++++++++
 spec/services/contacts/filter_service_spec.rb | 13 ++++++++++
 .../conversations/filter_service_spec.rb      | 24 +++++++++++++++++++
 14 files changed, 119 insertions(+), 1 deletion(-)

diff --git a/app/controllers/api/v1/accounts/contacts_controller.rb b/app/controllers/api/v1/accounts/contacts_controller.rb
index 0d8e0ed93..0e024b3d8 100644
--- a/app/controllers/api/v1/accounts/contacts_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -68,6 +68,7 @@ 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
diff --git a/app/controllers/api/v1/accounts/conversations_controller.rb b/app/controllers/api/v1/accounts/conversations_controller.rb
index 2aedf1928..2cd5281ff 100644
--- a/app/controllers/api/v1/accounts/conversations_controller.rb
+++ b/app/controllers/api/v1/accounts/conversations_controller.rb
@@ -46,6 +46,7 @@ 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
diff --git a/app/helpers/filter_helper.rb b/app/helpers/filter_helper.rb
index bce2de5ea..9b5cac684 100644
--- a/app/helpers/filter_helper.rb
+++ b/app/helpers/filter_helper.rb
@@ -81,4 +81,12 @@ 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
diff --git a/app/models/automation_rule.rb b/app/models/automation_rule.rb
index 9f7da28a0..258c5c0a3 100644
--- a/app/models/automation_rule.rb
+++ b/app/models/automation_rule.rb
@@ -27,6 +27,7 @@ class AutomationRule < ApplicationRecord
   validate :json_conditions_format
   validate :json_actions_format
   validate :query_operator_presence
+  validate :query_operator_value
   validates :account_id, presence: true
 
   after_update_commit :reauthorized!, if: -> { saved_change_to_conditions? }
@@ -83,6 +84,24 @@ class AutomationRule < ApplicationRecord
     operators = conditions.select { |obj, _| obj['query_operator'].nil? }
     errors.add(:conditions, 'Automation conditions should have query operator.') if operators.length > 1
   end
+
+  # This validation ensures logical operators are being used correctly in automation conditions.
+  # And we don't push any unsanitized query operators to the database.
+  def query_operator_value
+    conditions.each do |obj|
+      validate_single_condition(obj)
+    end
+  end
+
+  def validate_single_condition(condition)
+    query_operator = condition['query_operator']
+
+    return if query_operator.nil?
+    return if query_operator.empty?
+
+    operator = query_operator.upcase
+    errors.add(:conditions, 'Query operator must be either "AND" or "OR"') unless %w[AND OR].include?(operator)
+  end
 end
 
 AutomationRule.include_mod_with('Audit::AutomationRule')
diff --git a/app/services/automation_rules/condition_validation_service.rb b/app/services/automation_rules/condition_validation_service.rb
index 63e58b5bc..f1462e667 100644
--- a/app/services/automation_rules/condition_validation_service.rb
+++ b/app/services/automation_rules/condition_validation_service.rb
@@ -15,7 +15,7 @@ class AutomationRules::ConditionValidationService
 
   def perform
     @rule.conditions.each do |condition|
-      return false unless valid_condition?(condition)
+      return false unless valid_condition?(condition) && valid_query_operator?(condition)
     end
 
     true
@@ -23,6 +23,15 @@ class AutomationRules::ConditionValidationService
 
   private
 
+  def valid_query_operator?(condition)
+    query_operator = condition['query_operator']
+
+    return true if query_operator.nil?
+    return true if query_operator.empty?
+
+    %w[AND OR].include?(query_operator.upcase)
+  end
+
   def valid_condition?(condition)
     key = condition['attribute_key']
 
diff --git a/app/services/contacts/filter_service.rb b/app/services/contacts/filter_service.rb
index 973dc4b40..7f2d6a0b8 100644
--- a/app/services/contacts/filter_service.rb
+++ b/app/services/contacts/filter_service.rb
@@ -9,6 +9,7 @@ class Contacts::FilterService < FilterService
   end
 
   def perform
+    validate_query_operator
     @contacts = query_builder(@filters['contacts'])
 
     {
diff --git a/app/services/conversations/filter_service.rb b/app/services/conversations/filter_service.rb
index 3a06959b8..d5156b531 100644
--- a/app/services/conversations/filter_service.rb
+++ b/app/services/conversations/filter_service.rb
@@ -7,6 +7,7 @@ class Conversations::FilterService < FilterService
   end
 
   def perform
+    validate_query_operator
     @conversations = query_builder(@filters['conversations'])
     mine_count, unassigned_count, all_count, = set_count_for_all_conversations
     assigned_count = all_count - unassigned_count
diff --git a/app/services/filter_service.rb b/app/services/filter_service.rb
index c545ac7d8..23cc0e188 100644
--- a/app/services/filter_service.rb
+++ b/app/services/filter_service.rb
@@ -204,4 +204,10 @@ class FilterService
     end
     base_relation.where(@query_string, @filter_values.with_indifferent_access)
   end
+
+  def validate_query_operator
+    @params[:payload].each do |query_hash|
+      validate_single_condition(query_hash)
+    end
+  end
 end
diff --git a/config/locales/en.yml b/config/locales/en.yml
index dd7b07bcf..9ff3fa320 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -80,6 +80,7 @@ en:
       number_of_records: Limit reached. The maximum number of allowed custom filters for a user per account is 50.
       invalid_attribute: Invalid attribute key - [%{key}]. The key should be one of [%{allowed_keys}] or a custom attribute defined in the account.
       invalid_operator: Invalid operator. The allowed operators for %{attribute_name} are [%{allowed_keys}].
+      invalid_query_operator: Query operator must be either "AND" or "OR".
       invalid_value: Invalid value. The values provided for %{attribute_name} are invalid
   reports:
     period: Reporting period %{since} to %{until}
diff --git a/lib/custom_exceptions/custom_filter.rb b/lib/custom_exceptions/custom_filter.rb
index 03ff9ec7a..8093b3612 100644
--- a/lib/custom_exceptions/custom_filter.rb
+++ b/lib/custom_exceptions/custom_filter.rb
@@ -11,6 +11,12 @@ module CustomExceptions::CustomFilter
     end
   end
 
+  class InvalidQueryOperator < CustomExceptions::Base
+    def message
+      I18n.t('errors.custom_filters.invalid_query_operator')
+    end
+  end
+
   class InvalidValue < CustomExceptions::Base
     def message
       I18n.t('errors.custom_filters.invalid_value', attribute_name: @data[:attribute_name])
diff --git a/spec/controllers/api/v1/accounts/automation_rules_controller_spec.rb b/spec/controllers/api/v1/accounts/automation_rules_controller_spec.rb
index e9858844a..35ff53b12 100644
--- a/spec/controllers/api/v1/accounts/automation_rules_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/automation_rules_controller_spec.rb
@@ -76,6 +76,23 @@ RSpec.describe 'Api::V1::Accounts::AutomationRulesController', type: :request do
         }
       end
 
+      it 'processes invalid query operator' do
+        expect(account.automation_rules.count).to eq(0)
+        params[:conditions] << {
+          'attribute_key': 'browser_language',
+          'filter_operator': 'equal_to',
+          'values': ['en'],
+          'query_operator': 'invalid'
+        }
+
+        post "/api/v1/accounts/#{account.id}/automation_rules",
+             headers: administrator.create_new_auth_token,
+             params: params
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(account.automation_rules.count).to eq(0)
+      end
+
       it 'throws an error for unknown attributes in condtions' do
         expect(account.automation_rules.count).to eq(0)
         params[:conditions] << {
diff --git a/spec/services/automation_rules/condition_validation_service_spec.rb b/spec/services/automation_rules/condition_validation_service_spec.rb
index c1c380780..36387754a 100644
--- a/spec/services/automation_rules/condition_validation_service_spec.rb
+++ b/spec/services/automation_rules/condition_validation_service_spec.rb
@@ -46,6 +46,17 @@ RSpec.describe AutomationRules::ConditionValidationService do
       end
     end
 
+    context 'with wrong query operator' do
+      before do
+        rule.conditions = [{ 'values': ['open'], 'attribute_key': 'status', 'query_operator': 'invalid', 'filter_operator': 'attribute_changed' }]
+        rule.save
+      end
+
+      it 'returns false' do
+        expect(described_class.new(rule).perform).to be(false)
+      end
+    end
+
     context 'with "attribute_changed" filter operator' do
       before do
         rule.conditions = [
diff --git a/spec/services/contacts/filter_service_spec.rb b/spec/services/contacts/filter_service_spec.rb
index 483555a0c..22882ae81 100644
--- a/spec/services/contacts/filter_service_spec.rb
+++ b/spec/services/contacts/filter_service_spec.rb
@@ -146,6 +146,19 @@ describe Contacts::FilterService do
         expect(result[:contacts].length).to be 1
         expect(result[:contacts].first.id).to eq el_contact.id
       end
+
+      it 'handles invalid query conditions' do
+        params[:payload] = [
+          {
+            attribute_key: 'labels',
+            filter_operator: 'is_not_present',
+            values: [],
+            query_operator: 'INVALID'
+          }.with_indifferent_access
+        ]
+
+        expect { filter_service.new(account, first_user, params).perform }.to raise_error(CustomExceptions::CustomFilter::InvalidQueryOperator)
+      end
     end
 
     context 'with standard attributes - last_activity_at' do
diff --git a/spec/services/conversations/filter_service_spec.rb b/spec/services/conversations/filter_service_spec.rb
index 2fbaf5f61..45e5be143 100644
--- a/spec/services/conversations/filter_service_spec.rb
+++ b/spec/services/conversations/filter_service_spec.rb
@@ -185,6 +185,30 @@ describe Conversations::FilterService do
         expect(result[:count][:all_count]).to be 2
         expect(result[:conversations].pluck(:campaign_id).sort).to eq [campaign_2.id, campaign_1.id].sort
       end
+
+      it 'handles invalid query conditions' do
+        params[:payload] = [
+          {
+            attribute_key: 'assignee_id',
+            filter_operator: 'equal_to',
+            values: [
+              user_1.id,
+              user_2.id
+            ],
+            query_operator: 'INVALID',
+            custom_attribute_type: ''
+          }.with_indifferent_access,
+          {
+            attribute_key: 'campaign_id',
+            filter_operator: 'is_present',
+            values: [],
+            query_operator: nil,
+            custom_attribute_type: ''
+          }.with_indifferent_access
+        ]
+
+        expect { filter_service.new(params, user_1).perform }.to raise_error(CustomExceptions::CustomFilter::InvalidQueryOperator)
+      end
     end
   end
 

From 1d88e0dd2851ae2ac948ca9d4d633c4fb6e700d8 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 17 Dec 2024 17:16:50 +0530
Subject: [PATCH 68/74] fix: Contact form breaks if name is empty (#10597)

- Handles the case where the form and contact display page breaks if
name is `null`
---
 .../components-next/Contacts/ContactsForm/ContactsForm.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index a49236cb1..9d172cdf9 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -94,7 +94,7 @@ const prepareStateBasedOnProps = () => {
     phoneNumber,
     additionalAttributes = {},
   } = props.contactData || {};
-  const { firstName, lastName } = splitName(name);
+  const { firstName, lastName } = splitName(name || '');
   const {
     description = '',
     companyName = '',

From d69571f6f8b63c66bbbc1c94287b5095be23c6f2 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Tue, 17 Dec 2024 03:47:11 -0800
Subject: [PATCH 69/74] fix: Update old data to fix login issues (#10594)

The following lines caused issues for some users, specifically those who
signed up in 2021 when audio alerts were implemented as a flag. The data
type update for the flag was not handled correctly. This PR fixes the
issue by updating it to a compatible value.


https://github.com/chatwoot/chatwoot/blob/9410b3bcbbb7aba4b790f33bea52a430bf69466c/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js#L76-L81
---
 .../20241217041352_fix_old_audio_alert_data.rb | 18 ++++++++++++++++++
 db/schema.rb                                   |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 db/migrate/20241217041352_fix_old_audio_alert_data.rb

diff --git a/db/migrate/20241217041352_fix_old_audio_alert_data.rb b/db/migrate/20241217041352_fix_old_audio_alert_data.rb
new file mode 100644
index 000000000..7a069d24f
--- /dev/null
+++ b/db/migrate/20241217041352_fix_old_audio_alert_data.rb
@@ -0,0 +1,18 @@
+class FixOldAudioAlertData < ActiveRecord::Migration[7.0]
+  def change
+    # rubocop:disable Rails/SkipsModelValidations
+
+    # Update users with audio alerts enabled to 'mine'
+    User.where(
+      "users.ui_settings #>> '{enable_audio_alerts}' = ?", 'true'
+    ).update_all(
+      "ui_settings = jsonb_set(ui_settings, '{enable_audio_alerts}', '\"mine\"')"
+    )
+
+    # Update users with audio alerts enabled to 'none'
+    User
+      .where("users.ui_settings #>> '{enable_audio_alerts}' = ?", 'true')
+      .update_all("ui_settings = jsonb_set(ui_settings, '{enable_audio_alerts}', '\"mine\"')")
+    # rubocop:enable Rails/SkipsModelValidations
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index abb14d1e9..63c889e3b 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2024_09_23_215335) do
+ActiveRecord::Schema[7.0].define(version: 2024_12_17_041352) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"

From 932244a1ec5bd0b06ed0a06c0658ede08f5654dd Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 17 Dec 2024 17:17:42 +0530
Subject: [PATCH 70/74] feat: Add support for Arcade videos on articles
 (#10585)

Fixes
https://linear.app/chatwoot/issue/CW-3779/add-support-for-arcade-videos-on-articles-loom-alternative

**Loom video**

https://www.loom.com/share/917bdecb4eaf4d3f9782b4fa84ee4bd4?sid=d11f0d71-0cf5-424a-9268-9d9fb3797ee2


Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 lib/custom_markdown_renderer.rb           | 23 ++++++++++++++++++-
 spec/lib/custom_markdown_renderer_spec.rb | 28 +++++++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/lib/custom_markdown_renderer.rb b/lib/custom_markdown_renderer.rb
index 0cab0cdf9..dfd3ce700 100644
--- a/lib/custom_markdown_renderer.rb
+++ b/lib/custom_markdown_renderer.rb
@@ -1,8 +1,11 @@
 class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
+  # TODO: let move this regex from here to a config file where we can update this list much more easily
+  # the config file will also have the matching embed template as well.
   YOUTUBE_REGEX = %r{https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)([^&/]+)}
   LOOM_REGEX = %r{https?://(?:www\.)?loom\.com/share/([^&/]+)}
   VIMEO_REGEX = %r{https?://(?:www\.)?vimeo\.com/(\d+)}
   MP4_REGEX = %r{https?://(?:www\.)?.+\.(mp4)}
+  ARCADE_REGEX = %r{https?://(?:www\.)?app\.arcade\.software/share/([^&/]+)}
 
   def text(node)
     content = node.string_content
@@ -46,7 +49,8 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
       YOUTUBE_REGEX => :make_youtube_embed,
       VIMEO_REGEX => :make_vimeo_embed,
       MP4_REGEX => :make_video_embed,
-      LOOM_REGEX => :make_loom_embed
+      LOOM_REGEX => :make_loom_embed,
+      ARCADE_REGEX => :make_arcade_embed
     }
 
     embedding_methods.each do |regex, method|
@@ -118,4 +122,21 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
       </video>
     )
   end
+
+  def make_arcade_embed(arcade_match)
+    video_id = arcade_match[1]
+    %(
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+      <iframe
+        src="https://app.arcade.software/embed/#{video_id}"
+        frameborder="0"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen
+        allow="fullscreen"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </iframe>
+    </div>
+  )
+  end
 end
diff --git a/spec/lib/custom_markdown_renderer_spec.rb b/spec/lib/custom_markdown_renderer_spec.rb
index 74c6d4398..70593f308 100644
--- a/spec/lib/custom_markdown_renderer_spec.rb
+++ b/spec/lib/custom_markdown_renderer_spec.rb
@@ -137,5 +137,33 @@ describe CustomMarkdownRenderer do
         expect(output).to include('src="https://player.vimeo.com/video/1234567"')
       end
     end
+
+    context 'when link is an Arcade URL' do
+      let(:arcade_url) { 'https://app.arcade.software/share/ARCADE_ID' }
+
+      it 'renders an iframe with Arcade embed code' do
+        output = render_markdown_link(arcade_url)
+        expect(output).to include('src="https://app.arcade.software/embed/ARCADE_ID"')
+        expect(output).to include('<iframe')
+        expect(output).to include('webkitallowfullscreen')
+        expect(output).to include('mozallowfullscreen')
+        expect(output).to include('allowfullscreen')
+      end
+
+      it 'wraps iframe in responsive container' do
+        output = render_markdown_link(arcade_url)
+        expect(output).to include('position: relative; padding-bottom: 62.5%; height: 0;')
+        expect(output).to include('position: absolute; top: 0; left: 0; width: 100%; height: 100%;')
+      end
+    end
+
+    context 'when multiple links including Arcade are present' do
+      it 'renders Arcade embed along with other content types' do
+        markdown = "\n[arcade](https://app.arcade.software/share/ARCADE_ID)\n\n[youtube](https://www.youtube.com/watch?v=VIDEO_ID)\n"
+        output = render_markdown(markdown)
+        expect(output).to include('src="https://app.arcade.software/embed/ARCADE_ID"')
+        expect(output).to include('src="https://www.youtube.com/embed/VIDEO_ID"')
+      end
+    end
   end
 end

From 96ae298464ca74352e14a4f7e340b27829238760 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Tr=E1=BA=A7n=20Chung?=
 <nguyentranchung52th@gmail.com>
Date: Tue, 17 Dec 2024 20:50:44 +0900
Subject: [PATCH 71/74] fix: Dotenv::Railtie is deprecated (#10515)

https://github.com/bkeepers/dotenv/pull/468

Renames Dotenv::Railtie => Dotenv::Rails

Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 config/application.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/application.rb b/config/application.rb
index f3443ddb3..e60697178 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -11,7 +11,7 @@ Bundler.require(*Rails.groups)
 ## Load the specific APM agent
 # We rely on DOTENV to load the environment variables
 # We need these environment variables to load the specific APM agent
-Dotenv::Railtie.load
+Dotenv::Rails.load
 require 'ddtrace' if ENV.fetch('DD_TRACE_AGENT_URL', false).present?
 require 'elastic-apm' if ENV.fetch('ELASTIC_APM_SECRET_TOKEN', false).present?
 require 'scout_apm' if ENV.fetch('SCOUT_KEY', false).present?

From 6b348da807ef62399a4b20968bb1a2dfd280242f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 17 Dec 2024 18:07:58 +0530
Subject: [PATCH 72/74] feat(v4): Compose a new conversation from a phone
 number. (#10568)

---
 .../components/ContactSelector.vue            |  20 +-
 .../helpers/composeConversationHelper.js      |   8 +-
 .../specs/composeConversationHelper.spec.js   |  22 ++
 .../components-next/taginput/TagInput.vue     | 133 ++++----
 .../helper/spec/tagInputHelper.spec.js        | 299 ++++++++++++++++++
 .../taginput/helper/tagInputHelper.js         | 124 ++++++++
 6 files changed, 528 insertions(+), 78 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js
 create mode 100644 app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js

diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
index 33a2f8f20..7ff0a2efa 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
@@ -1,9 +1,11 @@
 <script setup>
-import { computed } from 'vue';
+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,
@@ -42,15 +44,19 @@ const props = defineProps({
     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,
@@ -80,6 +86,14 @@ const errorClass = computed(() => {
     ? '[&_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>
@@ -126,11 +140,11 @@ const errorClass = computed(() => {
         :is-loading="isLoading"
         :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
         allow-create
-        type="email"
+        :type="inputType"
         class="flex-1 min-h-7"
         :class="errorClass"
         focus-on-mount
-        @input="emit('searchContacts', $event)"
+        @input="handleInput"
         @on-click-outside="emit('updateDropdown', 'contacts', false)"
         @add="emit('setSelectedContact', $event)"
         @remove="emit('clearSelectedContact')"
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
index 12a5e76b3..c5d3c6264 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -193,10 +193,12 @@ export const searchContacts = async ({ keys, query }) => {
   return filteredPayload || [];
 };
 
-export const createNewContact = async email => {
+export const createNewContact = async input => {
   const payload = {
-    name: getCapitalizedNameFromEmail(email),
-    email,
+    name: input.startsWith('+')
+      ? input.slice(1) // Remove the '+' prefix if it exists
+      : getCapitalizedNameFromEmail(input),
+    ...(input.startsWith('+') ? { phone_number: input } : { email: input }),
   };
 
   const {
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
index 5a2d0092d..9307e657c 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -429,6 +429,28 @@ describe('composeConversationHelper', () => {
           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', () => {
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 63d757415..8988201fb 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -1,16 +1,24 @@
 <script setup>
 import { ref, computed, watch } from 'vue';
 import { vOnClickOutside } from '@vueuse/components';
-import { email } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import {
+  MODE,
+  INPUT_TYPES,
+  getValidationRules,
+  checkTagTypeValidity,
+  buildTagMenuItems,
+  canAddTag,
+  findMatchingMenuItem,
+} from './helper/tagInputHelper';
 
 const props = defineProps({
   placeholder: { type: String, default: '' },
   disabled: { type: Boolean, default: false },
-  type: { type: String, default: 'text' },
+  type: { type: String, default: INPUT_TYPES.TEXT },
   isLoading: { type: Boolean, default: false },
   menuItems: {
     type: Array,
@@ -23,8 +31,8 @@ const props = defineProps({
   showDropdown: { type: Boolean, default: false },
   mode: {
     type: String,
-    default: 'multiple',
-    validator: value => ['single', 'multiple'].includes(value),
+    default: MODE.MULTIPLE,
+    validator: value => [MODE.SINGLE, MODE.MULTIPLE].includes(value),
   },
   focusOnMount: { type: Boolean, default: false },
   allowCreate: { type: Boolean, default: false },
@@ -45,22 +53,17 @@ const modelValue = defineModel({
   default: () => [],
 });
 
-const MODE = {
-  SINGLE: 'single',
-  MULTIPLE: 'multiple',
-};
-
 const tagInputRef = ref(null);
 const tags = ref(props.modelValue);
 const newTag = ref('');
 const isFocused = ref(true);
 
-const rules = computed(() => ({
-  newTag: props.type === 'email' ? { email } : {},
-}));
-
+const rules = computed(() => getValidationRules(props.type));
 const v$ = useVuelidate(rules, { newTag });
-const isNewTagInValidType = computed(() => v$.value.$invalid);
+
+const isNewTagInValidType = computed(() =>
+  checkTagTypeValidity(props.type, newTag.value, v$.value)
+);
 
 const showInput = computed(() =>
   props.mode === MODE.SINGLE
@@ -74,68 +77,49 @@ const showDropdownMenu = computed(() =>
     : props.showDropdown
 );
 
-const filteredMenuItems = computed(() => {
-  if (props.mode === MODE.SINGLE && tags.value.length >= 1) return [];
-
-  const availableMenuItems = props.menuItems.filter(
-    item => !tags.value.includes(item.label)
-  );
-
-  // Show typed value as suggestion only if:
-  // 1. There's a value being typed
-  // 2. The value isn't already in the tags
-  // 3. Email validation passes (if type is email) and There are no menu items available
-  const trimmedNewTag = newTag.value?.trim();
-  const shouldShowTypedValue =
-    trimmedNewTag &&
-    !tags.value.includes(trimmedNewTag) &&
-    !props.isLoading &&
-    !availableMenuItems.length &&
-    (props.type === 'email' ? !isNewTagInValidType.value : true);
-
-  if (shouldShowTypedValue) {
-    return [
-      {
-        label: trimmedNewTag,
-        value: trimmedNewTag,
-        email: trimmedNewTag,
-        thumbnail: { name: trimmedNewTag, src: '' },
-        action: 'create',
-      },
-    ];
-  }
-
-  return availableMenuItems;
-});
-
-const emitDataOnAdd = emailValue => {
-  const matchingMenuItem = props.menuItems.find(
-    item => item.email === emailValue
-  );
+const filteredMenuItems = computed(() =>
+  buildTagMenuItems({
+    mode: props.mode,
+    tags: tags.value,
+    menuItems: props.menuItems,
+    newTag: newTag.value,
+    isLoading: props.isLoading,
+    type: props.type,
+    isNewTagInValidType: isNewTagInValidType.value,
+  })
+);
 
+const emitDataOnAdd = value => {
+  const matchingMenuItem = findMatchingMenuItem(props.menuItems, value);
   return matchingMenuItem
-    ? emit('add', { email: emailValue, ...matchingMenuItem })
-    : emit('add', { value: emailValue, action: 'create' });
+    ? emit('add', { value: value, ...matchingMenuItem })
+    : emit('add', { value: value, action: 'create' });
+};
+
+const updateValueAndFocus = value => {
+  tags.value.push(value);
+  newTag.value = '';
+  modelValue.value = tags.value;
+  tagInputRef.value?.focus();
 };
 
 const addTag = async () => {
   const trimmedTag = newTag.value?.trim();
   if (!trimmedTag) return;
 
-  if (props.mode === MODE.SINGLE && tags.value.length >= 1) {
+  if (!canAddTag(props.mode, tags.value.length)) {
     newTag.value = '';
     return;
   }
 
-  if (props.type === 'email' || props.allowCreate) {
+  if (
+    [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(props.type) ||
+    props.allowCreate
+  ) {
     if (!(await v$.value.$validate())) return;
     emitDataOnAdd(trimmedTag);
   }
-
-  tags.value.push(trimmedTag);
-  newTag.value = '';
-  modelValue.value = tags.value;
-  tagInputRef.value?.focus();
+  updateValueAndFocus(trimmedTag);
 };
 
 const removeTag = index => {
@@ -144,19 +128,25 @@ const removeTag = index => {
   emit('remove');
 };
 
-const handleDropdownAction = async ({ email: emailAddress, ...rest }) => {
+const handleDropdownAction = async ({
+  email: emailAddress,
+  phoneNumber,
+  ...rest
+}) => {
   if (props.mode === MODE.SINGLE && tags.value.length >= 1) return;
+  if (!props.showDropdown) return;
 
-  if (props.type === 'email' && props.showDropdown) {
-    newTag.value = emailAddress;
-    if (!(await v$.value.$validate())) return;
-    emit('add', { email: emailAddress, ...rest });
-  }
+  const isEmail = props.type === 'email';
+  newTag.value = isEmail ? emailAddress : phoneNumber;
 
-  tags.value.push(emailAddress);
-  newTag.value = '';
-  modelValue.value = tags.value;
-  tagInputRef.value?.focus();
+  if (!(await v$.value.$validate())) return;
+
+  const payload = isEmail
+    ? { email: emailAddress, ...rest }
+    : { phoneNumber, ...rest };
+
+  emit('add', payload);
+  updateValueAndFocus(emailAddress);
 };
 
 const handleFocus = () => {
@@ -226,7 +216,6 @@ const handleBlur = e => emit('blur', e);
         ref="tagInputRef"
         v-model="newTag"
         :placeholder="placeholder"
-        :type="type"
         :disabled="disabled"
         class="w-full"
         :focus-on-mount="focusOnMount"
diff --git a/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js b/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js
new file mode 100644
index 000000000..f1886de22
--- /dev/null
+++ b/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js
@@ -0,0 +1,299 @@
+import {
+  validatePhoneNumber,
+  formatPhoneNumber,
+  buildTagMenuItems,
+  MODE,
+  INPUT_TYPES,
+  getValidationRules,
+  validateAndFormatNewTag,
+  createNewTagMenuItem,
+  canAddTag,
+  findMatchingMenuItem,
+} from '../tagInputHelper';
+import { email } from '@vuelidate/validators';
+
+describe('tagInputHelper', () => {
+  describe('validatePhoneNumber', () => {
+    it('returns true for empty value', () => {
+      expect(validatePhoneNumber('')).toBe(true);
+    });
+
+    it('validates correct phone number', () => {
+      expect(validatePhoneNumber('+918283838283')).toBe(true);
+    });
+
+    it('validates correct phone number id + is present and number is not valid', () => {
+      expect(validatePhoneNumber('+91828383834283')).toBe(false);
+    });
+
+    it('validates correct phone number if + is not present', () => {
+      expect(validatePhoneNumber('91828383834283')).toBe(false);
+    });
+
+    it('invalidates incorrect phone number', () => {
+      expect(validatePhoneNumber('invalid')).toBe(false);
+    });
+
+    it('handles null value', () => {
+      expect(validatePhoneNumber(null)).toBe(true);
+    });
+  });
+
+  describe('formatPhoneNumber', () => {
+    it('formats valid phone number', () => {
+      const result = formatPhoneNumber('+918283838283');
+      expect(result.isValid).toBe(true);
+      expect(result.formattedValue).toBe('+91 82838 38283');
+    });
+
+    it('handles invalid phone number', () => {
+      const result = formatPhoneNumber('invalid');
+      expect(result.isValid).toBe(false);
+      expect(result.formattedValue).toBe('invalid');
+    });
+
+    it('handles error case', () => {
+      const result = formatPhoneNumber(null);
+      expect(result.isValid).toBe(false);
+      expect(result.formattedValue).toBe(null);
+    });
+  });
+
+  describe('getValidationRules', () => {
+    it('returns email validation for email type', () => {
+      const rules = getValidationRules(INPUT_TYPES.EMAIL);
+      expect(rules.newTag).toHaveProperty('email');
+      expect(rules.newTag).not.toHaveProperty('isValidPhone');
+      expect(rules.newTag.email).toBe(email);
+    });
+
+    it('returns phone validation for tel type', () => {
+      const rules = getValidationRules(INPUT_TYPES.TEL);
+      expect(rules.newTag).toHaveProperty('isValidPhone');
+      expect(rules.newTag).not.toHaveProperty('email');
+      expect(rules.newTag.isValidPhone).toBe(validatePhoneNumber);
+    });
+
+    it('returns empty rules for text type', () => {
+      const rules = getValidationRules(INPUT_TYPES.TEXT);
+      expect(Object.keys(rules.newTag)).toHaveLength(0);
+    });
+  });
+
+  describe('validateAndFormatNewTag', () => {
+    it('validates and formats email tag', () => {
+      const result = validateAndFormatNewTag(
+        'test@example.com',
+        INPUT_TYPES.EMAIL,
+        false
+      );
+      expect(result).toEqual({
+        isValid: true,
+        formattedValue: 'test@example.com',
+      });
+    });
+
+    it('validates and formats phone tag', () => {
+      const result = validateAndFormatNewTag(
+        '+918283838283',
+        INPUT_TYPES.TEL,
+        false
+      );
+      expect(result.isValid).toBe(true);
+      expect(result.formattedValue).toBe('+91 82838 38283');
+    });
+
+    it('handles invalid email', () => {
+      const result = validateAndFormatNewTag(
+        'test@example.com',
+        INPUT_TYPES.EMAIL,
+        true
+      );
+      expect(result.isValid).toBe(false);
+      expect(result.formattedValue).toBe('test@example.com');
+    });
+
+    it('handles text type', () => {
+      const result = validateAndFormatNewTag(
+        'sample text',
+        INPUT_TYPES.TEXT,
+        false
+      );
+      expect(result.isValid).toBe(true);
+      expect(result.formattedValue).toBe('sample text');
+    });
+  });
+
+  describe('createNewTagMenuItem', () => {
+    it('creates email menu item', () => {
+      const result = createNewTagMenuItem(
+        'test@example.com',
+        'test@example.com',
+        INPUT_TYPES.EMAIL
+      );
+      expect(result).toEqual({
+        label: 'test@example.com',
+        value: 'test@example.com',
+        email: 'test@example.com',
+        thumbnail: { name: 'test@example.com', src: '' },
+        action: 'create',
+      });
+    });
+
+    it('creates phone menu item', () => {
+      const result = createNewTagMenuItem(
+        '+91 82838 38283',
+        '+918283838283',
+        INPUT_TYPES.TEL
+      );
+      expect(result).toEqual({
+        label: '+91 82838 38283',
+        value: '+918283838283',
+        phoneNumber: '+918283838283',
+        thumbnail: { name: '+91 82838 38283', src: '' },
+        action: 'create',
+      });
+    });
+
+    it('creates text menu item', () => {
+      const result = createNewTagMenuItem(
+        'sample text',
+        'sample text',
+        INPUT_TYPES.TEXT
+      );
+      expect(result).toEqual({
+        label: 'sample text',
+        value: 'sample text',
+        thumbnail: { name: 'sample text', src: '' },
+        action: 'create',
+      });
+    });
+  });
+
+  describe('buildTagMenuItems', () => {
+    const baseParams = {
+      mode: MODE.MULTIPLE,
+      tags: [],
+      menuItems: [],
+      newTag: '',
+      isLoading: false,
+      type: INPUT_TYPES.TEXT,
+      isNewTagInValidType: false,
+    };
+
+    it('returns empty array in single mode with existing tag', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        mode: MODE.SINGLE,
+        tags: ['existing'],
+      });
+      expect(result).toEqual([]);
+    });
+
+    it('filters out existing tags', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        menuItems: [
+          { label: 'item1', value: '1' },
+          { label: 'item2', value: '2' },
+        ],
+        tags: ['item1'],
+      });
+      expect(result).toHaveLength(1);
+      expect(result[0].label).toBe('item2');
+    });
+
+    it('creates new email item when valid', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.EMAIL,
+        newTag: 'test@example.com',
+        menuItems: [],
+      });
+      expect(result[0]).toMatchObject({
+        label: 'test@example.com',
+        email: 'test@example.com',
+        action: 'create',
+      });
+    });
+
+    it('creates new phone item when valid', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.TEL,
+        newTag: '+918283838283',
+        menuItems: [],
+      });
+      expect(result[0]).toMatchObject({
+        value: '+918283838283',
+        label: '+91 82838 38283',
+        action: 'create',
+      });
+    });
+
+    it('returns empty array when loading', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        isLoading: true,
+        newTag: 'test',
+      });
+      expect(result).toEqual([]);
+    });
+
+    it('returns empty array for invalid tag', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.EMAIL,
+        newTag: 'invalid-email',
+        isNewTagInValidType: true,
+      });
+      expect(result).toEqual([]);
+    });
+
+    it('returns available menu items when no new tag', () => {
+      const menuItems = [
+        { label: 'item1', value: '1' },
+        { label: 'item2', value: '2' },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        menuItems,
+      });
+      expect(result).toEqual(menuItems);
+    });
+  });
+
+  describe('canAddTag', () => {
+    it('prevents adding tags in single mode when tag exists', () => {
+      expect(canAddTag(MODE.SINGLE, 1)).toBe(false);
+      expect(canAddTag(MODE.SINGLE, 0)).toBe(true);
+    });
+
+    it('allows adding tags in multiple mode', () => {
+      expect(canAddTag(MODE.MULTIPLE, 1)).toBe(true);
+      expect(canAddTag(MODE.MULTIPLE, 0)).toBe(true);
+    });
+  });
+
+  describe('findMatchingMenuItem', () => {
+    const menuItems = [
+      { email: 'test1@example.com', label: 'Test 1' },
+      { email: 'test2@example.com', label: 'Test 2' },
+    ];
+
+    it('finds matching menu item by email', () => {
+      const result = findMatchingMenuItem(menuItems, 'test1@example.com');
+      expect(result).toEqual(menuItems[0]);
+    });
+
+    it('returns undefined when no match found', () => {
+      const result = findMatchingMenuItem(menuItems, 'nonexistent@example.com');
+      expect(result).toBeUndefined();
+    });
+
+    it('handles empty menu items', () => {
+      const result = findMatchingMenuItem([], 'test@example.com');
+      expect(result).toBeUndefined();
+    });
+  });
+});
diff --git a/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js b/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js
new file mode 100644
index 000000000..fb0af711e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js
@@ -0,0 +1,124 @@
+import { parsePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
+import { email } from '@vuelidate/validators';
+
+export const MODE = {
+  SINGLE: 'single',
+  MULTIPLE: 'multiple',
+};
+
+export const INPUT_TYPES = {
+  EMAIL: 'email',
+  TEL: 'tel',
+  TEXT: 'text',
+};
+
+export const validatePhoneNumber = value => {
+  if (!value) return true;
+  try {
+    return isValidPhoneNumber(value);
+  } catch (error) {
+    return false;
+  }
+};
+
+export const formatPhoneNumber = value => {
+  try {
+    const phoneNumber = parsePhoneNumber(value);
+    return {
+      isValid: phoneNumber?.isValid() || false,
+      formattedValue: phoneNumber?.formatInternational() || value,
+    };
+  } catch (error) {
+    return { isValid: false, formattedValue: value };
+  }
+};
+
+export const getValidationRules = type => ({
+  newTag: {
+    ...(type === INPUT_TYPES.EMAIL ? { email } : {}),
+    ...(type === INPUT_TYPES.TEL ? { isValidPhone: validatePhoneNumber } : {}),
+  },
+});
+
+export const checkTagTypeValidity = (type, value, v$) => {
+  if (type === INPUT_TYPES.TEL) {
+    return !validatePhoneNumber(value);
+  }
+  return v$.$invalid;
+};
+
+export const validateAndFormatNewTag = (
+  trimmedNewTag,
+  type,
+  isNewTagInValidType
+) => {
+  let isValid = true;
+  let formattedValue = trimmedNewTag;
+
+  if (type === INPUT_TYPES.EMAIL) {
+    isValid = !isNewTagInValidType;
+  } else if (type === INPUT_TYPES.TEL) {
+    const { isValid: phoneValid, formattedValue: phoneFormatted } =
+      formatPhoneNumber(trimmedNewTag);
+    isValid = phoneValid;
+    formattedValue = phoneFormatted;
+  }
+
+  return { isValid, formattedValue };
+};
+
+export const createNewTagMenuItem = (formattedValue, trimmedNewTag, type) => ({
+  label: formattedValue,
+  value: trimmedNewTag,
+  ...(type === INPUT_TYPES.EMAIL ? { email: trimmedNewTag } : {}),
+  ...(type === INPUT_TYPES.TEL ? { phoneNumber: trimmedNewTag } : {}),
+  thumbnail: { name: formattedValue, src: '' },
+  action: 'create',
+});
+
+export const buildTagMenuItems = ({
+  mode,
+  tags,
+  menuItems,
+  newTag,
+  isLoading,
+  type,
+  isNewTagInValidType,
+}) => {
+  if (mode === MODE.SINGLE && tags.length >= 1) return [];
+
+  const availableMenuItems = menuItems.filter(
+    item => !tags.includes(item.label)
+  );
+
+  // Show typed value as suggestion only if:
+  // 1. There's a value being typed
+  // 2. The value isn't already in the tags
+  // 3. Validation passes (email/phone) and There are no menu items available
+  const trimmedNewTag = newTag?.trim();
+  const shouldShowTypedValue =
+    trimmedNewTag &&
+    !tags.includes(trimmedNewTag) &&
+    !isLoading &&
+    !availableMenuItems.length;
+
+  if (shouldShowTypedValue) {
+    const { isValid, formattedValue } = validateAndFormatNewTag(
+      trimmedNewTag,
+      type,
+      isNewTagInValidType
+    );
+
+    if (isValid) {
+      return [createNewTagMenuItem(formattedValue, trimmedNewTag, type)];
+    }
+  }
+
+  return availableMenuItems;
+};
+
+export const canAddTag = (mode, tagsLength) =>
+  !(mode === MODE.SINGLE && tagsLength >= 1);
+
+export const findMatchingMenuItem = (menuItems, value) =>
+  menuItems.find(item => item.email === value);

From 2a4c0dfa2a21bd537d0889cde77114158264a31e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 17 Dec 2024 18:43:36 +0530
Subject: [PATCH 73/74] chore: Adds the ability to remove labels from label
 card (#10591)

---
 .../Contacts/ContactLabels/ContactLabels.vue  | 56 ++++++++++++++-----
 .../components-next/Label/LabelItem.vue       | 40 ++++++++++++-
 2 files changed, 79 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
index 255c1b113..af04de9a7 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
@@ -18,6 +18,11 @@ 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');
 
@@ -37,7 +42,7 @@ const labelMenuItems = computed(() => {
       isSelected: savedLabels.value.some(
         savedLabel => savedLabel.id === label.id
       ),
-      action: 'addLabel',
+      action: 'contactLabel',
     }))
     .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
 });
@@ -49,7 +54,7 @@ const fetchLabels = async contactId => {
   store.dispatch('contactLabels/get', contactId);
 };
 
-const handleLabelAction = async ({ action, value }) => {
+const handleLabelAction = async ({ value }) => {
   try {
     // Get current label titles
     const currentLabels = savedLabels.value.map(label => label.title);
@@ -59,16 +64,15 @@ const handleLabelAction = async ({ action, value }) => {
     if (!selectedLabel) return;
 
     let updatedLabels;
-    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];
-      }
+
+    // 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', {
@@ -82,6 +86,10 @@ const handleLabelAction = async ({ action, value }) => {
   }
 };
 
+const handleRemoveLabel = labelId => {
+  return handleLabelAction({ value: labelId });
+};
+
 watch(
   () => props.contactId,
   (newVal, oldVal) => {
@@ -95,11 +103,31 @@ 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">
-    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
+  <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)"
+    />
     <AddLabel
       :label-menu-items="labelMenuItems"
       @update-label="handleLabelAction"
diff --git a/app/javascript/dashboard/components-next/Label/LabelItem.vue b/app/javascript/dashboard/components-next/Label/LabelItem.vue
index b96b9b368..65c2600b1 100644
--- a/app/javascript/dashboard/components-next/Label/LabelItem.vue
+++ b/app/javascript/dashboard/components-next/Label/LabelItem.vue
@@ -1,22 +1,56 @@
 <script setup>
-defineProps({
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = 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="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"
+    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"
   >
     <div
       class="w-2 h-2 m-1 rounded-sm"
       :style="{ backgroundColor: label.color }"
     />
-    <span class="text-sm text-n-slate-12">
+    <span class="text-sm text-n-slate-12 ltr:mr-px rtl:ml-px">
       {{ 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>

From 361878d346411799fdba57663d351621cd119d2d Mon Sep 17 00:00:00 2001
From: Sojan <sojan@pepalo.com>
Date: Tue, 17 Dec 2024 23:02:59 +0530
Subject: [PATCH 74/74]  Bump version to 3.16.0

---
 config/app.yml | 2 +-
 package.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/app.yml b/config/app.yml
index 2c8fa1e11..d2bafa826 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '3.15.0'
+  version: '3.16.0'
 
 development:
   <<: *shared
diff --git a/package.json b/package.json
index ec06e9375..0e950f17c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue}",