Merge branch 'develop' into feat/message-bubble

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;
@@ -148,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;

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

@@ -6,6 +6,7 @@ import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Flag from 'dashboard/components-next/flag/Flag.vue';
 import countries from 'shared/constants/countries';
 
 const props = defineProps({
@@ -56,13 +57,19 @@ const countryDetails = computed(() => {
 
   if (!activeCountry) return null;
 
-  const parts = [
-    activeCountry.emoji,
-    city ? `${city},` : null,
-    activeCountry.name,
-  ].filter(Boolean);
+  return {
+    countryCode: activeCountry.id,
+    city: city ? `${city},` : null,
+    name: activeCountry.name,
+  };
+});
 
-  return parts.length ? parts.join(' ') : null;
+const formattedLocation = computed(() => {
+  if (!countryDetails.value) return '';
+
+  return [countryDetails.value.city, countryDetails.value.name]
+    .filter(Boolean)
+    .join(' ');
 });
 
 const handleFormUpdate = updatedData => {
@@ -114,8 +121,12 @@ const onClickViewDetails = () => emit('showContact', props.id);
             {{ phoneNumber }}
           </span>
           <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
-          <span v-if="countryDetails" class="text-sm truncate text-n-slate-11">
-            {{ countryDetails }}
+          <span
+            v-if="countryDetails"
+            class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
+          >
+            <Flag :country="countryDetails.countryCode" class="size-3.5" />
+            {{ formattedLocation }}
           </span>
           <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
           <Button

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

@@ -106,10 +106,15 @@ const onImport = async file => {
   try {
     await store.dispatch('contacts/import', file);
     contactImportDialogRef.value?.dialogRef.close();
-    useAlert(t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.SUCCESS_MESSAGE')
+    );
     useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
   } catch (error) {
-    useAlert(error.message ?? t('IMPORT_CONTACTS.ERROR_MESSAGE'));
+    useAlert(
+      error.message ??
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.ERROR_MESSAGE')
+    );
     useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
   }
 };

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

@@ -70,6 +70,10 @@ const updateContact = async () => {
   try {
     const { customAttributes, ...basicContactData } = contactData.value;
     await store.dispatch('contacts/update', basicContactData);
+    await store.dispatch(
+      'contacts/fetchContactableInbox',
+      props.selectedContact.id
+    );
     useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
   } catch (error) {
     useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.ERROR_MESSAGE'));

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

@@ -153,7 +153,6 @@ watch(
   activeContact,
   () => {
     if (activeContact.value && props.contactId) {
-      // Add null check for contactInboxes
       const contactInboxes = activeContact.value?.contactInboxes || [];
       selectedContact.value = {
         ...activeContact.value,

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

@@ -3,6 +3,15 @@ import { getInboxIconByType } from 'dashboard/helper/inbox';
 import camelcaseKeys from 'camelcase-keys';
 import ContactAPI from 'dashboard/api/contacts';
 
+const CHANNEL_PRIORITY = {
+  'Channel::Email': 1,
+  'Channel::Whatsapp': 2,
+  'Channel::Sms': 3,
+  'Channel::TwilioSms': 4,
+  'Channel::WebWidget': 5,
+  'Channel::Api': 6,
+};
+
 export const generateLabelForContactableInboxesList = ({
   name,
   email,
@@ -21,27 +30,49 @@ export const generateLabelForContactableInboxesList = ({
   return name;
 };
 
+const transformInbox = ({
+  name,
+  id,
+  email,
+  channelType,
+  phoneNumber,
+  ...rest
+}) => ({
+  id,
+  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
+  label: generateLabelForContactableInboxesList({
+    name,
+    email,
+    channelType,
+    phoneNumber,
+  }),
+  action: 'inbox',
+  value: id,
+  name,
+  email,
+  phoneNumber,
+  channelType,
+  ...rest,
+});
+
+export const compareInboxes = (a, b) => {
+  // Channels that have no priority defined should come at the end.
+  const priorityA = CHANNEL_PRIORITY[a.channelType] || 999;
+  const priorityB = CHANNEL_PRIORITY[b.channelType] || 999;
+
+  if (priorityA !== priorityB) {
+    return priorityA - priorityB;
+  }
+
+  const nameA = a.name || '';
+  const nameB = b.name || '';
+  return nameA.localeCompare(nameB);
+};
+
 export const buildContactableInboxesList = contactInboxes => {
   if (!contactInboxes) return [];
-  return contactInboxes.map(
-    ({ name, id, email, channelType, phoneNumber, ...rest }) => ({
-      id,
-      icon: getInboxIconByType(channelType, phoneNumber, 'line'),
-      label: generateLabelForContactableInboxesList({
-        name,
-        email,
-        channelType,
-        phoneNumber,
-      }),
-      action: 'inbox',
-      value: id,
-      name,
-      email,
-      phoneNumber,
-      channelType,
-      ...rest,
-    })
-  );
+
+  return contactInboxes.map(transformInbox).sort(compareInboxes);
 };
 
 export const getCapitalizedNameFromEmail = email => {

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

@@ -463,3 +463,74 @@ describe('composeConversationHelper', () => {
     });
   });
 });
+
+describe('compareInboxes', () => {
+  it('should sort inboxes by channel priority', () => {
+    const inboxes = [
+      { channelType: 'Channel::Api', name: 'API Inbox' },
+      { channelType: 'Channel::Email', name: 'Email Inbox' },
+      { channelType: 'Channel::WebWidget', name: 'Widget' },
+      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted[0].channelType).toBe('Channel::Email');
+    expect(sorted[1].channelType).toBe('Channel::Whatsapp');
+    expect(sorted[2].channelType).toBe('Channel::WebWidget');
+    expect(sorted[3].channelType).toBe('Channel::Api');
+  });
+
+  it('should sort SMS channels correctly', () => {
+    const inboxes = [
+      { channelType: 'Channel::TwilioSms', name: 'Twilio' },
+      { channelType: 'Channel::Sms', name: 'Regular SMS' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted[0].channelType).toBe('Channel::Sms');
+    expect(sorted[1].channelType).toBe('Channel::TwilioSms');
+  });
+
+  it('should sort by name when channel types are same', () => {
+    const inboxes = [
+      { channelType: 'Channel::Email', name: 'Support' },
+      { channelType: 'Channel::Email', name: 'Marketing' },
+      { channelType: 'Channel::Email', name: 'Billing' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted.map(inbox => inbox.name)).toEqual([
+      'Billing',
+      'Marketing',
+      'Support',
+    ]);
+  });
+
+  it('should put channels without priority at the end', () => {
+    const inboxes = [
+      { channelType: 'Channel::Unknown', name: 'Unknown' },
+      { channelType: 'Channel::Email', name: 'Email' },
+      { channelType: 'Channel::LineChannel', name: 'Line' },
+      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted.map(i => i.channelType)).toEqual([
+      'Channel::Email',
+      'Channel::Whatsapp',
+
+      'Channel::LineChannel',
+      'Channel::Unknown',
+    ]);
+  });
+
+  it('should handle empty array', () => {
+    const inboxes = [];
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+    expect(sorted).toEqual([]);
+  });
+});

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/base/DropdownItem.vue

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

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/sidebar/SidebarGroup.vue

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

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

@@ -1,7 +1,6 @@
 <script setup>
 import { computed } from 'vue';
 import Auth from 'dashboard/api/auth';
-import { useRouter } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import Avatar from 'next/avatar/Avatar.vue';
@@ -21,7 +20,6 @@ defineOptions({
 });
 
 const { t } = useI18n();
-const router = useRouter();
 
 const globalConfig = useMapGetter('globalConfig/get');
 const currentUser = useMapGetter('getCurrentUser');
@@ -49,9 +47,7 @@ const menuItems = computed(() => {
       show: true,
       label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
       icon: 'i-lucide-user-pen',
-      click: () => {
-        router.push({ name: 'profile_settings_index' });
-      },
+      link: { name: 'profile_settings_index' },
     },
     {
       show: true,
@@ -66,15 +62,16 @@ const menuItems = computed(() => {
       show: true,
       label: t('SIDEBAR_ITEMS.DOCS'),
       icon: 'i-lucide-book',
-      click: () => {
-        window.open('https://www.chatwoot.com/hc/user-guide/en', '_blank');
-      },
+      link: 'https://www.chatwoot.com/hc/user-guide/en',
+      nativeLink: true,
+      target: '_blank',
     },
     {
       show: currentUser.value.type === 'SuperAdmin',
       label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
       icon: 'i-lucide-castle',
       link: '/super_admin',
+      nativeLink: true,
       target: '_blank',
     },
     {

app/javascript/dashboard/components/ChatList.vue

@@ -782,10 +782,10 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
+      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
     ]"
   >
     <slot />
@@ -794,6 +794,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
+      :is-on-expanded-layout="isOnExpandedLayout"
       @add-folders="onClickOpenAddFoldersModal"
       @delete-folders="onClickOpenDeleteFoldersModal"
       @filters-modal="onToggleAdvanceFiltersModal"
@@ -823,6 +824,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       v-if="!hasAppliedFiltersOrActiveFolders"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
+      is-compact
       @chat-tab-change="updateAssigneeTab"
     />
 
@@ -916,12 +918,3 @@ watch(conversationFilters, (newVal, oldVal) => {
     </Teleport>
   </div>
 </template>
-
-<style scoped>
-@tailwind components;
-@layer components {
-  .flex-basis-clamp {
-    flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
-  }
-}
-</style>

app/javascript/dashboard/components/ChatListHeader.vue

@@ -1,6 +1,13 @@
 <script setup>
 import { computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import wootConstants from 'dashboard/constants/globals';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
+import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   pageTitle: {
@@ -19,6 +26,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isOnExpandedLayout: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const emit = defineEmits([
@@ -29,6 +40,13 @@ const emit = defineEmits([
   'filtersModal',
 ]);
 
+const { uiSettings, updateUISettings } = useUISettings();
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
 const onBasicFilterChange = (value, type) => {
   emit('basicFilterChange', value, type);
 };
@@ -36,26 +54,48 @@ const onBasicFilterChange = (value, type) => {
 const hasAppliedFiltersOrActiveFolders = computed(() => {
   return props.hasAppliedFilters || props.hasActiveFolders;
 });
+
+const showV4View = computed(() => {
+  return isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CHATWOOT_V4
+  );
+});
+
+const toggleConversationLayout = () => {
+  const { LAYOUT_TYPES } = wootConstants;
+  const {
+    conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
+  } = uiSettings.value;
+  const newViewType =
+    conversationDisplayType === LAYOUT_TYPES.CONDENSED
+      ? LAYOUT_TYPES.EXPANDED
+      : LAYOUT_TYPES.CONDENSED;
+  updateUISettings({
+    conversation_display_type: newViewType,
+    previously_used_conversation_display_type: newViewType,
+  });
+};
 </script>
 
 <template>
   <div
-    class="flex items-center justify-between px-4 py-0"
+    class="flex items-center justify-between gap-2 px-4 pb-0"
     :class="{
-      'pb-3 border-b border-slate-75 dark:border-slate-700':
-        hasAppliedFiltersOrActiveFolders,
+      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+      'pt-2.5': showV4View,
     }"
   >
-    <div class="flex max-w-[85%] justify-center items-center">
+    <div class="flex items-center justify-center min-w-0">
       <h1
-        class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100"
+        class="text-lg font-medium truncate text-n-slate-12"
         :title="pageTitle"
       >
         {{ pageTitle }}
       </h1>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>
@@ -63,67 +103,82 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
     <div class="flex items-center gap-1">
       <template v-if="hasAppliedFilters && !hasActiveFolders">
         <div class="relative">
-          <woot-button
+          <NextButton
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
-            size="tiny"
-            variant="smooth"
-            color-scheme="secondary"
-            icon="save"
+            icon="i-lucide-save"
+            slate
+            xs
+            faded
             @click="emit('addFolders')"
           />
-          <div id="saveFilterTeleportTarget" class="absolute mt-2 z-40" />
+          <div
+            id="saveFilterTeleportTarget"
+            class="absolute z-40 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
         </div>
-
-        <woot-button
+        <NextButton
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="alert"
-          icon="dismiss-circle"
+          icon="i-lucide-circle-x"
+          ruby
+          faded
+          xs
           @click="emit('resetFilters')"
         />
       </template>
       <template v-if="hasActiveFolders">
         <div class="relative">
-          <woot-button
+          <NextButton
             id="toggleConversationFilterButton"
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
-            size="tiny"
-            variant="smooth"
-            color-scheme="secondary"
-            icon="edit"
+            icon="i-lucide-pen-line"
+            slate
+            xs
+            faded
             @click="emit('filtersModal')"
           />
           <div
             id="conversationFilterTeleportTarget"
-            class="absolute mt-2 z-40"
+            class="absolute z-40 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
           />
         </div>
-        <woot-button
+        <NextButton
+          id="toggleConversationFilterButton"
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="alert"
-          icon="delete"
+          icon="i-lucide-trash-2"
+          ruby
+          xs
+          faded
           @click="emit('deleteFolders')"
         />
       </template>
       <div v-else class="relative">
-        <woot-button
+        <NextButton
           id="toggleConversationFilterButton"
           v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="filter"
-          size="tiny"
+          icon="i-lucide-list-filter"
+          slate
+          xs
+          faded
           @click="emit('filtersModal')"
         />
-        <div id="conversationFilterTeleportTarget" class="absolute mt-2 z-40" />
+        <div
+          id="conversationFilterTeleportTarget"
+          class="absolute z-40 mt-2"
+          :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+        />
       </div>
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
+        :is-on-expanded-layout="isOnExpandedLayout"
         @change-filter="onBasicFilterChange"
       />
+      <SwitchLayout
+        v-if="showV4View"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="toggleConversationLayout"
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/components/copilot/CopilotContainer.vue

@@ -0,0 +1,58 @@
+<script setup>
+import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
+import IntegrationsAPI from 'dashboard/api/integrations';
+import { useMapGetter } from 'dashboard/composables/store';
+import { ref } from 'vue';
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+const currentUser = useMapGetter('getCurrentUser');
+const messages = ref([]);
+
+const isCaptainTyping = ref(false);
+
+const sendMessage = async message => {
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+  isCaptainTyping.value = true;
+
+  try {
+    const { data } = await IntegrationsAPI.requestCaptainCopilot({
+      previous_history: messages.value
+        .map(m => ({
+          role: m.role,
+          content: m.content,
+        }))
+        .slice(0, -1),
+      message,
+      conversation_id: props.conversationId,
+    });
+    messages.value.push({
+      id: new Date().getTime(),
+      role: 'assistant',
+      content: data.message,
+    });
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log(error);
+  } finally {
+    isCaptainTyping.value = false;
+  }
+};
+</script>
+
+<template>
+  <Copilot
+    :messages="messages"
+    :support-agent="currentUser"
+    :is-captain-typing="isCaptainTyping"
+    @send-message="sendMessage"
+  />
+</template>

app/javascript/dashboard/components/ui/Tabs/Tabs.vue

@@ -11,6 +11,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isCompact: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['change']);
@@ -59,7 +63,10 @@ onMounted(() => {
 
 <template>
   <div
-    :class="{ 'tabs--container--with-border': border }"
+    :class="{
+      'tabs--container--with-border': border,
+      'tabs--container--compact': isCompact,
+    }"
     class="tabs--container"
   >
     <button

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

@@ -1,407 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import FilterInputBox from '../FilterInput/Index.vue';
-import languages from './advancedFilterItems/languages';
-import countries from 'shared/constants/countries.js';
-import { mapGetters } from 'vuex';
-import { filterAttributeGroups } from './advancedFilterItems';
-import { useFilter } from 'shared/composables/useFilter';
-import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
-import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
-import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    FilterInputBox,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    initialFilterTypes: {
-      type: Array,
-      default: () => [],
-    },
-    initialAppliedFilters: {
-      type: Array,
-      default: () => [],
-    },
-    activeFolderName: {
-      type: String,
-      default: '',
-    },
-    isFolderView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['applyFilter', 'updateFolder'],
-  setup() {
-    const { setFilterAttributes } = useFilter({
-      filteri18nKey: 'FILTER',
-      attributeModel: 'conversation_attribute',
-    });
-    return {
-      setFilterAttributes,
-    };
-  },
-  data() {
-    return {
-      show: true,
-      appliedFilters: this.initialAppliedFilters,
-      activeFolderNewName: this.activeFolderName,
-      filterTypes: this.initialFilterTypes,
-      filterAttributeGroups,
-      filterGroups: [],
-      allCustomAttributes: [],
-      attributeModel: 'conversation_attribute',
-      filtersFori18n: 'FILTER',
-      validationErrors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      getAppliedConversationFilters: 'getAppliedConversationFilters',
-    }),
-    filterModalHeaderTitle() {
-      return !this.isFolderView
-        ? this.$t('FILTER.TITLE')
-        : this.$t('FILTER.EDIT_CUSTOM_FILTER');
-    },
-    filterModalSubTitle() {
-      return !this.isFolderView
-        ? this.$t('FILTER.SUBTITLE')
-        : this.$t('FILTER.CUSTOM_VIEWS_SUBTITLE');
-    },
-  },
-  mounted() {
-    const { filterGroups, filterTypes } = this.setFilterAttributes();
-
-    this.filterTypes = [...this.filterTypes, ...filterTypes];
-    this.filterGroups = filterGroups;
-
-    this.$store.dispatch('campaigns/get');
-    if (this.getAppliedConversationFilters.length) {
-      this.appliedFilters = [];
-      this.appliedFilters = [...this.getAppliedConversationFilters];
-    } else if (!this.isFolderView) {
-      this.appliedFilters.push({
-        attribute_key: 'status',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        attribute_model: 'standard',
-      });
-    }
-  },
-  methods: {
-    getOperatorTypes(key) {
-      switch (key) {
-        case 'list':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'text':
-          return OPERATORS.OPERATOR_TYPES_3;
-        case 'number':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'link':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'date':
-          return OPERATORS.OPERATOR_TYPES_4;
-        case 'checkbox':
-          return OPERATORS.OPERATOR_TYPES_1;
-        default:
-          return OPERATORS.OPERATOR_TYPES_1;
-      }
-    },
-    customAttributeInputType(key) {
-      switch (key) {
-        case 'date':
-          return 'date';
-        case 'text':
-          return 'plain_text';
-        case 'list':
-          return 'search_select';
-        case 'checkbox':
-          return 'search_select';
-        default:
-          return 'plain_text';
-      }
-    },
-    getAttributeModel(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.attributeModel;
-    },
-    getInputType(key, operator) {
-      if (key === 'created_at' || key === 'last_activity_at')
-        if (operator === 'days_before') return 'plain_text';
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.inputType;
-    },
-    getOperators(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.filterOperators;
-    },
-    statusFilterItems() {
-      return {
-        open: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
-        },
-        resolved: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.resolved.TEXT'),
-        },
-        pending: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.pending.TEXT'),
-        },
-        snoozed: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.snoozed.TEXT'),
-        },
-        all: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
-        },
-      };
-    },
-    getDropdownValues(type) {
-      const statusFilters = this.statusFilterItems();
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ](this.attributeModel);
-
-      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type &&
-          attr.attribute_display_type === 'checkbox'
-        );
-      });
-
-      if (isCustomAttributeCheckbox) {
-        return [
-          {
-            id: true,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-          },
-          {
-            id: false,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-          },
-        ];
-      }
-
-      const isCustomAttributeList = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type && attr.attribute_display_type === 'list'
-        );
-      });
-
-      if (isCustomAttributeList) {
-        return allCustomAttributes
-          .find(attr => attr.attribute_key === type)
-          .attribute_values.map(item => {
-            return {
-              id: item,
-              name: item,
-            };
-          });
-      }
-
-      switch (type) {
-        case 'status':
-          return [
-            ...Object.keys(statusFilters).map(status => {
-              return {
-                id: status,
-                name: statusFilters[status].TEXT,
-              };
-            }),
-          ];
-        case 'assignee_id':
-          return this.$store.getters['agents/getAgents'];
-        case 'contact':
-          return this.$store.getters['contacts/getContacts'];
-        case 'inbox_id':
-          return this.$store.getters['inboxes/getInboxes'];
-        case 'team_id':
-          return this.$store.getters['teams/getTeams'];
-        case 'campaign_id':
-          return this.$store.getters['campaigns/getAllCampaigns'].map(i => {
-            return {
-              id: i.id,
-              name: i.title,
-            };
-          });
-        case 'labels':
-          return this.$store.getters['labels/getLabels'].map(i => {
-            return {
-              id: i.title,
-              name: i.title,
-            };
-          });
-        case 'browser_language':
-          return languages;
-        case 'country_code':
-          return countries;
-        default:
-          return undefined;
-      }
-    },
-    appendNewFilter() {
-      if (this.isFolderView) {
-        this.setQueryOperatorOnLastQuery();
-      } else {
-        this.appliedFilters.push({
-          attribute_key: 'status',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      }
-    },
-    setQueryOperatorOnLastQuery() {
-      const lastItemIndex = this.appliedFilters.length - 1;
-      this.appliedFilters[lastItemIndex] = {
-        ...this.appliedFilters[lastItemIndex],
-        query_operator: 'and',
-      };
-      this.$nextTick(() => {
-        this.appliedFilters.push({
-          attribute_key: 'status',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      });
-    },
-    removeFilter(index) {
-      if (this.appliedFilters.length <= 1) {
-        useAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
-      } else {
-        this.appliedFilters.splice(index, 1);
-      }
-    },
-    submitFilterQuery() {
-      this.validationErrors = validateConversationOrContactFilters(
-        this.appliedFilters
-      );
-      if (Object.keys(this.validationErrors).length === 0) {
-        this.$store.dispatch(
-          'setConversationFilters',
-          JSON.parse(JSON.stringify(this.appliedFilters))
-        );
-        this.$emit('applyFilter', this.appliedFilters);
-        useTrack(CONVERSATION_EVENTS.APPLY_FILTER, {
-          applied_filters: this.appliedFilters.map(filter => ({
-            key: filter.attribute_key,
-            operator: filter.filter_operator,
-            query_operator: filter.query_operator,
-          })),
-        });
-      }
-    },
-    updateSavedCustomViews() {
-      this.$emit('updateFolder', this.appliedFilters, this.activeFolderNewName);
-    },
-    resetFilter(index, currentFilter) {
-      this.appliedFilters[index].filter_operator = this.filterTypes.find(
-        filter => filter.attributeKey === currentFilter.attribute_key
-      ).filterOperators[0].value;
-      this.appliedFilters[index].values = '';
-    },
-    showUserInput(operatorType) {
-      if (operatorType === 'is_present' || operatorType === 'is_not_present')
-        return false;
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isFolderView">
-        <label class="input-label" :class="{ error: !activeFolderNewName }">
-          {{ $t('FILTER.FOLDER_LABEL') }}
-          <input
-            v-model="activeFolderNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeFolderNewName" class="message">
-            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="mb-1">
-          {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
-        </label>
-      </div>
-      <div
-        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
-      >
-        <FilterInputBox
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          grouped-filters
-          :error-message="
-            validationErrors[`filter_${i}`]
-              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
-              : ''
-          "
-          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @remove-filter="removeFilter(i)"
-        />
-        <div class="mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isFolderView"
-            :disabled="!activeFolderNewName"
-            @click="updateSavedCustomViews"
-          >
-            {{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.folder-input {
-  @apply w-[50%];
-}
-</style>

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

@@ -3,6 +3,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import FilterItem from './FilterItem.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const CHAT_STATUS_FILTER_ITEMS = Object.freeze([
   'open',
@@ -26,6 +27,13 @@ const SORT_ORDER_ITEMS = Object.freeze([
 export default {
   components: {
     FilterItem,
+    NextButton,
+  },
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: ['changeFilter'],
   setup() {
@@ -85,22 +93,25 @@ export default {
 
 <template>
   <div class="relative flex">
-    <woot-button
+    <NextButton
       v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
-      variant="smooth"
-      size="tiny"
-      color-scheme="secondary"
-      class="selector-button"
-      icon="sort-icon"
+      icon="i-lucide-arrow-up-down"
+      slate
+      faded
+      xs
       @click="toggleDropdown"
     />
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
+      class="mt-1 dropdown-pane dropdown-pane--open !w-52 !p-4 top-6 border !border-n-weak dark:!border-n-weak !bg-n-alpha-3 dark:!bg-n-alpha-3 backdrop-blur-[100px]"
+      :class="{
+        'ltr:left-0 rtl:right-0': !isOnExpandedLayout,
+        'ltr:right-0 rtl:left-0': isOnExpandedLayout,
+      }"
     >
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <FilterItem
@@ -112,7 +123,7 @@ export default {
         />
       </div>
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <FilterItem
@@ -126,9 +137,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.basic-filter {
-  @apply w-52 p-4 top-6;
-}
-</style>

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

@@ -1,14 +1,14 @@
 <script>
 import { mapGetters } from 'vuex';
-import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
 import ConversationHeader from './ConversationHeader.vue';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
 import EmptyState from './EmptyState/EmptyState.vue';
 import MessagesView from './MessagesView.vue';
+import ConversationSidebar from './ConversationSidebar.vue';
 
 export default {
   components: {
-    ContactPanel,
+    ConversationSidebar,
     ConversationHeader,
     DashboardAppFrame,
     EmptyState,
@@ -98,8 +98,10 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
-    :class="{ 'with-border-right': !isOnExpandedLayout }"
+    class="conversation-details-wrap bg-n-background"
+    :class="{
+      'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
+    }"
   >
     <ConversationHeader
       v-if="currentChat.id"
@@ -138,17 +140,11 @@ export default {
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
-      <div
-        v-show="showContactPanel"
-        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
-      >
-        <ContactPanel
-          v-if="showContactPanel"
-          :conversation-id="currentChat.id"
-          :inbox-id="currentChat.inbox_id"
-          :on-toggle="onToggleContactPanel"
-        />
-      </div>
+      <ConversationSidebar
+        v-if="showContactPanel"
+        :current-chat="currentChat"
+        @toggle-contact-panel="onToggleContactPanel"
+      />
     </div>
     <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"
@@ -165,10 +161,6 @@ export default {
 <style lang="scss" scoped>
 .conversation-details-wrap {
   @apply flex flex-col min-w-0 w-full;
-
-  &.with-border-right {
-    @apply border-r border-slate-50 dark:border-slate-700;
-  }
 }
 
 .dashboard-app--tabs {
@@ -180,10 +172,4 @@ export default {
     }
   }
 }
-
-.conversation-sidebar-wrap {
-  &::v-deep .contact--panel {
-    @apply w-full h-full max-w-full;
-  }
-}
 </style>

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

@@ -0,0 +1,79 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed, ref } from 'vue';
+import CopilotContainer from '../../copilot/CopilotContainer.vue';
+import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  currentChat: {
+    required: true,
+    type: Object,
+  },
+});
+
+const emit = defineEmits(['toggleContactPanel']);
+
+const getters = useStoreGetters();
+
+const captainIntegration = computed(() =>
+  getters['integrations/getIntegration'].value('captain', null)
+);
+const { t } = useI18n();
+
+const CONTACT_TABS_OPTIONS = [
+  { key: 'CONTACT', value: 'contact' },
+  { key: 'COPILOT', value: 'copilot' },
+];
+
+const tabs = computed(() => {
+  return CONTACT_TABS_OPTIONS.map(tab => ({
+    label: t(`CONVERSATION.SIDEBAR.${tab.key}`),
+    value: tab.value,
+  }));
+});
+const activeTab = ref(0);
+const toggleContactPanel = () => {
+  emit('toggleContactPanel');
+};
+
+const handleTabChange = selectedTab => {
+  activeTab.value = tabs.value.findIndex(
+    tabItem => tabItem.value === selectedTab.value
+  );
+};
+
+const showCopilotTab = computed(() => {
+  return captainIntegration.value && captainIntegration.value.enabled;
+});
+</script>
+
+<template>
+  <div
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+  >
+    <div v-if="showCopilotTab" class="p-2">
+      <TabBar
+        :tabs="tabs"
+        :initial-active-tab="activeTab"
+        class="w-full [&>button]:w-full"
+        @tab-changed="handleTabChange"
+      />
+    </div>
+    <div class="overflow-auto flex flex-1">
+      <ContactPanel
+        v-if="!activeTab"
+        :conversation-id="currentChat.id"
+        :inbox-id="currentChat.inbox_id"
+        :on-toggle="toggleContactPanel"
+      />
+      <CopilotContainer
+        v-else-if="activeTab === 1 && showCopilotTab"
+        :key="currentChat.id"
+        :conversation-id="currentChat.id"
+        class="flex-1"
+      />
+    </div>
+  </div>
+</template>

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

@@ -40,7 +40,7 @@ export default {
 <template>
   <select
     v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-weak text-n-slate-12"
     @change="onTabChange()"
   >
     <option v-for="value in items" :key="value" :value="value">

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

@@ -468,9 +468,7 @@ export default {
         size="tiny"
         color-scheme="secondary"
         class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
-        :class="
-          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
-        "
+        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
@@ -558,6 +556,7 @@ export default {
 
 <style scoped>
 @tailwind components;
+
 @layer components {
   .rounded-bl-calc {
     border-bottom-left-radius: calc(1.5rem + 1px);

app/javascript/dashboard/constants/globals.js

@@ -35,7 +35,7 @@ export default {
   HELP_CENTER_DOCS_URL:
     'https://www.chatwoot.com/docs/product/others/help-center',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
-  SMALL_SCREEN_BREAKPOINT: 1024,
+  SMALL_SCREEN_BREAKPOINT: 1200,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {
     UNTIL_NEXT_REPLY: 'until_next_reply',

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

@@ -1,46 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import {
-  validateConversationOrContactFilters,
-  validateAutomation,
-} from '../validations';
-
-describe('validateConversationOrContactFilters', () => {
-  it('should return no errors for valid filters', () => {
-    const validFilters = [
-      { attribute_key: 'name', filter_operator: 'contains', values: 'John' },
-      { attribute_key: 'email', filter_operator: 'is_present' },
-    ];
-    const errors = validateConversationOrContactFilters(validFilters);
-    expect(errors).toEqual({});
-  });
-
-  it('should return errors for invalid filters', () => {
-    const invalidFilters = [
-      { attribute_key: '', filter_operator: 'contains', values: 'John' },
-      { attribute_key: 'email', filter_operator: '' },
-      { attribute_key: 'age', filter_operator: 'equals' },
-    ];
-    const errors = validateConversationOrContactFilters(invalidFilters);
-    expect(errors).toEqual({
-      filter_0: 'ATTRIBUTE_KEY_REQUIRED',
-      filter_1: 'FILTER_OPERATOR_REQUIRED',
-      filter_2: 'VALUE_REQUIRED',
-    });
-  });
-
-  it('should validate days_before operator correctly', () => {
-    const filters = [
-      { attribute_key: 'date', filter_operator: 'days_before', values: '0' },
-      { attribute_key: 'date', filter_operator: 'days_before', values: '999' },
-      { attribute_key: 'date', filter_operator: 'days_before', values: '500' },
-    ];
-    const errors = validateConversationOrContactFilters(filters);
-    expect(errors).toEqual({
-      filter_0: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
-      filter_1: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
-    });
-  });
-});
+import { validateAutomation } from '../validations';
 
 describe('validateAutomation', () => {
   it('should return no errors for a valid automation', () => {

app/javascript/dashboard/helper/validations.js

@@ -65,29 +65,6 @@ export const validateSingleFilter = filter => {
   return null;
 };
 
-/**
- * Validates filters for conversations or contacts.
- *
- * @param {Array} filters - An array of filter objects to validate.
- * @param {string} filters[].attribute_key - The key of the attribute to filter on.
- * @param {string} filters[].filter_operator - The operator to use for filtering.
- * @param {string|number} [filters[].values] - The value(s) to filter by (required for most operators).
- *
- * @returns {Object} An object containing any validation errors, keyed by filter index.
- */
-export const validateConversationOrContactFilters = filters => {
-  const errors = {};
-
-  filters.forEach((filter, index) => {
-    const error = validateSingleFilter(filter);
-    if (error) {
-      errors[`filter_${index}`] = error;
-    }
-  });
-
-  return errors;
-};
-
 // ------------------------------------------------------------------
 // ---------------------- Automation Validation ---------------------
 // ------------------------------------------------------------------

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

@@ -57,46 +57,6 @@
     "TITLE": "Edit contact",
     "DESC": "Edit contact details"
   },
-  "CREATE_CONTACT": {
-    "BUTTON_LABEL": "New Contact",
-    "TITLE": "Create new contact",
-    "DESC": "Add basic information details about the contact."
-  },
-  "IMPORT_CONTACTS": {
-    "BUTTON_LABEL": "Import",
-    "TITLE": "Import Contacts",
-    "DESC": "Import contacts through a CSV file.",
-    "DOWNLOAD_LABEL": "Download a sample csv.",
-    "FORM": {
-      "LABEL": "CSV File",
-      "SUBMIT": "Import",
-      "CANCEL": "Cancel"
-    },
-    "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
-    "ERROR_MESSAGE": "There was an error, please try again"
-  },
-  "EXPORT_CONTACTS": {
-    "BUTTON_LABEL": "Export",
-    "TITLE": "Export Contacts",
-    "DESC": "Export contacts to a CSV file.",
-    "SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
-    "ERROR_MESSAGE": "There was an error, please try again",
-    "CONFIRM": {
-      "TITLE": "Export Contacts",
-      "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
-      "YES": "Yes, Export",
-      "NO": "No, Cancel"
-    }
-  },
-  "DELETE_NOTE": {
-    "CONFIRM": {
-      "TITLE": "Confirm Deletion",
-      "MESSAGE": "Are you want sure to delete this note?",
-      "YES": "Yes, Delete it",
-      "NO": "No, Keep it"
-    }
-  },
   "DELETE_CONTACT": {
     "BUTTON_LABEL": "Delete Contact",
     "TITLE": "Delete contact",
@@ -224,79 +184,14 @@
     }
   },
   "CONTACTS_PAGE": {
-    "HEADER": "Contacts",
-    "FIELDS": "Contact fields",
-    "SEARCH_BUTTON": "Search",
-    "SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
-    "FILTER_CONTACTS": "Filter",
-    "FILTER_CONTACTS_SAVE": "Save filter",
-    "FILTER_CONTACTS_DELETE": "Delete filter",
-    "FILTER_CONTACTS_EDIT": "Edit segment",
     "LIST": {
-      "LOADING_MESSAGE": "Loading contacts...",
-      "404": "No contacts matches your search 🔍",
-      "NO_CONTACTS": "There are no available contacts",
       "TABLE_HEADER": {
-        "NAME": "Name",
-        "PHONE_NUMBER": "Phone Number",
-        "CONVERSATIONS": "Conversations",
-        "LAST_ACTIVITY": "Last Activity",
-        "CREATED_AT": "Created At",
-        "COUNTRY": "Country",
-        "CITY": "City",
-        "SOCIAL_PROFILES": "Social Profiles",
-        "COMPANY": "Company",
-        "EMAIL_ADDRESS": "Email Address"
-      },
-      "VIEW_DETAILS": "View details"
-    }
-  },
-  "CONTACT_PROFILE": {
-    "BACK_BUTTON": "Contacts",
-    "LOADING": "Loading contact profile..."
-  },
-  "REMINDER": {
-    "ADD_BUTTON": {
-      "BUTTON": "Add",
-      "TITLE": "Shift + Enter to create a task"
-    },
-    "FOOTER": {
-      "DUE_DATE": "Due date",
-      "LABEL_TITLE": "Set type"
-    }
-  },
-  "NOTES": {
-    "FETCHING_NOTES": "Fetching notes...",
-    "NOT_AVAILABLE": "There are no notes created for this contact",
-    "HEADER": {
-      "TITLE": "Notes"
-    },
-    "LIST": {
-      "LABEL": "added a note"
-    },
-    "ADD": {
-      "BUTTON": "Add",
-      "PLACEHOLDER": "Add a note",
-      "TITLE": "Shift + Enter to create a note"
-    },
-    "CONTENT_HEADER": {
-      "DELETE": "Delete note"
-    }
-  },
-  "EVENTS": {
-    "HEADER": {
-      "TITLE": "Activities"
-    },
-    "BUTTON": {
-      "PILL_BUTTON_NOTES": "notes",
-      "PILL_BUTTON_EVENTS": "events",
-      "PILL_BUTTON_CONVO": "conversations"
+        "SOCIAL_PROFILES": "Social Profiles"
+      }
     }
   },
   "CUSTOM_ATTRIBUTES": {
-    "ADD_BUTTON_TEXT": "Add attributes",
     "BUTTON": "Add custom attribute",
-    "NOT_AVAILABLE": "There are no custom attributes available for this contact.",
     "COPY_SUCCESSFUL": "Copied to clipboard successfully",
     "SHOW_MORE": "Show all attributes",
     "SHOW_LESS": "Show less attributes",

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

@@ -225,6 +225,10 @@
         "DELETE": "Delete",
         "CANCEL": "Cancel"
       }
+    },
+    "SIDEBAR": {
+      "CONTACT": "Contact",
+      "COPILOT": "Copilot"
     }
   },
   "EMAIL_TRANSCRIPT": {

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

@@ -299,5 +299,13 @@
         "ERROR": "There was an error unlinking the issue, please try again"
       }
     }
+  },
+  "CAPTAIN": {
+    "NAME": "Captain",
+    "COPILOT": {
+      "SEND_MESSAGE": "Send message...",
+      "LOADER": "Captain is thinking",
+      "YOU": "You"
+    }
   }
 }

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -1,109 +0,0 @@
-<script>
-import Modal from 'dashboard/components/Modal.vue';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    isCreating: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['create', 'cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      attributeValue: '',
-      attributeName: '',
-    };
-  },
-  validations: {
-    attributeName: {
-      required,
-      minLength: minLength(2),
-    },
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    attributeNameError() {
-      if (this.v$.attributeName.$error) {
-        return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
-      }
-      return '';
-    },
-  },
-  methods: {
-    addCustomAttribute() {
-      this.$emit('create', {
-        attributeValue: this.attributeValue,
-        attributeName: this.attributeName || '',
-      });
-      this.reset();
-      this.$emit('cancel');
-    },
-    onClose() {
-      this.reset();
-      this.$emit('cancel');
-    },
-    reset() {
-      this.attributeValue = '';
-      this.attributeName = '';
-    },
-  },
-};
-</script>
-
-<template>
-  <Modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
-      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
-    />
-    <form class="w-full" @submit.prevent="addCustomAttribute">
-      <woot-input
-        v-model="attributeName"
-        :class="{ error: v$.attributeName.$error }"
-        class="w-full"
-        :error="attributeNameError"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
-        @blur="v$.attributeName.$touch"
-        @input="v$.attributeName.$touch"
-      />
-      <woot-input
-        v-model="attributeValue"
-        class="w-full"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
-      />
-      <div class="flex items-center justify-end gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.attributeName.$invalid || isCreating"
-          :is-loading="isCreating"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </Modal>
-</template>

app/javascript/dashboard/modules/contact/components/ContactAttribute.vue

@@ -1,131 +0,0 @@
-<script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  props: {
-    label: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    showEdit: { type: Boolean, default: false },
-  },
-  emits: ['update'],
-  data() {
-    return {
-      isEditing: false,
-      editedValue: this.value,
-    };
-  },
-  methods: {
-    focusInput() {
-      this.$refs.inputfield.focus();
-    },
-    onEdit() {
-      this.isEditing = true;
-      this.$nextTick(() => {
-        this.focusInput();
-      });
-    },
-    onUpdate() {
-      this.isEditing = false;
-      this.$emit('update', this.editedValue);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="contact-attribute">
-    <div class="title-wrap">
-      <h4 class="text-sm title">
-        <div class="title--icon">
-          <EmojiOrIcon :icon="icon" :emoji="emoji" />
-        </div>
-        {{ label }}
-      </h4>
-    </div>
-    <div v-show="isEditing">
-      <div class="mb-2 w-full flex items-center">
-        <input
-          ref="inputfield"
-          v-model="editedValue"
-          type="text"
-          class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
-          autofocus="true"
-          @keyup.enter="onUpdate"
-        />
-        <div>
-          <woot-button
-            size="small"
-            icon="ion-checkmark"
-            class="rounded-l-none rtl:rounded-r-none"
-            @click="onUpdate"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      v-show="!isEditing"
-      class="value--view"
-      :class="{ 'is-editable': showEdit }"
-    >
-      <p class="value">
-        {{ value || '---' }}
-      </p>
-      <woot-button
-        v-if="showEdit"
-        variant="clear link"
-        size="small"
-        color-scheme="secondary"
-        icon="edit"
-        class-names="edit-button"
-        @click="onEdit"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.contact-attribute {
-  margin-bottom: var(--space-small);
-}
-.title-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-mini);
-}
-.title {
-  display: flex;
-  align-items: center;
-  margin: 0;
-}
-.title--icon {
-  width: var(--space-two);
-}
-.edit-button {
-  display: none;
-}
-.value--view {
-  display: flex;
-
-  &.is-editable:hover {
-    .value {
-      background: var(--color-background);
-    }
-    .edit-button {
-      display: block;
-    }
-  }
-}
-.value {
-  display: inline-block;
-  min-width: var(--space-mega);
-  border-radius: var(--border-radius-small);
-  word-break: break-all;
-  margin: 0 var(--space-smaller) 0 var(--space-normal);
-  padding: var(--space-micro) var(--space-smaller);
-}
-</style>

app/javascript/dashboard/modules/contact/components/ContactFields.vue

@@ -1,115 +0,0 @@
-<script>
-import Attribute from './ContactAttribute.vue';
-
-export default {
-  components: { Attribute },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['update', 'createAttribute'],
-
-  computed: {
-    additionalAttributes() {
-      return this.contact.additional_attributes || {};
-    },
-    company() {
-      const { company = {} } = this.contact;
-      return company;
-    },
-    customAttributes() {
-      const { custom_attributes: customAttributes = {} } = this.contact;
-      return customAttributes;
-    },
-    customAttributekeys() {
-      return Object.keys(this.customAttributes).filter(key => {
-        const value = this.customAttributes[key];
-        return value !== null && value !== undefined;
-      });
-    },
-  },
-  methods: {
-    onEmailUpdate(value) {
-      this.$emit('update', { email: value });
-    },
-    onPhoneUpdate(value) {
-      this.$emit('update', { phone_number: value });
-    },
-    onLocationUpdate(value) {
-      this.$emit('update', { location: value });
-    },
-    handleCustomCreate() {
-      this.$emit('createAttribute');
-    },
-    onCustomAttributeUpdate(key, value) {
-      this.$emit('update', { custom_attributes: { [key]: value } });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="contact-fields">
-    <h3 class="text-lg title">
-      {{ $t('CONTACTS_PAGE.FIELDS') }}
-    </h3>
-    <Attribute
-      :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="mail"
-      emoji=""
-      :value="contact.email"
-      show-edit
-      @update="onEmailUpdate"
-    />
-    <Attribute
-      :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="call"
-      emoji=""
-      :value="contact.phone_number"
-      show-edit
-      @update="onPhoneUpdate"
-    />
-    <Attribute
-      v-if="additionalAttributes.location"
-      :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="map"
-      emoji="🌍"
-      :value="additionalAttributes.location"
-      show-edit
-      @update="onLocationUpdate"
-    />
-    <div
-      v-for="attribute in customAttributekeys"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <Attribute
-        :label="attribute"
-        icon="chevron-right"
-        :value="customAttributes[attribute]"
-        show-edit
-        @update="value => onCustomAttributeUpdate(attribute, value)"
-      />
-    </div>
-    <woot-button
-      size="small"
-      variant="link"
-      icon="add"
-      @click="handleCustomCreate"
-    >
-      {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
-    </woot-button>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.contact-fields {
-  margin-top: var(--space-medium);
-}
-
-.title {
-  margin-bottom: var(--space-normal);
-}
-</style>

app/javascript/dashboard/modules/contact/components/ContactPanel.vue

@@ -1,106 +0,0 @@
-<script>
-import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact.vue';
-import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation.vue';
-import AddCustomAttribute from 'dashboard/modules/contact/components/AddCustomAttribute.vue';
-import ContactIntro from './ContactIntro.vue';
-import ContactFields from './ContactFields.vue';
-
-export default {
-  components: {
-    AddCustomAttribute,
-    ContactFields,
-    ContactIntro,
-    EditContact,
-    NewConversation,
-  },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      showCustomAttributeModal: false,
-      showEditModal: false,
-      showConversationModal: false,
-    };
-  },
-  computed: {
-    enableNewConversation() {
-      return this.contact && this.contact.id;
-    },
-  },
-  methods: {
-    toggleCustomAttributeModal() {
-      this.showCustomAttributeModal = !this.showCustomAttributeModal;
-    },
-    toggleEditModal() {
-      this.showEditModal = !this.showEditModal;
-    },
-    toggleConversationModal() {
-      this.showConversationModal = !this.showConversationModal;
-    },
-    createCustomAttribute(data) {
-      const { id } = this.contact;
-      const { attributeValue, attributeName } = data;
-      const updatedFields = {
-        id,
-        custom_attributes: {
-          [attributeName]: attributeValue,
-        },
-      };
-      this.updateContact(updatedFields);
-    },
-    updateField(data) {
-      const { id } = this.contact;
-      const updatedFields = {
-        id,
-        ...data,
-      };
-      this.updateContact(updatedFields);
-    },
-    updateContact(contactItem) {
-      this.$store.dispatch('contacts/update', contactItem);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="panel">
-    <ContactIntro
-      :contact="contact"
-      @message="toggleConversationModal"
-      @edit="toggleEditModal"
-    />
-    <ContactFields
-      :contact="contact"
-      @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
-    />
-    <EditContact
-      v-if="showEditModal"
-      :show="showEditModal"
-      :contact="contact"
-      @cancel="toggleEditModal"
-    />
-    <NewConversation
-      v-if="enableNewConversation"
-      :show="showConversationModal"
-      :contact="contact"
-      @cancel="toggleConversationModal"
-    />
-    <AddCustomAttribute
-      :show="showCustomAttributeModal"
-      @cancel="toggleCustomAttributeModal"
-      @create="createCustomAttribute"
-    />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.panel {
-  padding: var(--space-normal) var(--space-normal);
-}
-</style>

app/javascript/dashboard/modules/notes/NotesOnContactPage.vue

@@ -1,50 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import NoteList from './components/NoteList.vue';
-
-export default {
-  components: {
-    NoteList,
-  },
-  props: {
-    contactId: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapGetters({ uiFlags: 'contactNotes/getUIFlags' }),
-    notes() {
-      return this.$store.getters['contactNotes/getAllNotesByContact'](
-        this.contactId
-      );
-    },
-  },
-  mounted() {
-    this.fetchContactNotes();
-  },
-  methods: {
-    fetchContactNotes() {
-      const { contactId } = this;
-      if (contactId) this.$store.dispatch('contactNotes/get', { contactId });
-    },
-    onAdd(content) {
-      const { contactId } = this;
-      this.$store.dispatch('contactNotes/create', { content, contactId });
-    },
-    onDelete(noteId) {
-      const { contactId } = this;
-      this.$store.dispatch('contactNotes/delete', { noteId, contactId });
-    },
-  },
-};
-</script>
-
-<template>
-  <NoteList
-    :is-fetching="uiFlags.isFetching"
-    :notes="notes"
-    @add="onAdd"
-    @delete="onDelete"
-  />
-</template>

app/javascript/dashboard/modules/notes/components/AddNote.vue

@@ -1,62 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-
-const emit = defineEmits(['add']);
-
-const noteContent = ref('');
-
-const buttonDisabled = computed(() => noteContent.value === '');
-
-const onAdd = () => {
-  if (noteContent.value !== '') {
-    emit('add', noteContent.value);
-  }
-  noteContent.value = '';
-};
-
-const keyboardEvents = {
-  '$mod+Enter': {
-    action: () => onAdd(),
-    allowOnFocusedInput: true,
-  },
-};
-useKeyboardEvents(keyboardEvents);
-</script>
-
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100"
-  >
-    <WootMessageEditor
-      v-model="noteContent"
-      class="input--note"
-      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
-      :enable-suggestions="false"
-    />
-    <div class="flex justify-end w-full">
-      <woot-button
-        color-scheme="warning"
-        :title="$t('NOTES.ADD.TITLE')"
-        :is-disabled="buttonDisabled"
-        @click="onAdd"
-      >
-        {{ $t('NOTES.ADD.BUTTON') }} {{ '(⌘⏎)' }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.input--note {
-  &::v-deep .ProseMirror-menubar {
-    padding: 0;
-    margin-top: var(--space-minus-small);
-  }
-
-  &::v-deep .ProseMirror-woot-style {
-    max-height: 22.5rem;
-  }
-}
-</style>

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -1,139 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    note: {
-      type: String,
-      default: '',
-    },
-    user: {
-      type: Object,
-      default: () => {},
-    },
-    createdAt: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ['delete'],
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
-  data() {
-    return {
-      showDeleteModal: false,
-    };
-  },
-  computed: {
-    readableTime() {
-      return dynamicTime(this.createdAt);
-    },
-    noteAuthor() {
-      return this.user || {};
-    },
-    noteAuthorName() {
-      return this.noteAuthor.name || this.$t('APP_GLOBAL.DELETED_USER');
-    },
-  },
-
-  methods: {
-    toggleDeleteModal() {
-      this.showDeleteModal = !this.showDeleteModal;
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-    confirmDeletion() {
-      this.onDelete();
-      this.closeDelete();
-    },
-    closeDelete() {
-      this.showDeleteModal = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
-  >
-    <div class="flex items-end justify-between gap-1 text-xs">
-      <div class="flex items-center">
-        <Thumbnail
-          :title="noteAuthorName"
-          :src="noteAuthor.thumbnail"
-          :username="noteAuthorName"
-          size="20px"
-        />
-        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
-          <span class="font-medium text-slate-800 dark:text-slate-100">
-            {{ noteAuthorName }}
-          </span>
-          <span class="text-slate-700 dark:text-slate-100">
-            {{ $t('NOTES.LIST.LABEL') }}
-          </span>
-          <span class="font-medium text-slate-700 dark:text-slate-100">
-            {{ readableTime }}
-          </span>
-        </div>
-      </div>
-      <div class="flex invisible actions">
-        <woot-button
-          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
-          variant="smooth"
-          size="tiny"
-          icon="delete"
-          color-scheme="secondary"
-          @click="toggleDeleteModal"
-        />
-      </div>
-      <woot-delete-modal
-        v-if="showDeleteModal"
-        v-model:show="showDeleteModal"
-        :on-close="closeDelete"
-        :on-confirm="confirmDeletion"
-        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
-        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
-        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
-        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
-      />
-    </div>
-    <p
-      v-dompurify-html="formatMessage(note || '')"
-      class="mt-4 note__content"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-// For RTL direction view
-.app-rtl--wrapper {
-  .note__content {
-    ::v-deep {
-      p {
-        unicode-bidi: plaintext;
-      }
-    }
-  }
-}
-
-.note-wrap:hover {
-  .actions {
-    @apply visible;
-  }
-}
-</style>

app/javascript/dashboard/modules/notes/components/NoteList.vue

@@ -1,61 +0,0 @@
-<script>
-import AddNote from './AddNote.vue';
-import ContactNote from './ContactNote.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    AddNote,
-    ContactNote,
-    Spinner,
-  },
-
-  props: {
-    notes: {
-      type: Array,
-      default: () => [],
-    },
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['add', 'edit', 'delete'],
-
-  methods: {
-    onAddNote(value) {
-      this.$emit('add', value);
-    },
-    onEditNote(value) {
-      this.$emit('edit', value);
-    },
-    onDeleteNote(value) {
-      this.$emit('delete', value);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <AddNote @add="onAddNote" />
-    <ContactNote
-      v-for="note in notes"
-      :id="note.id"
-      :key="note.id"
-      :note="note.content"
-      :user="note.user"
-      :created-at="note.created_at"
-      @edit="onEditNote"
-      @delete="onDeleteNote"
-    />
-
-    <div v-if="isFetching" class="text-center p-4 text-base">
-      <Spinner size="" />
-      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
-    </div>
-    <div v-else-if="!notes.length" class="text-center p-4 text-base">
-      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue

@@ -1,140 +0,0 @@
-<script>
-export default {
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['add'],
-  data() {
-    return {
-      content: '',
-      date: '',
-      label: '',
-    };
-  },
-  computed: {
-    buttonDisabled() {
-      return this.content && this.date === '';
-    },
-  },
-  methods: {
-    resetValue() {
-      this.content = '';
-      this.date = '';
-    },
-
-    optionSelected(event) {
-      this.label = event.target.value;
-    },
-
-    onAdd() {
-      const task = {
-        content: this.content,
-        date: this.date,
-        label: this.label,
-      };
-      this.$emit('add', task);
-      this.resetValue();
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="wrap">
-    <div class="input-select-wrap">
-      <textarea
-        v-model="content"
-        class="input--reminder"
-        @keydown.enter.shift.exact="onAdd"
-      />
-      <div class="select-wrap">
-        <div class="select">
-          <div class="input-group">
-            <i class="ion-android-calendar input-group-label" />
-            <input
-              v-model="date"
-              type="text"
-              :placeholder="$t('REMINDER.FOOTER.DUE_DATE')"
-              class="input-group-field"
-            />
-          </div>
-          <div class="task-wrap">
-            <select class="task__type" @change="optionSelected($event)">
-              <option value="" disabled selected>
-                {{ $t('REMINDER.FOOTER.LABEL_TITLE') }}
-              </option>
-              <option
-                v-for="option in options"
-                :key="option.id"
-                :value="option.id"
-              >
-                {{ option.name }}
-              </option>
-            </select>
-          </div>
-        </div>
-        <woot-button
-          size="tiny"
-          color-scheme="primary"
-          class-names="add-button"
-          :title="$t('REMINDER.ADD_BUTTON.TITLE')"
-          :is-disabled="buttonDisabled"
-          @click="onAdd"
-        >
-          {{ $t('REMINDER.ADD_BUTTON.BUTTON') }}
-        </woot-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.wrap {
-  display: flex;
-  margin-bottom: var(--space-smaller);
-  width: 100%;
-
-  .input-select-wrap {
-    padding: var(--space-small) var(--space-small);
-    width: 100%;
-
-    .input--reminder {
-      font-size: var(--font-size-mini);
-      margin-bottom: var(--space-small);
-      resize: none;
-    }
-
-    .select-wrap {
-      display: flex;
-      justify-content: space-between;
-
-      .select {
-        display: flex;
-      }
-    }
-
-    .input-group {
-      margin-bottom: 0;
-      font-size: var(--font-size-mini);
-
-      .input-group-field {
-        height: var(--space-medium);
-        font-size: var(--font-size-micro);
-      }
-    }
-
-    .task-wrap {
-      .task__type {
-        margin: 0 0 0 var(--space-smaller);
-        height: var(--space-medium);
-        width: fit-content;
-        padding: 0 var(--space-two) 0 var(--space-smaller);
-        font-size: var(--font-size-micro);
-      }
-    }
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -1,175 +0,0 @@
-<script>
-import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
-import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
-import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
-import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
-import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
-import Draggable from 'vuedraggable';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-export default {
-  components: {
-    AccordionItem,
-    ContactConversations,
-    ContactInfo,
-    ContactLabel,
-    CustomAttributes,
-    Draggable,
-  },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    showAvatar: {
-      type: Boolean,
-      default: true,
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup() {
-    const {
-      updateUISettings,
-      isContactSidebarItemOpen,
-      contactSidebarItemsOrder,
-      toggleSidebarUIState,
-    } = useUISettings();
-
-    return {
-      updateUISettings,
-      isContactSidebarItemOpen,
-      contactSidebarItemsOrder,
-      toggleSidebarUIState,
-    };
-  },
-  data() {
-    return {
-      dragEnabled: true,
-      contactSidebarItems: [],
-      dragging: false,
-    };
-  },
-  computed: {
-    hasContactAttributes() {
-      const { custom_attributes: customAttributes } = this.contact;
-      return customAttributes && Object.keys(customAttributes).length;
-    },
-  },
-  mounted() {
-    this.contactSidebarItems = this.contactSidebarItemsOrder;
-  },
-  methods: {
-    onDragEnd() {
-      this.dragging = false;
-      this.updateUISettings({
-        contact_sidebar_items_order: this.contactSidebarItems,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="relative w-1/4 h-full min-h-screen overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
-    :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
-  >
-    <ContactInfo
-      :show-close-button="showCloseButton"
-      :show-avatar="showAvatar"
-      :contact="contact"
-      close-icon-name="dismiss"
-      @panel-close="onClose"
-      @toggle-panel="onClose"
-    />
-    <div class="list-group">
-      <Draggable
-        :list="contactSidebarItems"
-        :disabled="!dragEnabled"
-        ghost-class="ghost"
-        item-key="name"
-        @start="dragging = true"
-        @end="onDragEnd"
-      >
-        <template #item="{ element }">
-          <div :key="element.name" class="list-group-item">
-            <div v-if="element.name === 'contact_attributes'">
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-                :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_custom_attr_open', value)
-                "
-              >
-                <CustomAttributes
-                  :contact-id="contact.id"
-                  attribute-type="contact_attribute"
-                  attribute-from="contact_panel"
-                  :custom-attributes="contact.custom_attributes"
-                  :empty-state-message="
-                    $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
-                  "
-                />
-              </AccordionItem>
-            </div>
-            <div v-if="element.name === 'contact_labels'">
-              <AccordionItem
-                :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
-                :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_labels_open', value)
-                "
-              >
-                <ContactLabel :contact-id="contact.id" class="contact-labels" />
-              </AccordionItem>
-            </div>
-            <div v-if="element.name === 'previous_conversation'">
-              <AccordionItem
-                :title="
-                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
-                "
-                :is-open="isContactSidebarItemOpen('is_ct_prev_conv_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_prev_conv_open', value)
-                "
-              >
-                <ContactConversations
-                  v-if="contact.id"
-                  :contact-id="contact.id"
-                  conversation-id=""
-                />
-              </AccordionItem>
-            </div>
-          </div>
-        </template>
-      </Draggable>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .contact--profile {
-    @apply pb-3 mb-4;
-  }
-}
-
-.list-group {
-  .list-group-item {
-    @apply bg-white dark:bg-slate-900;
-  }
-}
-
-.conversation--details {
-  @apply py-0 px-4;
-}
-</style>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue

@@ -1,85 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import LabelSelector from 'dashboard/components/widgets/LabelSelector.vue';
-
-export default {
-  components: { LabelSelector },
-  props: {
-    contactId: {
-      type: [String, Number],
-      required: true,
-    },
-  },
-
-  computed: {
-    savedLabels() {
-      const availableContactLabels = this.$store.getters[
-        'contactLabels/getContactLabels'
-      ](this.contactId);
-      return this.allLabels.filter(({ title }) =>
-        availableContactLabels.includes(title)
-      );
-    },
-
-    ...mapGetters({
-      allLabels: 'labels/getLabels',
-    }),
-  },
-
-  watch: {
-    contactId(newContactId, prevContactId) {
-      if (newContactId && newContactId !== prevContactId) {
-        this.fetchLabels(newContactId);
-      }
-    },
-  },
-
-  mounted() {
-    const { contactId } = this;
-    this.fetchLabels(contactId);
-  },
-
-  methods: {
-    async onUpdateLabels(selectedLabels) {
-      try {
-        await this.$store.dispatch('contactLabels/update', {
-          contactId: this.contactId,
-          labels: selectedLabels,
-        });
-      } catch (error) {
-        useAlert(this.$t('CONTACT_PANEL.LABELS.CONTACT.ERROR'));
-      }
-    },
-
-    addItem(value) {
-      const result = this.savedLabels.map(item => item.title);
-      result.push(value.title);
-      this.onUpdateLabels(result);
-    },
-
-    removeItem(value) {
-      const result = this.savedLabels
-        .map(label => label.title)
-        .filter(label => label !== value);
-      this.onUpdateLabels(result);
-    },
-
-    async fetchLabels(contactId) {
-      if (!contactId) {
-        return;
-      }
-      this.$store.dispatch('contactLabels/get', contactId);
-    },
-  },
-};
-</script>
-
-<template>
-  <LabelSelector
-    :all-labels="allLabels"
-    :saved-labels="savedLabels"
-    @add="addItem"
-    @remove="removeItem"
-  />
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -1,368 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
-import countries from 'shared/constants/countries.js';
-import { mapGetters } from 'vuex';
-import { filterAttributeGroups } from '../contactFilterItems';
-import { useFilter } from 'shared/composables/useFilter';
-import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
-import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    FilterInputBox,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    initialFilterTypes: {
-      type: Array,
-      default: () => [],
-    },
-    initialAppliedFilters: {
-      type: Array,
-      default: () => [],
-    },
-    isSegmentsView: {
-      type: Boolean,
-      default: false,
-    },
-    activeSegmentName: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['applyFilter', 'clearFilters', 'updateSegment'],
-  setup() {
-    const { setFilterAttributes } = useFilter({
-      filteri18nKey: 'CONTACTS_FILTER',
-      attributeModel: 'contact_attribute',
-    });
-    return {
-      setFilterAttributes,
-    };
-  },
-  data() {
-    return {
-      show: true,
-      appliedFilters: this.initialAppliedFilters,
-      activeSegmentNewName: this.activeSegmentName,
-      filterTypes: this.initialFilterTypes,
-      filterGroups: [],
-      allCustomAttributes: [],
-      filterAttributeGroups,
-      attributeModel: 'contact_attribute',
-      filtersFori18n: 'CONTACTS_FILTER',
-      validationErrors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    filterModalHeaderTitle() {
-      return !this.isSegmentsView
-        ? this.$t('CONTACTS_FILTER.TITLE')
-        : this.$t('CONTACTS_FILTER.EDIT_CUSTOM_SEGMENT');
-    },
-    filterModalSubTitle() {
-      return !this.isSegmentsView
-        ? this.$t('CONTACTS_FILTER.SUBTITLE')
-        : this.$t('CONTACTS_FILTER.CUSTOM_VIEWS_SUBTITLE');
-    },
-  },
-  mounted() {
-    const { filterGroups, filterTypes } = this.setFilterAttributes();
-    this.filterTypes = [...this.filterTypes, ...filterTypes];
-    this.filterGroups = filterGroups;
-
-    if (this.getAppliedContactFilters.length && !this.isSegmentsView) {
-      this.appliedFilters = [...this.getAppliedContactFilters];
-    } else if (!this.isSegmentsView) {
-      this.appliedFilters.push({
-        attribute_key: 'name',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        attribute_model: 'standard',
-      });
-    }
-  },
-  methods: {
-    getOperatorTypes(key) {
-      switch (key) {
-        case 'list':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'text':
-          return OPERATORS.OPERATOR_TYPES_3;
-        case 'number':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'link':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'date':
-          return OPERATORS.OPERATOR_TYPES_4;
-        case 'checkbox':
-          return OPERATORS.OPERATOR_TYPES_1;
-        default:
-          return OPERATORS.OPERATOR_TYPES_1;
-      }
-    },
-    customAttributeInputType(key) {
-      switch (key) {
-        case 'date':
-          return 'date';
-        case 'text':
-          return 'plain_text';
-        case 'list':
-          return 'search_select';
-        case 'checkbox':
-          return 'search_select';
-        default:
-          return 'plain_text';
-      }
-    },
-    getAttributeModel(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.attributeModel;
-    },
-    getInputType(key, operator) {
-      if (key === 'created_at' || key === 'last_activity_at')
-        if (operator === 'days_before') return 'plain_text';
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.inputType;
-    },
-    getOperators(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.filterOperators;
-    },
-    getDropdownValues(type) {
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ](this.attributeModel);
-      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type &&
-          attr.attribute_display_type === 'checkbox'
-        );
-      });
-      if (isCustomAttributeCheckbox || type === 'blocked') {
-        return [
-          {
-            id: true,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-          },
-          {
-            id: false,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-          },
-        ];
-      }
-
-      const isCustomAttributeList = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type && attr.attribute_display_type === 'list'
-        );
-      });
-
-      if (isCustomAttributeList) {
-        return allCustomAttributes
-          .find(attr => attr.attribute_key === type)
-          .attribute_values.map(item => {
-            return {
-              id: item,
-              name: item,
-            };
-          });
-      }
-      switch (type) {
-        case 'country_code':
-          return countries;
-        default:
-          return undefined;
-      }
-    },
-    appendNewFilter() {
-      if (this.isSegmentsView) {
-        this.setQueryOperatorOnLastQuery();
-      } else {
-        this.appliedFilters.push({
-          attribute_key: 'name',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      }
-    },
-    setQueryOperatorOnLastQuery() {
-      const lastItemIndex = this.appliedFilters.length - 1;
-      this.appliedFilters[lastItemIndex] = {
-        ...this.appliedFilters[lastItemIndex],
-        query_operator: 'and',
-      };
-      this.$nextTick(() => {
-        this.appliedFilters.push({
-          attribute_key: 'name',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      });
-    },
-    removeFilter(index) {
-      if (this.appliedFilters.length <= 1) {
-        useAlert(this.$t('CONTACTS_FILTER.FILTER_DELETE_ERROR'));
-      } else {
-        this.appliedFilters.splice(index, 1);
-      }
-    },
-    submitFilterQuery() {
-      this.validationErrors = validateConversationOrContactFilters(
-        this.appliedFilters
-      );
-      if (Object.keys(this.validationErrors).length === 0) {
-        this.$store.dispatch(
-          'contacts/setContactFilters',
-          JSON.parse(JSON.stringify(this.appliedFilters))
-        );
-        this.$emit('applyFilter', this.appliedFilters);
-        useTrack(CONTACTS_EVENTS.APPLY_FILTER, {
-          applied_filters: this.appliedFilters.map(filter => ({
-            key: filter.attribute_key,
-            operator: filter.filter_operator,
-            query_operator: filter.query_operator,
-          })),
-        });
-      }
-    },
-    updateSegment() {
-      this.$emit(
-        'updateSegment',
-        this.appliedFilters,
-        this.activeSegmentNewName
-      );
-    },
-    resetFilter(index, currentFilter) {
-      this.appliedFilters[index].filter_operator = this.filterTypes.find(
-        filter => filter.attributeKey === currentFilter.attribute_key
-      ).filterOperators[0].value;
-      this.appliedFilters[index].values = '';
-    },
-    showUserInput(operatorType) {
-      if (operatorType === 'is_present' || operatorType === 'is_not_present')
-        return false;
-      return true;
-    },
-    clearFilters() {
-      this.$emit('clearFilters');
-      this.onClose();
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isSegmentsView">
-        <label class="input-label" :class="{ error: !activeSegmentNewName }">
-          {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
-          <input
-            v-model="activeSegmentNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeSegmentNewName" class="message">
-            {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="input-label">
-          {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
-        </label>
-      </div>
-      <div
-        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
-      >
-        <FilterInputBox
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          grouped-filters
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :error-message="
-            validationErrors[`filter_${i}`]
-              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
-              : ''
-          "
-          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @remove-filter="removeFilter(i)"
-        />
-        <div class="flex items-center gap-2 mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-          <woot-button
-            v-if="hasAppliedFilters && !isSegmentsView"
-            icon="subtract"
-            color-scheme="alert"
-            variant="smooth"
-            size="small"
-            @click="clearFilters"
-          >
-            {{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isSegmentsView"
-            :disabled="!activeSegmentNewName"
-            @click="updateSegment"
-          >
-            {{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.folder-input {
-  @apply w-[50%];
-}
-</style>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue

@@ -1,190 +0,0 @@
-<script setup>
-import { h, ref, computed, defineEmits } from 'vue';
-import {
-  useVueTable,
-  createColumnHelper,
-  getCoreRowModel,
-} from '@tanstack/vue-table';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import { useI18n } from 'vue-i18n';
-
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-
-// Table components
-import Table from 'dashboard/components/table/Table.vue';
-import NameCell from './ContactsTable/NameCell.vue';
-import EmailCell from './ContactsTable/EmailCell.vue';
-import TelCell from './ContactsTable/TelCell.vue';
-import CountryCell from './ContactsTable/CountryCell.vue';
-import ProfilesCell from './ContactsTable/ProfilesCell.vue';
-
-const props = defineProps({
-  contacts: {
-    type: Array,
-    default: () => [],
-  },
-  showSearchEmptyState: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['onSortChange']);
-const { t } = useI18n();
-
-const tableData = computed(() => {
-  if (props.isLoading) {
-    return [];
-  }
-
-  return props.contacts.map(item => {
-    // Note: The attributes used here is in snake case
-    // as it simplier the sort attribute calculation
-    const additional = item.additional_attributes || {};
-    const { last_activity_at: lastActivityAt } = item;
-    const { created_at: createdAt } = item;
-    return {
-      ...item,
-      profiles: additional.social_profiles || {},
-      last_activity_at: lastActivityAt ? dynamicTime(lastActivityAt) : null,
-      created_at: createdAt ? dynamicTime(createdAt) : null,
-    };
-  });
-});
-
-const defaulSpanRender = cellProps =>
-  h(
-    'span',
-    {
-      class: cellProps.getValue() ? '' : 'text-slate-300 dark:text-slate-700',
-    },
-    cellProps.getValue() ? cellProps.getValue() : '---'
-  );
-
-const columnHelper = createColumnHelper();
-const columns = [
-  columnHelper.accessor('name', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
-    cell: cellProps => h(NameCell, cellProps),
-    size: 250,
-  }),
-  columnHelper.accessor('email', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
-    cell: cellProps => h(EmailCell, { email: cellProps.getValue() }),
-    size: 250,
-  }),
-  columnHelper.accessor('phone_number', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
-    size: 200,
-    cell: cellProps =>
-      h(TelCell, {
-        phoneNumber: cellProps.getValue(),
-        defaultCountry: cellProps.row.original.country_code,
-      }),
-  }),
-  columnHelper.accessor('company_name', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('city', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
-    cell: defaulSpanRender,
-    size: 200,
-  }),
-  columnHelper.accessor('country', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
-    size: 200,
-    cell: cellProps =>
-      h(CountryCell, {
-        countryCode: cellProps.row.original.country_code,
-        country: cellProps.getValue(),
-      }),
-  }),
-  columnHelper.accessor('profiles', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
-    size: 200,
-    enableSorting: false,
-    cell: cellProps =>
-      h(ProfilesCell, {
-        profiles: cellProps.getValue(),
-      }),
-  }),
-  columnHelper.accessor('last_activity_at', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('created_at', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-];
-
-// type ColumnSort = {
-//   id: string
-//   desc: boolean
-// }
-// type SortingState = ColumnSort[]
-const sortingState = ref([{ last_activity_at: 'desc' }]);
-
-const table = useVueTable({
-  get data() {
-    return tableData.value;
-  },
-  columns,
-  enableMultiSort: false,
-  getCoreRowModel: getCoreRowModel(),
-  state: {
-    get sorting() {
-      return sortingState.value;
-    },
-  },
-  onSortingChange: updater => {
-    // onSortingChange returns a callback that allows us to trigger the sort when we need
-    // See more docs here: https://tanstack.com/table/latest/docs/api/features/sorting#onsortingchange
-    // IMO, I don't like this API, but it's what we have for now. Would be great if we could just listen the the changes
-    // to the sorting state and emit the event when it changes
-    // But we can easily wrap this later as a separate composable
-    const updatedSortState = updater(sortingState.value);
-    // we pick the first item from the array, as we are not using multi-sorting
-    const [sort] = updatedSortState;
-
-    if (sort) {
-      sortingState.value = updatedSortState;
-      emit('onSortChange', { [sort.id]: sort.desc ? 'desc' : 'asc' });
-    } else {
-      // If the sorting is empty, we reset to the default sorting
-      sortingState.value = [{ last_activity_at: 'desc' }];
-      emit('onSortChange', {});
-    }
-  },
-});
-</script>
-
-<template>
-  <section class="flex-1 h-full overflow-auto bg-white dark:bg-slate-900">
-    <section class="overflow-x-auto">
-      <Table fixed :table="table" type="compact" />
-    </section>
-
-    <EmptyState
-      v-if="showSearchEmptyState"
-      :title="$t('CONTACTS_PAGE.LIST.404')"
-    />
-    <EmptyState
-      v-else-if="!isLoading && !contacts.length"
-      :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
-    />
-    <div v-if="isLoading" class="flex items-center justify-center text-base">
-      <Spinner />
-      <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-  </section>
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/CountryCell.vue

@@ -1,36 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import { getCountryFlag } from 'dashboard/helper/flag';
-
-const props = defineProps({
-  countryCode: {
-    type: String,
-    default: '',
-  },
-  country: {
-    type: String,
-    default: '',
-  },
-});
-
-const countryFlag = computed(() => {
-  if (!props.countryCode) {
-    return '';
-  }
-
-  return getCountryFlag(props.countryCode);
-});
-
-const formattedCountryName = computed(() => {
-  if (!props.country) {
-    return '';
-  }
-
-  return `${countryFlag.value} ${props.country}`;
-});
-</script>
-
-<template>
-  <BaseCell :content="formattedCountryName" />
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/EmailCell.vue

@@ -1,22 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-defineProps({
-  email: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <BaseCell>
-    <a
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      class="text-woot-500 dark:text-woot-500"
-      :href="`mailto:${email}`"
-    >
-      {{ email }}
-    </a>
-  </BaseCell>
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/NameCell.vue

@@ -1,52 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { inject } from 'vue';
-
-defineProps({
-  row: {
-    type: Object,
-    required: true,
-  },
-});
-
-const route = useRoute();
-const openContactInfoPanel = inject('openContactInfoPanel');
-const isRTL = useMapGetter('accounts/isRTL');
-</script>
-
-<template>
-  <BaseCell>
-    <woot-button
-      variant="clear"
-      class="!px-0"
-      @click="() => openContactInfoPanel(row.original.id)"
-    >
-      <div class="items-center flex" :class="{ 'flex-row-reverse': isRTL }">
-        <Thumbnail
-          size="32px"
-          :src="row.original.thumbnail"
-          :username="row.original.name"
-          :status="row.original.availability_status"
-        />
-        <div class="items-start flex flex-col my-0 mx-2">
-          <h6 class="overflow-hidden text-base whitespace-nowrap text-ellipsis">
-            <router-link
-              :to="`/app/accounts/${route.params.accountId}/contacts/${row.original.id}`"
-              class="text-sm font-medium m-0 capitalize"
-            >
-              {{ row.original.name }}
-            </router-link>
-          </h6>
-          <button
-            class="button clear small link text-slate-600 dark:text-slate-200"
-          >
-            {{ $t('CONTACTS_PAGE.LIST.VIEW_DETAILS') }}
-          </button>
-        </div>
-      </div>
-    </woot-button>
-  </BaseCell>
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/ProfilesCell.vue

@@ -1,33 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
-const props = defineProps({
-  profiles: {
-    type: Object,
-    required: true,
-  },
-});
-
-const filteredProfiles = computed(() =>
-  Object.keys(props.profiles).filter(profile => props.profiles[profile])
-);
-</script>
-
-<template>
-  <BaseCell class="flex gap-2 items-center text-slate-300 dark:text-slate-400">
-    <template v-if="filteredProfiles.length">
-      <a
-        v-for="profile in filteredProfiles"
-        :key="profile"
-        :href="`https://${profile}.com/${profiles[profile]}`"
-        target="_blank"
-        class="hover:text-slate-500"
-        rel="noopener noreferrer nofollow"
-      >
-        <FluentIcon class="size-4" :icon="`brand-${profile}`" />
-      </a>
-    </template>
-  </BaseCell>
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/TelCell.vue

@@ -1,40 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import { parsePhoneNumber } from 'libphonenumber-js';
-
-const props = defineProps({
-  phoneNumber: {
-    type: String,
-    default: '',
-  },
-  defaultCountry: {
-    type: String,
-    default: '',
-  },
-});
-
-const formattedNumber = computed(() => {
-  if (!props.phoneNumber) {
-    return '';
-  }
-
-  try {
-    const parsedNumber = parsePhoneNumber(
-      props.phoneNumber,
-      props.defaultCountry
-    );
-
-    if (parsedNumber) {
-      return parsedNumber.formatInternational();
-    }
-    return props.phoneNumber;
-  } catch (error) {
-    return props.phoneNumber;
-  }
-});
-</script>
-
-<template>
-  <BaseCell :content="formattedNumber" />
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -1,475 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-
-import ContactsHeader from './Header.vue';
-import ContactsTable from './ContactsTable.vue';
-import ContactInfoPanel from './ContactInfoPanel.vue';
-import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact.vue';
-import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
-import ImportContacts from './ImportContacts.vue';
-import ContactsAdvancedFilters from './ContactsAdvancedFilters.vue';
-import contactFilterItems from '../contactFilterItems';
-import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
-import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
-import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
-import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import countries from 'shared/constants/countries.js';
-import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
-import { useTrack } from 'dashboard/composables';
-
-const DEFAULT_PAGE = 1;
-const FILTER_TYPE_CONTACT = 1;
-
-export default {
-  components: {
-    ContactsHeader,
-    ContactsTable,
-    TableFooter,
-    ContactInfoPanel,
-    CreateContact,
-    ImportContacts,
-    ContactsAdvancedFilters,
-    AddCustomViews,
-    DeleteCustomViews,
-  },
-  provide() {
-    return {
-      openContactInfoPanel: this.openContactInfoPanel,
-    };
-  },
-  props: {
-    label: { type: String, default: '' },
-    segmentsId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      searchQuery: '',
-      showCreateModal: false,
-      showImportModal: false,
-      selectedContactId: '',
-      sortConfig: { last_activity_at: 'desc' },
-      showFiltersModal: false,
-      contactFilterItems: contactFilterItems.map(filter => ({
-        ...filter,
-        attributeName: this.$t(
-          `CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}`
-        ),
-      })),
-      segmentsQuery: {},
-      filterType: FILTER_TYPE_CONTACT,
-      showAddSegmentsModal: false,
-      showDeleteSegmentsModal: false,
-      appliedFilter: [],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'contacts/getContacts',
-      uiFlags: 'contacts/getUIFlags',
-      meta: 'contacts/getMeta',
-      segments: 'customViews/getContactCustomViews',
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    showEmptySearchResult() {
-      const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
-      return hasEmptyResults;
-    },
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    hasActiveSegments() {
-      return this.activeSegment && this.segmentsId !== 0;
-    },
-    isContactAndLabelDashboard() {
-      return (
-        this.$route.name === 'contacts_dashboard' ||
-        this.$route.name === 'contacts_labels_dashboard'
-      );
-    },
-    pageTitle() {
-      if (this.hasActiveSegments) {
-        return this.activeSegment.name;
-      }
-      if (this.label) {
-        return `#${this.label}`;
-      }
-      return this.$t('CONTACTS_PAGE.HEADER');
-    },
-    selectedContact() {
-      if (this.selectedContactId) {
-        const contact = this.records.find(
-          item => this.selectedContactId === item.id
-        );
-        return contact;
-      }
-      return undefined;
-    },
-    showContactViewPane() {
-      return this.selectedContactId !== '';
-    },
-    wrapClass() {
-      return this.showContactViewPane ? 'w-[75%]' : 'w-full';
-    },
-    pageParameter() {
-      const selectedPageNumber = Number(this.$route.query?.page);
-      return !Number.isNaN(selectedPageNumber) &&
-        selectedPageNumber >= DEFAULT_PAGE
-        ? selectedPageNumber
-        : DEFAULT_PAGE;
-    },
-    activeSegment() {
-      if (this.segmentsId) {
-        const [firstValue] = this.segments.filter(
-          view => view.id === Number(this.segmentsId)
-        );
-        return firstValue;
-      }
-      return undefined;
-    },
-    activeSegmentName() {
-      return this.activeSegment?.name;
-    },
-  },
-  watch: {
-    label() {
-      this.fetchContacts(DEFAULT_PAGE);
-      if (this.hasAppliedFilters) {
-        this.clearFilters();
-      }
-    },
-    activeSegment() {
-      if (this.hasActiveSegments) {
-        const payload = this.activeSegment.query;
-        this.fetchSavedFilteredContact(payload, DEFAULT_PAGE);
-      }
-      if (this.hasAppliedFilters && this.$route.name === 'contacts_dashboard') {
-        this.fetchFilteredContacts(DEFAULT_PAGE);
-      } else {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-  },
-  mounted() {
-    this.fetchContacts(this.pageParameter);
-  },
-  methods: {
-    updatePageParam(page) {
-      window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
-    },
-    getSortAttribute() {
-      let sortAttr = Object.keys(this.sortConfig).reduce((acc, sortKey) => {
-        const sortOrder = this.sortConfig[sortKey];
-        if (sortOrder) {
-          const sortOrderSign = sortOrder === 'asc' ? '' : '-';
-          return `${sortOrderSign}${sortKey}`;
-        }
-        return acc;
-      }, '');
-      if (!sortAttr) {
-        this.sortConfig = { last_activity_at: 'desc' };
-        sortAttr = '-last_activity_at';
-      }
-      return sortAttr;
-    },
-    fetchContacts(page) {
-      if (this.isContactAndLabelDashboard) {
-        this.updatePageParam(page);
-        let value = '';
-        if (this.searchQuery.charAt(0) === '+') {
-          value = this.searchQuery.substring(1);
-        } else {
-          value = this.searchQuery;
-        }
-        const requestParams = {
-          page,
-          sortAttr: this.getSortAttribute(),
-          label: this.label,
-        };
-        if (!value) {
-          this.$store.dispatch('contacts/get', requestParams);
-        } else {
-          this.$store.dispatch('contacts/search', {
-            search: encodeURIComponent(value),
-            ...requestParams,
-          });
-        }
-      }
-    },
-    fetchSavedFilteredContact(payload, page) {
-      if (this.hasActiveSegments) {
-        this.updatePageParam(page);
-        this.$store.dispatch('contacts/filter', {
-          queryPayload: payload,
-          page,
-        });
-      }
-    },
-    fetchFilteredContacts(page) {
-      if (this.hasAppliedFilters) {
-        const payload = this.segmentsQuery;
-        this.updatePageParam(page);
-        this.$store.dispatch('contacts/filter', {
-          queryPayload: payload,
-          page,
-        });
-      }
-    },
-
-    onInputSearch(event) {
-      const newQuery = event.target.value;
-      const refetchAllContacts = !!this.searchQuery && newQuery === '';
-      this.searchQuery = newQuery;
-      if (refetchAllContacts) {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-    onSearchSubmit() {
-      this.selectedContactId = '';
-      if (this.searchQuery) {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-    onPageChange(page) {
-      this.selectedContactId = '';
-      if (this.segmentsId !== 0) {
-        const payload = this.activeSegment.query;
-        this.fetchSavedFilteredContact(payload, page);
-      }
-      if (this.hasAppliedFilters) {
-        this.fetchFilteredContacts(page);
-      } else {
-        this.fetchContacts(page);
-      }
-    },
-    openContactInfoPanel(contactId) {
-      this.selectedContactId = contactId;
-      this.showContactInfoPanelPane = true;
-    },
-    closeContactInfoPanel() {
-      this.selectedContactId = '';
-      this.showContactInfoPanelPane = false;
-    },
-    onToggleCreate() {
-      this.showCreateModal = !this.showCreateModal;
-    },
-    onToggleSaveFilters() {
-      this.showAddSegmentsModal = true;
-    },
-    onCloseAddSegmentsModal() {
-      this.showAddSegmentsModal = false;
-    },
-    onToggleDeleteFilters() {
-      this.showDeleteSegmentsModal = true;
-    },
-    onCloseDeleteSegmentsModal() {
-      this.showDeleteSegmentsModal = false;
-    },
-    onToggleImport() {
-      this.showImportModal = !this.showImportModal;
-    },
-    onSortChange(params) {
-      this.sortConfig = params;
-      this.fetchContacts(this.meta.currentPage);
-
-      const sortBy =
-        Object.entries(params).find(pair => Boolean(pair[1])) || [];
-
-      useTrack(CONTACTS_EVENTS.APPLY_SORT, {
-        appliedOn: sortBy[0],
-        order: sortBy[1],
-      });
-    },
-    onToggleFilters() {
-      if (this.hasActiveSegments) {
-        this.initializeSegmentToFilterModal(this.activeSegment);
-      }
-      this.showFiltersModal = true;
-    },
-    closeAdvanceFiltersModal() {
-      this.showFiltersModal = false;
-      this.appliedFilter = [];
-    },
-    onApplyFilter(payload) {
-      this.closeContactInfoPanel();
-      this.segmentsQuery = filterQueryGenerator(payload);
-      this.$store.dispatch('contacts/filter', {
-        queryPayload: filterQueryGenerator(payload),
-      });
-      this.showFiltersModal = false;
-    },
-    onUpdateSegment(payload, segmentName) {
-      const payloadData = {
-        ...this.activeSegment,
-        name: segmentName,
-        query: filterQueryGenerator(payload),
-      };
-      this.$store.dispatch('customViews/update', payloadData);
-      this.closeAdvanceFiltersModal();
-    },
-    clearFilters() {
-      this.$store.dispatch('contacts/clearContactFilters');
-      this.fetchContacts(this.pageParameter);
-    },
-    onExportSubmit() {
-      let query = { payload: [] };
-
-      if (this.hasActiveSegments) {
-        query = this.activeSegment.query;
-      } else if (this.hasAppliedFilters) {
-        query = filterQueryGenerator(this.getAppliedContactFilters);
-      }
-
-      try {
-        this.$store.dispatch('contacts/export', {
-          ...query,
-          label: this.label,
-        });
-        useAlert(this.$t('EXPORT_CONTACTS.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(error.message || this.$t('EXPORT_CONTACTS.ERROR_MESSAGE'));
-      }
-    },
-    setParamsForEditSegmentModal() {
-      // Here we are setting the params for edit segment modal to show the existing values.
-
-      // For custom attributes we get only attribute key.
-      // So we are mapping it to find the input type of the attribute to show in the edit segment modal.
-      const params = {
-        countries: countries,
-        filterTypes: contactFilterItems,
-        allCustomAttributes:
-          this.$store.getters['attributes/getAttributesByModel'](
-            'contact_attribute'
-          ),
-      };
-      return params;
-    },
-    initializeSegmentToFilterModal(activeSegment) {
-      // Here we are setting the params for edit segment modal.
-      //  To show the existing values. when we click on edit segment button.
-
-      // Here we get the query from the active segment.
-      // And we are mapping the query to the actual values.
-      // To show in the edit segment modal by the help of generateValuesForEditCustomViews helper.
-      const query = activeSegment?.query?.payload;
-      if (!Array.isArray(query)) return;
-
-      this.appliedFilter.push(
-        ...query.map(filter => ({
-          attribute_key: filter.attribute_key,
-          attribute_model: filter.attribute_model,
-          filter_operator: filter.filter_operator,
-          values: Array.isArray(filter.values)
-            ? generateValuesForEditCustomViews(
-                filter,
-                this.setParamsForEditSegmentModal()
-              )
-            : [],
-          query_operator: filter.query_operator,
-          custom_attribute_type: filter.custom_attribute_type,
-        }))
-      );
-    },
-    openSavedItemInSegment() {
-      const lastItemInSegments = this.segments[this.segments.length - 1];
-      const lastItemId = lastItemInSegments.id;
-      this.$router.push({
-        name: 'contacts_segments_dashboard',
-        params: { id: lastItemId },
-      });
-    },
-    openLastItemAfterDeleteInSegment() {
-      if (this.segments.length > 0) {
-        this.openSavedItemInSegment();
-      } else {
-        this.$router.push({ name: 'contacts_dashboard' });
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-row w-full">
-    <div class="flex flex-col h-full" :class="wrapClass">
-      <ContactsHeader
-        :search-query="searchQuery"
-        :header-title="pageTitle"
-        :segments-id="segmentsId"
-        this-selected-contact-id=""
-        @on-input-search="onInputSearch"
-        @on-toggle-create="onToggleCreate"
-        @on-toggle-filter="onToggleFilters"
-        @on-search-submit="onSearchSubmit"
-        @on-toggle-import="onToggleImport"
-        @on-export-submit="onExportSubmit"
-        @on-toggle-save-filter="onToggleSaveFilters"
-        @on-toggle-delete-filter="onToggleDeleteFilters"
-        @on-toggle-edit-filter="onToggleFilters"
-      />
-      <ContactsTable
-        :contacts="records"
-        :show-search-empty-state="showEmptySearchResult"
-        :is-loading="uiFlags.isFetching"
-        :active-contact-id="selectedContactId"
-        @on-sort-change="onSortChange"
-      />
-      <TableFooter
-        class="border-t border-slate-75 dark:border-slate-700/50"
-        :current-page="Number(meta.currentPage)"
-        :total-count="meta.count"
-        :page-size="15"
-        @page-change="onPageChange"
-      />
-    </div>
-
-    <AddCustomViews
-      v-if="showAddSegmentsModal"
-      :custom-views-query="segmentsQuery"
-      :filter-type="filterType"
-      :open-last-saved-item="openSavedItemInSegment"
-      @close="onCloseAddSegmentsModal"
-    />
-    <DeleteCustomViews
-      v-if="showDeleteSegmentsModal"
-      v-model:show="showDeleteSegmentsModal"
-      :active-custom-view="activeSegment"
-      :custom-views-id="segmentsId"
-      :active-filter-type="filterType"
-      :open-last-item-after-delete="openLastItemAfterDeleteInSegment"
-      @close="onCloseDeleteSegmentsModal"
-    />
-
-    <ContactInfoPanel
-      v-if="showContactViewPane"
-      :contact="selectedContact"
-      :on-close="closeContactInfoPanel"
-    />
-    <CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
-    <woot-modal v-model:show="showImportModal" :on-close="onToggleImport">
-      <ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
-    </woot-modal>
-    <woot-modal
-      v-model:show="showFiltersModal"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <ContactsAdvancedFilters
-        v-if="showFiltersModal"
-        :on-close="closeAdvanceFiltersModal"
-        :initial-filter-types="contactFilterItems"
-        :initial-applied-filters="appliedFilter"
-        :active-segment-name="activeSegmentName"
-        :is-segments-view="hasActiveSegments"
-        @apply-filter="onApplyFilter"
-        @update-segment="onUpdateSegment"
-        @clear-filters="clearFilters"
-      />
-    </woot-modal>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -1,230 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    searchQuery: {
-      type: String,
-      default: '',
-    },
-    segmentsId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  emits: [
-    'onToggleSaveFilter',
-    'onToggleEditFilter',
-    'onToggleDeleteFilter',
-    'onToggleCreate',
-    'onToggleFilter',
-    'onToggleImport',
-    'onExportSubmit',
-    'onSearchSubmit',
-    'onInputSearch',
-  ],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      showCreateModal: false,
-      showImportModal: false,
-    };
-  },
-  computed: {
-    searchButtonClass() {
-      return this.searchQuery !== ''
-        ? 'opacity-100 translate-x-0 visible'
-        : '-translate-x-px opacity-0 invisible';
-    },
-    ...mapGetters({
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    hasActiveSegments() {
-      return this.segmentsId !== 0;
-    },
-    exportDescription() {
-      return this.hasAppliedFilters
-        ? this.$t('EXPORT_CONTACTS.CONFIRM.FILTERED_MESSAGE')
-        : this.$t('EXPORT_CONTACTS.CONFIRM.MESSAGE');
-    },
-  },
-  methods: {
-    onToggleSegmentsModal() {
-      this.$emit('onToggleSaveFilter');
-    },
-    onToggleEditSegmentsModal() {
-      this.$emit('onToggleEditFilter');
-    },
-    onToggleDeleteSegmentsModal() {
-      this.$emit('onToggleDeleteFilter');
-    },
-    toggleCreate() {
-      this.$emit('onToggleCreate');
-    },
-    toggleFilter() {
-      this.$emit('onToggleFilter');
-    },
-    toggleImport() {
-      this.$emit('onToggleImport');
-    },
-    async submitExport() {
-      const ok =
-        await this.$refs.confirmExportContactsDialog.showConfirmation();
-
-      if (ok) {
-        this.$emit('onExportSubmit');
-      }
-    },
-    submitSearch() {
-      this.$emit('onSearchSubmit');
-    },
-    inputSearch(event) {
-      this.$emit('onInputSearch', event);
-    },
-  },
-};
-</script>
-
-<template>
-  <header
-    class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
-  >
-    <div class="flex justify-between w-full px-4 py-2">
-      <div class="flex flex-col items-center w-full gap-2 md:flex-row">
-        <div class="flex justify-between w-full gap-2">
-          <div
-            class="flex items-center justify-center max-w-full min-w-[6.25rem]"
-          >
-            <woot-sidemenu-icon />
-            <h1
-              class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-            >
-              {{ headerTitle }}
-            </h1>
-          </div>
-          <div
-            class="max-w-[400px] min-w-[100px] flex items-center relative mx-2"
-          >
-            <div class="flex items-center absolute h-full left-2.5">
-              <fluent-icon
-                icon="search"
-                class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
-              />
-            </div>
-            <input
-              type="text"
-              :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
-              class="!pl-9 !pr-[3.75rem] !text-sm !w-full !h-[2.375rem] !m-0 border-slate-100 dark:border-slate-600"
-              :value="searchQuery"
-              @keyup.enter="submitSearch"
-              @input="inputSearch"
-            />
-            <woot-button
-              :is-loading="false"
-              class="absolute h-8 px-2 py-0 ml-2 transition-transform duration-100 ease-linear clear right-1"
-              :class-names="searchButtonClass"
-              @click="submitSearch"
-            >
-              {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
-            </woot-button>
-          </div>
-        </div>
-        <div class="flex gap-1">
-          <div v-if="hasActiveSegments" class="flex gap-2">
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="secondary"
-              icon="edit"
-              @click="onToggleEditSegmentsModal"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
-            </woot-button>
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="alert"
-              icon="delete"
-              @click="onToggleDeleteSegmentsModal"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
-            </woot-button>
-          </div>
-          <div v-if="!hasActiveSegments" class="relative">
-            <div
-              v-if="hasAppliedFilters"
-              class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
-            />
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="secondary"
-              data-testid="create-new-contact"
-              icon="filter"
-              @click="toggleFilter"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
-            </woot-button>
-          </div>
-
-          <woot-button
-            v-if="hasAppliedFilters && !hasActiveSegments"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            color-scheme="alert"
-            variant="clear"
-            icon="save"
-            @click="onToggleSegmentsModal"
-          >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
-          </woot-button>
-          <woot-button
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            color-scheme="success"
-            icon="person-add"
-            data-testid="create-new-contact"
-            @click="toggleCreate"
-          >
-            {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
-          </woot-button>
-
-          <woot-button
-            v-if="isAdmin"
-            color-scheme="info"
-            icon="upload"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            @click="toggleImport"
-          >
-            {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
-          </woot-button>
-
-          <woot-button
-            v-if="isAdmin"
-            color-scheme="info"
-            icon="download"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            @click="submitExport"
-          >
-            {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-    <woot-confirm-modal
-      ref="confirmExportContactsDialog"
-      :title="$t('EXPORT_CONTACTS.CONFIRM.TITLE')"
-      :description="exportDescription"
-      :confirm-label="$t('EXPORT_CONTACTS.CONFIRM.YES')"
-      :cancel-label="$t('EXPORT_CONTACTS.CONFIRM.NO')"
-    />
-  </header>
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue

@@ -1,96 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import Modal from '../../../../components/Modal.vue';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      show: true,
-      file: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    csvUrl() {
-      return '/downloads/import-contacts-sample.csv';
-    },
-  },
-  mounted() {
-    useTrack(CONTACTS_EVENTS.IMPORT_MODAL_OPEN);
-  },
-  methods: {
-    async uploadFile() {
-      try {
-        if (!this.file) return;
-        await this.$store.dispatch('contacts/import', this.file);
-        this.onClose();
-        useAlert(this.$t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
-        useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
-      } catch (error) {
-        useAlert(error.message || this.$t('IMPORT_CONTACTS.ERROR_MESSAGE'));
-        useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
-      }
-    },
-    handleFileUpload() {
-      this.file = this.$refs.file.files[0];
-    },
-  },
-};
-</script>
-
-<template>
-  <Modal v-model:show="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
-        <p>
-          {{ $t('IMPORT_CONTACTS.DESC') }}
-          <a :href="csvUrl" download="import-contacts-sample">{{
-            $t('IMPORT_CONTACTS.DOWNLOAD_LABEL')
-          }}</a>
-        </p>
-      </woot-modal-header>
-      <div class="flex flex-col p-8">
-        <div class="w-full">
-          <label>
-            <span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
-            <input
-              id="file"
-              ref="file"
-              type="file"
-              accept="text/csv"
-              @change="handleFileUpload"
-            />
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-full">
-            <woot-button
-              :disabled="uiFlags.isCreating || !file"
-              :loading="uiFlags.isCreating"
-              @click="uploadFile"
-            >
-              {{ $t('IMPORT_CONTACTS.FORM.SUBMIT') }}
-            </woot-button>
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('IMPORT_CONTACTS.FORM.CANCEL') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Modal>
-</template>

app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue

@@ -1,126 +0,0 @@
-<script>
-export default {
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    isCompleted: {
-      type: Boolean,
-      default: false,
-    },
-    date: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['completed', 'edit', 'delete'],
-
-  methods: {
-    onClick() {
-      this.$emit('completed', this.isCompleted);
-    },
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="reminder-wrap">
-    <div class="status-wrap">
-      <input :checked="isCompleted" type="radio" @click="onClick" />
-    </div>
-    <div class="wrap">
-      <p class="content">
-        {{ text }}
-      </p>
-      <div class="footer">
-        <div class="meta">
-          <woot-label
-            :title="date"
-            description="date"
-            icon="ion-android-calendar"
-            color-scheme="secondary"
-          />
-          <woot-label
-            :title="label"
-            description="label"
-            color-scheme="secondary"
-          />
-        </div>
-        <div class="actions">
-          <woot-button
-            variant="smooth"
-            size="small"
-            icon="edit"
-            color-scheme="secondary"
-            class="action-button"
-            @click="onEdit"
-          />
-          <woot-button
-            variant="smooth"
-            size="small"
-            icon="ion-trash-b"
-            color-scheme="secondary"
-            class="action-button"
-            @click="onDelete"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.reminder-wrap {
-  display: flex;
-  margin-bottom: var(--space-smaller);
-
-  .status-wrap {
-    padding: var(--space-small) var(--space-smaller);
-    margin-top: var(--space-smaller);
-  }
-
-  .wrap {
-    padding: var(--space-small);
-
-    .footer {
-      display: flex;
-      justify-content: space-between;
-
-      .meta {
-        display: flex;
-      }
-    }
-  }
-}
-
-.actions {
-  display: none;
-
-  .action-button {
-    margin-right: var(--space-small);
-    height: var(--space-medium);
-    width: var(--space-medium);
-  }
-}
-
-.reminder-wrap:hover {
-  .actions {
-    display: flex;
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue

@@ -1,73 +0,0 @@
-<script>
-export default {
-  emits: ['notes', 'events', 'conversation'],
-
-  methods: {
-    onClickNotes() {
-      this.$emit('notes');
-    },
-
-    onClickEvents() {
-      this.$emit('events');
-    },
-
-    onClickConversation() {
-      this.$emit('conversation');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="wrap">
-    <div class="header">
-      <h5 class="text-lg text-black-900 dark:text-slate-200">
-        {{ $t('EVENTS.HEADER.TITLE') }}
-      </h5>
-    </div>
-    <div class="button-wrap">
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickNotes"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_NOTES') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickEvents"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_EVENTS') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickConversation"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_CONVO') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.wrap {
-  width: 100%;
-  padding: var(--space-normal);
-
-  .button-wrap {
-    display: flex;
-
-    .pill-button {
-      margin-right: var(--space-small);
-    }
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue

@@ -1,133 +0,0 @@
-<!-- Unused file deprecated -->
-<script>
-import { dynamicTime } from 'shared/helpers/timeHelper';
-export default {
-  props: {
-    eventType: {
-      type: String,
-      default: '',
-    },
-    eventPath: {
-      type: String,
-      default: '',
-    },
-    eventBody: {
-      type: String,
-      default: '',
-    },
-    timeStamp: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ['more'],
-
-  computed: {
-    readableTime() {
-      return dynamicTime(this.timeStamp);
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('more');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="timeline-card-wrap">
-    <div class="icon-chatbox">
-      <i class="ion-chatboxes" />
-    </div>
-    <div class="card-wrap">
-      <div class="header">
-        <div class="text-wrap">
-          <h6 class="text-sm">
-            {{ eventType }}
-          </h6>
-          <span class="event-path">{{ 'on' }} {{ eventPath }}</span>
-        </div>
-        <div class="date-wrap">
-          <span>{{ readableTime }}</span>
-        </div>
-      </div>
-      <div class="comment-wrap">
-        <p class="comment">
-          {{ eventBody }}
-        </p>
-      </div>
-    </div>
-    <div class="icon-more" @click="onClick">
-      <i class="ion-android-more-vertical" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.timeline-card-wrap {
-  display: flex;
-  width: 100%;
-  color: var(--color-body);
-  padding: var(--space-small);
-
-  .icon-chatbox {
-    width: var(--space-large);
-    height: var(--space-large);
-    border-radius: 50%;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    border: 1px solid var(--color-border);
-    background-color: var(--color-background);
-
-    .ion-chatboxes {
-      font-size: var(--font-size-default);
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .card-wrap {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: var(--space-smaller) var(--space-normal) 0;
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-
-      .text-wrap {
-        display: flex;
-      }
-
-      .event-path {
-        font-size: var(--font-size-mini);
-        margin-left: var(--space-smaller);
-      }
-
-      .date-wrap {
-        font-size: var(--font-size-micro);
-      }
-    }
-
-    .comment-wrap {
-      border: 1px solid var(--color-border-light);
-
-      .comment {
-        padding: var(--space-small);
-        font-size: var(--font-size-mini);
-        margin: 0;
-      }
-    }
-  }
-
-  .icon-more {
-    .ion-android-more-vertical {
-      font-size: var(--font-size-medium);
-    }
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js

@@ -1,46 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import AddReminder from '../AddReminder.vue';
-
-let wrapper;
-
-describe('AddReminder', () => {
-  beforeEach(() => {
-    wrapper = shallowMount(AddReminder, {
-      mocks: {
-        $t: x => x,
-        $store: { getters: {}, state: {} },
-      },
-      stubs: { WootButton: { template: '<button />' } },
-    });
-  });
-
-  it('tests resetValue', () => {
-    const resetValue = vi.spyOn(wrapper.vm, 'resetValue');
-    wrapper.vm.content = 'test';
-    wrapper.vm.date = '08/11/2022';
-    wrapper.vm.resetValue();
-    expect(wrapper.vm.content).toEqual('');
-    expect(wrapper.vm.date).toEqual('');
-    expect(resetValue).toHaveBeenCalled();
-  });
-
-  it('tests optionSelected', () => {
-    const optionSelected = vi.spyOn(wrapper.vm, 'optionSelected');
-    wrapper.vm.label = '';
-    wrapper.vm.optionSelected({ target: { value: 'test' } });
-    expect(wrapper.vm.label).toEqual('test');
-    expect(optionSelected).toHaveBeenCalled();
-  });
-
-  it('tests onAdd', () => {
-    const onAdd = vi.spyOn(wrapper.vm, 'onAdd');
-    wrapper.vm.label = 'label';
-    wrapper.vm.content = 'content';
-    wrapper.vm.date = '08/11/2022';
-    wrapper.vm.onAdd();
-    expect(onAdd).toHaveBeenCalled();
-    expect(wrapper.emitted().add[0]).toEqual([
-      { content: 'content', date: '08/11/2022', label: 'label' },
-    ]);
-  });
-});

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -62,7 +62,7 @@ const goToContactsList = () => {
 
 const fetchActiveContact = async () => {
   if (route.params.contactId) {
-    store.dispatch('contacts/show', { id: route.params.contactId });
+    await store.dispatch('contacts/show', { id: route.params.contactId });
     await store.dispatch(
       'contacts/fetchContactableInbox',
       route.params.contactId

app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue

@@ -1,67 +0,0 @@
-<script>
-import MessageFormatter from 'shared/helpers/MessageFormatter.js';
-
-export default {
-  props: {
-    customAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    listOfAttributes() {
-      return Object.keys(this.customAttributes).filter(key => {
-        const value = this.customAttributes[key];
-        return value !== null && value !== undefined && value !== '';
-      });
-    },
-  },
-  methods: {
-    valueWithLink(attribute) {
-      const parsedAttribute = this.parseAttributeToString(attribute);
-      const messageFormatter = new MessageFormatter(parsedAttribute);
-      return messageFormatter.formattedMessage;
-    },
-    parseAttributeToString(attribute) {
-      switch (typeof attribute) {
-        case 'string':
-          return attribute;
-        case 'object':
-          return JSON.stringify(attribute);
-        default:
-          return `${attribute}`;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="custom-attributes--panel">
-    <div
-      v-for="attribute in listOfAttributes"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <div class="custom-attribute--row__attribute">
-        {{ attribute }}
-      </div>
-      <div>
-        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
-      </div>
-    </div>
-    <p v-if="!listOfAttributes.length">
-      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
-    </p>
-  </div>
-</template>
-
-<style scoped>
-.custom-attributes--panel {
-  margin-bottom: var(--space-normal);
-}
-
-.custom-attribute--row__attribute {
-  font-weight: 500;
-}
-</style>

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -92,9 +92,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
-  >
+  <div class="w-full">
     <ContactInfo
       :contact="contact"
       :channel-type="channelType"

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAccount } from 'dashboard/composables/useAccount';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import PopOverSearch from './search/PopOverSearch.vue';
@@ -8,6 +9,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export default {
   components: {
@@ -52,10 +54,12 @@ export default {
   },
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
+    const { accountId } = useAccount();
 
     return {
       uiSettings,
       updateUISettings,
+      accountId,
     };
   },
   data() {
@@ -67,6 +71,7 @@ export default {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -90,6 +95,12 @@ export default {
       }
       return false;
     },
+    showPopOverSearch() {
+      return !this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
   },
   watch: {
     conversationId() {
@@ -193,7 +204,7 @@ export default {
 </script>
 
 <template>
-  <section class="bg-white conversation-page dark:bg-slate-900">
+  <section class="flex w-full h-full">
     <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
@@ -205,6 +216,7 @@ export default {
       @conversation-load="onConversationLoad"
     >
       <PopOverSearch
+        v-if="showPopOverSearch"
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle-conversation-layout="toggleConversationLayout"
       />
@@ -219,11 +231,3 @@ export default {
     <CmdBarConversationSnooze />
   </section>
 </template>
-
-<style lang="scss" scoped>
-.conversation-page {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-</style>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -9,7 +9,6 @@ import SocialIcons from './SocialIcons.vue';
 import EditContact from './EditContact.vue';
 import NewConversation from './NewConversation.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
-import { getCountryFlag } from 'dashboard/helper/flag';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   isAConversationRoute,
@@ -127,8 +126,12 @@ export default {
     },
     findCountryFlag(countryCode, cityAndCountry) {
       try {
-        const countryFlag = countryCode ? getCountryFlag(countryCode) : '🌎';
-        return `${cityAndCountry} ${countryFlag}`;
+        if (!countryCode) {
+          return `${cityAndCountry} 🌎`;
+        }
+
+        const code = countryCode?.toLowerCase();
+        return `${cityAndCountry} <span class="fi fi-${code} size-3.5"></span>`;
       } catch (error) {
         return '';
       }
@@ -171,7 +174,7 @@ export default {
 </script>
 
 <template>
-  <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
+  <div class="relative items-center w-full p-4">
     <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
       <div class="flex flex-row justify-between">
         <Thumbnail

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue

@@ -87,10 +87,9 @@ export default {
       />
       <span
         v-if="value"
+        v-dompurify-html="value"
         class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
-      >
-        {{ value }}
-      </span>
+      />
       <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>

app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue

@@ -1,62 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import ContactForm from './ContactForm.vue';
-
-export default {
-  components: {
-    ContactForm,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['cancel', 'update:show'],
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-  },
-  methods: {
-    onCancel() {
-      this.$emit('cancel');
-    },
-    onSuccess() {
-      this.$emit('cancel');
-    },
-    async onSubmit(contactItem) {
-      await this.$store.dispatch('contacts/create', contactItem);
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal
-    v-model:show="localShow"
-    :on-close="onCancel"
-    modal-type="right-aligned"
-  >
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('CREATE_CONTACT.TITLE')"
-        :header-content="$t('CREATE_CONTACT.DESC')"
-      />
-      <ContactForm
-        :in-progress="uiFlags.isCreating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -34,25 +34,25 @@ export default {
 <template>
   <div class="relative">
     <div
-      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
+      class="flex px-4 pb-1 justify-between items-center flex-row gap-1 pt-2.5 border-b border-transparent"
     >
       <woot-sidemenu-icon
         size="tiny"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
+        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5 flex-shrink-0 focus:!bg-n-solid-3 dark:!hover:bg-n-solid-2 hover:!bg-n-alpha-2"
       />
       <router-link
         :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
+        class="inline-flex items-center flex-1 h-6 min-w-0 gap-1 px-2 py-0 text-left rounded-md rtl:mr-2.5 search-link rtl:text-right bg-n-slate-9/10 hover:bg-n-slate-3"
       >
-        <div class="flex">
+        <div class="flex flex-shrink-0">
           <fluent-icon
             icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
+            class="search--icon text-n-slate-11"
             size="16"
           />
         </div>
         <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
+          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-n-slate-11"
         >
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </p>

app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue

@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     isOnExpandedLayout: {
       type: Boolean,
@@ -16,22 +21,17 @@ export default {
 </script>
 
 <template>
-  <woot-button
+  <NextButton
     v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-    icon="arrow-right-import"
-    size="tiny"
-    variant="smooth"
-    color-scheme="secondary"
-    class="layout-switch__container"
-    :class="{ expanded: isOnExpandedLayout }"
+    :icon="
+      isOnExpandedLayout
+        ? 'i-lucide-arrow-left-to-line'
+        : 'i-lucide-arrow-right-to-line'
+    "
+    slate
+    xs
+    faded
+    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0"
     @click="toggle"
   />
 </template>
-
-<style lang="scss" soped>
-.layout-switch__container {
-  &.expanded .icon {
-    transform: rotate(180deg);
-  }
-}
-</style>

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

@@ -175,7 +175,10 @@ export default {
     },
     canLocktoSingleConversation() {
       return (
-        this.isASmsInbox || this.isAWhatsAppChannel || this.isAFacebookInbox
+        this.isASmsInbox ||
+        this.isAWhatsAppChannel ||
+        this.isAFacebookInbox ||
+        this.isAPIInbox
       );
     },
     inboxNameLabel() {