Merge remote-tracking branch 'origin/feat/whatsapp-embedded-signup' into feat/whatsapp-embedded-signup

.devcontainer/Dockerfile.base

@@ -77,8 +77,8 @@ RUN curl -L https://github.com/DarthSim/overmind/releases/download/v2.1.0/overmi
 WORKDIR /workspace
 RUN chown vscode:vscode /workspace
 
-# set up node js and pnpm in single layer
-RUN npm install -g pnpm@${PNPM_VERSION} \
+# set up node js, pnpm and claude code in single layer
+RUN npm install -g pnpm@${PNPM_VERSION} @anthropic-ai/claude-code \
     && npm cache clean --force
 
 # Switch to vscode user

.devcontainer/devcontainer.json

@@ -4,17 +4,26 @@
   "dockerComposeFile": "docker-compose.yml",
 
   "settings": {
-    "terminal.integrated.shell.linux": "/bin/zsh"
+    "terminal.integrated.shell.linux": "/bin/zsh",
+    "extensions.showRecommendationsOnlyOnDemand": true,
+    "editor.formatOnSave": true,
+    "files.trimTrailingWhitespace": true,
+    "files.insertFinalNewline": true,
+    "search.exclude": {
+      "**/node_modules": true,
+      "**/tmp": true,
+      "**/log": true,
+      "**/coverage": true,
+      "**/public/packs": true
+    }
   },
 
 
   // Add the IDs of extensions you want installed when the container is created.
   "extensions": [
-    "rebornix.Ruby",
+    "Shopify.ruby-lsp",
     "misogi.ruby-rubocop",
-    "wingrunr21.vscode-ruby",
     "davidpallinder.rails-test-runner",
-    "eamodio.gitlens",
     "github.copilot",
     "mrmlnc.vscode-duplicate"
   ],

.devcontainer/scripts/setup.sh

@@ -4,5 +4,13 @@ sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
 sed -i -e '/SMTP_ADDRESS/ s/=.*/=localhost/' .env
 sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.app.github.dev/" .env
 
+# Setup Claude Code API key if available
+if [ -n "$CLAUDE_CODE_API_KEY" ]; then
+  mkdir -p ~/.claude
+  echo '{"apiKeyHelper": "~/.claude/anthropic_key.sh"}' > ~/.claude/settings.json
+  echo "echo \"$CLAUDE_CODE_API_KEY\"" > ~/.claude/anthropic_key.sh
+  chmod +x ~/.claude/anthropic_key.sh
+fi
+
 # codespaces make the ports public
 gh codespace ports visibility 3000:public 3036:public 8025:public -c $CODESPACE_NAME

Makefile

@@ -41,8 +41,15 @@ run:
 
 force_run:
 	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
 	overmind start -f Procfile.dev
 
+force_run_tunnel:
+	lsof -ti:3000 | xargs kill -9 2>/dev/null || true
+	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
+	overmind start -f Procfile.tunnel
+
 debug:
 	overmind connect backend
 
@@ -52,4 +59,4 @@ debug_worker:
 docker: 
 	docker build -t $(APP_NAME) -f ./docker/Dockerfile .
 
-.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run debug debug_worker
+.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run force_run_tunnel debug debug_worker

Procfile.tunnel

@@ -0,0 +1,4 @@
+backend: DISABLE_MINI_PROFILER=true bin/rails s -p 3000
+# https://github.com/mperham/sidekiq/issues/3090#issuecomment-389748695
+worker: dotenv bundle exec sidekiq -C config/sidekiq.yml
+vite: bin/vite build --watch

app/controllers/api/v1/accounts/contacts_controller.rb

@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
   before_action :set_current_page, only: [:index, :active, :search, :filter]
   before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
+  before_action :set_include_contact_inboxes, only: [:index, :active, :search, :filter, :show, :update]
 
   def index
     @contacts_count = resolved_contacts.count
@@ -56,7 +56,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     contacts = Current.account.contacts.where(id: ::OnlineStatusTracker
                   .get_available_contact_ids(Current.account.id))
     @contacts_count = contacts.count
-    @contacts = contacts.page(@current_page)
+    @contacts = fetch_contacts(contacts)
   end
 
   def show; end

app/controllers/api/v1/accounts/conversations_controller.rb

@@ -124,6 +124,12 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversation.save!
   end
 
+  def destroy
+    authorize @conversation, :destroy?
+    ::DeleteObjectJob.perform_later(@conversation, Current.user, request.ip)
+    head :ok
+  end
+
   private
 
   def permitted_update_params

app/controllers/api/v1/accounts_controller.rb

@@ -92,7 +92,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def settings_params
-    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting)
+    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting, :audio_transcriptions, :auto_resolve_label)
   end
 
   def check_signup_enabled

app/controllers/super_admin/account_users_controller.rb

@@ -2,6 +2,13 @@ class SuperAdmin::AccountUsersController < SuperAdmin::ApplicationController
   # Overwrite any of the RESTful controller actions to implement custom behavior
   # For example, you may want to send an email after a foo is updated.
   #
+
+  # Since account/user page - account user role attribute links to the show page
+  # Handle with a redirect to the user show page
+  def show
+    redirect_to super_admin_user_path(requested_resource.user)
+  end
+
   def create
     resource = resource_class.new(resource_params)
     authorize_resource(resource)

app/javascript/dashboard/api/contacts.js

@@ -61,6 +61,11 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
+  active(page = 1, sortAttr = 'name') {
+    let requestURL = `${this.url}/active?${buildContactParams(page, sortAttr)}`;
+    return axios.get(requestURL);
+  }
+
   // eslint-disable-next-line default-param-last
   filter(page = 1, sortAttr = 'name', queryPayload) {
     let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;

app/javascript/dashboard/api/inbox/conversation.js

@@ -134,13 +134,13 @@ class ConversationApi extends ApiClient {
     return axios.get(`${this.url}/${conversationId}/attachments`);
   }
 
-  requestCopilot(conversationId, body) {
-    return axios.post(`${this.url}/${conversationId}/copilot`, body);
-  }
-
   getInboxAssistant(conversationId) {
     return axios.get(`${this.url}/${conversationId}/inbox_assistant`);
   }
+
+  delete(conversationId) {
+    return axios.delete(`${this.url}/${conversationId}`);
+  }
 }
 
 export default new ConversationApi();

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

@@ -101,7 +101,7 @@ select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
   background-size: 9px 6px;
 
-  @apply field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
+  @apply field-base h-10 bg-origin-content bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
 
   &[disabled] {
     @apply field-disabled;

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

@@ -17,6 +17,7 @@ const props = defineProps({
   additionalAttributes: { type: Object, default: () => ({}) },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
+  availabilityStatus: { type: String, default: null },
   isExpanded: { type: Boolean, default: false },
   isUpdating: { type: Boolean, default: false },
 });
@@ -92,7 +93,13 @@ const onClickViewDetails = () => emit('showContact', props.id);
 <template>
   <CardLayout :key="id" layout="row">
     <div class="flex items-center justify-start flex-1 gap-4">
-      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
+      <Avatar
+        :name="name"
+        :src="thumbnail"
+        :size="48"
+        :status="availabilityStatus"
+        rounded-full
+      />
       <div class="flex flex-col gap-0.5 flex-1">
         <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
           <span class="text-base font-medium truncate text-n-slate-12">

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

@@ -7,42 +7,16 @@ import ContactMoreActions from './components/ContactMoreActions.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 defineProps({
-  showSearch: {
-    type: Boolean,
-    default: true,
-  },
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  headerTitle: {
-    type: String,
-    required: true,
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  activeSort: {
-    type: String,
-    default: 'last_activity_at',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  isSegmentsView: {
-    type: Boolean,
-    default: false,
-  },
-  hasActiveFilters: {
-    type: Boolean,
-    default: false,
-  },
-  isLabelView: {
-    type: Boolean,
-    default: false,
-  },
+  showSearch: { type: Boolean, default: true },
+  searchValue: { type: String, default: '' },
+  headerTitle: { type: String, required: true },
+  buttonLabel: { type: String, default: '' },
+  activeSort: { type: String, default: 'last_activity_at' },
+  activeOrdering: { type: String, default: '' },
+  isSegmentsView: { type: Boolean, default: false },
+  hasActiveFilters: { type: Boolean, default: false },
+  isLabelView: { type: Boolean, default: false },
+  isActiveView: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -85,7 +59,7 @@ const emit = defineEmits([
           </Input>
         </div>
         <div class="flex items-center gap-2">
-          <div v-if="!isLabelView" class="relative">
+          <div v-if="!isLabelView && !isActiveView" class="relative">
             <Button
               id="toggleContactsFilterButton"
               :icon="
@@ -105,7 +79,12 @@ const emit = defineEmits([
             <slot name="filter" />
           </div>
           <Button
-            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
+            v-if="
+              hasActiveFilters &&
+              !isSegmentsView &&
+              !isLabelView &&
+              !isActiveView
+            "
             icon="i-lucide-save"
             color="slate"
             size="sm"
@@ -113,7 +92,7 @@ const emit = defineEmits([
             @click="emit('createSegment')"
           />
           <Button
-            v-if="isSegmentsView && !isLabelView"
+            v-if="isSegmentsView && !isLabelView && !isActiveView"
             icon="i-lucide-trash"
             color="slate"
             size="sm"

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

@@ -36,6 +36,7 @@ const props = defineProps({
   activeSegment: { type: Object, default: null },
   hasAppliedFilters: { type: Boolean, default: false },
   isLabelView: { type: Boolean, default: false },
+  isActiveView: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -277,6 +278,7 @@ defineExpose({
     :header-title="headerTitle"
     :is-segments-view="hasActiveSegments"
     :is-label-view="isLabelView"
+    :is-active-view="isActiveView"
     :has-active-filters="hasAppliedFilters"
     :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
     @search="emit('search', $event)"

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

@@ -6,7 +6,7 @@ import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/Contact
 import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 
-defineProps({
+const props = defineProps({
   searchValue: { type: String, default: '' },
   headerTitle: { type: String, default: '' },
   showPaginationFooter: { type: Boolean, default: true },
@@ -37,10 +37,23 @@ const isNotSegmentView = computed(() => {
   return route.name !== 'contacts_dashboard_segments_index';
 });
 
+const isActiveView = computed(() => {
+  return route.name === 'contacts_dashboard_active';
+});
+
 const isLabelView = computed(
   () => route.name === 'contacts_dashboard_labels_index'
 );
 
+const showActiveFiltersPreview = computed(() => {
+  return (
+    (props.hasAppliedFilters || !isNotSegmentView.value) &&
+    !props.isFetchingList &&
+    !isLabelView.value &&
+    !isActiveView.value
+  );
+});
+
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
 };
@@ -57,7 +70,7 @@ const openFilter = () => {
     <div class="flex flex-col w-full h-full transition-all duration-300">
       <ContactListHeaderWrapper
         ref="contactListHeaderWrapper"
-        :show-search="isNotSegmentView"
+        :show-search="isNotSegmentView && !isActiveView"
         :search-value="searchValue"
         :active-sort="activeSort"
         :active-ordering="activeOrdering"
@@ -66,6 +79,7 @@ const openFilter = () => {
         :segments-id="segmentsId"
         :has-applied-filters="hasAppliedFilters"
         :is-label-view="isLabelView"
+        :is-active-view="isActiveView"
         @update:sort="emit('update:sort', $event)"
         @search="emit('search', $event)"
         @apply-filter="emit('applyFilter', $event)"
@@ -74,11 +88,7 @@ const openFilter = () => {
       <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[60rem]">
           <ContactsActiveFiltersPreview
-            v-if="
-              (hasAppliedFilters || !isNotSegmentView) &&
-              !isFetchingList &&
-              !isLabelView
-            "
+            v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"

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

@@ -71,6 +71,7 @@ const toggleExpanded = id => {
       :thumbnail="contact.thumbnail"
       :phone-number="contact.phoneNumber"
       :additional-attributes="contact.additionalAttributes"
+      :availability-status="contact.availabilityStatus"
       :is-expanded="expandedCardId === contact.id"
       :is-updating="isUpdating"
       @toggle="toggleExpanded(contact.id)"

app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue

@@ -56,7 +56,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <div
-    class="flex flex-col justify-center items-center absolute top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
+    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
   >
     <Button
       v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"

app/javascript/dashboard/components-next/Editor/Editor.vue

@@ -4,38 +4,14 @@ import { computed, ref, watch, useSlots } from 'vue';
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  focusOnMount: {
-    type: Boolean,
-    default: false,
-  },
-  maxLength: {
-    type: Number,
-    default: 200,
-  },
-  showCharacterCount: {
-    type: Boolean,
-    default: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  message: {
-    type: String,
-    default: '',
-  },
+  modelValue: { type: String, default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  focusOnMount: { type: Boolean, default: false },
+  maxLength: { type: Number, default: 200 },
+  showCharacterCount: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  message: { type: String, default: '' },
   messageType: {
     type: String,
     default: 'info',
@@ -43,6 +19,7 @@ const props = defineProps({
   },
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
+  enabledMenuOptions: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -120,6 +97,7 @@ watch(
         :disabled="disabled"
         :enable-variables="enableVariables"
         :enable-canned-responses="enableCannedResponses"
+        :enabled-menu-options="enabledMenuOptions"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -76,7 +76,7 @@ const handlePageChange = event => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 xl:px-0">
+    <header class="sticky top-0 z-10 px-6">
       <div class="w-full max-w-[60rem] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
@@ -116,7 +116,7 @@ const handlePageChange = event => {
         </div>
       </div>
     </header>
-    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
+    <main class="flex-1 px-6 overflow-y-auto">
       <div class="w-full max-w-[60rem] h-full mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div

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

@@ -1,6 +1,5 @@
 <script setup>
-import { nextTick, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { nextTick, ref, watch, computed } from 'vue';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -9,23 +8,17 @@ import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
+import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
+import CopilotEmptyState from './CopilotEmptyState.vue';
 import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
-  supportAgent: {
-    type: Object,
-    default: () => ({}),
-  },
   messages: {
     type: Array,
     default: () => [],
   },
-  isCaptainTyping: {
-    type: Boolean,
-    default: false,
-  },
   conversationInboxType: {
     type: String,
     required: true,
@@ -44,18 +37,11 @@ const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);
 
 const { t } = useI18n();
 
-const COPILOT_USER_ROLES = ['assistant', 'system'];
-
 const sendMessage = message => {
   emit('sendMessage', message);
   useTrack(COPILOT_EVENTS.SEND_MESSAGE);
 };
 
-const useSuggestion = opt => {
-  emit('sendMessage', t(opt.prompt));
-  useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
-};
-
 const chatContainer = ref(null);
 
 const scrollToBottom = async () => {
@@ -65,20 +51,40 @@ const scrollToBottom = async () => {
   }
 };
 
-const promptOptions = [
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
-  },
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
-  },
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
-  },
-];
+const groupedMessages = computed(() => {
+  const result = [];
+  let thinkingGroup = [];
+  props.messages.forEach(message => {
+    if (message.message_type === 'assistant_thinking') {
+      thinkingGroup.push(message);
+    } else {
+      if (thinkingGroup.length > 0) {
+        result.push({
+          id: thinkingGroup[0].id,
+          message_type: 'thinking_group',
+          messages: thinkingGroup,
+        });
+        thinkingGroup = [];
+      }
+      result.push(message);
+    }
+  });
+  if (thinkingGroup.length > 0) {
+    result.push({
+      id: thinkingGroup[0].id,
+      message_type: 'thinking_group',
+      messages: thinkingGroup,
+    });
+  }
+  return result;
+});
+
+const isLastMessageFromAssistant = computed(() => {
+  return (
+    groupedMessages.value[groupedMessages.value.length - 1].message_type ===
+    'assistant'
+  );
+});
 
 const { updateUISettings } = useUISettings();
 
@@ -95,8 +101,22 @@ const handleSidebarAction = action => {
   }
 };
 
+const hasAssistants = computed(() => props.assistants.length > 0);
+const hasMessages = computed(() => props.messages.length > 0);
+const copilotButtons = computed(() => {
+  if (hasMessages.value) {
+    return [
+      {
+        key: 'reset',
+        icon: 'i-lucide-refresh-ccw',
+        tooltip: t('CAPTAIN.COPILOT.RESET'),
+      },
+    ];
+  }
+  return [];
+});
 watch(
-  [() => props.messages, () => props.isCaptainTyping],
+  [() => props.messages],
   () => {
     scrollToBottom();
   },
@@ -108,64 +128,57 @@ watch(
   <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
     <SidebarActionsHeader
       :title="$t('CAPTAIN.COPILOT.TITLE')"
-      :buttons="[
-        {
-          key: 'reset',
-          icon: 'i-lucide-refresh-ccw',
-          tooltip: $t('CAPTAIN.COPILOT.RESET'),
-        },
-      ]"
+      :buttons="copilotButtons"
       @click="handleSidebarAction"
       @close="closeCopilotPanel"
     />
-    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
-      <template v-for="message in messages" :key="message.id">
-        <CopilotAgentMessage
-          v-if="message.role === 'user'"
-          :support-agent="supportAgent"
-          :message="message"
-        />
-        <CopilotAssistantMessage
-          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
-          :message="message"
-          :conversation-inbox-type="conversationInboxType"
-        />
-      </template>
-
-      <CopilotLoader v-if="isCaptainTyping" />
-    </div>
-
     <div
-      v-if="!messages.length"
-      class="h-full w-full flex items-center justify-center"
+      ref="chatContainer"
+      class="flex-1 flex px-4 py-4 overflow-y-auto items-start"
     >
-      <div class="h-fit px-3 py-3 space-y-1">
-        <span class="text-xs text-n-slate-10">
-          {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
-        </span>
-        <button
-          v-for="prompt in promptOptions"
-          :key="prompt.label"
-          class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
-          @click="() => useSuggestion(prompt)"
-        >
-          <span>{{ t(prompt.label) }}</span>
-          <Icon icon="i-lucide-chevron-right" />
-        </button>
+      <div v-if="hasMessages" class="space-y-6 flex-1 flex flex-col w-full">
+        <template v-for="(item, index) in groupedMessages" :key="item.id">
+          <CopilotAgentMessage
+            v-if="item.message_type === 'user'"
+            :message="item.message"
+          />
+          <CopilotAssistantMessage
+            v-else-if="item.message_type === 'assistant'"
+            :message="item.message"
+            :is-last-message="index === groupedMessages.length - 1"
+            :conversation-inbox-type="conversationInboxType"
+          />
+          <CopilotThinkingGroup
+            v-else
+            :messages="item.messages"
+            :default-collapsed="isLastMessageFromAssistant"
+          />
+        </template>
+
+        <CopilotLoader v-if="!isLastMessageFromAssistant" />
       </div>
+      <CopilotEmptyState
+        v-else
+        :has-assistants="hasAssistants"
+        @use-suggestion="sendMessage"
+      />
     </div>
 
     <div class="mx-3 mt-px mb-2">
       <div class="flex items-center gap-2 justify-between w-full mb-1">
         <ToggleCopilotAssistant
-          v-if="assistants.length"
+          v-if="assistants.length > 1"
           :assistants="assistants"
           :active-assistant="activeAssistant"
           @set-assistant="$event => emit('setAssistant', $event)"
         />
         <div v-else />
       </div>
-      <CopilotInput class="mb-1 w-full" @send="sendMessage" />
+      <CopilotInput
+        v-if="hasAssistants"
+        class="mb-1 w-full"
+        @send="sendMessage"
+      />
     </div>
   </div>
 </template>

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

@@ -11,6 +11,10 @@ import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
+  isLastMessage: {
+    type: Boolean,
+    default: false,
+  },
   message: {
     type: Object,
     required: true,
@@ -20,6 +24,15 @@ const props = defineProps({
     required: true,
   },
 });
+const hasEmptyMessageContent = computed(() => !props.message?.content);
+
+const showUseButton = computed(() => {
+  return (
+    !hasEmptyMessageContent.value &&
+    props.message.reply_suggestion &&
+    props.isLastMessage
+  );
+});
 
 const messageContent = computed(() => {
   const formatter = new MessageFormatter(props.message.content);
@@ -32,8 +45,6 @@ const insertIntoRichEditor = computed(() => {
   );
 });
 
-const hasEmptyMessageContent = computed(() => !props.message?.content);
-
 const useCopilotResponse = () => {
   if (insertIntoRichEditor.value) {
     emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
@@ -57,7 +68,7 @@ const useCopilotResponse = () => {
     />
     <div class="flex flex-row mt-1">
       <Button
-        v-if="!hasEmptyMessageContent"
+        v-if="showUseButton"
         :label="$t('CAPTAIN.COPILOT.USE')"
         faded
         sm

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

@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import Icon from '../icon/Icon.vue';
+
+defineProps({
+  hasAssistants: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['useSuggestion']);
+const { t } = useI18n();
+const route = useRoute();
+
+const routePromptMap = {
+  conversations: [
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
+    },
+  ],
+  dashboard: [
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.CONTENT',
+    },
+  ],
+};
+
+const getCurrentRoute = () => {
+  const path = route.path;
+  if (path.includes('/conversations')) return 'conversations';
+  if (path.includes('/dashboard')) return 'dashboard';
+  return 'dashboard';
+};
+
+const promptOptions = computed(() => {
+  const currentRoute = getCurrentRoute();
+  return routePromptMap[currentRoute] || routePromptMap.conversations;
+});
+
+const handleSuggestion = opt => {
+  emit('useSuggestion', t(opt.prompt));
+};
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col gap-6 px-2">
+    <div class="flex flex-col space-y-4 py-4">
+      <Icon icon="i-woot-captain" class="text-n-slate-9 text-4xl" />
+      <div class="space-y-1">
+        <h3 class="text-base font-medium text-n-slate-12 leading-8">
+          {{ $t('CAPTAIN.COPILOT.PANEL_TITLE') }}
+        </h3>
+        <p class="text-sm text-n-slate-11 leading-6">
+          {{ $t('CAPTAIN.COPILOT.KICK_OFF_MESSAGE') }}
+        </p>
+      </div>
+    </div>
+    <div v-if="!hasAssistants" class="w-full space-y-2">
+      <p class="text-sm text-n-slate-11 leading-6">
+        {{ $t('CAPTAIN.ASSISTANTS.NO_ASSISTANTS_AVAILABLE') }}
+      </p>
+      <router-link
+        :to="{
+          name: 'captain_assistants_index',
+          params: { accountId: route.params.accountId },
+        }"
+        class="text-n-slate-11 underline hover:text-n-slate-12"
+      >
+        {{ $t('CAPTAIN.ASSISTANTS.ADD_NEW') }}
+      </router-link>
+    </div>
+    <div v-else class="w-full space-y-2">
+      <span class="text-xs text-n-slate-10 block">
+        {{ $t('CAPTAIN.COPILOT.TRY_THESE_PROMPTS') }}
+      </span>
+      <div class="space-y-1">
+        <button
+          v-for="prompt in promptOptions"
+          :key="prompt.label"
+          class="w-full px-3 py-2 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center justify-between hover:bg-n-slate-3 transition-colors"
+          @click="handleSuggestion(prompt)"
+        >
+          <span>{{ t(prompt.label) }}</span>
+          <Icon icon="i-lucide-chevron-right" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useMapGetter } from 'dashboard/composables/store';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+const route = useRoute();
+
+const { uiSettings, updateUISettings } = useUISettings();
+
+const isConversationRoute = computed(() => {
+  const CONVERSATION_ROUTES = [
+    'inbox_conversation',
+    'conversation_through_inbox',
+    'conversations_through_label',
+    'team_conversations_through_label',
+    'conversations_through_folders',
+    'conversation_through_mentions',
+    'conversation_through_unattended',
+    'conversation_through_participating',
+  ];
+  return CONVERSATION_ROUTES.includes(route.name);
+});
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showCopilotLauncher = computed(() => {
+  const isCaptainEnabled = isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CAPTAIN
+  );
+  return (
+    isCaptainEnabled &&
+    !uiSettings.value.is_copilot_panel_open &&
+    !isConversationRoute.value
+  );
+});
+const toggleSidebar = () => {
+  updateUISettings({
+    is_copilot_panel_open: !uiSettings.value.is_copilot_panel_open,
+    is_contact_sidebar_open: false,
+  });
+};
+</script>
+
+<template>
+  <div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
+    <div class="rounded-full bg-n-alpha-2 p-1">
+      <Button
+        icon="i-woot-captain"
+        class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl"
+        lg
+        @click="toggleSidebar"
+      />
+    </div>
+  </div>
+  <template v-else />
+</template>

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

@@ -17,7 +17,7 @@ defineProps({
         icon="i-lucide-sparkles"
         class="w-4 h-4 mt-0.5 flex-shrink-0 text-n-slate-9"
       />
-      <div class="text-sm text-n-slate-11">
+      <div class="text-sm text-n-slate-12">
         {{ content }}
       </div>
     </div>

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

@@ -51,10 +51,10 @@ watch(
       }"
     >
       <CopilotThinkingBlock
-        v-for="message in messages"
-        :key="message.id"
-        :content="message.content"
-        :reasoning="message.reasoning"
+        v-for="copilotMessage in messages"
+        :key="copilotMessage.id"
+        :content="copilotMessage.message.content"
+        :reasoning="copilotMessage.message.reasoning"
       />
     </div>
   </div>

app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue

@@ -74,6 +74,7 @@ const updateSelected = newValue => {
       <slot name="trigger" :toggle="toggle">
         <Button
           ref="triggerRef"
+          type="button"
           sm
           slate
           :variant

app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

@@ -9,7 +9,14 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 
-const { options } = defineProps({
+const {
+  options,
+  disableSearch,
+  placeholderIcon,
+  placeholder,
+  placeholderTrailingIcon,
+  searchPlaceholder,
+} = defineProps({
   options: {
     type: Array,
     required: true,
@@ -18,6 +25,22 @@ const { options } = defineProps({
     type: Boolean,
     default: false,
   },
+  placeholderIcon: {
+    type: String,
+    default: 'i-lucide-plus',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  placeholderTrailingIcon: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
 });
 
 const { t } = useI18n();
@@ -69,15 +92,26 @@ const toggleSelected = option => {
         sm
         slate
         faded
+        type="button"
         :icon="selectedItem.icon"
         :label="selectedItem.name"
         @click="toggle"
       />
-      <Button v-else sm slate faded @click="toggle">
+      <Button
+        v-else
+        sm
+        slate
+        faded
+        type="button"
+        :trailing-icon="placeholderTrailingIcon"
+        @click="toggle"
+      >
         <template #icon>
-          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+          <Icon :icon="placeholderIcon" class="text-n-slate-11" />
         </template>
-        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+        <span class="text-n-slate-11">{{
+          placeholder || t('COMBOBOX.PLACEHOLDER')
+        }}</span>
       </Button>
     </template>
     <DropdownBody class="top-0 min-w-56 z-50" strong>
@@ -87,7 +121,7 @@ const toggleSelected = option => {
           v-model="searchTerm"
           autofocus
           class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
-          :placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
+          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
         />
       </div>
       <DropdownSection class="max-h-80 overflow-scroll">

app/javascript/dashboard/components-next/input/DurationInput.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, watch } from 'vue';
 import Input from './Input.vue';
 import { useI18n } from 'vue-i18n';
+import { DURATION_UNITS } from './constants';
 
 const props = defineProps({
   min: { type: Number, default: 0 },
@@ -11,36 +12,50 @@ const props = defineProps({
 
 const { t } = useI18n();
 const duration = defineModel('modelValue', { type: Number, default: null });
+const unit = defineModel('unit', {
+  type: String,
+  default: DURATION_UNITS.MINUTES,
+  validate(value) {
+    return Object.values(DURATION_UNITS).includes(value);
+  },
+});
 
-const UNIT_TYPES = {
-  MINUTES: 'minutes',
-  HOURS: 'hours',
-  DAYS: 'days',
+const convertToMinutes = newValue => {
+  if (unit.value === DURATION_UNITS.MINUTES) {
+    return Math.floor(newValue);
+  }
+  if (unit.value === DURATION_UNITS.HOURS) {
+    return Math.floor(newValue) * 60;
+  }
+  return Math.floor(newValue) * 24 * 60;
 };
-const unit = ref(UNIT_TYPES.MINUTES);
 
 const transformedValue = computed({
   get() {
-    if (unit.value === UNIT_TYPES.MINUTES) return duration.value;
-    if (unit.value === UNIT_TYPES.HOURS) return Math.floor(duration.value / 60);
-    if (unit.value === UNIT_TYPES.DAYS)
+    if (unit.value === DURATION_UNITS.MINUTES) return duration.value;
+    if (unit.value === DURATION_UNITS.HOURS)
+      return Math.floor(duration.value / 60);
+    if (unit.value === DURATION_UNITS.DAYS)
       return Math.floor(duration.value / 24 / 60);
 
     return 0;
   },
   set(newValue) {
-    let minuteValue;
-    if (unit.value === UNIT_TYPES.MINUTES) {
-      minuteValue = Math.floor(newValue);
-    } else if (unit.value === UNIT_TYPES.HOURS) {
-      minuteValue = Math.floor(newValue * 60);
-    } else if (unit.value === UNIT_TYPES.DAYS) {
-      minuteValue = Math.floor(newValue * 24 * 60);
-    }
+    let minuteValue = convertToMinutes(newValue);
 
     duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
   },
 });
+
+// when unit is changed set the nearest value to that unit
+// so if the minute is set to 900, and the user changes the unit to "days"
+// the transformed value will show 0, but the real value will still be 900
+// this might create some confusion, especially when saving
+// this watcher fixes it by rounding the duration basically, to the nearest unit value
+watch(unit, () => {
+  let adjustedValue = convertToMinutes(transformedValue.value);
+  duration.value = Math.min(Math.max(adjustedValue, props.min), props.max);
+});
 </script>
 
 <template>
@@ -57,10 +72,12 @@ const transformedValue = computed({
     :disabled="disabled"
     class="mb-0 text-sm disabled:outline-n-weak disabled:opacity-40"
   >
-    <option :value="UNIT_TYPES.MINUTES">
+    <option :value="DURATION_UNITS.MINUTES">
       {{ t('DURATION_INPUT.MINUTES') }}
     </option>
-    <option :value="UNIT_TYPES.HOURS">{{ t('DURATION_INPUT.HOURS') }}</option>
-    <option :value="UNIT_TYPES.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
+    <option :value="DURATION_UNITS.HOURS">
+      {{ t('DURATION_INPUT.HOURS') }}
+    </option>
+    <option :value="DURATION_UNITS.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
   </select>
 </template>

app/javascript/dashboard/components-next/input/constants.js

@@ -0,0 +1,5 @@
+export const DURATION_UNITS = {
+  MINUTES: 'minutes',
+  HOURS: 'hours',
+  DAYS: 'days',
+};

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -109,49 +109,58 @@ const downloadAudio = async () => {
   </audio>
   <div
     v-bind="$attrs"
-    class="rounded-xl w-full gap-1 p-1.5 bg-n-alpha-white flex items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
+    class="rounded-xl w-full gap-2 p-1.5 bg-n-alpha-white flex flex-col items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
   >
-    <button class="p-0 border-0 size-8" @click="playOrPause">
-      <Icon
-        v-if="isPlaying"
-        class="size-8"
-        icon="i-teenyicons-pause-small-solid"
-      />
-      <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
-    </button>
-    <div class="tabular-nums text-xs">
-      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+    <div class="flex gap-1 w-full flex-1 items-center justify-start">
+      <button class="p-0 border-0 size-8" @click="playOrPause">
+        <Icon
+          v-if="isPlaying"
+          class="size-8"
+          icon="i-teenyicons-pause-small-solid"
+        />
+        <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
+      </button>
+      <div class="tabular-nums text-xs">
+        {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+      </div>
+      <div class="flex-1 items-center flex px-2">
+        <input
+          type="range"
+          min="0"
+          :max="duration"
+          :value="currentTime"
+          class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
+          @input="seek"
+        />
+      </div>
+      <button
+        class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
+        @click="changePlaybackSpeed"
+      >
+        <span class="text-xs text-n-slate-11 font-medium">
+          {{ playbackSpeedLabel }}
+        </span>
+      </button>
+      <button
+        class="p-0 border-0 size-8 grid place-content-center"
+        @click="toggleMute"
+      >
+        <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
+        <Icon v-else class="size-4" icon="i-lucide-volume-2" />
+      </button>
+      <button
+        class="p-0 border-0 size-8 grid place-content-center"
+        @click="downloadAudio"
+      >
+        <Icon class="size-4" icon="i-lucide-download" />
+      </button>
     </div>
-    <div class="flex-1 items-center flex px-2">
-      <input
-        type="range"
-        min="0"
-        :max="duration"
-        :value="currentTime"
-        class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
-        @input="seek"
-      />
+
+    <div
+      v-if="attachment.transcribedText"
+      class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
+    >
+      {{ attachment.transcribedText }}
     </div>
-    <button
-      class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
-      @click="changePlaybackSpeed"
-    >
-      <span class="text-xs text-n-slate-11 font-medium">
-        {{ playbackSpeedLabel }}
-      </span>
-    </button>
-    <button
-      class="p-0 border-0 size-8 grid place-content-center"
-      @click="toggleMute"
-    >
-      <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
-      <Icon v-else class="size-4" icon="i-lucide-volume-2" />
-    </button>
-    <button
-      class="p-0 border-0 size-8 grid place-content-center"
-      @click="downloadAudio"
-    >
-      <Icon class="size-4" icon="i-lucide-download" />
-    </button>
   </div>
 </template>

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

@@ -235,6 +235,12 @@ const menuItems = computed(() => {
           ),
           activeOn: ['contacts_dashboard_index', 'contacts_edit'],
         },
+        {
+          name: 'Active',
+          label: t('SIDEBAR.ACTIVE'),
+          to: accountScopedRoute('contacts_dashboard_active'),
+          activeOn: ['contacts_dashboard_active'],
+        },
         {
           name: 'Segments',
           icon: 'i-lucide-group',
@@ -477,7 +483,7 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    class="w-[12.5rem] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">

app/javascript/dashboard/components/ChatList.vue

@@ -22,6 +22,7 @@ import {
 // https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import ChatListHeader from './ChatListHeader.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ConversationFilter from 'next/filter/ConversationFilter.vue';
 import SaveCustomView from 'next/filter/SaveCustomView.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
@@ -82,6 +83,7 @@ const emit = defineEmits(['conversationLoad']);
 const { uiSettings } = useUISettings();
 const { t } = useI18n();
 const router = useRouter();
+const route = useRoute();
 const store = useStore();
 
 const conversationListRef = ref(null);
@@ -646,6 +648,30 @@ function openLastItemAfterDeleteInFolder() {
   }
 }
 
+function redirectToConversationList() {
+  const {
+    params: { accountId, inbox_id: inboxId, label, teamId },
+    name,
+  } = route;
+
+  let conversationType = '';
+  if (isOnMentionsView({ route: { name } })) {
+    conversationType = 'mention';
+  } else if (isOnUnattendedView({ route: { name } })) {
+    conversationType = 'unattended';
+  }
+  router.push(
+    conversationListPageURL({
+      accountId,
+      conversationType: conversationType,
+      customViewId: props.foldersId,
+      inboxId,
+      label,
+      teamId,
+    })
+  );
+}
+
 async function assignPriority(priority, conversationId = null) {
   store.dispatch('setCurrentChatPriority', {
     priority,
@@ -670,26 +696,7 @@ async function markAsUnread(conversationId) {
     await store.dispatch('markMessagesUnread', {
       id: conversationId,
     });
-    const {
-      params: { accountId, inbox_id: inboxId, label, teamId },
-      name,
-    } = useRoute();
-    let conversationType = '';
-    if (isOnMentionsView({ route: { name } })) {
-      conversationType = 'mention';
-    } else if (isOnUnattendedView({ route: { name } })) {
-      conversationType = 'unattended';
-    }
-    router.push(
-      conversationListPageURL({
-        accountId,
-        conversationType: conversationType,
-        customViewId: props.foldersId,
-        inboxId,
-        label,
-        teamId,
-      })
-    );
+    redirectToConversationList();
   } catch (error) {
     // Ignore error
   }
@@ -703,6 +710,7 @@ async function markAsRead(conversationId) {
     // Ignore error
   }
 }
+
 async function onAssignTeam(team, conversationId = null) {
   try {
     await store.dispatch('assignTeam', {
@@ -764,6 +772,26 @@ onMounted(() => {
   }
 });
 
+const deleteConversationDialogRef = ref(null);
+const selectedConversationId = ref(null);
+
+async function deleteConversation() {
+  try {
+    await store.dispatch('deleteConversation', selectedConversationId.value);
+    redirectToConversationList();
+    selectedConversationId.value = null;
+    deleteConversationDialogRef.value.close();
+    useAlert(t('CONVERSATION.SUCCESS_DELETE_CONVERSATION'));
+  } catch (error) {
+    useAlert(t('CONVERSATION.FAIL_DELETE_CONVERSATION'));
+  }
+}
+
+const handleDelete = conversationId => {
+  selectedConversationId.value = conversationId;
+  deleteConversationDialogRef.value.open();
+};
+
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);
@@ -775,6 +803,7 @@ provide('markAsUnread', markAsUnread);
 provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
 provide('isConversationSelected', isConversationSelected);
+provide('deleteConversation', handleDelete);
 
 watch(activeTeam, () => resetAndFetchData());
 
@@ -938,6 +967,19 @@ watch(conversationFilters, (newVal, oldVal) => {
         </template>
       </DynamicScroller>
     </div>
+    <Dialog
+      ref="deleteConversationDialogRef"
+      type="alert"
+      :title="
+        $t('CONVERSATION.DELETE_CONVERSATION.TITLE', {
+          conversationId: selectedConversationId,
+        })
+      "
+      :description="$t('CONVERSATION.DELETE_CONVERSATION.DESCRIPTION')"
+      :confirm-button-label="$t('CONVERSATION.DELETE_CONVERSATION.CONFIRM')"
+      @confirm="deleteConversation"
+      @close="selectedConversationId = null"
+    />
     <TeleportWithDirection
       v-if="showAdvancedFilters"
       to="#conversationFilterTeleportTarget"

app/javascript/dashboard/components/ConversationItem.vue

@@ -16,6 +16,7 @@ export default {
     'markAsRead',
     'assignPriority',
     'isConversationSelected',
+    'deleteConversation',
   ],
   props: {
     source: {
@@ -67,5 +68,6 @@ export default {
     @mark-as-unread="markAsUnread"
     @mark-as-read="markAsRead"
     @assign-priority="assignPriority"
+    @delete-conversation="deleteConversation"
   />
 </template>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -134,7 +134,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 <template>
   <div class="relative flex items-center justify-end resolve-actions">
     <div
-      class="rounded-lg shadow outline-1 outline"
+      class="rounded-lg shadow outline-1 outline flex-shrink-0"
       :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
     >
       <Button
@@ -178,7 +178,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 ltr:right-0 rtl:left-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem]"
     >
       <WootDropdownMenu class="mb-0">
         <WootDropdownItem v-if="!isPending">

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

@@ -1,16 +1,11 @@
 <script setup>
-import { ref, computed, onMounted, watchEffect } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
-import ConversationAPI from 'dashboard/api/inbox/conversation';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-
-const props = defineProps({
-  conversationId: {
-    type: [Number, String],
-    required: true,
-  },
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+defineProps({
   conversationInboxType: {
     type: String,
     required: true,
@@ -20,12 +15,24 @@ const props = defineProps({
 const store = useStore();
 const currentUser = useMapGetter('getCurrentUser');
 const assistants = useMapGetter('captainAssistants/getRecords');
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
-const { uiSettings, updateUISettings } = useUISettings();
+const currentChat = useMapGetter('getSelectedChat');
+
+const selectedCopilotThreadId = ref(null);
+const messages = computed(() =>
+  store.getters['copilotMessages/getMessagesByThreadId'](
+    selectedCopilotThreadId.value
+  )
+);
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
 
-const messages = ref([]);
-const isCaptainTyping = ref(false);
 const selectedAssistantId = ref(null);
+const { uiSettings, updateUISettings } = useUISettings();
 
 const activeAssistant = computed(() => {
   const preferredId = uiSettings.value.preferred_captain_assistant_id;
@@ -55,68 +62,57 @@ const setAssistant = async assistant => {
   });
 };
 
+const shouldShowCopilotPanel = computed(() => {
+  const isCaptainEnabled = isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CAPTAIN
+  );
+  const { is_copilot_panel_open: isCopilotPanelOpen } = uiSettings.value;
+  return isCaptainEnabled && isCopilotPanelOpen && !uiFlags.value.fetchingList;
+});
+
 const handleReset = () => {
-  messages.value = [];
+  selectedCopilotThreadId.value = null;
 };
 
 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 ConversationAPI.requestCopilot(
-      props.conversationId,
-      {
-        previous_history: messages.value
-          .map(m => ({
-            role: m.role,
-            content: m.content,
-          }))
-          .slice(0, -1),
-        message,
-        assistant_id: selectedAssistantId.value,
-      }
-    );
-    messages.value.push({
-      id: new Date().getTime(),
-      role: 'assistant',
-      content: data.message,
+  if (selectedCopilotThreadId.value) {
+    await store.dispatch('copilotMessages/create', {
+      assistant_id: activeAssistant.value.id,
+      conversation_id: currentChat.value?.id,
+      threadId: selectedCopilotThreadId.value,
+      message,
     });
-  } catch (error) {
-    // eslint-disable-next-line
-    console.log(error);
-  } finally {
-    isCaptainTyping.value = false;
+  } else {
+    const response = await store.dispatch('copilotThreads/create', {
+      assistant_id: activeAssistant.value.id,
+      conversation_id: currentChat.value?.id,
+      message,
+    });
+    selectedCopilotThreadId.value = response.id;
   }
 };
 
 onMounted(() => {
   store.dispatch('captainAssistants/get');
 });
-
-watchEffect(() => {
-  if (props.conversationId) {
-    store.dispatch('getInboxCaptainAssistantById', props.conversationId);
-    selectedAssistantId.value = activeAssistant.value?.id;
-  }
-});
 </script>
 
 <template>
-  <Copilot
-    :messages="messages"
-    :support-agent="currentUser"
-    :is-captain-typing="isCaptainTyping"
-    :conversation-inbox-type="conversationInboxType"
-    :assistants="assistants"
-    :active-assistant="activeAssistant"
-    @set-assistant="setAssistant"
-    @send-message="sendMessage"
-    @reset="handleReset"
-  />
+  <div
+    v-if="shouldShowCopilotPanel"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
+  >
+    <Copilot
+      :messages="messages"
+      :support-agent="currentUser"
+      :conversation-inbox-type="conversationInboxType"
+      :assistants="assistants"
+      :active-assistant="activeAssistant"
+      @set-assistant="setAssistant"
+      @send-message="sendMessage"
+      @reset="handleReset"
+    />
+  </div>
+  <template v-else />
 </template>

app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js

@@ -9,6 +9,7 @@ const contacts = accountId => ({
     'contacts_edit',
     'contacts_edit_segment',
     'contacts_edit_label',
+    'contacts_dashboard_active',
   ],
   menuItems: [
     {
@@ -18,6 +19,13 @@ const contacts = accountId => ({
       toState: frontendURL(`accounts/${accountId}/contacts?page=1`),
       toStateName: 'contacts_dashboard_index',
     },
+    {
+      icon: 'visitor-contacts',
+      label: 'ACTIVE',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/contacts/active`),
+      toStateName: 'contacts_dashboard_active',
+    },
   ],
 });
 

app/javascript/dashboard/components/widgets/UserAvatarWithName.vue

@@ -25,10 +25,7 @@ defineProps({
       :username="user.name"
       :status="user.availability_status"
     />
-    <span
-      class="my-0 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
-      :class="textClass"
-    >
+    <span class="my-0 truncate text-capitalize" :class="textClass">
       {{ user.name }}
     </span>
   </div>

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

@@ -99,7 +99,6 @@ export default {
     <ConversationHeader
       v-if="currentChat.id"
       :chat="currentChat"
-      :is-inbox-view="isInboxView"
       :show-back-button="isOnExpandedLayout && !isInboxView"
     />
     <woot-tabs

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

@@ -78,6 +78,7 @@ export default {
     'markAsRead',
     'assignPriority',
     'updateConversationStatus',
+    'deleteConversation',
   ],
   data() {
     return {
@@ -237,6 +238,10 @@ export default {
       this.$emit('assignPriority', priority, this.chat.id);
       this.closeContextMenu();
     },
+    async deleteConversation() {
+      this.$emit('deleteConversation', this.chat.id);
+      this.closeContextMenu();
+    },
   },
 };
 </script>
@@ -363,6 +368,7 @@ export default {
         @mark-as-unread="markAsUnread"
         @mark-as-read="markAsRead"
         @assign-priority="assignPriority"
+        @delete-conversation="deleteConversation"
       />
     </ContextMenu>
   </div>

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

@@ -1,7 +1,9 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Thumbnail from '../Thumbnail.vue';
@@ -11,176 +13,162 @@ import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Linear from './linear/index.vue';
+import { useInbox } from 'dashboard/composables/useInbox';
+import { useI18n } from 'vue-i18n';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+  showBackButton: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-export default {
-  components: {
-    BackButton,
-    InboxName,
-    MoreActions,
-    Thumbnail,
-    SLACardLabel,
-    Linear,
-    NextButton,
-  },
-  mixins: [inboxMixin],
-  props: {
-    chat: {
-      type: Object,
-      default: () => ({}),
-    },
-    showBackButton: {
-      type: Boolean,
-      default: false,
-    },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-      appIntegrations: 'integrations/getAppIntegrations',
-    }),
-    chatMetadata() {
-      return this.chat.meta;
-    },
-    backButtonUrl() {
-      const {
-        params: { accountId, inbox_id: inboxId, label, teamId },
-        name,
-      } = this.$route;
-      return conversationListPageURL({
-        accountId,
-        inboxId,
-        label,
-        teamId,
-        conversationType: name === 'conversation_mentions' ? 'mention' : '',
-      });
-    },
-    isHMACVerified() {
-      if (!this.isAWebWidgetInbox) {
-        return true;
-      }
-      return this.chatMetadata.hmac_verified;
-    },
-    currentContact() {
-      return this.$store.getters['contacts/getContact'](
-        this.chat.meta.sender.id
-      );
-    },
-    isSnoozed() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.SNOOZED;
-    },
-    snoozedDisplayText() {
-      const { snoozed_until: snoozedUntil } = this.currentChat;
-      if (snoozedUntil) {
-        return `${this.$t(
-          'CONVERSATION.HEADER.SNOOZED_UNTIL'
-        )} ${snoozedReopenTime(snoozedUntil)}`;
-      }
-      return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
-    },
-    inbox() {
-      const { inbox_id: inboxId } = this.chat;
-      return this.$store.getters['inboxes/getInbox'](inboxId);
-    },
-    hasMultipleInboxes() {
-      return this.$store.getters['inboxes/getInboxes'].length > 1;
-    },
-    hasSlaPolicyId() {
-      return this.chat?.sla_policy_id;
-    },
-    isLinearIntegrationEnabled() {
-      return this.appIntegrations.find(
-        integration => integration.id === 'linear' && !!integration.hooks.length
-      );
-    },
-    isLinearFeatureEnabled() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.LINEAR
-      );
-    },
-  },
-};
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const conversationHeader = ref(null);
+const { width } = useElementSize(conversationHeader);
+const { isAWebWidgetInbox } = useInbox();
+
+const currentChat = computed(() => store.getters.getSelectedChat);
+const accountId = computed(() => store.getters.getCurrentAccountId);
+const isFeatureEnabledonAccount = computed(
+  () => store.getters['accounts/isFeatureEnabledonAccount']
+);
+const appIntegrations = computed(
+  () => store.getters['integrations/getAppIntegrations']
+);
+
+const chatMetadata = computed(() => props.chat.meta);
+
+const backButtonUrl = computed(() => {
+  const {
+    params: { inbox_id: inboxId, label, teamId },
+    name,
+  } = route;
+  return conversationListPageURL({
+    accountId,
+    inboxId,
+    label,
+    teamId,
+    conversationType: name === 'conversation_mentions' ? 'mention' : '',
+  });
+});
+
+const isHMACVerified = computed(() => {
+  if (!isAWebWidgetInbox.value) {
+    return true;
+  }
+  return chatMetadata.value.hmac_verified;
+});
+
+const currentContact = computed(() =>
+  store.getters['contacts/getContact'](props.chat.meta.sender.id)
+);
+
+const isSnoozed = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
+);
+
+const snoozedDisplayText = computed(() => {
+  const { snoozed_until: snoozedUntil } = currentChat.value;
+  if (snoozedUntil) {
+    return `${t('CONVERSATION.HEADER.SNOOZED_UNTIL')} ${snoozedReopenTime(snoozedUntil)}`;
+  }
+  return t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
+});
+
+const inbox = computed(() => {
+  const { inbox_id: inboxId } = props.chat;
+  return store.getters['inboxes/getInbox'](inboxId);
+});
+
+const hasMultipleInboxes = computed(
+  () => store.getters['inboxes/getInboxes'].length > 1
+);
+
+const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+
+const isLinearIntegrationEnabled = computed(() =>
+  appIntegrations.value.find(
+    integration => integration.id === 'linear' && !!integration.hooks.length
+  )
+);
+
+const isLinearFeatureEnabled = computed(() =>
+  isFeatureEnabledonAccount.value(accountId.value, FEATURE_FLAGS.LINEAR)
+);
 </script>
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-3 py-2 border-b bg-n-background border-n-weak md:flex-row h-12"
+    ref="conversationHeader"
+    class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
   >
     <div
-      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
-      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
+      class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0 xl:flex-1"
     >
-      <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
-        <BackButton
-          v-if="showBackButton"
-          :back-url="backButtonUrl"
-          class="ltr:mr-2 rtl:ml-2"
-        />
-        <Thumbnail
-          :src="currentContact.thumbnail"
-          :badge="inboxBadge"
-          :username="currentContact.name"
-          :status="currentContact.availability_status"
-          size="32px"
-        />
-        <div
-          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
-        >
-          <div
-            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
+      <BackButton
+        v-if="showBackButton"
+        :back-url="backButtonUrl"
+        class="ltr:mr-2 rtl:ml-2"
+      />
+      <Thumbnail
+        :src="currentContact.thumbnail"
+        :username="currentContact.name"
+        :status="currentContact.availability_status"
+        size="32px"
+        class="flex-shrink-0"
+      />
+      <div
+        class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"
+      >
+        <div class="flex flex-row items-center max-w-full gap-1 p-0 m-0">
+          <span
+            class="text-sm font-medium truncate leading-tight text-n-slate-12"
           >
-            <NextButton link slate>
-              <span
-                class="text-sm font-medium truncate leading-tight text-n-slate-12"
-              >
-                {{ currentContact.name }}
-              </span>
-            </NextButton>
-            <fluent-icon
-              v-if="!isHMACVerified"
-              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-              size="14"
-              class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
-              icon="warning"
-            />
-          </div>
+            {{ currentContact.name }}
+          </span>
+          <fluent-icon
+            v-if="!isHMACVerified"
+            v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+            size="14"
+            class="text-n-amber-10 my-0 mx-0 min-w-[14px] flex-shrink-0"
+            icon="warning"
+          />
+        </div>
 
-          <div
-            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
-          >
-            <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
-            <span v-if="isSnoozed" class="font-medium text-n-amber-10">
-              {{ snoozedDisplayText }}
-            </span>
-          </div>
+        <div
+          class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
+        >
+          <InboxName v-if="hasMultipleInboxes" :inbox="inbox" class="!mx-0" />
+          <span v-if="isSnoozed" class="font-medium text-n-amber-10">
+            {{ snoozedDisplayText }}
+          </span>
         </div>
       </div>
-      <div
-        class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
-      >
-        <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
-        <Linear
-          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
-          :conversation-id="currentChat.id"
-        />
-        <MoreActions :conversation-id="currentChat.id" />
-      </div>
+    </div>
+    <div
+      class="flex flex-row items-center justify-start xl:justify-end flex-shrink-0 gap-2 w-full xl:w-auto header-actions-wrap"
+    >
+      <SLACardLabel
+        v-if="hasSlaPolicyId"
+        :chat="chat"
+        show-extended-info
+        :parent-width="width"
+        class="hidden md:flex"
+      />
+      <Linear
+        v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
+        :conversation-id="currentChat.id"
+        :parent-width="width"
+        class="hidden md:flex"
+      />
+      <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.conversation--header--actions {
-  ::v-deep .inbox--name {
-    @apply m-0;
-  }
-}
-</style>

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

@@ -1,50 +1,30 @@
 <script setup>
 import { computed } from 'vue';
-import CopilotContainer from '../../copilot/CopilotContainer.vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { FEATURE_FLAGS } from '../../../featureFlags';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 
-const props = defineProps({
+defineProps({
   currentChat: {
     required: true,
     type: Object,
   },
 });
 
-const channelType = computed(() => props.currentChat?.meta?.channel || '');
-
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const showCopilotTab = computed(() =>
-  isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
-);
-
 const { uiSettings } = useUISettings();
 
 const activeTab = computed(() => {
-  const {
-    is_contact_sidebar_open: isContactSidebarOpen,
-    is_copilot_panel_open: isCopilotPanelOpen,
-  } = uiSettings.value;
+  const { is_contact_sidebar_open: isContactSidebarOpen } = uiSettings.value;
 
   if (isContactSidebarOpen) {
     return 0;
   }
-  if (isCopilotPanelOpen) {
-    return 1;
-  }
   return null;
 });
 </script>
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-80 min-w-80 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
   >
     <div class="flex flex-1 overflow-auto">
       <ContactPanel
@@ -52,13 +32,6 @@ const activeTab = computed(() => {
         :conversation-id="currentChat.id"
         :inbox-id="currentChat.inbox_id"
       />
-      <CopilotContainer
-        v-show="activeTab === 1 && showCopilotTab"
-        :key="currentChat.id"
-        :conversation-inbox-type="channelType"
-        :conversation-id="currentChat.id"
-        class="flex-1"
-      />
     </div>
   </div>
 </template>

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

@@ -1,10 +1,14 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { computed, onUnmounted } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useStore } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
 import { emitter } from 'shared/helpers/mitt';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
 import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
 import {
   CMD_MUTE_CONVERSATION,
@@ -12,97 +16,111 @@ import {
   CMD_UNMUTE_CONVERSATION,
 } from 'dashboard/helper/commandbar/events';
 
-export default {
-  components: {
-    EmailTranscriptModal,
-    ResolveAction,
-    ButtonV4,
-  },
-  data() {
-    return {
-      showEmailActionsModal: false,
-    };
-  },
-  computed: {
-    ...mapGetters({ currentChat: 'getSelectedChat' }),
-  },
-  mounted() {
-    emitter.on(CMD_MUTE_CONVERSATION, this.mute);
-    emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
-    emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-  },
-  unmounted() {
-    emitter.off(CMD_MUTE_CONVERSATION, this.mute);
-    emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
-    emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-  },
-  methods: {
-    mute() {
-      this.$store.dispatch('muteConversation', this.currentChat.id);
-      useAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
-    },
-    unmute() {
-      this.$store.dispatch('unmuteConversation', this.currentChat.id);
-      useAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
-    },
-    toggleEmailActionsModal() {
-      this.showEmailActionsModal = !this.showEmailActionsModal;
-    },
-  },
+// No props needed as we're getting currentChat from the store directly
+const store = useStore();
+const { t } = useI18n();
+
+const [showEmailActionsModal, toggleEmailModal] = useToggle(false);
+const [showActionsDropdown, toggleDropdown] = useToggle(false);
+
+const currentChat = computed(() => store.getters.getSelectedChat);
+
+const actionMenuItems = computed(() => {
+  const items = [];
+
+  if (!currentChat.value.muted) {
+    items.push({
+      icon: 'i-lucide-volume-off',
+      label: t('CONTACT_PANEL.MUTE_CONTACT'),
+      action: 'mute',
+      value: 'mute',
+    });
+  } else {
+    items.push({
+      icon: 'i-lucide-volume-1',
+      label: t('CONTACT_PANEL.UNMUTE_CONTACT'),
+      action: 'unmute',
+      value: 'unmute',
+    });
+  }
+
+  items.push({
+    icon: 'i-lucide-share',
+    label: t('CONTACT_PANEL.SEND_TRANSCRIPT'),
+    action: 'send_transcript',
+    value: 'send_transcript',
+  });
+
+  return items;
+});
+
+const handleActionClick = ({ action }) => {
+  toggleDropdown(false);
+
+  if (action === 'mute') {
+    store.dispatch('muteConversation', currentChat.value.id);
+    useAlert(t('CONTACT_PANEL.MUTED_SUCCESS'));
+  } else if (action === 'unmute') {
+    store.dispatch('unmuteConversation', currentChat.value.id);
+    useAlert(t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+  } else if (action === 'send_transcript') {
+    toggleEmailModal();
+  }
 };
+
+// These functions are needed for the event listeners
+const mute = () => {
+  store.dispatch('muteConversation', currentChat.value.id);
+  useAlert(t('CONTACT_PANEL.MUTED_SUCCESS'));
+};
+
+const unmute = () => {
+  store.dispatch('unmuteConversation', currentChat.value.id);
+  useAlert(t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+};
+
+emitter.on(CMD_MUTE_CONVERSATION, mute);
+emitter.on(CMD_UNMUTE_CONVERSATION, unmute);
+emitter.on(CMD_SEND_TRANSCRIPT, toggleEmailModal);
+
+onUnmounted(() => {
+  emitter.off(CMD_MUTE_CONVERSATION, mute);
+  emitter.off(CMD_UNMUTE_CONVERSATION, unmute);
+  emitter.off(CMD_SEND_TRANSCRIPT, toggleEmailModal);
+});
 </script>
 
 <template>
   <div class="relative flex items-center gap-2 actions--container">
-    <ButtonV4
-      v-if="!currentChat.muted"
-      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-volume-off"
-      @click="mute"
-    />
-    <ButtonV4
-      v-else
-      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-volume-1"
-      @click="unmute"
-    />
-    <ButtonV4
-      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-share"
-      @click="toggleEmailActionsModal"
-    />
     <ResolveAction
       :conversation-id="currentChat.id"
       :status="currentChat.status"
     />
+    <div
+      v-on-clickaway="() => toggleDropdown(false)"
+      class="relative flex items-center group"
+    >
+      <ButtonV4
+        v-tooltip="$t('CONVERSATION.HEADER.MORE_ACTIONS')"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        icon="i-lucide-more-vertical"
+        class="rounded-md group-hover:bg-n-alpha-2"
+        @click="toggleDropdown()"
+      />
+      <DropdownMenu
+        v-if="showActionsDropdown"
+        :menu-items="actionMenuItems"
+        class="mt-1 ltr:right-0 rtl:left-0 top-full"
+        @action="handleActionClick"
+      />
+    </div>
     <EmailTranscriptModal
       v-if="showEmailActionsModal"
       :show="showEmailActionsModal"
       :current-chat="currentChat"
-      @cancel="toggleEmailActionsModal"
+      @cancel="toggleEmailModal"
     />
   </div>
 </template>
-
-<style scoped lang="scss">
-.more--button {
-  @apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
-}
-
-.dropdown-pane {
-  @apply -right-2 top-12;
-}
-
-.icon {
-  @apply mr-1 rtl:mr-0 rtl:ml-1 min-w-[1rem];
-}
-</style>

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

@@ -1,132 +1,115 @@
-<script>
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { evaluateSLAStatus } from '@chatwoot/utils';
 import SLAPopoverCard from './SLAPopoverCard.vue';
 
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+  showExtendedInfo: {
+    type: Boolean,
+    default: false,
+  },
+  parentWidth: {
+    type: Number,
+    default: 1000,
+  },
+});
+
 const REFRESH_INTERVAL = 60000;
+const { t } = useI18n();
 
-export default {
-  components: {
-    SLAPopoverCard,
-  },
-  props: {
-    chat: {
-      type: Object,
-      default: () => ({}),
-    },
-    showExtendedInfo: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      timer: null,
-      showSlaPopover: false,
-      slaStatus: {
-        threshold: null,
-        isSlaMissed: false,
-        type: null,
-        icon: null,
-      },
-    };
-  },
-  computed: {
-    slaPolicyId() {
-      return this.chat?.sla_policy_id;
-    },
-    appliedSLA() {
-      return this.chat?.applied_sla;
-    },
-    slaEvents() {
-      return this.chat?.sla_events;
-    },
-    hasSlaThreshold() {
-      return this.slaStatus?.threshold;
-    },
-    isSlaMissed() {
-      return this.slaStatus?.isSlaMissed;
-    },
-    slaTextStyles() {
-      return this.isSlaMissed ? 'text-n-ruby-11' : 'text-n-amber-11';
-    },
-    slaStatusText() {
-      const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
-      const statusKey = this.isSlaMissed ? 'MISSED' : 'DUE';
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
 
-      return this.$t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
-        status: this.$t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
-      });
-    },
-    showSlaPopoverCard() {
-      return (
-        this.showExtendedInfo && this.showSlaPopover && this.slaEvents.length
-      );
-    },
-  },
-  watch: {
-    chat() {
-      this.updateSlaStatus();
-    },
-  },
-  mounted() {
-    this.updateSlaStatus();
-    this.createTimer();
-  },
-  unmounted() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-  },
-  methods: {
-    createTimer() {
-      this.timer = setTimeout(() => {
-        this.updateSlaStatus();
-        this.createTimer();
-      }, REFRESH_INTERVAL);
-    },
-    updateSlaStatus() {
-      this.slaStatus = evaluateSLAStatus({
-        appliedSla: this.appliedSLA,
-        chat: this.chat,
-      });
-    },
-    openSlaPopover() {
-      if (!this.showExtendedInfo) return;
-      this.showSlaPopover = true;
-    },
-    closeSlaPopover() {
-      this.showSlaPopover = false;
-    },
-  },
+const appliedSLA = computed(() => props.chat?.applied_sla);
+const slaEvents = computed(() => props.chat?.sla_events);
+const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+const slaTextStyles = computed(() =>
+  isSlaMissed.value ? 'text-n-ruby-11' : 'text-n-amber-11'
+);
+
+const slaStatusText = computed(() => {
+  const upperCaseType = slaStatus.value?.type?.toUpperCase(); // FRT, NRT, or RT
+  const statusKey = isSlaMissed.value ? 'MISSED' : 'DUE';
+
+  return t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
+    status: t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
+  });
+});
+
+const showSlaPopoverCard = computed(
+  () => props.showExtendedInfo && slaEvents.value?.length > 0
+);
+
+const groupClass = computed(() => {
+  return props.showExtendedInfo
+    ? 'h-[26px] rounded-lg bg-n-alpha-1'
+    : 'rounded h-5  border border-n-strong';
+});
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: appliedSLA.value,
+    chat: props.chat,
+  });
 };
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+watch(
+  () => props.chat,
+  () => {
+    updateSlaStatus();
+  }
+);
+
+const slaPopoverClass = computed(() => {
+  return props.showExtendedInfo
+    ? 'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
+    : '';
+});
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
 </script>
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
     v-if="hasSlaThreshold"
-    class="relative flex items-center cursor-pointer min-w-fit"
-    :class="
-      showExtendedInfo
-        ? 'h-[26px] rounded-lg bg-n-alpha-1'
-        : 'rounded h-5  border border-n-strong'
-    "
+    class="relative flex items-center cursor-pointer min-w-fit group"
+    :class="groupClass"
   >
     <div
-      v-on-clickaway="closeSlaPopover"
-      class="flex items-center w-full truncate"
-      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
-      @mouseover="openSlaPopover()"
+      class="flex items-center w-full truncate px-1.5"
+      :class="showExtendedInfo ? '' : 'gap-1'"
     >
-      <div
-        class="flex items-center gap-1"
-        :class="
-          showExtendedInfo &&
-          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
-        "
-      >
+      <div class="flex items-center gap-1" :class="slaPopoverClass">
         <fluent-icon
-          size="14"
+          size="12"
           :icon="slaStatus.icon"
           type="outline"
           :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
@@ -134,7 +117,7 @@ export default {
           :class="slaTextStyles"
         />
         <span
-          v-if="showExtendedInfo"
+          v-if="showExtendedInfo && parentWidth > 650"
           class="text-xs font-medium"
           :class="slaTextStyles"
         >
@@ -151,7 +134,7 @@ export default {
     <SLAPopoverCard
       v-if="showSlaPopoverCard"
       :sla-missed-events="slaEvents"
-      class="right-0 top-7"
+      class="start-0 xl:start-auto xl:end-0 top-7 hidden group-hover:flex"
     />
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -8,6 +8,7 @@ import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
+import { useAdmin } from 'dashboard/composables/useAdmin';
 
 export default {
   components: {
@@ -45,7 +46,14 @@ export default {
     'assignAgent',
     'assignTeam',
     'assignLabel',
+    'deleteConversation',
   ],
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
   data() {
     return {
       STATUS_TYPE: wootConstants.STATUS_TYPE,
@@ -121,6 +129,11 @@ export default {
         icon: 'people-team-add',
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.ASSIGN_TEAM'),
       },
+      deleteOption: {
+        key: 'delete',
+        icon: 'delete',
+        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.DELETE'),
+      },
     };
   },
   computed: {
@@ -178,6 +191,9 @@ export default {
     assignPriority(priority) {
       this.$emit('assignPriority', priority);
     },
+    deleteConversation() {
+      this.$emit('deleteConversation', this.chatId);
+    },
     show(key) {
       // If the conversation status is same as the action, then don't display the option
       // i.e.: Don't show an option to resolve if the conversation is already resolved.
@@ -277,5 +293,13 @@ export default {
         @click.stop="$emit('assignTeam', team)"
       />
     </MenuItemWithSubmenu>
+    <template v-if="isAdmin">
+      <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
+      <MenuItem
+        :option="deleteOption"
+        variant="icon"
+        @click.stop="deleteConversation"
+      />
+    </template>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: [Number, String],
     required: true,
   },
+  parentWidth: {
+    type: Number,
+    default: 10000,
+  },
 });
 
 defineOptions({
@@ -73,6 +77,14 @@ const unlinkIssue = async linkId => {
   }
 };
 
+const shouldShowIssueIdentifier = computed(() => {
+  if (!linkedIssue.value) {
+    return false;
+  }
+
+  return props.parentWidth > 600;
+});
+
 const openIssue = () => {
   if (!linkedIssue.value) shouldShowPopup.value = true;
   shouldShow.value = true;
@@ -119,7 +131,10 @@ onMounted(() => {
         class="text-[#5E6AD2] flex-shrink-0"
         view-box="0 0 19 19"
       />
-      <span v-if="linkedIssue" class="text-xs font-medium text-n-slate-11">
+      <span
+        v-if="shouldShowIssueIdentifier"
+        class="text-xs font-medium text-n-slate-11"
+      >
         {{ linkedIssue.issue.identifier }}
       </span>
     </Button>
@@ -127,7 +142,7 @@ onMounted(() => {
       v-if="linkedIssue"
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
-      class="absolute right-0 top-[36px] invisible group-hover:visible"
+      class="absolute start-0 xl:start-auto xl:end-0 top-9 invisible group-hover:visible"
       @unlink-issue="unlinkIssue"
     />
     <woot-modal

app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js

@@ -1,110 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import MoreActions from '../MoreActions.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
-vi.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    emit: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
-  },
-}));
-
-const mockDirective = {
-  mounted: () => {},
-};
-
-import { emitter } from 'shared/helpers/mitt';
-
-describe('MoveActions', () => {
-  let currentChat = { id: 8, muted: false };
-  let store = null;
-  let muteConversation = null;
-  let unmuteConversation = null;
-
-  beforeEach(() => {
-    muteConversation = vi.fn(() => Promise.resolve());
-    unmuteConversation = vi.fn(() => Promise.resolve());
-
-    store = createStore({
-      state: {
-        authenticated: true,
-        currentChat,
-      },
-      getters: {
-        getSelectedChat: () => currentChat,
-      },
-      modules: {
-        conversations: {
-          namespaced: false,
-          actions: { muteConversation, unmuteConversation },
-        },
-      },
-    });
-  });
-
-  const createWrapper = () =>
-    mount(MoreActions, {
-      global: {
-        plugins: [store],
-        components: {
-          'fluent-icon': FluentIcon,
-        },
-        directives: {
-          'on-clickaway': mockDirective,
-        },
-      },
-    });
-
-  describe('muting discussion', () => {
-    it('triggers "muteConversation"', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(muteConversation).toHaveBeenCalledTimes(1);
-      expect(muteConversation).toHaveBeenCalledWith(
-        expect.any(Object), // First argument is the Vuex context object
-        currentChat.id // Second argument is the ID of the conversation
-      );
-    });
-
-    it('shows alert', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(emitter.emit).toBeCalledWith('newToastMessage', {
-        message:
-          'This contact is blocked successfully. You will not be notified of any future conversations.',
-        action: null,
-      });
-    });
-  });
-
-  describe('unmuting discussion', () => {
-    beforeEach(() => {
-      currentChat.muted = true;
-    });
-
-    it('triggers "unmuteConversation"', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(unmuteConversation).toHaveBeenCalledTimes(1);
-      expect(unmuteConversation).toHaveBeenCalledWith(
-        expect.any(Object), // First argument is the Vuex context object
-        currentChat.id // Second argument is the ID of the conversation
-      );
-    });
-
-    it('shows alert', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(emitter.emit).toBeCalledWith('newToastMessage', {
-        message: 'This contact is unblocked successfully.',
-        action: null,
-      });
-    });
-  });
-});

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

@@ -43,7 +43,7 @@ describe('useFontSize', () => {
 
   it('returns fontSizeOptions with correct structure', () => {
     const { fontSizeOptions } = useFontSize();
-    expect(fontSizeOptions).toHaveLength(6);
+    expect(fontSizeOptions).toHaveLength(5);
     expect(fontSizeOptions[0]).toHaveProperty('value');
     expect(fontSizeOptions[0]).toHaveProperty('label');
 
@@ -59,12 +59,6 @@ describe('useFontSize', () => {
       label:
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER',
     });
-
-    expect(fontSizeOptions.find(option => option.value === '22px')).toEqual({
-      value: '22px',
-      label:
-        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE',
-    });
   });
 
   it('returns currentFontSize from UI settings', () => {
@@ -84,9 +78,6 @@ describe('useFontSize', () => {
     applyFontSize('14px');
     expect(document.documentElement.style.fontSize).toBe('14px');
 
-    applyFontSize('22px');
-    expect(document.documentElement.style.fontSize).toBe('22px');
-
     applyFontSize('16px');
     expect(document.documentElement.style.fontSize).toBe('16px');
   });
@@ -145,8 +136,6 @@ describe('useFontSize', () => {
           'Smaller',
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT':
           'Default',
-        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE':
-          'Extra Large',
       };
       return translations[key] || key;
     });
@@ -160,9 +149,6 @@ describe('useFontSize', () => {
     expect(fontSizeOptions.find(option => option.value === '16px').label).toBe(
       'Default'
     );
-    expect(fontSizeOptions.find(option => option.value === '22px').label).toBe(
-      'Extra Large'
-    );
 
     // Verify translation function was called with correct keys
     expect(mockTranslate).toHaveBeenCalledWith(

app/javascript/dashboard/composables/useAccount.js

@@ -45,9 +45,10 @@ export function useAccount() {
     };
   };
 
-  const updateAccount = async data => {
+  const updateAccount = async (data, options) => {
     await store.dispatch('accounts/update', {
       ...data,
+      options,
     });
   };
 

app/javascript/dashboard/composables/useFontSize.js

@@ -19,7 +19,6 @@ const FONT_SIZE_OPTIONS = {
   DEFAULT: '16px',
   LARGE: '18px',
   LARGER: '20px',
-  EXTRA_LARGE: '22px',
 };
 
 /**

app/javascript/dashboard/constants/editor.js

@@ -33,6 +33,14 @@ export const ARTICLE_EDITOR_MENU_OPTIONS = [
   'code',
 ];
 
+export const WIDGET_BUILDER_EDITOR_MENU_OPTIONS = [
+  'strong',
+  'em',
+  'link',
+  'undo',
+  'redo',
+];
+
 export const MESSAGE_EDITOR_IMAGE_RESIZES = [
   {
     name: 'Small',

app/javascript/dashboard/helper/auditlogHelper.js

@@ -36,6 +36,7 @@ const translationKeys = {
   'teammember:create': `AUDIT_LOGS.TEAM_MEMBER.ADD`,
   'teammember:destroy': `AUDIT_LOGS.TEAM_MEMBER.REMOVE`,
   'account:update': `AUDIT_LOGS.ACCOUNT.EDIT`,
+  'conversation:destroy': `AUDIT_LOGS.CONVERSATION.DELETE`,
 };
 
 function extractAttrChange(attrChange) {
@@ -168,6 +169,11 @@ export function generateTranslationPayload(auditLogItem, agentList) {
   const auditableType = auditLogItem.auditable_type.toLowerCase();
   const action = auditLogItem.action.toLowerCase();
 
+  if (auditableType === 'conversation' && action === 'destroy') {
+    translationPayload.id =
+      auditLogItem.audited_changes?.display_id || auditLogItem.auditable_id;
+  }
+
   if (auditableType === 'accountuser') {
     translationPayload = handleAccountUser(
       auditLogItem,

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

@@ -69,6 +69,9 @@
     },
     "ACCOUNT": {
       "EDIT": "{agentName} updated the account configuration (#{id})"
+    },
+    "CONVERSATION": {
+      "DELETE": "{agentName} deleted conversation #{id}"
     }
   }
 }

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

@@ -286,6 +286,7 @@
     "HEADER": {
       "TITLE": "Contacts",
       "SEARCH_TITLE": "Search contacts",
+      "ACTIVE_TITLE": "Active contacts",
       "SEARCH_PLACEHOLDER": "Search...",
       "MESSAGE_BUTTON": "Message",
       "SEND_MESSAGE": "Send message",
@@ -560,7 +561,8 @@
       "SUBTITLE": "Start adding new contacts by clicking on the button below",
       "BUTTON_LABEL": "Add contact",
       "SEARCH_EMPTY_STATE_TITLE": "No contacts matches your search 🔍",
-      "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋"
+      "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋",
+      "ACTIVE_EMPTY_STATE_TITLE": "No contacts are active at the moment 🌙"
     }
   },
 

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

@@ -70,6 +70,7 @@
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",
       "OPEN_ACTION": "Open",
+      "MORE_ACTIONS": "More actions",
       "OPEN": "More",
       "CLOSE": "Close",
       "DETAILS": "details",
@@ -117,6 +118,11 @@
         "FAILED": "Couldn't change priority. Please try again."
       }
     },
+    "DELETE_CONVERSATION": {
+      "TITLE": "Delete conversation #{conversationId}",
+      "DESCRIPTION": "Are you sure you want to delete this conversation?",
+      "CONFIRM": "Delete"
+    },
     "CARD_CONTEXT_MENU": {
       "PENDING": "Mark as pending",
       "RESOLVED": "Mark as resolved",
@@ -133,6 +139,7 @@
       "ASSIGN_LABEL": "Assign label",
       "AGENTS_LOADING": "Loading agents...",
       "ASSIGN_TEAM": "Assign team",
+      "DELETE": "Delete conversation",
       "API": {
         "AGENT_ASSIGNMENT": {
           "SUCCESFUL": "Conversation id {conversationId} assigned to \"{agentName}\"",
@@ -207,6 +214,8 @@
     "ASSIGN_LABEL_SUCCESFUL": "Label assigned successfully",
     "ASSIGN_LABEL_FAILED": "Label assignment failed",
     "CHANGE_TEAM": "Conversation team changed",
+    "SUCCESS_DELETE_CONVERSATION": "Conversation deleted successfully",
+    "FAIL_DELETE_CONVERSATION": "Couldn't delete conversation! Try again",
     "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB attachment limit",
     "MESSAGE_ERROR": "Unable to send this message, please try again later",
     "SENT_BY": "Sent by:",

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

@@ -46,7 +46,31 @@
       },
       "AUTO_RESOLVE": {
         "TITLE": "Auto-resolve conversations",
-        "NOTE": "This configuration would allow you to automatically resolve the conversation after a certain period. Set the duration and customize the message to the user below."
+        "NOTE": "This configuration would allow you to automatically resolve the conversation after a certain period of inactivity.",
+        "DURATION": {
+          "LABEL": "Inactivity duration",
+          "HELP": "Time period of inactivity after which conversation is auto-resolved",
+          "PLACEHOLDER": "30",
+          "ERROR": "Auto resolve duration should be between 10 minutes and 999 days",
+          "API": {
+            "SUCCESS": "Auto resolve settings updated successfully",
+            "ERROR": "Failed to update auto resolve settings"
+          }
+        },
+        "MESSAGE": {
+          "LABEL": "Custom auto-resolution message",
+          "PLACEHOLDER": "Conversation was marked resolved by system due to 15 days of inactivity",
+          "HELP": "Message sent to the customer after conversation is auto-resolved"
+        },
+        "PREFERENCES": "Preferences",
+        "LABEL": {
+          "LABEL": "Add label after auto-resolution",
+          "PLACEHOLDER": "Select a label"
+        },
+        "IGNORE_WAITING": {
+          "LABEL": "Skip conversations waiting for agent’s reply"
+        },
+        "UPDATE_BUTTON": "Save Changes"
       },
       "NAME": {
         "LABEL": "Account name",
@@ -70,7 +94,15 @@
       },
       "AUTO_RESOLVE_IGNORE_WAITING": {
         "LABEL": "Exclude unattended conversations",
-        "HELP": "When enabled, the system will skip resolving conversations that are still waiting for an agent’s reply."
+        "HELP": "When enabled, the system will skip resolving conversations that are still waiting for an agent's reply."
+      },
+      "AUDIO_TRANSCRIPTION": {
+        "TITLE": "Transcribe Audio Messages",
+        "NOTE": "Automatically transcribe audio messages in conversations. Generate a text transcript whenever an audio message is sent or received, and display it alongside the message.",
+        "API": {
+          "SUCCESS": "Audio transcription setting updated successfully",
+          "ERROR": "Failed to update audio transcription setting"
+        }
       },
       "AUTO_RESOLVE_DURATION": {
         "LABEL": "Inactivity duration for resolution",

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

@@ -328,6 +328,9 @@
     "HEADER_KNOW_MORE": "Know more",
     "COPILOT": {
       "TITLE": "Copilot",
+      "TRY_THESE_PROMPTS": "Try these prompts",
+      "PANEL_TITLE": "Get started with Copilot",
+      "KICK_OFF_MESSAGE": "Need a quick summary, want to check past conversations, or draft a better reply? Copilot’s here to speed things up.",
       "SEND_MESSAGE": "Send message...",
       "EMPTY_MESSAGE": "There was an error generating the response. Please try again.",
       "LOADER": "Captain is thinking",
@@ -348,6 +351,14 @@
         "RATE": {
           "LABEL": "Rate this conversation",
           "CONTENT": "Review the conversation to see how well it meets the customer's needs. Share a rating out of 5 based on tone, clarity, and effectiveness."
+        },
+        "HIGH_PRIORITY": {
+          "LABEL": "High priority conversations",
+          "CONTENT": "Give me a summary of all high priority open conversations. Include the conversation ID, customer name (if available), last message content, and assigned agent. Group by status if relevant."
+        },
+        "LIST_CONTACTS": {
+          "LABEL": "List contacts",
+          "CONTENT": "Show me the list of top 10 contacts. Include name, email or phone number (if available), last seen time, tags (if any)."
         }
       }
     },
@@ -381,6 +392,7 @@
     },
     "ASSISTANTS": {
       "HEADER": "Assistants",
+      "NO_ASSISTANTS_AVAILABLE": "There are no assistants available in your account.",
       "ADD_NEW": "Create a new assistant",
       "DELETE": {
         "TITLE": "Are you sure to delete the assistant?",

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

@@ -286,6 +286,7 @@
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
+    "ACTIVE": "Active",
     "CAPTAIN": "Captain",
     "CAPTAIN_ASSISTANTS": "Assistants",
     "CAPTAIN_DOCUMENTS": "Documents",

app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 const props = defineProps({
   config: {
@@ -8,6 +9,8 @@ const props = defineProps({
   },
 });
 
+const { formatMessage } = useMessageFormatter();
+
 const isDefaultScreen = computed(() => {
   return (
     props.config.isDefaultScreen &&
@@ -53,12 +56,13 @@ const isDefaultScreen = computed(() => {
         </div>
       </div>
       <div v-if="isDefaultScreen" class="overflow-auto max-h-60">
-        <h2 class="mb-2 text-2xl break-words text-slate-900 dark:text-white">
+        <h2 class="mb-2 text-2xl break-words text-n-slate-12">
           {{ config.welcomeHeading }}
         </h2>
-        <p class="text-sm break-words text-slate-600 dark:text-slate-100">
-          {{ config.welcomeTagline }}
-        </p>
+        <p
+          v-dompurify-html="formatMessage(config.welcomeTagline)"
+          class="text-sm break-words text-n-slate-11 [&_a]:!text-n-slate-11 [&_a]:underline"
+        />
       </div>
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -25,6 +25,8 @@ const Sidebar = defineAsyncComponent(
   () => import('../../components/layout/Sidebar.vue')
 );
 import { emitter } from 'shared/helpers/mitt';
+import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
+import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';
 
 export default {
   components: {
@@ -37,6 +39,8 @@ export default {
     AddLabelModal,
     NotificationPanel,
     UpgradePage,
+    CopilotLauncher,
+    CopilotContainer,
   },
   setup() {
     const upgradePageRef = ref(null);
@@ -219,6 +223,9 @@ export default {
       <template v-if="!showUpgradePage">
         <router-view />
         <CommandBar />
+        <CopilotLauncher />
+        <CopilotContainer />
+
         <NotificationPanel
           v-if="isNotificationPanel"
           @close="closeNotificationPanel"

app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue

@@ -16,7 +16,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background px-6"
   >
     <router-view v-slot="{ Component }">
       <keep-alive v-if="keepAlive">

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

@@ -67,9 +67,11 @@ const hasContacts = computed(() => contacts.value.length > 0);
 const isContactIndexView = computed(
   () => route.name === 'contacts_dashboard_index' && pageNumber.value === 1
 );
+const isActiveView = computed(() => route.name === 'contacts_dashboard_active');
 const hasAppliedFilters = computed(() => {
   return appliedFilters.value.length > 0;
 });
+
 const showEmptyStateLayout = computed(() => {
   return (
     !searchQuery.value &&
@@ -89,11 +91,20 @@ const showEmptyText = computed(() => {
 
 const headerTitle = computed(() => {
   if (searchQuery.value) return t('CONTACTS_LAYOUT.HEADER.SEARCH_TITLE');
+  if (isActiveView.value) return t('CONTACTS_LAYOUT.HEADER.ACTIVE_TITLE');
   if (activeSegmentId.value) return activeSegment.value?.name;
   if (activeLabel.value) return `#${activeLabel.value}`;
   return t('CONTACTS_LAYOUT.HEADER.TITLE');
 });
 
+const emptyStateMessage = computed(() => {
+  if (isActiveView.value)
+    return t('CONTACTS_LAYOUT.EMPTY_STATE.ACTIVE_EMPTY_STATE_TITLE');
+  if (!searchQuery.value || hasAppliedFilters.value)
+    return t('CONTACTS_LAYOUT.EMPTY_STATE.LIST_EMPTY_STATE_TITLE');
+  return t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE');
+});
+
 const updatePageParam = (page, search = '') => {
   const query = {
     ...route.query,
@@ -132,6 +143,15 @@ const fetchSavedOrAppliedFilteredContact = async (payload, page = 1) => {
   updatePageParam(page);
 };
 
+const fetchActiveContacts = async (page = 1) => {
+  await store.dispatch('contacts/clearContactFilters');
+  await store.dispatch('contacts/active', {
+    page,
+    sortAttr: buildSortAttr(),
+  });
+  updatePageParam(page);
+};
+
 const searchContacts = debounce(async (value, page = 1) => {
   await store.dispatch('contacts/clearContactFilters');
   searchValue.value = value;
@@ -158,6 +178,11 @@ const fetchContactsBasedOnContext = async page => {
   }
   // Reset the search value when we change the view
   searchValue.value = '';
+  // If we're on the active route, fetch active contacts
+  if (isActiveView.value) {
+    await fetchActiveContacts(page);
+    return;
+  }
   // If there are applied filters or active segment with query
   if (
     (hasAppliedFilters.value || activeSegment.value?.query) &&
@@ -184,6 +209,11 @@ const handleSort = async ({ sort, order }) => {
     return;
   }
 
+  if (isActiveView.value) {
+    await fetchActiveContacts();
+    return;
+  }
+
   await (activeSegmentId.value || hasAppliedFilters.value
     ? fetchSavedOrAppliedFilteredContact(
         activeSegmentId.value
@@ -210,7 +240,7 @@ watch(
 );
 
 watch(
-  [activeLabel, activeSegment],
+  [activeLabel, activeSegment, isActiveView],
   () => {
     fetchContactsBasedOnContext(pageNumber.value);
   },
@@ -222,6 +252,13 @@ watch(searchQuery, value => {
   searchValue.value = value || '';
   // Reset the view if there is search query when we click on the sidebar group
   if (value === undefined) {
+    if (
+      isActiveView.value ||
+      activeLabel.value ||
+      activeSegment.value ||
+      hasAppliedFilters.value
+    )
+      return;
     fetchContacts();
   }
 });
@@ -232,6 +269,10 @@ onMounted(async () => {
       await searchContacts(searchQuery.value, pageNumber.value);
       return;
     }
+    if (isActiveView.value) {
+      await fetchActiveContacts(pageNumber.value);
+      return;
+    }
     await fetchContacts(pageNumber.value);
   } else if (activeSegment.value && activeSegmentId.value) {
     await fetchSavedOrAppliedFilteredContact(
@@ -286,11 +327,7 @@ onMounted(async () => {
           class="flex items-center justify-center py-10"
         >
           <span class="text-base text-n-slate-11">
-            {{
-              searchQuery || !hasAppliedFilters
-                ? t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE')
-                : t('CONTACTS_LAYOUT.EMPTY_STATE.LIST_EMPTY_STATE_TITLE')
-            }}
+            {{ emptyStateMessage }}
           </span>
         </div>
 

app/javascript/dashboard/routes/dashboard/contacts/routes.js

@@ -32,6 +32,12 @@ export const routes = [
         component: ContactsIndex,
         meta: commonMeta,
       },
+      {
+        path: 'active',
+        name: 'contacts_dashboard_active',
+        component: ContactsIndex,
+        meta: commonMeta,
+      },
     ],
   },
   {

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

@@ -97,11 +97,8 @@ export default {
         return false;
       }
 
-      const {
-        is_contact_sidebar_open: isContactSidebarOpen,
-        is_copilot_panel_open: isCopilotPanelOpen,
-      } = this.uiSettings;
-      return isContactSidebarOpen || isCopilotPanelOpen;
+      const { is_contact_sidebar_open: isContactSidebarOpen } = this.uiSettings;
+      return isContactSidebarOpen;
     },
     showPopOverSearch() {
       return !this.isFeatureEnabledonAccount(
@@ -208,7 +205,7 @@ export default {
 </script>
 
 <template>
-  <section class="flex w-full h-full">
+  <section class="flex w-full h-full min-w-0">
     <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -183,7 +183,6 @@ export default {
     </div>
     <div v-else class="flex flex-col w-full h-full">
       <InboxItemHeader
-        class="flex-1"
         :total-length="totalNotificationCount"
         :current-index="activeNotificationIndex"
         :active-notification="activeNotification"

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -109,7 +109,7 @@ export default {
 
 <template>
   <div
-    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-n-weak"
+    class="flex items-center justify-between w-full gap-2 border-b ltr:pl-4 rtl:pl-2 h-12 ltr:pr-2 rtl:pr-4 rtl:border-r border-n-weak"
   >
     <div class="flex items-center gap-4">
       <BackButton

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -16,6 +16,7 @@ import AccountId from './components/AccountId.vue';
 import BuildInfo from './components/BuildInfo.vue';
 import AccountDelete from './components/AccountDelete.vue';
 import AutoResolve from './components/AutoResolve.vue';
+import AudioTranscription from './components/AudioTranscription.vue';
 import SectionLayout from './components/SectionLayout.vue';
 
 export default {
@@ -26,6 +27,7 @@ export default {
     BuildInfo,
     AccountDelete,
     AutoResolve,
+    AudioTranscription,
     SectionLayout,
     WithLabel,
     NextInput,
@@ -235,6 +237,7 @@ export default {
       <woot-loading-state v-if="uiFlags.isFetchingItem" />
     </div>
     <AutoResolve v-if="showAutoResolutionConfig" />
+    <AudioTranscription v-if="isOnChatwootCloud" />
     <AccountId />
     <div v-if="!uiFlags.isFetchingItem && isOnChatwootCloud">
       <AccountDelete />

app/javascript/dashboard/routes/dashboard/settings/account/components/AudioTranscription.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useAlert } from 'dashboard/composables';
+import SectionLayout from './SectionLayout.vue';
+import Switch from 'next/switch/Switch.vue';
+
+const { t } = useI18n();
+const isEnabled = ref(false);
+
+const { currentAccount, updateAccount } = useAccount();
+
+watch(
+  currentAccount,
+  () => {
+    const { audio_transcriptions } = currentAccount.value?.settings || {};
+    isEnabled.value = !!audio_transcriptions;
+  },
+  { deep: true, immediate: true }
+);
+
+const updateAccountSettings = async settings => {
+  try {
+    await updateAccount(settings);
+    useAlert(t('GENERAL_SETTINGS.FORM.AUDIO_TRANSCRIPTION.API.SUCCESS'));
+  } catch (error) {
+    useAlert(t('GENERAL_SETTINGS.FORM.AUDIO_TRANSCRIPTION.API.ERROR'));
+  }
+};
+
+const toggleAudioTranscription = async () => {
+  return updateAccountSettings({
+    audio_transcriptions: isEnabled.value,
+  });
+};
+</script>
+
+<template>
+  <SectionLayout
+    :title="t('GENERAL_SETTINGS.FORM.AUDIO_TRANSCRIPTION.TITLE')"
+    :description="t('GENERAL_SETTINGS.FORM.AUDIO_TRANSCRIPTION.NOTE')"
+    with-border
+  >
+    <template #headerActions>
+      <div class="flex justify-end">
+        <Switch v-model="isEnabled" @change="toggleAudioTranscription" />
+      </div>
+    </template>
+  </SectionLayout>
+</template>

app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue

@@ -1,35 +1,78 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { h, ref, watch, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useAlert } from 'dashboard/composables';
 import SectionLayout from './SectionLayout.vue';
 import WithLabel from 'v3/components/Form/WithLabel.vue';
-import DurationInput from 'next/input/DurationInput.vue';
 import TextArea from 'next/textarea/TextArea.vue';
 import Switch from 'next/switch/Switch.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import DurationInput from 'next/input/DurationInput.vue';
+import SingleSelect from 'dashboard/components-next/filter/inputs/SingleSelect.vue';
+import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
 
 const { t } = useI18n();
 const duration = ref(0);
+const unit = ref(DURATION_UNITS.MINUTES);
 const message = ref('');
+const labelToApply = ref({});
 const ignoreWaiting = ref(false);
 const isEnabled = ref(false);
+const isSubmitting = ref(false);
 
 const { currentAccount, updateAccount } = useAccount();
 
+const labels = useMapGetter('labels/getLabels');
+
+const labelOptions = computed(() =>
+  labels.value?.length
+    ? labels.value.map(label => ({
+        id: label.title,
+        name: label.title,
+        icon: h('span', {
+          class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
+          style: { backgroundColor: label.color },
+        }),
+      }))
+    : []
+);
+
+const selectedLabelName = computed(() => {
+  return labelToApply.value?.name ?? null;
+});
+
 watch(
-  currentAccount,
+  [currentAccount, labelOptions],
   () => {
     const {
       auto_resolve_after,
       auto_resolve_message,
       auto_resolve_ignore_waiting,
+      auto_resolve_label,
     } = currentAccount.value?.settings || {};
 
     duration.value = auto_resolve_after;
     message.value = auto_resolve_message;
     ignoreWaiting.value = auto_resolve_ignore_waiting;
+    // find the correct label option from the list
+    // the single select component expects the full label object
+    // in our case, the label id and name are both the same
+    labelToApply.value = labelOptions.value.find(
+      option => option.name === auto_resolve_label
+    );
+
+    // Set unit based on duration and its divisibility
+    if (duration.value) {
+      if (duration.value % (24 * 60) === 0) {
+        unit.value = DURATION_UNITS.DAYS;
+      } else if (duration.value % 60 === 0) {
+        unit.value = DURATION_UNITS.HOURS;
+      } else {
+        unit.value = DURATION_UNITS.MINUTES;
+      }
+    }
 
     if (duration.value) {
       isEnabled.value = true;
@@ -40,16 +83,19 @@ watch(
 
 const updateAccountSettings = async settings => {
   try {
-    await updateAccount(settings);
-    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.API.SUCCESS'));
+    isSubmitting.value = true;
+    await updateAccount(settings, { silent: true });
+    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.API.SUCCESS'));
   } catch (error) {
-    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.API.ERROR'));
+    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.API.ERROR'));
+  } finally {
+    isSubmitting.value = false;
   }
 };
 
 const handleSubmit = async () => {
   if (duration.value < 10) {
-    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR'));
+    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.ERROR'));
     return Promise.resolve();
   }
 
@@ -57,6 +103,7 @@ const handleSubmit = async () => {
     auto_resolve_after: duration.value,
     auto_resolve_message: message.value,
     auto_resolve_ignore_waiting: ignoreWaiting.value,
+    auto_resolve_label: selectedLabelName.value,
   });
 };
 
@@ -68,6 +115,7 @@ const handleDisable = async () => {
     auto_resolve_after: null,
     auto_resolve_message: '',
     auto_resolve_ignore_waiting: false,
+    auto_resolve_label: null,
   });
 };
 
@@ -80,6 +128,7 @@ const toggleAutoResolve = async () => {
   <SectionLayout
     :title="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.TITLE')"
     :description="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.NOTE')"
+    :hide-content="!isEnabled"
     with-border
   >
     <template #headerActions>
@@ -90,50 +139,65 @@ const toggleAutoResolve = async () => {
 
     <form class="grid gap-5" @submit.prevent="handleSubmit">
       <WithLabel
-        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL')"
-        :help-message="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.HELP')"
+        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.LABEL')"
+        :help-message="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.DURATION.HELP')"
       >
         <div class="gap-2 w-full grid grid-cols-[3fr_1fr]">
           <!-- allow 10 mins to 999 days -->
           <DurationInput
             v-model="duration"
+            v-model:unit="unit"
             min="0"
-            max="1439856"
+            max="1438560"
             class="w-full"
           />
         </div>
       </WithLabel>
       <WithLabel
-        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.MESSAGE_LABEL')"
-        :help-message="
-          t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.MESSAGE_HELP')
-        "
+        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.MESSAGE.LABEL')"
+        :help-message="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.MESSAGE.HELP')"
       >
         <TextArea
           v-model="message"
           class="w-full"
           :placeholder="
-            t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.MESSAGE_PLACEHOLDER')
+            t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.MESSAGE.PLACEHOLDER')
           "
         />
       </WithLabel>
-      <WithLabel
-        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_IGNORE_WAITING.LABEL')"
-      >
-        <template #rightOfLabel>
-          <Switch v-model="ignoreWaiting" />
-        </template>
-        <p class="text-sm ml-px text-n-slate-10 max-w-lg">
-          {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_IGNORE_WAITING.HELP') }}
-        </p>
+      <WithLabel :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.PREFERENCES')">
+        <div
+          class="rounded-xl border border-n-weak bg-n-solid-1 w-full text-sm text-n-slate-12 divide-y divide-n-weak"
+        >
+          <div class="p-3 h-12 flex items-center justify-between">
+            <span>
+              {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.IGNORE_WAITING.LABEL') }}
+            </span>
+            <Switch v-model="ignoreWaiting" />
+          </div>
+          <div class="p-3 h-12 flex items-center justify-between">
+            <span>
+              {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.LABEL.LABEL') }}
+            </span>
+            <SingleSelect
+              v-model="labelToApply"
+              :options="labelOptions"
+              :placeholder="
+                $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.LABEL.PLACEHOLDER')
+              "
+              placeholder-icon="i-lucide-chevron-down"
+              placeholder-trailing-icon
+              variant="faded"
+            />
+          </div>
+        </div>
       </WithLabel>
       <div class="flex gap-2">
         <NextButton
           blue
           type="submit"
-          :label="
-            t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.UPDATE_BUTTON')
-          "
+          :is-loading="isSubmitting"
+          :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.UPDATE_BUTTON')"
         />
       </div>
     </form>

app/javascript/dashboard/routes/dashboard/settings/account/components/SectionLayout.vue

@@ -1,24 +1,19 @@
 <script setup>
 defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  withBorder: {
-    type: Boolean,
-    default: false,
-  },
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  withBorder: { type: Boolean, default: false },
+  hideContent: { type: Boolean, default: false },
 });
 </script>
 
 <template>
   <section
-    class="grid grid-cols-1 py-8 gap-8"
-    :class="{ 'border-t border-n-weak': withBorder }"
+    class="grid grid-cols-1 pt-8 gap-5 [interpolate-size:allow-keywords]"
+    :class="{
+      'border-t border-n-weak': withBorder,
+      'pb-8': !hideContent,
+    }"
   >
     <header class="grid grid-cols-4">
       <div class="col-span-3">
@@ -33,7 +28,10 @@ defineProps({
         <slot name="headerActions" />
       </div>
     </header>
-    <div class="text-n-slate-12">
+    <div
+      class="transition-[height] duration-300 ease-in-out text-n-slate-12"
+      :class="{ 'overflow-hidden h-0': hideContent, 'h-auto': !hideContent }"
+    >
       <slot />
     </div>
   </section>

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

@@ -23,6 +23,8 @@ import { FEATURE_FLAGS } from '../../../../featureFlags';
 import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 export default {
   components: {
@@ -43,6 +45,7 @@ export default {
     NextButton,
     InstagramReauthorize,
     DuplicateInboxBanner,
+    Editor,
   },
   mixins: [inboxMixin],
   setup() {
@@ -70,6 +73,7 @@ export default {
       selectedTabIndex: 0,
       selectedPortalSlug: '',
       showBusinessNameInput: false,
+      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
     };
   },
   computed: {
@@ -480,10 +484,10 @@ export default {
             "
           />
 
-          <woot-input
+          <Editor
             v-if="isAWebWidgetInbox"
             v-model="channelWelcomeTagline"
-            class="pb-4"
+            class="mb-4"
             :label="
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
             "
@@ -492,6 +496,8 @@ export default {
                 'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
               )
             "
+            :max-length="255"
+            :enabled-menu-options="welcomeTaglineEditorMenuOptions"
           />
 
           <label v-if="isAWebWidgetInbox" class="pb-4">

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

@@ -7,13 +7,16 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
+import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 export default {
   components: {
     Widget,
     InputRadioGroup,
     NextButton,
+    Editor,
   },
   props: {
     inbox: {
@@ -71,6 +74,7 @@ export default {
           checked: false,
         },
       ],
+      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
     };
   },
   computed: {
@@ -310,7 +314,7 @@ export default {
                 )
               "
             />
-            <woot-input
+            <Editor
               v-model="welcomeTagline"
               :label="
                 $t(
@@ -322,6 +326,9 @@ export default {
                   'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.PLACE_HOLDER'
                 )
               "
+              :max-length="255"
+              :enabled-menu-options="welcomeTaglineEditorMenuOptions"
+              class="mb-4"
             />
             <label>
               {{

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue

@@ -5,12 +5,15 @@ import router from '../../../../index';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
+import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 export default {
   components: {
     PageHeader,
     GreetingsEditor,
     NextButton,
+    Editor,
   },
   data() {
     return {
@@ -21,6 +24,7 @@ export default {
       channelWelcomeTagline: '',
       greetingEnabled: false,
       greetingMessage: '',
+      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
     };
   },
   computed: {
@@ -134,22 +138,21 @@ export default {
           />
         </label>
       </div>
-      <div class="w-full">
-        <label>
-          {{
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-          }}
-          <input
-            v-model="channelWelcomeTagline"
-            type="text"
-            :placeholder="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
-              )
-            "
-          />
-        </label>
-      </div>
+      <Editor
+        v-model="channelWelcomeTagline"
+        :label="
+          $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
+        "
+        :placeholder="
+          $t(
+            'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+          )
+        "
+        :max-length="255"
+        :enabled-menu-options="welcomeTaglineEditorMenuOptions"
+        class="mb-4"
+      />
+
       <label class="w-full">
         {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL') }}
         <select v-model="greetingEnabled">

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -245,7 +245,12 @@ export default {
         <button
           v-for="hotKey in hotKeys"
           :key="hotKey.key"
-          class="px-0 reset-base w-full sm:flex-1"
+          class="px-0 reset-base w-full sm:flex-1 rounded-xl outline-1 outline"
+          :class="
+            isEditorHotKeyEnabled(hotKey.key)
+              ? 'outline-n-brand/30'
+              : 'outline-n-weak'
+          "
         >
           <HotKeyCard
             :key="hotKey.title"

app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed } from 'vue';
+
 const { row } = defineProps({
   row: {
     type: Object,
@@ -6,10 +8,10 @@ const { row } = defineProps({
   },
 });
 
-const routerParams = {
+const routerParams = computed(() => ({
   name: 'inbox_conversation',
   params: { conversation_id: row.original.conversationId },
-};
+}));
 </script>
 
 <template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue

@@ -47,14 +47,17 @@ const tableData = computed(() => {
   }));
 });
 
-const defaulSpanRender = cellProps =>
-  h(
+const defaultSpanRender = cellProps => {
+  const value = cellProps.getValue() || '---';
+  return h(
     'span',
     {
-      class: cellProps.getValue() ? '' : 'text-slate-300 dark:text-slate-700',
+      class: 'line-clamp-5 break-words max-w-full text-n-slate-12',
+      title: value,
     },
-    cellProps.getValue() ? cellProps.getValue() : '---'
+    value
   );
+};
 
 const columnHelper = createColumnHelper();
 
@@ -65,7 +68,10 @@ const columns = [
     cell: cellProps => {
       const { contact } = cellProps.row.original;
       if (contact) {
-        return h(UserAvatarWithName, { user: contact });
+        return h(UserAvatarWithName, {
+          user: contact,
+          class: 'max-w-[200px] overflow-hidden',
+        });
       }
       return '--';
     },
@@ -76,7 +82,10 @@ const columns = [
     cell: cellProps => {
       const { assignedAgent } = cellProps.row.original;
       if (assignedAgent) {
-        return h(UserAvatarWithName, { user: assignedAgent });
+        return h(UserAvatarWithName, {
+          user: assignedAgent,
+          class: 'max-w-[200px] overflow-hidden',
+        });
       }
       return '--';
     },
@@ -105,7 +114,7 @@ const columns = [
   columnHelper.accessor('feedbackText', {
     header: t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
     width: 400,
-    cell: defaulSpanRender,
+    cell: defaultSpanRender,
   }),
   columnHelper.accessor('conversationId', {
     header: '',

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="reports--wrapper overflow-auto bg-n-background w-full px-8 xl:px-0"
-  >
+  <div class="reports--wrapper overflow-auto bg-n-background w-full px-6">
     <div class="max-w-[60rem] mx-auto pb-12">
       <router-view />
     </div>

app/javascript/dashboard/store/captain/copilotMessages.js

@@ -6,9 +6,9 @@ export default createStore({
   API: CopilotMessagesAPI,
   getters: {
     getMessagesByThreadId: state => copilotThreadId => {
-      return state.records.filter(
-        record => record.copilot_thread?.id === Number(copilotThreadId)
-      );
+      return state.records
+        .filter(record => record.copilot_thread?.id === Number(copilotThreadId))
+        .sort((a, b) => a.id - b.id);
     },
   },
   actions: mutationTypes => ({

app/javascript/dashboard/store/modules/accounts.js

@@ -63,8 +63,11 @@ export const actions = {
       });
     }
   },
-  update: async ({ commit }, updateObj) => {
-    commit(types.default.SET_ACCOUNT_UI_FLAG, { isUpdating: true });
+  update: async ({ commit }, { options, ...updateObj }) => {
+    if (options?.silent !== true) {
+      commit(types.default.SET_ACCOUNT_UI_FLAG, { isUpdating: true });
+    }
+
     try {
       const response = await AccountAPI.update('', updateObj);
       commit(types.default.EDIT_ACCOUNT, response.data);

app/javascript/dashboard/store/modules/contacts/actions.js

@@ -75,6 +75,21 @@ export const actions = {
     }
   },
 
+  active: async ({ commit }, { page = 1, sortAttr } = {}) => {
+    commit(types.SET_CONTACT_UI_FLAG, { isFetching: true });
+    try {
+      const {
+        data: { payload, meta },
+      } = await ContactAPI.active(page, sortAttr);
+      commit(types.CLEAR_CONTACTS);
+      commit(types.SET_CONTACTS, payload);
+      commit(types.SET_CONTACT_META, meta);
+      commit(types.SET_CONTACT_UI_FLAG, { isFetching: false });
+    } catch (error) {
+      commit(types.SET_CONTACT_UI_FLAG, { isFetching: false });
+    }
+  },
+
   show: async ({ commit }, { id }) => {
     commit(types.SET_CONTACT_UI_FLAG, { isFetchingItem: true });
     try {

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -327,6 +327,16 @@ const actions = {
     }
   },
 
+  deleteConversation: async ({ commit, dispatch }, conversationId) => {
+    try {
+      await ConversationApi.delete(conversationId);
+      commit(types.DELETE_CONVERSATION, conversationId);
+      dispatch('conversationStats/get', {}, { root: true });
+    } catch (error) {
+      throw new Error(error);
+    }
+  },
+
   addConversation({ commit, state, dispatch, rootState }, conversation) {
     const { currentInbox, appliedFilters } = state;
     const {

app/javascript/dashboard/store/modules/conversations/getters.js

@@ -18,13 +18,34 @@ const getters = {
   getAllConversations: ({ allConversations, chatSortFilter: sortKey }) => {
     return allConversations.sort((a, b) => sortComparator(a, b, sortKey));
   },
-  getFilteredConversations: ({
-    allConversations,
-    chatSortFilter,
-    appliedFilters,
-  }) => {
+  getFilteredConversations: (
+    { allConversations, chatSortFilter, appliedFilters },
+    _,
+    __,
+    rootGetters
+  ) => {
+    const currentUser = rootGetters.getCurrentUser;
+    const currentUserId = rootGetters.getCurrentUser.id;
+    const currentAccountId = rootGetters.getCurrentAccountId;
+
+    const permissions = getUserPermissions(currentUser, currentAccountId);
+    const userRole = getUserRole(currentUser, currentAccountId);
+
     return allConversations
-      .filter(conversation => matchesFilters(conversation, appliedFilters))
+      .filter(conversation => {
+        const matchesFilterResult = matchesFilters(
+          conversation,
+          appliedFilters
+        );
+        const allowedForRole = applyRoleFilter(
+          conversation,
+          userRole,
+          permissions,
+          currentUserId
+        );
+
+        return matchesFilterResult && allowedForRole;
+      })
       .sort((a, b) => sortComparator(a, b, chatSortFilter));
   },
   getSelectedChat: ({ selectedChatId, allConversations }) => {

app/javascript/dashboard/store/modules/conversations/helpers/filterHelpers.js

@@ -47,6 +47,7 @@
  * 3. Nested properties in custom_attributes (conversation_type, etc.)
  */
 import jsonLogic from 'json-logic-js';
+import { coerceToDate } from '@chatwoot/utils';
 
 /**
  * Gets a value from a conversation based on the attribute key
@@ -157,6 +158,20 @@ const contains = (filterValue, conversationValue) => {
   return false;
 };
 
+/**
+ * Compares two date values using a comparison function
+ * @param {*} conversationValue - The conversation value to compare
+ * @param {*} filterValue - The filter value to compare against
+ * @param {Function} compareFn - The comparison function to apply
+ * @returns {Boolean} - Returns true if the comparison succeeds, false otherwise
+ */
+const compareDates = (conversationValue, filterValue, compareFn) => {
+  const conversationDate = coerceToDate(conversationValue);
+  const filterDate = coerceToDate(filterValue);
+  if (conversationDate === null || filterDate === null) return false;
+  return compareFn(conversationDate, filterDate);
+};
+
 /**
  * Checks if a value matches a filter condition
  * @param {*} conversationValue - The value to check
@@ -195,10 +210,10 @@ const matchesCondition = (conversationValue, filter) => {
       return false; // We already handled null/undefined above
 
     case 'is_greater_than':
-      return new Date(conversationValue) > new Date(filterValue);
+      return compareDates(conversationValue, filterValue, (a, b) => a > b);
 
     case 'is_less_than':
-      return new Date(conversationValue) < new Date(filterValue);
+      return compareDates(conversationValue, filterValue, (a, b) => a < b);
 
     case 'days_before': {
       const today = new Date();
@@ -347,6 +362,7 @@ export const matchesFilters = (conversation, filters) => {
       conversation,
       filters[0].attribute_key
     );
+
     return matchesCondition(value, filters[0]);
   }
 

app/javascript/dashboard/store/modules/conversations/helpers/specs/filterHelpers.spec.js

@@ -463,6 +463,241 @@ describe('filterHelpers', () => {
       expect(matchesFilters(conversation, filters)).toBe(true);
     });
 
+    // Test conversation with 10-digit timestamp (seconds) vs standard date filter
+    it('should match conversation with 10-digit timestamp against date string filter', () => {
+      const conversation = { created_at: 1647777600 }; // March 20, 2022 in seconds (10 digits)
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19', // Standard YYYY-MM-DD format
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test conversation with 13-digit timestamp (milliseconds) vs standard date filter
+    it('should match conversation with 13-digit timestamp against date string filter', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022 in milliseconds (13 digits)
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19', // Standard YYYY-MM-DD format
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test conversation with string timestamp vs standard date filter
+    it('should match conversation with string 10-digit timestamp against date string filter', () => {
+      const conversation = { created_at: '1647777600' }; // March 20, 2022 as string (10 digits)
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19', // Standard YYYY-MM-DD format
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test conversation with string 13-digit timestamp vs standard date filter
+    it('should match conversation with string 13-digit timestamp against date string filter', () => {
+      const conversation = { created_at: '1647777600000' }; // March 20, 2022 as string (13 digits)
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19', // Standard YYYY-MM-DD format
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test conversation with mixed format vs standard date filter with time
+    it('should match conversation with numeric timestamp against ISO date string filter', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022 12:00:00 GMT (numeric)
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19T10:30:00Z', // Standard ISO format from filter
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test parseDate with date string without time (should default to 00:00:00)
+    it('should match conversation with is_greater_than operator using date string without time', () => {
+      const conversation = { created_at: 1647820800000 }; // March 21, 2022 00:00:00 GMT
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-20', // March 20, 2022 (should become 00:00:00)
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test parseDate with ISO date string
+    it('should match conversation with is_greater_than operator using ISO date string', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19T00:00:00.000Z', // March 19, 2022 ISO format
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test parseDate with null/undefined values
+    it('should handle null filter values in date comparison', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: null,
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(false);
+    });
+
+    it('should handle undefined filter values in date comparison', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: undefined,
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(false);
+    });
+
+    // Test parseDate with invalid date strings
+    it('should handle invalid date strings in date comparison', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: 'invalid-date-string',
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(false);
+    });
+
+    it('should handle non-date string values in date comparison', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: 'not-a-date',
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(false);
+    });
+
+    // Test is_less_than with various date formats
+    it('should match conversation with is_less_than operator using numeric timestamp', () => {
+      const conversation = { created_at: 1647691200000 }; // March 19, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_less_than',
+          values: 1647777600, // March 20, 2022 as 10-digit timestamp
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    it('should not match conversation with is_less_than operator when date is later', () => {
+      const conversation = { created_at: 1647864000000 }; // March 21, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_less_than',
+          values: '2022-03-20T12:00:00Z', // March 20, 2022 with time
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(false);
+    });
+
+    // Edge case: Test with conversation having string timestamp
+    it('should handle conversation with string timestamp value', () => {
+      const conversation = { created_at: '1647777600000' }; // March 20, 2022 as string
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19',
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Edge case: Test with conversation having 10-digit timestamp
+    it('should handle conversation with 10-digit timestamp value', () => {
+      const conversation = { created_at: 1647777600 }; // March 20, 2022 as seconds (10 digits)
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19',
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test date string with different time formats
+    it('should handle date string with space-separated time', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: '2022-03-19 10:30:00', // Date with space-separated time
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    // Test parseDate with object input (should return null and fail comparison)
+    it('should handle non-string, non-number filter values', () => {
+      const conversation = { created_at: 1647777600000 }; // March 20, 2022
+      const filters = [
+        {
+          attribute_key: 'created_at',
+          filter_operator: 'is_greater_than',
+          values: { date: '2022-03-19' }, // Object instead of string/number
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(false);
+    });
+
     describe('days_before operator', () => {
       beforeEach(() => {
         // Set the date to March 25, 2022

app/javascript/dashboard/store/modules/conversations/index.js

@@ -204,6 +204,12 @@ export const mutations = {
     _state.allConversations.push(conversation);
   },
 
+  [types.DELETE_CONVERSATION](_state, conversationId) {
+    _state.allConversations = _state.allConversations.filter(
+      c => c.id !== conversationId
+    );
+  },
+
   [types.UPDATE_CONVERSATION](_state, conversation) {
     const { allConversations } = _state;
     const index = allConversations.findIndex(c => c.id === conversation.id);

app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js

@@ -70,6 +70,30 @@ describe('#actions', () => {
     });
   });
 
+  describe('#active', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: { payload: contactList, meta: { count: 100, current_page: 1 } },
+      });
+      await actions.active({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetching: true }],
+        [types.CLEAR_CONTACTS],
+        [types.SET_CONTACTS, contactList],
+        [types.SET_CONTACT_META, { count: 100, current_page: 1 }],
+        [types.SET_CONTACT_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct mutations if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.active({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetching: true }],
+        [types.SET_CONTACT_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
   describe('#update', () => {
     it('sends correct mutations if API is success', async () => {
       axios.patch.mockResolvedValue({ data: { payload: contactList[0] } });

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -513,6 +513,28 @@ describe('#deleteMessage', () => {
     expect(commit.mock.calls).toEqual([]);
   });
 
+  describe('#deleteConversation', () => {
+    it('send correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({
+        data: { id: 1 },
+      });
+      await actions.deleteConversation({ commit, dispatch }, 1);
+      expect(commit.mock.calls).toEqual([[types.DELETE_CONVERSATION, 1]]);
+      expect(dispatch.mock.calls).toEqual([
+        ['conversationStats/get', {}, { root: true }],
+      ]);
+    });
+
+    it('send no actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.deleteConversation({ commit, dispatch }, 1)
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([]);
+      expect(dispatch.mock.calls).toEqual([]);
+    });
+  });
+
   describe('#updateCustomAttributes', () => {
     it('update conversation custom attributes', async () => {
       axios.post.mockResolvedValue({

app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js

@@ -325,4 +325,308 @@ describe('#getters', () => {
       });
     });
   });
+
+  describe('#getFilteredConversations', () => {
+    const mockConversations = [
+      {
+        id: 1,
+        status: 'open',
+        meta: { assignee: { id: 1 } },
+        last_activity_at: 1000,
+      },
+      {
+        id: 2,
+        status: 'open',
+        meta: {},
+        last_activity_at: 2000,
+      },
+      {
+        id: 3,
+        status: 'resolved',
+        meta: { assignee: { id: 2 } },
+        last_activity_at: 3000,
+      },
+    ];
+
+    const mockRootGetters = {
+      getCurrentUser: {
+        id: 1,
+        accounts: [{ id: 1, role: 'agent', permissions: [] }],
+      },
+      getCurrentAccountId: 1,
+    };
+
+    it('filters conversations based on role permissions for administrator', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [{ id: 1, role: 'administrator', permissions: [] }],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations based on role permissions for agent', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [{ id: 1, role: 'agent', permissions: [] }],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations for custom role with conversation_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations for custom role with conversation_unassigned_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_unassigned_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should include conversation assigned to user (id: 1) and unassigned conversation
+      expect(result).toEqual([mockConversations[1], mockConversations[0]]);
+    });
+
+    it('filters conversations for custom role with conversation_participating_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_participating_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should only include conversation assigned to user (id: 1)
+      expect(result).toEqual([mockConversations[0]]);
+    });
+
+    it('filters conversations for custom role with no permissions', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: [],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should return empty array as user has no permissions
+      expect(result).toEqual([]);
+    });
+
+    it('applies filters and role permissions together', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: ['open'],
+            query_operator: 'and',
+          },
+        ],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_participating_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should only include open conversation assigned to user (id: 1)
+      expect(result).toEqual([mockConversations[0]]);
+    });
+
+    it('returns empty array when no conversations match filters', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: ['pending'],
+            query_operator: 'and',
+          },
+        ],
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        mockRootGetters
+      );
+
+      expect(result).toEqual([]);
+    });
+
+    it('sorts filtered conversations according to chatSortFilter', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_asc',
+        appliedFilters: [],
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        mockRootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[0],
+        mockConversations[1],
+        mockConversations[2],
+      ]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js

@@ -884,6 +884,17 @@ describe('#mutations', () => {
     });
   });
 
+  describe('#DELETE_CONVERSATION', () => {
+    it('should delete a conversation', () => {
+      const state = {
+        allConversations: [{ id: 1, messages: [] }],
+      };
+
+      mutations[types.DELETE_CONVERSATION](state, 1);
+      expect(state.allConversations).toEqual([]);
+    });
+  });
+
   describe('#SET_LIST_LOADING_STATUS', () => {
     it('should set listLoadingStatus to true', () => {
       const state = {

app/javascript/dashboard/store/mutation-types.js

@@ -56,6 +56,7 @@ export default {
   SET_ALL_ATTACHMENTS: 'SET_ALL_ATTACHMENTS',
   ADD_CONVERSATION_ATTACHMENTS: 'ADD_CONVERSATION_ATTACHMENTS',
   DELETE_CONVERSATION_ATTACHMENTS: 'DELETE_CONVERSATION_ATTACHMENTS',
+  DELETE_CONVERSATION: 'DELETE_CONVERSATION',
 
   SET_CONVERSATION_CAN_REPLY: 'SET_CONVERSATION_CAN_REPLY',
 

app/javascript/v3/components/Form/Select.vue

@@ -64,11 +64,11 @@ export default {
       :selected="modelValue"
       :name="name"
       :class="{
-        'text-ash-400': !modelValue,
-        'text-ash-900': modelValue,
+        'text-n-slate-9': !modelValue,
+        'text-n-slate-12': modelValue,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 text-sm leading-6"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm appearance-none rounded-xl select-caret leading-6"
       @input="onInput"
     >
       <option value="" disabled selected class="hidden">

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -1,6 +1,7 @@
 <script setup>
 import HeaderActions from './HeaderActions.vue';
 import { computed } from 'vue';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 const props = defineProps({
   avatarUrl: {
@@ -21,6 +22,8 @@ const props = defineProps({
   },
 });
 
+const { formatMessage } = useMessageFormatter();
+
 const containerClasses = computed(() => [
   props.avatarUrl ? 'justify-between' : 'justify-end',
 ]);
@@ -47,8 +50,8 @@ const containerClasses = computed(() => [
       class="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12"
     />
     <p
-      v-dompurify-html="introBody"
-      class="text-lg leading-normal text-n-slate-11"
+      v-dompurify-html="formatMessage(introBody)"
+      class="text-lg leading-normal text-n-slate-11 [&_a]:underline"
     />
   </header>
 </template>

app/jobs/conversations/resolution_job.rb

@@ -8,6 +8,7 @@ class Conversations::ResolutionJob < ApplicationJob
       # send message from bot that conversation has been resolved
       # do this is account.auto_resolve_message is set
       ::MessageTemplates::Template::AutoResolve.new(conversation: conversation).perform if account.auto_resolve_message.present?
+      conversation.add_labels(account.auto_resolve_label) if account.auto_resolve_label.present?
       conversation.toggle_status
     end
   end

app/models/account.rb

@@ -35,7 +35,9 @@ class Account < ApplicationRecord
       {
         'auto_resolve_after': { 'type': %w[integer null], 'minimum': 10, 'maximum': 1_439_856 },
         'auto_resolve_message': { 'type': %w[string null] },
-        'auto_resolve_ignore_waiting': { 'type': %w[boolean null] }
+        'auto_resolve_ignore_waiting': { 'type': %w[boolean null] },
+        'audio_transcriptions': { 'type': %w[boolean null] },
+        'auto_resolve_label': { 'type': %w[string null] }
       },
     'required': [],
     'additionalProperties': true
@@ -52,6 +54,7 @@ class Account < ApplicationRecord
                  attribute_resolver: ->(record) { record.settings }
 
   store_accessor :settings, :auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting
+  store_accessor :settings, :audio_transcriptions, :auto_resolve_label
 
   has_many :account_users, dependent: :destroy_async
   has_many :agent_bot_inboxes, dependent: :destroy_async

app/models/article.rb

@@ -76,18 +76,24 @@ class Article < ApplicationRecord
   scope :order_by_views, -> { reorder(views: :desc) }
 
   # TODO: if text search slows down https://www.postgresql.org/docs/current/textsearch-features.html#TEXTSEARCH-UPDATE-TRIGGERS
+  # - the A, B and C are for weightage. See: https://github.com/Casecommons/pg_search#weighting
+  # - the normalization is for ensuring the long articles that mention the search term too many times are not ranked higher.
+  #   it divides rank by log(document_length) to prevent longer articles from ranking higher just due to sizeSee: https://github.com/Casecommons/pg_search#normalization
+  # - the ranking is to ensure that articles with higher weightage are ranked higher
   pg_search_scope(
     :text_search,
-    against: %i[
-      title
-      description
-      content
-    ],
+    against: {
+      title: 'A',
+      description: 'B',
+      content: 'C'
+    },
     using: {
       tsearch: {
-        prefix: true
+        prefix: true,
+        normalization: 2
       }
-    }
+    },
+    ranked_by: ':tsearch'
   )
 
   def self.search(params)

app/models/attachment.rb

@@ -44,11 +44,8 @@ class Attachment < ApplicationRecord
 
   def push_event_data
     return unless file_type
-    return base_data.merge(location_metadata) if file_type.to_sym == :location
-    return base_data.merge(fallback_data) if file_type.to_sym == :fallback
-    return base_data.merge(contact_metadata) if file_type.to_sym == :contact
 
-    base_data.merge(file_metadata)
+    base_data.merge(metadata_for_file_type)
   end
 
   # NOTE: the URl returned does a 301 redirect to the actual file
@@ -76,6 +73,30 @@ class Attachment < ApplicationRecord
 
   private
 
+  def metadata_for_file_type
+    case file_type.to_sym
+    when :location
+      location_metadata
+    when :fallback
+      fallback_data
+    when :contact
+      contact_metadata
+    when :audio
+      audio_metadata
+    else
+      file_metadata
+    end
+  end
+
+  def audio_metadata
+    audio_file_data = base_data.merge(file_metadata)
+    audio_file_data.merge(
+      {
+        transcribed_text: meta&.[]('transcribed_text') || ''
+      }
+    )
+  end
+
   def file_metadata
     metadata = {
       extension: extension,
@@ -149,3 +170,5 @@ class Attachment < ApplicationRecord
     file_content_type.start_with?('image/', 'video/', 'audio/')
   end
 end
+
+Attachment.include_mod_with('Concerns::Attachment')

app/models/concerns/activity_message_handler.rb

@@ -5,7 +5,6 @@ module ActivityMessageHandler
   include LabelActivityMessageHandler
   include SlaActivityMessageHandler
   include TeamActivityMessageHandler
-  include CsatActivityMessageHandler
 
   private
 

app/models/concerns/csat_activity_message_handler.rb

@@ -1,8 +0,0 @@
-module CsatActivityMessageHandler
-  extend ActiveSupport::Concern
-
-  def create_csat_not_sent_activity_message
-    content = I18n.t('conversations.activity.csat.not_sent_due_to_messaging_window')
-    ::Conversations::ActivityMessageJob.perform_later(self, activity_message_params(content)) if content
-  end
-end

app/models/conversation.rb

@@ -305,5 +305,6 @@ class Conversation < ApplicationRecord
   end
 end
 
+Conversation.include_mod_with('Audit::Conversation')
 Conversation.include_mod_with('Concerns::Conversation')
 Conversation.prepend_mod_with('Conversation')

app/models/message.rb

@@ -224,6 +224,11 @@ class Message < ApplicationRecord
     save!
   end
 
+  def send_update_event
+    Rails.configuration.dispatcher.dispatch(MESSAGE_UPDATED, Time.zone.now, message: self, performed_by: Current.executed_by,
+                                                                            previous_changes: previous_changes)
+  end
+
   private
 
   def prevent_message_flooding
@@ -313,8 +318,7 @@ class Message < ApplicationRecord
     # we want to skip the update event if the message is not updated
     return if previous_changes.blank?
 
-    Rails.configuration.dispatcher.dispatch(MESSAGE_UPDATED, Time.zone.now, message: self, performed_by: Current.executed_by,
-                                                                            previous_changes: previous_changes)
+    send_update_event
   end
 
   def send_reply