Fix eslint

# Pull Request Template

## Description

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

## Type of change

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

## How Has This Been Tested?

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


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



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

Gemfile.lock

@@ -33,70 +33,70 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actioncable (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionmailbox (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      actionview (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionmailer (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      actionview (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.5)
-      actionview (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionpack (7.0.8.7)
+      actionview (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       rack (~> 2.0, >= 2.2.4)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actiontext (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionview (7.0.8.7)
+      activesupport (= 7.0.8.7)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activejob (7.0.8.7)
+      activesupport (= 7.0.8.7)
       globalid (>= 0.3.6)
-    activemodel (7.0.8.5)
-      activesupport (= 7.0.8.5)
-    activerecord (7.0.8.5)
-      activemodel (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activemodel (7.0.8.7)
+      activesupport (= 7.0.8.7)
+    activerecord (7.0.8.7)
+      activemodel (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    activestorage (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activestorage (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.8.5)
+    activesupport (7.0.8.7)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -452,7 +452,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.22.0)
+    loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -471,8 +471,8 @@ GEM
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
-    minitest (5.25.1)
+    mini_portile2 (2.8.8)
+    minitest (5.25.4)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -502,14 +502,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nokogiri (1.17.1)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.7-arm64-darwin)
+    nokogiri (1.17.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-darwin)
+    nokogiri (1.17.1-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.17.1-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -581,30 +581,30 @@ GEM
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rails (7.0.8.5)
-      actioncable (= 7.0.8.5)
-      actionmailbox (= 7.0.8.5)
-      actionmailer (= 7.0.8.5)
-      actionpack (= 7.0.8.5)
-      actiontext (= 7.0.8.5)
-      actionview (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activemodel (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    rails (7.0.8.7)
+      actioncable (= 7.0.8.7)
+      actionmailbox (= 7.0.8.7)
+      actionmailer (= 7.0.8.7)
+      actionpack (= 7.0.8.7)
+      actiontext (= 7.0.8.7)
+      actionview (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activemodel (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       bundler (>= 1.15.0)
-      railties (= 7.0.8.5)
+      railties (= 7.0.8.7)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
+    rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
-      nokogiri (~> 1.14)
-    railties (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    railties (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)

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/controllers/api/v1/accounts/contacts_controller.rb

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

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

@@ -2,10 +2,22 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
   before_action :hook
 
   def proxy
+    request_url = build_request_url(request_path)
     response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
     render plain: response.body, status: response.code
   end
 
+  def copilot
+    request_url = build_request_url(build_request_path("/assistants/#{hook.settings['assistant_id']}/copilot"))
+    params = {
+      previous_messages: copilot_params[:previous_messages],
+      conversation_history: conversation_history,
+      message: copilot_params[:message]
+    }
+    response = HTTParty.send(:post, request_url, body: params.to_json, headers: headers)
+    render plain: response.body, status: response.code
+  end
+
   private
 
   def headers
@@ -17,15 +29,19 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     }
   end
 
+  def build_request_path(route)
+    "api/accounts/#{hook.settings['account_id']}#{route}"
+  end
+
   def request_path
     request_route = with_leading_hash_on_route(params[:route])
 
     return 'api/sessions/profile' if request_route == '/sessions/profile'
 
-    "api/accounts/#{hook.settings['account_id']}#{request_route}"
+    build_request_path(request_route)
   end
 
-  def request_url
+  def build_request_url(request_path)
     base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
     URI.join(base_url, request_path).to_s
   end
@@ -47,6 +63,15 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     request_route.start_with?('/') ? request_route : "/#{request_route}"
   end
 
+  def conversation_history
+    conversation = Current.account.conversations.find_by!(display_id: copilot_params[:conversation_id])
+    conversation.to_llm_text
+  end
+
+  def copilot_params
+    params.permit(:previous_messages, :conversation_id, :message)
+  end
+
   def permitted_params
     params.permit(:method, :route, body: {})
   end

app/controllers/api/v1/profiles_controller.rb

@@ -17,7 +17,7 @@ class Api::V1::ProfilesController < Api::BaseController
 
   def avatar
     @user.avatar.attachment.destroy! if @user.avatar.attached?
-    head :ok
+    @user.reload
   end
 
   def auto_offline

app/javascript/dashboard/api/contacts.js

@@ -27,6 +27,14 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
+  show(id) {
+    return axios.get(`${this.url}/${id}?include_contact_inboxes=false`);
+  }
+
+  update(id, data) {
+    return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
+  }
+
   getConversations(contactId) {
     return axios.get(`${this.url}/${contactId}/conversations`);
   }

app/javascript/dashboard/api/integrations.js

@@ -36,6 +36,10 @@ class IntegrationsAPI extends ApiClient {
   requestCaptain(body) {
     return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
   }
+
+  requestCaptainCopilot(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/copilot`, body);
+  }
 }
 
 export default new IntegrationsAPI();

app/javascript/dashboard/assets/scss/_woot.scss

@@ -72,6 +72,19 @@
     --slate-11: 96 100 108;
     --slate-12: 28 32 36;
 
+    --iris-1: 253 253 255;
+    --iris-2: 248 248 255;
+    --iris-3: 240 241 254;
+    --iris-4: 230 231 255;
+    --iris-5: 218 220 255;
+    --iris-6: 203 205 255;
+    --iris-7: 184 186 248;
+    --iris-8: 155 158 240;
+    --iris-9: 91 91 214;
+    --iris-10: 81 81 205;
+    --iris-11: 87 83 198;
+    --iris-12: 39 41 98;
+
     --ruby-1: 255 252 253;
     --ruby-2: 255 247 248;
     --ruby-3: 254 234 237;
@@ -122,6 +135,7 @@
     --solid-active: 255 255 255;
     --solid-amber: 252 232 193;
     --solid-blue: 218 236 255;
+    --solid-iris: 230 231 255;
 
     --alpha-1: 67, 67, 67, 0.06;
     --alpha-2: 201, 202, 207, 0.15;
@@ -129,10 +143,10 @@
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
     --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
 
-  body.dark {
+  .dark {
     /* slate */
     --slate-1: 17 17 19;
     --slate-2: 24 25 27;
@@ -147,6 +161,19 @@
     --slate-11: 176 180 186;
     --slate-12: 237 238 240;
 
+    --iris-1: 19 19 30;
+    --iris-2: 23 22 37;
+    --iris-3: 32 34 72;
+    --iris-4: 38 42 101;
+    --iris-5: 48 51 116;
+    --iris-6: 61 62 130;
+    --iris-7: 74 74 149;
+    --iris-8: 89 88 177;
+    --iris-9: 91 91 214;
+    --iris-10: 84 114 228;
+    --iris-11: 158 177 255;
+    --iris-12: 224 223 254;
+
     --ruby-1: 25 17 19;
     --ruby-2: 30 21 23;
     --ruby-3: 58 20 30;
@@ -195,6 +222,7 @@
     --solid-active: 53 57 66;
     --solid-amber: 42 37 30;
     --solid-blue: 16 49 91;
+    --solid-iris: 38 42 101;
     --text-blue: 126 182 255;
 
     --alpha-1: 36, 36, 36, 0.8;
@@ -204,7 +232,7 @@
     --black-alpha-2: 0, 0, 0, 0.2;
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
   /* NEXT COLORS END */
 

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -6,6 +6,14 @@
   @apply border-b border-slate-50 dark:border-slate-800/50;
 }
 
+.tabs--container--compact.tab--chat-type {
+  .tabs-title {
+    a {
+      @apply py-2 text-sm;
+    }
+  }
+}
+
 .tabs {
   @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }

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

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, watch, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/Label/AddLabel.vue';
+
+const props = defineProps({
+  contactId: {
+    type: [String, Number],
+    default: null,
+  },
+});
+
+const store = useStore();
+const route = useRoute();
+
+const showDropdown = ref(false);
+
+const allLabels = useMapGetter('labels/getLabels');
+const contactLabels = useMapGetter('contactLabels/getContactLabels');
+
+const savedLabels = computed(() => {
+  const availableContactLabels = contactLabels.value(props.contactId);
+  return allLabels.value.filter(({ title }) =>
+    availableContactLabels.includes(title)
+  );
+});
+
+const labelMenuItems = computed(() => {
+  return allLabels.value
+    ?.map(label => ({
+      label: label.title,
+      value: label.id,
+      thumbnail: { name: label.title, color: label.color },
+      isSelected: savedLabels.value.some(
+        savedLabel => savedLabel.id === label.id
+      ),
+      action: 'addLabel',
+    }))
+    .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
+});
+
+const fetchLabels = async contactId => {
+  if (!contactId) {
+    return;
+  }
+  store.dispatch('contactLabels/get', contactId);
+};
+
+const handleLabelAction = async ({ action, value }) => {
+  try {
+    // Get current label titles
+    const currentLabels = savedLabels.value.map(label => label.title);
+
+    // Find the label title for the ID (value)
+    const selectedLabel = allLabels.value.find(label => label.id === value);
+    if (!selectedLabel) return;
+
+    let updatedLabels;
+    if (action === 'addLabel') {
+      // If label is already selected, remove it (toggle behavior)
+      if (currentLabels.includes(selectedLabel.title)) {
+        updatedLabels = currentLabels.filter(
+          labelTitle => labelTitle !== selectedLabel.title
+        );
+      } else {
+        // Add the new label
+        updatedLabels = [...currentLabels, selectedLabel.title];
+      }
+    }
+
+    await store.dispatch('contactLabels/update', {
+      contactId: props.contactId,
+      labels: updatedLabels,
+    });
+
+    showDropdown.value = false;
+  } catch (error) {
+    // error
+  }
+};
+
+watch(
+  () => props.contactId,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      fetchLabels(newVal);
+    }
+  }
+);
+onMounted(() => {
+  if (route.params.contactId) {
+    fetchLabels(route.params.contactId);
+  }
+});
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
+    <AddLabel
+      :label-menu-items="labelMenuItems"
+      @update-label="handleLabelAction"
+    />
+  </div>
+</template>

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

@@ -1,10 +1,13 @@
 <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 Flag from 'dashboard/components-next/flag/Flag.vue';
+import countries from 'shared/constants/countries';
 
 const props = defineProps({
   id: { type: Number, required: true },
@@ -14,46 +17,118 @@ 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;
+
+  return {
+    countryCode: activeCountry.id,
+    city: city ? `${city},` : null,
+    name: activeCountry.name,
+  };
+});
+
+const formattedLocation = computed(() => {
+  if (!countryDetails.value) return '';
+
+  return [countryDetails.value.city, countryDetails.value.name]
+    .filter(Boolean)
+    .join(' ');
+});
+
 const handleFormUpdate = updatedData => {
-  emit('updateContact', { id: props.id, updatedData });
+  Object.assign(contactData.value, updatedData);
 };
 
-const onClickViewDetails = async () => {
-  emit('showContact', props.id);
+const handleUpdateContact = () => {
+  emit('updateContact', contactData.value);
 };
+
+const onClickExpand = () => {
+  emit('toggle');
+  contactData.value = getInitialContactData();
+};
+
+const onClickViewDetails = () => emit('showContact', props.id);
 </script>
 
 <template>
   <CardLayout :key="id" layout="row">
-    <div class="flex items-center justify-between gap-4">
+    <div class="flex items-center justify-start flex-1 gap-4">
       <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
-      <div class="flex flex-col gap-1">
-        <div class="flex items-center gap-2">
-          <span class="text-sm font-medium truncate text-n-slate-12">
+      <div class="flex flex-col gap-0.5 flex-1">
+        <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span class="text-base font-medium truncate text-n-slate-12">
             {{ name }}
           </span>
-          <template v-if="additionalAttributes?.companyName">
-            <span class="text-sm text-n-slate-11">
-              {{ t('CONTACTS_LAYOUT.CARD.OF') }}
-            </span>
-            <span class="text-sm font-medium truncate text-n-slate-12">
+          <span class="inline-flex items-center gap-1">
+            <span
+              v-if="additionalAttributes?.companyName"
+              class="i-ph-building-light size-4 text-n-slate-10 mb-0.5"
+            />
+            <span
+              v-if="additionalAttributes?.companyName"
+              class="text-sm truncate text-n-slate-11"
+            >
               {{ additionalAttributes.companyName }}
             </span>
-          </template>
+          </span>
         </div>
-        <div class="flex items-center gap-3">
-          <span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
-          <div v-if="email" class="w-px h-3 bg-n-slate-6" />
-          <span v-if="phoneNumber" class="text-sm text-n-slate-11">
+        <div class="flex flex-wrap items-center justify-start gap-x-3 gap-y-1">
+          <div v-if="email" class="truncate max-w-72" :title="email">
+            <span class="text-sm text-n-slate-11">
+              {{ email }}
+            </span>
+          </div>
+          <div v-if="email" class="w-px h-3 truncate bg-n-slate-6" />
+          <span v-if="phoneNumber" class="text-sm truncate text-n-slate-11">
             {{ phoneNumber }}
           </span>
-          <div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
+          <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
+          <span
+            v-if="countryDetails"
+            class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
+          >
+            <Flag :country="countryDetails.countryCode" class="size-3.5" />
+            {{ formattedLocation }}
+          </span>
+          <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
           <Button
             :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
             variant="link"
@@ -70,7 +145,7 @@ const onClickViewDetails = async () => {
       color="slate"
       size="xs"
       :class="{ 'rotate-180': isExpanded }"
-      @click="emit('toggle')"
+      @click="onClickExpand"
     />
 
     <template #after>
@@ -78,22 +153,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,89 @@
+<script setup>
+import { computed, useSlots } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
+
+const props = defineProps({
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  selectedContact: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const slots = useSlots();
+const route = useRoute();
+
+const contactId = computed(() => route.params.contactId);
+
+const selectedContactName = computed(() => {
+  return props.selectedContact?.name;
+});
+
+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 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"
+            />
+            <ComposeConversation :contact-id="contactId">
+              <template #trigger="{ toggle }">
+                <Button :label="buttonLabel" size="sm" @click="toggle" />
+              </template>
+            </ComposeConversation>
+          </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/ConfirmContactDeleteDialog.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const dialogRef = ref(null);
+
+const deleteContact = async id => {
+  if (!id) return;
+
+  try {
+    await store.dispatch('contacts/delete', id);
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.API.ERROR_MESSAGE'));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  emit('goToContactsList');
+  await deleteContact(route.params.contactId || props.selectedContact.id);
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.TITLE')"
+    :description="
+      t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION', {
+        contactName: props.selectedContact.name,
+      })
+    "
+    :confirm-button-label="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.CONFIRM')"
+    @confirm="handleDialogConfirm"
+  />
+</template>

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

@@ -0,0 +1,66 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const emit = defineEmits(['export']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const dialogRef = ref(null);
+
+const segments = useMapGetter('customViews/getContactCustomViews');
+const appliedFilters = useMapGetter('contacts/getAppliedContactFilters');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isExportingContact = computed(() => uiFlags.value.isExporting);
+
+const activeSegmentId = computed(() => route.params.segmentId);
+const activeSegment = computed(() =>
+  activeSegmentId.value
+    ? segments.value.find(view => view.id === Number(activeSegmentId.value))
+    : undefined
+);
+
+const exportContacts = async () => {
+  let query = { payload: [] };
+
+  if (activeSegmentId.value && activeSegment.value) {
+    query = activeSegment.value.query;
+  } else if (Object.keys(appliedFilters.value).length > 0) {
+    query = filterQueryGenerator(appliedFilters.value);
+  }
+
+  emit('export', {
+    ...query,
+    label: route.params.label || '',
+  });
+};
+
+const handleDialogConfirm = async () => {
+  await exportContacts();
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.TITLE')"
+    :description="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.DESCRIPTION')
+    "
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.CONFIRM')
+    "
+    :is-loading="isExportingContact"
+    :disable-confirm-button="isExportingContact"
+    @confirm="handleDialogConfirm"
+  />
+</template>

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

@@ -0,0 +1,134 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const emit = defineEmits(['import']);
+const { t } = useI18n();
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isImportingContact = computed(() => uiFlags.value.isImporting);
+
+const dialogRef = ref(null);
+const fileInput = ref(null);
+
+const hasSelectedFile = ref(null);
+const selectedFileName = ref('');
+
+const csvUrl = '/downloads/import-contacts-sample.csv';
+
+const handleFileClick = () => fileInput.value?.click();
+
+const processFileName = fileName => {
+  const lastDotIndex = fileName.lastIndexOf('.');
+  const extension = fileName.slice(lastDotIndex);
+  const baseName = fileName.slice(0, lastDotIndex);
+
+  return baseName.length > 20
+    ? `${baseName.slice(0, 20)}...${extension}`
+    : fileName;
+};
+
+const handleFileChange = () => {
+  const file = fileInput.value?.files[0];
+  hasSelectedFile.value = file;
+  selectedFileName.value = file ? processFileName(file.name) : '';
+};
+
+const handleRemoveFile = () => {
+  hasSelectedFile.value = null;
+  if (fileInput.value) {
+    fileInput.value.value = null;
+  }
+  selectedFileName.value = '';
+};
+
+const uploadFile = async () => {
+  if (!hasSelectedFile.value) return;
+  emit('import', hasSelectedFile.value);
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.TITLE')"
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.IMPORT')
+    "
+    :is-loading="isImportingContact"
+    :disable-confirm-button="isImportingContact"
+    @confirm="uploadFile"
+  >
+    <template #description>
+      <p class="mb-0 text-sm text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DESCRIPTION') }}
+        <a
+          :href="csvUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          download="import-contacts-sample.csv"
+          class="text-n-blue-text"
+        >
+          {{
+            t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DOWNLOAD_LABEL')
+          }}
+        </a>
+      </p>
+    </template>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <label class="text-sm text-n-slate-12 whitespace-nowrap">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.LABEL') }}
+        </label>
+        <div class="flex items-center justify-between w-full gap-2">
+          <span v-if="hasSelectedFile" class="text-sm text-n-slate-12">
+            {{ selectedFileName }}
+          </span>
+          <Button
+            v-if="!hasSelectedFile"
+            :label="
+              t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHOOSE_FILE')
+            "
+            icon="i-lucide-upload"
+            color="slate"
+            variant="ghost"
+            size="sm"
+            class="!w-fit"
+            @click="handleFileClick"
+          />
+          <div v-else class="flex items-center gap-1">
+            <Button
+              :label="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHANGE')"
+              color="slate"
+              variant="ghost"
+              size="sm"
+              @click="handleFileClick"
+            />
+            <div class="w-px h-3 bg-n-strong" />
+            <Button
+              icon="i-lucide-trash"
+              color="slate"
+              variant="ghost"
+              size="sm"
+              @click="handleRemoveFile"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <input
+      ref="fileInput"
+      type="file"
+      accept="text/csv"
+      class="hidden"
+      @change="handleFileChange"
+    />
+  </Dialog>
+</template>

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';
@@ -41,11 +41,11 @@ const FORM_CONFIG = {
 };
 
 const SOCIAL_CONFIG = {
-  FACEBOOK: 'i-ri-facebook-circle-fill',
-  GITHUB: 'i-ri-github-fill',
-  INSTAGRAM: 'i-ri-instagram-line',
   LINKEDIN: 'i-ri-linkedin-box-fill',
+  FACEBOOK: 'i-ri-facebook-circle-fill',
+  INSTAGRAM: 'i-ri-instagram-line',
   TWITTER: 'i-ri-twitter-x-fill',
+  GITHUB: 'i-ri-github-fill',
 };
 
 const defaultState = {
@@ -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

@@ -0,0 +1,68 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+const contactsFormRef = ref(null);
+const contact = ref(null);
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isCreatingContact = computed(() => uiFlags.value.isCreating);
+
+const createNewContact = contactItem => {
+  contact.value = contactItem;
+};
+
+const handleDialogConfirm = async () => {
+  if (!contact.value) return;
+  emit('create', contact.value);
+};
+
+const onSuccess = () => {
+  contactsFormRef.value?.resetForm();
+  dialogRef.value.close();
+};
+
+const closeDialog = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef, contactsFormRef, onSuccess });
+</script>
+
+<template>
+  <Dialog ref="dialogRef" width="3xl" @confirm="handleDialogConfirm">
+    <ContactsForm
+      ref="contactsFormRef"
+      is-new-contact
+      @update="createNewContact"
+    />
+    <template #footer>
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          :label="t('DIALOG.BUTTONS.CANCEL')"
+          variant="link"
+          class="h-10 hover:!no-underline hover:text-n-brand"
+          @click="closeDialog"
+        />
+        <Button
+          :label="
+            t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SAVE_CONTACT')
+          "
+          color="blue"
+          :is-loading="isCreatingContact"
+          @click="handleDialogConfirm"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>

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

@@ -4,6 +4,7 @@ import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import ContactSortMenu from './components/ContactSortMenu.vue';
 import ContactMoreActions from './components/ContactMoreActions.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 defineProps({
   showSearch: {
@@ -20,7 +21,7 @@ defineProps({
   },
   buttonLabel: {
     type: String,
-    required: true,
+    default: '',
   },
   activeSort: {
     type: String,
@@ -30,23 +31,36 @@ defineProps({
     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 px-6 xl:px-0">
+  <header class="sticky top-0 z-10">
     <div
-      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[960px]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
@@ -71,12 +85,40 @@ const emit = defineEmits([
           </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 w-8"
+              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
-            icon="i-lucide-list-filter"
+            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
+            icon="i-lucide-save"
             color="slate"
             size="sm"
             variant="ghost"
-            @click="emit('filter')"
+            @click="emit('createSegment')"
+          />
+          <Button
+            v-if="isSegmentsView && !isLabelView"
+            icon="i-lucide-trash"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('deleteSegment')"
           />
           <ContactSortMenu
             :active-sort="activeSort"
@@ -90,7 +132,11 @@ const emit = defineEmits([
           />
         </div>
         <div class="w-px h-4 bg-n-strong" />
-        <Button :label="buttonLabel" size="sm" @click="emit('message')" />
+        <ComposeConversation>
+          <template #trigger="{ toggle }">
+            <Button :label="buttonLabel" size="sm" @click="toggle" />
+          </template>
+        </ComposeConversation>
       </div>
     </div>
   </header>

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

@@ -0,0 +1,311 @@
+<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('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.SUCCESS_MESSAGE')
+    );
+    useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
+  } catch (error) {
+    useAlert(
+      error.message ??
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.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

@@ -55,7 +55,7 @@ const handleContactAction = ({ action }) => {
     <DropdownMenu
       v-if="showActionsDropdown"
       :menu-items="contactMenuItems"
-      class="right-0 mt-1 w-52 top-full"
+      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
       @action="handleContactAction($event)"
     />
   </div>

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

@@ -109,7 +109,7 @@ const handleOrderChange = value => {
     <div
       v-if="isMenuOpen"
       v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 right-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
     >
       <div class="flex items-center justify-between gap-2">
         <span class="text-sm text-n-slate-12">

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

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+
+import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
+
+const props = defineProps({
+  activeSegment: { type: Object, default: null },
+});
+
+const emit = defineEmits(['clearFilters', 'openFilter']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+const activeSegmentId = computed(() => route.params.segmentId);
+
+const activeSegmentQuery = computed(() => {
+  const query = props.activeSegment?.query?.payload;
+  if (!Array.isArray(query)) return [];
+
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values: transformed.values,
+    };
+  });
+
+  return newFilters;
+});
+
+const hasActiveSegments = computed(
+  () => props.activeSegment && activeSegmentId.value !== 0
+);
+
+const activeFilterQueryData = computed(() => {
+  return hasActiveSegments.value
+    ? activeSegmentQuery.value
+    : appliedFilters.value;
+});
+</script>
+
+<template>
+  <ActiveFilterPreview
+    :applied-filters="activeFilterQueryData"
+    :max-visible-filters="2"
+    :more-filters-label="
+      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
+        count: activeFilterQueryData.length - 2,
+      })
+    "
+    :clear-button-label="
+      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
+    "
+    :show-clear-button="!hasActiveSegments"
+    class="max-w-[960px] px-6"
+    @open-filter="emit('openFilter')"
+    @clear-filters="emit('clearFilters')"
+  />
+</template>

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

@@ -0,0 +1,103 @@
+<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 },
+  isFetchingList: { 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) &&
+              !isFetchingList &&
+              !isLabelView
+            "
+            :active-segment="activeSegment"
+            @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

@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+
+import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttribute.vue';
+import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
+import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
+import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+const route = useRoute();
+
+const handleDelete = async () => {
+  try {
+    await store.dispatch('contacts/deleteCustomAttributes', {
+      id: route.params.contactId,
+      customAttributes: [props.attribute.attributeKey],
+    });
+    useAlert(
+      t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.DELETE_SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.DELETE_ERROR')
+    );
+  }
+};
+
+const handleUpdate = async value => {
+  try {
+    await store.dispatch('contacts/update', {
+      id: route.params.contactId,
+      customAttributes: {
+        [props.attribute.attributeKey]: value,
+      },
+    });
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.UPDATE_ERROR')
+    );
+  }
+};
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const CurrentAttributeComponent = computed(() => {
+  return (
+    componentMap[props.attribute.attributeDisplayType] || componentMap.default
+  );
+});
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
+    :class="isEditingView ? 'min-h-10' : 'min-h-11'"
+  >
+    <div class="flex items-center justify-between truncate">
+      <span class="text-sm font-medium truncate text-n-slate-12">
+        {{ attribute.attributeDisplayName }}
+      </span>
+    </div>
+
+    <component
+      :is="CurrentAttributeComponent"
+      :attribute="attribute"
+      :is-editing-view="isEditingView"
+      @update="handleUpdate"
+      @delete="handleDelete"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,129 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ContactCustomAttributeItem from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+
+const searchQuery = ref('');
+
+const contactAttributes = useMapGetter('attributes/getContactAttributes') || [];
+
+const hasContactAttributes = computed(
+  () => contactAttributes.value?.length > 0
+);
+
+const processContactAttributes = (
+  attributes,
+  customAttributes,
+  filterCondition
+) => {
+  if (!attributes.length || !customAttributes) {
+    return [];
+  }
+
+  return attributes.reduce((result, attribute) => {
+    const { attributeKey } = attribute;
+    const meetsCondition = filterCondition(attributeKey, customAttributes);
+
+    if (meetsCondition) {
+      result.push({
+        ...attribute,
+        value: customAttributes[attributeKey] ?? '',
+      });
+    }
+
+    return result;
+  }, []);
+};
+
+const usedAttributes = computed(() => {
+  return processContactAttributes(
+    contactAttributes.value,
+    props.selectedContact?.customAttributes,
+    (key, custom) => key in custom
+  );
+});
+
+const unusedAttributes = computed(() => {
+  return processContactAttributes(
+    contactAttributes.value,
+    props.selectedContact?.customAttributes,
+    (key, custom) => !(key in custom)
+  );
+});
+
+const filteredUnusedAttributes = computed(() => {
+  return unusedAttributes.value?.filter(attribute =>
+    attribute.attributeDisplayName
+      .toLowerCase()
+      .includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const unusedAttributesCount = computed(() => unusedAttributes.value?.length);
+const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
+const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
+</script>
+
+<template>
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
+      <ContactCustomAttributeItem
+        v-for="attribute in usedAttributes"
+        :key="attribute.id"
+        is-editing-view
+        :attribute="attribute"
+      />
+    </div>
+    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
+      <div class="flex-1 h-[1px] bg-n-slate-5" />
+      <span class="text-sm font-medium text-n-slate-10">{{
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.UNUSED_ATTRIBUTES', {
+          count: unusedAttributesCount,
+        })
+      }}</span>
+      <div class="flex-1 h-[1px] bg-n-slate-5" />
+    </div>
+    <div class="flex flex-col gap-3">
+      <div v-if="!hasNoUnusedAttributes" class="relative">
+        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.SEARCH_PLACEHOLDER')
+          "
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        />
+      </div>
+      <div
+        v-if="filteredUnusedAttributes.length === 0 && !hasNoUnusedAttributes"
+        class="flex items-center justify-start h-11"
+      >
+        <p class="text-sm text-n-slate-11">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.NO_ATTRIBUTES') }}
+        </p>
+      </div>
+      <div v-if="!hasNoUnusedAttributes" class="flex flex-col gap-2">
+        <ContactCustomAttributeItem
+          v-for="attribute in filteredUnusedAttributes"
+          :key="attribute.id"
+          :attribute="attribute"
+        />
+      </div>
+    </div>
+  </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.EMPTY_STATE') }}
+  </p>
+</template>

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

@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const conversations = useMapGetter(
+  'contactConversations/getAllConversationsByContactId'
+);
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+const isFetching = computed(() => uiFlags.value.isFetching);
+
+const contactConversations = computed(() =>
+  conversations.value(route.params.contactId)
+);
+</script>
+
+<template>
+  <div
+    v-if="isFetching"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+  <div
+    v-else-if="contactConversations.length > 0"
+    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+  >
+    <ConversationCard
+      v-for="conversation in contactConversations"
+      :key="conversation.id"
+      :conversation="conversation"
+      :contact="contactsById(conversation.meta.sender.id)"
+      :state-inbox="stateInbox(conversation.inboxId)"
+      :account-labels="accountLabelsValue"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+    />
+  </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.HISTORY.EMPTY_STATE') }}
+  </p>
+</template>

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

@@ -0,0 +1,145 @@
+<script setup>
+import { reactive, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useRoute } from 'vue-router';
+import { useAlert, useTrack } from 'dashboard/composables';
+import ContactAPI from 'dashboard/api/contacts';
+import { debounce } from '@chatwoot/utils';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactMergeForm from 'dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['goToContactsList', 'resetTab']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const state = reactive({
+  primaryContactId: null,
+});
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const searchResults = ref([]);
+const isSearching = ref(false);
+
+const validationRules = {
+  primaryContactId: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isMergingContact = computed(() => uiFlags.value.isMerging);
+
+const primaryContactList = computed(
+  () =>
+    searchResults.value?.map(item => ({
+      value: item.id,
+      label: `(ID: ${item.id}) ${item.name}`,
+    })) ?? []
+);
+
+const onContactSearch = debounce(
+  async query => {
+    isSearching.value = true;
+    searchResults.value = [];
+    try {
+      const {
+        data: { payload },
+      } = await ContactAPI.search(query);
+      searchResults.value = payload.filter(
+        contact => contact.id !== props.selectedContact.id
+      );
+      isSearching.value = false;
+    } catch (error) {
+      useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_ERROR_MESSAGE'));
+    } finally {
+      isSearching.value = false;
+    }
+  },
+  300,
+  false
+);
+
+const resetState = () => {
+  if (state.primaryContactId === null) {
+    emit('resetTab');
+  }
+  state.primaryContactId = null;
+  searchResults.value = [];
+  isSearching.value = false;
+};
+
+const onMergeContacts = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
+
+  try {
+    await store.dispatch('contacts/merge', {
+      childId: props.selectedContact.id || route.params.contactId,
+      parentId: state.primaryContactId,
+    });
+    emit('goToContactsList');
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SUCCESS_MESSAGE'));
+    resetState();
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 px-6 py-6">
+    <div class="flex flex-col gap-2">
+      <h4 class="text-base text-n-slate-12">
+        {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.TITLE') }}
+      </h4>
+      <p class="text-sm text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.DESCRIPTION') }}
+      </p>
+    </div>
+    <ContactMergeForm
+      v-model:primary-contact-id="state.primaryContactId"
+      :selected-contact="selectedContact"
+      :primary-contact-list="primaryContactList"
+      :is-searching="isSearching"
+      :has-error="!!v$.primaryContactId.$error"
+      :error-message="
+        v$.primaryContactId.$error
+          ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_REQUIRED_ERROR')
+          : ''
+      "
+      @search="onContactSearch"
+    />
+    <div class="flex items-center justify-between gap-3">
+      <Button
+        variant="faded"
+        color="slate"
+        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="resetState"
+      />
+      <Button
+        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CONFIRM')"
+        class="w-full"
+        :is-loading="isMergingContact"
+        :disabled="isMergingContact"
+        @click="onMergeContacts"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,99 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactNoteItem from './components/ContactNoteItem.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const state = reactive({
+  message: '',
+});
+
+const currentUser = useMapGetter('getCurrentUser');
+const notesByContact = useMapGetter('contactNotes/getAllNotesByContactId');
+const uiFlags = useMapGetter('contactNotes/getUIFlags');
+const isFetchingNotes = computed(() => uiFlags.value.isFetching);
+const isCreatingNote = computed(() => uiFlags.value.isCreating);
+const notes = computed(() => notesByContact.value(route.params.contactId));
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note.user.name;
+};
+
+const onAdd = content => {
+  if (!content) return;
+  const { contactId } = route.params;
+  store.dispatch('contactNotes/create', { content, contactId });
+  state.message = '';
+};
+
+const onDelete = noteId => {
+  if (!noteId) return;
+  const { contactId } = route.params;
+  store.dispatch('contactNotes/delete', { noteId, contactId });
+};
+
+const keyboardEvents = {
+  '$mod+Enter': {
+    action: () => onAdd(state.message),
+    allowOnFocusedInput: true,
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 py-6">
+    <Editor
+      v-model="state.message"
+      :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
+      focus-on-mount
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 px-6"
+    >
+      <template #actions>
+        <div class="flex items-center gap-3">
+          <Button
+            variant="link"
+            color="blue"
+            size="sm"
+            :label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.SAVE')"
+            class="hover:no-underline"
+            :is-loading="isCreatingNote"
+            :disabled="!state.message || isCreatingNote"
+            @click="onAdd(state.message)"
+          />
+        </div>
+      </template>
+    </Editor>
+    <div
+      v-if="isFetchingNotes"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <div v-else-if="notes.length > 0">
+      <ContactNoteItem
+        v-for="note in notes"
+        :key="note.id"
+        :note="note"
+        :written-by="getWrittenBy(note)"
+        @delete="onDelete"
+      />
+    </div>
+    <p v-else class="px-6 py-6 text-sm leading-6 text-center text-n-slate-11">
+      {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EMPTY_STATE') }}
+    </p>
+  </div>
+</template>

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

@@ -28,7 +28,7 @@ const handleDelete = () => {
 
 <template>
   <div
-    class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
+    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
   >
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-1.5 py-2.5 min-w-0">

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

@@ -1,5 +1,8 @@
 <script setup>
+import { ref } from 'vue';
+
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
 import contactContent from 'dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent';
@@ -22,6 +25,14 @@ defineProps({
     default: '',
   },
 });
+
+const emit = defineEmits(['create']);
+
+const createNewContactDialogRef = ref(null);
+
+const onClick = () => {
+  createNewContactDialogRef.value?.dialogRef.open();
+};
 </script>
 
 <template>
@@ -45,6 +56,10 @@ defineProps({
     <template #actions>
       <div v-if="showButton">
         <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
+        <CreateNewContactDialog
+          ref="createNewContactDialogRef"
+          @create="emit('create', $event)"
+        />
       </div>
     </template>
   </EmptyStateLayout>

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

@@ -0,0 +1,200 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactLabels from 'dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue';
+import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
+import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const confirmDeleteContactDialogRef = ref(null);
+
+const avatarFile = ref(null);
+const avatarUrl = ref('');
+
+const contactsFormRef = ref(null);
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isUpdating = computed(() => uiFlags.value.isUpdating);
+
+const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
+
+const contactData = ref({});
+
+const getInitialContactData = () => {
+  if (!props.selectedContact) return {};
+  return { ...props.selectedContact };
+};
+
+onMounted(() => {
+  Object.assign(contactData.value, getInitialContactData());
+});
+
+const createdAt = computed(() => {
+  return contactData.value?.createdAt
+    ? dynamicTime(contactData.value.createdAt)
+    : '';
+});
+
+const lastActivityAt = computed(() => {
+  return contactData.value?.lastActivityAt
+    ? dynamicTime(contactData.value.lastActivityAt)
+    : '';
+});
+
+const avatarSrc = computed(() => {
+  return avatarUrl.value ? avatarUrl.value : contactData.value?.thumbnail;
+});
+
+const handleFormUpdate = updatedData => {
+  Object.assign(contactData.value, updatedData);
+};
+
+const updateContact = async () => {
+  try {
+    const { customAttributes, ...basicContactData } = contactData.value;
+    await store.dispatch('contacts/update', basicContactData);
+    await store.dispatch(
+      'contacts/fetchContactableInbox',
+      props.selectedContact.id
+    );
+    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.ERROR_MESSAGE'));
+  }
+};
+
+const openConfirmDeleteContactDialog = () => {
+  confirmDeleteContactDialogRef.value?.dialogRef.open();
+};
+
+const handleAvatarUpload = async ({ file, url }) => {
+  avatarFile.value = file;
+  avatarUrl.value = url;
+
+  try {
+    await store.dispatch('contacts/update', {
+      ...contactsFormRef.value?.state,
+      avatar: file,
+      isFormData: true,
+    });
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.SUCCESS_MESSAGE'));
+  } catch {
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.ERROR_MESSAGE'));
+  }
+};
+
+const handleAvatarDelete = async () => {
+  try {
+    if (props.selectedContact && props.selectedContact.id) {
+      await store.dispatch('contacts/deleteAvatar', props.selectedContact.id);
+      useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.SUCCESS_MESSAGE'));
+    }
+    avatarFile.value = null;
+    avatarUrl.value = '';
+    contactData.value.thumbnail = null;
+  } catch (error) {
+    useAlert(
+      error.message
+        ? error.message
+        : t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.ERROR_MESSAGE')
+    );
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-8 pb-6">
+    <div class="flex flex-col items-start gap-3">
+      <Avatar
+        :src="avatarSrc || ''"
+        :name="selectedContact?.name || ''"
+        :size="72"
+        allow-upload
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium text-n-slate-12">
+          {{ selectedContact?.name }}
+        </h3>
+        <div class="flex flex-col gap-1.5">
+          <span
+            v-if="selectedContact?.identifier"
+            class="inline-flex items-center gap-1 text-sm text-n-slate-11"
+          >
+            <span class="i-ph-user-gear text-n-slate-10 size-4" />
+            {{ selectedContact?.identifier }}
+          </span>
+          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
+            <span
+              v-if="selectedContact?.identifier"
+              class="i-ph-activity text-n-slate-10 size-4"
+            />
+            {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
+            •
+            {{
+              $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
+                date: lastActivityAt,
+              })
+            }}
+          </span>
+        </div>
+      </div>
+      <ContactLabels :contact-id="selectedContact?.id" />
+    </div>
+    <div class="flex flex-col items-start gap-6">
+      <ContactsForm
+        ref="contactsFormRef"
+        :contact-data="contactData"
+        is-details-view
+        @update="handleFormUpdate"
+      />
+      <Button
+        :label="t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')"
+        size="sm"
+        :is-loading="isUpdating"
+        :disabled="isUpdating || isFormInvalid"
+        @click="updateContact"
+      />
+    </div>
+    <div
+      class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
+    >
+      <div class="flex flex-col gap-2">
+        <h6 class="text-base font-medium text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT') }}
+        </h6>
+        <span class="text-sm text-n-slate-11">
+          {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT_DESCRIPTION') }}
+        </span>
+      </div>
+      <Button
+        :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
+        color="ruby"
+        @click="openConfirmDeleteContactDialog"
+      />
+    </div>
+    <ConfirmContactDeleteDialog
+      ref="confirmDeleteContactDialogRef"
+      :selected-contact="selectedContact"
+      @go-to-contacts-list="emit('goToContactsList')"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,81 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
+import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
+
+defineProps({ contacts: { type: Array, required: true } });
+
+const { t } = useI18n();
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isUpdating = computed(() => uiFlags.value.isUpdating);
+const expandedCardId = ref(null);
+
+const updateContact = async updatedData => {
+  try {
+    await store.dispatch('contacts/update', updatedData);
+    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const i18nPrefix = 'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM';
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('email')) {
+        useAlert(t(`${i18nPrefix}.EMAIL_ADDRESS.DUPLICATE`));
+      } else if (error.data.includes('phone_number')) {
+        useAlert(t(`${i18nPrefix}.PHONE_NUMBER.DUPLICATE`));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t(`${i18nPrefix}.ERROR_MESSAGE`));
+    }
+  }
+};
+
+const onClickViewDetails = async id => {
+  const routeTypes = {
+    contacts_dashboard_segments_index: ['contacts_edit_segment', 'segmentId'],
+    contacts_dashboard_labels_index: ['contacts_edit_label', 'label'],
+  };
+  const [name, paramKey] = routeTypes[route.name] || ['contacts_edit'];
+  const params = {
+    contactId: id,
+    ...(paramKey && { [paramKey]: route.params[paramKey] }),
+  };
+
+  await router.push({ name, params, query: route.query });
+};
+
+const toggleExpanded = id => {
+  expandedCardId.value = expandedCardId.value === id ? null : id;
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 px-6 pt-4 pb-6">
+    <ContactsCard
+      v-for="contact in contacts"
+      :id="contact.id"
+      :key="contact.id"
+      :name="contact.name"
+      :email="contact.email"
+      :thumbnail="contact.thumbnail"
+      :phone-number="contact.phoneNumber"
+      :additional-attributes="contact.additionalAttributes"
+      :is-expanded="expandedCardId === contact.id"
+      :is-updating="isUpdating"
+      @toggle="toggleExpanded(contact.id)"
+      @update-contact="updateContact"
+      @show-contact="onClickViewDetails"
+    />
+  </div>
+</template>

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/Conversation/ConversationCard/ConversationCard.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { useRouter, useRoute } from 'vue-router';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
@@ -28,6 +30,9 @@ const props = defineProps({
   },
 });
 
+const router = useRouter();
+const route = useRoute();
+
 const currentContact = computed(() => props.contact);
 
 const currentContactName = computed(() => currentContact.value?.name);
@@ -54,11 +59,31 @@ const showMessagePreviewWithoutMeta = computed(() => {
   const { slaPolicyId, labels = [] } = props.conversation;
   return !slaPolicyId && labels.length === 0;
 });
+
+const onCardClick = e => {
+  const path = frontendURL(
+    conversationUrl({
+      accountId: route.params.accountId,
+      id: props.conversation.id,
+    })
+  );
+
+  if (e.metaKey || e.ctrlKey) {
+    window.open(
+      window.chatwootConfig.hostURL + path,
+      '_blank',
+      'noopener noreferrer nofollow'
+    );
+    return;
+  }
+  router.push({ path });
+};
 </script>
 
 <template>
   <div
-    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out rounded-xl"
+    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
+    @click="onCardClick"
   >
     <Avatar
       :name="currentContactName"
@@ -75,7 +100,7 @@ const showMessagePreviewWithoutMeta = computed(() => {
         <div class="flex items-center gap-2">
           <CardPriorityIcon :priority="conversation.priority || null" />
           <div
-            v-tooltip.top-start="inboxName"
+            v-tooltip.left="inboxName"
             class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
           >
             <Icon

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, useSlots } from 'vue';
 
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
@@ -45,6 +45,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
+const slots = useSlots();
+
 const isFocused = ref(false);
 
 const characterCount = computed(() => props.modelValue.length);
@@ -81,7 +83,7 @@ const handleBlur = () => {
 watch(
   () => props.modelValue,
   newValue => {
-    if (props.maxLength && props.showCharacterCount) {
+    if (props.maxLength && props.showCharacterCount && !slots.actions) {
       if (characterCount.value >= props.maxLength) {
         emit('update:modelValue', newValue.slice(0, props.maxLength));
       }
@@ -119,12 +121,16 @@ watch(
         @blur="handleBlur"
       />
       <div
-        v-if="showCharacterCount"
+        v-if="showCharacterCount || slots.actions"
         class="flex items-center justify-end h-4 ltr:right-3 rtl:left-3"
       >
-        <span class="text-xs tabular-nums text-n-slate-10">
+        <span
+          v-if="showCharacterCount && !slots.actions"
+          class="text-xs tabular-nums text-n-slate-10"
+        >
           {{ characterCount }} / {{ maxLength }}
         </span>
+        <slot v-else name="actions" />
       </div>
     </div>
     <p
@@ -144,7 +150,7 @@ watch(
       @apply gap-2 !important;
 
       .ProseMirror-menubar {
-        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5  !important;
+        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5 !top-0 !relative !important;
 
         .ProseMirror-menuitem {
           @apply h-5 !important;
@@ -163,7 +169,7 @@ watch(
           @apply m-0 !important;
 
           &::before {
-            @apply text-n-slate-11 dark:text-n-slate-11 !important;
+            @apply text-n-slate-11 dark:text-n-slate-11;
           }
         }
       }

app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue

@@ -76,6 +76,7 @@ const togglePortalSwitcher = () => {
               <Button
                 icon="i-lucide-chevron-down"
                 variant="ghost"
+                color="slate"
                 size="xs"
                 class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
                 @click="togglePortalSwitcher"

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-2 py-2">
+        <div class="flex justify-between w-full gap-3 py-2">
           <label
             class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
           >

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

@@ -0,0 +1,214 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { useAlert } from 'dashboard/composables';
+import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
+import { debounce } from '@chatwoot/utils';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import {
+  searchContacts,
+  createNewContact,
+  fetchContactableInboxes,
+  processContactableInboxes,
+} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
+
+import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
+
+const props = defineProps({
+  alignPosition: {
+    type: String,
+    default: 'left',
+  },
+  contactId: {
+    type: String,
+    default: null,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const contacts = ref([]);
+const selectedContact = ref(null);
+const targetInbox = ref(null);
+const isCreatingContact = ref(false);
+const isFetchingInboxes = ref(false);
+const isSearching = ref(false);
+const showComposeNewConversation = ref(false);
+
+const contactById = useMapGetter('contacts/getContactById');
+const contactsUiFlags = useMapGetter('contacts/getUIFlags');
+const currentUser = useMapGetter('getCurrentUser');
+const globalConfig = useMapGetter('globalConfig/get');
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+
+const directUploadsEnabled = computed(
+  () => globalConfig.value.directUploadsEnabled
+);
+
+const activeContact = computed(() => contactById.value(props.contactId));
+
+const composePopoverClass = computed(() => {
+  return props.alignPosition === 'right'
+    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
+    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
+});
+
+const onContactSearch = debounce(
+  async query => {
+    isSearching.value = true;
+    contacts.value = [];
+    try {
+      contacts.value = await searchContacts(query);
+      isSearching.value = false;
+    } catch (error) {
+      useAlert(t('COMPOSE_NEW_CONVERSATION.CONTACT_SEARCH.ERROR_MESSAGE'));
+    } finally {
+      isSearching.value = false;
+    }
+  },
+  300,
+  false
+);
+
+const resetContacts = () => {
+  contacts.value = [];
+};
+
+const handleSelectedContact = async ({ value, action, ...rest }) => {
+  let contact;
+  if (action === 'create') {
+    isCreatingContact.value = true;
+    try {
+      contact = await createNewContact(value);
+      isCreatingContact.value = false;
+    } catch (error) {
+      isCreatingContact.value = false;
+      return;
+    }
+  } else {
+    contact = rest;
+  }
+  selectedContact.value = contact;
+  if (contact?.id) {
+    isFetchingInboxes.value = true;
+    try {
+      const contactableInboxes = await fetchContactableInboxes(contact.id);
+      selectedContact.value.contactInboxes = contactableInboxes;
+      isFetchingInboxes.value = false;
+    } catch (error) {
+      isFetchingInboxes.value = false;
+    }
+  }
+};
+
+const handleTargetInbox = inbox => {
+  targetInbox.value = inbox;
+  resetContacts();
+};
+
+const clearSelectedContact = () => {
+  selectedContact.value = null;
+  targetInbox.value = null;
+};
+
+const closeCompose = () => {
+  showComposeNewConversation.value = false;
+  selectedContact.value = null;
+  targetInbox.value = null;
+  resetContacts();
+};
+
+const createConversation = async ({ payload, isFromWhatsApp }) => {
+  try {
+    const data = await store.dispatch('contactConversations/create', {
+      params: payload,
+      isFromWhatsApp,
+    });
+    const action = {
+      type: 'link',
+      to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
+      message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
+    };
+    closeCompose();
+    useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
+    return true; // Return success
+  } catch (error) {
+    useAlert(
+      error instanceof ExceptionWithMessage
+        ? error.data
+        : t('COMPOSE_NEW_CONVERSATION.FORM.ERROR_MESSAGE')
+    );
+    return false; // Return failure
+  }
+};
+
+const toggle = () => {
+  showComposeNewConversation.value = !showComposeNewConversation.value;
+};
+
+watch(
+  activeContact,
+  () => {
+    if (activeContact.value && props.contactId) {
+      const contactInboxes = activeContact.value?.contactInboxes || [];
+      selectedContact.value = {
+        ...activeContact.value,
+        contactInboxes: processContactableInboxes(contactInboxes),
+      };
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+onMounted(() => resetContacts());
+
+const keyboardEvents = {
+  Escape: {
+    action: () => {
+      if (showComposeNewConversation.value) {
+        showComposeNewConversation.value = false;
+      }
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    v-on-click-outside="() => (showComposeNewConversation = false)"
+    class="relative z-40"
+  >
+    <slot
+      name="trigger"
+      :is-open="showComposeNewConversation"
+      :toggle="toggle"
+    />
+    <ComposeNewConversationForm
+      v-if="showComposeNewConversation"
+      :contacts="contacts"
+      :contact-id="contactId"
+      :is-loading="isSearching"
+      :current-user="currentUser"
+      :selected-contact="selectedContact"
+      :target-inbox="targetInbox"
+      :is-creating-contact="isCreatingContact"
+      :is-fetching-inboxes="isFetchingInboxes"
+      :is-direct-uploads-enabled="directUploadsEnabled"
+      :contact-conversations-ui-flags="uiFlags"
+      :contacts-ui-flags="contactsUiFlags"
+      :class="composePopoverClass"
+      @search-contacts="onContactSearch"
+      @reset-contact-search="resetContacts"
+      @update-selected-contact="handleSelectedContact"
+      @update-target-inbox="handleTargetInbox"
+      @clear-selected-contact="clearSelectedContact"
+      @create-conversation="createConversation"
+      @discard="closeCompose"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,251 @@
+<script setup>
+import { defineAsyncComponent, ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useFileUpload } from 'dashboard/composables/useFileUpload';
+import { vOnClickOutside } from '@vueuse/components';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import FileUpload from 'vue-upload-component';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import WhatsAppOptions from './WhatsAppOptions.vue';
+
+const props = defineProps({
+  attachedFiles: {
+    type: Array,
+    default: () => [],
+  },
+  isWhatsappInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isTwilioSmsInbox: {
+    type: Boolean,
+    default: false,
+  },
+  messageTemplates: {
+    type: Array,
+    default: () => [],
+  },
+  channelType: {
+    type: String,
+    default: '',
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  disableSendButton: {
+    type: Boolean,
+    default: false,
+  },
+  hasNoInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isDropdownActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'discard',
+  'sendMessage',
+  'sendWhatsappMessage',
+  'insertEmoji',
+  'addSignature',
+  'removeSignature',
+  'attachFile',
+]);
+
+const { t } = useI18n();
+
+const uploadAttachment = ref(null);
+const isEmojiPickerOpen = ref(false);
+
+const EmojiInput = defineAsyncComponent(
+  () => import('shared/components/emoji/EmojiInput.vue')
+);
+
+const messageSignature = useMapGetter('getMessageSignature');
+const signatureToApply = computed(() => messageSignature.value);
+
+const {
+  fetchSignatureFlagFromUISettings,
+  setSignatureFlagForInbox,
+  isEditorHotKeyEnabled,
+} = useUISettings();
+
+const sendWithSignature = computed(() => {
+  return fetchSignatureFlagFromUISettings(props.channelType);
+});
+
+const isSignatureEnabledForInbox = computed(() => {
+  return props.isEmailOrWebWidgetInbox && sendWithSignature.value;
+});
+
+const setSignature = () => {
+  if (signatureToApply.value) {
+    if (isSignatureEnabledForInbox.value) {
+      emit('addSignature', signatureToApply.value);
+    } else {
+      emit('removeSignature', signatureToApply.value);
+    }
+  }
+};
+
+const toggleMessageSignature = () => {
+  setSignatureFlagForInbox(props.channelType, !sendWithSignature.value);
+  setSignature();
+};
+
+const onClickInsertEmoji = emoji => {
+  emit('insertEmoji', emoji);
+};
+
+const { onFileUpload } = useFileUpload({
+  isATwilioSMSChannel: props.isTwilioSmsInbox,
+  attachFile: ({ blob, file }) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.readAsDataURL(file.file);
+    reader.onloadend = () => {
+      const newFile = {
+        resource: blob || file,
+        isPrivate: false,
+        thumb: reader.result,
+        blobSignedId: blob?.signed_id,
+      };
+      emit('attachFile', [...props.attachedFiles, newFile]);
+    };
+  },
+});
+
+const sendButtonLabel = computed(() => {
+  const keyCode = isEditorHotKeyEnabled('cmd_enter') ? '⌘ + ↵' : '↵';
+  return t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.SEND', {
+    keyCode,
+  });
+});
+
+const keyboardEvents = {
+  Enter: {
+    action: () => {
+      if (
+        isEditorHotKeyEnabled('enter') &&
+        !props.isWhatsappInbox &&
+        !props.isDropdownActive
+      ) {
+        emit('sendMessage');
+      }
+    },
+  },
+  '$mod+Enter': {
+    action: () => {
+      if (
+        isEditorHotKeyEnabled('cmd_enter') &&
+        !props.isWhatsappInbox &&
+        !props.isDropdownActive
+      ) {
+        emit('sendMessage');
+      }
+    },
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full h-[52px] gap-2 px-4 py-3"
+  >
+    <div class="flex items-center gap-2">
+      <WhatsAppOptions
+        v-if="isWhatsappInbox"
+        :message-templates="messageTemplates"
+        @send-message="emit('sendWhatsappMessage', $event)"
+      />
+      <div
+        v-if="!isWhatsappInbox && !hasNoInbox"
+        v-on-click-outside="() => (isEmojiPickerOpen = false)"
+        class="relative"
+      >
+        <Button
+          icon="i-lucide-smile-plus"
+          color="slate"
+          size="sm"
+          class="!w-10"
+          @click="isEmojiPickerOpen = !isEmojiPickerOpen"
+        />
+        <EmojiInput
+          v-if="isEmojiPickerOpen"
+          class="left-0 top-full mt-1.5"
+          :on-click="onClickInsertEmoji"
+        />
+      </div>
+      <FileUpload
+        v-if="isEmailOrWebWidgetInbox"
+        ref="uploadAttachment"
+        input-id="composeNewConversationAttachment"
+        :size="4096 * 4096"
+        :accept="ALLOWED_FILE_TYPES"
+        multiple
+        :drop-directory="false"
+        :data="{
+          direct_upload_url: '/rails/active_storage/direct_uploads',
+          direct_upload: true,
+        }"
+        class="p-px"
+        @input-file="onFileUpload"
+      >
+        <Button
+          icon="i-lucide-plus"
+          color="slate"
+          size="sm"
+          class="!w-10 relative"
+        />
+      </FileUpload>
+      <Button
+        v-if="isEmailOrWebWidgetInbox"
+        icon="i-lucide-signature"
+        color="slate"
+        size="sm"
+        class="!w-10"
+        @click="toggleMessageSignature"
+      />
+    </div>
+
+    <div class="flex items-center gap-2">
+      <Button
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
+        variant="faded"
+        color="slate"
+        size="sm"
+        class="!text-xs font-medium"
+        @click="emit('discard')"
+      />
+      <Button
+        v-if="!isWhatsappInbox"
+        :label="sendButtonLabel"
+        size="sm"
+        class="!text-xs font-medium"
+        :disabled="isLoading || disableSendButton"
+        :is-loading="isLoading"
+        @click="emit('sendMessage')"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.emoji-dialog::before {
+  @apply hidden;
+}
+</style>

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

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

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

@@ -0,0 +1,336 @@
+<script setup>
+import { reactive, ref, computed } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, requiredIf } from '@vuelidate/validators';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import {
+  appendSignature,
+  removeSignature,
+} from 'dashboard/helper/editorHelper';
+import {
+  buildContactableInboxesList,
+  prepareNewMessagePayload,
+  prepareWhatsAppMessagePayload,
+} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
+
+import ContactSelector from './ContactSelector.vue';
+import InboxSelector from './InboxSelector.vue';
+import EmailOptions from './EmailOptions.vue';
+import MessageEditor from './MessageEditor.vue';
+import ActionButtons from './ActionButtons.vue';
+import InboxEmptyState from './InboxEmptyState.vue';
+import AttachmentPreviews from './AttachmentPreviews.vue';
+
+const props = defineProps({
+  contacts: { type: Array, default: () => [] },
+  contactId: { type: String, default: null },
+  selectedContact: { type: Object, default: null },
+  targetInbox: { type: Object, default: null },
+  currentUser: { type: Object, default: null },
+  isCreatingContact: { type: Boolean, default: false },
+  isFetchingInboxes: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isDirectUploadsEnabled: { type: Boolean, default: false },
+  contactConversationsUiFlags: { type: Object, default: null },
+  contactsUiFlags: { type: Object, default: null },
+});
+
+const emit = defineEmits([
+  'searchContacts',
+  'discard',
+  'updateSelectedContact',
+  'updateTargetInbox',
+  'clearSelectedContact',
+  'createConversation',
+]);
+
+const showContactsDropdown = ref(false);
+const showInboxesDropdown = ref(false);
+const showCcEmailsDropdown = ref(false);
+const showBccEmailsDropdown = ref(false);
+
+const isCreating = computed(() => props.contactConversationsUiFlags.isCreating);
+
+const state = reactive({
+  message: '',
+  subject: '',
+  ccEmails: '',
+  bccEmails: '',
+  attachedFiles: [],
+});
+
+const inboxTypes = computed(() => ({
+  isEmail: props.targetInbox?.channelType === INBOX_TYPES.EMAIL,
+  isTwilio: props.targetInbox?.channelType === INBOX_TYPES.TWILIO,
+  isWhatsapp: props.targetInbox?.channelType === INBOX_TYPES.WHATSAPP,
+  isWebWidget: props.targetInbox?.channelType === INBOX_TYPES.WEB,
+  isApi: props.targetInbox?.channelType === INBOX_TYPES.API,
+  isEmailOrWebWidget:
+    props.targetInbox?.channelType === INBOX_TYPES.EMAIL ||
+    props.targetInbox?.channelType === INBOX_TYPES.WEB,
+  isTwilioSMS:
+    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
+    props.targetInbox?.medium === 'sms',
+}));
+
+const whatsappMessageTemplates = computed(() =>
+  Object.keys(props.targetInbox?.messageTemplates || {}).length
+    ? props.targetInbox.messageTemplates
+    : []
+);
+
+const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
+
+const validationRules = computed(() => ({
+  selectedContact: { required },
+  targetInbox: { required },
+  message: { required: requiredIf(!inboxTypes.value.isWhatsapp) },
+  subject: { required: requiredIf(inboxTypes.value.isEmail) },
+}));
+
+const v$ = useVuelidate(validationRules, {
+  selectedContact: computed(() => props.selectedContact),
+  targetInbox: computed(() => props.targetInbox),
+  message: computed(() => state.message),
+  subject: computed(() => state.subject),
+});
+
+const validationStates = computed(() => ({
+  isContactInvalid:
+    v$.value.selectedContact.$dirty && v$.value.selectedContact.$invalid,
+  isInboxInvalid: v$.value.targetInbox.$dirty && v$.value.targetInbox.$invalid,
+  isSubjectInvalid: v$.value.subject.$dirty && v$.value.subject.$invalid,
+  isMessageInvalid: v$.value.message.$dirty && v$.value.message.$invalid,
+}));
+
+const newMessagePayload = () => {
+  const { message, subject, ccEmails, bccEmails, attachedFiles } = state;
+  return prepareNewMessagePayload({
+    targetInbox: props.targetInbox,
+    selectedContact: props.selectedContact,
+    message,
+    subject,
+    ccEmails,
+    bccEmails,
+    currentUser: props.currentUser,
+    attachedFiles,
+    directUploadsEnabled: props.isDirectUploadsEnabled,
+  });
+};
+
+const contactableInboxesList = computed(() => {
+  return buildContactableInboxesList(props.selectedContact?.contactInboxes);
+});
+
+const showNoInboxAlert = computed(() => {
+  return (
+    props.selectedContact &&
+    contactableInboxesList.value.length === 0 &&
+    !props.contactsUiFlags.isFetchingInboxes &&
+    !props.isFetchingInboxes
+  );
+});
+
+const isAnyDropdownActive = computed(() => {
+  return (
+    showContactsDropdown.value ||
+    showInboxesDropdown.value ||
+    showCcEmailsDropdown.value ||
+    showBccEmailsDropdown.value
+  );
+});
+
+const handleContactSearch = value => {
+  showContactsDropdown.value = true;
+  emit('searchContacts', {
+    keys: ['email', 'phone_number', 'name'],
+    query: value,
+  });
+};
+
+const handleDropdownUpdate = (type, value) => {
+  if (type === 'cc') {
+    showCcEmailsDropdown.value = value;
+  } else if (type === 'bcc') {
+    showBccEmailsDropdown.value = value;
+  } else {
+    showContactsDropdown.value = value;
+  }
+};
+
+const searchCcEmails = value => {
+  showCcEmailsDropdown.value = true;
+  emit('searchContacts', { keys: ['email'], query: value });
+};
+
+const searchBccEmails = value => {
+  showBccEmailsDropdown.value = true;
+  emit('searchContacts', { keys: ['email'], query: value });
+};
+
+const setSelectedContact = async ({ value, action, ...rest }) => {
+  v$.value.$reset();
+  emit('updateSelectedContact', { value, action, ...rest });
+  showContactsDropdown.value = false;
+  showInboxesDropdown.value = true;
+};
+
+const handleInboxAction = ({ value, action, ...rest }) => {
+  v$.value.$reset();
+  emit('updateTargetInbox', { ...rest });
+  showInboxesDropdown.value = false;
+  state.attachedFiles = [];
+};
+
+const removeTargetInbox = value => {
+  v$.value.$reset();
+  emit('updateTargetInbox', value);
+  state.attachedFiles = [];
+};
+
+const clearSelectedContact = () => {
+  emit('clearSelectedContact');
+  state.attachedFiles = [];
+};
+
+const onClickInsertEmoji = emoji => {
+  state.message += emoji;
+};
+
+const handleAddSignature = signature => {
+  state.message = appendSignature(state.message, signature);
+};
+
+const handleRemoveSignature = signature => {
+  state.message = removeSignature(state.message, signature);
+};
+
+const handleAttachFile = files => {
+  state.attachedFiles = files;
+};
+
+const clearForm = () => {
+  Object.assign(state, {
+    message: '',
+    subject: '',
+    ccEmails: '',
+    bccEmails: '',
+    attachedFiles: [],
+  });
+  v$.value.$reset();
+};
+
+const handleSendMessage = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  try {
+    const success = await emit('createConversation', {
+      payload: newMessagePayload(),
+      isFromWhatsApp: false,
+    });
+    if (success) {
+      clearForm();
+    }
+  } catch (error) {
+    // Form will not be cleared if conversation creation fails
+  }
+};
+
+const handleSendWhatsappMessage = async ({ message, templateParams }) => {
+  const whatsappMessagePayload = prepareWhatsAppMessagePayload({
+    targetInbox: props.targetInbox,
+    selectedContact: props.selectedContact,
+    message,
+    templateParams,
+    currentUser: props.currentUser,
+  });
+  await emit('createConversation', {
+    payload: whatsappMessagePayload,
+    isFromWhatsApp: true,
+  });
+};
+</script>
+
+<template>
+  <div
+    class="w-[670px] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+  >
+    <ContactSelector
+      :contacts="contacts"
+      :selected-contact="selectedContact"
+      :show-contacts-dropdown="showContactsDropdown"
+      :is-loading="isLoading"
+      :is-creating-contact="isCreatingContact"
+      :contact-id="contactId"
+      :contactable-inboxes-list="contactableInboxesList"
+      :show-inboxes-dropdown="showInboxesDropdown"
+      :has-errors="validationStates.isContactInvalid"
+      @search-contacts="handleContactSearch"
+      @set-selected-contact="setSelectedContact"
+      @clear-selected-contact="clearSelectedContact"
+      @update-dropdown="handleDropdownUpdate"
+    />
+    <InboxEmptyState v-if="showNoInboxAlert" />
+    <InboxSelector
+      v-else
+      :target-inbox="targetInbox"
+      :selected-contact="selectedContact"
+      :show-inboxes-dropdown="showInboxesDropdown"
+      :contactable-inboxes-list="contactableInboxesList"
+      :has-errors="validationStates.isInboxInvalid"
+      @update-inbox="removeTargetInbox"
+      @toggle-dropdown="showInboxesDropdown = $event"
+      @handle-inbox-action="handleInboxAction"
+    />
+
+    <EmailOptions
+      v-if="inboxTypes.isEmail"
+      v-model:cc-emails="state.ccEmails"
+      v-model:bcc-emails="state.bccEmails"
+      v-model:subject="state.subject"
+      :contacts="contacts"
+      :show-cc-emails-dropdown="showCcEmailsDropdown"
+      :show-bcc-emails-dropdown="showBccEmailsDropdown"
+      :is-loading="isLoading"
+      :has-errors="validationStates.isSubjectInvalid"
+      @search-cc-emails="searchCcEmails"
+      @search-bcc-emails="searchBccEmails"
+      @update-dropdown="handleDropdownUpdate"
+    />
+
+    <MessageEditor
+      v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
+      v-model="state.message"
+      :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

@@ -0,0 +1,140 @@
+<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 i18nPrefix = 'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR';
+const { t } = useI18n();
+
+const contactsList = computed(() => {
+  return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
+    id,
+    label: email ? `${name} (${email})` : name,
+    value: id,
+    thumbnail: { name, src: thumbnail },
+    ...rest,
+    name,
+    email,
+    action: 'contact',
+  }));
+});
+
+const selectedContactLabel = computed(() => {
+  const { name, email = '', phoneNumber = '' } = props.selectedContact || {};
+  if (email) {
+    return `${name} (${email})`;
+  }
+  if (phoneNumber) {
+    return `${name} (${phoneNumber})`;
+  }
+  return name || '';
+});
+
+const errorClass = computed(() => {
+  return props.hasErrors
+    ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
+    : '';
+});
+</script>
+
+<template>
+  <div class="relative flex-1 px-4 py-3 overflow-y-visible">
+    <div class="flex items-baseline w-full gap-3 min-h-7">
+      <label class="text-sm font-medium text-n-slate-11 whitespace-nowrap">
+        {{ t(`${i18nPrefix}.LABEL`) }}
+      </label>
+
+      <div
+        v-if="isCreatingContact"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
+      >
+        <span class="text-sm truncate text-n-slate-12">
+          {{ t(`${i18nPrefix}.CONTACT_CREATING`) }}
+        </span>
+      </div>
+      <div
+        v-else-if="selectedContact"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
+      >
+        <span class="text-sm truncate text-n-slate-12">
+          {{
+            isCreatingContact
+              ? t(`${i18nPrefix}.CONTACT_CREATING`)
+              : selectedContactLabel
+          }}
+        </span>
+        <Button
+          variant="ghost"
+          icon="i-lucide-x"
+          color="slate"
+          :disabled="contactId"
+          size="xs"
+          @click="emit('clearSelectedContact')"
+        />
+      </div>
+      <TagInput
+        v-else
+        :placeholder="t(`${i18nPrefix}.TAG_INPUT_PLACEHOLDER`)"
+        mode="single"
+        :menu-items="contactsList"
+        :show-dropdown="showContactsDropdown"
+        :is-loading="isLoading"
+        :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
+        allow-create
+        type="email"
+        class="flex-1 min-h-7"
+        :class="errorClass"
+        focus-on-mount
+        @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

@@ -0,0 +1,139 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+const props = defineProps({
+  contacts: { type: Array, required: true },
+  showCcEmailsDropdown: { type: Boolean, required: false },
+  showBccEmailsDropdown: { type: Boolean, required: false },
+  isLoading: { type: Boolean, default: false },
+  hasErrors: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'searchCcEmails',
+  'searchBccEmails',
+  'updateDropdown',
+]);
+
+const i18nPrefix = `COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS`;
+
+const showBccInput = ref(false);
+
+const toggleBccInput = () => {
+  showBccInput.value = !showBccInput.value;
+};
+
+const subject = defineModel('subject', { type: String, default: '' });
+const ccEmails = defineModel('ccEmails', { type: String, default: '' });
+const bccEmails = defineModel('bccEmails', { type: String, default: '' });
+
+const { t } = useI18n();
+
+// Convert string to array for TagInput
+const ccEmailsArray = computed(() =>
+  props.ccEmails ? props.ccEmails.split(',').map(email => email.trim()) : []
+);
+
+const bccEmailsArray = computed(() =>
+  props.bccEmails ? props.bccEmails.split(',').map(email => email.trim()) : []
+);
+
+const contactEmailsList = computed(() => {
+  return props.contacts?.map(({ name, id, email }) => ({
+    id,
+    label: email,
+    email,
+    thumbnail: { name: name, src: '' },
+    value: id,
+    action: 'email',
+  }));
+});
+
+// Handle updates from TagInput and convert array back to string
+const handleCcUpdate = value => {
+  ccEmails.value = value.join(',');
+};
+
+const handleBccUpdate = value => {
+  bccEmails.value = value.join(',');
+};
+
+const inputClass = computed(() => {
+  return props.hasErrors
+    ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+    : '';
+});
+</script>
+
+<template>
+  <div class="flex flex-col divide-y divide-n-strong">
+    <div class="flex items-baseline flex-1 w-full h-8 gap-3 px-4 py-3">
+      <InlineInput
+        v-model="subject"
+        :placeholder="t(`${i18nPrefix}.SUBJECT_PLACEHOLDER`)"
+        :label="t(`${i18nPrefix}.SUBJECT_LABEL`)"
+        focus-on-mount
+        :custom-input-class="inputClass"
+      />
+    </div>
+    <div class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8">
+      <label
+        class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
+      >
+        {{ t(`${i18nPrefix}.CC_LABEL`) }}
+      </label>
+      <div class="flex items-center w-full gap-3 min-h-7">
+        <TagInput
+          :model-value="ccEmailsArray"
+          :placeholder="t(`${i18nPrefix}.CC_PLACEHOLDER`)"
+          :menu-items="contactEmailsList"
+          :show-dropdown="showCcEmailsDropdown"
+          :is-loading="isLoading"
+          type="email"
+          class="flex-1 min-h-7"
+          @focus="emit('updateDropdown', 'cc', true)"
+          @input="emit('searchCcEmails', $event)"
+          @on-click-outside="emit('updateDropdown', 'cc', false)"
+          @update:model-value="handleCcUpdate"
+        />
+        <Button
+          :label="t(`${i18nPrefix}.BCC_BUTTON`)"
+          variant="ghost"
+          size="sm"
+          color="slate"
+          class="flex-shrink-0"
+          @click="toggleBccInput"
+        />
+      </div>
+    </div>
+    <div
+      v-if="showBccInput"
+      class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8"
+    >
+      <label
+        class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
+      >
+        {{ t(`${i18nPrefix}.BCC_LABEL`) }}
+      </label>
+      <TagInput
+        :model-value="bccEmailsArray"
+        :placeholder="t(`${i18nPrefix}.BCC_PLACEHOLDER`)"
+        :menu-items="contactEmailsList"
+        :show-dropdown="showBccEmailsDropdown"
+        :is-loading="isLoading"
+        type="email"
+        class="flex-1 min-h-7"
+        focus-on-mount
+        @focus="emit('updateDropdown', 'bcc', true)"
+        @input="emit('searchBccEmails', $event)"
+        @on-click-outside="emit('updateDropdown', 'bcc', false)"
+        @update:model-value="handleBccUpdate"
+      />
+    </div>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,91 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { generateLabelForContactableInboxesList } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  targetInbox: {
+    type: Object,
+    default: null,
+  },
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+  showInboxesDropdown: {
+    type: Boolean,
+    required: true,
+  },
+  contactableInboxesList: {
+    type: Array,
+    default: () => [],
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'updateInbox',
+  'toggleDropdown',
+  'handleInboxAction',
+]);
+
+const { t } = useI18n();
+
+const targetInboxLabel = computed(() => {
+  return generateLabelForContactableInboxesList(props.targetInbox);
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center flex-1 w-full gap-3 px-4 py-3 overflow-y-visible"
+  >
+    <label class="mb-0.5 text-sm font-medium text-n-slate-11 whitespace-nowrap">
+      {{ t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.LABEL') }}
+    </label>
+    <div
+      v-if="targetInbox"
+      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate px-3 h-7 min-w-0"
+    >
+      <span class="text-sm truncate text-n-slate-12">
+        {{ targetInboxLabel }}
+      </span>
+      <Button
+        variant="ghost"
+        icon="i-lucide-x"
+        color="slate"
+        size="xs"
+        class="flex-shrink-0"
+        @click="emit('updateInbox', null)"
+      />
+    </div>
+    <div
+      v-else
+      v-on-click-outside="() => emit('toggleDropdown', false)"
+      class="relative flex items-center h-7"
+    >
+      <Button
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.BUTTON')"
+        variant="link"
+        size="sm"
+        :color="hasErrors ? 'ruby' : 'slate'"
+        :disabled="!selectedContact"
+        class="hover:!no-underline"
+        @click="emit('toggleDropdown', !showInboxesDropdown)"
+      />
+      <DropdownMenu
+        v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
+        :menu-items="contactableInboxesList"
+        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
+        @action="emit('handleInboxAction', $event)"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,65 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+
+defineProps({
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    required: true,
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+  hasAttachments: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
+</script>
+
+<template>
+  <div
+    v-if="isEmailOrWebWidgetInbox"
+    class="flex-1 h-full"
+    :class="!hasAttachments && 'min-h-[200px]'"
+  >
+    <Editor
+      v-model="modelValue"
+      :placeholder="
+        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+      "
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
+      :class="
+        hasErrors
+          ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
+          : ''
+      "
+      :show-character-count="false"
+    />
+  </div>
+  <div v-else class="flex-1 h-full" :class="!hasAttachments && 'min-h-[200px]'">
+    <TextArea
+      v-model="modelValue"
+      :placeholder="
+        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+      "
+      class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
+      auto-height
+      :custom-text-area-class="
+        hasErrors
+          ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+          : ''
+      "
+    />
+  </div>
+</template>

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

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

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

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

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

@@ -0,0 +1,92 @@
+<script setup>
+import { ref } from 'vue';
+import { contacts, activeContact, emailInbox, currentUser } from './fixtures';
+import ComposeNewConversationForm from '../ComposeNewConversationForm.vue';
+
+const selectedContact = ref(activeContact);
+const targetInbox = ref(emailInbox);
+
+// Event handlers
+const onSearchContacts = query => {
+  console.log('Searching contacts:', query);
+};
+
+const onUpdateSelectedContact = contact => {
+  console.log('Selected contact updated:', contact);
+};
+
+const onUpdateTargetInbox = inbox => {
+  console.log('Target inbox updated:', inbox);
+  targetInbox.value = inbox;
+  console.log('Target inbox updated:', inbox);
+};
+
+const onClearSelectedContact = () => {
+  console.log('Contact cleared');
+};
+
+const onCreateConversation = payload => {
+  console.log('Creating conversation:', payload);
+};
+
+const onDiscard = () => {
+  console.log('Form discarded');
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Compose/ComposeNewConversationForm"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="With all props">
+      <div class="h-[600px] w-full relative">
+        <ComposeNewConversationForm
+          :contacts="contacts"
+          contact-id=""
+          :is-loading="false"
+          :current-user="currentUser"
+          :selected-contact="selectedContact"
+          :target-inbox="targetInbox"
+          :is-creating-contact="false"
+          is-fetching-inboxes
+          is-direct-uploads-enabled
+          :contact-conversations-ui-flags="{ isCreating: false }"
+          :contacts-ui-flags="{ isFetching: false }"
+          class="!top-0"
+          @search-contacts="onSearchContacts"
+          @update-selected-contact="onUpdateSelectedContact"
+          @update-target-inbox="onUpdateTargetInbox"
+          @clear-selected-contact="onClearSelectedContact"
+          @create-conversation="onCreateConversation"
+          @discard="onDiscard"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With no target inbox">
+      <div class="h-[200px] w-full relative">
+        <ComposeNewConversationForm
+          :contacts="contacts"
+          contact-id=""
+          :is-loading="false"
+          :current-user="currentUser"
+          :selected-contact="{ ...selectedContact, contactInboxes: [] }"
+          :target-inbox="null"
+          :is-creating-contact="false"
+          :is-fetching-inboxes="false"
+          is-direct-uploads-enabled
+          :contact-conversations-ui-flags="{ isCreating: false }"
+          :contacts-ui-flags="{ isFetching: false }"
+          class="!top-0"
+          @search-contacts="onSearchContacts"
+          @update-selected-contact="onUpdateSelectedContact"
+          @update-target-inbox="onUpdateTargetInbox"
+          @clear-selected-contact="onClearSelectedContact"
+          @create-conversation="onCreateConversation"
+          @discard="onDiscard"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js

@@ -0,0 +1,168 @@
+export const contacts = [
+  {
+    additionalAttributes: {
+      city: 'kerala',
+      country: 'India',
+      description: 'Curious about the web. ',
+      companyName: 'Chatwoot',
+      countryCode: '',
+      socialProfiles: {
+        github: 'abozler',
+        twitter: 'ozler',
+        facebook: 'abozler',
+        linkedin: 'abozler',
+        instagram: 'ozler',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'ozler@chatwoot.com',
+    id: 29,
+    name: 'Abraham Ozlers',
+    phoneNumber: '+246232222222',
+    identifier: null,
+    thumbnail:
+      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c20b627b384f5981112e949b8414cd4d3e5912ee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/Avatar%201.20.41%E2%80%AFAM.png',
+    customAttributes: {
+      dateContact: '2024-02-01T00:00:00.000Z',
+      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
+      listContact: 'Not spam',
+      numberContact: '12',
+    },
+    lastActivityAt: 1712127410,
+    createdAt: 1712127389,
+  },
+];
+
+export const activeContact = {
+  email: 'ozler@chatwoot.com',
+  id: 29,
+  label: 'Abraham Ozlers (ozler@chatwoot.com)',
+  name: 'Abraham Ozlers',
+  thumbnail: {
+    name: 'Abraham Ozlers',
+    src: 'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c20b627b384f5981112e949b8414cd4d3e5912ee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/Avatar%201.20.41%E2%80%AFAM.png',
+  },
+  contactInboxes: [
+    {
+      id: 7,
+      label: 'PaperLayer Email (testba@paperlayer.test)',
+      name: 'PaperLayer Email',
+      email: 'testba@paperlayer.test',
+      channelType: 'Channel::Email',
+    },
+    {
+      id: 8,
+      label: 'PaperLayer WhatsApp',
+      name: 'PaperLayer WhatsApp',
+      sourceId: '123456',
+      phoneNumber: '+1223233434',
+      channelType: 'Channel::Whatsapp',
+      messageTemplates: [
+        {
+          id: '1',
+          name: 'shipment_confirmation',
+          status: 'APPROVED',
+          category: 'UTILITY',
+          language: 'en_US',
+          components: [
+            {
+              text: '{{1}}, great news! Your order {{2}} has shipped.\n\nTracking #: {{3}}\nEstimated delivery: {{4}}\n\nWe will provide updates until delivery.',
+              type: 'BODY',
+              example: {
+                bodyText: [['John', '#12345', 'ZK4539O2311J', 'Jan 1, 2024']],
+              },
+            },
+            {
+              type: 'BUTTONS',
+              buttons: [
+                {
+                  url: 'https://www.example.com/',
+                  text: 'Track shipment',
+                  type: 'URL',
+                },
+              ],
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+          libraryTemplateName: 'shipment_confirmation_2',
+        },
+        {
+          id: '2',
+          name: 'otp_test',
+          status: 'APPROVED',
+          category: 'AUTHENTICATION',
+          language: 'en_US',
+          components: [
+            {
+              text: 'Use code *{{1}}* to authorize your transaction.',
+              type: 'BODY',
+              example: {
+                bodyText: [['123456']],
+              },
+            },
+            {
+              type: 'BUTTONS',
+              buttons: [
+                {
+                  url: 'https://www.example.com/otp/code/?otp_type=ZERO_TAP&cta_display_name=Autofill&package_name=com.app&signature_hash=weew&code=otp{{1}}',
+                  text: 'Copy code',
+                  type: 'URL',
+                  example: [
+                    'https://www.example.com/otp/code/?otp_type=ZERO_TAP&cta_display_name=Autofill&package_name=com.app&signature_hash=weew&code=otp123456',
+                  ],
+                },
+              ],
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+          libraryTemplateName: 'verify_transaction_1',
+          messageSendTtlSeconds: 900,
+        },
+        {
+          id: '3',
+          name: 'hello_world',
+          status: 'APPROVED',
+          category: 'UTILITY',
+          language: 'en_US',
+          components: [
+            {
+              text: 'Hello World',
+              type: 'HEADER',
+              format: 'TEXT',
+            },
+            {
+              text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+              type: 'BODY',
+            },
+            {
+              text: 'WhatsApp Business Platform sample message',
+              type: 'FOOTER',
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+        },
+      ],
+    },
+    {
+      id: 9,
+      label: 'PaperLayer API',
+      name: 'PaperLayer API',
+      email: '',
+      channelType: 'Channel::Api',
+    },
+  ],
+};
+
+export const emailInbox = {
+  id: 7,
+  label: 'PaperLayer Email (testba@paperlayer.test)',
+  name: 'PaperLayer Email',
+  email: 'testba@paperlayer.test',
+  channelType: 'Channel::Email',
+};
+
+export const currentUser = {
+  id: 1,
+  name: 'John Doe',
+  email: 'john@example.com',
+};

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

@@ -0,0 +1,219 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import camelcaseKeys from 'camelcase-keys';
+import ContactAPI from 'dashboard/api/contacts';
+
+const CHANNEL_PRIORITY = {
+  'Channel::Email': 1,
+  'Channel::Whatsapp': 2,
+  'Channel::Sms': 3,
+  'Channel::TwilioSms': 4,
+  'Channel::WebWidget': 5,
+  'Channel::Api': 6,
+};
+
+export const generateLabelForContactableInboxesList = ({
+  name,
+  email,
+  channelType,
+  phoneNumber,
+}) => {
+  if (channelType === INBOX_TYPES.EMAIL) {
+    return `${name} (${email})`;
+  }
+  if (
+    channelType === INBOX_TYPES.TWILIO ||
+    channelType === INBOX_TYPES.WHATSAPP
+  ) {
+    return `${name} (${phoneNumber})`;
+  }
+  return name;
+};
+
+const transformInbox = ({
+  name,
+  id,
+  email,
+  channelType,
+  phoneNumber,
+  ...rest
+}) => ({
+  id,
+  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
+  label: generateLabelForContactableInboxesList({
+    name,
+    email,
+    channelType,
+    phoneNumber,
+  }),
+  action: 'inbox',
+  value: id,
+  name,
+  email,
+  phoneNumber,
+  channelType,
+  ...rest,
+});
+
+export const compareInboxes = (a, b) => {
+  // Channels that have no priority defined should come at the end.
+  const priorityA = CHANNEL_PRIORITY[a.channelType] || 999;
+  const priorityB = CHANNEL_PRIORITY[b.channelType] || 999;
+
+  if (priorityA !== priorityB) {
+    return priorityA - priorityB;
+  }
+
+  const nameA = a.name || '';
+  const nameB = b.name || '';
+  return nameA.localeCompare(nameB);
+};
+
+export const buildContactableInboxesList = contactInboxes => {
+  if (!contactInboxes) return [];
+
+  return contactInboxes.map(transformInbox).sort(compareInboxes);
+};
+
+export const getCapitalizedNameFromEmail = email => {
+  const name = email.match(/^([^@]*)@/)?.[1] || email.split('@')[0];
+  return name.charAt(0).toUpperCase() + name.slice(1);
+};
+
+export const processContactableInboxes = inboxes => {
+  return inboxes.map(inbox => ({
+    ...inbox.inbox,
+    sourceId: inbox.sourceId,
+  }));
+};
+
+export const prepareAttachmentPayload = (
+  attachedFiles,
+  directUploadsEnabled
+) => {
+  const files = [];
+  attachedFiles.forEach(attachment => {
+    if (directUploadsEnabled) {
+      files.push(attachment.blobSignedId);
+    } else {
+      files.push(attachment.resource.file);
+    }
+  });
+  return files;
+};
+
+export const prepareNewMessagePayload = ({
+  targetInbox,
+  selectedContact,
+  message,
+  subject,
+  ccEmails,
+  bccEmails,
+  currentUser,
+  attachedFiles = [],
+  directUploadsEnabled = false,
+}) => {
+  const payload = {
+    inboxId: targetInbox.id,
+    sourceId: targetInbox.sourceId,
+    contactId: Number(selectedContact.id),
+    message: { content: message },
+    assigneeId: currentUser.id,
+  };
+
+  if (attachedFiles?.length) {
+    payload.files = prepareAttachmentPayload(
+      attachedFiles,
+      directUploadsEnabled
+    );
+  }
+
+  if (subject) {
+    payload.mailSubject = subject;
+  }
+
+  if (ccEmails) {
+    payload.message.cc_emails = ccEmails;
+  }
+
+  if (bccEmails) {
+    payload.message.bcc_emails = bccEmails;
+  }
+
+  return payload;
+};
+
+export const prepareWhatsAppMessagePayload = ({
+  targetInbox,
+  selectedContact,
+  message,
+  templateParams,
+  currentUser,
+}) => {
+  return {
+    inboxId: targetInbox.id,
+    sourceId: targetInbox.sourceId,
+    contactId: selectedContact.id,
+    message: { content: message, template_params: templateParams },
+    assigneeId: currentUser.id,
+  };
+};
+
+export const generateContactQuery = ({ keys = ['email'], query }) => {
+  return {
+    payload: keys.map(key => {
+      const filterPayload = {
+        attribute_key: key,
+        filter_operator: 'contains',
+        values: [query],
+        attribute_model: 'standard',
+      };
+      if (keys.findIndex(k => k === key) !== keys.length - 1) {
+        filterPayload.query_operator = 'or';
+      }
+      return filterPayload;
+    }),
+  };
+};
+
+// API Calls
+export const searchContacts = async ({ keys, query }) => {
+  const {
+    data: { payload },
+  } = await ContactAPI.filter(
+    undefined,
+    'name',
+    generateContactQuery({ keys, query })
+  );
+  const camelCasedPayload = camelcaseKeys(payload, { deep: true });
+  // Filter contacts that have either phone_number or email
+  const filteredPayload = camelCasedPayload?.filter(
+    contact => contact.phoneNumber || contact.email
+  );
+  return filteredPayload || [];
+};
+
+export const createNewContact = async 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

@@ -0,0 +1,536 @@
+import { describe, it, expect, vi } from 'vitest';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import ContactAPI from 'dashboard/api/contacts';
+import * as helpers from '../composeConversationHelper';
+
+vi.mock('dashboard/api/contacts');
+
+describe('composeConversationHelper', () => {
+  describe('generateLabelForContactableInboxesList', () => {
+    const contact = {
+      name: 'John Doe',
+      email: 'john@example.com',
+      phoneNumber: '+1234567890',
+    };
+
+    it('generates label for email inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.EMAIL,
+        })
+      ).toBe('John Doe (john@example.com)');
+    });
+
+    it('generates label for twilio inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.TWILIO,
+        })
+      ).toBe('John Doe (+1234567890)');
+    });
+
+    it('generates label for whatsapp inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.WHATSAPP,
+        })
+      ).toBe('John Doe (+1234567890)');
+    });
+
+    it('generates label for other inbox types', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: 'Channel::Api',
+        })
+      ).toBe('John Doe');
+    });
+  });
+
+  describe('buildContactableInboxesList', () => {
+    it('returns empty array if no contact inboxes', () => {
+      expect(helpers.buildContactableInboxesList(null)).toEqual([]);
+      expect(helpers.buildContactableInboxesList(undefined)).toEqual([]);
+    });
+
+    it('builds list of contactable inboxes with correct format', () => {
+      const inboxes = [
+        {
+          id: 1,
+          name: 'Email Inbox',
+          email: 'support@example.com',
+          channelType: INBOX_TYPES.EMAIL,
+          phoneNumber: null,
+        },
+      ];
+
+      const result = helpers.buildContactableInboxesList(inboxes);
+      expect(result[0]).toMatchObject({
+        id: 1,
+        icon: 'i-ri-mail-line',
+        label: 'Email Inbox (support@example.com)',
+        action: 'inbox',
+        value: 1,
+        name: 'Email Inbox',
+        email: 'support@example.com',
+        channelType: INBOX_TYPES.EMAIL,
+      });
+    });
+  });
+
+  describe('getCapitalizedNameFromEmail', () => {
+    it('extracts and capitalizes name from email', () => {
+      expect(helpers.getCapitalizedNameFromEmail('john.doe@example.com')).toBe(
+        'John.doe'
+      );
+      expect(helpers.getCapitalizedNameFromEmail('jane@example.com')).toBe(
+        'Jane'
+      );
+    });
+  });
+
+  describe('processContactableInboxes', () => {
+    it('processes inboxes with correct structure', () => {
+      const inboxes = [
+        {
+          inbox: { id: 1, name: 'Inbox 1' },
+          sourceId: 'source1',
+        },
+      ];
+
+      const result = helpers.processContactableInboxes(inboxes);
+      expect(result[0]).toEqual({
+        id: 1,
+        name: 'Inbox 1',
+        sourceId: 'source1',
+      });
+    });
+  });
+
+  describe('prepareAttachmentPayload', () => {
+    it('prepares direct upload files', () => {
+      const files = [{ blobSignedId: 'signed1' }];
+      expect(helpers.prepareAttachmentPayload(files, true)).toEqual([
+        'signed1',
+      ]);
+    });
+
+    it('prepares regular files', () => {
+      const files = [{ resource: { file: 'file1' } }];
+      expect(helpers.prepareAttachmentPayload(files, false)).toEqual(['file1']);
+    });
+  });
+
+  describe('prepareNewMessagePayload', () => {
+    const baseParams = {
+      targetInbox: { id: 1, sourceId: 'source1' },
+      selectedContact: { id: '2' },
+      message: 'Hello',
+      currentUser: { id: 3 },
+    };
+
+    it('prepares basic message payload', () => {
+      const result = helpers.prepareNewMessagePayload(baseParams);
+      expect(result).toEqual({
+        inboxId: 1,
+        sourceId: 'source1',
+        contactId: 2,
+        message: { content: 'Hello' },
+        assigneeId: 3,
+      });
+    });
+
+    it('includes optional fields when provided', () => {
+      const result = helpers.prepareNewMessagePayload({
+        ...baseParams,
+        subject: 'Test',
+        ccEmails: 'cc@test.com',
+        bccEmails: 'bcc@test.com',
+        attachedFiles: [{ blobSignedId: 'file1' }],
+        directUploadsEnabled: true,
+      });
+
+      expect(result).toMatchObject({
+        mailSubject: 'Test',
+        message: {
+          content: 'Hello',
+          cc_emails: 'cc@test.com',
+          bcc_emails: 'bcc@test.com',
+        },
+        files: ['file1'],
+      });
+    });
+  });
+
+  describe('prepareWhatsAppMessagePayload', () => {
+    it('prepares whatsapp message payload', () => {
+      const params = {
+        targetInbox: { id: 1, sourceId: 'source1' },
+        selectedContact: { id: 2 },
+        message: 'Hello',
+        templateParams: { param1: 'value1' },
+        currentUser: { id: 3 },
+      };
+
+      const result = helpers.prepareWhatsAppMessagePayload(params);
+      expect(result).toEqual({
+        inboxId: 1,
+        sourceId: 'source1',
+        contactId: 2,
+        message: {
+          content: 'Hello',
+          template_params: { param1: 'value1' },
+        },
+        assigneeId: 3,
+      });
+    });
+  });
+
+  describe('generateContactQuery', () => {
+    it('generates correct query structure for contact search', () => {
+      const query = 'test@example.com';
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [query],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(helpers.generateContactQuery({ keys: ['email'], query })).toEqual(
+        expected
+      );
+    });
+
+    it('handles empty query', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [''],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({ keys: ['email'], query: '' })
+      ).toEqual(expected);
+    });
+
+    it('handles mutliple keys', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+            query_operator: 'or',
+          },
+          {
+            attribute_key: 'phone_number',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({
+          keys: ['email', 'phone_number'],
+          query: 'john',
+        })
+      ).toEqual(expected);
+    });
+  });
+
+  describe('API calls', () => {
+    describe('searchContacts', () => {
+      it('searches contacts and returns camelCase results', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phone_number: '+1234567890',
+            created_at: '2023-01-01',
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
+
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phoneNumber: '+1234567890',
+            createdAt: '2023-01-01',
+          },
+        ]);
+
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
+      });
+
+      it('searches contacts and returns only contacts with email or phone number', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phone_number: '+1234567890',
+            created_at: '2023-01-01',
+          },
+          {
+            id: 2,
+            name: 'Jane Doe',
+            email: null,
+            phone_number: null,
+            created_at: '2023-01-01',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            phone_number: null,
+            created_at: '2023-01-01',
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
+
+        // Should only return contacts with either email or phone number
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phoneNumber: '+1234567890',
+            createdAt: '2023-01-01',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            phoneNumber: null,
+            createdAt: '2023-01-01',
+          },
+        ]);
+
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
+      });
+
+      it('handles empty search results', async () => {
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: [] },
+        });
+
+        const result = await helpers.searchContacts('nonexistent');
+        expect(result).toEqual([]);
+      });
+
+      it('transforms nested objects to camelCase', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            phone_number: '+1234567890',
+            contact_inboxes: [
+              {
+                inbox_id: 1,
+                source_id: 'source1',
+                created_at: '2023-01-01',
+              },
+            ],
+            custom_attributes: {
+              custom_field_name: 'value',
+            },
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts('test');
+
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            phoneNumber: '+1234567890',
+            contactInboxes: [
+              {
+                inboxId: 1,
+                sourceId: 'source1',
+                createdAt: '2023-01-01',
+              },
+            ],
+            customAttributes: {
+              customFieldName: 'value',
+            },
+          },
+        ]);
+      });
+    });
+
+    describe('createNewContact', () => {
+      it('creates new contact with capitalized name', async () => {
+        const mockContact = { id: 1, name: 'John', email: 'john@example.com' };
+        ContactAPI.create.mockResolvedValue({
+          data: { payload: { contact: mockContact } },
+        });
+
+        const result = await helpers.createNewContact('john@example.com');
+        expect(result).toEqual(mockContact);
+        expect(ContactAPI.create).toHaveBeenCalledWith({
+          name: 'John',
+          email: 'john@example.com',
+        });
+      });
+    });
+
+    describe('fetchContactableInboxes', () => {
+      it('fetches and processes contactable inboxes', async () => {
+        const mockInboxes = [
+          {
+            inbox: { id: 1, name: 'Inbox 1' },
+            sourceId: 'source1',
+          },
+        ];
+        ContactAPI.getContactableInboxes.mockResolvedValue({
+          data: { payload: mockInboxes },
+        });
+
+        const result = await helpers.fetchContactableInboxes(1);
+        expect(result[0]).toEqual({
+          id: 1,
+          name: 'Inbox 1',
+          sourceId: 'source1',
+        });
+        expect(ContactAPI.getContactableInboxes).toHaveBeenCalledWith(1);
+      });
+
+      it('returns empty array when no inboxes found', async () => {
+        ContactAPI.getContactableInboxes.mockResolvedValue({
+          data: { payload: [] },
+        });
+
+        const result = await helpers.fetchContactableInboxes(1);
+        expect(result).toEqual([]);
+      });
+    });
+  });
+});
+
+describe('compareInboxes', () => {
+  it('should sort inboxes by channel priority', () => {
+    const inboxes = [
+      { channelType: 'Channel::Api', name: 'API Inbox' },
+      { channelType: 'Channel::Email', name: 'Email Inbox' },
+      { channelType: 'Channel::WebWidget', name: 'Widget' },
+      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted[0].channelType).toBe('Channel::Email');
+    expect(sorted[1].channelType).toBe('Channel::Whatsapp');
+    expect(sorted[2].channelType).toBe('Channel::WebWidget');
+    expect(sorted[3].channelType).toBe('Channel::Api');
+  });
+
+  it('should sort SMS channels correctly', () => {
+    const inboxes = [
+      { channelType: 'Channel::TwilioSms', name: 'Twilio' },
+      { channelType: 'Channel::Sms', name: 'Regular SMS' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted[0].channelType).toBe('Channel::Sms');
+    expect(sorted[1].channelType).toBe('Channel::TwilioSms');
+  });
+
+  it('should sort by name when channel types are same', () => {
+    const inboxes = [
+      { channelType: 'Channel::Email', name: 'Support' },
+      { channelType: 'Channel::Email', name: 'Marketing' },
+      { channelType: 'Channel::Email', name: 'Billing' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted.map(inbox => inbox.name)).toEqual([
+      'Billing',
+      'Marketing',
+      'Support',
+    ]);
+  });
+
+  it('should put channels without priority at the end', () => {
+    const inboxes = [
+      { channelType: 'Channel::Unknown', name: 'Unknown' },
+      { channelType: 'Channel::Email', name: 'Email' },
+      { channelType: 'Channel::LineChannel', name: 'Line' },
+      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted.map(i => i.channelType)).toEqual([
+      'Channel::Email',
+      'Channel::Whatsapp',
+
+      'Channel::LineChannel',
+      'Channel::Unknown',
+    ]);
+  });
+
+  it('should handle empty array', () => {
+    const inboxes = [];
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+    expect(sorted).toEqual([]);
+  });
+});

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -132,7 +132,7 @@ const iconStyles = computed(() => ({
 }));
 
 const initialsStyles = computed(() => ({
-  fontSize: `${props.size / 2}px`,
+  fontSize: `${Math.min(props.size / 2.5, 24)}px`,
 }));
 
 const invalidateCurrentImage = () => {

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -8,14 +8,6 @@ defineProps({
   items: {
     type: Array,
     required: true,
-    validator: value => {
-      return value.every(
-        item =>
-          typeof item.label === 'string' &&
-          (item.link === undefined || typeof item.link === 'string') &&
-          (item.count === undefined || typeof item.count === 'number')
-      );
-    },
   },
 });
 

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/combobox/ComboBoxDropdown.vue

@@ -29,7 +29,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:searchValue', 'select', 'search']);
+const emit = defineEmits(['select', 'search']);
 
 const { t } = useI18n();
 

app/javascript/dashboard/components-next/copilot/Copilot.story.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue';
+import Copilot from './Copilot.vue';
+
+const supportAgent = {
+  available_name: 'Pranav Raj',
+  avatar_url:
+    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
+};
+
+const messages = ref([
+  {
+    id: 1,
+    role: 'user',
+    content: 'Hi there! How can I help you today?',
+  },
+  {
+    id: 2,
+    role: 'assistant',
+    content:
+      "Hello! I'm the AI assistant. I'll be helping the support team today.",
+  },
+]);
+
+const isCaptainTyping = ref(false);
+
+const sendMessage = message => {
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+
+  // Simulate AI response
+  isCaptainTyping.value = true;
+  setTimeout(() => {
+    isCaptainTyping.value = false;
+    messages.value.push({
+      id: messages.value.length + 1,
+      role: 'assistant',
+      content: 'This is a simulated AI response.',
+    });
+  }, 2000);
+};
+</script>
+
+<template>
+  <Story
+    title="Captain/Copilot"
+    :layout="{ type: 'grid', width: '400px', height: '800px' }"
+  >
+    <Copilot
+      :support-agent="supportAgent"
+      :messages="messages"
+      :is-captain-typing="isCaptainTyping"
+      @send-message="sendMessage"
+    />
+  </Story>
+</template>

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -0,0 +1,68 @@
+<script setup>
+import CopilotInput from './CopilotInput.vue';
+import CopilotLoader from './CopilotLoader.vue';
+import CopilotAgentMessage from './CopilotAgentMessage.vue';
+import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
+import { nextTick, ref, watch } from 'vue';
+
+const props = defineProps({
+  supportAgent: {
+    type: Object,
+    default: () => ({}),
+  },
+  messages: {
+    type: Array,
+    default: () => [],
+  },
+  isCaptainTyping: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['sendMessage']);
+
+const COPILOT_USER_ROLES = ['assistant', 'system'];
+
+const sendMessage = message => {
+  emit('sendMessage', message);
+};
+const chatContainer = ref(null);
+
+const scrollToBottom = async () => {
+  await nextTick();
+  if (chatContainer.value) {
+    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+  }
+};
+
+watch(
+  [() => props.messages, () => props.isCaptainTyping],
+  () => {
+    scrollToBottom();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col ]mx-auto h-full text-sm leading-6 tracking-tight">
+    <div ref="chatContainer" class="flex-1 overflow-y-auto py-4 space-y-6 px-4">
+      <template v-for="message in messages" :key="message.id">
+        <CopilotAgentMessage
+          v-if="message.role === 'user'"
+          :support-agent="supportAgent"
+          :message="message"
+        />
+        <CopilotAssistantMessage
+          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
+          :message="message"
+        />
+      </template>
+
+      <CopilotLoader v-if="isCaptainTyping" />
+    </div>
+
+    <CopilotInput class="mx-3 mb-4 mt-px" @send="sendMessage" />
+  </div>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue

@@ -0,0 +1,31 @@
+<script setup>
+import Avatar from '../avatar/Avatar.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  supportAgent: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <Avatar
+      :name="supportAgent.available_name"
+      :src="supportAgent.avatar_url"
+      :size="24"
+      rounded-full
+    />
+    <div class="space-y-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
+      <div class="break-words">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue

@@ -0,0 +1,27 @@
+<script setup>
+import Avatar from '../avatar/Avatar.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <Avatar
+      name="Captain Copilot"
+      icon-name="i-woot-captain"
+      :size="24"
+      rounded-full
+    />
+    <div class="flex flex-col gap-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
+      <div class="break-words">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotInput.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['send']);
+const message = ref('');
+
+const sendMessage = () => {
+  if (message.value.trim()) {
+    emit('send', message.value);
+    message.value = '';
+  }
+};
+</script>
+
+<template>
+  <form
+    class="border border-n-weak bg-n-alpha-3 rounded-lg h-12 flex"
+    @submit.prevent="sendMessage"
+  >
+    <input
+      v-model="message"
+      type="text"
+      :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
+      class="w-full reset-base bg-transparent px-4 py-3 text-n-slate-11 text-sm"
+      @keyup.enter="sendMessage"
+    />
+    <button
+      class="h-auto w-12 flex items-center justify-center text-n-slate-11"
+      type="submit"
+    >
+      <i class="i-ph-arrow-up" />
+    </button>
+  </form>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue

@@ -0,0 +1,12 @@
+<script setup>
+import CopilotLoader from './CopilotLoader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/CopilotLoader"
+    :layout="{ type: 'grid', width: '400px', height: '800px' }"
+  >
+    <CopilotLoader />
+  </Story>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotLoader.vue

@@ -0,0 +1,22 @@
+<script>
+// Copilot Loader Component
+</script>
+
+<template>
+  <div class="flex justify-start">
+    <div class="flex items-center space-x-2">
+      <span class="text-n-iris-11 font-medium">
+        {{ $t('CAPTAIN.COPILOT.LOADER') }}
+      </span>
+      <div class="flex space-x-1">
+        <div
+          class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce [animation-delay:-0.3s]"
+        />
+        <div
+          class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce [animation-delay:-0.15s]"
+        />
+        <div class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce" />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -25,6 +25,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['action']);
@@ -71,8 +75,8 @@ onMounted(() => {
       />
     </div>
     <button
-      v-for="item in filteredMenuItems"
-      :key="item.action"
+      v-for="(item, index) in filteredMenuItems"
+      :key="index"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
         'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
@@ -81,7 +85,6 @@ onMounted(() => {
       }"
       :disabled="item.disabled"
       @click="handleAction(item)"
-      @keydown.enter="handleAction(item)"
     >
       <slot name="thumbnail" :item="item">
         <Avatar
@@ -92,7 +95,7 @@ onMounted(() => {
           rounded-full
         />
       </slot>
-      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
+      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
       <span v-if="item.label" class="min-w-0 text-sm truncate">{{
         item.label
@@ -102,7 +105,11 @@ onMounted(() => {
       v-if="filteredMenuItems.length === 0"
       class="text-sm text-n-slate-11 px-2 py-1.5"
     >
-      {{ t('DROPDOWN_MENU.EMPTY_STATE') }}
+      {{
+        isSearching
+          ? t('DROPDOWN_MENU.SEARCHING')
+          : t('DROPDOWN_MENU.EMPTY_STATE')
+      }}
     </div>
   </div>
 </template>

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/DropdownContainer.vue

@@ -21,9 +21,9 @@ provideDropdownContext({
 </script>
 
 <template>
-  <div class="relative space-y-2">
+  <div v-on-click-outside="closeMenu" class="relative space-y-2">
     <slot name="trigger" :is-open :toggle="() => toggle()" />
-    <div v-if="isOpen" v-on-click-outside="closeMenu" class="absolute">
+    <div v-if="isOpen" class="absolute">
       <slot />
     </div>
   </div>

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

@@ -6,7 +6,8 @@ import { useDropdownContext } from './provider.js';
 const props = defineProps({
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
-  link: { type: String, default: '' },
+  link: { type: [String, Object], default: '' },
+  nativeLink: { type: Boolean, default: false },
   click: { type: Function, default: null },
   preserveOpen: { type: Boolean, default: false },
 });
@@ -18,7 +19,13 @@ defineOptions({
 const { closeMenu } = useDropdownContext();
 
 const componentIs = computed(() => {
-  if (props.link) return 'router-link';
+  if (props.link) {
+    if (props.nativeLink && typeof props.link === 'string') {
+      return 'a';
+    }
+
+    return 'router-link';
+  }
   if (props.click) return 'button';
 
   return 'div';
@@ -27,8 +34,8 @@ const componentIs = computed(() => {
 const triggerClick = () => {
   if (props.click) {
     props.click();
-    if (!props.preserveOpen) closeMenu();
   }
+  if (!props.preserveOpen) closeMenu();
 };
 </script>
 
@@ -41,7 +48,8 @@ const triggerClick = () => {
       :class="{
         'hover:bg-n-alpha-2 rounded-lg w-full gap-3': !$slots.default,
       }"
-      :href="props.link || null"
+      :href="componentIs === 'a' ? props.link : null"
+      :to="componentIs === 'router-link' ? props.link : null"
       @click="triggerClick"
     >
       <slot>

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,109 @@
+<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: '' },
+  showClearButton: { type: Boolean, default: true },
+});
+
+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 (Array.isArray(value)) {
+    return value.join(', ');
+  }
+  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="index">
+      <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 v-if="showClearButton" class="w-px h-3 rounded-lg bg-n-strong" />
+    <Button
+      v-if="showClearButton"
+      :label="clearButtonLabel"
+      size="xs"
+      class="!px-1"
+      variant="ghost"
+      @click="emit('clearFilters')"
+    />
+  </div>
+</template>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import ConditionRow from './ConditionRow.vue';
 import Button from 'next/button/Button.vue';
 import { filterTypes } from './fixtures/filterTypes.js';
@@ -12,6 +12,7 @@ const DEFAULT_FILTER = {
 };
 
 const filters = ref([{ ...DEFAULT_FILTER }]);
+const conditionsRef = useTemplateRef('conditionsRef');
 
 const removeFilter = index => {
   filters.value.splice(index, 1);
@@ -22,6 +23,10 @@ const showQueryOperator = true;
 const addFilter = () => {
   filters.value.push({ ...DEFAULT_FILTER });
 };
+
+const saveFilter = () => {
+  console.log(conditionsRef.value.every(condition => condition.validate()));
+};
 </script>
 
 <template>
@@ -33,6 +38,7 @@ const addFilter = () => {
       <template v-for="(filter, index) in filters" :key="`filter-${index}`">
         <ConditionRow
           v-if="index === 0"
+          ref="conditionsRef"
           v-model:attribute-key="filter.attributeKey"
           v-model:filter-operator="filter.filterOperator"
           v-model:values="filter.values"
@@ -43,6 +49,7 @@ const addFilter = () => {
 
         <ConditionRow
           v-else
+          ref="conditionsRef"
           v-model:attribute-key="filter.attributeKey"
           v-model:filter-operator="filter.filterOperator"
           v-model:values="filter.values"
@@ -52,7 +59,10 @@ const addFilter = () => {
           @remove="removeFilter(index)"
         />
       </template>
-      <Button sm label="Add Filter" @click="addFilter" />
+      <div class="flex gap-3 mt-2">
+        <Button sm ghost label="Add Filter" @click="addFilter" />
+        <Button sm label="Save Filter" @click="saveFilter" />
+      </div>
     </div>
   </Story>
 </template>

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

@@ -6,6 +6,7 @@ import FilterSelect from './inputs/FilterSelect.vue';
 import MultiSelect from './inputs/MultiSelect.vue';
 import SingleSelect from './inputs/SingleSelect.vue';
 
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { validateSingleFilter } from 'dashboard/helper/validations.js';
 
 // filterTypes: import('vue').ComputedRef<FilterType[]>
@@ -91,11 +92,14 @@ const booleanOptions = computed(() => [
 ]);
 
 const validationError = computed(() => {
-  return validateSingleFilter({
-    attributeKey: attributeKey.value,
-    filter_operator: filterOperator.value,
-    values: values.value,
-  });
+  // TOOD: Migrate validateSingleFilter to use camelcase and then remove useSnakeCase here too
+  return validateSingleFilter(
+    useSnakeCase({
+      attributeKey: attributeKey.value,
+      filterOperator: filterOperator.value,
+      values: values.value,
+    })
+  );
 });
 
 const resetModelOnAttributeKeyChange = newAttributeKey => {

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

@@ -556,3 +556,48 @@ export const filterTypes = [
     attributeModel: 'customAttributes',
   },
 ];
+
+export const sampleActiveFilters = [
+  {
+    attributeKey: 'name',
+    filterOperator: 'contains',
+    values: 'John',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'email',
+    filterOperator: 'does_not_contain',
+    values: 'test@chatwoot.com',
+    queryOperator: 'or',
+  },
+  {
+    attributeKey: 'phone_number',
+    filterOperator: 'is_present',
+    values: '+928383822',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'created_at',
+    filterOperator: 'is_greater_than',
+    values: '2024-01-01',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'last_activity',
+    filterOperator: 'days_before',
+    values: '30',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'date_of_birth',
+    filterOperator: 'is_not_present',
+    values: '',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'country',
+    filterOperator: 'not_equal_to',
+    values: { id: 1, name: 'India' },
+    queryOperator: 'and',
+  },
+];

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/flag/Flag.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { h, defineProps } from 'vue';
+
+const props = defineProps({
+  country: { type: String, required: true },
+  squared: { type: Boolean, default: false },
+});
+
+const renderFlag = () => {
+  const classes = ['fi', `fi-${props.country.toLowerCase()}`, 'flex-shrink-0'];
+  if (props.squared) {
+    classes.push('fis');
+  }
+  return h('span', { class: classes });
+};
+</script>
+
+<template>
+  <component :is="renderFlag" />
+</template>
+
+<style>
+@import 'flag-icons/css/flag-icons.min.css';
+</style>

app/javascript/dashboard/components-next/flag/story/Flag.story.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue';
+import Flag from '../Flag.vue';
+import countries from 'shared/constants/countries';
+
+const BasicTemplate = {
+  components: { Flag },
+  props: {
+    country: {
+      type: String,
+      default: 'us',
+    },
+    squared: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  template: `
+    <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+      <Flag :country="country" :squared="squared" />
+    </div>
+  `,
+};
+
+const SizeVariants = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+      <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+        <Flag country="in" class="!size-4" :squared="isSquared" />
+        <Flag country="in" class="!size-6" :squared="isSquared" />
+        <Flag country="in" class="!size-8" :squared="isSquared" />
+        <Flag country="in" class="!size-10" :squared="isSquared" />
+      </div>
+    </div>
+  `,
+};
+
+const AllFlags = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { countries, isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+
+      <div class="grid grid-cols-2 gap-4 p-4 border rounded border-n-strong md:grid-cols-3 lg:grid-cols-4">
+        <div 
+          v-for="country in countries" 
+          :key="country.id"
+          class="flex items-center gap-2 px-4 py-2 border rounded border-n-strong"
+        >
+          <Flag 
+            :country="country.id" 
+            :squared="isSquared"
+            class="size-6" 
+          />
+          <span class="text-sm">{{ country.name }}</span>
+        </div>
+      </div>
+    </div>
+  `,
+};
+</script>
+
+<template>
+  <Story title="Components/Flag">
+    <Variant title="Basic Usage">
+      <BasicTemplate country="us" :squared="false" />
+    </Variant>
+
+    <Variant title="Size Variants">
+      <SizeVariants />
+    </Variant>
+
+    <Variant title="All Flags">
+      <AllFlags />
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/icon/FileIcon.story.vue

@@ -0,0 +1,36 @@
+<script setup>
+import FileIcon from './FileIcon.vue';
+const files = [
+  { name: 'file.7z', type: '7z' },
+  { name: 'file.zip', type: 'zip' },
+  { name: 'file.rar', type: 'rar' },
+  { name: 'file.tar', type: 'tar' },
+  { name: 'file.csv', type: 'csv' },
+  { name: 'file.docx', type: 'docx' },
+  { name: 'file.doc', type: 'doc' },
+  { name: 'file.odt', type: 'odt' },
+  { name: 'file.pdf', type: 'pdf' },
+  { name: 'file.ppt', type: 'ppt' },
+  { name: 'file.pptx', type: 'pptx' },
+  { name: 'file.rtf', type: 'rtf' },
+  { name: 'file.json', type: 'json' },
+  { name: 'file.txt', type: 'txt' },
+  { name: 'file.xls', type: 'xls' },
+  { name: 'file.xlsx', type: 'xlsx' },
+];
+</script>
+
+<template>
+  <Story title="Components/Icons/FileIcon">
+    <div class="grid grid-cols-4 gap-5">
+      <div
+        v-for="file in files"
+        :key="file.type"
+        class="flex items-center gap-2"
+      >
+        <FileIcon :file-type="file.type" class="size-6" />
+        <p>{{ file.name }}</p>
+      </div>
+    </div>
+  </Story>
+</template>

app/javascript/dashboard/components-next/icon/FileIcon.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { fileType } = defineProps({
+  fileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const fileTypeIcon = computed(() => {
+  const fileIconMap = {
+    '7z': 'i-woot-file-zip',
+    csv: 'i-woot-file-csv',
+    doc: 'i-woot-file-doc',
+    docx: 'i-woot-file-doc',
+    json: 'i-woot-file-txt',
+    odt: 'i-woot-file-doc',
+    pdf: 'i-woot-file-pdf',
+    ppt: 'i-woot-file-ppt',
+    pptx: 'i-woot-file-ppt',
+    rar: 'i-woot-file-zip',
+    rtf: 'i-woot-file-doc',
+    tar: 'i-woot-file-zip',
+    txt: 'i-woot-file-txt',
+    xls: 'i-woot-file-xls',
+    xlsx: 'i-woot-file-xls',
+    zip: 'i-woot-file-zip',
+  };
+
+  return fileIconMap[fileType] || 'i-teenyicons-text-document-solid';
+});
+</script>
+
+<template>
+  <Icon :icon="fileTypeIcon" />
+</template>

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

@@ -1,9 +1,7 @@
 <script setup>
-defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
+import { ref, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
   type: {
     type: String,
     default: 'text',
@@ -32,13 +30,49 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue', 'enterPress']);
+const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+
+const modelValue = defineModel({
+  type: [String, Number],
+  default: '',
+});
+
+const inlineInputRef = ref(null);
 
 const onEnterPress = () => {
   emit('enterPress');
 };
+
+const handleInput = event => {
+  emit('input', event.target.value);
+  modelValue.value = event.target.value;
+};
+
+const handleBlur = event => {
+  emit('blur', event.target.value);
+};
+
+const handleFocus = event => {
+  emit('focus', event.target.value);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    if (props.focusOnMount) {
+      inlineInputRef.value?.focus();
+    }
+  });
+});
+
+defineExpose({
+  focus: () => inlineInputRef.value?.focus(),
+});
 </script>
 
 <template>
@@ -49,7 +83,7 @@ const onEnterPress = () => {
       v-if="label"
       :for="id"
       :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-11"
     >
       {{ label }}
     </label>
@@ -57,13 +91,16 @@ const onEnterPress = () => {
     <slot name="prefix" />
     <input
       :id="id"
-      :value="modelValue"
+      ref="inlineInputRef"
+      v-model="modelValue"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :class="customInputClass"
-      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
-      @input="$emit('update:modelValue', $event.target.value)"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
       @keydown.enter.prevent="onEnterPress"
     />
   </div>

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

@@ -0,0 +1,352 @@
+<script setup>
+import { computed, defineAsyncComponent } from 'vue';
+import { provideMessageContext } from './provider.js';
+import {
+  MESSAGE_TYPES,
+  ATTACHMENT_TYPES,
+  MESSAGE_VARIANTS,
+  SENDER_TYPES,
+  ORIENTATION,
+  MESSAGE_STATUS,
+} from './constants';
+
+import Avatar from 'next/avatar/Avatar.vue';
+
+import TextBubble from './bubbles/Text/Index.vue';
+import ActivityBubble from './bubbles/Activity.vue';
+import ImageBubble from './bubbles/Image.vue';
+import FileBubble from './bubbles/File.vue';
+import AudioBubble from './bubbles/Audio.vue';
+import VideoBubble from './bubbles/Video.vue';
+import InstagramStoryBubble from './bubbles/InstagramStory.vue';
+import AttachmentsBubble from './bubbles/Attachments.vue';
+import EmailBubble from './bubbles/Email/Index.vue';
+import UnsupportedBubble from './bubbles/Unsupported.vue';
+import ContactBubble from './bubbles/Contact.vue';
+import DyteBubble from './bubbles/Dyte.vue';
+const LocationBubble = defineAsyncComponent(
+  () => import('./bubbles/Location.vue')
+);
+
+import MessageError from './MessageError.vue';
+import MessageMeta from './MessageMeta.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} ContentAttributes
+ * @property {string} externalError - an error message to be shown if the message failed to send
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {ContentAttributes} [contentAttributes={}] - Additional attributes of the message content
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ * @property {Sender|null} [sender=null] - The sender information
+ * @property {boolean} [private=false] - Whether the message is private
+ * @property {number|null} [senderId=null] - The ID of the sender
+ * @property {number} createdAt - Timestamp when the message was created
+ * @property {number} currentUserId - The ID of the current user
+ * @property {number} id - The unique identifier for the message
+ * @property {number} messageType - The type of message (must be one of MESSAGE_TYPES)
+ * @property {string|null} [error=null] - Error message if the message failed to send
+ * @property {string|null} [senderType=null] - The type of the sender
+ * @property {string} content - The message content
+ */
+
+// eslint-disable-next-line vue/define-macros-order
+const props = defineProps({
+  id: { type: Number, required: true },
+  messageType: {
+    type: Number,
+    required: true,
+    validator: value => Object.values(MESSAGE_TYPES).includes(value),
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  senderId: {
+    type: Number,
+    default: null,
+  },
+  senderType: {
+    type: String,
+    default: null,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => {},
+  },
+  currentUserId: {
+    type: Number,
+    required: true,
+  },
+  groupWithNext: {
+    type: Boolean,
+    default: false,
+  },
+  inReplyTo: {
+    type: Object,
+    default: null,
+  },
+  isEmailInbox: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Computes the message variant based on props
+ * @type {import('vue').ComputedRef<'user'|'agent'|'activity'|'private'|'bot'|'template'>}
+ */
+const variant = computed(() => {
+  if (props.private) return MESSAGE_VARIANTS.PRIVATE;
+  if (props.isEmailInbox) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) {
+      return MESSAGE_VARIANTS.EMAIL;
+    }
+  }
+  if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
+  if (props.contentAttributes.isUnsupported)
+    return MESSAGE_VARIANTS.UNSUPPORTED;
+
+  const variants = {
+    [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
+    [MESSAGE_TYPES.ACTIVITY]: MESSAGE_VARIANTS.ACTIVITY,
+    [MESSAGE_TYPES.OUTGOING]: MESSAGE_VARIANTS.AGENT,
+    [MESSAGE_TYPES.TEMPLATE]: MESSAGE_VARIANTS.TEMPLATE,
+  };
+
+  return variants[props.messageType] || MESSAGE_VARIANTS.USER;
+});
+
+const isMyMessage = computed(() => {
+  const senderId = props.senderId ?? props.sender?.id;
+  const senderType = props.senderType ?? props.sender?.type;
+
+  if (!senderType || !senderId) return false;
+
+  return (
+    senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
+    props.currentUserId === senderId
+  );
+});
+
+/**
+ * Computes the message orientation based on sender type and message type
+ * @returns {import('vue').ComputedRef<'left'|'right'|'center'>} The computed orientation
+ */
+const orientation = computed(() => {
+  if (isMyMessage.value) {
+    return ORIENTATION.RIGHT;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return ORIENTATION.CENTER;
+
+  return ORIENTATION.LEFT;
+});
+
+const flexOrientationClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'justify-start',
+    [ORIENTATION.RIGHT]: 'justify-end',
+    [ORIENTATION.CENTER]: 'justify-center',
+  };
+
+  return map[orientation.value];
+});
+
+const gridClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
+    [ORIENTATION.RIGHT]: 'grid grid-cols-1fr',
+  };
+
+  return map[orientation.value];
+});
+
+const gridTemplate = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: `
+      "avatar bubble"
+      "spacer meta"
+    `,
+    [ORIENTATION.RIGHT]: `
+      "bubble"
+      "meta"
+    `,
+  };
+
+  return map[orientation.value];
+});
+
+const shouldGroupWithNext = computed(() => {
+  if (props.status === MESSAGE_STATUS.FAILED) return false;
+
+  return props.groupWithNext;
+});
+
+const shouldShowAvatar = computed(() => {
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return false;
+  if (orientation.value === ORIENTATION.RIGHT) return false;
+
+  return true;
+});
+
+const componentToRender = computed(() => {
+  if (props.isEmailInbox && !props.private) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
+  }
+
+  if (props.contentAttributes.isUnsupported) {
+    return UnsupportedBubble;
+  }
+
+  if (props.contentAttributes.type === 'dyte') {
+    return DyteBubble;
+  }
+
+  if (props.contentAttributes.imageType === 'story_mention') {
+    return InstagramStoryBubble;
+  }
+
+  if (props.attachments.length === 1) {
+    const fileType = props.attachments[0].fileType;
+
+    if (!props.content) {
+      if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
+      if (fileType === ATTACHMENT_TYPES.FILE) return FileBubble;
+      if (fileType === ATTACHMENT_TYPES.AUDIO) return AudioBubble;
+      if (fileType === ATTACHMENT_TYPES.VIDEO) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.IG_REEL) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.LOCATION) return LocationBubble;
+    }
+    // Attachment content is the name of the contact
+    if (fileType === ATTACHMENT_TYPES.CONTACT) return ContactBubble;
+  }
+
+  if (props.attachments.length > 1 && !props.content) {
+    return AttachmentsBubble;
+  }
+
+  return TextBubble;
+});
+
+provideMessageContext({
+  variant,
+  inReplyTo: props.inReplyTo,
+  orientation,
+  isMyMessage,
+});
+</script>
+
+<template>
+  <div
+    class="flex w-full"
+    :data-message-id="props.id"
+    :class="[flexOrientationClass, shouldGroupWithNext ? 'mb-2' : 'mb-4']"
+  >
+    <div v-if="variant === MESSAGE_VARIANTS.ACTIVITY">
+      <ActivityBubble :content="content" />
+    </div>
+    <div
+      v-else
+      :class="[
+        gridClass,
+        {
+          'gap-y-2': !shouldGroupWithNext,
+          'w-full': variant === MESSAGE_VARIANTS.EMAIL,
+        },
+      ]"
+      class="gap-x-3"
+      :style="{
+        gridTemplateAreas: gridTemplate,
+      }"
+    >
+      <div
+        v-if="!shouldGroupWithNext && shouldShowAvatar"
+        class="[grid-area:avatar] flex items-end"
+      >
+        <Avatar
+          :name="sender ? sender.name : ''"
+          :src="sender?.thumbnail"
+          :size="24"
+        />
+      </div>
+      <div
+        class="[grid-area:bubble]"
+        :class="{
+          'pl-9': ORIENTATION.RIGHT === orientation,
+        }"
+      >
+        <Component :is="componentToRender" v-bind="props" />
+      </div>
+      <MessageError
+        v-if="contentAttributes.externalError"
+        class="[grid-area:meta]"
+        :class="flexOrientationClass"
+        :error="contentAttributes.externalError"
+      />
+      <MessageMeta
+        v-else-if="!shouldGroupWithNext"
+        class="[grid-area:meta]"
+        :class="flexOrientationClass"
+        :sender="props.sender"
+        :status="props.status"
+        :private="props.private"
+        :is-my-message="isMyMessage"
+        :created-at="props.createdAt"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  error: { type: String, required: true },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="text-xs text-n-ruby-11 flex items-center gap-1.5">
+    <span>{{ t('CHAT_LIST.FAILED_TO_SEND') }}</span>
+    <div class="relative group">
+      <div
+        class="bg-n-alpha-2 rounded-md size-5 grid place-content-center cursor-pointer"
+      >
+        <Icon
+          icon="i-lucide-alert-triangle"
+          class="text-n-ruby-11 size-[14px]"
+        />
+      </div>
+      <div
+        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 right-0 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+      >
+        {{ error }}
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+
+import MessageStatus from './MessageStatus.vue';
+import Icon from 'next/icon/Icon.vue';
+
+import { MESSAGE_STATUS } from './constants';
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {boolean} [private=false] - Whether the message is private
+ * @property {isMyMessage} [private=false] - Whether the message is sent by the current user or not
+ * @property {number} createdAt - Timestamp when the message was created
+ * @property {Sender|null} [sender=null] - The sender information
+ */
+
+const props = defineProps({
+  sender: {
+    type: Object,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  isMyMessage: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+});
+
+const readableTime = computed(() =>
+  messageTimestamp(props.createdAt, 'LLL d, h:mm a')
+);
+
+const showSender = computed(() => !props.isMyMessage && props.sender);
+</script>
+
+<template>
+  <div class="text-xs text-n-slate-11 flex items-center gap-1.5">
+    <div class="inline">
+      <span v-if="showSender" class="inline capitalize">{{ sender.name }}</span>
+      <span v-if="showSender && readableTime" class="inline"> • </span>
+      <span class="inline">{{ readableTime }}</span>
+    </div>
+    <Icon
+      v-if="props.private"
+      icon="i-lucide-lock-keyhole"
+      class="text-n-slate-10 size-3"
+    />
+    <MessageStatus v-if="props.isMyMessage" :status />
+  </div>
+</template>