fix: typo

Co-authored-by: Pranav <pranavrajs@gmail.com>

.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'

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 --#

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)
@@ -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)
@@ -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)
@@ -472,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
@@ -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)
@@ -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)
@@ -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

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"

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;
 

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>

app/javascript/dashboard/components-next/Contacts/ContactHeader/ContactActions.vue

@@ -1,46 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-import ContactSortMenu from './ContactSortMenu.vue';
-import ContactMoreActions from './ContactMoreActions.vue';
-
-defineProps({
-  isDetailView: {
-    type: Boolean,
-    default: false,
-  },
-  activeSort: {
-    type: String,
-    default: 'last_activity_at',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  isEmptyState: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['filter', 'update:sort']);
-</script>
-
-<template>
-  <div class="flex items-center gap-2">
-    <Button
-      v-if="!isDetailView && !isEmptyState"
-      icon="i-lucide-list-filter"
-      color="slate"
-      size="sm"
-      variant="ghost"
-      @click="emit('filter')"
-    />
-    <ContactSortMenu
-      v-if="!isDetailView && !isEmptyState"
-      :active-sort="activeSort"
-      :active-ordering="activeOrdering"
-      @update:sort="emit('update:sort', $event)"
-    />
-    <ContactMoreActions v-if="!isDetailView" />
-  </div>
-</template>

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,48 +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>
-          <span
-            v-if="additionalAttributes?.companyName"
-            class="i-lucide-briefcase-business size-4 text-n-slate-11"
-          />
-          <span
-            v-if="additionalAttributes?.companyName"
-            class="text-sm truncate text-n-slate-11"
-          >
-            {{ additionalAttributes.companyName }}
+          <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>
           </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"
@@ -72,7 +134,7 @@ const onClickViewDetails = async () => {
       color="slate"
       size="xs"
       :class="{ 'rotate-180': isExpanded }"
-      @click="emit('toggle')"
+      @click="onClickExpand"
     />
 
     <template #after>
@@ -80,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>

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>

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue

@@ -1,15 +1,15 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
 import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 
+const emit = defineEmits(['export']);
+
 const { t } = useI18n();
-const store = useStore();
 const route = useRoute();
 
 const dialogRef = ref(null);
@@ -35,20 +35,10 @@ const exportContacts = async () => {
     query = filterQueryGenerator(appliedFilters.value);
   }
 
-  try {
-    store.dispatch('contacts/export', {
-      ...query,
-      label: route.params.label || '',
-    });
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.SUCCESS_MESSAGE')
-    );
-  } catch (error) {
-    useAlert(
-      error.message ||
-        t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.ERROR_MESSAGE')
-    );
-  }
+  emit('export', {
+    ...query,
+    label: route.params.label || '',
+  });
 };
 
 const handleDialogConfirm = async () => {

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue

@@ -1,15 +1,13 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 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 store = useStore();
 
 const uiFlags = useMapGetter('contacts/getUIFlags');
 const isImportingContact = computed(() => uiFlags.value.isImporting);
@@ -20,7 +18,7 @@ const fileInput = ref(null);
 const hasSelectedFile = ref(null);
 const selectedFileName = ref('');
 
-const csvUrl = () => '/downloads/import-contacts-sample.csv';
+const csvUrl = '/downloads/import-contacts-sample.csv';
 
 const handleFileClick = () => fileInput.value?.click();
 
@@ -50,16 +48,7 @@ const handleRemoveFile = () => {
 
 const uploadFile = async () => {
   if (!hasSelectedFile.value) return;
-
-  try {
-    await store.dispatch('contacts/import', hasSelectedFile.value);
-    dialogRef.value?.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);
-  }
+  emit('import', hasSelectedFile.value);
 };
 
 defineExpose({ dialogRef });
@@ -83,7 +72,7 @@ defineExpose({ dialogRef });
           :href="csvUrl"
           target="_blank"
           rel="noopener noreferrer"
-          download="import-contacts-sample"
+          download="import-contacts-sample.csv"
           class="text-n-blue-text"
         >
           {{
@@ -92,57 +81,54 @@ defineExpose({ dialogRef });
         </a>
       </p>
     </template>
-    <template #form>
-      <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>
+
+    <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
-              v-if="!hasSelectedFile"
-              :label="
-                t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHOOSE_FILE')
-              "
-              icon="i-lucide-download"
+              :label="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHANGE')"
               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 class="w-px h-3 bg-n-strong" />
+            <Button
+              icon="i-lucide-trash"
+              color="slate"
+              variant="ghost"
+              size="sm"
+              @click="handleRemoveFile"
+            />
           </div>
         </div>
       </div>
-      <input
-        ref="fileInput"
-        type="file"
-        accept="text/csv"
-        class="hidden"
-        @change="handleFileChange"
-      />
-    </template>
+    </div>
+    <input
+      ref="fileInput"
+      type="file"
+      accept="text/csv"
+      class="hidden"
+      @change="handleFileChange"
+    />
   </Dialog>
 </template>

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>

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,14 +94,13 @@ const prepareStateBasedOnProps = () => {
     phoneNumber,
     additionalAttributes = {},
   } = props.contactData || {};
-
-  const [firstName = '', lastName = ''] = name.split(' ');
+  const { firstName, lastName } = splitName(name);
   const {
-    description,
-    companyName,
-    countryCode,
-    country,
-    city,
+    description = '',
+    companyName = '',
+    countryCode = '',
+    country = '',
+    city = '',
     socialProfiles = {},
   } = additionalAttributes || {};
 
@@ -203,6 +204,20 @@ 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();
+};
+
+const resetForm = () => {
+  Object.assign(state, defaultState);
+};
+
 watch(() => props.contactData, prepareStateBasedOnProps, {
   immediate: true,
   deep: true,
@@ -211,6 +226,9 @@ watch(() => props.contactData, prepareStateBasedOnProps, {
 // Expose state to parent component for avatar upload
 defineExpose({
   state,
+  resetValidation,
+  isFormInvalid,
+  resetForm,
 });
 </script>
 
@@ -220,7 +238,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 +252,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'"
@@ -248,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="

app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue

@@ -1,16 +1,18 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
+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 store = useStore();
 
 const dialogRef = ref(null);
+const contactsFormRef = ref(null);
 const contact = ref(null);
 
 const uiFlags = useMapGetter('contacts/getUIFlags');
@@ -22,7 +24,11 @@ const createNewContact = contactItem => {
 
 const handleDialogConfirm = async () => {
   if (!contact.value) return;
-  await store.dispatch('contacts/create', contact.value);
+  emit('create', contact.value);
+};
+
+const onSuccess = () => {
+  contactsFormRef.value?.resetForm();
   dialogRef.value.close();
 };
 
@@ -30,12 +36,16 @@ const closeDialog = () => {
   dialogRef.value.close();
 };
 
-defineExpose({ dialogRef });
+defineExpose({ dialogRef, contactsFormRef, onSuccess });
 </script>
 
 <template>
   <Dialog ref="dialogRef" width="3xl" @confirm="handleDialogConfirm">
-    <ContactsForm is-new-contact @update="createNewContact" />
+    <ContactsForm
+      ref="contactsFormRef"
+      is-new-contact
+      @update="createNewContact"
+    />
     <template #footer>
       <div class="flex items-center justify-between w-full gap-3">
         <Button

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>

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>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -0,0 +1,142 @@
+<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,
+  //     default: '',
+  //   },
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+  isSegmentsView: {
+    type: Boolean,
+    default: false,
+  },
+  hasActiveFilters: {
+    type: Boolean,
+    default: false,
+  },
+  isLabelView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'search',
+  'filter',
+  'update:sort',
+  //   'message',
+  'add',
+  'import',
+  'export',
+  'createSegment',
+  'deleteSegment',
+]);
+</script>
+
+<template>
+  <header class="sticky top-0 z-10">
+    <div
+      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 }}
+      </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">
+          <div v-if="!isLabelView" 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 && !isLabelView"
+            icon="i-lucide-save"
+            color="slate"
+            size="sm"
+            class="relative"
+            variant="ghost"
+            @click="emit('createSegment')"
+          />
+          <Button
+            v-if="isSegmentsView && !isLabelView"
+            icon="i-lucide-trash"
+            color="slate"
+            size="sm"
+            class="relative"
+            variant="ghost"
+            @click="emit('deleteSegment')"
+          />
+          <ContactSortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <ContactMoreActions
+            @add="emit('add')"
+            @import="emit('import')"
+            @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>
+    </div>
+  </header>
+</template>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue

@@ -0,0 +1,306 @@
+<script setup>
+import { ref, computed, unref } from 'vue';
+import { useI18n } from 'vue-i18n';
+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';
+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 {
+  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';
+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 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 },
+  isLabelView: { 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 appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+const contactAttributes = useMapGetter('attributes/getContactAttributes');
+const hasActiveSegments = computed(
+  () => props.activeSegment && props.segmentsId !== 0
+);
+const activeSegmentName = computed(() => props.activeSegment?.name);
+
+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 => {
+  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 => {
+  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,
+    };
+    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')
+    );
+  }
+};
+
+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 () => {
+  emit('clearFilters');
+};
+
+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,
+    query: filterQueryGenerator(payload),
+  };
+  await store.dispatch('customViews/update', payloadData);
+  closeAdvanceFiltersModal();
+};
+
+const setParamsForEditSegmentModal = () => {
+  return {
+    countries,
+    filterTypes: contactFilterItems,
+    allCustomAttributes: useSnakeCase(contactAttributes.value),
+  };
+};
+
+const initializeSegmentToFilterModal = segment => {
+  const query = unref(segment)?.query?.payload;
+  if (!Array.isArray(query)) return;
+
+  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;
+};
+
+defineExpose({
+  onToggleFilters,
+});
+</script>
+
+<template>
+  <ContactsHeader
+    :show-search="showSearch"
+    :search-value="searchValue"
+    :active-sort="activeSort"
+    :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)"
+    @update:sort="emit('update:sort', $event)"
+    @add="openCreateNewContactDialog"
+    @import="openContactImportDialog"
+    @export="openContactExportDialog"
+    @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" />
+</template>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue

@@ -4,9 +4,8 @@ import { useI18n } from 'vue-i18n';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
-import ContactImportDialog from 'dashboard/components-next/Contacts/ContactHeader/ContactImportDialog.vue';
-import ContactExportDialog from 'dashboard/components-next/Contacts/ContactHeader/ContactExportDialog.vue';
+
+const emit = defineEmits(['add', 'import', 'export']);
 
 const { t } = useI18n();
 
@@ -30,19 +29,15 @@ const contactMenuItems = [
     icon: 'i-lucide-download',
   },
 ];
-
 const showActionsDropdown = ref(false);
-const createNewContactDialogRef = ref(null);
-const contactImportDialogRef = ref(null);
-const contactExportDialogRef = ref(null);
 
 const handleContactAction = ({ action }) => {
   if (action === 'add') {
-    createNewContactDialogRef.value?.dialogRef.open();
+    emit('add');
   } else if (action === 'import') {
-    contactImportDialogRef.value?.dialogRef.open();
+    emit('import');
   } else if (action === 'export') {
-    contactExportDialogRef.value?.dialogRef.open();
+    emit('export');
   }
 };
 </script>
@@ -64,7 +59,4 @@ const handleContactAction = ({ action }) => {
       @action="handleContactAction($event)"
     />
   </div>
-  <CreateNewContactDialog ref="createNewContactDialogRef" />
-  <ContactImportDialog ref="contactImportDialogRef" />
-  <ContactExportDialog ref="contactExportDialogRef" />
 </template>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue

@@ -1,6 +1,7 @@
 <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';
 
@@ -16,7 +17,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:sort']);
+
 const { t } = useI18n();
+
 const isMenuOpen = ref(false);
 
 const sortMenus = [
@@ -67,6 +70,7 @@ const orderingMenus = [
 
 // Converted the props to refs for better reactivity
 const activeSort = toRef(props, 'activeSort');
+
 const activeOrdering = toRef(props, 'activeOrdering');
 
 const activeSortLabel = computed(() => {

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue

@@ -0,0 +1,30 @@
+<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', 'openFilter']);
+
+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"
+    @open-filter="emit('openFilter')"
+    @clear-filters="emit('clearFilters')"
+  />
+</template>

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>

app/javascript/dashboard/components-next/Contacts/ContactsLayout.vue

@@ -1,209 +0,0 @@
-<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 Input from 'dashboard/components-next/input/Input.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import ContactActions from 'dashboard/components-next/Contacts/ContactHeader/ContactActions.vue';
-import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
-
-const props = defineProps({
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  headerTitle: {
-    type: String,
-    default: '',
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  showPaginationFooter: {
-    type: Boolean,
-    default: true,
-  },
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalItems: {
-    type: Number,
-    default: 100,
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 15,
-  },
-  isDetailView: {
-    type: Boolean,
-    default: false,
-  },
-  selectedContact: {
-    type: Object,
-    default: () => ({}),
-  },
-  activeSort: {
-    type: String,
-    default: '',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  isEmptyState: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'filter',
-  'more',
-  'update:currentPage',
-  'goToContactsList',
-  'search',
-  'sort',
-]);
-
-const { t } = useI18n();
-const slots = useSlots();
-const route = useRoute();
-
-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 hasSidebar = computed(() => {
-  return slots.sidebar && props.isDetailView;
-});
-
-const isNotSegmentView = computed(() => {
-  return route.name !== 'contacts_dashboard_segments_index';
-});
-
-const handleBreadcrumbClick = () => {
-  emit('goToContactsList');
-};
-
-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"
-      :class="hasSidebar && `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"
-          :class="hasSidebar ? `max-w-[650px]` : `max-w-[900px]`"
-        >
-          <div class="flex items-center justify-between w-full h-20 gap-2">
-            <span
-              v-if="!isDetailView"
-              class="text-xl font-medium text-n-slate-12"
-            >
-              {{ headerTitle }}
-            </span>
-            <Breadcrumb
-              v-else
-              :items="breadcrumbItems"
-              @click="handleBreadcrumbClick"
-            />
-            <div class="flex items-center gap-4">
-              <div
-                v-if="!isDetailView && !isEmptyState && isNotSegmentView"
-                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>
-              <ContactActions
-                :is-empty-state="isEmptyState"
-                :is-detail-view="isDetailView"
-                :active-sort="activeSort"
-                :active-ordering="activeOrdering"
-                @filter="emit('filter')"
-                @update:sort="emit('sort', $event)"
-                @more="emit('more')"
-              />
-              <div v-if="!isDetailView" class="w-px h-4 bg-n-strong" />
-              <ComposeConversation>
-                <template #trigger="{ toggle }">
-                  <Button :label="buttonLabel" size="sm" @click="toggle" />
-                </template>
-              </ComposeConversation>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
-        <div
-          class="w-full py-4 mx-auto"
-          :class="hasSidebar ? `max-w-[650px]` : `max-w-[900px]`"
-        >
-          <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>
-
-    <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>

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed, ref } 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({
+  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 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>
+  <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
+        ref="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"
+        :is-label-view="isLabelView"
+        @update:sort="emit('update:sort', $event)"
+        @search="emit('search', $event)"
+        @apply-filter="emit('applyFilter', $event)"
+        @clear-filters="emit('clearFilters')"
+      />
+      <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')"
+            @open-filter="openFilter"
+          />
+          <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>

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue

@@ -46,7 +46,7 @@ const handleUpdate = async value => {
   try {
     await store.dispatch('contacts/update', {
       id: route.params.contactId,
-      custom_attributes: {
+      customAttributes: {
         [props.attribute.attributeKey]: value,
       },
     });
@@ -75,11 +75,11 @@ const CurrentAttributeComponent = computed(() => {
 
 <template>
   <div
-    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-1"
+    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 text-n-slate-12">
+      <span class="text-sm font-medium truncate text-n-slate-12">
         {{ attribute.attributeDisplayName }}
       </span>
     </div>

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -16,61 +16,53 @@ const { t } = useI18n();
 
 const searchQuery = ref('');
 
-const attributes = useMapGetter('attributes/getAttributesByModelType');
-
-const contactAttributes = computed(() => attributes.value('contact_attribute'));
+const contactAttributes = computed(() => {
+  const attributes = useMapGetter('attributes/getAttributesByModelType');
+  return attributes.value('contact_attribute') || [];
+});
 
 const hasContactAttributes = computed(
   () => contactAttributes.value?.length > 0
 );
 
-// Convert attribute key value from snake_case to camelCase
-const toCamelCase = str =>
-  str.toLowerCase().replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
-
-const usedAttributes = computed(() => {
-  if (!contactAttributes.value || !props.selectedContact?.customAttributes) {
+const processContactAttributes = (
+  attributes,
+  customAttributes,
+  filterCondition
+) => {
+  if (!attributes.length || !customAttributes) {
     return [];
   }
-  return contactAttributes.value
-    .filter(attribute => {
-      const camelKey = toCamelCase(attribute.attributeKey);
-      return props.selectedContact.customAttributes[camelKey] !== undefined;
-    })
-    .map(attribute => ({
-      ...attribute,
-      value:
-        props.selectedContact.customAttributes[
-          toCamelCase(attribute.attributeKey)
-        ] ?? '',
-    }));
+
+  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(() => {
-  if (!contactAttributes.value || !props.selectedContact?.customAttributes) {
-    return [];
-  }
-
-  return contactAttributes.value
-    .filter(attribute => {
-      const camelKey = toCamelCase(attribute.attributeKey);
-      const attributeValue = props.selectedContact.customAttributes[camelKey];
-
-      // For checkbox type, consider both true/false as valid values
-      if (attribute.attributeDisplayType === 'checkbox') {
-        return typeof attributeValue !== 'boolean';
-      }
-
-      // For other types, check if value doesn't exist or is null/undefined
-      return attributeValue === undefined || attributeValue === null;
-    })
-    .map(attribute => ({
-      ...attribute,
-      value:
-        props.selectedContact.customAttributes[
-          toCamelCase(attribute.attributeKey)
-        ] ?? '',
-    }));
+  return processContactAttributes(
+    contactAttributes.value,
+    props.selectedContact?.customAttributes,
+    (key, custom) => !(key in custom)
+  );
 });
 
 const filteredUnusedAttributes = computed(() => {

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>

app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue

@@ -2,10 +2,10 @@
 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';
-import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
 
 defineProps({
   title: {
@@ -26,6 +26,8 @@ defineProps({
   },
 });
 
+const emit = defineEmits(['create']);
+
 const createNewContactDialogRef = ref(null);
 
 const onClick = () => {
@@ -54,8 +56,11 @@ const onClick = () => {
     <template #actions>
       <div v-if="showButton">
         <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
+        <CreateNewContactDialog
+          ref="createNewContactDialogRef"
+          @create="emit('create', $event)"
+        />
       </div>
-      <CreateNewContactDialog ref="createNewContactDialogRef" />
     </template>
   </EmptyStateLayout>
 </template>

app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { dynamicTime } from 'shared/helpers/timeHelper';
-import { debounce } from '@chatwoot/utils';
 
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -31,41 +30,50 @@ const avatarUrl = ref('');
 
 const contactsFormRef = ref(null);
 
-const selectedContactData = computed(() => {
-  if (!props.selectedContact) return {};
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isUpdating = computed(() => uiFlags.value.isUpdating);
 
-  return props.selectedContact;
+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 props.selectedContact?.createdAt
-    ? dynamicTime(props.selectedContact.createdAt)
+  return contactData.value?.createdAt
+    ? dynamicTime(contactData.value.createdAt)
     : '';
 });
 
 const lastActivityAt = computed(() => {
-  return props.selectedContact?.lastActivityAt
-    ? dynamicTime(props.selectedContact.lastActivityAt)
+  return contactData.value?.lastActivityAt
+    ? dynamicTime(contactData.value.lastActivityAt)
     : '';
 });
 
 const avatarSrc = computed(() => {
-  return avatarUrl.value ? avatarUrl.value : props.selectedContact?.thumbnail;
+  return avatarUrl.value ? avatarUrl.value : contactData.value?.thumbnail;
 });
 
-const updateContact = async updatedData => {
-  await store.dispatch('contacts/update', updatedData);
-  await store.dispatch(
-    'contacts/fetchContactableInbox',
-    props.selectedContact?.id
-  );
+const handleFormUpdate = updatedData => {
+  Object.assign(contactData.value, updatedData);
 };
 
-const handleFormUpdate = debounce(
-  updatedData => updateContact(updatedData),
-  600,
-  false
-);
+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();
@@ -76,7 +84,7 @@ const handleAvatarUpload = async ({ file, url }) => {
   avatarUrl.value = url;
 
   try {
-    await updateContact({
+    await store.dispatch('contacts/update', {
       ...contactsFormRef.value?.state,
       avatar: file,
       isFormData: true,
@@ -95,6 +103,7 @@ const handleAvatarDelete = async () => {
     }
     avatarFile.value = null;
     avatarUrl.value = '';
+    contactData.value.thumbnail = null;
   } catch (error) {
     useAlert(
       error.message
@@ -110,7 +119,7 @@ const handleAvatarDelete = async () => {
     <div class="flex flex-col items-start gap-3">
       <Avatar
         :src="avatarSrc || ''"
-        :name="selectedContact.name || ''"
+        :name="selectedContact?.name || ''"
         :size="72"
         allow-upload
         @upload="handleAvatarUpload"
@@ -118,7 +127,7 @@ const handleAvatarDelete = async () => {
       />
       <div class="flex flex-col gap-1">
         <h3 class="text-base font-medium text-n-slate-12">
-          {{ selectedContact.name }}
+          {{ selectedContact?.name }}
         </h3>
         <span class="text-sm text-n-slate-11">
           {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
@@ -130,14 +139,23 @@ const handleAvatarDelete = async () => {
           }}
         </span>
       </div>
-      <ContactLabels :contact-id="selectedContact.id" />
+      <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>
-    <ContactsForm
-      ref="contactsFormRef"
-      :contact-data="selectedContactData"
-      is-details-view
-      @update="handleFormUpdate"
-    />
     <div
       class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
     >

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -1,54 +1,58 @@
 <script setup>
-import { ref } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { debounce } from '@chatwoot/utils';
+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,
-  },
-});
+defineProps({ contacts: { type: Array, required: true } });
 
+const { t } = useI18n();
 const store = useStore();
 const router = useRouter();
 const route = useRoute();
 
-// Manage expanded state here
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isUpdating = computed(() => uiFlags.value.isUpdating);
 const expandedCardId = ref(null);
 
-const updateContact = async ({ id, updatedData }) => {
-  await store.dispatch('contacts/update', updatedData);
-  await store.dispatch('contacts/fetchContactableInbox', id);
-};
-
-const handleFormUpdate = debounce(
-  ({ id, updatedData }) => updateContact({ id, updatedData }),
-  600,
-  false
-);
-
-const ROUTE_MAPPINGS = {
-  contacts_dashboard_labels_index: 'contacts_dashboard_labels_edit_index',
-  contacts_dashboard_segments_index: 'contacts_dashboard_segments_edit_index',
+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 dynamicRouteName =
-    ROUTE_MAPPINGS[route.name] || 'contacts_dashboard_edit_index';
+  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] }),
+  };
 
-  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: dynamicRouteName, params, query: route.query });
+  await router.push({ name, params, query: route.query });
 };
 
 const toggleExpanded = id => {
@@ -57,7 +61,7 @@ const toggleExpanded = id => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-4 px-6 pt-4 pb-6">
     <ContactsCard
       v-for="contact in contacts"
       :id="contact.id"
@@ -68,8 +72,9 @@ const toggleExpanded = id => {
       :phone-number="contact.phoneNumber"
       :additional-attributes="contact.additionalAttributes"
       :is-expanded="expandedCardId === contact.id"
+      :is-updating="isUpdating"
       @toggle="toggleExpanded(contact.id)"
-      @update-contact="handleFormUpdate"
+      @update-contact="updateContact"
       @show-contact="onClickViewDetails"
     />
   </div>

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(() => {

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(() => {

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)"
     >

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)"

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;
+            @apply text-n-slate-10 dark:text-n-slate-10 !important;
           }
         }
       }

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"
@@ -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"
@@ -95,7 +96,7 @@ const togglePortalSwitcher = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto py-3">
+      <div class="w-full max-w-[960px] mx-auto py-3">
         <slot name="content" />
       </div>
     </main>

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"

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')"
       />
@@ -110,7 +111,7 @@ onMounted(() => {
             custom-label-class="min-w-[120px]"
           />
         </div>
-        <div class="flex justify-between w-full gap-3 py-2">
+        <div class="flex justify-between w-full gap-2 py-2">
           <label
             class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
           >

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"

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

@@ -1,194 +0,0 @@
-<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.js';
-
-import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
-
-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 directUploadsEnabled = computed(
-  () => globalConfig.value.directUploadsEnabled
-);
-const uiFlags = useMapGetter('contactConversations/getUIFlags');
-const contactId = computed(() => route.params.contactId || null);
-const activeContact = computed(() => contactById.value(contactId.value));
-
-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 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;
-  onContactSearch('');
-};
-
-const clearSelectedContact = () => {
-  selectedContact.value = null;
-  targetInbox.value = null;
-};
-
-const closeCompose = () => {
-  showComposeNewConversation.value = false;
-  selectedContact.value = null;
-  targetInbox.value = null;
-};
-
-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(() => {
-  onContactSearch('');
-});
-
-const keyboardEvents = {
-  Escape: {
-    action: () => {
-      if (showComposeNewConversation.value) {
-        showComposeNewConversation.value = false;
-      }
-    },
-  },
-};
-useKeyboardEvents(keyboardEvents);
-</script>
-
-<template>
-  <div class="relative">
-    <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"
-      @search-contacts="onContactSearch"
-      @update-selected-contact="handleSelectedContact"
-      @update-target-inbox="handleTargetInbox"
-      @clear-selected-contact="clearSelectedContact"
-      @create-conversation="createConversation"
-      @discard="closeCompose"
-    />
-  </div>
-</template>

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

@@ -1,251 +0,0 @@
-<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 { 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 { 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-clickaway="() => (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>

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

@@ -1,88 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { fileNameWithEllipsis } from '@chatwoot/utils';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['update:attachments']);
-
-const isTypeImage = file => {
-  const type = file.content_type || file.type;
-  return type.includes('image');
-};
-
-const filteredImageAttachments = computed(() => {
-  return props.attachments.filter(attachment =>
-    isTypeImage(attachment.resource)
-  );
-});
-
-const filteredNonImageAttachments = computed(() => {
-  return props.attachments.filter(
-    attachment => !isTypeImage(attachment.resource)
-  );
-});
-
-const removeAttachment = id => {
-  const updatedAttachments = props.attachments.filter(
-    attachment => attachment.resource.id !== id
-  );
-  emit('update:attachments', updatedAttachments);
-};
-</script>
-
-<template>
-  <div class="flex flex-col gap-4 p-4">
-    <div
-      v-if="filteredImageAttachments.length > 0"
-      class="flex flex-wrap gap-3"
-    >
-      <div
-        v-for="attachment in filteredImageAttachments"
-        :key="attachment.id"
-        class="relative group/image w-[72px] h-[72px]"
-      >
-        <img
-          class="object-cover w-[72px] h-[72px] rounded-lg"
-          :src="attachment.thumb"
-        />
-        <Button
-          variant="ghost"
-          icon="i-lucide-trash"
-          color="slate"
-          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
-          @click="removeAttachment(attachment.resource.id)"
-        />
-      </div>
-    </div>
-    <div
-      v-if="filteredNonImageAttachments.length > 0"
-      class="flex flex-wrap gap-3"
-    >
-      <div
-        v-for="attachment in filteredNonImageAttachments"
-        :key="attachment.id"
-        class="max-w-[300px] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
-      >
-        <span class="text-sm font-medium text-n-slate-11">
-          {{ fileNameWithEllipsis(attachment.resource) }}
-        </span>
-        <Button
-          variant="ghost"
-          icon="i-lucide-x"
-          color="slate"
-          size="xs"
-          class="shrink-0 !h-5 !w-5"
-          @click="removeAttachment(attachment.resource.id)"
-        />
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,170 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import ComposeNewConversationForm from './ComposeNewConversationForm.vue';
-
-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,
-  },
-];
-
-const selectedContact = ref({
-  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',
-      email: '+1223233434',
-      channelType: 'Channel::Whatsapp',
-    },
-    {
-      id: 9,
-      label: 'PaperLayer API',
-      name: 'PaperLayer API',
-      email: '',
-      channelType: 'Channel::Api',
-    },
-  ],
-});
-
-const targetInbox = ref({
-  id: 7,
-  label: 'PaperLayer Email (testba@paperlayer.test)',
-  name: 'PaperLayer Email',
-  email: 'testba@paperlayer.test',
-  channelType: 'Channel::Email',
-});
-
-const currentUser = {
-  id: 1,
-  name: 'John Doe',
-  email: 'john@example.com',
-};
-
-// Event handlers
-const onSearchContacts = query => {
-  console.log('Searching contacts:', query);
-};
-
-const onUpdateSelectedContact = contact => {
-  console.log('Selected contact updated:', contact);
-};
-
-const onUpdateTargetInbox = 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>

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

@@ -1,340 +0,0 @@
-<script setup>
-import { reactive, ref, computed } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { required, requiredIf } from '@vuelidate/validators';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import {
-  appendSignature,
-  removeSignature,
-} 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 showBccInput = ref(false);
-
-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 toggleBccInput = () => {
-  showBccInput.value = !showBccInput.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"
-      :show-bcc-input="showBccInput"
-      :is-loading="isLoading"
-      :has-errors="validationStates.isSubjectInvalid"
-      @search-cc-emails="searchCcEmails"
-      @search-bcc-emails="searchBccEmails"
-      @toggle-bcc="toggleBccInput"
-      @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>

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

@@ -1,141 +0,0 @@
-<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>

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

@@ -1,137 +0,0 @@
-<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';
-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 },
-  showBccInput: { type: Boolean, default: false },
-  isLoading: { type: Boolean, default: false },
-  hasErrors: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-  'searchCcEmails',
-  'searchBccEmails',
-  'toggleBcc',
-  'updateDropdown',
-]);
-
-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(',');
-};
-</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('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.SUBJECT_PLACEHOLDER')
-        "
-        :label="t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.SUBJECT_LABEL')"
-        focus-on-mount
-        :custom-input-class="
-          hasErrors
-            ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
-            : ''
-        "
-      />
-    </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('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.CC_LABEL') }}
-      </label>
-      <div class="flex items-center w-full gap-3 min-h-7">
-        <TagInput
-          :model-value="ccEmailsArray"
-          :placeholder="
-            t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.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('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.BCC_BUTTON')"
-          variant="ghost"
-          size="sm"
-          color="slate"
-          class="flex-shrink-0"
-          @click="emit('toggleBcc')"
-        />
-      </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('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.BCC_LABEL') }}
-      </label>
-      <TagInput
-        :model-value="bccEmailsArray"
-        :placeholder="
-          t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.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>

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

@@ -1,9 +0,0 @@
-<template>
-  <div
-    class="flex items-center w-full px-4 py-3 dark:bg-n-amber-11/15 bg-n-amber-3"
-  >
-    <span class="text-sm dark:text-n-amber-11 text-n-amber-11">
-      {{ $t('COMPOSE_NEW_CONVERSATION.FORM.NO_INBOX_ALERT') }}
-    </span>
-  </div>
-</template>

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

@@ -1,90 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-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-clickaway="() => 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>

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

@@ -1,65 +0,0 @@
-<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>

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

@@ -1,126 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
-
-const props = defineProps({
-  messageTemplates: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['sendMessage']);
-
-const { t } = useI18n();
-
-// TODO: Remove this when we support all formats
-const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
-
-const searchQuery = ref('');
-const selectedTemplate = ref(null);
-
-const showTemplatesMenu = ref(false);
-
-const whatsAppTemplateMessages = computed(() => {
-  // Add null check and ensure it's an array
-  const templates = Array.isArray(props.messageTemplates)
-    ? props.messageTemplates
-    : [];
-
-  // TODO: Remove the last filter when we support all formats
-  return templates
-    .filter(template => template?.status?.toLowerCase() === 'approved')
-    .filter(template => {
-      return template?.components?.every(component => {
-        return !formatsToRemove.includes(component.format);
-      });
-    });
-});
-
-const filteredTemplates = computed(() => {
-  return whatsAppTemplateMessages.value.filter(template =>
-    template.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  );
-});
-
-const getTemplateBody = template => {
-  return template.components.find(component => component.type === 'BODY').text;
-};
-
-const handleTriggerClick = () => {
-  searchQuery.value = '';
-  showTemplatesMenu.value = !showTemplatesMenu.value;
-};
-
-const handleTemplateClick = template => {
-  selectedTemplate.value = template;
-  showTemplatesMenu.value = false;
-};
-
-const handleBack = () => {
-  selectedTemplate.value = null;
-  showTemplatesMenu.value = true;
-};
-
-const handleSendMessage = template => {
-  emit('sendMessage', template);
-  selectedTemplate.value = null;
-};
-</script>
-
-<template>
-  <div class="relative">
-    <Button
-      icon="i-ri-whatsapp-line"
-      :label="t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.LABEL')"
-      color="slate"
-      size="sm"
-      :disabled="selectedTemplate"
-      class="!text-xs font-medium"
-      @click="handleTriggerClick"
-    />
-    <div
-      v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[350px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-    >
-      <div class="relative w-full">
-        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
-        <input
-          v-model="searchQuery"
-          type="search"
-          :placeholder="
-            t(
-              'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
-            )
-          "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
-        />
-      </div>
-      <div
-        v-for="template in filteredTemplates"
-        :key="template.id"
-        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
-        @click="handleTemplateClick(template)"
-      >
-        <span class="text-sm text-n-slate-12">{{ template.name }}</span>
-        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
-          {{ getTemplateBody(template) }}
-        </p>
-      </div>
-      <template v-if="filteredTemplates.length === 0">
-        <p class="w-full pt-2 text-sm text-n-slate-11">
-          {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
-        </p>
-      </template>
-    </div>
-    <WhatsappTemplateParser
-      v-if="selectedTemplate"
-      :template="selectedTemplate"
-      @send-message="handleSendMessage"
-      @back="handleBack"
-    />
-  </div>
-</template>

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

@@ -1,176 +0,0 @@
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { requiredIf } from '@vuelidate/validators';
-import { useI18n } from 'vue-i18n';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  template: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'back']);
-
-const { t } = useI18n();
-
-const processedParams = ref({});
-
-const templateName = computed(() => {
-  return props.template?.name || '';
-});
-
-const templateString = computed(() => {
-  return props.template?.components?.find(
-    component => component.type === 'BODY'
-  ).text;
-});
-
-const processVariable = str => {
-  return str.replace(/{{|}}/g, '');
-};
-
-const processedString = computed(() => {
-  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
-    const variableKey = processVariable(variable);
-    return processedParams.value[variableKey] || `{{${variable}}}`;
-  });
-});
-
-const processedStringWithVariableHighlight = computed(() => {
-  const variables = templateString.value.match(/{{([^}]+)}}/g) || [];
-
-  return variables.reduce((result, variable) => {
-    const variableKey = processVariable(variable);
-    const value = processedParams.value[variableKey] || variable;
-    return result.replace(
-      variable,
-      `<span class="break-all text-n-slate-12">${value}</span>`
-    );
-  }, templateString.value);
-});
-
-const rules = computed(() => {
-  const paramRules = {};
-  Object.keys(processedParams.value).forEach(key => {
-    paramRules[key] = { required: requiredIf(true) };
-  });
-  return {
-    processedParams: paramRules,
-  };
-});
-
-const v$ = useVuelidate(rules, { processedParams });
-
-const getFieldErrorType = key => {
-  if (!v$.value.processedParams[key]?.$error) return 'info';
-  return 'error';
-};
-
-const generateVariables = () => {
-  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
-  if (!matchedVariables) return;
-
-  const finalVars = matchedVariables.map(i => processVariable(i));
-  processedParams.value = finalVars.reduce((acc, variable) => {
-    acc[variable] = '';
-    return acc;
-  }, {});
-};
-
-const sendMessage = async () => {
-  const isValid = await v$.value.$validate();
-  if (!isValid) return;
-
-  const payload = {
-    message: processedString.value,
-    templateParams: {
-      name: props.template.name,
-      category: props.template.category,
-      language: props.template.language,
-      namespace: props.template.namespace,
-      processed_params: processedParams.value,
-    },
-  };
-  emit('sendMessage', payload);
-};
-
-onMounted(() => {
-  generateVariables();
-});
-</script>
-
-<template>
-  <div
-    class="absolute top-full mt-1.5 max-h-[500px] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-  >
-    <span class="text-sm text-n-slate-12">
-      {{
-        t(
-          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.TEMPLATE_NAME',
-          { templateName: templateName }
-        )
-      }}
-    </span>
-    <p
-      class="mb-0 text-sm text-n-slate-11"
-      v-html="processedStringWithVariableHighlight"
-    />
-
-    <span
-      v-if="Object.keys(processedParams).length"
-      class="text-sm font-medium text-n-slate-12"
-    >
-      {{
-        t(
-          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.VARIABLES'
-        )
-      }}
-    </span>
-
-    <div
-      v-for="(variable, key) in processedParams"
-      :key="key"
-      class="flex items-center w-full gap-2"
-    >
-      <span
-        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
-      >
-        {{ key }}
-      </span>
-      <Input
-        v-model="processedParams[key]"
-        custom-input-class="!h-8 w-full !bg-transparent"
-        class="w-full"
-        :message-type="getFieldErrorType(key)"
-      />
-    </div>
-
-    <div class="flex items-end justify-between w-full gap-3 h-14">
-      <Button
-        :label="
-          t(
-            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
-          )
-        "
-        color="slate"
-        variant="faded"
-        class="w-full font-medium"
-        @click="emit('back')"
-      />
-      <Button
-        :label="
-          t(
-            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
-          )
-        "
-        class="w-full font-medium"
-        @click="sendMessage"
-      />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -1,183 +0,0 @@
-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('::');
-  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 getCapitalizedNameFromEmail = email => {
-  const name = email.match(/^([^@]*)@/)?.[1] || email.split('@')[0];
-  return name.charAt(0).toUpperCase() + name.slice(1);
-};
-
-export const processContactableInboxes = inboxes => {
-  return inboxes.map(inbox => ({
-    ...inbox.inbox,
-    sourceId: inbox.sourceId,
-  }));
-};
-
-export const prepareAttachmentPayload = (
-  attachedFiles,
-  directUploadsEnabled
-) => {
-  const files = [];
-  attachedFiles.forEach(attachment => {
-    if (directUploadsEnabled) {
-      files.push(attachment.blobSignedId);
-    } else {
-      files.push(attachment.resource.file);
-    }
-  });
-  return files;
-};
-
-export const prepareNewMessagePayload = ({
-  targetInbox,
-  selectedContact,
-  message,
-  subject,
-  ccEmails,
-  bccEmails,
-  currentUser,
-  attachedFiles = [],
-  directUploadsEnabled = false,
-}) => {
-  const payload = {
-    inboxId: targetInbox.id,
-    sourceId: targetInbox.sourceId,
-    contactId: Number(selectedContact.id),
-    message: { content: message },
-    assigneeId: currentUser.id,
-  };
-
-  if (attachedFiles?.length) {
-    payload.files = prepareAttachmentPayload(
-      attachedFiles,
-      directUploadsEnabled
-    );
-  }
-
-  if (subject) {
-    payload.mailSubject = subject;
-  }
-
-  if (ccEmails) {
-    payload.message.cc_emails = ccEmails;
-  }
-
-  if (bccEmails) {
-    payload.message.bcc_emails = bccEmails;
-  }
-
-  return payload;
-};
-
-export const prepareWhatsAppMessagePayload = ({
-  targetInbox,
-  selectedContact,
-  message,
-  templateParams,
-  currentUser,
-}) => {
-  return {
-    inboxId: targetInbox.id,
-    sourceId: targetInbox.sourceId,
-    contactId: selectedContact.id,
-    message: { content: message, template_params: templateParams },
-    assigneeId: currentUser.id,
-  };
-};
-
-export const generateContactQuery = ({ query }) => {
-  return {
-    payload: [
-      {
-        attribute_key: 'email',
-        filter_operator: 'contains',
-        values: [query],
-        attribute_model: 'standard',
-        custom_attribute_type: '',
-      },
-    ],
-  };
-};
-
-// API Calls
-export const searchContacts = async query => {
-  const {
-    data: { payload },
-  } = await ContactAPI.filter(
-    undefined,
-    'name',
-    generateContactQuery({ 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);
-};

app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js

@@ -1,372 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import ContactAPI from 'dashboard/api/contacts';
-import * as helpers from '../composeConversationHelper';
-
-vi.mock('dashboard/api/contacts');
-
-describe('composeConversationHelper', () => {
-  describe('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('getCapitalizedNameFromEmail', () => {
-    it('extracts and capitalizes name from email', () => {
-      expect(helpers.getCapitalizedNameFromEmail('john.doe@example.com')).toBe(
-        'John.doe'
-      );
-      expect(helpers.getCapitalizedNameFromEmail('jane@example.com')).toBe(
-        'Jane'
-      );
-    });
-  });
-
-  describe('processContactableInboxes', () => {
-    it('processes inboxes with correct structure', () => {
-      const inboxes = [
-        {
-          inbox: { id: 1, name: 'Inbox 1' },
-          sourceId: 'source1',
-        },
-      ];
-
-      const result = helpers.processContactableInboxes(inboxes);
-      expect(result[0]).toEqual({
-        id: 1,
-        name: 'Inbox 1',
-        sourceId: 'source1',
-      });
-    });
-  });
-
-  describe('prepareAttachmentPayload', () => {
-    it('prepares direct upload files', () => {
-      const files = [{ blobSignedId: 'signed1' }];
-      expect(helpers.prepareAttachmentPayload(files, true)).toEqual([
-        'signed1',
-      ]);
-    });
-
-    it('prepares regular files', () => {
-      const files = [{ resource: { file: 'file1' } }];
-      expect(helpers.prepareAttachmentPayload(files, false)).toEqual(['file1']);
-    });
-  });
-
-  describe('prepareNewMessagePayload', () => {
-    const baseParams = {
-      targetInbox: { id: 1, sourceId: 'source1' },
-      selectedContact: { id: '2' },
-      message: 'Hello',
-      currentUser: { id: 3 },
-    };
-
-    it('prepares basic message payload', () => {
-      const result = helpers.prepareNewMessagePayload(baseParams);
-      expect(result).toEqual({
-        inboxId: 1,
-        sourceId: 'source1',
-        contactId: 2,
-        message: { content: 'Hello' },
-        assigneeId: 3,
-      });
-    });
-
-    it('includes optional fields when provided', () => {
-      const result = helpers.prepareNewMessagePayload({
-        ...baseParams,
-        subject: 'Test',
-        ccEmails: 'cc@test.com',
-        bccEmails: 'bcc@test.com',
-        attachedFiles: [{ blobSignedId: 'file1' }],
-        directUploadsEnabled: true,
-      });
-
-      expect(result).toMatchObject({
-        mailSubject: 'Test',
-        message: {
-          content: 'Hello',
-          cc_emails: 'cc@test.com',
-          bcc_emails: 'bcc@test.com',
-        },
-        files: ['file1'],
-      });
-    });
-  });
-
-  describe('prepareWhatsAppMessagePayload', () => {
-    it('prepares whatsapp message payload', () => {
-      const params = {
-        targetInbox: { id: 1, sourceId: 'source1' },
-        selectedContact: { id: 2 },
-        message: 'Hello',
-        templateParams: { param1: 'value1' },
-        currentUser: { id: 3 },
-      };
-
-      const result = helpers.prepareWhatsAppMessagePayload(params);
-      expect(result).toEqual({
-        inboxId: 1,
-        sourceId: 'source1',
-        contactId: 2,
-        message: {
-          content: 'Hello',
-          template_params: { param1: 'value1' },
-        },
-        assigneeId: 3,
-      });
-    });
-  });
-
-  describe('generateContactQuery', () => {
-    it('generates correct query structure for contact search', () => {
-      const query = 'test@example.com';
-      const expected = {
-        payload: [
-          {
-            attribute_key: 'email',
-            filter_operator: 'contains',
-            values: [query],
-            attribute_model: 'standard',
-            custom_attribute_type: '',
-          },
-        ],
-      };
-
-      expect(helpers.generateContactQuery({ query })).toEqual(expected);
-    });
-
-    it('handles empty query', () => {
-      const expected = {
-        payload: [
-          {
-            attribute_key: 'email',
-            filter_operator: 'contains',
-            values: [''],
-            attribute_model: 'standard',
-            custom_attribute_type: '',
-          },
-        ],
-      };
-
-      expect(helpers.generateContactQuery({ query: '' })).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('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',
-          helpers.generateContactQuery({ query: 'john' })
-        );
-      });
-
-      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([]);
-      });
-    });
-  });
-});

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 = () => {

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>

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,

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -25,10 +25,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  isSearching: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['action']);
@@ -85,6 +81,7 @@ onMounted(() => {
       }"
       :disabled="item.disabled"
       @click="handleAction(item)"
+      @keydown.enter="handleAction(item)"
     >
       <slot name="thumbnail" :item="item">
         <Avatar
@@ -105,11 +102,7 @@ onMounted(() => {
       v-if="filteredMenuItems.length === 0"
       class="text-sm text-n-slate-11 px-2 py-1.5"
     >
-      {{
-        isSearching
-          ? t('DROPDOWN_MENU.SEARCHING')
-          : t('DROPDOWN_MENU.EMPTY_STATE')
-      }}
+      {{ t('DROPDOWN_MENU.EMPTY_STATE') }}
     </div>
   </div>
 </template>

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>

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>

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>
 

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>

app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue

@@ -0,0 +1,119 @@
+<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', 'openFilter']);
+
+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 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"
+          >
+            {{ 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 hover:text-n-slate-11 h-7 hover:cursor-pointer"
+      @click="emit('openFilter')"
+    >
+      {{ 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>

app/javascript/dashboard/components-next/filter/ConditionRow.story.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { ref, useTemplateRef } 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 conditionsRef = useTemplateRef('conditionsRef');
+
+const removeFilter = index => {
+  filters.value.splice(index, 1);
+};
+
+const showQueryOperator = true;
+
+const addFilter = () => {
+  filters.value.push({ ...DEFAULT_FILTER });
+};
+
+const saveFilter = () => {
+  console.log(conditionsRef.value.every(condition => condition.validate()));
+};
+</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"
+          ref="conditionsRef"
+          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
+          ref="conditionsRef"
+          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>
+      <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>

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -0,0 +1,201 @@
+<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 { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+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(() => {
+  // 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 => {
+  /**
+   * 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>

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>

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>

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>

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 };
+}

app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js

@@ -0,0 +1,603 @@
+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',
+  },
+];
+
+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',
+  },
+];

app/javascript/dashboard/components-next/filter/helper/filterHelper.js

@@ -0,0 +1,49 @@
+/**
+ * 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',
+  }));
+};
+
+/**
+ * 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('_', ' ') ?? '';

app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js

@@ -0,0 +1,137 @@
+import {
+  getCustomAttributeInputType,
+  buildAttributesFilterTypes,
+  replaceUnderscoreWithSpace,
+} 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([]);
+    });
+  });
+
+  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('');
+    });
+  });
+});

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"

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"

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

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,
+  };
+}

app/javascript/dashboard/components-next/filter/provider.js

@@ -0,0 +1,243 @@
+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 { buildAttributesFilterTypes } from './helper/filterHelper';
+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
+ */
+
+/**
+ * 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(() =>
+    buildAttributesFilterTypes(conversationAttributes.value, getOperatorTypes)
+  );
+
+  /**
+   * @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,
+  ]);
+
+  return { filterTypes };
+}

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
-
-const props = defineProps({
+defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
   type: {
     type: String,
     default: 'text',
@@ -30,45 +32,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  focusOnMount: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits(['enterPress', 'input', 'blur']);
-
-const modelValue = defineModel({
-  type: [String, Number],
-  default: '',
-});
-
-const inlineInputRef = ref(null);
+const emit = defineEmits(['update:modelValue', 'enterPress']);
 
 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);
-};
-
-onMounted(() => {
-  nextTick(() => {
-    if (props.focusOnMount) {
-      inlineInputRef.value?.focus();
-    }
-  });
-});
-
-defineExpose({
-  focus: () => inlineInputRef.value?.focus(),
-});
 </script>
 
 <template>
@@ -79,7 +49,7 @@ defineExpose({
       v-if="label"
       :for="id"
       :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-n-slate-11"
+      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
     >
       {{ label }}
     </label>
@@ -87,15 +57,13 @@ defineExpose({
     <slot name="prefix" />
     <input
       :id="id"
-      ref="inlineInputRef"
-      v-model="modelValue"
+      :value="modelValue"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :class="customInputClass"
-      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"
-      @blur="handleBlur"
+      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)"
       @keydown.enter.prevent="onEnterPress"
     />
   </div>

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"

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(() => {

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

@@ -7,7 +7,6 @@ import { useMapGetter } from 'dashboard/composables/store';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import SidebarGroup from './SidebarGroup.vue';
@@ -60,11 +59,7 @@ provideSidebarContext({
 const inboxes = useMapGetter('inboxes/getInboxes');
 const labels = useMapGetter('labels/getLabelsOnSidebar');
 const teams = useMapGetter('teams/getMyTeams');
-const currentAccountId = useMapGetter('getCurrentAccountId');
 const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
 const conversationCustomViews = useMapGetter(
   'customViews/getConversationCustomViews'
 );
@@ -83,13 +78,6 @@ const sortedInboxes = computed(() =>
   inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
 );
 
-const showV4Feature = computed(() => {
-  return isFeatureEnabledonAccount.value(
-    currentAccountId.value,
-    FEATURE_FLAGS.CHATWOOT_V4
-  );
-});
-
 const menuItems = computed(() => {
   return [
     {
@@ -201,119 +189,63 @@ const menuItems = computed(() => {
         },
       ],
     },
-    !showV4Feature.value
-      ? {
-          name: 'Contacts',
-          label: t('SIDEBAR.CONTACTS'),
-          icon: 'i-lucide-contact',
-          children: [
-            {
-              name: 'All Contacts',
-              label: t('SIDEBAR.ALL_CONTACTS'),
-              to: accountScopedRoute('contacts_dashboard'),
-            },
-            {
-              name: 'Segments',
-              icon: 'i-lucide-group',
-              label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
-              children: contactCustomViews.value.map(view => ({
-                name: `${view.name}-${view.id}`,
-                label: view.name,
-                to: accountScopedRoute('contacts_segments_dashboard', {
-                  id: view.id,
-                }),
-              })),
-            },
-            {
-              name: 'Tagged With',
-              icon: 'i-lucide-tag',
-              label: t('SIDEBAR.TAGGED_WITH'),
-              children: labels.value.map(label => ({
-                name: `${label.title}-${label.id}`,
-                label: label.title,
-                icon: h('span', {
-                  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,
-                }),
-              })),
-            },
-          ],
-        }
-      : {
-          name: 'Contacts',
-          label: t('SIDEBAR.CONTACTS'),
-          icon: 'i-lucide-contact',
-          children: [
-            {
-              name: 'All Contacts',
-              label: t('SIDEBAR.ALL_CONTACTS'),
-              to: accountScopedRoute(
-                'contacts_dashboard_index',
-                {},
-                {
-                  page: 1,
-                  search: undefined,
-                }
-              ),
-              activeOn: [
-                'contacts_dashboard_index',
-                'contacts_dashboard_edit_index',
-              ],
-            },
-            {
-              name: 'Segments',
-              icon: 'i-lucide-group',
-              label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
-              children: contactCustomViews.value.map(view => ({
-                name: `${view.name}-${view.id}`,
-                label: view.name,
-                to: accountScopedRoute(
-                  'contacts_dashboard_segments_index',
-                  {
-                    segmentId: view.id,
-                  },
-                  {
-                    page: 1,
-                  }
-                ),
-                activeOn: [
-                  'contacts_dashboard_segments_index',
-                  'contacts_dashboard_segments_edit_index',
-                ],
-              })),
-            },
-            {
-              name: 'Tagged With',
-              icon: 'i-lucide-tag',
-              label: t('SIDEBAR.TAGGED_WITH'),
-              children: labels.value.map(label => ({
-                name: `${label.title}-${label.id}`,
-                label: label.title,
-                icon: h('span', {
-                  class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
-                  style: { backgroundColor: label.color },
-                }),
-                to: accountScopedRoute(
-                  'contacts_dashboard_labels_index',
-                  {
-                    label: label.title,
-                  },
-                  {
-                    page: 1,
-                    search: undefined,
-                  }
-                ),
-                activeOn: [
-                  'contacts_dashboard_labels_index',
-                  'contacts_dashboard_labels_edit_index',
-                ],
-              })),
-            },
-          ],
+    {
+      name: 'Contacts',
+      label: t('SIDEBAR.CONTACTS'),
+      icon: 'i-lucide-contact',
+      children: [
+        {
+          name: 'All Contacts',
+          label: t('SIDEBAR.ALL_CONTACTS'),
+          to: accountScopedRoute(
+            'contacts_dashboard_index',
+            {},
+            { page: 1, search: undefined }
+          ),
+          activeOn: ['contacts_dashboard_index', 'contacts_edit'],
         },
+        {
+          name: 'Segments',
+          icon: 'i-lucide-group',
+          label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
+          children: contactCustomViews.value.map(view => ({
+            name: `${view.name}-${view.id}`,
+            label: view.name,
+            to: accountScopedRoute(
+              'contacts_dashboard_segments_index',
+              { segmentId: view.id },
+              { page: 1 }
+            ),
+            activeOn: [
+              'contacts_dashboard_segments_index',
+              'contacts_edit_segment',
+            ],
+          })),
+        },
+        {
+          name: 'Tagged With',
+          icon: 'i-lucide-tag',
+          label: t('SIDEBAR.TAGGED_WITH'),
+          children: labels.value.map(label => ({
+            name: `${label.title}-${label.id}`,
+            label: label.title,
+            icon: h('span', {
+              class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
+              style: { backgroundColor: label.color },
+            }),
+            to: accountScopedRoute(
+              'contacts_dashboard_labels_index',
+              { label: label.title },
+              { page: 1, search: undefined }
+            ),
+            activeOn: [
+              'contacts_dashboard_labels_index',
+              'contacts_edit_label',
+            ],
+          })),
+        },
+      ],
+    },
     {
       name: 'Reports',
       label: t('SIDEBAR.REPORTS'),
@@ -334,11 +266,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'),
@@ -364,6 +291,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'),
+        },
       ],
     },
     {

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"

app/javascript/dashboard/components-next/taginput/TagInput.vue

@@ -1,166 +1,51 @@
 <script setup>
 import { ref, computed, watch } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import { email } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
 
 const props = defineProps({
-  placeholder: { type: String, default: '' },
-  disabled: { type: Boolean, default: false },
-  type: { type: String, default: 'text' },
-  isLoading: { type: Boolean, default: false },
-  menuItems: {
+  modelValue: {
     type: Array,
     default: () => [],
-    validator: value =>
-      value.every(
-        ({ action, value: tagValue, label }) => action && tagValue && label
-      ),
   },
-  showDropdown: { type: Boolean, default: false },
-  mode: {
+  placeholder: {
     type: String,
-    default: 'multiple',
-    validator: value => ['single', 'multiple'].includes(value),
+    default: '',
   },
-  focusOnMount: { type: Boolean, default: false },
-  allowCreate: { type: Boolean, default: false },
 });
 
-const emit = defineEmits([
-  'update:modelValue',
-  'input',
-  'blur',
-  'focus',
-  'onClickOutside',
-  'add',
-  'remove',
-]);
+const emit = defineEmits(['update:modelValue']);
 
-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(true);
+const isFocused = ref(false);
 
-const rules = computed(() => ({
-  newTag: props.type === 'email' ? { email } : {},
-}));
+const showInput = computed(() => isFocused.value || tags.value.length === 0);
 
-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) {
+const addTag = () => {
+  if (newTag.value.trim()) {
+    tags.value.push(newTag.value.trim());
     newTag.value = '';
-    return;
+    emit('update:modelValue', tags.value);
   }
-
-  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);
-  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();
+  emit('update:modelValue', tags.value);
 };
 
 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();
@@ -168,76 +53,43 @@ 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>
-  <div
-    v-on-clickaway="() => handleClickOutside()"
-    class="flex flex-wrap w-full gap-2 border border-transparent focus:outline-none"
-    tabindex="0"
-    @focus="handleFocus"
-    @click="handleFocus"
-  >
+  <OnClickOutside @trigger="handleClickOutside">
     <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"
+      class="flex flex-wrap w-full gap-2 border border-transparent focus:outline-none"
+      tabindex="0"
+      @focus="handleFocus"
+      @click="handleFocus"
     >
-      <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>
-    <div class="relative flex items-center gap-2 flex-1 min-w-[200px] w-full">
+      <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"
-        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' : ''}`"
+        custom-input-class="flex-grow"
         @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>
+  </OnClickOutside>
 </template>

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-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"
+        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"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

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>
 

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"

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',
   ],

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)"
         >

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"

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>

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>

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>

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

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

@@ -1,146 +0,0 @@
-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();
-  });
-});

app/javascript/dashboard/composables/useFileUpload.js

@@ -1,91 +0,0 @@
-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,
-  };
-};

app/javascript/dashboard/composables/useTransformKeys.js

@@ -0,0 +1,38 @@
+// 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);
+}
+
+/**
+ * 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());
+}

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 -----------------------
 // ------------------------------------------------------------------
@@ -20,7 +38,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;
   }
@@ -29,12 +47,11 @@ 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;
   }
 

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",

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

@@ -12,8 +12,7 @@
   },
   "DROPDOWN_MENU": {
     "SEARCH_PLACEHOLDER": "Search...",
-    "EMPTY_STATE": "No results found.",
-    "SEARCHING": "Searching..."
+    "EMPTY_STATE": "No results found."
   },
   "DIALOG": {
     "BUTTONS": {

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

@@ -393,7 +393,6 @@
       "SEARCH_TITLE": "Search contacts",
       "SEARCH_PLACEHOLDER": "Search...",
       "MESSAGE_BUTTON": "Message",
-      "SEND_MESSAGE": "Send message",
       "BREADCRUMB": {
         "CONTACTS": "Contacts"
       },
@@ -402,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",
@@ -442,13 +445,63 @@
             "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"
     },
+    "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"
+      },
+      "ACTIVE_FILTERS": {
+        "MORE_FILTERS": "+ {count} more filters",
+        "CLEAR_FILTERS": "Clear filters"
+      }
+    },
     "CARD": {
+      "OF": "of",
       "VIEW_DETAILS": "View details",
       "EDIT_DETAILS_FORM": {
         "TITLE": "Edit contact details",
@@ -460,10 +513,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"
@@ -477,7 +532,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",
@@ -532,36 +590,9 @@
         "NOTES": "Notes",
         "MERGE": "Merge"
       },
-      "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."
-      },
       "HISTORY": {
         "EMPTY_STATE": "There are no previous conversations associated to this contact"
       },
-      "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"
-        }
-      },
       "ATTRIBUTES": {
         "SEARCH_PLACEHOLDER": "Search for attributes",
         "UNUSED_ATTRIBUTES": "{count} Used attribute | {count} Unused attributes",
@@ -586,6 +617,33 @@
           "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.",
+        "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",
+        "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."
       }
     },
     "EMPTY_STATE": {
@@ -595,53 +653,5 @@
       "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": "Could not search for contacts. Please try again later."
-    },
-    "FORM": {
-      "GO_TO_CONVERSATION": "View",
-      "SUCCESS_MESSAGE": "Conversation created successfully",
-      "ERROR_MESSAGE": "Could not create conversation. Please try again later.",
-      "NO_INBOX_ALERT": "Couldn't find an inbox to initiate a new conversation with this contact.",
-      "CONTACT_SELECTOR": {
-        "LABEL": "To :",
-        "TAG_INPUT_PLACEHOLDER": "Search or enter email and press Enter",
-        "CONTACT_CREATING": "Creating contact..."
-      },
-      "INBOX_SELECTOR": {
-        "LABEL": "Via inbox :",
-        "BUTTON": "Show inboxes"
-      },
-      "EMAIL_OPTIONS": {
-        "SUBJECT_LABEL": "Subject :",
-        "SUBJECT_PLACEHOLDER": "Enter your email subject here",
-        "CC_LABEL": "Cc :",
-        "CC_PLACEHOLDER": "Search or enter email and press Enter",
-        "BCC_LABEL": "Bcc :",
-        "BCC_PLACEHOLDER": "Search or enter email 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})"
-      }
-    }
   }
 }

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

@@ -1,63 +0,0 @@
-import { frontendURL } from 'dashboard/helper/URLHelper.js';
-
-import ContactsPageRouteView from './pages/ContactsPageRouteView.vue';
-import EditContactsPageRouteView from './pages/EditContactsPageRouteView.vue';
-
-const contactsRoutes = {
-  routes: [
-    {
-      path: frontendURL('accounts/:accountId/contacts-new'),
-      component: ContactsPageRouteView,
-      name: 'contacts_dashboard_index',
-      meta: {
-        permissions: ['administrator', 'agent', 'contact_manage'],
-      },
-    },
-    {
-      path: frontendURL('accounts/:accountId/contacts-new/:contactId'),
-      component: EditContactsPageRouteView,
-      name: 'contacts_dashboard_edit_index',
-      meta: {
-        permissions: ['administrator', 'agent', 'contact_manage'],
-      },
-    },
-    {
-      path: frontendURL('accounts/:accountId/contacts-new/segments/:segmentId'),
-      component: ContactsPageRouteView,
-      name: 'contacts_dashboard_segments_index',
-      meta: {
-        permissions: ['administrator', 'agent', 'contact_manage'],
-      },
-    },
-    {
-      path: frontendURL(
-        'accounts/:accountId/contacts-new/:contactId/segments/:segmentId'
-      ),
-      component: EditContactsPageRouteView,
-      name: 'contacts_dashboard_segments_edit_index',
-      meta: {
-        permissions: ['administrator', 'agent', 'contact_manage'],
-      },
-    },
-    {
-      path: frontendURL('accounts/:accountId/contacts-new/labels/:label'),
-      component: ContactsPageRouteView,
-      name: 'contacts_dashboard_labels_index',
-      meta: {
-        permissions: ['administrator', 'agent', 'contact_manage'],
-      },
-    },
-    {
-      path: frontendURL(
-        'accounts/:accountId/contacts-new/:contactId/labels/:label'
-      ),
-      component: EditContactsPageRouteView,
-      name: 'contacts_dashboard_labels_edit_index',
-      meta: {
-        permissions: ['administrator', 'agent', 'contact_manage'],
-      },
-    },
-  ],
-};
-
-export default contactsRoutes;