Merge branch 'develop' into feat/email-forwarding

.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_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, :auto_resolve_label)
   end
 
   def check_signup_enabled

app/controllers/public/api/v1/portals/articles_controller.rb

@@ -1,7 +1,7 @@
 class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
-  before_action :set_category, except: [:index, :show]
+  before_action :set_category, except: [:index, :show, :tracking_pixel]
   before_action :set_article, only: [:show]
   layout 'portal'
 
@@ -15,6 +15,21 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def show; end
 
+  def tracking_pixel
+    @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
+    return head :not_found unless @article
+
+    @article.increment_view_count if @article.published?
+
+    # Serve the 1x1 tracking pixel with 24-hour private cache
+    # Private cache bypasses CDN but allows browser caching to prevent duplicate views from same user
+    expires_in 24.hours, public: false
+    response.headers['Content-Type'] = 'image/png'
+
+    pixel_path = Rails.public_path.join('assets/images/tracking-pixel.png')
+    send_file pixel_path, type: 'image/png', disposition: 'inline'
+  end
+
   private
 
   def limit_results
@@ -39,7 +54,6 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count if @article.published?
     @parsed_content = render_article_content(@article.content)
   end
 

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,10 +134,6 @@ 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`);
   }

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/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,108 @@
+<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';
+  if (path.includes('/contacts')) return 'contacts';
+  if (path.includes('/articles')) return 'articles';
+  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/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/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/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/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/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

@@ -71,6 +71,7 @@
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",
       "OPEN_ACTION": "Open",
+      "MORE_ACTIONS": "More actions",
       "OPEN": "More",
       "CLOSE": "Close",
       "DETAILS": "details",

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",
@@ -68,24 +92,6 @@
         "PLACEHOLDER": "Your company's support email",
         "ERROR": ""
       },
-      "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."
-      },
-      "AUTO_RESOLVE_DURATION": {
-        "LABEL": "Inactivity duration for resolution",
-        "HELP": "Duration after a conversation should auto resolve if there is no activity",
-        "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"
-        },
-        "UPDATE_BUTTON": "Update",
-        "MESSAGE_LABEL": "Custom resolution message",
-        "MESSAGE_PLACEHOLDER": "Conversation was marked resolved by system due to 15 days of inactivity",
-        "MESSAGE_HELP": "This message is sent to the customer when a conversation is automatically resolved by the system due to inactivity."
-      },
       "FEATURES": {
         "INBOUND_EMAIL_ENABLED": "Conversation continuity with emails is enabled for your account.",
         "CUSTOM_EMAIL_DOMAIN_ENABLED": "You can receive emails in your custom domain now."

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/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/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/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/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/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/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/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/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,8 @@ 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] },
+        'auto_resolve_label': { 'type': %w[string null] }
       },
     'required': [],
     'additionalProperties': true
@@ -51,7 +52,7 @@ class Account < ApplicationRecord
                  schema: SETTINGS_PARAMS_SCHEMA,
                  attribute_resolver: ->(record) { record.settings }
 
-  store_accessor :settings, :auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting
+  store_accessor :settings, :auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting, :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/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/policies/csat_survey_response_policy.rb

@@ -11,3 +11,5 @@ class CsatSurveyResponsePolicy < ApplicationPolicy
     @account_user.administrator?
   end
 end
+
+CsatSurveyResponsePolicy.prepend_mod_with('CsatSurveyResponsePolicy')

app/services/message_templates/hook_execution_service.rb

@@ -17,7 +17,7 @@ class MessageTemplates::HookExecutionService
     ::MessageTemplates::Template::OutOfOffice.new(conversation: conversation).perform if should_send_out_of_office_message?
     ::MessageTemplates::Template::Greeting.new(conversation: conversation).perform if should_send_greeting?
     ::MessageTemplates::Template::EmailCollect.new(conversation: conversation).perform if inbox.enable_email_collect && should_send_email_collect?
-    handle_csat_survey
+    ::MessageTemplates::Template::CsatSurvey.new(conversation: conversation).perform if should_send_csat_survey?
   end
 
   def should_send_out_of_office_message?
@@ -65,26 +65,13 @@ class MessageTemplates::HookExecutionService
     true
   end
 
-  def handle_csat_survey
+  def should_send_csat_survey?
     return unless csat_enabled_conversation?
+
     # only send CSAT once in a conversation
-    return if csat_already_sent?
+    return if conversation.messages.where(content_type: :input_csat).present?
 
-    # Only send CSAT if agent can still reply by checking the messaging window restriction
-    # https://www.chatwoot.com/docs/self-hosted/supported-features#outgoing-message-restriction
-    if within_messaging_window?
-      ::MessageTemplates::Template::CsatSurvey.new(conversation: conversation).perform
-    else
-      conversation.create_csat_not_sent_activity_message
-    end
-  end
-
-  def csat_already_sent?
-    conversation.messages.where(content_type: :input_csat).present?
-  end
-
-  def within_messaging_window?
-    conversation.can_reply?
+    true
   end
 end
 MessageTemplates::HookExecutionService.prepend_mod_with('MessageTemplates::HookExecutionService')

app/services/search_service.rb

@@ -96,7 +96,6 @@ class SearchService
   def filter_articles
     @articles = current_account.articles
                                .text_search(search_query)
-                               .reorder('updated_at DESC')
                                .page(params[:page])
                                .per(15)
   end

app/views/layouts/portal.html.erb

@@ -73,6 +73,30 @@ By default, it renders:
         <% end %>
       </main>
     </div>
+    <% if @article.present? %>
+    <script>
+      (function() {
+        let viewTracked = false;
+        const trackView = function() {
+          if (!viewTracked) {
+            viewTracked = true;
+            const img = new Image();
+            img.src = '<%= request.base_url %>/hc/<%= @portal.slug %>/articles/<%= @article.slug %>.png';
+          }
+        };
+        
+        const addTrackingListeners = function() {
+          const events = ['mouseenter', 'touchstart', 'focus'];
+          events.forEach(event => {
+            document.body.addEventListener(event, function() {
+              setTimeout(trackView, 5000);
+            }, { once: true });
+          });
+        };
+        addTrackingListeners();
+      })();
+    </script>
+    <% end %>
   </body>
   <style>
   html.dark {

config/environments/development.rb

@@ -66,7 +66,7 @@ Rails.application.configure do
   # GitHub Codespaces configuration
   if ENV['CODESPACES']
     # Allow web console access from any IP
-    config.web_console.whitelisted_ips = %w(0.0.0.0/0 ::/0)
+    config.web_console.allowed_ips = %w(0.0.0.0/0 ::/0)
     # Allow CSRF from codespace URLs
     config.force_ssl = false
     config.action_controller.forgery_protection_origin_check = false

config/initializers/rack_profiler.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-if Rails.env.development?
+if Rails.env.development? && ENV['DISABLE_MINI_PROFILER'].blank?
   require 'rack-mini-profiler'
 
   # initialization is skipped so trigger it

config/locales/en.yml

@@ -185,8 +185,6 @@ en:
         removed: '%{user_name} removed %{labels}'
       sla:
         added: '%{user_name} added SLA policy %{sla_name}'
-      csat:
-        not_sent_due_to_messaging_window: 'CSAT survey not sent due to outgoing message restrictions'
         removed: '%{user_name} removed SLA policy %{sla_name}'
       muted: '%{user_name} has muted the conversation'
       unmuted: '%{user_name} has unmuted the conversation'
@@ -258,6 +256,11 @@ en:
   captain:
     copilot_error: 'Please connect an assistant to this inbox to use Copilot'
     copilot_limit: 'You are out of Copilot credits. You can buy more credits from the billing section.'
+    copilot:
+      using_tool: 'Using tool %{function_name}'
+      completed_tool_call: 'Completed %{function_name} tool call'
+      invalid_tool_call: 'Invalid tool call'
+      tool_not_available: 'Tool not available'
   public_portal:
     search:
       search_placeholder: Search for article by title or body...

config/markdown_embeds.yml

@@ -0,0 +1,132 @@
+# Markdown Embed Configuration
+#
+# This file defines patterns and templates for converting URLs into embedded content
+# in markdown rendering. Each embed type has:
+#   - regex: Pattern with named capture groups (?<name>...)
+#   - template: HTML template with %{capture_group_name} placeholders
+#
+# To add a new embed type:
+# 1. Add a new top-level key
+# 2. Define the regex pattern with named capture groups: (?<name>pattern)
+# 3. Create an HTML template using %{name} placeholders matching the capture groups
+
+youtube:
+  regex: 'https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+     <iframe
+      src="https://www.youtube-nocookie.com/embed/%{video_id}"
+      frameborder="0"
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen></iframe>
+    </div>
+
+loom:
+  regex: 'https?://(?:www\.)?loom\.com/share/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+      <iframe
+       src="https://www.loom.com/embed/%{video_id}"
+       frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
+       style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+    </div>
+
+vimeo:
+  regex: 'https?://(?:www\.)?vimeo\.com/(?<video_id>\d+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+     <iframe
+      src="https://player.vimeo.com/video/%{video_id}?dnt=true"
+      frameborder="0"
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowfullscreen
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+     </div>
+
+mp4:
+  regex: '(?<link_url>https?://(?:www\.)?.+\.mp4)'
+  template: |
+    <video width="640" height="360" controls>
+      <source src="%{link_url}" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+
+arcade:
+  regex: 'https?://(?:www\.)?app\.arcade\.software/share/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+      <iframe
+        src="https://app.arcade.software/embed/%{video_id}"
+        frameborder="0"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen
+        allow="fullscreen"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </iframe>
+    </div>
+
+wistia:
+  regex: 'https?://(?:www\.)?[^/]+\.wistia\.com/medias/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 56.25%; height: 0;">
+      <script src="https://fast.wistia.com/player.js" async></script>
+      <script src="https://fast.wistia.com/embed/%{video_id}.js" async type="module"></script>
+      <style>
+        wistia-player[media-id='%{video_id}']:not(:defined) {
+          background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/%{video_id}/swatch');
+          display: block;
+          filter: blur(5px);
+          padding-top:56.25%;
+        }
+      </style>
+      <wistia-player
+        media-id="%{video_id}"
+        aspect="1.7777777777777777"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </wistia-player>
+    </div>
+
+bunny:
+  regex: 'https?://iframe\.mediadelivery\.net/play/(?<library_id>\d+)/(?<video_id>[^&/?]+)'
+  template: |
+    <div style="position: relative; padding-top: 56.25%;">
+      <iframe
+        src="https://iframe.mediadelivery.net/embed/%{library_id}/%{video_id}?autoplay=false&loop=false&muted=false&preload=true&responsive=true"
+        title="Bunny video player"
+        loading="lazy"
+        style="border: 0; position: absolute; top: 0; height: 100%; width: 100%;"
+        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+        allowfullscreen>
+      </iframe>
+    </div>
+
+codepen:
+  regex: 'https?://(?:www\.)?codepen\.io/(?<user>[^/]+)/pen/(?<pen_id>[^/?]+)'
+  template: |
+    <div style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;">
+      <iframe
+        height="400"
+        style="width: 100%;"
+        scrolling="no"
+        title="CodePen Embed"
+        src="https://codepen.io/%{user}/embed/%{pen_id}?default-tab=result"
+        frameborder="no"
+        loading="lazy"
+        allowtransparency="true"
+        allowfullscreen="true">
+      </iframe>
+    </div>
+
+github_gist:
+  regex: 'https?://gist\.github\.com/(?<username>[^/]+)/(?<gist_id>[a-f0-9]+)'
+  template: |
+    <script src="https://gist.github.com/%{username}/%{gist_id}.js"></script>
+    <noscript>
+      <div style="border: 1px solid #d1d9e0; border-radius: 6px; padding: 16px; margin: 16px 0; background: #f6f8fa;">
+        <a href="https://gist.github.com/%{username}/%{gist_id}" target="_blank" style="color: #0969da; text-decoration: none;">
+          View this gist on GitHub
+        </a>
+      </div>
+    </noscript>

config/routes.rb

@@ -128,7 +128,6 @@ Rails.application.routes.draw do
               post :unread
               post :custom_attributes
               get :attachments
-              post :copilot
               get :inbox_assistant
             end
           end
@@ -449,6 +448,7 @@ Rails.application.routes.draw do
   get 'hc/:slug/:locale/categories', to: 'public/api/v1/portals/categories#index'
   get 'hc/:slug/:locale/categories/:category_slug', to: 'public/api/v1/portals/categories#show'
   get 'hc/:slug/:locale/categories/:category_slug/articles', to: 'public/api/v1/portals/articles#index'
+  get 'hc/:slug/articles/:article_slug.png', to: 'public/api/v1/portals/articles#tracking_pixel'
   get 'hc/:slug/articles/:article_slug', to: 'public/api/v1/portals/articles#show'
 
   # ----------------------------------------------------------------------

developer-docs/README.md

@@ -1,28 +0,0 @@
-## Chatwoot Developer Documentation
-
-Welcome to the official Chatwoot developer documentation. This guide contains everything you need to know about Chatwoot APIs and build custom flows on top of Chatwoot APIs.
-
-### 👩‍💻 Development
-
-Install the [Mintlify CLI](https://www.npmjs.com/package/mintlify) to preview the documentation changes locally. To install, use the following command
-
-```
-npm i -g mintlify
-```
-
-Run the following command at the root of your documentation (where mint.json is)
-
-```
-mintlify dev
-```
-
-### 😎 Publishing Changes
-
-Changes will be deployed to production automatically after pushing to the default branch.
-
-You can also preview changes using PRs, which generates a preview link of the docs.
-
-#### Troubleshooting
-
-- Mintlify dev isn't running - Run `mintlify install` it'll re-install dependencies.
-- Page loads as a 404 - Make sure you are running in a folder with `mint.json`

developer-docs/docs.json

@@ -1,100 +0,0 @@
-{
-  "$schema": "https://mintlify.com/docs.json",
-  "name": "Chatwoot Developer Docs",
-  "description": "Official developer documentation for Chatwoot - the open-source customer support platform. Learn about our APIs, integrations, and development guidelines.",
-  "logo": {
-    "dark": "/logo/dark.png",
-    "light": "/logo/light.png"
-  },
-  "favicon": "/favicon.png",
-  "colors": {
-    "primary": "#0069ED",
-    "light": "#4D9CFF",
-    "dark": "#0050B4"
-  },
-  "fonts": {
-    "heading": {
-      "family": "Haskoy",
-      "weight": 500,
-      "source": "https://d1j5ayohogpcd2.cloudfront.net/fonts/haskoy/Haskoy-Medium.woff2",
-      "format": "woff2"
-    },
-    "body": {
-      "family": "Haskoy",
-      "weight": 400,
-      "source": "https://d1j5ayohogpcd2.cloudfront.net/fonts/haskoy/Haskoy-Regular.woff2",
-      "format": "woff2"
-    }
-  },
-  "theme": "maple",
-  "navigation": {
-    "groups": [
-      {
-        "group": "API Reference",
-        "pages": [
-          "introduction"
-        ]
-      },
-      {
-        "group": "Application API",
-        "description": "APIs for managing application aspects of Chatwoot",
-        "includeTags": [
-          "Agents",
-          "Automation Rule",
-          "Account AgentBots",
-          "Canned Responses",
-          "Contact Labels",
-          "Contacts",
-          "Conversation Assignments",
-          "Conversation Labels",
-          "Conversations",
-          "Custom Attributes",
-          "Custom Filters",
-          "Help Center",
-          "Inboxes",
-          "Integrations",
-          "Messages",
-          "Profile",
-          "Reports",
-          "Teams",
-          "Webhooks"
-        ],
-        "openapi": "https://raw.githubusercontent.com/chatwoot/chatwoot/develop/swagger/tag_groups/application_swagger.json"
-      },
-      {
-        "group": "Platform API",
-        "description": "APIs for managing platform aspects of Chatwoot",
-        "includeTags": [
-          "Accounts",
-          "Account Users",
-          "AgentBots",
-          "Users"
-        ],
-        "openapi": "https://raw.githubusercontent.com/chatwoot/chatwoot/develop/swagger/tag_groups/platform_swagger.json"
-      },
-      {
-        "group": "Client API",
-        "description": "APIs for client applications",
-        "includeTags": [
-          "Contacts API",
-          "Conversations API",
-          "Messages API"
-        ],
-        "openapi": "https://raw.githubusercontent.com/chatwoot/chatwoot/develop/swagger/tag_groups/client_swagger.json"
-      },
-      {
-        "group": "Other APIs",
-        "description": "Other Chatwoot APIs",
-        "includeTags": [
-          "CSAT Survey Page"
-        ],
-        "openapi": "https://raw.githubusercontent.com/chatwoot/chatwoot/develop/swagger/tag_groups/other_swagger.json"
-      }
-    ]
-  },
-  "footerSocials": {
-    "twitter": "https://twitter.com/chatwootapp",
-    "github": "https://github.com/chatwoot",
-    "linkedin": "https://www.linkedin.com/company/chatwoot"
-  }
-}

developer-docs/introduction.mdx

@@ -1,49 +0,0 @@
----
-title: Introduction to Chatwoot APIs
-description: Learn how to use Chatwoot APIs to build integrations, customize chat experiences, and manage your installation.
-sidebarTitle: Introduction
----
-
-Welcome to the Chatwoot API documentation. Whether you're building custom workflows for your support team, integrating Chatwoot into your product, or managing users across installations, our APIs provide the flexibility and power to help you do more with Chatwoot.
-
-Chatwoot provides three categories of APIs, each designed with a specific use case in mind:
-
-- **Application APIs** – For account-level automation and agent-facing integrations.
-- **Client APIs** – For building custom chat interfaces for end-users
-- **Platform APIs** – For managing and administering installations at scale
-
----
-
-## Application APIs
-
-Application APIs are designed for interacting with a Chatwoot account from an agent/admin perspective. Use them to build internal tools, automate workflows, or perform bulk operations like data import/export.
-
-- **Authentication**: Requires a user `access_token`, which can be generated from **Profile Settings** after logging into your Chatwoot account.
-- **Availability**: Supported on both **Cloud** and **Self-hosted** Chatwoot installations.
-- **Example**: [Google Cloud Functions Demo](https://github.com/chatwoot/google-cloud-functions-demo)
-
----
-
-## Client APIs
-
-Client APIs are intended for building custom messaging experiences over Chatwoot. If you're not using the native website widget or want to embed chat in your mobile app, these APIs are the way to go.
-
-- **Authentication**: Uses `inbox_identifier` (from **Settings → Configuration** in API inboxes) and `contact_identifier` (returned when creating a contact).
-- **Availability**: Supported on both **Cloud** and **Self-hosted** Chatwoot installations.
-- **Examples**:
-
-  - [Client API Demo](https://github.com/chatwoot/client-api-demo)
-  - [Flutter SDK](https://github.com/chatwoot/chatwoot-flutter-sdk)
-
----
-
-## Platform APIs
-
-Platform APIs are used to manage Chatwoot installations at the admin level. These APIs allow you to control users, roles, and accounts, or sync data from external authentication systems.
-
-- **Authentication**: Requires an `access_token` generated by a **Platform App**, which can be created in the **Super Admin Console**.
-- **Availability**: Available on **Self-hosted** / **Managed Hosting** Chatwoot installations only.
-
----
-
-Use the right API for your use case, and you'll be able to extend, customize, and integrate Chatwoot into your stack with ease.

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

@@ -1,31 +1,5 @@
 module Enterprise::Api::V1::Accounts::ConversationsController
   extend ActiveSupport::Concern
-  included do
-    before_action :set_assistant, only: [:copilot]
-  end
-
-  def copilot
-    # First try to get the user's preferred assistant from UI settings or from the request
-    assistant_id = copilot_params[:assistant_id] || current_user.ui_settings&.dig('preferred_captain_assistant_id')
-
-    # Find the assistant either by ID or from inbox
-    assistant = if assistant_id.present?
-                  Captain::Assistant.find_by(id: assistant_id, account_id: Current.account.id)
-                else
-                  @conversation.inbox.captain_assistant
-                end
-
-    return render json: { message: I18n.t('captain.copilot_error') } unless assistant
-
-    response = Captain::Copilot::ChatService.new(
-      assistant,
-      previous_history: copilot_params[:previous_history],
-      conversation_id: @conversation.display_id,
-      user_id: Current.user.id
-    ).generate_response(copilot_params[:message])
-
-    render json: { message: response['response'] }
-  end
 
   def inbox_assistant
     assistant = @conversation.inbox.captain_assistant

enterprise/app/helpers/captain/chat_helper.rb

@@ -53,9 +53,21 @@ module Captain::ChatHelper
   end
 
   def execute_tool(function_name, arguments, tool_call_id)
-    persist_message({ content: "Using tool #{function_name}", function_name: function_name }, 'assistant_thinking')
+    persist_message(
+      {
+        content: I18n.t('captain.copilot.using_tool', function_name: function_name),
+        function_name: function_name
+      },
+      'assistant_thinking'
+    )
     result = @tool_registry.send(function_name, arguments)
-    persist_message({ content: "Completed #{function_name} tool call", function_name: function_name }, 'assistant_thinking')
+    persist_message(
+      {
+        content: I18n.t('captain.copilot.completed_tool_call', function_name: function_name),
+        function_name: function_name
+      },
+      'assistant_thinking'
+    )
     append_tool_response(result, tool_call_id)
   end
 
@@ -67,8 +79,8 @@ module Captain::ChatHelper
   end
 
   def process_invalid_tool_call(function_name, tool_call_id)
-    persist_message({ content: 'Invalid tool call', function_name: function_name }, 'assistant_thinking')
-    append_tool_response('Tool not available', tool_call_id)
+    persist_message({ content: I18n.t('captain.copilot.invalid_tool_call'), function_name: function_name }, 'assistant_thinking')
+    append_tool_response(I18n.t('captain.copilot.tool_not_available'), tool_call_id)
   end
 
   def append_tool_response(content, tool_call_id)

enterprise/app/models/copilot_message.rb

@@ -60,7 +60,7 @@ class CopilotMessage < ApplicationRecord
   def validate_message_attributes
     return if message.blank?
 
-    allowed_keys = %w[content reasoning function_name]
+    allowed_keys = %w[content reasoning function_name reply_suggestion]
     invalid_keys = message.keys - allowed_keys
 
     errors.add(:message, "contains invalid attributes: #{invalid_keys.join(', ')}") if invalid_keys.any?

enterprise/app/policies/enterprise/csat_survey_response_policy.rb

@@ -0,0 +1,13 @@
+module Enterprise::CsatSurveyResponsePolicy
+  def index?
+    @account_user.custom_role&.permissions&.include?('report_manage') || super
+  end
+
+  def metrics?
+    @account_user.custom_role&.permissions&.include?('report_manage') || super
+  end
+
+  def download?
+    @account_user.custom_role&.permissions&.include?('report_manage') || super
+  end
+end

enterprise/app/services/captain/copilot/chat_service.rb

@@ -74,7 +74,10 @@ class Captain::Copilot::ChatService < Llm::BaseOpenAiService
   def system_message
     {
       role: 'system',
-      content: Captain::Llm::SystemPromptsService.copilot_response_generator(@assistant.config['product_name'])
+      content: Captain::Llm::SystemPromptsService.copilot_response_generator(
+        @assistant.config['product_name'],
+        @tool_registry.tools_summary
+      )
     }
   end
 

enterprise/app/services/captain/llm/system_prompts_service.rb

@@ -56,7 +56,7 @@ class Captain::Llm::SystemPromptsService
       SYSTEM_PROMPT_MESSAGE
     end
 
-    def copilot_response_generator(product_name)
+    def copilot_response_generator(product_name, available_tools)
       <<~SYSTEM_PROMPT_MESSAGE
         [Identity]
         You are Captain, a helpful and friendly copilot assistant for support agents using the product #{product_name}. Your primary role is to assist support agents by retrieving information, compiling accurate responses, and guiding them through customer interactions.
@@ -94,12 +94,20 @@ class Captain::Llm::SystemPromptsService
         ```json
         {
           "reasoning": "Explain why the response was chosen based on the provided information.",
-          "response": "Provide the answer only in Markdown format for readability."
+          "content": "Provide the answer only in Markdown format for readability.",
+          "reply_suggestion": "A boolean value that is true only if the support agent has explicitly asked to draft a response to the customer, and the response fulfills that request. Otherwise, it should be false."
         }
 
         [Error Handling]
         - If the required information is not found in the provided context, respond with an appropriate message indicating that no relevant data is available.
         - Avoid speculating or providing unverified information.
+
+        [Available Actions]
+        You have the following actions available to assist support agents:
+        - summarize_conversation: Summarize the conversation
+        - draft_response: Draft a response for the support agent
+        - rate_conversation: Rate the conversation
+        #{available_tools}
       SYSTEM_PROMPT_MESSAGE
     end
 

enterprise/app/services/captain/tool_registry_service.rb

@@ -27,4 +27,10 @@ class Captain::ToolRegistryService
   def respond_to_missing?(method_name, include_private = false)
     @tools.key?(method_name.to_s) || super
   end
+
+  def tools_summary
+    @tools.map do |name, tool|
+      "- #{name}: #{tool.description}"
+    end.join("\n")
+  end
 end

enterprise/app/services/captain/tools/copilot/search_conversations_service.rb

@@ -19,8 +19,9 @@ class Captain::Tools::Copilot::SearchConversationsService < Captain::Tools::Base
     status = arguments['status']
     contact_id = arguments['contact_id']
     priority = arguments['priority']
+    labels = arguments['labels']
 
-    conversations = get_conversations(status, contact_id, priority)
+    conversations = get_conversations(status, contact_id, priority, labels)
 
     return 'No conversations found' unless conversations.exists?
 
@@ -41,11 +42,12 @@ class Captain::Tools::Copilot::SearchConversationsService < Captain::Tools::Base
 
   private
 
-  def get_conversations(status, contact_id, priority)
+  def get_conversations(status, contact_id, priority, labels)
     conversations = permissible_conversations
     conversations = conversations.where(contact_id: contact_id) if contact_id.present?
     conversations = conversations.where(status: status) if status.present?
     conversations = conversations.where(priority: priority) if priority.present?
+    conversations = conversations.tagged_with(labels, any: true) if labels.present?
     conversations
   end
 
@@ -59,20 +61,10 @@ class Captain::Tools::Copilot::SearchConversationsService < Captain::Tools::Base
 
   def properties
     {
-      contact_id: {
-        type: 'number',
-        description: 'Filter conversations by contact ID'
-      },
-      status: {
-        type: 'string',
-        enum: %w[open resolved pending snoozed],
-        description: 'Filter conversations by status'
-      },
-      priority: {
-        type: 'string',
-        enum: %w[low medium high urgent],
-        description: 'Filter conversations by priority'
-      }
+      contact_id: { type: 'number', description: 'Filter conversations by contact ID' },
+      status: { type: 'string', enum: %w[open resolved pending snoozed], description: 'Filter conversations by status' },
+      priority: { type: 'string', enum: %w[low medium high urgent], description: 'Filter conversations by priority' },
+      labels: { type: 'array', items: { type: 'string' }, description: 'Filter conversations by labels' }
     }
   end
 end

lib/custom_markdown_renderer.rb

@@ -1,13 +1,13 @@
 class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
-  # TODO: let move this regex from here to a config file where we can update this list much more easily
-  # the config file will also have the matching embed template as well.
-  YOUTUBE_REGEX = %r{https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)([^&/]+)}
-  LOOM_REGEX = %r{https?://(?:www\.)?loom\.com/share/([^&/]+)}
-  VIMEO_REGEX = %r{https?://(?:www\.)?vimeo\.com/(\d+)}
-  MP4_REGEX = %r{https?://(?:www\.)?.+\.(mp4)}
-  ARCADE_REGEX = %r{https?://(?:www\.)?app\.arcade\.software/share/([^&/]+)}
-  WISTIA_REGEX = %r{https?://(?:www\.)?([^/]+)\.wistia\.com/medias/([^&/]+)}
-  BUNNY_REGEX = %r{https?://iframe\.mediadelivery\.net/play/(\d+)/([^&/?]+)}
+  CONFIG_PATH = Rails.root.join('config/markdown_embeds.yml')
+
+  def self.config
+    @config ||= YAML.load_file(CONFIG_PATH)
+  end
+
+  def self.embed_regexes
+    @embed_regexes ||= config.transform_values { |embed_config| Regexp.new(embed_config['regex']) }
+  end
 
   def text(node)
     content = node.string_content
@@ -23,7 +23,7 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
   def link(node)
     return if surrounded_by_empty_lines?(node) && render_embedded_content(node)
 
-    # If it's not YouTube or Vimeo link, render normally
+    # If it's not a supported embed link, render normally
     super
   end
 
@@ -47,25 +47,35 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
 
   def render_embedded_content(node)
     link_url = node.url
-    embedding_methods = {
-      YOUTUBE_REGEX => :make_youtube_embed,
-      VIMEO_REGEX => :make_vimeo_embed,
-      MP4_REGEX => :make_video_embed,
-      LOOM_REGEX => :make_loom_embed,
-      ARCADE_REGEX => :make_arcade_embed,
-      WISTIA_REGEX => :make_wistia_embed,
-      BUNNY_REGEX => :make_bunny_embed
-    }
+    embed_html = find_matching_embed(link_url)
 
-    embedding_methods.each do |regex, method|
+    return false unless embed_html
+
+    out(embed_html)
+    true
+  end
+
+  def find_matching_embed(link_url)
+    self.class.embed_regexes.each do |embed_key, regex|
       match = link_url.match(regex)
-      if match
-        out(send(method, match))
-        return true
-      end
+      next unless match
+
+      return render_embed_from_match(embed_key, match)
     end
 
-    false
+    nil
+  end
+
+  def render_embed_from_match(embed_key, match_data)
+    embed_config = self.class.config[embed_key]
+    return nil unless embed_config
+
+    template = embed_config['template']
+    # Use Ruby's built-in named captures with gsub to handle CSS % values
+    match_data.named_captures.each do |var_name, value|
+      template = template.gsub("%{#{var_name}}", value)
+    end
+    template
   end
 
   def parse_sup(content)
@@ -77,39 +87,4 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
       end
     end
   end
-
-  def make_youtube_embed(youtube_match)
-    video_id = youtube_match[1]
-    EmbedRenderer.youtube(video_id)
-  end
-
-  def make_loom_embed(loom_match)
-    video_id = loom_match[1]
-    EmbedRenderer.loom(video_id)
-  end
-
-  def make_vimeo_embed(vimeo_match)
-    video_id = vimeo_match[1]
-    EmbedRenderer.vimeo(video_id)
-  end
-
-  def make_video_embed(link_url)
-    EmbedRenderer.video(link_url)
-  end
-
-  def make_wistia_embed(wistia_match)
-    video_id = wistia_match[2]
-    EmbedRenderer.wistia(video_id)
-  end
-
-  def make_arcade_embed(arcade_match)
-    video_id = arcade_match[1]
-    EmbedRenderer.arcade(video_id)
-  end
-
-  def make_bunny_embed(bunny_match)
-    library_id = bunny_match[1]
-    video_id = bunny_match[2]
-    EmbedRenderer.bunny(library_id, video_id)
-  end
 end

lib/embed_renderer.rb

@@ -1,102 +0,0 @@
-module EmbedRenderer
-  def self.youtube(video_id)
-    %(
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-       <iframe
-        src="https://www.youtube-nocookie.com/embed/#{video_id}"
-        frameborder="0"
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen></iframe>
-      </div>
-    )
-  end
-
-  def self.loom(video_id)
-    %(
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-        <iframe
-         src="https://www.loom.com/embed/#{video_id}"
-         frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
-         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
-      </div>
-    )
-  end
-
-  def self.vimeo(video_id)
-    %(
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-       <iframe
-        src="https://player.vimeo.com/video/#{video_id}?dnt=true"
-        frameborder="0"
-        allow="autoplay; fullscreen; picture-in-picture"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
-       </div>
-    )
-  end
-
-  def self.video(link_url)
-    %(
-      <video width="640" height="360" controls>
-        <source src="#{link_url}" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>
-    )
-  end
-
-  # Generates an HTML embed for a Wistia video.
-  # @param wistia_match [MatchData] A match object from the WISTIA_REGEX regex, where wistia_match[2] contains the video ID.
-  def self.wistia(video_id)
-    %(
-      <div style="position: relative; padding-bottom: 56.25%; height: 0;">
-        <script src="https://fast.wistia.com/player.js" async></script>
-        <script src="https://fast.wistia.com/embed/#{video_id}.js" async type="module"></script>
-        <style>
-          wistia-player[media-id='#{video_id}']:not(:defined) {
-            background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/#{video_id}/swatch');
-            display: block;
-            filter: blur(5px);
-            padding-top:56.25%;
-          }
-        </style>
-        <wistia-player
-          media-id="#{video_id}"
-          aspect="1.7777777777777777"
-          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-        </wistia-player>
-      </div>
-    )
-  end
-
-  def self.arcade(video_id)
-    %(
-    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-      <iframe
-        src="https://app.arcade.software/embed/#{video_id}"
-        frameborder="0"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen
-        allow="fullscreen"
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-      </iframe>
-    </div>
-  )
-  end
-
-  def self.bunny(library_id, video_id)
-    %(
-      <div style="position: relative; padding-top: 56.25%;">
-        <iframe
-          src="https://iframe.mediadelivery.net/embed/#{library_id}/#{video_id}?autoplay=false&loop=false&muted=false&preload=true&responsive=true"
-          title="Bunny video player"
-          loading="lazy"
-          style="border: 0; position: absolute; top: 0; height: 100%; width: 100%;"
-          allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
-          allowfullscreen>
-        </iframe>
-      </div>
-    )
-  end
-end

lib/seeders/account_seeder.rb

@@ -19,6 +19,7 @@ class Seeders::AccountSeeder
   def perform!
     set_up_account
     seed_teams
+    seed_custom_roles
     set_up_users
     seed_labels
     seed_canned_responses
@@ -32,6 +33,7 @@ class Seeders::AccountSeeder
     @account.labels.destroy_all
     @account.inboxes.destroy_all
     @account.contacts.destroy_all
+    @account.custom_roles.destroy_all if @account.respond_to?(:custom_roles)
   end
 
   def seed_teams
@@ -40,6 +42,18 @@ class Seeders::AccountSeeder
     end
   end
 
+  def seed_custom_roles
+    return unless @account_data['custom_roles'].present? && @account.respond_to?(:custom_roles)
+
+    @account_data['custom_roles'].each do |role_data|
+      @account.custom_roles.create!(
+        name: role_data['name'],
+        description: role_data['description'],
+        permissions: role_data['permissions']
+      )
+    end
+  end
+
   def seed_labels
     @account_data['labels'].each do |label|
       @account.labels.create!(label)
@@ -48,17 +62,34 @@ class Seeders::AccountSeeder
 
   def set_up_users
     @account_data['users'].each do |user|
-      user_record = User.create_with(name: user['name'], password: 'Password1!.').find_or_create_by!(email: (user['email']).to_s)
-      user_record.skip_confirmation!
-      user_record.save!
-      Avatar::AvatarFromUrlJob.perform_later(user_record, "https://xsgames.co/randomusers/avatar.php?g=#{user['gender']}")
-      AccountUser.create_with(role: (user['role'] || 'agent')).find_or_create_by!(account_id: @account.id, user_id: user_record.id)
-      next if user['team'].blank?
-
-      add_user_to_teams(user: user_record, teams: user['team'])
+      user_record = create_user_record(user)
+      create_account_user(user_record, user)
+      add_user_to_teams(user: user_record, teams: user['team']) if user['team'].present?
     end
   end
 
+  private
+
+  def create_user_record(user)
+    user_record = User.create_with(name: user['name'], password: 'Password1!.').find_or_create_by!(email: user['email'].to_s)
+    user_record.skip_confirmation!
+    user_record.save!
+    Avatar::AvatarFromUrlJob.perform_later(user_record, "https://xsgames.co/randomusers/avatar.php?g=#{user['gender']}")
+    user_record
+  end
+
+  def create_account_user(user_record, user)
+    account_user_attrs = build_account_user_attrs(user)
+    AccountUser.create_with(account_user_attrs).find_or_create_by!(account_id: @account.id, user_id: user_record.id)
+  end
+
+  def build_account_user_attrs(user)
+    attrs = { role: (user['role'] || 'agent') }
+    custom_role = find_custom_role(user['custom_role']) if user['custom_role'].present?
+    attrs[:custom_role] = custom_role if custom_role
+    attrs
+  end
+
   def add_user_to_teams(user:, teams:)
     teams.each do |team|
       team_record = @account.teams.where('name LIKE ?', "%#{team.downcase}%").first if team.present?
@@ -66,6 +97,12 @@ class Seeders::AccountSeeder
     end
   end
 
+  def find_custom_role(role_name)
+    return nil unless @account.respond_to?(:custom_roles)
+
+    @account.custom_roles.find_by(name: role_name)
+  end
+
   def seed_canned_responses(count: 50)
     count.times do
       @account.canned_responses.create(content: Faker::Quote.fortune_cookie, short_code: Faker::Alphanumeric.alpha(number: 10))

lib/seeders/seed_data.yml

@@ -61,41 +61,49 @@ users:
     email: 'karn@paperlayer.test'
     team:
       - 'Sales'
+    custom_role: 'Sales Representative'
   - name: 'Danny Cordray'
     gender: female
     email: 'danny@paperlayer.test'
     team:
       - 'Sales'
+    custom_role: 'Customer Support Lead'
   - name: 'Ben Nugent'
     gender: male
     email: 'ben@paperlayer.test'
     team:
       - 'Sales'
+    custom_role: 'Junior Agent'
   - name: 'Todd Packer'
     gender: male
     email: 'todd@paperlayer.test'
     team:
       - 'Sales'
+    custom_role: 'Sales Representative'
   - name: 'Cathy Simms'
     gender: female
     email: 'cathy@paperlayer.test'
     team:
       - 'Administration'
+    custom_role: 'Knowledge Manager'
   - name: 'Hunter Jo'
     gender: male
     email: 'hunter@paperlayer.test'
     team:
       - 'Administration'
+    custom_role: 'Analytics Specialist'
   - name: 'Rolando Silva'
     gender: male
     email: 'rolando@paperlayer.test'
     team:
       - 'Administration'
+    custom_role: 'Junior Agent'
   - name: 'Stephanie Wilson'
     gender: female
     email: 'stephanie@paperlayer.test'
     team:
       - 'Administration'
+    custom_role: 'Escalation Handler'
   - name: 'Jordan Garfield'
     gender: male
     email: 'jorodan@paperlayer.test'
@@ -111,6 +119,7 @@ users:
     email: 'lonny@paperlayer.test'
     team:
       - 'Warehouse'
+    custom_role: 'Customer Support Lead'
   - name: 'Madge Madsen'
     gender: female
     email: 'madge@paperlayer.test'
@@ -162,6 +171,7 @@ users:
   - name: 'Devon White'
     gender: male
     email: 'devon@paperlayer.test'
+    custom_role: 'Escalation Handler'
   - name: 'Kendall'
     gender: male
     email: 'kendall@paperlayer.test'
@@ -173,6 +183,39 @@ teams:
   - '💼 Management'
   - '👩‍💼 Administration'
   - '🚛 Warehouse'
+custom_roles:
+  - name: 'Customer Support Lead'
+    description: 'Lead support agent with full conversation and contact management'
+    permissions:
+      - 'conversation_manage'
+      - 'contact_manage'
+      - 'report_manage'
+  - name: 'Sales Representative'
+    description: 'Sales team member with conversation and contact access'
+    permissions:
+      - 'conversation_unassigned_manage'
+      - 'conversation_participating_manage'
+      - 'contact_manage'
+  - name: 'Knowledge Manager'
+    description: 'Manages knowledge base and participates in conversations'
+    permissions:
+      - 'knowledge_base_manage'
+      - 'conversation_participating_manage'
+  - name: 'Junior Agent'
+    description: 'Entry-level agent with basic conversation access'
+    permissions:
+      - 'conversation_participating_manage'
+  - name: 'Analytics Specialist'
+    description: 'Focused on reports and data analysis'
+    permissions:
+      - 'report_manage'
+      - 'conversation_participating_manage'
+  - name: 'Escalation Handler'
+    description: 'Handles unassigned conversations and escalations'
+    permissions:
+      - 'conversation_unassigned_manage'
+      - 'conversation_participating_manage'
+      - 'contact_manage'
 labels:
     - title: 'billing'
       color: '#28AD21'