enable mcp for tool for all endpoints

Fixes https://github.com/chatwoot/chatwoot/issues/11569

 ## Problem
On platforms like WhatsApp and Facebook Messenger, customers cannot
reply to messages after 24 hours (or other channel-specific messaging
windows). Despite this limitation, the system continued sending CSAT
surveys to customers outside their messaging window, making it
impossible for them to respond.

  ## Solution
Added a check for `conversation.can_reply?` in the
`should_send_csat_survey?` method. This leverages the existing
`MessageWindowService` which already handles all channel-specific
messaging window logic.

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

@@ -15,6 +15,10 @@ class Api::V1::Accounts::SearchController < Api::V1::Accounts::BaseController
     @result = search('Message')
   end
 
+  def articles
+    @result = search('Article')
+  end
+
   private
 
   def search(search_type)

app/controllers/super_admin/app_configs_controller.rb

@@ -32,22 +32,17 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
   end
 
   def allowed_configs
-    @allowed_configs = case @config
-                       when 'facebook'
-                         %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT]
-                       when 'shopify'
-                         %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET]
-                       when 'microsoft'
-                         %w[AZURE_APP_ID AZURE_APP_SECRET]
-                       when 'email'
-                         ['MAILER_INBOUND_EMAIL_DOMAIN']
-                       when 'linear'
-                         %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET]
-                       when 'instagram'
-                         %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
-                       else
-                         %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
-                       end
+    mapping = {
+      'facebook' => %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT],
+      'shopify' => %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET],
+      'microsoft' => %w[AZURE_APP_ID AZURE_APP_SECRET],
+      'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
+      'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
+      'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
+      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
+    }
+
+    @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])
   end
 end
 

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

@@ -0,0 +1,18 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CopilotMessages extends ApiClient {
+  constructor() {
+    super('captain/copilot_threads', { accountScoped: true });
+  }
+
+  get(threadId) {
+    return axios.get(`${this.url}/${threadId}/copilot_messages`);
+  }
+
+  create({ threadId, ...rest }) {
+    return axios.post(`${this.url}/${threadId}/copilot_messages`, rest);
+  }
+}
+
+export default new CopilotMessages();

app/javascript/dashboard/api/captain/copilotThreads.js

@@ -0,0 +1,9 @@
+import ApiClient from '../ApiClient';
+
+class CopilotThreads extends ApiClient {
+  constructor() {
+    super('captain/copilot_threads', { accountScoped: true });
+  }
+}
+
+export default new CopilotThreads();

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

@@ -134,6 +134,10 @@ 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/api/search.js

@@ -40,6 +40,15 @@ class SearchAPI extends ApiClient {
       },
     });
   }
+
+  articles({ q, page = 1 }) {
+    return axios.get(`${this.url}/articles`, {
+      params: {
+        q,
+        page: page,
+      },
+    });
+  }
 }
 
 export default new SearchAPI();

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

@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-b-n-weak;
+  @apply border-b border-n-weak;
 }
 
 .tabs--container--compact.tab--chat-type {

app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue

@@ -42,6 +42,7 @@ const initialState = {
     conversationFaqs: false,
     memories: false,
   },
+  temperature: 1,
 };
 
 const state = reactive({ ...initialState });
@@ -87,6 +88,7 @@ const updateStateFromAssistant = assistant => {
     conversationFaqs: config.feature_faq || false,
     memories: config.feature_memory || false,
   };
+  state.temperature = config.temperature || 1;
 };
 
 const handleBasicInfoUpdate = async () => {
@@ -136,6 +138,7 @@ const handleInstructionsUpdate = async () => {
   const payload = {
     config: {
       ...props.assistant.config,
+      temperature: state.temperature || 1,
       instructions: state.instructions,
     },
   };
@@ -212,7 +215,7 @@ watch(
 
     <!-- Instructions Section -->
     <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.INSTRUCTIONS')">
-      <div class="flex flex-col gap-4 pt-4">
+      <div class="flex flex-col gap-4">
         <Editor
           v-model="state.instructions"
           :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
@@ -221,6 +224,25 @@ watch(
           :message-type="formErrors.instructions ? 'error' : 'info'"
         />
 
+        <div class="flex flex-col gap-2 mt-4">
+          <label class="text-sm font-medium text-n-slate-12">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.LABEL') }}
+          </label>
+          <div class="flex items-center gap-4">
+            <input
+              v-model="state.temperature"
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              class="w-full"
+            />
+            <span class="text-sm text-n-slate-12">{{ state.temperature }}</span>
+          </div>
+          <p class="text-sm text-n-slate-11 italic">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }}
+          </p>
+        </div>
         <div class="flex justify-end">
           <Button
             size="small"

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

@@ -1,5 +1,6 @@
 <script setup>
-import { nextTick, ref, watch, computed } from 'vue';
+import { nextTick, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
@@ -7,10 +8,8 @@ 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 CopilotHeader from './CopilotHeader.vue';
-import CopilotEmptyState from './CopilotEmptyState.vue';
+import Icon from '../icon/Icon.vue';
 
 const props = defineProps({
   supportAgent: {
@@ -27,7 +26,7 @@ const props = defineProps({
   },
   conversationInboxType: {
     type: String,
-    default: '',
+    required: true,
   },
   assistants: {
     type: Array,
@@ -39,13 +38,22 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['sendMessage', 'reset', 'setAssistant', 'close']);
+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 handleReset = () => {
   emit('reset');
 };
@@ -59,28 +67,20 @@ const scrollToBottom = async () => {
   }
 };
 
-const groupedMessages = computed(() => {
-  const result = [];
-  let thinkingGroup = [];
-
-  props.messages.forEach(message => {
-    if (message.role === 'assistant_thinking') {
-      thinkingGroup.push(message);
-    } else {
-      if (thinkingGroup.length > 0) {
-        result.push({ type: 'thinking_group', messages: thinkingGroup });
-        thinkingGroup = [];
-      }
-      result.push({ type: 'message', message });
-    }
-  });
-
-  if (thinkingGroup.length > 0) {
-    result.push({ type: 'thinking_group', messages: thinkingGroup });
-  }
-
-  return result;
-});
+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',
+  },
+];
 
 watch(
   [() => props.messages, () => props.isCaptainTyping],
@@ -93,62 +93,60 @@ watch(
 
 <template>
   <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
-    <CopilotHeader
-      :has-messages="messages.length > 0"
-      @reset="handleReset"
-      @close="$emit('close')"
-    />
-    <div
-      ref="chatContainer"
-      class="flex-1 flex px-4 py-4 overflow-y-auto items-start"
-    >
-      <div v-if="messages.length" class="space-y-6 flex-1 flex flex-col w-full">
-        <template
-          v-for="item in groupedMessages"
-          :key="item.type === 'message' ? item.message.id : 'thinking-group'"
-        >
-          <template v-if="item.type === 'message'">
-            <CopilotAgentMessage
-              v-if="item.message.role === 'user'"
-              :support-agent="supportAgent"
-              :message="item.message"
-            />
-            <CopilotAssistantMessage
-              v-else-if="
-                item.message.role === 'assistant' ||
-                item.message.role === 'system'
-              "
-              :message="item.message"
-              :conversation-inbox-type="conversationInboxType"
-            />
-          </template>
-          <CopilotThinkingGroup
-            v-else
-            :messages="item.messages"
-            :has-assistant-message-after="
-              groupedMessages[groupedMessages.indexOf(item) + 1]?.message
-                ?.role === 'assistant'
-            "
-          />
-        </template>
+    <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" />
+      <CopilotLoader v-if="isCaptainTyping" />
+    </div>
+
+    <div
+      v-if="!messages.length"
+      class="h-full w-full flex items-center justify-center"
+    >
+      <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>
-      <CopilotEmptyState
-        v-if="!messages.length"
-        @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 > 1"
+          v-if="assistants.length"
           :assistants="assistants"
           :active-assistant="activeAssistant"
           @set-assistant="$event => emit('setAssistant', $event)"
         />
         <div v-else />
+        <button
+          v-if="messages.length"
+          class="text-xs flex items-center gap-1 hover:underline"
+          @click="handleReset"
+        >
+          <i class="i-lucide-refresh-ccw" />
+          <span>{{ $t('CAPTAIN.COPILOT.RESET') }}</span>
+        </button>
       </div>
       <CopilotInput class="mb-1 w-full" @send="sendMessage" />
     </div>

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

@@ -17,7 +17,7 @@ const props = defineProps({
   },
   conversationInboxType: {
     type: String,
-    default: '',
+    required: true,
   },
 });
 

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

@@ -1,91 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import Icon from '../icon/Icon.vue';
-
-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: 'High priority conversations',
-      prompt: 'Get me a summary of all high priority open conversations',
-    },
-    {
-      label: 'List contacts',
-      prompt: 'Show me the list of contacts',
-    },
-    {
-      label: 'Summarize articles',
-      prompt: 'List articles that are in draft',
-    },
-  ],
-};
-
-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 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/CopilotHeader.vue

@@ -11,7 +11,7 @@ defineEmits(['reset', 'close']);
 
 <template>
   <div
-    class="flex items-center justify-between px-4 py-2 border-b border-n-weak h-12"
+    class="flex items-center justify-between px-5 py-2 border-b border-n-weak h-12"
   >
     <div class="flex items-center justify-between gap-2 flex-1">
       <span class="font-medium text-sm text-n-slate-12">

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

@@ -1,47 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-import { useRoute } from 'vue-router';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useMapGetter } from 'dashboard/composables/store';
-
-const store = useStore();
-const route = useRoute();
-
-const getUIState = useMapGetter('uiState/getUIState');
-const isSidebarOpen = computed(() => getUIState.value('isCopilotSidebarOpen'));
-
-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 toggleSidebar = () => {
-  store.dispatch('uiState/toggle', 'isCopilotSidebarOpen');
-};
-</script>
-
-<template>
-  <div class="fixed bottom-4 right-4 z-50">
-    <div
-      v-if="!isSidebarOpen && !isConversationRoute"
-      class="rounded-full bg-n-solid-2 p-2 hover:bg-n-solid-3"
-    >
-      <Button
-        icon="i-woot-captain"
-        class="!rounded-full !bg-n-alpha-2 text-n-slate-12 text-xl"
-        lg
-        @click="toggleSidebar"
-      />
-    </div>
-  </div>
-</template>

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

@@ -315,11 +315,7 @@ const componentToRender = computed(() => {
 });
 
 const shouldShowContextMenu = computed(() => {
-  return !(
-    props.status === MESSAGE_STATUS.FAILED ||
-    props.status === MESSAGE_STATUS.PROGRESS ||
-    props.contentAttributes?.isUnsupported
-  );
+  return !props.contentAttributes?.isUnsupported;
 });
 
 const isBubble = computed(() => {
@@ -344,12 +340,23 @@ const contextMenuEnabledOptions = computed(() => {
   const hasAttachments = !!(props.attachments && props.attachments.length > 0);
 
   const isOutgoing = props.messageType === MESSAGE_TYPES.OUTGOING;
+  const isFailedOrProcessing =
+    props.status === MESSAGE_STATUS.FAILED ||
+    props.status === MESSAGE_STATUS.PROGRESS;
 
   return {
     copy: hasText,
-    delete: hasText || hasAttachments,
-    cannedResponse: isOutgoing && hasText,
-    replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
+    delete:
+      (hasText || hasAttachments) &&
+      !isFailedOrProcessing &&
+      !isMessageDeleted.value,
+    cannedResponse: isOutgoing && hasText && !isMessageDeleted.value,
+    copyLink: !isFailedOrProcessing,
+    translate: !isFailedOrProcessing && !isMessageDeleted.value && hasText,
+    replyTo:
+      !props.private &&
+      props.inboxSupportsReplyTo.outgoing &&
+      !isFailedOrProcessing,
   };
 });
 
@@ -499,8 +506,8 @@ provideMessageContext({
       <div
         class="[grid-area:bubble] flex"
         :class="{
-          'ltr:pl-8 rtl:pr-8 justify-end': orientation === ORIENTATION.RIGHT,
-          'ltr:pr-8 rtl:pl-8': orientation === ORIENTATION.LEFT,
+          'ltr:ml-8 rtl:mr-8 justify-end': orientation === ORIENTATION.RIGHT,
+          'ltr:mr-8 rtl:ml-8': orientation === ORIENTATION.LEFT,
           'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
         }"
         @contextmenu="openContextMenu($event)"
@@ -516,7 +523,7 @@ provideMessageContext({
     </div>
     <div v-if="shouldShowContextMenu" class="context-menu-wrap">
       <ContextMenu
-        v-if="isBubble && !isMessageDeleted"
+        v-if="isBubble"
         :context-menu-position="contextMenuPosition"
         :is-open="showContextMenu"
         :enabled-options="contextMenuEnabledOptions"

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -40,7 +40,7 @@ const senderName = computed(() => {
             <Icon :icon="icon" class="text-white size-4" />
           </slot>
         </div>
-        <div class="space-y-1">
+        <div class="space-y-1 overflow-hidden">
           <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
             {{
               t(senderTranslationKey, {

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

@@ -519,7 +519,7 @@ const menuItems = computed(() => {
       </div>
     </section>
     <nav class="grid flex-grow gap-2 px-2 pb-5 overflow-y-scroll no-scrollbar">
-      <ul class="flex flex-col gap-1.5 m-0 list-none">
+      <ul class="flex flex-col gap-2 m-0 list-none">
         <SidebarGroup
           v-for="item in menuItems"
           :key="item.name"

app/javascript/dashboard/components/ChatList.vue

@@ -8,7 +8,6 @@ import {
   computed,
   watch,
   onMounted,
-  onUnmounted,
   defineEmits,
 } from 'vue';
 import { useStore } from 'vuex';
@@ -44,7 +43,7 @@ import {
   useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener, useScrollLock } from '@vueuse/core';
+import { useEventListener } from '@vueuse/core';
 
 import { emitter } from 'shared/helpers/mitt';
 
@@ -87,12 +86,8 @@ const store = useStore();
 
 const conversationListRef = ref(null);
 const conversationDynamicScroller = ref(null);
-const conversationListScrollableElement = computed(
-  () => conversationDynamicScroller.value?.$el
-);
-const conversationListScrollLock = useScrollLock(
-  conversationListScrollableElement
-);
+
+provide('contextMenuElementTarget', conversationDynamicScroller);
 
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -746,7 +741,6 @@ function allSelectedConversationsStatus(status) {
 
 function onContextMenuToggle(state) {
   isContextMenuOpen.value = state;
-  conversationListScrollLock.value = state;
 }
 
 function toggleSelectAll(check) {
@@ -770,10 +764,6 @@ onMounted(() => {
   }
 });
 
-onUnmounted(() => {
-  conversationListScrollLock.value = false;
-});
-
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);
@@ -824,7 +814,7 @@ watch(conversationFilters, (newVal, oldVal) => {
     class="flex flex-col flex-shrink-0 bg-n-solid-1 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'w-[21rem] 2xl:w-[26rem]',
+      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
     ]"
   >
     <slot />

app/javascript/dashboard/components/ChatListHeader.vue

@@ -80,14 +80,16 @@ const toggleConversationLayout = () => {
 
 <template>
   <div
-    class="flex items-center justify-between gap-2 px-3 h-12 pt-3 pb-3"
+    class="flex items-center justify-between gap-2 px-4"
     :class="{
-      'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+      'pt-3 pb-2': showV4View,
+      'mb-2 pb-0': !showV4View,
     }"
   >
     <div class="flex items-center justify-center min-w-0">
       <h1
-        class="text-base font-medium truncate text-n-slate-12"
+        class="text-lg font-medium truncate text-n-slate-12"
         :title="pageTitle"
       >
         {{ pageTitle }}

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

@@ -1,24 +1,31 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watchEffect } 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,
+  },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
+});
+
 const store = useStore();
 const currentUser = useMapGetter('getCurrentUser');
 const assistants = useMapGetter('captainAssistants/getRecords');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
 const { uiSettings, updateUISettings } = useUISettings();
-const currentChat = useMapGetter('getSelectedChat');
-
-const getUIState = useMapGetter('uiState/getUIState');
-const isSidebarOpen = computed(() => getUIState.value('isCopilotSidebarOpen'));
 
 const messages = ref([]);
 const isCaptainTyping = ref(false);
 const selectedAssistantId = ref(null);
-const copilotConnector = ref(null);
 
 const activeAssistant = computed(() => {
   const preferredId = uiSettings.value.preferred_captain_assistant_id;
@@ -52,12 +59,7 @@ const handleReset = () => {
   messages.value = [];
 };
 
-const sendMessage = message => {
-  // Ensure WebSocket is connected before sending
-  if (!copilotConnector.value || !isSidebarOpen.value) {
-    return;
-  }
-
+const sendMessage = async message => {
   // Add user message
   messages.value.push({
     id: messages.value.length + 1,
@@ -66,71 +68,55 @@ const sendMessage = message => {
   });
   isCaptainTyping.value = true;
 
-  copilotConnector.value.sendMessage({
-    assistantId: activeAssistant.value.id,
-    conversationId: currentChat.value?.id,
-    previousHistory: messages.value
-      .filter(m => m.role !== 'assistant_thinking')
-      .map(m => ({
-        role: m.role,
-        content: m.content,
-      }))
-      .slice(0, -1),
-    message,
-  });
+  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,
+    });
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log(error);
+  } finally {
+    isCaptainTyping.value = false;
+  }
 };
 
 onMounted(() => {
   store.dispatch('captainAssistants/get');
 });
 
-// const onCopilotResponse = data => {
-//   if (data.type === 'final_response') {
-//     messages.value.push({
-//       id: new Date().getTime(),
-//       role: 'assistant',
-//       content: data.response.response,
-//     });
-//     isCaptainTyping.value = false;
-//   } else if (data.type === 'ui_event') {
-//     if (data.event === 'ui:linear_ticket_create') {
-//       emitter.emit('ui:linear_ticket_create');
-//       setTimeout(() => {
-//         emitter.emit('ui:linear_ticket_create_data', data.response);
-//       }, 100);
-//     }
-//   } else {
-//     messages.value.push({
-//       id: new Date().getTime(),
-//       role: 'assistant_thinking',
-//       content: data.response.response,
-//       reasoning: data.response.reasoning,
-//     });
-//   }
-// };
-
-const handleClose = () => {
-  store.dispatch('uiState/set', { isCopilotSidebarOpen: false });
-};
+watchEffect(() => {
+  if (props.conversationId) {
+    store.dispatch('getInboxCaptainAssistantById', props.conversationId);
+    selectedAssistantId.value = activeAssistant.value?.id;
+  }
+});
 </script>
 
 <template>
-  <div
-    v-if="isSidebarOpen"
-    class="border-l border-n-weak w-[20rem] min-w-[20rem]"
-  >
-    <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"
-      @close="handleClose"
-    />
-  </div>
-  <div v-else class="hidden" />
+  <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"
+  />
 </template>

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

@@ -1,6 +1,13 @@
 <script setup>
-import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
-import { useWindowSize, useElementBounding } from '@vueuse/core';
+import {
+  computed,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  useTemplateRef,
+  inject,
+} from 'vue';
+import { useWindowSize, useElementBounding, useScrollLock } from '@vueuse/core';
 
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 
@@ -11,27 +18,34 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
+const elementToLock = inject('contextMenuElementTarget', null);
+
 const menuRef = useTemplateRef('menuRef');
 
+const scrollLockElement = computed(() => {
+  if (!elementToLock?.value) return null;
+  return elementToLock.value?.$el;
+});
+
+const isLocked = useScrollLock(scrollLockElement);
+
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 const { width: menuWidth, height: menuHeight } = useElementBounding(menuRef);
 
 const calculatePosition = (x, y, menuW, menuH, windowW, windowH) => {
+  const PADDING = 16;
   // Initial position
   let left = x;
   let top = y;
-
   // Boundary checks
-  const isOverflowingRight = left + menuW > windowW;
-  const isOverflowingBottom = top + menuH > windowH;
-
+  const isOverflowingRight = left + menuW > windowW - PADDING;
+  const isOverflowingBottom = top + menuH > windowH - PADDING;
   // Adjust position if overflowing
-  if (isOverflowingRight) left = windowW - menuW;
-  if (isOverflowingBottom) top = windowH - menuH;
-
+  if (isOverflowingRight) left = windowW - menuW - PADDING;
+  if (isOverflowingBottom) top = windowH - menuH - PADDING;
   return {
-    left: Math.max(0, left),
-    top: Math.max(0, top),
+    left: Math.max(PADDING, left),
+    top: Math.max(PADDING, top),
   };
 };
 
@@ -54,8 +68,18 @@ const position = computed(() => {
 });
 
 onMounted(() => {
+  isLocked.value = true;
   nextTick(() => menuRef.value?.focus());
 });
+
+const handleClose = () => {
+  isLocked.value = false;
+  emit('close');
+};
+
+onUnmounted(() => {
+  isLocked.value = false;
+});
 </script>
 
 <template>
@@ -65,7 +89,7 @@ onMounted(() => {
       class="fixed outline-none z-[9999] cursor-pointer"
       :style="position"
       tabindex="0"
-      @blur="emit('close')"
+      @blur="handleClose"
     >
       <slot />
     </div>

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

@@ -48,7 +48,7 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <woot-tabs
     :index="activeTabIndex"
-    class="w-full px-3 -mt-1 py-0 tab--chat-type"
+    class="w-full px-4 py-0 tab--chat-type"
     @change="onTabChange"
   >
     <woot-tabs-item

app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -83,7 +83,7 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="hasOpenedAtleastOnce" class="flex-1">
+  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
     <div
       v-for="(configItem, index) in config"
       :key="index"
@@ -115,7 +115,6 @@ export default {
 .dashboard-app--list iframe {
   border: 0;
 }
-
 .dashboard-app_loading-container {
   display: flex;
   align-items: center;

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

@@ -4,9 +4,11 @@ import ConversationHeader from './ConversationHeader.vue';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
 import EmptyState from './EmptyState/EmptyState.vue';
 import MessagesView from './MessagesView.vue';
+import ConversationSidebar from './ConversationSidebar.vue';
 
 export default {
   components: {
+    ConversationSidebar,
     ConversationHeader,
     DashboardAppFrame,
     EmptyState,
@@ -23,11 +25,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    isContactPanelOpen: {
+      type: Boolean,
+      default: true,
+    },
     isOnExpandedLayout: {
       type: Boolean,
       default: true,
     },
   },
+  emits: ['contactPanelToggle'],
   data() {
     return { activeIndex: 0 };
   },
@@ -50,6 +57,9 @@ export default {
         })),
       ];
     },
+    showContactPanel() {
+      return this.isContactPanelOpen && this.currentChat.id;
+    },
   },
   watch: {
     'currentChat.inbox_id': {
@@ -76,6 +86,9 @@ export default {
       }
       this.$store.dispatch('conversationLabels/get', this.currentChat.id);
     },
+    onToggleContactPanel() {
+      this.$emit('contactPanelToggle');
+    },
     onDashboardAppTabChange(index) {
       this.activeIndex = index;
     },
@@ -85,7 +98,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-n-background relative"
+    class="conversation-details-wrap bg-n-background"
     :class="{
       'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
     }"
@@ -94,12 +107,14 @@ export default {
       v-if="currentChat.id"
       :chat="currentChat"
       :is-inbox-view="isInboxView"
+      :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout && !isInboxView"
+      @contact-panel-toggle="onToggleContactPanel"
     />
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px border-t border-t-n-background bg-n-background dashboard-app--tabs"
+      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -110,17 +125,23 @@ export default {
         :show-badge="false"
       />
     </woot-tabs>
-    <div v-show="!activeIndex" class="flex-1 h-full min-h-0 m-0">
+    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
       <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
+        :is-contact-panel-open="isContactPanelOpen"
+        @contact-panel-toggle="onToggleContactPanel"
       />
       <EmptyState
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
-      <slot />
+      <ConversationSidebar
+        v-if="showContactPanel"
+        :current-chat="currentChat"
+        @toggle-contact-panel="onToggleContactPanel"
+      />
     </div>
     <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"

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

@@ -243,7 +243,7 @@ export default {
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-3 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
     :class="{
       'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
         isActiveChat,
@@ -278,7 +278,7 @@ export default {
         :badge="inboxBadge"
         :username="currentContact.name"
         :status="currentContact.availability_status"
-        size="32px"
+        size="40px"
       />
     </div>
     <div

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

@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import BackButton from '../BackButton.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
@@ -12,6 +13,8 @@ import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Linear from './linear/index.vue';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     BackButton,
@@ -20,6 +23,7 @@ export default {
     Thumbnail,
     SLACardLabel,
     Linear,
+    NextButton,
   },
   mixins: [inboxMixin],
   props: {
@@ -27,6 +31,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    isContactPanelOpen: {
+      type: Boolean,
+      default: false,
+    },
     showBackButton: {
       type: Boolean,
       default: false,
@@ -36,6 +44,15 @@ export default {
       default: false,
     },
   },
+  emits: ['contactPanelToggle'],
+  setup(props, { emit }) {
+    const keyboardEvents = {
+      'Alt+KeyO': {
+        action: () => emit('contactPanelToggle'),
+      },
+    };
+    useKeyboardEvents(keyboardEvents);
+  },
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
@@ -82,7 +99,13 @@ export default {
       }
       return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
     },
-
+    contactPanelToggleText() {
+      return `${
+        this.isContactPanelOpen
+          ? this.$t('CONVERSATION.HEADER.CLOSE')
+          : this.$t('CONVERSATION.HEADER.OPEN')
+      } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
+    },
     inbox() {
       const { inbox_id: inboxId } = this.chat;
       return this.$store.getters['inboxes/getInbox'](inboxId);
@@ -110,7 +133,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-3 border-b bg-n-background border-n-weak md:flex-row h-12"
+    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak md:flex-row"
   >
     <div
       class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
@@ -127,18 +150,20 @@ export default {
           :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 items-center max-w-full gap-1 p-0 m-0 w-fit">
-            <span
-              class="text-sm font-medium truncate leading-tight text-n-slate-12"
-            >
-              {{ currentContact.name }}
-            </span>
-
+          <div
+            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
+          >
+            <NextButton link slate @click.prevent="$emit('contactPanelToggle')">
+              <span
+                class="text-base font-medium truncate leading-tight text-n-slate-12"
+              >
+                {{ currentContact.name }}
+              </span>
+            </NextButton>
             <fluent-icon
               v-if="!isHMACVerified"
               v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
@@ -155,11 +180,19 @@ export default {
             <span v-if="isSnoozed" class="font-medium text-n-amber-10">
               {{ snoozedDisplayText }}
             </span>
+            <NextButton
+              link
+              xs
+              blue
+              :label="contactPanelToggleText"
+              @click="$emit('contactPanelToggle')"
+            />
           </div>
         </div>
       </div>
       <div
         class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
+        :class="{ 'justify-end': isContactPanelOpen }"
       >
         <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
         <Linear

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

@@ -1,8 +1,11 @@
 <script setup>
+import { computed, ref } from 'vue';
+import CopilotContainer from '../../copilot/CopilotContainer.vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { computed } from 'vue';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { FEATURE_FLAGS } from '../../../featureFlags';
 
 const props = defineProps({
   currentChat: {
@@ -11,48 +14,69 @@ const props = defineProps({
   },
 });
 
-const getUIState = useMapGetter('uiState/getUIState');
-const isCopilotSidebarOpen = computed(() =>
-  getUIState.value('isCopilotSidebarOpen')
-);
-const isConversationSidebarOpen = computed(() =>
-  getUIState.value('isConversationSidebarOpen')
-);
+const emit = defineEmits(['toggleContactPanel']);
 
-const showConversationSidebar = computed(
-  () =>
-    props.currentChat.id &&
-    !isCopilotSidebarOpen.value &&
-    isConversationSidebarOpen.value
-);
+const { t } = useI18n();
 
-const store = useStore();
-const closeConversationPanel = () => {
-  store.dispatch('uiState/set', { isConversationSidebarOpen: false });
+const channelType = computed(() => props.currentChat?.meta?.channel || '');
+
+const CONTACT_TABS_OPTIONS = [
+  { key: 'CONTACT', value: 'contact' },
+  { key: 'COPILOT', value: 'copilot' },
+];
+
+const tabs = computed(() => {
+  return CONTACT_TABS_OPTIONS.map(tab => ({
+    label: t(`CONVERSATION.SIDEBAR.${tab.key}`),
+    value: tab.value,
+  }));
+});
+const activeTab = ref(0);
+const toggleContactPanel = () => {
+  emit('toggleContactPanel');
 };
+
+const handleTabChange = selectedTab => {
+  activeTab.value = tabs.value.findIndex(
+    tabItem => tabItem.value === selectedTab.value
+  );
+};
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showCopilotTab = computed(() =>
+  isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
+);
 </script>
 
 <template>
   <div
-    v-if="showConversationSidebar"
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[20rem] min-w-[20rem] flex flex-col"
+    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"
   >
-    <div class="flex flex-1 flex-col overflow-auto">
-      <div
-        class="flex items-center justify-between gap-2 px-4 py-2 border-b border-n-weak h-12"
-      >
-        <span class="font-medium text-sm text-n-slate-12">
-          {{ $t('CONVERSATION.SIDEBAR.ACTIONS') }}
-        </span>
-        <div class="flex items-center">
-          <Button icon="i-lucide-x" ghost sm @click="closeConversationPanel" />
-        </div>
-      </div>
+    <div v-if="showCopilotTab" class="p-2">
+      <TabBar
+        :tabs="tabs"
+        :initial-active-tab="activeTab"
+        class="w-full [&>button]:w-full"
+        @tab-changed="handleTabChange"
+      />
+    </div>
+    <div class="flex flex-1 overflow-auto">
       <ContactPanel
-        :conversation-id="props.currentChat.id"
-        :inbox-id="props.currentChat.inbox_id"
+        v-if="!activeTab"
+        :conversation-id="currentChat.id"
+        :inbox-id="currentChat.inbox_id"
+        :on-toggle="toggleContactPanel"
+      />
+      <CopilotContainer
+        v-else-if="activeTab === 1 && showCopilotTab"
+        :key="currentChat.id"
+        :conversation-inbox-type="channelType"
+        :conversation-id="currentChat.id"
+        class="flex-1"
       />
     </div>
   </div>
-  <div v-else class="hidden" />
 </template>

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

@@ -185,8 +185,17 @@ export default {
     contextMenuEnabledOptions() {
       return {
         copy: this.hasText,
-        delete: this.hasText || this.hasAttachments,
-        cannedResponse: this.isOutgoing && this.hasText,
+        delete:
+          (this.hasText || this.hasAttachments) &&
+          !this.isMessageDeleted &&
+          !this.isFailed,
+        cannedResponse:
+          this.isOutgoing && this.hasText && !this.isMessageDeleted,
+        copyLink: !this.isFailed || !this.isProcessing,
+        translate:
+          (!this.isFailed || !this.isProcessing) &&
+          !this.isMessageDeleted &&
+          this.hasText,
         replyTo: !this.data.private && this.inboxSupportsReplyTo.outgoing,
       };
     },
@@ -328,7 +337,7 @@ export default {
       return !this.sender.type || this.sender.type === 'agent_bot';
     },
     shouldShowContextMenu() {
-      return !(this.isFailed || this.isPending || this.isUnsupported);
+      return !this.isUnsupported;
     },
     showAvatar() {
       if (this.isOutgoing || this.isTemplate) {

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

@@ -1,5 +1,5 @@
 <script>
-import { ref } from 'vue';
+import { ref, provide } from 'vue';
 // composable
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
@@ -38,6 +38,8 @@ import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     Message,
@@ -45,10 +47,23 @@ export default {
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
+    NextButton,
   },
   mixins: [inboxMixin],
+  props: {
+    isContactPanelOpen: {
+      type: Boolean,
+      default: false,
+    },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['contactPanelToggle'],
   setup() {
     const isPopOutReplyBox = ref(false);
+    const conversationPanelRef = ref(null);
     const { isEnterprise } = useConfig();
 
     const closePopOutReplyBox = () => {
@@ -84,6 +99,8 @@ export default {
       FEATURE_FLAGS.CHATWOOT_V4
     );
 
+    provide('contextMenuElementTarget', conversationPanelRef);
+
     return {
       isEnterprise,
       isPopOutReplyBox,
@@ -94,6 +111,7 @@ export default {
       fetchIntegrationsIfRequired,
       fetchLabelSuggestions,
       showNextBubbles,
+      conversationPanelRef,
     };
   },
   data() {
@@ -185,6 +203,12 @@ export default {
     isATweet() {
       return this.conversationType === 'tweet';
     },
+    isRightOrLeftIcon() {
+      if (this.isContactPanelOpen) {
+        return 'arrow-chevron-right';
+      }
+      return 'arrow-chevron-left';
+    },
     getLastSeenAt() {
       const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
       return contactLastSeenAt;
@@ -420,6 +444,9 @@ export default {
         relevantMessages
       );
     },
+    onToggleContactPanel() {
+      this.$emit('contactPanelToggle');
+    },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
       this.scrollTopBeforeLoad = this.conversationPanel.scrollTop;
@@ -503,9 +530,22 @@ export default {
       class="mx-2 mt-2 overflow-hidden rounded-lg"
       :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
     />
-
+    <div class="flex justify-end">
+      <NextButton
+        faded
+        xs
+        slate
+        class="!rounded-r-none rtl:rotate-180 !rounded-2xl !fixed z-10"
+        :icon="
+          isContactPanelOpen ? 'i-ph-caret-right-fill' : 'i-ph-caret-left-fill'
+        "
+        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
+        @click="onToggleContactPanel"
+      />
+    </div>
     <NextMessageList
       v-if="showNextBubbles"
+      ref="conversationPanelRef"
       class="conversation-panel"
       :current-user-id="currentUserId"
       :first-unread-id="unReadMessages[0]?.id"
@@ -537,7 +577,7 @@ export default {
         />
       </template>
     </NextMessageList>
-    <ul v-else class="conversation-panel">
+    <ul v-else ref="conversationPanelRef" class="conversation-panel">
       <transition name="slide-up">
         <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
         <li class="min-h-[4rem]">

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

@@ -10,7 +10,6 @@ import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 import SearchableDropdown from './SearchableDropdown.vue';
 import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import Button from 'dashboard/components-next/button/Button.vue';
-import { useEmitter } from 'dashboard/composables/emitter';
 
 const props = defineProps({
   conversationId: {
@@ -205,12 +204,6 @@ const createIssue = async () => {
   }
 };
 
-useEmitter('ui:linear_ticket_create_data', data => {
-  formState.title = data.title;
-  formState.description = data.description;
-  formState.priority = data.priority;
-});
-
 onMounted(getTeams);
 </script>
 

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

@@ -10,7 +10,6 @@ import { useTrack } from 'dashboard/composables';
 import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 import Button from 'dashboard/components-next/button/Button.vue';
-import { useEmitter } from 'dashboard/composables/emitter';
 
 const props = defineProps({
   conversationId: {
@@ -95,10 +94,6 @@ watch(
   }
 );
 
-useEmitter('ui:linear_ticket_create', () => {
-  shouldShowPopup.value = true;
-});
-
 onMounted(() => {
   loadLinkedIssue();
 });

app/javascript/dashboard/helper/actionCable.js

@@ -3,6 +3,9 @@ import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnec
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
+import { useImpersonation } from 'dashboard/composables/useImpersonation';
+
+const { isImpersonating } = useImpersonation();
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
@@ -30,6 +33,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
       'account.cache_invalidated': this.onCacheInvalidate,
+      'copilot.message.created': this.onCopilotMessageCreated,
     };
   }
 
@@ -52,6 +56,7 @@ class ActionCableConnector extends BaseActionCableConnector {
   };
 
   onPresenceUpdate = data => {
+    if (isImpersonating.value) return;
     this.app.$store.dispatch('contacts/updatePresence', data.contacts);
     this.app.$store.dispatch('agents/updatePresence', data.users);
     this.app.$store.dispatch('setCurrentUserAvailability', data.users);
@@ -185,6 +190,10 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('notifications/updateNotification', data);
   };
 
+  onCopilotMessageCreated = data => {
+    this.app.$store.dispatch('copilotMessages/upsert', data);
+  };
+
   onCacheInvalidate = data => {
     const keys = data.cache_keys;
     this.app.$store.dispatch('labels/revalidate', { newKey: keys.label });

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

@@ -0,0 +1,67 @@
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+import ActionCableConnector from '../actionCable';
+
+vi.mock('shared/helpers/mitt', () => ({
+  emitter: {
+    emit: vi.fn(),
+  },
+}));
+
+vi.mock('dashboard/composables/useImpersonation', () => ({
+  useImpersonation: () => ({
+    isImpersonating: { value: false },
+  }),
+}));
+
+global.chatwootConfig = {
+  websocketURL: 'wss://test.chatwoot.com',
+};
+
+describe('ActionCableConnector - Copilot Tests', () => {
+  let store;
+  let actionCable;
+  let mockDispatch;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockDispatch = vi.fn();
+    store = {
+      $store: {
+        dispatch: mockDispatch,
+        getters: {
+          getCurrentAccountId: 1,
+        },
+      },
+    };
+
+    actionCable = ActionCableConnector.init(store.$store, 'test-token');
+  });
+  describe('copilot event handlers', () => {
+    it('should register the copilot.message.created event handler', () => {
+      expect(Object.keys(actionCable.events)).toContain(
+        'copilot.message.created'
+      );
+      expect(actionCable.events['copilot.message.created']).toBe(
+        actionCable.onCopilotMessageCreated
+      );
+    });
+
+    it('should handle the copilot.message.created event through the ActionCable system', () => {
+      const copilotData = {
+        id: 2,
+        content: 'This is a copilot message from ActionCable',
+        conversation_id: 456,
+        created_at: '2025-05-27T15:58:04-06:00',
+        account_id: 1,
+      };
+      actionCable.onReceived({
+        event: 'copilot.message.created',
+        data: copilotData,
+      });
+      expect(mockDispatch).toHaveBeenCalledWith(
+        'copilotMessages/upsert',
+        copilotData
+      );
+    });
+  });
+});

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

@@ -234,7 +234,8 @@
       }
     },
     "SIDEBAR": {
-      "ACTIONS": "Actions"
+      "CONTACT": "Contact",
+      "COPILOT": "Copilot"
     }
   },
   "EMAIL_TRANSCRIPT": {
@@ -379,6 +380,9 @@
     "TWO": "{user} and {secondUser} are typing",
     "MULTIPLE": "{user} and {count} others are typing"
   },
+  "COPILOT": {
+    "TRY_THESE_PROMPTS": "Try these prompts"
+  },
   "GALLERY_VIEW": {
     "ERROR_DOWNLOADING": "Unable to download attachment. Please try again"
   }

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

@@ -328,17 +328,14 @@
     "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",
       "YOU": "You",
       "USE": "Use this",
       "RESET": "Reset",
-      "SELECT_ASSISTANT": "Select Assistant",
       "SHOW_STEPS": "Show steps",
+      "SELECT_ASSISTANT": "Select Assistant",
       "PROMPTS": {
         "SUMMARIZE": {
           "LABEL": "Summarize this conversation",
@@ -370,7 +367,6 @@
       "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
     },
     "ENTERPRISE_PAYWALL": {
-      "AVAILABLE_ON": "Captain AI feature is only available in a paid plan.",
       "UPGRADE_PROMPT": "Upgrade your plan to get access to our assistants, copilot and more.",
       "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
     },
@@ -413,6 +409,10 @@
           "PLACEHOLDER": "Enter assistant name",
           "ERROR": "The name is required"
         },
+        "TEMPERATURE": {
+          "LABEL": "Response Temperature",
+          "DESCRIPTION": "Adjust how creative or restrictive the assistant's responses should be. Lower values produce more focused and deterministic responses, while higher values allow for more creative and varied outputs."
+        },
         "DESCRIPTION": {
           "LABEL": "Description",
           "PLACEHOLDER": "Enter assistant description",

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

@@ -4,12 +4,14 @@
       "ALL": "All",
       "CONTACTS": "Contacts",
       "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages"
+      "MESSAGES": "Messages",
+      "ARTICLES": "Articles"
     },
     "SECTION": {
       "CONTACTS": "Contacts",
       "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages"
+      "MESSAGES": "Messages",
+      "ARTICLES": "Articles"
     },
     "VIEW_MORE": "View more",
     "LOAD_MORE": "Load more",

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -47,6 +47,7 @@ export default {
   emits: ['open', 'close', 'replyTo'],
   setup() {
     const { getPlainText } = useMessageFormatter();
+
     return {
       getPlainText,
     };
@@ -167,7 +168,7 @@ export default {
     </woot-modal>
     <!-- Confirm Deletion -->
     <woot-delete-modal
-      v-if="showDeleteModal"
+      v-if="showDeleteModal && enabledOptions['delete']"
       v-model:show="showDeleteModal"
       class="context-menu--delete-modal"
       :on-close="closeDeleteModal"
@@ -212,7 +213,7 @@ export default {
           @click.stop="handleCopy"
         />
         <MenuItem
-          v-if="enabledOptions['copy']"
+          v-if="enabledOptions['translate']"
           :option="{
             icon: 'translate',
             label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
@@ -222,6 +223,7 @@ export default {
         />
         <hr />
         <MenuItem
+          v-if="enabledOptions['copyLink']"
           :option="{
             icon: 'link',
             label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),

app/javascript/dashboard/modules/search/components/SearchResultArticleItem.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import MessageFormatter from 'shared/helpers/MessageFormatter';
+
+const props = defineProps({
+  id: { type: [String, Number], default: 0 },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  category: { type: String, default: '' },
+  locale: { type: String, default: '' },
+  content: { type: String, default: '' },
+  portalSlug: { type: String, required: true },
+  accountId: { type: [String, Number], default: 0 },
+});
+
+const MAX_LENGTH = 300;
+
+const navigateTo = computed(() => {
+  return frontendURL(
+    `accounts/${props.accountId}/portals/${props.portalSlug}/${props.locale}/articles/edit/${props.id}`
+  );
+});
+
+const truncatedContent = computed(() => {
+  if (!props.content) return props.description || '';
+
+  // Use MessageFormatter to properly convert markdown to plain text
+  const formatter = new MessageFormatter(props.content);
+  const plainText = formatter.plainText.trim();
+
+  return plainText.length > MAX_LENGTH
+    ? `${plainText.substring(0, MAX_LENGTH)}...`
+    : plainText;
+});
+</script>
+
+<template>
+  <router-link
+    :to="navigateTo"
+    class="flex items-start p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
+  >
+    <div
+      class="flex items-center justify-center w-6 h-6 mt-0.5 rounded bg-n-slate-3"
+    >
+      <Icon icon="i-lucide-library-big" class="text-n-slate-10" />
+    </div>
+    <div class="ltr:ml-2 rtl:mr-2 min-w-0 flex-1">
+      <div class="flex items-center gap-2">
+        <h5 class="text-sm font-medium truncate min-w-0 text-n-slate-12">
+          {{ title }}
+        </h5>
+        <span
+          v-if="category"
+          class="text-xs font-medium whitespace-nowrap capitalize bg-n-slate-3 px-1 py-0.5 rounded text-n-slate-10"
+        >
+          {{ category }}
+        </span>
+      </div>
+      <p
+        v-if="truncatedContent"
+        class="mt-1 text-sm text-n-slate-11 line-clamp-2"
+      >
+        {{ truncatedContent }}
+      </p>
+    </div>
+  </router-link>
+</template>

app/javascript/dashboard/modules/search/components/SearchResultArticlesList.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { useMapGetter } from 'dashboard/composables/store.js';
+
+import SearchResultSection from './SearchResultSection.vue';
+import SearchResultArticleItem from './SearchResultArticleItem.vue';
+
+defineProps({
+  articles: {
+    type: Array,
+    default: () => [],
+  },
+  query: {
+    type: String,
+    default: '',
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const accountId = useMapGetter('getCurrentAccountId');
+</script>
+
+<template>
+  <SearchResultSection
+    :title="$t('SEARCH.SECTION.ARTICLES')"
+    :empty="!articles.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="articles.length" class="space-y-1.5 list-none">
+      <li v-for="article in articles" :key="article.id">
+        <SearchResultArticleItem
+          :id="article.id"
+          :title="article.title"
+          :description="article.description"
+          :content="article.content"
+          :portal-slug="article.portal_slug"
+          :locale="article.locale"
+          :account-id="accountId"
+          :category="article.category_name"
+          :status="article.status"
+        />
+      </li>
+    </ul>
+  </SearchResultSection>
+</template>

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -8,6 +8,7 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
   CONTACT_PERMISSIONS,
+  PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 import {
   getUserPermissions,
@@ -22,6 +23,7 @@ import SearchTabs from './SearchTabs.vue';
 import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
+import SearchResultArticlesList from './SearchResultArticlesList.vue';
 
 const router = useRouter();
 const store = useStore();
@@ -34,6 +36,7 @@ const pages = ref({
   contacts: 1,
   conversations: 1,
   messages: 1,
+  articles: 1,
 });
 
 const currentUser = useMapGetter('getCurrentUser');
@@ -43,6 +46,7 @@ const conversationRecords = useMapGetter(
   'conversationSearch/getConversationRecords'
 );
 const messageRecords = useMapGetter('conversationSearch/getMessageRecords');
+const articleRecords = useMapGetter('conversationSearch/getArticleRecords');
 const uiFlags = useMapGetter('conversationSearch/getUIFlags');
 
 const addTypeToRecords = (records, type) =>
@@ -57,6 +61,9 @@ const mappedConversations = computed(() =>
 const mappedMessages = computed(() =>
   addTypeToRecords(messageRecords, 'message')
 );
+const mappedArticles = computed(() =>
+  addTypeToRecords(articleRecords, 'article')
+);
 
 const isSelectedTabAll = computed(() => selectedTab.value === 'all');
 
@@ -66,6 +73,7 @@ const sliceRecordsIfAllTab = items =>
 const contacts = computed(() => sliceRecordsIfAllTab(mappedContacts));
 const conversations = computed(() => sliceRecordsIfAllTab(mappedConversations));
 const messages = computed(() => sliceRecordsIfAllTab(mappedMessages));
+const articles = computed(() => sliceRecordsIfAllTab(mappedArticles));
 
 const filterByTab = tab =>
   computed(() => selectedTab.value === tab || isSelectedTabAll.value);
@@ -73,6 +81,7 @@ const filterByTab = tab =>
 const filterContacts = filterByTab('contacts');
 const filterConversations = filterByTab('conversations');
 const filterMessages = filterByTab('messages');
+const filterArticles = filterByTab('articles');
 
 const userPermissions = computed(() =>
   getUserPermissions(currentUser.value, currentAccountId.value)
@@ -80,7 +89,12 @@ const userPermissions = computed(() =>
 
 const TABS_CONFIG = {
   all: {
-    permissions: [CONTACT_PERMISSIONS, ...ROLES, ...CONVERSATION_PERMISSIONS],
+    permissions: [
+      CONTACT_PERMISSIONS,
+      ...ROLES,
+      ...CONVERSATION_PERMISSIONS,
+      PORTAL_PERMISSIONS,
+    ],
     count: () => null, // No count for all tab
   },
   contacts: {
@@ -95,6 +109,10 @@ const TABS_CONFIG = {
     permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
     count: () => mappedMessages.value.length,
   },
+  articles: {
+    permissions: [...ROLES, PORTAL_PERMISSIONS],
+    count: () => mappedArticles.value.length,
+  },
 };
 
 const tabs = computed(() => {
@@ -123,6 +141,10 @@ const totalSearchResultsCount = computed(() => {
       permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
       count: () => conversations.value.length + messages.value.length,
     },
+    articles: {
+      permissions: [...ROLES, PORTAL_PERMISSIONS],
+      count: () => articles.value.length,
+    },
   };
   return filterItemsByPermission(
     permissionCounts,
@@ -138,12 +160,13 @@ const activeTabIndex = computed(() => {
 });
 
 const isFetchingAny = computed(() => {
-  const { contact, message, conversation, isFetching } = uiFlags.value;
+  const { contact, message, conversation, article, isFetching } = uiFlags.value;
   return (
     isFetching ||
     contact.isFetching ||
     message.isFetching ||
-    conversation.isFetching
+    conversation.isFetching ||
+    article.isFetching
   );
 });
 
@@ -171,6 +194,7 @@ const showLoadMore = computed(() => {
     contacts: mappedContacts.value,
     conversations: mappedConversations.value,
     messages: mappedMessages.value,
+    articles: mappedArticles.value,
   }[selectedTab.value];
 
   return (
@@ -185,10 +209,11 @@ const showViewMore = computed(() => ({
   conversations:
     mappedConversations.value?.length > 5 && isSelectedTabAll.value,
   messages: mappedMessages.value?.length > 5 && isSelectedTabAll.value,
+  articles: mappedArticles.value?.length > 5 && isSelectedTabAll.value,
 }));
 
 const clearSearchResult = () => {
-  pages.value = { contacts: 1, conversations: 1, messages: 1 };
+  pages.value = { contacts: 1, conversations: 1, messages: 1, articles: 1 };
   store.dispatch('conversationSearch/clearSearchResults');
 };
 
@@ -214,6 +239,7 @@ const loadMore = () => {
     contacts: 'conversationSearch/contactSearch',
     conversations: 'conversationSearch/conversationSearch',
     messages: 'conversationSearch/messageSearch',
+    articles: 'conversationSearch/articleSearch',
   };
 
   if (uiFlags.value.isFetching || selectedTab.value === 'all') return;
@@ -328,6 +354,28 @@ onUnmounted(() => {
               />
             </Policy>
 
+            <Policy
+              :permissions="[...ROLES, PORTAL_PERMISSIONS]"
+              class="flex flex-col justify-center"
+            >
+              <SearchResultArticlesList
+                v-if="filterArticles"
+                :is-fetching="uiFlags.article.isFetching"
+                :articles="articles"
+                :query="query"
+                :show-title="isSelectedTabAll"
+              />
+              <NextButton
+                v-if="showViewMore.articles"
+                :label="t(`SEARCH.VIEW_MORE`)"
+                icon="i-lucide-eye"
+                slate
+                sm
+                outline
+                @click="selectedTab = 'articles'"
+              />
+            </Policy>
+
             <div v-if="showLoadMore" class="flex justify-center mt-4 mb-6">
               <NextButton
                 v-if="!isSelectedTabAll"

app/javascript/dashboard/modules/search/search.routes.js

@@ -3,6 +3,7 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
   CONTACT_PERMISSIONS,
+  PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
 import SearchView from './components/SearchView.vue';
@@ -12,7 +13,12 @@ export const routes = [
     path: frontendURL('accounts/:accountId/search'),
     name: 'search',
     meta: {
-      permissions: [...ROLES, ...CONVERSATION_PERMISSIONS, CONTACT_PERMISSIONS],
+      permissions: [
+        ...ROLES,
+        ...CONVERSATION_PERMISSIONS,
+        CONTACT_PERMISSIONS,
+        PORTAL_PERMISSIONS,
+      ],
     },
     component: SearchView,
   },

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

@@ -1,15 +1,6 @@
-<script setup>
-import {
-  defineAsyncComponent,
-  ref,
-  computed,
-  onMounted,
-  onUnmounted,
-  nextTick,
-  watch,
-} from 'vue';
-import { useRoute } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
+<script>
+import { defineAsyncComponent, ref } from 'vue';
+import { mapGetters } from 'vuex';
 
 import NextSidebar from 'next/sidebar/Sidebar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
@@ -18,8 +9,6 @@ import AccountSelector from 'dashboard/components/layout/sidebarComponents/Accou
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';
-import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';
-import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -27,160 +16,178 @@ import { useAccount } from 'dashboard/composables/useAccount';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { emitter } from 'shared/helpers/mitt';
 
 const CommandBar = defineAsyncComponent(
   () => import('./commands/commandbar.vue')
 );
+
 const Sidebar = defineAsyncComponent(
   () => import('../../components/layout/Sidebar.vue')
 );
+import { emitter } from 'shared/helpers/mitt';
 
-const route = useRoute();
+export default {
+  components: {
+    NextSidebar,
+    Sidebar,
+    CommandBar,
+    WootKeyShortcutModal,
+    AddAccountModal,
+    AccountSelector,
+    AddLabelModal,
+    NotificationPanel,
+    UpgradePage,
+  },
+  setup() {
+    const upgradePageRef = ref(null);
+    const { uiSettings, updateUISettings } = useUISettings();
+    const { accountId } = useAccount();
 
-const upgradePageRef = ref(null);
-const { uiSettings, updateUISettings } = useUISettings();
-const { currentAccount } = useAccount();
+    return {
+      uiSettings,
+      updateUISettings,
+      accountId,
+      upgradePageRef,
+    };
+  },
+  data() {
+    return {
+      showAccountModal: false,
+      showCreateAccountModal: false,
+      showAddLabelModal: false,
+      showShortcutModal: false,
+      isNotificationPanel: false,
+      displayLayoutType: '',
+      hasBanner: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    currentRoute() {
+      return ' ';
+    },
+    showUpgradePage() {
+      return this.upgradePageRef?.shouldShowUpgradePage;
+    },
+    bypassUpgradePage() {
+      return [
+        'billing_settings_index',
+        'settings_inbox_list',
+        'agent_list',
+      ].includes(this.$route.name);
+    },
+    isSidebarOpen() {
+      const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
+      return showSecondarySidebar;
+    },
+    previouslyUsedDisplayType() {
+      const {
+        previously_used_conversation_display_type: conversationDisplayType,
+      } = this.uiSettings;
+      return conversationDisplayType;
+    },
+    previouslyUsedSidebarView() {
+      const { previously_used_sidebar_view: showSecondarySidebar } =
+        this.uiSettings;
+      return showSecondarySidebar;
+    },
+    showNextSidebar() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
+  },
+  watch: {
+    displayLayoutType() {
+      const { LAYOUT_TYPES } = wootConstants;
+      this.updateUISettings({
+        conversation_display_type:
+          this.displayLayoutType === LAYOUT_TYPES.EXPANDED
+            ? LAYOUT_TYPES.EXPANDED
+            : this.previouslyUsedDisplayType,
+        show_secondary_sidebar:
+          this.displayLayoutType === LAYOUT_TYPES.EXPANDED
+            ? false
+            : this.previouslyUsedSidebarView,
+      });
+    },
+  },
+  mounted() {
+    this.handleResize();
+    this.$nextTick(this.checkBanner);
+    window.addEventListener('resize', this.handleResize);
+    window.addEventListener('resize', this.checkBanner);
+    emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('resize', this.checkBanner);
+    emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+  },
 
-const showAccountModal = ref(false);
-const showCreateAccountModal = ref(false);
-const showAddLabelModal = ref(false);
-const showShortcutModal = ref(false);
-const isNotificationPanel = ref(false);
-const displayLayoutType = ref('');
-const hasBanner = ref('');
+  methods: {
+    checkBanner() {
+      this.hasBanner =
+        document.getElementsByClassName('woot-banner').length > 0;
+    },
+    handleResize() {
+      const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
+      let throttled = false;
+      const delay = 150;
 
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
+      if (throttled) {
+        return;
+      }
+      throttled = true;
 
-const currentRoute = computed(() => ' ');
-
-const showUpgradePage = computed(
-  () => upgradePageRef.value?.shouldShowUpgradePage
-);
-
-const bypassUpgradePage = computed(() =>
-  ['billing_settings_index', 'settings_inbox_list', 'agent_list'].includes(
-    route.name
-  )
-);
-
-const isSidebarOpen = computed(() => {
-  const { show_secondary_sidebar: showSecondarySidebar } = uiSettings;
-  return showSecondarySidebar;
-});
-
-const previouslyUsedDisplayType = computed(() => {
-  const { previously_used_conversation_display_type: conversationDisplayType } =
-    uiSettings;
-  return conversationDisplayType;
-});
-
-const previouslyUsedSidebarView = computed(() => {
-  const { previously_used_sidebar_view: showSecondarySidebar } = uiSettings;
-  return showSecondarySidebar;
-});
-
-const showNextSidebar = computed(() =>
-  isFeatureEnabledonAccount.value(
-    currentAccount.value?.id,
-    FEATURE_FLAGS.CHATWOOT_V4
-  )
-);
-
-const checkBanner = () => {
-  hasBanner.value = document.getElementsByClassName('woot-banner').length > 0;
+      setTimeout(() => {
+        throttled = false;
+        if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
+          this.displayLayoutType = LAYOUT_TYPES.EXPANDED;
+        } else {
+          this.displayLayoutType = LAYOUT_TYPES.CONDENSED;
+        }
+      }, delay);
+    },
+    toggleSidebar() {
+      this.updateUISettings({
+        show_secondary_sidebar: !this.isSidebarOpen,
+        previously_used_sidebar_view: !this.isSidebarOpen,
+      });
+    },
+    openCreateAccountModal() {
+      this.showAccountModal = false;
+      this.showCreateAccountModal = true;
+    },
+    closeCreateAccountModal() {
+      this.showCreateAccountModal = false;
+    },
+    toggleAccountModal() {
+      this.showAccountModal = !this.showAccountModal;
+    },
+    toggleKeyShortcutModal() {
+      this.showShortcutModal = true;
+    },
+    closeKeyShortcutModal() {
+      this.showShortcutModal = false;
+    },
+    showAddLabelPopup() {
+      this.showAddLabelModal = true;
+    },
+    hideAddLabelPopup() {
+      this.showAddLabelModal = false;
+    },
+    openNotificationPanel() {
+      this.isNotificationPanel = true;
+    },
+    closeNotificationPanel() {
+      this.isNotificationPanel = false;
+    },
+  },
 };
-
-const handleResize = () => {
-  const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
-  let throttled = false;
-  const delay = 150;
-
-  if (throttled) return;
-  throttled = true;
-
-  setTimeout(() => {
-    throttled = false;
-    displayLayoutType.value =
-      window.innerWidth <= SMALL_SCREEN_BREAKPOINT
-        ? LAYOUT_TYPES.EXPANDED
-        : LAYOUT_TYPES.CONDENSED;
-  }, delay);
-};
-
-const toggleSidebar = () => {
-  updateUISettings({
-    show_secondary_sidebar: !isSidebarOpen.value,
-    previously_used_sidebar_view: !isSidebarOpen.value,
-  });
-};
-
-const openCreateAccountModal = () => {
-  showAccountModal.value = false;
-  showCreateAccountModal.value = true;
-};
-
-const closeCreateAccountModal = () => {
-  showCreateAccountModal.value = false;
-};
-
-const toggleAccountModal = () => {
-  showAccountModal.value = !showAccountModal.value;
-};
-
-const toggleKeyShortcutModal = () => {
-  showShortcutModal.value = true;
-};
-
-const closeKeyShortcutModal = () => {
-  showShortcutModal.value = false;
-};
-
-const showAddLabelPopup = () => {
-  showAddLabelModal.value = true;
-};
-
-const hideAddLabelPopup = () => {
-  showAddLabelModal.value = false;
-};
-
-const openNotificationPanel = () => {
-  isNotificationPanel.value = true;
-};
-
-const closeNotificationPanel = () => {
-  isNotificationPanel.value = false;
-};
-
-watch(displayLayoutType, () => {
-  const { LAYOUT_TYPES } = wootConstants;
-  updateUISettings({
-    conversation_display_type:
-      displayLayoutType.value === LAYOUT_TYPES.EXPANDED
-        ? LAYOUT_TYPES.EXPANDED
-        : previouslyUsedDisplayType.value,
-    show_secondary_sidebar:
-      displayLayoutType.value === LAYOUT_TYPES.EXPANDED
-        ? false
-        : previouslyUsedSidebarView.value,
-  });
-});
-
-onMounted(() => {
-  handleResize();
-  nextTick(checkBanner);
-  window.addEventListener('resize', handleResize);
-  window.addEventListener('resize', checkBanner);
-  emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, toggleSidebar);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
-  window.removeEventListener('resize', checkBanner);
-  emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, toggleSidebar);
-});
 </script>
 
 <template>
@@ -211,8 +218,6 @@ onUnmounted(() => {
       />
       <template v-if="!showUpgradePage">
         <router-view />
-        <CopilotLauncher />
-        <CopilotContainer />
         <CommandBar />
         <NotificationPanel
           v-if="isNotificationPanel"

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

@@ -29,6 +29,10 @@ const props = defineProps({
     type: Number,
     default: undefined,
   },
+  onToggle: {
+    type: Function,
+    default: () => {},
+  },
 });
 
 const {
@@ -85,6 +89,8 @@ watch(conversationId, (newConversationId, prevConversationId) => {
 
 watch(contactId, getContactDetails);
 
+const onPanelToggle = props.onToggle;
+
 const onDragEnd = () => {
   dragging.value = false;
   updateUISettings({
@@ -101,7 +107,11 @@ onMounted(() => {
 
 <template>
   <div class="w-full">
-    <ContactInfo :contact="contact" :channel-type="channelType" />
+    <ContactInfo
+      :contact="contact"
+      :channel-type="channelType"
+      @toggle-panel="onPanelToggle"
+    />
     <div class="list-group pb-8">
       <Draggable
         :list="conversationSidebarItems"

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

@@ -10,17 +10,13 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import ConversationSidebar from 'dashboard/components/widgets/conversation/ConversationSidebar.vue';
-import PanelButtons from './PanelButtons.vue';
 
 export default {
   components: {
     ChatList,
     ConversationBox,
-    ConversationSidebar,
     PopOverSearch,
     CmdBarConversationSnooze,
-    PanelButtons,
   },
   beforeRouteLeave(to, from, next) {
     // Clear selected state if navigating away from a conversation to a route without a conversationId to prevent stale data issues
@@ -91,6 +87,14 @@ export default {
         this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
+    isContactPanelOpen() {
+      if (this.currentChat.id) {
+        const { is_contact_sidebar_open: isContactSidebarOpen } =
+          this.uiSettings;
+        return isContactSidebarOpen;
+      }
+      return false;
+    },
     showPopOverSearch() {
       return !this.isFeatureEnabledonAccount(
         this.accountId,
@@ -185,7 +189,11 @@ export default {
         this.$store.dispatch('clearSelectedState');
       }
     },
-
+    onToggleContactPanel() {
+      this.updateUISettings({
+        is_contact_sidebar_open: !this.isContactPanelOpen,
+      });
+    },
     onSearch() {
       this.showSearchModal = true;
     },
@@ -217,11 +225,10 @@ export default {
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"
+      :is-contact-panel-open="isContactPanelOpen"
       :is-on-expanded-layout="isOnExpandedLayout"
-    >
-      <PanelButtons v-if="currentChat.id" />
-    </ConversationBox>
-    <ConversationSidebar :current-chat="currentChat" />
+      @contact-panel-toggle="onToggleContactPanel"
+    />
     <CmdBarConversationSnooze />
   </section>
 </template>

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

@@ -1,42 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useStore } from 'vuex';
-
-const store = useStore();
-
-const handleConversationSidebarToggle = () => {
-  store.dispatch('uiState/set', {
-    isConversationSidebarOpen: true,
-    isCopilotSidebarOpen: false,
-  });
-};
-
-const handleCopilotSidebarToggle = () => {
-  store.dispatch('uiState/set', {
-    isCopilotSidebarOpen: true,
-    isConversationSidebarOpen: false,
-  });
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col justify-center items-center absolute top-24 right-1 bg-n-alpha-2 border border-n-weak rounded-lg bg-n-background gap-2 py-0.5 px-0.5"
-  >
-    <Button
-      ghost
-      slate
-      sm
-      class="!text-sm"
-      icon="i-ph-user-bold"
-      @click="handleConversationSidebarToggle"
-    />
-    <Button
-      ghost
-      class="!text-sm !text-n-iris-11"
-      sm
-      icon="i-woot-captain"
-      @click="handleCopilotSidebarToggle"
-    />
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue

@@ -117,7 +117,7 @@ export default {
   <div class="flex flex-col h-auto overflow-auto integration-hooks">
     <woot-modal-header
       :header-title="integration.name"
-      :header-content="integration.short_description || integration.description"
+      :header-content="integration.short_description"
     />
     <FormKit
       v-model="values"

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

@@ -0,0 +1,19 @@
+import CopilotMessagesAPI from 'dashboard/api/captain/copilotMessages';
+import { createStore } from './storeFactory';
+
+export default createStore({
+  name: 'CopilotMessages',
+  API: CopilotMessagesAPI,
+  getters: {
+    getMessagesByThreadId: state => copilotThreadId => {
+      return state.records.filter(
+        record => record.copilot_thread?.id === Number(copilotThreadId)
+      );
+    },
+  },
+  actions: mutationTypes => ({
+    upsert({ commit }, data) {
+      commit(mutationTypes.UPSERT, data);
+    },
+  }),
+});

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

@@ -0,0 +1,7 @@
+import CopilotThreadsAPI from 'dashboard/api/captain/copilotThreads';
+import { createStore } from './storeFactory';
+
+export default createStore({
+  name: 'CopilotThreads',
+  API: CopilotThreadsAPI,
+});

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

@@ -1,5 +1,11 @@
-import { throwErrorMessage } from 'dashboard/store/utils/api';
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import {
+  createRecord,
+  deleteRecord,
+  getRecords,
+  showRecord,
+  updateRecord,
+} from './storeFactoryHelper';
 
 export const generateMutationTypes = name => {
   const capitalizedName = name.toUpperCase();
@@ -10,6 +16,7 @@ export const generateMutationTypes = name => {
     EDIT: `EDIT_${capitalizedName}`,
     DELETE: `DELETE_${capitalizedName}`,
     SET_META: `SET_${capitalizedName}_META`,
+    UPSERT: `UPSERT_${capitalizedName}`,
   };
 };
 
@@ -33,7 +40,6 @@ export const createGetters = () => ({
   getMeta: state => state.meta,
 });
 
-// store/mutations.js
 export const createMutations = mutationTypes => ({
   [mutationTypes.SET_UI_FLAG](state, data) {
     state.uiFlags = {
@@ -51,78 +57,19 @@ export const createMutations = mutationTypes => ({
   [mutationTypes.ADD]: MutationHelpers.create,
   [mutationTypes.EDIT]: MutationHelpers.update,
   [mutationTypes.DELETE]: MutationHelpers.destroy,
+  [mutationTypes.UPSERT]: MutationHelpers.setSingleRecord,
 });
 
-// store/actions/crud.js
 export const createCrudActions = (API, mutationTypes) => ({
-  async get({ commit }, params = {}) {
-    commit(mutationTypes.SET_UI_FLAG, { fetchingList: true });
-    try {
-      const response = await API.get(params);
-      commit(mutationTypes.SET, response.data.payload);
-      commit(mutationTypes.SET_META, response.data.meta);
-      return response.data.payload;
-    } catch (error) {
-      return throwErrorMessage(error);
-    } finally {
-      commit(mutationTypes.SET_UI_FLAG, { fetchingList: false });
-    }
-  },
-
-  async show({ commit }, id) {
-    commit(mutationTypes.SET_UI_FLAG, { fetchingItem: true });
-    try {
-      const response = await API.show(id);
-      commit(mutationTypes.ADD, response.data);
-      return response.data;
-    } catch (error) {
-      return throwErrorMessage(error);
-    } finally {
-      commit(mutationTypes.SET_UI_FLAG, { fetchingItem: false });
-    }
-  },
-
-  async create({ commit }, dataObj) {
-    commit(mutationTypes.SET_UI_FLAG, { creatingItem: true });
-    try {
-      const response = await API.create(dataObj);
-      commit(mutationTypes.ADD, response.data);
-      return response.data;
-    } catch (error) {
-      return throwErrorMessage(error);
-    } finally {
-      commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
-    }
-  },
-
-  async update({ commit }, { id, ...updateObj }) {
-    commit(mutationTypes.SET_UI_FLAG, { updatingItem: true });
-    try {
-      const response = await API.update(id, updateObj);
-      commit(mutationTypes.EDIT, response.data);
-      return response.data;
-    } catch (error) {
-      return throwErrorMessage(error);
-    } finally {
-      commit(mutationTypes.SET_UI_FLAG, { updatingItem: false });
-    }
-  },
-
-  async delete({ commit }, id) {
-    commit(mutationTypes.SET_UI_FLAG, { deletingItem: true });
-    try {
-      await API.delete(id);
-      commit(mutationTypes.DELETE, id);
-      return id;
-    } catch (error) {
-      return throwErrorMessage(error);
-    } finally {
-      commit(mutationTypes.SET_UI_FLAG, { deletingItem: false });
-    }
-  },
+  get: getRecords(mutationTypes, API),
+  show: showRecord(mutationTypes, API),
+  create: createRecord(mutationTypes, API),
+  update: updateRecord(mutationTypes, API),
+  delete: deleteRecord(mutationTypes, API),
 });
+
 export const createStore = options => {
-  const { name, API, actions } = options;
+  const { name, API, actions, getters } = options;
   const mutationTypes = generateMutationTypes(name);
 
   const customActions = actions ? actions(mutationTypes) : {};
@@ -130,7 +77,10 @@ export const createStore = options => {
   return {
     namespaced: true,
     state: createInitialState(),
-    getters: createGetters(),
+    getters: {
+      ...createGetters(),
+      ...(getters || {}),
+    },
     mutations: createMutations(mutationTypes),
     actions: {
       ...createCrudActions(API, mutationTypes),

app/javascript/dashboard/store/captain/storeFactory.spec.js

@@ -0,0 +1,380 @@
+import { throwErrorMessage } from 'dashboard/store/utils/api';
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import {
+  generateMutationTypes,
+  createInitialState,
+  createGetters,
+  createMutations,
+  createCrudActions,
+  createStore,
+} from './storeFactory';
+
+vi.mock('dashboard/store/utils/api', () => ({
+  throwErrorMessage: vi.fn(),
+}));
+
+vi.mock('shared/helpers/vuex/mutationHelpers', () => ({
+  set: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  destroy: vi.fn(),
+  setSingleRecord: vi.fn(),
+}));
+
+describe('storeFactory', () => {
+  describe('generateMutationTypes', () => {
+    it('generates correct mutation types with capitalized name', () => {
+      const result = generateMutationTypes('test');
+      expect(result).toEqual({
+        SET_UI_FLAG: 'SET_TEST_UI_FLAG',
+        SET: 'SET_TEST',
+        ADD: 'ADD_TEST',
+        EDIT: 'EDIT_TEST',
+        DELETE: 'DELETE_TEST',
+        SET_META: 'SET_TEST_META',
+        UPSERT: 'UPSERT_TEST',
+      });
+    });
+  });
+
+  describe('createInitialState', () => {
+    it('returns the correct initial state structure', () => {
+      const result = createInitialState();
+      expect(result).toEqual({
+        records: [],
+        meta: {},
+        uiFlags: {
+          fetchingList: false,
+          fetchingItem: false,
+          creatingItem: false,
+          updatingItem: false,
+          deletingItem: false,
+        },
+      });
+    });
+  });
+
+  describe('createGetters', () => {
+    it('returns getters with correct implementations', () => {
+      const getters = createGetters();
+
+      const state = {
+        records: [{ id: 2 }, { id: 1 }, { id: 3 }],
+        uiFlags: { fetchingList: true },
+        meta: { totalCount: 10, page: 1 },
+      };
+      expect(getters.getRecords(state)).toEqual([
+        { id: 3 },
+        { id: 2 },
+        { id: 1 },
+      ]);
+
+      expect(getters.getRecord(state)(2)).toEqual({ id: 2 });
+      expect(getters.getRecord(state)(4)).toEqual({});
+
+      expect(getters.getUIFlags(state)).toEqual({
+        fetchingList: true,
+      });
+
+      expect(getters.getMeta(state)).toEqual({
+        totalCount: 10,
+        page: 1,
+      });
+    });
+  });
+
+  describe('createMutations', () => {
+    it('creates mutations with correct implementations', () => {
+      const mutationTypes = generateMutationTypes('test');
+      const mutations = createMutations(mutationTypes);
+
+      const state = { uiFlags: { fetchingList: false } };
+      mutations[mutationTypes.SET_UI_FLAG](state, { fetchingList: true });
+      expect(state.uiFlags).toEqual({ fetchingList: true });
+
+      const metaState = { meta: {} };
+      mutations[mutationTypes.SET_META](metaState, {
+        total_count: '10',
+        page: '2',
+      });
+      expect(metaState.meta).toEqual({ totalCount: 10, page: 2 });
+
+      expect(mutations[mutationTypes.SET]).toBe(MutationHelpers.set);
+      expect(mutations[mutationTypes.ADD]).toBe(MutationHelpers.create);
+      expect(mutations[mutationTypes.EDIT]).toBe(MutationHelpers.update);
+      expect(mutations[mutationTypes.DELETE]).toBe(MutationHelpers.destroy);
+      expect(mutations[mutationTypes.UPSERT]).toBe(
+        MutationHelpers.setSingleRecord
+      );
+    });
+  });
+
+  describe('createCrudActions', () => {
+    let API;
+    let commit;
+    let mutationTypes;
+    let actions;
+
+    beforeEach(() => {
+      API = {
+        get: vi.fn(),
+        show: vi.fn(),
+        create: vi.fn(),
+        update: vi.fn(),
+        delete: vi.fn(),
+      };
+      commit = vi.fn();
+      mutationTypes = generateMutationTypes('test');
+      actions = createCrudActions(API, mutationTypes);
+    });
+
+    describe('get action', () => {
+      it('handles successful API response', async () => {
+        const payload = [{ id: 1 }];
+        const meta = { total_count: 10, page: 1 };
+        API.get.mockResolvedValue({ data: { payload, meta } });
+
+        const result = await actions.get({ commit });
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          fetchingList: true,
+        });
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET, payload);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_META, meta);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          fetchingList: false,
+        });
+        expect(result).toEqual(payload);
+      });
+
+      it('handles API error', async () => {
+        const error = new Error('API Error');
+        API.get.mockRejectedValue(error);
+        throwErrorMessage.mockReturnValue('Error thrown');
+
+        const result = await actions.get({ commit });
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          fetchingList: true,
+        });
+        expect(throwErrorMessage).toHaveBeenCalledWith(error);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          fetchingList: false,
+        });
+        expect(result).toEqual('Error thrown');
+      });
+    });
+
+    describe('show action', () => {
+      it('handles successful API response', async () => {
+        const data = { id: 1, name: 'Test' };
+        API.show.mockResolvedValue({ data });
+
+        const result = await actions.show({ commit }, 1);
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          fetchingItem: true,
+        });
+        expect(commit).toHaveBeenCalledWith(mutationTypes.ADD, data);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          fetchingItem: false,
+        });
+        expect(result).toEqual(data);
+      });
+
+      it('handles API error', async () => {
+        const error = new Error('API Error');
+        API.show.mockRejectedValue(error);
+        throwErrorMessage.mockReturnValue('Error thrown');
+
+        const result = await actions.show({ commit }, 1);
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          fetchingItem: true,
+        });
+        expect(throwErrorMessage).toHaveBeenCalledWith(error);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          fetchingItem: false,
+        });
+        expect(result).toEqual('Error thrown');
+      });
+    });
+
+    describe('create action', () => {
+      it('handles successful API response', async () => {
+        const data = { id: 1, name: 'Test' };
+        API.create.mockResolvedValue({ data });
+
+        const result = await actions.create({ commit }, { name: 'Test' });
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          creatingItem: true,
+        });
+        expect(commit).toHaveBeenCalledWith(mutationTypes.UPSERT, data);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          creatingItem: false,
+        });
+        expect(result).toEqual(data);
+      });
+
+      it('handles API error', async () => {
+        const error = new Error('API Error');
+        API.create.mockRejectedValue(error);
+        throwErrorMessage.mockReturnValue('Error thrown');
+
+        const result = await actions.create({ commit }, { name: 'Test' });
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          creatingItem: true,
+        });
+        expect(throwErrorMessage).toHaveBeenCalledWith(error);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          creatingItem: false,
+        });
+        expect(result).toEqual('Error thrown');
+      });
+    });
+
+    describe('update action', () => {
+      it('handles successful API response', async () => {
+        const data = { id: 1, name: 'Updated' };
+        API.update.mockResolvedValue({ data });
+
+        const result = await actions.update(
+          { commit },
+          { id: 1, name: 'Updated' }
+        );
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          updatingItem: true,
+        });
+        expect(API.update).toHaveBeenCalledWith(1, { name: 'Updated' });
+        expect(commit).toHaveBeenCalledWith(mutationTypes.EDIT, data);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          updatingItem: false,
+        });
+        expect(result).toEqual(data);
+      });
+
+      it('handles API error', async () => {
+        const error = new Error('API Error');
+        API.update.mockRejectedValue(error);
+        throwErrorMessage.mockReturnValue('Error thrown');
+
+        const result = await actions.update(
+          { commit },
+          { id: 1, name: 'Updated' }
+        );
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          updatingItem: true,
+        });
+        expect(throwErrorMessage).toHaveBeenCalledWith(error);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          updatingItem: false,
+        });
+        expect(result).toEqual('Error thrown');
+      });
+    });
+
+    describe('delete action', () => {
+      it('handles successful API response', async () => {
+        API.delete.mockResolvedValue({});
+
+        const result = await actions.delete({ commit }, 1);
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          deletingItem: true,
+        });
+        expect(API.delete).toHaveBeenCalledWith(1);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.DELETE, 1);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          deletingItem: false,
+        });
+        expect(result).toEqual(1);
+      });
+
+      it('handles API error', async () => {
+        const error = new Error('API Error');
+        API.delete.mockRejectedValue(error);
+        throwErrorMessage.mockReturnValue('Error thrown');
+
+        const result = await actions.delete({ commit }, 1);
+
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          deletingItem: true,
+        });
+        expect(throwErrorMessage).toHaveBeenCalledWith(error);
+        expect(commit).toHaveBeenCalledWith(mutationTypes.SET_UI_FLAG, {
+          deletingItem: false,
+        });
+        expect(result).toEqual('Error thrown');
+      });
+    });
+  });
+
+  describe('createStore', () => {
+    it('creates a complete store with default options', () => {
+      const API = {};
+      const store = createStore({ name: 'test', API });
+
+      expect(store.namespaced).toBe(true);
+      expect(store.state).toEqual(createInitialState());
+      expect(Object.keys(store.getters)).toEqual([
+        'getRecords',
+        'getRecord',
+        'getUIFlags',
+        'getMeta',
+      ]);
+      expect(Object.keys(store.mutations)).toEqual([
+        'SET_TEST_UI_FLAG',
+        'SET_TEST_META',
+        'SET_TEST',
+        'ADD_TEST',
+        'EDIT_TEST',
+        'DELETE_TEST',
+        'UPSERT_TEST',
+      ]);
+      expect(Object.keys(store.actions)).toEqual([
+        'get',
+        'show',
+        'create',
+        'update',
+        'delete',
+      ]);
+    });
+
+    it('creates a store with custom actions and getters', () => {
+      const API = {};
+      const customGetters = { customGetter: () => 'custom' };
+      const customActions = () => ({
+        customAction: () => 'custom',
+      });
+
+      const store = createStore({
+        name: 'test',
+        API,
+        getters: customGetters,
+        actions: customActions,
+      });
+
+      expect(store.getters).toHaveProperty('customGetter');
+      expect(store.actions).toHaveProperty('customAction');
+      expect(Object.keys(store.getters)).toEqual([
+        'getRecords',
+        'getRecord',
+        'getUIFlags',
+        'getMeta',
+        'customGetter',
+      ]);
+      expect(Object.keys(store.actions)).toEqual([
+        'get',
+        'show',
+        'create',
+        'update',
+        'delete',
+        'customAction',
+      ]);
+    });
+  });
+});

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

@@ -0,0 +1,77 @@
+import { throwErrorMessage } from 'dashboard/store/utils/api';
+
+export const getRecords =
+  (mutationTypes, API) =>
+  async ({ commit }, params = {}) => {
+    commit(mutationTypes.SET_UI_FLAG, { fetchingList: true });
+    try {
+      const response = await API.get(params);
+      commit(mutationTypes.SET, response.data.payload);
+      commit(mutationTypes.SET_META, response.data.meta);
+      return response.data.payload;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(mutationTypes.SET_UI_FLAG, { fetchingList: false });
+    }
+  };
+
+export const showRecord =
+  (mutationTypes, API) =>
+  async ({ commit }, id) => {
+    commit(mutationTypes.SET_UI_FLAG, { fetchingItem: true });
+    try {
+      const response = await API.show(id);
+      commit(mutationTypes.ADD, response.data);
+      return response.data;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(mutationTypes.SET_UI_FLAG, { fetchingItem: false });
+    }
+  };
+
+export const createRecord =
+  (mutationTypes, API) =>
+  async ({ commit }, dataObj) => {
+    commit(mutationTypes.SET_UI_FLAG, { creatingItem: true });
+    try {
+      const response = await API.create(dataObj);
+      commit(mutationTypes.UPSERT, response.data);
+      return response.data;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
+    }
+  };
+
+export const updateRecord =
+  (mutationTypes, API) =>
+  async ({ commit }, { id, ...updateObj }) => {
+    commit(mutationTypes.SET_UI_FLAG, { updatingItem: true });
+    try {
+      const response = await API.update(id, updateObj);
+      commit(mutationTypes.EDIT, response.data);
+      return response.data;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(mutationTypes.SET_UI_FLAG, { updatingItem: false });
+    }
+  };
+
+export const deleteRecord =
+  (mutationTypes, API) =>
+  async ({ commit }, id) => {
+    commit(mutationTypes.SET_UI_FLAG, { deletingItem: true });
+    try {
+      await API.delete(id);
+      commit(mutationTypes.DELETE, id);
+      return id;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(mutationTypes.SET_UI_FLAG, { deletingItem: false });
+    }
+  };

app/javascript/dashboard/store/index.js

@@ -51,7 +51,9 @@ import captainDocuments from './captain/document';
 import captainResponses from './captain/response';
 import captainInboxes from './captain/inboxes';
 import captainBulkActions from './captain/bulkActions';
-import uiState from './modules/uiState';
+import copilotThreads from './captain/copilotThreads';
+import copilotMessages from './captain/copilotMessages';
+
 const plugins = [];
 
 export default createStore({
@@ -107,7 +109,8 @@ export default createStore({
     captainResponses,
     captainInboxes,
     captainBulkActions,
-    uiState,
+    copilotThreads,
+    copilotMessages,
   },
   plugins,
 });

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

@@ -5,12 +5,14 @@ export const initialState = {
   contactRecords: [],
   conversationRecords: [],
   messageRecords: [],
+  articleRecords: [],
   uiFlags: {
     isFetching: false,
     isSearchCompleted: false,
     contact: { isFetching: false },
     conversation: { isFetching: false },
     message: { isFetching: false },
+    article: { isFetching: false },
   },
 };
 
@@ -27,6 +29,9 @@ export const getters = {
   getMessageRecords(state) {
     return state.messageRecords;
   },
+  getArticleRecords(state) {
+    return state.articleRecords;
+  },
   getUIFlags(state) {
     return state.uiFlags;
   },
@@ -65,6 +70,7 @@ export const actions = {
         dispatch('contactSearch', { q }),
         dispatch('conversationSearch', { q }),
         dispatch('messageSearch', { q }),
+        dispatch('articleSearch', { q }),
       ]);
     } catch (error) {
       // Ignore error
@@ -108,6 +114,17 @@ export const actions = {
       commit(types.MESSAGE_SEARCH_SET_UI_FLAG, { isFetching: false });
     }
   },
+  async articleSearch({ commit }, { q, page = 1 }) {
+    commit(types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: true });
+    try {
+      const { data } = await SearchAPI.articles({ q, page });
+      commit(types.ARTICLE_SEARCH_SET, data.payload.articles);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: false });
+    }
+  },
   async clearSearchResults({ commit }) {
     commit(types.CLEAR_SEARCH_RESULTS);
   },
@@ -126,6 +143,9 @@ export const mutations = {
   [types.MESSAGE_SEARCH_SET](state, records) {
     state.messageRecords = [...state.messageRecords, ...records];
   },
+  [types.ARTICLE_SEARCH_SET](state, records) {
+    state.articleRecords = [...state.articleRecords, ...records];
+  },
   [types.SEARCH_CONVERSATIONS_SET_UI_FLAG](state, uiFlags) {
     state.uiFlags = { ...state.uiFlags, ...uiFlags };
   },
@@ -141,10 +161,14 @@ export const mutations = {
   [types.MESSAGE_SEARCH_SET_UI_FLAG](state, uiFlags) {
     state.uiFlags.message = { ...state.uiFlags.message, ...uiFlags };
   },
+  [types.ARTICLE_SEARCH_SET_UI_FLAG](state, uiFlags) {
+    state.uiFlags.article = { ...state.uiFlags.article, ...uiFlags };
+  },
   [types.CLEAR_SEARCH_RESULTS](state) {
     state.contactRecords = [];
     state.conversationRecords = [];
     state.messageRecords = [];
+    state.articleRecords = [];
   },
 };
 

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

@@ -75,6 +75,7 @@ describe('#actions', () => {
         q: 'test',
       });
       expect(dispatch).toHaveBeenCalledWith('messageSearch', { q: 'test' });
+      expect(dispatch).toHaveBeenCalledWith('articleSearch', { q: 'test' });
     });
   });
 
@@ -150,6 +151,30 @@ describe('#actions', () => {
     });
   });
 
+  describe('#articleSearch', () => {
+    it('should handle successful article search', async () => {
+      axios.get.mockResolvedValue({
+        data: { payload: { articles: [{ id: 1 }] } },
+      });
+
+      await actions.articleSearch({ commit }, { q: 'test', page: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: true }],
+        [types.ARTICLE_SEARCH_SET, [{ id: 1 }]],
+        [types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+
+    it('should handle failed article search', async () => {
+      axios.get.mockRejectedValue({});
+      await actions.articleSearch({ commit }, { q: 'test' });
+      expect(commit.mock.calls).toEqual([
+        [types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: true }],
+        [types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
   describe('#clearSearchResults', () => {
     it('should commit clear search results mutation', () => {
       actions.clearSearchResults({ commit });

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

@@ -37,6 +37,15 @@ describe('#getters', () => {
     ]);
   });
 
+  it('getArticleRecords', () => {
+    const state = {
+      articleRecords: [{ id: 1, title: 'Article 1' }],
+    };
+    expect(getters.getArticleRecords(state)).toEqual([
+      { id: 1, title: 'Article 1' },
+    ]);
+  });
+
   it('getUIFlags', () => {
     const state = {
       uiFlags: {
@@ -45,6 +54,7 @@ describe('#getters', () => {
         contact: { isFetching: true },
         message: { isFetching: false },
         conversation: { isFetching: false },
+        article: { isFetching: false },
       },
     };
     expect(getters.getUIFlags(state)).toEqual({
@@ -53,6 +63,7 @@ describe('#getters', () => {
       contact: { isFetching: true },
       message: { isFetching: false },
       conversation: { isFetching: false },
+      article: { isFetching: false },
     });
   });
 });

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

@@ -101,17 +101,39 @@ describe('#mutations', () => {
     });
   });
 
+  describe('#ARTICLE_SEARCH_SET', () => {
+    it('should append new article records to existing ones', () => {
+      const state = { articleRecords: [{ id: 1 }] };
+      mutations[types.ARTICLE_SEARCH_SET](state, [{ id: 2 }]);
+      expect(state.articleRecords).toEqual([{ id: 1 }, { id: 2 }]);
+    });
+  });
+
+  describe('#ARTICLE_SEARCH_SET_UI_FLAG', () => {
+    it('set article search UI flags correctly', () => {
+      const state = {
+        uiFlags: {
+          article: { isFetching: true },
+        },
+      };
+      mutations[types.ARTICLE_SEARCH_SET_UI_FLAG](state, { isFetching: false });
+      expect(state.uiFlags.article).toEqual({ isFetching: false });
+    });
+  });
+
   describe('#CLEAR_SEARCH_RESULTS', () => {
     it('should clear all search records', () => {
       const state = {
         contactRecords: [{ id: 1 }],
         conversationRecords: [{ id: 1 }],
         messageRecords: [{ id: 1 }],
+        articleRecords: [{ id: 1 }],
       };
       mutations[types.CLEAR_SEARCH_RESULTS](state);
       expect(state.contactRecords).toEqual([]);
       expect(state.conversationRecords).toEqual([]);
       expect(state.messageRecords).toEqual([]);
+      expect(state.articleRecords).toEqual([]);
     });
   });
 });

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

@@ -1,37 +0,0 @@
-const initialState = {
-  isCopilotSidebarOpen: false,
-  isConversationSidebarOpen: true,
-};
-
-const types = {
-  SET_UI_STATE: 'SET_UI_STATE',
-};
-
-const mutations = {
-  [types.SET_UI_STATE](state, { key, value }) {
-    state[key] = value;
-  },
-};
-
-const getters = {
-  getUIState: state => key => state[key],
-};
-
-const actions = {
-  toggle({ commit, state }, key) {
-    commit(types.SET_UI_STATE, { key, value: !state[key] });
-  },
-  set({ commit }, payload) {
-    Object.entries(payload).forEach(([key, value]) => {
-      commit(types.SET_UI_STATE, { key, value });
-    });
-  },
-};
-
-export default {
-  namespaced: true,
-  state: initialState,
-  getters,
-  mutations,
-  actions,
-};

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

@@ -317,8 +317,10 @@ export default {
   CONVERSATION_SEARCH_SET: 'CONVERSATION_SEARCH_SET',
   CONVERSATION_SEARCH_SET_UI_FLAG: 'CONVERSATION_SEARCH_SET_UI_FLAG',
   MESSAGE_SEARCH_SET: 'MESSAGE_SEARCH_SET',
+  ARTICLE_SEARCH_SET: 'ARTICLE_SEARCH_SET',
   CLEAR_SEARCH_RESULTS: 'CLEAR_SEARCH_RESULTS',
   MESSAGE_SEARCH_SET_UI_FLAG: 'MESSAGE_SEARCH_SET_UI_FLAG',
+  ARTICLE_SEARCH_SET_UI_FLAG: 'ARTICLE_SEARCH_SET_UI_FLAG',
   FULL_SEARCH_SET_UI_FLAG: 'FULL_SEARCH_SET_UI_FLAG',
   SET_CONVERSATION_PARTICIPANTS_UI_FLAG:
     'SET_CONVERSATION_PARTICIPANTS_UI_FLAG',

app/javascript/portal/portalHelpers.js

@@ -25,33 +25,71 @@ export const getHeadingsfromTheArticle = () => {
   return rows;
 };
 
+/**
+ * Converts various input formats to URL objects.
+ * Handles URL objects, domain strings, relative paths, and full URLs.
+ * @param {string|URL} input - Input to convert to URL object
+ * @returns {URL|null} URL object or null if input is invalid
+ */
+const toURL = input => {
+  if (!input) return null;
+  if (input instanceof URL) return input;
+
+  if (
+    typeof input === 'string' &&
+    !input.includes('://') &&
+    !input.startsWith('/')
+  ) {
+    return new URL(`https://${input}`);
+  }
+
+  if (typeof input === 'string' && input.startsWith('/')) {
+    return new URL(input, window.location.origin);
+  }
+
+  return new URL(input);
+};
+
+/**
+ * Determines if two URLs belong to the same host by comparing their normalized URL objects.
+ * Handles various input formats including URL objects, domain strings, relative paths, and full URLs.
+ * Returns false if either URL cannot be parsed or normalized.
+ * @param {string|URL} url1 - First URL to compare
+ * @param {string|URL} url2 - Second URL to compare
+ * @returns {boolean} True if both URLs have the same host, false otherwise
+ */
+const isSameHost = (url1, url2) => {
+  try {
+    const urlObj1 = toURL(url1);
+    const urlObj2 = toURL(url2);
+
+    if (!urlObj1 || !urlObj2) return false;
+
+    return urlObj1.hostname === urlObj2.hostname;
+  } catch (error) {
+    return false;
+  }
+};
+
 export const openExternalLinksInNewTab = () => {
   const { customDomain, hostURL } = window.portalConfig;
-  const isSameHost =
-    window.location.href.includes(customDomain) ||
-    window.location.href.includes(hostURL);
-
-  // Modify external links only on articles page
   const isOnArticlePage =
-    isSameHost && document.querySelector('#cw-article-content') !== null;
+    document.querySelector('#cw-article-content') !== null;
 
   document.addEventListener('click', event => {
     if (!isOnArticlePage) return;
 
-    // Some of the links come wrapped in strong tag through prosemirror
+    const link = event.target.closest('a');
 
-    const isTagAnchor = event.target.tagName === 'A';
-    const isParentTagAnchor =
-      event.target.tagName === 'STRONG' &&
-      event.target.parentNode.tagName === 'A';
-
-    if (isTagAnchor || isParentTagAnchor) {
-      const link = isTagAnchor ? event.target : event.target.parentNode;
+    if (link) {
+      const currentLocation = window.location.href;
+      const linkHref = link.href;
 
+      // Check against current location and custom domains
       const isInternalLink =
-        link.hostname === window.location.hostname ||
-        link.href.includes(customDomain) ||
-        link.href.includes(hostURL);
+        isSameHost(linkHref, currentLocation) ||
+        (customDomain && isSameHost(linkHref, customDomain)) ||
+        (hostURL && isSameHost(linkHref, hostURL));
 
       if (!isInternalLink) {
         link.target = '_blank';

app/javascript/portal/specs/portal.spec.js

@@ -1,6 +1,9 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { JSDOM } from 'jsdom';
-import { InitializationHelpers } from '../portalHelpers';
+import {
+  InitializationHelpers,
+  openExternalLinksInNewTab,
+} from '../portalHelpers';
 
 describe('InitializationHelpers.navigateToLocalePage', () => {
   let dom;
@@ -44,3 +47,139 @@ describe('InitializationHelpers.navigateToLocalePage', () => {
     );
   });
 });
+
+describe('openExternalLinksInNewTab', () => {
+  let dom;
+  let document;
+  let window;
+
+  beforeEach(() => {
+    dom = new JSDOM(
+      `<!DOCTYPE html>
+      <html>
+        <body>
+          <div id="cw-article-content">
+            <a href="https://external.com" id="external">External</a>
+            <a href="https://app.chatwoot.com/page" id="internal">Internal</a>
+            <a href="https://custom.domain.com/page" id="custom">Custom</a>
+            <a href="https://example.com" id="nested"><code>Code</code><strong>Bold</strong></a>
+            <ul>
+              <li>Visit the preferences centre here &gt; <a href="https://external.com" id="list-link"><strong>https://external.com</strong></a></li>
+            </ul>
+          </div>
+        </body>
+      </html>`,
+      { url: 'https://app.chatwoot.com/hc/article' }
+    );
+
+    document = dom.window.document;
+    window = dom.window;
+
+    window.portalConfig = {
+      customDomain: 'custom.domain.com',
+      hostURL: 'app.chatwoot.com',
+    };
+
+    global.document = document;
+    global.window = window;
+  });
+
+  afterEach(() => {
+    dom = null;
+    document = null;
+    window = null;
+    delete global.document;
+    delete global.window;
+  });
+
+  const simulateClick = selector => {
+    const element = document.querySelector(selector);
+    const event = new window.MouseEvent('click', { bubbles: true });
+    element.dispatchEvent(event);
+    return element.closest('a') || element;
+  };
+
+  it('opens external links in new tab', () => {
+    openExternalLinksInNewTab();
+
+    const link = simulateClick('#external');
+    expect(link.target).toBe('_blank');
+    expect(link.rel).toBe('noopener noreferrer');
+  });
+
+  it('preserves internal links', () => {
+    openExternalLinksInNewTab();
+
+    const internal = simulateClick('#internal');
+    const custom = simulateClick('#custom');
+
+    expect(internal.target).not.toBe('_blank');
+    expect(custom.target).not.toBe('_blank');
+  });
+
+  it('handles clicks on nested elements', () => {
+    openExternalLinksInNewTab();
+
+    simulateClick('#nested code');
+    simulateClick('#nested strong');
+
+    const link = document.getElementById('nested');
+    expect(link.target).toBe('_blank');
+    expect(link.rel).toBe('noopener noreferrer');
+  });
+
+  it('handles links inside list items with strong tags', () => {
+    openExternalLinksInNewTab();
+
+    // Click on the strong element inside the link in the list
+    simulateClick('#list-link strong');
+
+    const link = document.getElementById('list-link');
+    expect(link.target).toBe('_blank');
+    expect(link.rel).toBe('noopener noreferrer');
+  });
+
+  it('opens external links in a new tab even if customDomain is empty', () => {
+    window = dom.window;
+    window.portalConfig = {
+      hostURL: 'app.chatwoot.com',
+    };
+
+    global.window = window;
+
+    openExternalLinksInNewTab();
+
+    const link = simulateClick('#external');
+    const internal = simulateClick('#internal');
+    const custom = simulateClick('#custom');
+
+    expect(link.target).toBe('_blank');
+    expect(link.rel).toBe('noopener noreferrer');
+
+    expect(internal.target).not.toBe('_blank');
+    // this will be blank since the configs customDomain is empty
+    // which is a fair expectation
+    expect(custom.target).toBe('_blank');
+  });
+
+  it('opens external links in a new tab even if hostURL is empty', () => {
+    window = dom.window;
+    window.portalConfig = {
+      customDomain: 'custom.domain.com',
+    };
+
+    global.window = window;
+
+    openExternalLinksInNewTab();
+
+    const link = simulateClick('#external');
+    const internal = simulateClick('#internal');
+    const custom = simulateClick('#custom');
+
+    expect(link.target).toBe('_blank');
+    expect(link.rel).toBe('noopener noreferrer');
+
+    expect(internal.target).not.toBe('_blank');
+    expect(custom.target).not.toBe('_blank');
+  });
+});

app/jobs/internal/delete_accounts_job.rb

@@ -0,0 +1,27 @@
+class Internal::DeleteAccountsJob < ApplicationJob
+  queue_as :scheduled_jobs
+
+  def perform
+    delete_expired_accounts
+  end
+
+  private
+
+  def delete_expired_accounts
+    accounts_pending_deletion.each do |account|
+      AccountDeletionService.new(account: account).perform
+    end
+  end
+
+  def accounts_pending_deletion
+    Account.where("custom_attributes->>'marked_for_deletion_at' IS NOT NULL")
+           .select { |account| deletion_period_expired?(account) }
+  end
+
+  def deletion_period_expired?(account)
+    deletion_time = account.custom_attributes['marked_for_deletion_at']
+    return false if deletion_time.blank?
+
+    DateTime.parse(deletion_time) <= Time.current
+  end
+end

app/listeners/action_cable_listener.rb

@@ -204,3 +204,5 @@ class ActionCableListener < BaseListener
     ::ActionCableBroadcastJob.perform_later(tokens.uniq, event_name, payload)
   end
 end
+
+ActionCableListener.prepend_mod_with('ActionCableListener')

app/mailers/administrator_notifications/account_compliance_mailer.rb

@@ -0,0 +1,52 @@
+class AdministratorNotifications::AccountComplianceMailer < AdministratorNotifications::BaseMailer
+  def account_deleted(account)
+    return if instance_admin_email.blank?
+
+    subject = subject_for(account)
+    meta = build_meta(account)
+
+    send_notification(subject, to: instance_admin_email, meta: meta)
+  end
+
+  private
+
+  def build_meta(account)
+    deleted_users = params[:soft_deleted_users] || []
+
+    user_info_list = deleted_users.map do |user|
+      {
+        'user_id' => user[:id].to_s,
+        'user_email' => user[:original_email].to_s
+      }
+    end
+
+    {
+      'instance_url' => instance_url,
+      'account_id' => account.id,
+      'account_name' => account.name,
+      'deleted_at' => format_time(Time.current.iso8601),
+      'deletion_reason' => account.custom_attributes['marked_for_deletion_reason'] || 'not specified',
+      'marked_for_deletion_at' => format_time(account.custom_attributes['marked_for_deletion_at']),
+      'soft_deleted_users' => user_info_list,
+      'deleted_user_count' => user_info_list.size
+    }
+  end
+
+  def format_time(time_string)
+    return 'not specified' if time_string.blank?
+
+    Time.zone.parse(time_string).strftime('%B %d, %Y %H:%M:%S %Z')
+  end
+
+  def subject_for(account)
+    "Account Deletion Notice for #{account.id} - #{account.name}"
+  end
+
+  def instance_admin_email
+    GlobalConfig.get('CHATWOOT_INSTANCE_ADMIN_EMAIL')['CHATWOOT_INSTANCE_ADMIN_EMAIL']
+  end
+
+  def instance_url
+    ENV.fetch('FRONTEND_URL', 'not available')
+  end
+end

app/models/concerns/activity_message_handler.rb

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

app/models/concerns/csat_activity_message_handler.rb

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

app/models/integrations/app.rb

@@ -39,7 +39,8 @@ class Integrations::App
   def action
     case params[:id]
     when 'slack'
-      "#{params[:action]}&client_id=#{ENV.fetch('SLACK_CLIENT_ID', nil)}&redirect_uri=#{self.class.slack_integration_url}"
+      client_id = GlobalConfigService.load('SLACK_CLIENT_ID', nil)
+      "#{params[:action]}&client_id=#{client_id}&redirect_uri=#{self.class.slack_integration_url}"
     when 'linear'
       build_linear_action
     else
@@ -50,7 +51,7 @@ class Integrations::App
   def active?(account)
     case params[:id]
     when 'slack'
-      ENV['SLACK_CLIENT_SECRET'].present?
+      GlobalConfigService.load('SLACK_CLIENT_SECRET', nil).present?
     when 'linear'
       GlobalConfigService.load('LINEAR_CLIENT_ID', nil).present?
     when 'shopify'

app/services/account_deletion_service.rb

@@ -0,0 +1,50 @@
+class AccountDeletionService
+  attr_reader :account, :soft_deleted_users
+
+  def initialize(account:)
+    @account = account
+    @soft_deleted_users = []
+  end
+
+  def perform
+    Rails.logger.info("Deleting account #{account.id} - #{account.name} that was marked for deletion")
+
+    soft_delete_orphaned_users
+    send_compliance_notification
+    DeleteObjectJob.perform_later(account)
+  end
+
+  private
+
+  def send_compliance_notification
+    AdministratorNotifications::AccountComplianceMailer.with(
+      account: account,
+      soft_deleted_users: soft_deleted_users
+    ).account_deleted(account).deliver_later
+  end
+
+  def soft_delete_orphaned_users
+    account.users.each do |user|
+      # Find all account_users for this user excluding the current account
+      other_accounts = user.account_users.where.not(account_id: account.id).count
+
+      # If user has no other accounts, soft delete them
+      next unless other_accounts.zero?
+
+      # Soft delete user by appending -deleted.com to email
+      original_email = user.email
+      user.email = "#{original_email}-deleted.com"
+      user.skip_reconfirmation!
+      user.save!
+
+      user_info = {
+        id: user.id.to_s,
+        original_email: original_email
+      }
+
+      soft_deleted_users << user_info
+
+      Rails.logger.info("Soft deleted user #{user.id} with email #{original_email}")
+    end
+  end
+end

app/services/crm/leadsquared/mappers/conversation_mapper.rb

@@ -6,17 +6,18 @@ class Crm::Leadsquared::Mappers::ConversationMapper
   # so this limits it
   ACTIVITY_NOTE_MAX_SIZE = 1800
 
-  def self.map_conversation_activity(conversation)
-    new(conversation).conversation_activity
+  def self.map_conversation_activity(hook, conversation)
+    new(hook, conversation).conversation_activity
   end
 
-  def self.map_transcript_activity(conversation, messages = nil)
-    new(conversation, messages).transcript_activity
+  def self.map_transcript_activity(hook, conversation)
+    new(hook, conversation).transcript_activity
   end
 
-  def initialize(conversation, messages = nil)
+  def initialize(hook, conversation)
+    @hook = hook
+    @timezone = Time.find_zone(hook.settings['timezone']) || Time.zone
     @conversation = conversation
-    @messages = messages
   end
 
   def conversation_activity
@@ -41,14 +42,14 @@ class Crm::Leadsquared::Mappers::ConversationMapper
 
   private
 
-  attr_reader :conversation, :messages
+  attr_reader :conversation
 
   def formatted_creation_time
-    conversation.created_at.strftime('%Y-%m-%d %H:%M:%S')
+    conversation.created_at.in_time_zone(@timezone).strftime('%Y-%m-%d %H:%M:%S')
   end
 
   def transcript_messages
-    @transcript_messages ||= messages || conversation.messages.chat.select(&:conversation_transcriptable?)
+    @transcript_messages ||= conversation.messages.chat.select(&:conversation_transcriptable?)
   end
 
   def format_messages
@@ -77,8 +78,7 @@ class Crm::Leadsquared::Mappers::ConversationMapper
   end
 
   def message_time(message)
-    # TODO: Figure out what timezone to send the time in
-    message.created_at.strftime('%Y-%m-%d %H:%M')
+    message.created_at.in_time_zone(@timezone).strftime('%Y-%m-%d %H:%M')
   end
 
   def sender_name(message)

app/services/crm/leadsquared/processor_service.rb

@@ -37,7 +37,7 @@ class Crm::Leadsquared::ProcessorService < Crm::BaseProcessorService
       activity_type: 'conversation',
       activity_code_key: 'conversation_activity_code',
       metadata_key: 'created_activity_id',
-      activity_note: Crm::Leadsquared::Mappers::ConversationMapper.map_conversation_activity(conversation)
+      activity_note: Crm::Leadsquared::Mappers::ConversationMapper.map_conversation_activity(@hook, conversation)
     )
   end
 
@@ -50,7 +50,7 @@ class Crm::Leadsquared::ProcessorService < Crm::BaseProcessorService
       activity_type: 'transcript',
       activity_code_key: 'transcript_activity_code',
       metadata_key: 'transcript_activity_id',
-      activity_note: Crm::Leadsquared::Mappers::ConversationMapper.map_transcript_activity(conversation)
+      activity_note: Crm::Leadsquared::Mappers::ConversationMapper.map_transcript_activity(@hook, conversation)
     )
   end
 

app/services/crm/leadsquared/setup_service.rb

@@ -25,11 +25,12 @@ class Crm::Leadsquared::SetupService
     response = @client.get('Authentication.svc/UserByAccessKey.Get')
     endpoint_host = response['LSQCommonServiceURLs']['api']
     app_host = response['LSQCommonServiceURLs']['app']
+    timezone = response['TimeZone']
 
     endpoint_url = "https://#{endpoint_host}/v2/"
     app_url = "https://#{app_host}/"
 
-    update_hook_settings({ :endpoint_url => endpoint_url, :app_url => app_url })
+    update_hook_settings({ :endpoint_url => endpoint_url, :app_url => app_url, :timezone => timezone })
 
     # replace the clients
     @client = Crm::Leadsquared::Api::BaseClient.new(@access_key, @secret_key, endpoint_url)

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?
-    ::MessageTemplates::Template::CsatSurvey.new(conversation: conversation).perform if should_send_csat_survey?
+    handle_csat_survey
   end
 
   def should_send_out_of_office_message?
@@ -65,13 +65,26 @@ class MessageTemplates::HookExecutionService
     true
   end
 
-  def should_send_csat_survey?
+  def handle_csat_survey
     return unless csat_enabled_conversation?
-
     # only send CSAT once in a conversation
-    return if conversation.messages.where(content_type: :input_csat).present?
+    return if csat_already_sent?
 
-    true
+    # 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?
   end
 end
 MessageTemplates::HookExecutionService.prepend_mod_with('MessageTemplates::HookExecutionService')

app/services/search_service.rb

@@ -9,8 +9,10 @@ class SearchService
       { conversations: filter_conversations }
     when 'Contact'
       { contacts: filter_contacts }
+    when 'Article'
+      { articles: filter_articles }
     else
-      { contacts: filter_contacts, messages: filter_messages, conversations: filter_conversations }
+      { contacts: filter_contacts, messages: filter_messages, conversations: filter_conversations, articles: filter_articles }
     end
   end
 
@@ -90,4 +92,12 @@ class SearchService
       ILIKE :search OR identifier ILIKE :search", search: "%#{search_query}%"
     ).resolved_contacts.order_on_last_activity_at('desc').page(params[:page]).per(15)
   end
+
+  def filter_articles
+    @articles = current_account.articles
+                               .text_search(search_query)
+                               .reorder('updated_at DESC')
+                               .page(params[:page])
+                               .per(15)
+  end
 end

app/views/api/v1/accounts/search/_article.json.jbuilder

@@ -0,0 +1,8 @@
+json.id article.id
+json.title article.title
+json.locale article.locale
+json.content article.content
+json.slug article.slug
+json.portal_slug article.portal.slug
+json.account_id article.account_id
+json.category_name article.category&.name

app/views/api/v1/accounts/search/_conversation_search_result.json.jbuilder

@@ -0,0 +1,15 @@
+json.id conversation.display_id
+json.account_id conversation.account_id
+json.created_at conversation.created_at.to_i
+json.message do
+  json.partial! 'message', formats: [:json], message: conversation.messages.try(:first)
+end
+json.contact do
+  json.partial! 'contact', formats: [:json], contact: conversation.contact if conversation.try(:contact).present?
+end
+json.inbox do
+  json.partial! 'inbox', formats: [:json], inbox: conversation.inbox if conversation.try(:inbox).present?
+end
+json.agent do
+  json.partial! 'agent', formats: [:json], agent: conversation.assignee if conversation.try(:assignee).present?
+end

app/views/api/v1/accounts/search/articles.json.jbuilder

@@ -0,0 +1,7 @@
+json.payload do
+  json.articles do
+    json.array! @result[:articles] do |article|
+      json.partial! 'article', formats: [:json], article: article
+    end
+  end
+end

app/views/api/v1/accounts/search/index.json.jbuilder

@@ -1,21 +1,7 @@
 json.payload do
   json.conversations do
     json.array! @result[:conversations] do |conversation|
-      json.id conversation.display_id
-      json.account_id conversation.account_id
-      json.created_at conversation.created_at.to_i
-      json.message do
-        json.partial! 'message', formats: [:json], message: conversation.messages.try(:first)
-      end
-      json.contact do
-        json.partial! 'contact', formats: [:json], contact: conversation.contact if conversation.try(:contact).present?
-      end
-      json.inbox do
-        json.partial! 'inbox', formats: [:json], inbox: conversation.inbox if conversation.try(:inbox).present?
-      end
-      json.agent do
-        json.partial! 'agent', formats: [:json], agent: conversation.assignee if conversation.try(:assignee).present?
-      end
+      json.partial! 'conversation_search_result', formats: [:json], conversation: conversation
     end
   end
   json.contacts do
@@ -23,10 +9,14 @@ json.payload do
       json.partial! 'contact', formats: [:json], contact: contact
     end
   end
-
   json.messages do
     json.array! @result[:messages] do |message|
       json.partial! 'message', formats: [:json], message: message
     end
   end
+  json.articles do
+    json.array! @result[:articles] do |article|
+      json.partial! 'article', formats: [:json], article: article
+    end
+  end
 end

app/views/mailers/administrator_notifications/account_compliance_mailer/account_deleted.liquid

@@ -0,0 +1,30 @@
+<p>Hello,</p>
+
+<p>This is a notification to inform you that an account has been permanently deleted from your Chatwoot instance.</p>
+
+<p>
+  <strong>Chatwoot Installation:</strong> {{ meta.instance_url }}<br>
+  <strong>Account ID:</strong> {{ meta.account_id }}<br>
+  <strong>Account Name:</strong> {{ meta.account_name }}<br>
+  <strong>Deleted At:</strong> {{ meta.deleted_at }}<br>
+  <strong>Marked for Deletion at:</strong> {{ meta.marked_for_deletion_at }}<br>
+  <strong>Deletion Reason:</strong> {{ meta.deletion_reason }}
+</p>
+
+{% if meta.deleted_user_count > 0 %}
+<p>
+  <strong>Deleted Users ({{ meta.deleted_user_count }}):</strong><br>
+  {% for user in meta.soft_deleted_users %}
+    User ID: {{ user.user_id }}, Email: {{ user.user_email }}{% unless forloop.last %}<br>{% endunless %}
+  {% endfor %}
+</p>
+{% else %}
+<p>
+  <strong>Deleted Users:</strong> None
+</p>
+{% endif %}
+
+<p>This email serves as a record for compliance purposes.</p>
+
+<p>Thank you,<br>
+Chatwoot System</p>

app/views/super_admin/application/_icons.html.erb

@@ -159,4 +159,7 @@
   <symbol id="icon-shopify"  viewBox="0 0 32 32">
     <path fill="currentColor" d="m20.448 31.974l9.625-2.083s-3.474-23.484-3.5-23.641s-.156-.255-.281-.255c-.13 0-2.573-.182-2.573-.182s-1.703-1.698-1.922-1.88a.4.4 0 0 0-.161-.099l-1.219 28.141zm-4.833-16.901s-1.083-.563-2.365-.563c-1.932 0-2.005 1.203-2.005 1.521c0 1.641 4.318 2.286 4.318 6.172c0 3.057-1.922 5.01-4.542 5.01c-3.141 0-4.719-1.953-4.719-1.953l.859-2.781s1.661 1.422 3.042 1.422c.901 0 1.302-.724 1.302-1.245c0-2.156-3.542-2.255-3.542-5.807c-.047-2.984 2.094-5.891 6.438-5.891c1.677 0 2.5.479 2.5.479l-1.26 3.625zm-.719-13.969c.177 0 .359.052.536.182c-1.313.62-2.75 2.188-3.344 5.323a76 76 0 0 1-2.516.771c.688-2.38 2.359-6.26 5.323-6.26zm1.646 3.932v.182c-1.005.307-2.115.646-3.193.979c.62-2.37 1.776-3.526 2.781-3.958c.255.667.411 1.568.411 2.797zm.718-2.973c.922.094 1.521 1.151 1.901 2.339c-.464.151-.979.307-1.542.484v-.333c0-1.005-.13-1.828-.359-2.495zm3.99 1.718c-.031 0-.083.026-.104.026c-.026 0-.385.099-.953.281C19.63 2.442 18.625.927 16.849.927h-.156C16.183.281 15.558 0 15.021 0c-4.141 0-6.12 5.172-6.74 7.797c-1.594.484-2.75.844-2.88.896c-.901.286-.927.313-1.031 1.161c-.099.615-2.438 18.75-2.438 18.75L20.01 32z"/>
   </symbol>
-</svg>
+  <symbol id="icon-slack" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M6.527 14.514A1.973 1.973 0 0 1 4.56 16.48a1.973 1.973 0 0 1-1.968-1.967c0-1.083.885-1.968 1.968-1.968h1.967zm.992 0c0-1.083.885-1.968 1.968-1.968s1.967.885 1.967 1.968v4.927a1.973 1.973 0 0 1-1.967 1.968a1.973 1.973 0 0 1-1.968-1.968zm1.968-7.987A1.973 1.973 0 0 1 7.519 4.56c0-1.083.885-1.967 1.968-1.967s1.967.884 1.967 1.967v1.968zm0 .992c1.083 0 1.967.884 1.967 1.967a1.973 1.973 0 0 1-1.967 1.968H4.56a1.973 1.973 0 0 1-1.968-1.968c0-1.083.885-1.967 1.968-1.967zm7.986 1.967c0-1.083.885-1.967 1.968-1.967s1.968.884 1.968 1.967a1.973 1.973 0 0 1-1.968 1.968h-1.968zm-.991 0a1.973 1.973 0 0 1-1.968 1.968a1.973 1.973 0 0 1-1.968-1.968V4.56c0-1.083.885-1.967 1.968-1.967s1.968.884 1.968 1.967zm-1.968 7.987c1.083 0 1.968.885 1.968 1.968a1.973 1.973 0 0 1-1.968 1.968a1.973 1.973 0 0 1-1.968-1.968v-1.968zm0-.992a1.973 1.973 0 0 1-1.968-1.967c0-1.083.885-1.968 1.968-1.968h4.927c1.083 0 1.968.885 1.968 1.968a1.973 1.973 0 0 1-1.968 1.967z"/>
+  </symbol>
+</svg>

chatwoot/developer-docs/self-hosted/runbook/environment-variables.mdx

@@ -0,0 +1,264 @@
+---
+title: Environment Variables
+description: Complete reference for Chatwoot environment variables and configuration options
+sidebarTitle: Environment Variables
+---
+
+## The .env File
+
+We use the `dotenv-rails` gem to manage the environment variables. There is a file called `env.example` in the root directory of this project with all the environment variables set to empty values. You can set the correct values as per the following options. Once you set the values, you should rename the file to `.env` before you start the server.
+
+## Configure frontend URL (domain)
+
+Provide your chatwoot domain as frontend URL.
+
+```bash
+FRONTEND_URL='https://your-chatwoot-domain.tld'
+```
+
+## Rails production variables
+
+For production deployment, you have to set the following variables
+
+```bash
+RAILS_ENV=production
+SECRET_KEY_BASE=replace_with_your_own_secret_string
+```
+
+You can generate `SECRET_KEY_BASE` using `rake secret` command from the project root folder. If you dont have rails installed, use `head /dev/urandom | tr -dc A-Za-z0-9 | head -c 63 ; echo ''`.
+
+<Note>
+SECRET_KEY_BASE should be alphanumeric. Avoid special characters or symbols.
+</Note>
+
+## Database configuration
+
+Postgres can be configured in two ways: via `DATABASE_URL` or setting up independent Postgres variables.
+
+### Configure Postgres
+
+Set the `DATABASE_URL` variable with value as Postgres connection URI to connect to the database.
+
+The URI is of the format
+
+```bash
+postgresql://[user[:password]@][netloc][:port][,...][/dbname][?param1=value1&...]
+```
+
+Or you can set the following environment variables to configure Postgres. Replace the values here with yours. Skip this
+if you have configured `DATABASE_URL`.
+
+```bash
+POSTGRES_HOST=localhost
+POSTGRES_PORT=5432
+POSTGRES_DATABASE=chatwoot_production
+POSTGRES_USERNAME=admin
+POSTGRES_PASSWORD=password
+```
+
+### Configure Redis
+
+For development, you can use the following URL to connect to Redis. For production, configure your Redis URL.
+
+```bash
+REDIS_URL='redis://127.0.0.1:6379'
+```
+
+To authenticate Redis connections made by the app server and sidekick, if it's protected by a password, use the following environment variable to set the password.
+
+```bash
+REDIS_PASSWORD=
+```
+
+## Configure emails
+
+For development, you don't need an email provider. Chatwoot uses the [letter-opener](https://github.com/ryanb/letter_opener) gem to test emails locally
+
+For production use, please configure the following variables.
+
+```bash
+# could user either `email@yourdomain.com` or `BrandName <email@yourdomain.com>`
+MAILER_SENDER_EMAIL=
+```
+
+and based on your SMTP server the following variables
+
+```bash
+SMTP_ADDRESS=
+SMTP_USERNAME=
+SMTP_PASSWORD=
+SMTP_TLS=
+SMTP_SSL=
+```
+
+### Postfix
+
+Follow these steps if you want to use a selfhosted mail server with Chatwoot. This is the default behavior starting from `v2.12.0` and relies on `SMTP_ADDRESS` environment variable not being set.
+
+```
+sudo apt install -y postfix
+```
+
+Choose internet-site when prompted and enter the domain name you used with Chatwoot setup for `System mail name`.
+
+<Note>
+By default, all major cloud provider have blocked port 25 used for sending emails as part of their spam combat effects. Please raise a support ticket with your cloud provider to enable outbound access on port 25 for this to work. Refer [AWS](https://aws.amazon.com/premiumsupport/knowledge-center/ec2-port-25-throttle), [GCP](https://cloud.google.com/compute/docs/tutorials/sending-mail), [Azure](https://learn.microsoft.com/en-us/azure/virtual-network/troubleshoot-outbound-smtp-connectivity) and [DigitalOcean](https://www.digitalocean.com/blog/smtp-restricted-by-default) for more details.
+</Note>
+
+Also please add MX and PTR records for your domain. If your emails are being flagged by `Gmail` and `Outlook`, setup [SPF and DKIM records](https://www.linuxbabe.com/mail-server/setting-up-dkim-and-spf) for your domain as well. This should improve your email reputation.
+
+### Amazon SES
+
+```bash
+SMTP_ADDRESS=email-smtp.<region>.amazonaws.com
+SMTP_AUTHENTICATION=plain
+SMTP_ENABLE_STARTTLS_AUTO=true
+SMTP_USERNAME=<Your SMTP username>
+SMTP_PASSWORD=<Your SMTP password>
+```
+
+### SendGrid
+
+<Info>
+For clarification, the `SMTP_USERNAME` should be set to the literal text apikey—this is not the actual API key. SendGrid uses 'apikey' as the standard username for its services.
+</Info>
+
+```bash
+SMTP_ADDRESS=smtp.sendgrid.net
+SMTP_AUTHENTICATION=plain
+SMTP_DOMAIN=<your verified domain>
+SMTP_ENABLE_STARTTLS_AUTO=true
+SMTP_PORT=587
+SMTP_USERNAME=apikey
+SMTP_PASSWORD=<your Sendgrid API key>
+```
+
+### MailGun
+
+```bash
+SMTP_ADDRESS=smtp.mailgun.org
+SMTP_AUTHENTICATION=plain
+SMTP_DOMAIN=<Your domain, this has to be verified in Mailgun>
+SMTP_ENABLE_STARTTLS_AUTO=true
+SMTP_PORT=587
+SMTP_USERNAME=<Your SMTP username, view under Domains tab>
+SMTP_PASSWORD=<Your SMTP password, view under Domains tab>
+```
+
+### Mandrill
+
+If you would like to use Mailchimp to send your emails, use the following environment variables:
+
+<Note>
+Mandrill is the transactional email service for Mailchimp. You need to enable transactional email and login to mandrillapp.com.
+</Note>
+
+```bash
+SMTP_ADDRESS=smtp.mandrillapp.com
+SMTP_AUTHENTICATION=plain
+SMTP_DOMAIN=<Your verified domain in Mailchimp>
+SMTP_ENABLE_STARTTLS_AUTO=true
+SMTP_PORT=587
+SMTP_USERNAME=<Your SMTP username displayed under Settings -> SMTP & API info>
+SMTP_PASSWORD=<Any valid API key, create an API key under Settings -> SMTP & API Info>
+```
+
+## Configure default language
+
+```bash
+DEFAULT_LOCALE='en'
+```
+
+## Configure storage
+
+Chatwoot uses [active storage](https://edgeguides.rubyonrails.org/active_storage_overview.html) for storing attachments. The default storage option is the local storage on your server.
+
+But you can change it to use any of the cloud providers like amazon s3, microsoft azure, google gcs etc. Refer [configuring cloud storage](/docs/self-hosted/deployment/storage/supported-providers) for additional environment variables required.
+
+```bash
+ACTIVE_STORAGE_SERVICE=local
+```
+
+When `local` storage is used the files are stored under `/storage` directory in the chatwoot root folder.
+
+<Warning>
+It is recommended to use a cloud provider for your chatwoot storage to ensure proper backup of the stored attachments and prevent data loss.
+</Warning>
+
+## Rails Logging Variables
+
+By default, Chatwoot will capture `info` level logs in production. Ref [rails docs](https://guides.rubyonrails.org/debugging_rails_applications.html#log-levels) for the additional log-level options.
+We will also retain 1 GB of your recent logs and your last shifted log file.
+You can fine-tune these settings using the following environment variables
+
+```bash
+# possible values: 'debug', 'info', 'warn', 'error', 'fatal' and 'unknown'
+LOG_LEVEL=
+# value in megabytes
+LOG_SIZE= 1024
+```
+
+## Configure FB Channel
+
+To use FB Channel, you have to create a Facebook app in the developer portal. You can find more details about creating FB channels [here](https://developers.facebook.com/docs/apps/#register)
+
+```bash
+FB_VERIFY_TOKEN=
+FB_APP_SECRET=
+FB_APP_ID=
+```
+
+## Using CDN for asset delivery
+
+With the release v1.8.0, we are enabling CDN support for Chatwoot. If you have a high traffic website, we recommend to setup a CDN for your asset delivery. Read setting up [CloudFront as your CDN](/docs/self-hosted/deployment/performance/cloudfront-cdn) guide.
+
+## Enable new account signup
+
+By default, Chatwoot will not allow users to create an account[multi-tenancy] from the login page. However, if you are setting up a public server, you can enable signup using:
+
+```bash
+ENABLE_ACCOUNT_SIGNUP=true
+```
+
+## Enable direct upload to storage cloud
+
+By default, Chatwoot will upload the files to the application server and then it will push them to the cloud storage. We have introduced the direct upload functionality so that we can upload the file directly to the cloud storage. This has been built according to rails new direct upload functionality documented [here](https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads). Set below environment variable to true to use the direct upload feature.
+
+Make sure to follow [this guide](https://edgeguides.rubyonrails.org/active_storage_overview.html#cross-origin-resource-sharing-cors-configuration) and set the appropriate CORS configuration on your cloud storage after setting `DIRECT_UPLOADS_ENABLED` to true.
+
+```bash
+DIRECT_UPLOADS_ENABLED=true
+```
+
+## Google OAuth
+
+To enable Google OAuth in Chatwoot, you need to provide the client ID, client secret, and callback URL. You can find the instructions to generate the details [here](https://support.google.com/cloud/answer/6158849).
+
+Set the `GOOGLE_OAUTH_CLIENT_ID` and `GOOGLE_OAUTH_CLIENT_SECRET` environment variables in your Chatwoot installation using the values you copied from the Google API Console. Set the `GOOGLE_OAUTH_CALLBACK_URL` environment variable to the callback URL you used in the Google API Console. Here's an example of the same
+
+```bash
+GOOGLE_OAUTH_CLIENT_ID=369777777777-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
+GOOGLE_OAUTH_CLIENT_SECRET=ABCDEF-GHijklmnoPqrstuvwX-yz1234567
+GOOGLE_OAUTH_CALLBACK_URL=https://<your-server-domain>/omniauth/google_oauth2/callback
+```
+
+<Warning>
+The callback URL should comply with the format in the example above. This endpoint cannot be changed at the moment.
+</Warning>
+
+After setting these environment variables, restart your Chatwoot server to apply the changes. Now, users will be able to sign in using their Google accounts.
+
+## LogRocket
+
+To enable LogRocket in Chatwoot, you need to provide the project ID from LogRocket. Here are the steps to follow:
+
+1. Open the LogRocket [website](https://logrocket.com/) and create an account or sign in to your existing account. 
+2. After signing in, create a new project in LogRocket by clicking on "Create new project". 
+3. Enter a name for your project, and save the project ID.
+4. Set the `LOG_ROCKET_PROJECT_ID` environment variable in your `.env` file with the project ID you copied from LogRocket. 
+
+```bash
+LOG_ROCKET_PROJECT_ID=abcd12/pineapple-on-pizza
+```
+
+After setting this environment variable, restart your Chatwoot server to apply the changes. Now, LogRocket will start capturing user sessions on your Chatwoot installation. 

chatwoot/developer-docs/self-hosted/runbook/help-center.mdx

@@ -0,0 +1,52 @@
+---
+title: Help Center
+description: Set up a public-facing help center portal with custom domain and SSL certificate
+sidebarTitle: Help Center
+---
+
+Help center allows you to create a portal and add articles from the chatwoot app dashboard. You can point to these help center portal articles from your main site and display them as your public-facing help center.
+
+## How to get SSL certificate for your custom domain
+
+### Create a Portal in Chatwoot's dashboard
+
+Follow these step to create your Portal. Refer to [this guide.](https://www.chatwoot.com/hc/user-guide/articles/1677861202-how-to-setup-a-help-center)
+
+### Point your custom domain to your Chatwoot domain
+
+1. Go to your DNS provider and add a new CNAME record.
+   - For the above example, add docs as a CNAME record and point it to the your selfhosted chatwoot domain(FRONTEND_URL).
+
+2. This will ensure that your CNAME record points to the selfhosted Chatwoot installation. For your custom domain, we have your portal information. In this case, `docs.example.com`
+
+### Setting up SSL
+
+1. Use certbot to generate SSL certificates for your custom domain.
+
+```bash
+certbot certonly --agree-tos --nginx -d "docs.example.com"
+```
+
+2. Create a new nginx config to route requests to this domain to Chatwoot. Make a copy of `/etc/nginx/sites-available/nginx_chatwoot.conf` and make necessary changes for the new domain.
+
+3. Restart nginx server.
+
+```bash
+sudo systemctl restart nginx
+```
+
+Voila!
+
+`docs.yourdomain.com` is live with a secure connection, and your portal data is visible.
+
+### How does this work?
+
+These are the engineering details to understand `How does docs.yourdomain.com` gets the portal data with SSL certificate.
+
+1. `docs.yourdomain.com` resolves by customers nameserver and redirects to your Chatwoot domain.
+2. Chatwoot check for the portal record with custom-domain `docs.yourdomain.com`
+3. Redirects to the portal records for the domain `docs.yourdomain.com`
+
+Yaay!!
+
+Now you can have your own help-center, product-documentation related portal saved at Chatwoot dashboard and served at your domain with SSL certificate. 

config/installation_config.yml

@@ -235,6 +235,14 @@
   description: Used to notify Chatwoot about account abuses, potential threads (Should be a Discord Webhook URL)
 # ------- End of Chatwoot Internal Config for Self Hosted ----#
 
+# ------- Compliance Related Config ----#
+- name: CHATWOOT_INSTANCE_ADMIN_EMAIL
+  display_title: 'Instance Admin Email'
+  value:
+  description: 'The email of the instance administrator to receive compliance-related notifications'
+  locked: false
+# ------- End of Compliance Related Config ----#
+
 ## ------ Configs added for enterprise clients ------ ##
 - name: API_CHANNEL_NAME
   value:
@@ -280,6 +288,20 @@
   type: secret
 ## ------ End of Configs added for Linear ------ ##
 
+## ------ Configs added for Slack ------ ##
+- name: SLACK_CLIENT_ID
+  display_title: 'Slack Client ID'
+  value:
+  locked: false
+  description: 'Slack client ID'
+- name: SLACK_CLIENT_SECRET
+  display_title: 'Slack Client Secret'
+  value:
+  locked: false
+  description: 'Slack client secret'
+  type: secret
+## ------ End of Configs added for Slack ------ ##
+
 # ------- Shopify Integration Config ------- #
 - name: SHOPIFY_CLIENT_ID
   display_title: 'Shopify Client ID'

config/integration/apps.yml

@@ -205,6 +205,7 @@ leadsquared:
           'secret_key': { 'type': 'string' },
           'endpoint_url': { 'type': 'string' },
           'app_url': { 'type': 'string' },
+          'timezone': { 'type': 'string' },
           'enable_conversation_activity': { 'type': 'boolean' },
           'enable_transcript_activity': { 'type': 'boolean' },
           'conversation_activity_score': { 'type': 'string' },

config/locales/en.yml

@@ -185,6 +185,8 @@ 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'
@@ -213,33 +215,41 @@ en:
     online:
       delete: '%{contact_name} is Online, please try again later'
   integration_apps:
+    # Note: webhooks and dashboard_apps don't need short_description as they use different modal components
     dashboard_apps:
       name: 'Dashboard Apps'
       description: 'Dashboard Apps allow you to create and embed applications that display user information, orders, or payment history, providing more context to your customer support agents.'
     dyte:
       name: 'Dyte'
+      short_description: 'Start video/voice calls with customers directly from Chatwoot.'
       description: 'Dyte is a product that integrates audio and video functionalities into your application. With this integration, your agents can start video/voice calls with your customers directly from Chatwoot.'
       meeting_name: '%{agent_name} has started a meeting'
     slack:
       name: 'Slack'
+      short_description: 'Receive notifications and respond to conversations directly in Slack.'
       description: "Integrate Chatwoot with Slack to keep your team in sync. This integration allows you to receive notifications for new conversations and respond to them directly within Slack's interface."
     webhooks:
       name: 'Webhooks'
       description: 'Webhook events provide real-time updates about activities in your Chatwoot account. You can subscribe to your preferred events, and Chatwoot will send you HTTP callbacks with the updates.'
     dialogflow:
       name: 'Dialogflow'
+      short_description: 'Build chatbots to handle initial queries before transferring to agents.'
       description: 'Build chatbots with Dialogflow and easily integrate them into your inbox. These bots can handle initial queries before transferring them to a customer service agent.'
     google_translate:
       name: 'Google Translate'
+      short_description: 'Automatically translate customer messages for agents.'
       description: "Integrate Google Translate to help agents easily translate customer messages. This integration automatically detects the language and converts it to the agent's or admin's preferred language."
     openai:
       name: 'OpenAI'
+      short_description: 'AI-powered reply suggestions, summarization, and message enhancement.'
       description: 'Leverage the power of large language models from OpenAI with the features such as reply suggestions, summarization, message rephrasing, spell-checking, and label classification.'
     linear:
       name: 'Linear'
+      short_description: 'Create and link Linear issues directly from conversations.'
       description: 'Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process.'
     shopify:
       name: 'Shopify'
+      short_description: 'Access order details and customer data from your Shopify store.'
       description: 'Connect your Shopify store to access order details, customer information, and product data directly within your conversations and helps your support team provide faster, more contextual assistance to your customers.'
     leadsquared:
       name: 'LeadSquared'

config/routes.rb

@@ -60,8 +60,8 @@ Rails.application.routes.draw do
             end
             resources :assistant_responses
             resources :bulk_actions, only: [:create]
-            resources :copilot_threads, only: [:index] do
-              resources :copilot_messages, only: [:index]
+            resources :copilot_threads, only: [:index, :create] do
+              resources :copilot_messages, only: [:index, :create]
             end
             resources :documents, only: [:index, :show, :create, :destroy]
           end
@@ -127,6 +127,7 @@ Rails.application.routes.draw do
               post :unread
               post :custom_attributes
               get :attachments
+              post :copilot
               get :inbox_assistant
             end
           end
@@ -136,6 +137,7 @@ Rails.application.routes.draw do
               get :conversations
               get :messages
               get :contacts
+              get :articles
             end
           end
 

config/schedule.yml

@@ -39,3 +39,10 @@ process_stale_contacts_job:
   cron: '30 04 * * *'
   class: 'Internal::ProcessStaleContactsJob'
   queue: housekeeping
+
+# executed daily at 0100 UTC
+# to delete accounts marked for deletion
+delete_accounts_job:
+  cron: '0 1 * * *'
+  class: 'Internal::DeleteAccountsJob'
+  queue: scheduled_jobs

db/migrate/20250523024825_remove_uuid_from_copilot_threads.rb

@@ -0,0 +1,8 @@
+class RemoveUuidFromCopilotThreads < ActiveRecord::Migration[7.1]
+  def change
+    remove_column :copilot_threads, :uuid, :string
+
+    add_column :copilot_threads, :assistant_id, :integer
+    add_index :copilot_threads, :assistant_id
+  end
+end

db/migrate/20250523024826_remove_user_id_from_copilot_messages.rb

@@ -0,0 +1,5 @@
+class RemoveUserIdFromCopilotMessages < ActiveRecord::Migration[7.1]
+  def change
+    remove_reference :copilot_messages, :user, index: true
+  end
+end

db/migrate/20250523031839_change_message_type_to_integer_in_copilot_messages.rb

@@ -0,0 +1,11 @@
+class ChangeMessageTypeToIntegerInCopilotMessages < ActiveRecord::Migration[7.1]
+  def up
+    remove_column :copilot_messages, :message_type
+    add_column :copilot_messages, :message_type, :integer, default: 0
+  end
+
+  def down
+    remove_column :copilot_messages, :message_type
+    add_column :copilot_messages, :message_type, :string, default: 'user'
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2025_05_14_045638) do
+ActiveRecord::Schema[7.1].define(version: 2025_05_23_031839) do
   # These extensions should be enabled to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"
@@ -577,27 +577,25 @@ ActiveRecord::Schema[7.0].define(version: 2025_05_14_045638) do
 
   create_table "copilot_messages", force: :cascade do |t|
     t.bigint "copilot_thread_id", null: false
-    t.bigint "user_id", null: false
     t.bigint "account_id", null: false
-    t.string "message_type", null: false
     t.jsonb "message", default: {}, null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.integer "message_type", default: 0
     t.index ["account_id"], name: "index_copilot_messages_on_account_id"
     t.index ["copilot_thread_id"], name: "index_copilot_messages_on_copilot_thread_id"
-    t.index ["user_id"], name: "index_copilot_messages_on_user_id"
   end
 
   create_table "copilot_threads", force: :cascade do |t|
     t.string "title", null: false
     t.bigint "user_id", null: false
     t.bigint "account_id", null: false
-    t.uuid "uuid", default: -> { "gen_random_uuid()" }, null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.integer "assistant_id"
     t.index ["account_id"], name: "index_copilot_threads_on_account_id"
+    t.index ["assistant_id"], name: "index_copilot_threads_on_assistant_id"
     t.index ["user_id"], name: "index_copilot_threads_on_user_id"
-    t.index ["uuid"], name: "index_copilot_threads_on_uuid", unique: true
   end
 
   create_table "csat_survey_responses", force: :cascade do |t|

developer-docs/api-reference/introduction.mdx

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

developer-docs/contributing/code-of-conduct.mdx

@@ -0,0 +1,89 @@
+---
+title: Contributor Covenant Code of Conduct
+description: Code of conduct for Chatwoot community members and contributors
+sidebarTitle: Code of Conduct
+---
+
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at **hello@chatwoot.com**.
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq](https://www.contributor-covenant.org/faq). Translations are available at [https://www.contributor-covenant.org/translations](https://www.contributor-covenant.org/translations).
+
+---
+
+By participating in the Chatwoot community, you agree to abide by this Code of Conduct. Thank you for helping us create a welcoming and inclusive environment for everyone. 

developer-docs/contributing/community-guidelines.mdx

@@ -0,0 +1,205 @@
+---
+title: Chatwoot Community Guidelines
+description: Guidelines for participating in the Chatwoot community across all platforms
+sidebarTitle: Community Guidelines
+---
+
+# Chatwoot Community Guidelines
+
+Welcome to the Chatwoot community! These guidelines help ensure our community remains welcoming, productive, and inclusive for everyone.
+
+## General Principles
+
+### 1. Respect and Inclusivity
+Everyone is welcome here. Treat all members with respect, regardless of their background, identity, or level of experience.
+
+### 2. Collaboration Over Conflict
+Always approach discussions and feedback with a constructive attitude. We're all here to learn and grow together.
+
+### 3. No Spam or Self-Promotion
+Unsolicited advertisements, promotions, or spammy links are not allowed. Share valuable content that benefits the community.
+
+## Platform-Specific Guidelines
+
+### Discord-Specific Guidelines
+
+Our Discord server is where the community gathers for real-time discussions, support, and collaboration.
+
+#### Channel Etiquette
+
+1. **Stay On Topic**: Each channel has its purpose. Ensure your discussions are relevant to the channel topic.
+2. **Use Thread Responses**: For lengthy discussions, use thread replies to keep channels organized.
+3. **Search Before Asking**: Check pinned messages and recent discussions before asking questions.
+
+#### Content Guidelines
+
+1. **No NSFW Content**: This is a professional community. Do not share or promote any NSFW content.
+2. **Quality Over Quantity**: Focus on helpful, meaningful contributions rather than frequent low-value messages.
+3. **Appropriate Language**: Keep language professional and appropriate for a business environment.
+
+#### Voice Channels
+
+1. **Microphone Etiquette**: Ensure your microphone is muted when not speaking.
+2. **Respect Speaking Time**: Avoid interrupting others and allow everyone to participate.
+3. **Background Noise**: Use push-to-talk if you're in a noisy environment.
+
+#### Reporting and Support
+
+1. **Report Violations**: If you see someone violating these guidelines, don't engage. Instead, report it to the moderators.
+2. **Use Private Messages**: For sensitive issues, reach out to moderators via private message.
+
+### GitHub-Specific Guidelines
+
+GitHub is our primary platform for code collaboration, issue tracking, and project management.
+
+#### Issue Reporting
+
+1. **Search First**: Before reporting a bug or requesting a feature, search the issues to ensure it hasn't been addressed already.
+2. **Use Templates**: Follow the provided issue templates for bug reports and feature requests.
+3. **Provide Details**: Include clear steps to reproduce, expected behavior, and actual behavior.
+4. **Stay Updated**: Monitor your issues for questions from maintainers and respond promptly.
+
+#### Pull Requests
+
+1. **Clear Descriptions**: Ensure your PRs are concise, have a clear title, and are linked to relevant issues.
+2. **Follow Style Guide**: Adhere to the existing coding style and conventions.
+3. **Test Thoroughly**: Test your changes in multiple scenarios before submitting.
+4. **Respond to Reviews**: Address feedback constructively and make requested changes promptly.
+
+#### Code Review Guidelines
+
+1. **Be Constructive**: Provide specific, actionable feedback rather than general criticism.
+2. **Explain Reasoning**: When suggesting changes, explain why the change would improve the code.
+3. **Appreciate Good Work**: Acknowledge good code and clever solutions.
+4. **Stay Professional**: Keep discussions focused on the code, not the person.
+
+#### Documentation
+
+1. **Update Documentation**: If your PR introduces a new feature, ensure that it's documented.
+2. **Fix What You See**: If you spot outdated or missing documentation, consider updating it or raising an issue.
+3. **Clear Examples**: Provide clear, working examples in documentation.
+
+## Community Support
+
+### Helping Others
+
+#### In Discord
+
+- **Be Patient**: Remember that people have different experience levels
+- **Provide Context**: When helping, explain not just what to do, but why
+- **Share Resources**: Link to relevant documentation or previous discussions
+- **Follow Up**: Check if your help resolved the issue
+
+#### In GitHub
+
+- **Helpful Comments**: Provide constructive feedback on issues and PRs
+- **Share Knowledge**: Contribute to discussions with your expertise
+- **Test Solutions**: Help test proposed fixes when possible
+
+### Getting Help
+
+#### Before Asking
+
+1. **Check Documentation**: Review the official docs first
+2. **Search History**: Look through previous discussions and issues
+3. **Try Solutions**: Attempt basic troubleshooting steps
+
+#### When Asking
+
+1. **Be Specific**: Provide clear details about your issue
+2. **Include Context**: Share relevant environment information
+3. **Show Effort**: Explain what you've already tried
+4. **Be Patient**: Allow time for community members to respond
+
+## Consequences for Violating Guidelines
+
+We enforce these guidelines to maintain a positive community environment.
+
+### Warning System
+
+1. **First Violation**: For most violations, you will receive a warning from the moderators.
+2. **Repeated Minor Violations**: Additional warnings may lead to temporary restrictions.
+
+### Immediate Actions
+
+For serious violations, immediate actions may be taken:
+
+- **Spam or Self-Promotion**: Immediate ban or removal
+- **Harassment or Abuse**: Immediate removal from the community
+- **Sharing Inappropriate Content**: Content removal and potential ban
+
+### Appeal Process
+
+If you believe you've been unfairly moderated:
+
+1. **Contact Moderators**: Reach out via private message
+2. **Provide Context**: Explain your perspective respectfully
+3. **Accept Decisions**: Respect final moderation decisions
+
+Refer to [enforcement guidelines](/contributing/code-of-conduct#enforcement-guidelines) for more details.
+
+## Moderator and Admin Privileges
+
+### Selection Process
+
+Active contributors to the Chatwoot community, those who consistently offer valuable insights, help, and engagement, may be handpicked as moderators or granted specific privileges.
+
+### Criteria for Moderators
+
+- **Consistent Contribution**: Regular, helpful participation in the community
+- **Good Judgment**: Demonstrated ability to handle conflicts constructively
+- **Technical Knowledge**: Understanding of Chatwoot and related technologies
+- **Time Commitment**: Ability to dedicate time to moderation duties
+
+### Responsibilities
+
+Moderators are expected to:
+
+- **Enforce Guidelines**: Apply community guidelines fairly and consistently
+- **Facilitate Discussions**: Help keep conversations productive and on-topic
+- **Support Users**: Provide assistance and guidance to community members
+- **Report Issues**: Escalate serious violations to administrators
+
+### Discretionary Decisions
+
+- **Appointment Process**: The appointment of moderators and the granting of additional privileges are at the sole discretion of the Chatwoot team.
+- **Review Process**: Moderator performance is reviewed regularly to ensure community standards are maintained.
+
+### Admin Privileges
+
+For compliance and security reasons, admin privileges in all Chatwoot communities are reserved exclusively for Chatwoot employees.
+
+## Building a Positive Community
+
+### Encouraging Participation
+
+- **Welcome Newcomers**: Help new members feel included and valued
+- **Celebrate Contributions**: Acknowledge helpful contributions and achievements
+- **Share Knowledge**: Contribute your expertise to help others learn
+- **Provide Feedback**: Offer constructive feedback on ideas and solutions
+
+### Creating Inclusive Environment
+
+- **Use Inclusive Language**: Choose words that welcome all community members
+- **Respect Differences**: Value diverse perspectives and experiences
+- **Avoid Assumptions**: Don't assume others' backgrounds or knowledge levels
+- **Learn Together**: Approach discussions as learning opportunities
+
+## Resources for Community Members
+
+### Getting Started
+
+- **Community Onboarding**: [Discord community](https://discord.com/invite/cJXdrwS)
+- **Contributor Guide**: [Contributing documentation](/contributing/introduction)
+- **Code of Conduct**: [Detailed guidelines](/contributing/code-of-conduct)
+
+### Stay Connected
+
+- **Discord Server**: Real-time community discussions
+- **GitHub Discussions**: Long-form technical discussions
+- **Twitter**: [@chatwootapp](https://twitter.com/chatwootapp) for updates
+- **Blog**: [Chatwoot Blog](https://www.chatwoot.com/blog) for articles and insights
+
+---
+
+Together, we can build an amazing community that supports Chatwoot users and contributors worldwide. Thank you for being part of our journey! 🚀 

developer-docs/contributing/contributors.mdx

@@ -0,0 +1,37 @@
+---
+title: Contributors
+description: Meet the amazing people who contribute to Chatwoot
+sidebarTitle: Contributors
+---
+
+# Contributors
+
+Chatwoot is made possible by the amazing community of developers, designers, translators, and supporters who contribute their time and expertise to make it better every day.
+
+## Our Contributors
+
+You can find the full list of contributors at [https://contributors.chatwoot.com](https://contributors.chatwoot.com)
+
+<a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://contributors.chatwoot.com/api/graph.svg?columns=30&size=32" /></a>
+
+## Join Our Contributors
+
+Ready to make your mark on Chatwoot? Here's how to get started:
+
+### Quick Start
+
+1. **Star the Repository**: [Star Chatwoot on GitHub](https://github.com/chatwoot/chatwoot)
+2. **Join Discord**: [Join our Discord community](https://discord.com/invite/cJXdrwS)
+3. **Pick an Issue**: Find a [good first issue](https://github.com/chatwoot/chatwoot/labels/good%20first%20issue)
+4. **Make Your First Contribution**: Follow our [contribution guide](/contributing/introduction)
+
+### Stay Connected
+
+- **GitHub**: [github.com/chatwoot/chatwoot](https://github.com/chatwoot/chatwoot)
+- **Discord**: [discord.com/invite/cJXdrwS](https://discord.com/invite/cJXdrwS)
+- **Twitter**: [@chatwootapp](https://twitter.com/chatwootapp)
+- **LinkedIn**: [Chatwoot Company Page](https://www.linkedin.com/company/chatwoot)
+
+---
+
+Every contribution, no matter how small, makes Chatwoot better for thousands of users worldwide. Thank you for considering joining our contributor community! 🙏 

developer-docs/contributing/cypress.mdx

@@ -0,0 +1,127 @@
+---
+title: End-to-end testing with Cypress
+description: Guide to running Cypress end-to-end tests for Chatwoot
+sidebarTitle: Cypress Testing
+---
+
+# End-to-end testing with Cypress
+
+Chatwoot uses [Cypress](https://www.cypress.io/) for end-to-end testing. Use the following steps to run the tests on your local machine.
+
+## Prepare the Test Server
+
+Choose any of the given methods to run your Chatwoot test server.
+
+<Tabs>
+<Tab title="Local Installation">
+
+### Using Local Chatwoot Installation
+
+<Note>
+You have to install the necessary dependencies as described in [setup guide](/contributing/project-setup/setup-guide) for this method to work.
+</Note>
+
+Navigate to Chatwoot codebase in your local machine and execute the following steps:
+
+#### Create a fresh test database
+
+```bash
+RAILS_ENV=test bin/rake db:drop
+RAILS_ENV=test bin/rake db:create
+RAILS_ENV=test bin/rake db:schema:load
+```
+
+#### Start Chatwoot in the test environment
+
+```bash
+RAILS_ENV=test foreman start -f Procfile.test
+```
+
+Load the URL in the browser and wait for it to start up:
+```
+http://localhost:5050/app/login
+```
+
+</Tab>
+<Tab title="Docker Setup">
+
+### Using Docker
+
+Follow the [docker setup guide](/contributing/project-setup/docker-setup) until you build the images.
+
+#### Change the Rails Environment
+
+Open `docker-compose.yaml` and update all the `RAILS_ENV` values from `development` to `test`:
+
+```yaml
+# In docker-compose.yaml
+environment:
+  - RAILS_ENV=test  # Change from development to test
+```
+
+#### Update the Port
+
+Under rails section in your `docker-compose.yaml` update the port value as given below:
+
+```yaml
+# In docker-compose.yaml
+ports:
+  - 5050:3000  # Change from 3000:3000 to 5050:3000
+```
+
+#### Reset the Database
+
+```bash
+docker-compose run --rm rails bundle exec rails db:reset
+```
+
+#### Start Chatwoot Docker in the test environment
+
+```bash
+docker-compose up
+```
+
+Load the URL in the browser and wait for it to start up:
+```
+http://localhost:5050/app/login
+```
+
+</Tab>
+</Tabs>
+
+## Run Cypress
+
+Load `localhost:5050` on your browser and ensure that the Chatwoot server is running.
+
+Navigate to your Chatwoot local directory and execute the following command to run the Cypress tests:
+
+```bash
+pnpm cypress open --project ./spec
+```
+
+This will open the Cypress Test Runner where you can:
+
+1. **Choose a browser** for running tests
+2. **Select test files** to run individual or all tests
+3. **Watch tests run** in real-time with step-by-step execution
+4. **Debug failed tests** with detailed error information
+
+
+## Getting Help
+
+If you encounter issues with Cypress testing:
+
+- **Cypress Documentation**: [Official Cypress Docs](https://docs.cypress.io/)
+- **Cypress Best Practices**: [Testing Guide](https://docs.cypress.io/guides/references/best-practices)
+- **Common Errors**: See [Common Errors](/contributing/project-setup/common-errors)
+- **Community Support**: [Discord](https://discord.com/invite/cJXdrwS)
+
+## Useful Resources
+
+- **Cypress API Reference**: [https://docs.cypress.io/api/table-of-contents](https://docs.cypress.io/api/table-of-contents)
+- **Testing Library**: [Testing utilities for better element selection](https://testing-library.com/)
+- **Cypress Examples**: [Real-world examples](https://github.com/cypress-io/cypress-example-recipes)
+
+---
+
+Your Cypress testing environment is now ready for comprehensive end-to-end testing! 🧪 

developer-docs/contributing/environment-setup/local-development.mdx

@@ -0,0 +1,588 @@
+---
+title: Local Development Setup
+description: Set up Chatwoot for local development on your machine
+sidebarTitle: Local Development
+---
+
+# Local Development Setup
+
+This guide will help you set up Chatwoot for local development on your machine. Follow these steps to get a complete development environment running.
+
+## Prerequisites
+
+Before setting up Chatwoot locally, ensure you have the following installed:
+
+### Required Software
+
+<CardGroup cols={2}>
+  <Card title="Ruby" icon="gem">
+    Ruby 3.3.3 (managed with rbenv or RVM)
+  </Card>
+  <Card title="Node.js" icon="node-js">
+    Node.js 20+ with pnpm package manager
+  </Card>
+  <Card title="PostgreSQL" icon="database">
+    PostgreSQL 13+ for the database
+  </Card>
+  <Card title="Redis" icon="redis">
+    Redis 6+ for caching and background jobs
+  </Card>
+</CardGroup>
+
+### System Dependencies
+
+<Tabs>
+  <Tab title="macOS">
+    ```bash
+    # Install Homebrew if not already installed
+    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+    
+    # Install dependencies
+    brew install postgresql@15 redis imagemagick git
+    
+    # Install rbenv for Ruby version management
+    brew install rbenv ruby-build
+    
+    # Install Node.js and pnpm
+    brew install node
+    npm install -g pnpm
+    
+    # Start services
+    brew services start postgresql@15
+    brew services start redis
+    ```
+  </Tab>
+  
+  <Tab title="Ubuntu/Debian">
+    ```bash
+    # Update package list
+    sudo apt update
+    
+    # Install dependencies
+    sudo apt install -y curl git build-essential libssl-dev libreadline-dev \
+      zlib1g-dev libpq-dev imagemagick libmagickwand-dev libffi-dev \
+      postgresql postgresql-contrib redis-server
+    
+    # Install rbenv
+    curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash
+    
+    # Install Node.js (using NodeSource)
+    curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
+    sudo apt install -y nodejs
+    
+    # Install pnpm
+    npm install -g pnpm
+    
+    # Start services
+    sudo systemctl start postgresql
+    sudo systemctl start redis-server
+    sudo systemctl enable postgresql
+    sudo systemctl enable redis-server
+    ```
+  </Tab>
+  
+  <Tab title="CentOS/RHEL">
+    ```bash
+    # Install EPEL repository
+    sudo yum install -y epel-release
+    
+    # Install dependencies
+    sudo yum groupinstall -y "Development Tools"
+    sudo yum install -y curl git openssl-devel readline-devel zlib-devel \
+      postgresql-devel ImageMagick-devel libffi-devel postgresql-server \
+      postgresql-contrib redis
+    
+    # Initialize PostgreSQL
+    sudo postgresql-setup initdb
+    
+    # Install rbenv
+    curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash
+    
+    # Install Node.js
+    curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
+    sudo yum install -y nodejs
+    
+    # Install pnpm
+    npm install -g pnpm
+    
+    # Start services
+    sudo systemctl start postgresql
+    sudo systemctl start redis
+    sudo systemctl enable postgresql
+    sudo systemctl enable redis
+    ```
+  </Tab>
+</Tabs>
+
+## Ruby Setup
+
+### Install Ruby with rbenv
+
+```bash
+# Add rbenv to your shell profile
+echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
+echo 'eval "$(rbenv init -)"' >> ~/.bashrc
+source ~/.bashrc
+
+# Install Ruby 3.3.3
+rbenv install 3.3.3
+rbenv global 3.3.3
+
+# Verify installation
+ruby --version
+# Should output: ruby 3.3.3
+
+# Install bundler
+gem install bundler
+```
+
+### Alternative: Using RVM
+
+```bash
+# Install RVM
+curl -sSL https://get.rvm.io | bash -s stable
+source ~/.rvm/scripts/rvm
+
+# Install Ruby 3.3.3
+rvm install 3.3.3
+rvm use 3.3.3 --default
+
+# Verify installation
+ruby --version
+gem install bundler
+```
+
+## Database Setup
+
+### PostgreSQL Configuration
+
+```bash
+# Create PostgreSQL user (macOS with Homebrew)
+createuser -s chatwoot
+
+# Create PostgreSQL user (Linux)
+sudo -u postgres createuser -s chatwoot
+
+# Set password for the user
+sudo -u postgres psql
+postgres=# ALTER USER chatwoot PASSWORD 'password';
+postgres=# \q
+
+# Create databases
+createdb chatwoot_development
+createdb chatwoot_test
+```
+
+### PostgreSQL Authentication Setup
+
+Edit PostgreSQL configuration to allow local connections:
+
+```bash
+# Find pg_hba.conf location
+sudo -u postgres psql -c "SHOW hba_file;"
+
+# Edit the file (example path)
+sudo nano /etc/postgresql/15/main/pg_hba.conf
+
+# Add or modify these lines:
+local   all             chatwoot                                md5
+host    all             chatwoot        127.0.0.1/32            md5
+host    all             chatwoot        ::1/128                 md5
+
+# Restart PostgreSQL
+sudo systemctl restart postgresql
+```
+
+## Project Setup
+
+### Clone the Repository
+
+```bash
+# Fork the repository on GitHub first, then clone your fork
+git clone https://github.com/YOUR_USERNAME/chatwoot.git
+cd chatwoot
+
+# Add upstream remote
+git remote add upstream https://github.com/chatwoot/chatwoot.git
+
+# Verify remotes
+git remote -v
+```
+
+### Install Dependencies
+
+```bash
+# Install Ruby dependencies
+bundle install
+
+# Install Node.js dependencies
+pnpm install
+
+# Install Playwright for E2E tests (optional)
+pnpm exec playwright install
+```
+
+### Environment Configuration
+
+```bash
+# Copy environment file
+cp .env.example .env
+
+# Edit the environment file
+nano .env
+```
+
+Update the `.env` file with your local configuration:
+
+```bash
+# Database configuration
+DATABASE_URL=postgresql://chatwoot:password@localhost:5432/chatwoot_development
+REDIS_URL=redis://localhost:6379/0
+
+# Application settings
+FRONTEND_URL=http://localhost:3000
+FORCE_SSL=false
+RAILS_ENV=development
+NODE_ENV=development
+
+# Email configuration (for development)
+MAILER_SENDER_EMAIL=dev@chatwoot.local
+SMTP_ADDRESS=localhost
+SMTP_PORT=1025
+
+# File storage (local)
+ACTIVE_STORAGE_SERVICE=local
+
+# Development features
+ENABLE_DEVELOPMENT_FEATURES=true
+LOG_LEVEL=debug
+```
+
+### Database Initialization
+
+```bash
+# Create and migrate the database
+bundle exec rails db:create
+bundle exec rails db:migrate
+
+# Seed the database with sample data
+bundle exec rails db:seed
+
+# Prepare the test database
+RAILS_ENV=test bundle exec rails db:create
+RAILS_ENV=test bundle exec rails db:migrate
+```
+
+## Running the Application
+
+### Start Development Servers
+
+You'll need to run multiple processes for full development:
+
+#### Option 1: Using Foreman (Recommended)
+
+```bash
+# Install foreman
+gem install foreman
+
+# Start all services
+foreman start -f Procfile.dev
+```
+
+#### Option 2: Manual Process Management
+
+Open multiple terminal windows/tabs:
+
+```bash
+# Terminal 1: Rails server
+bundle exec rails server -p 3000
+
+# Terminal 2: Webpack dev server
+pnpm run dev
+
+# Terminal 3: Sidekiq worker
+bundle exec sidekiq
+
+# Terminal 4: MailHog (for email testing)
+mailhog
+```
+
+### Access the Application
+
+Once all services are running:
+
+- **Web Application**: http://localhost:3000
+- **API Documentation**: http://localhost:3000/swagger
+- **Sidekiq Web UI**: http://localhost:3000/sidekiq
+- **MailHog (Email)**: http://localhost:8025
+
+### Default Login Credentials
+
+After seeding the database, you can log in with:
+
+- **Email**: john@acme.inc
+- **Password**: Password1!
+
+## Development Tools
+
+### Code Quality Tools
+
+```bash
+# Install development gems
+bundle install --with development test
+
+# Run RuboCop (Ruby linter)
+bundle exec rubocop
+
+# Run RuboCop with auto-fix
+bundle exec rubocop -a
+
+# Run ESLint (JavaScript linter)
+pnpm run lint
+
+# Run ESLint with auto-fix
+pnpm run lint:fix
+
+# Run Prettier (code formatter)
+pnpm run format
+```
+
+### Testing
+
+```bash
+# Run Ruby tests
+bundle exec rspec
+
+# Run specific test file
+bundle exec rspec spec/models/user_spec.rb
+
+# Run JavaScript tests
+pnpm run test
+
+# Run E2E tests
+pnpm run test:e2e
+
+# Run tests with coverage
+COVERAGE=true bundle exec rspec
+```
+
+### Database Operations
+
+```bash
+# Reset database
+bundle exec rails db:drop db:create db:migrate db:seed
+
+# Generate migration
+bundle exec rails generate migration AddColumnToTable column:type
+
+# Run migrations
+bundle exec rails db:migrate
+
+# Rollback migration
+bundle exec rails db:rollback
+
+# Check migration status
+bundle exec rails db:migrate:status
+```
+
+## IDE and Editor Setup
+
+### VS Code Configuration
+
+Create `.vscode/settings.json`:
+
+```json
+{
+  "ruby.intellisense": "rubyLocate",
+  "ruby.codeCompletion": "rcodetools",
+  "ruby.format": "rubocop",
+  "editor.formatOnSave": true,
+  "editor.rulers": [120],
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  "eslint.autoFixOnSave": true,
+  "prettier.requireConfig": true
+}
+```
+
+### Recommended VS Code Extensions
+
+```json
+{
+  "recommendations": [
+    "rebornix.ruby",
+    "wingrunr21.vscode-ruby",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-next",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
+```
+
+### RubyMine Configuration
+
+1. Open the project in RubyMine
+2. Configure Ruby SDK: File → Project Structure → SDKs
+3. Set up database connection in Database tool window
+4. Configure code style: File → Settings → Editor → Code Style
+
+## Debugging
+
+### Rails Debugging
+
+```ruby
+# Add to your code for debugging
+binding.pry
+
+# Or use the built-in debugger
+debugger
+```
+
+### JavaScript Debugging
+
+```javascript
+// Add to your code
+console.log('Debug info:', variable);
+debugger;
+```
+
+### Database Debugging
+
+```bash
+# Rails console
+bundle exec rails console
+
+# Database console
+bundle exec rails dbconsole
+
+# Check database queries in logs
+tail -f log/development.log | grep SQL
+```
+
+## Common Issues and Solutions
+
+### Bundle Install Issues
+
+<Accordion title="pg gem installation fails">
+```bash
+# macOS
+brew install postgresql
+bundle config build.pg --with-pg-config=/usr/local/bin/pg_config
+
+# Ubuntu/Debian
+sudo apt-get install libpq-dev
+bundle install
+```
+</Accordion>
+
+<Accordion title="ImageMagick issues">
+```bash
+# macOS
+brew install imagemagick pkg-config
+
+# Ubuntu/Debian
+sudo apt-get install libmagickwand-dev
+
+# Then reinstall the gem
+bundle pristine rmagick
+```
+</Accordion>
+
+### Node.js Issues
+
+<Accordion title="pnpm install fails">
+```bash
+# Clear cache and reinstall
+pnpm store prune
+rm -rf node_modules
+pnpm install
+```
+</Accordion>
+
+<Accordion title="Webpack compilation errors">
+```bash
+# Clear webpack cache
+rm -rf tmp/cache/webpacker
+pnpm run dev
+```
+</Accordion>
+
+### Database Issues
+
+<Accordion title="Database connection refused">
+```bash
+# Check if PostgreSQL is running
+sudo systemctl status postgresql
+
+# Start PostgreSQL if not running
+sudo systemctl start postgresql
+
+# Check connection
+psql -U chatwoot -d chatwoot_development -h localhost
+```
+</Accordion>
+
+<Accordion title="Permission denied for database">
+```bash
+# Reset PostgreSQL user password
+sudo -u postgres psql
+postgres=# ALTER USER chatwoot PASSWORD 'password';
+postgres=# \q
+```
+</Accordion>
+
+## Performance Optimization
+
+### Development Performance Tips
+
+```bash
+# Use spring for faster Rails commands
+bundle exec spring binstub --all
+
+# Use bootsnap for faster boot times (already included)
+# Ensure tmp/cache directory exists
+mkdir -p tmp/cache
+
+# Use parallel testing
+bundle exec rspec --parallel
+
+# Optimize database queries
+# Add to config/environments/development.rb
+config.active_record.verbose_query_logs = true
+```
+
+### Memory Usage Optimization
+
+```bash
+# Monitor memory usage
+ps aux | grep ruby
+ps aux | grep node
+
+# Use jemalloc for better memory management
+export MALLOC_ARENA_MAX=2
+bundle exec rails server
+```
+
+## Next Steps
+
+Once you have your development environment set up:
+
+1. **Read the Contributing Guidelines**: Check out the [contributing guide](../introduction) for code standards and workflow
+2. **Explore the Codebase**: Familiarize yourself with the project structure
+3. **Pick an Issue**: Look for "good first issue" labels on GitHub
+4. **Join the Community**: Connect with other contributors on Discord or GitHub Discussions
+
+## Getting Help
+
+If you encounter issues during setup:
+
+- **GitHub Issues**: Search existing issues or create a new one
+- **Discord Community**: Join the Chatwoot Discord server
+- **Documentation**: Check the official documentation
+- **Stack Overflow**: Search for Chatwoot-related questions
+
+---
+
+You're now ready to start contributing to Chatwoot! The development environment should be fully functional and ready for coding. 

developer-docs/contributing/introduction.mdx

@@ -0,0 +1,196 @@
+---
+title: Contributing to Chatwoot
+description: Complete guide to contributing to Chatwoot - from setting up your development environment to submitting pull requests.
+sidebarTitle: Introduction
+---
+
+# Contributing Guide
+
+Thank you for taking an interest in contributing to Chatwoot! This guide will help you get started with contributing to our open-source customer support platform. Before submitting your contribution, please make sure to take a moment and read through the following guidelines.
+
+## Getting Started
+
+<Warning>
+Before starting your work, ensure an issue exists for it. If not, feel free to create one. You can also take a look into the issues tagged [Good first issues](https://github.com/chatwoot/chatwoot/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).
+</Warning>
+
+### Initial Steps
+
+1. **Check for Existing Issues**: Browse the [GitHub issues](https://github.com/chatwoot/chatwoot/issues) to see if someone is already working on what you want to contribute.
+
+2. **Comment on the Issue**: Add a comment on the issue and wait for the issue to be assigned before you start working on it.
+   - This helps to avoid multiple people working on similar issues.
+
+3. **Propose Complex Solutions**: If the solution is complex, propose the solution on the issue and wait for one of the core contributors to approve before going into the implementation.
+   - This helps in shorter turn around times in merging PRs.
+
+4. **Justify New Features**: For new feature requests, provide a convincing reason to add this feature. Real-life business use-cases will be super helpful.
+
+5. **Join the Community**: Feel free to join our [Discord community](https://discord.com/invite/cJXdrwS) if you need further discussions with the core team.
+
+## Pull Request Guidelines
+
+<Info>
+We use git-flow branching model. The base branch is `develop`. Please raise your PRs against the `develop` branch.
+</Info>
+
+### Before Submitting
+
+- Please make sure that you have read the [issue triage guidelines](https://www.chatwoot.com/hc/handbook/articles/issue-triage-29) before you make a contribution.
+- It's okay and encouraged to have multiple small commits as you work on the PR - we will squash the commits before merging.
+- For other guidelines, see [PR Guidelines](https://www.chatwoot.com/hc/handbook/articles/pull-request-guidelines-32)
+- Ensure that all the text copies that you add into the product are i18n translatable. You are only required to add the `English` version of the strings. We pull in other language translations from our contributors on crowdin. See [Translation guidelines](https://www.chatwoot.com/docs/contributing-guide/translation-guidelines) to learn more.
+
+## Development Workflow
+
+### Developing a New Feature
+
+```bash
+# Create a branch in the following format:
+feature/<issue-id>-<issue-name>
+
+# Example:
+feature/235-contact-panel
+```
+
+**Requirements:**
+- Add accompanying test cases
+- Follow our coding standards
+- Include proper documentation
+
+### Bug Fixes or Chores
+
+```bash
+# Branch naming for bug fixes:
+fix/<issue-id>-<issue-name>
+
+# Branch naming for chores:
+chore/<description>
+```
+
+**Requirements:**
+- If you are resolving a particular issue, add `fix: Fixes xxxx` (#xxxx is the issue) in your PR title
+- Provide a detailed description of the bug in the PR
+- Add appropriate test coverage if applicable
+
+## Environment Setup
+
+Choose the guide that matches your operating system:
+
+<CardGroup cols={2}>
+  <Card
+    title="macOS Setup"
+    icon="apple"
+    href="/contributing/project-setup/macos-setup"
+  >
+    Complete setup guide for macOS developers
+  </Card>
+  <Card
+    title="Ubuntu Setup"
+    icon="ubuntu"
+    href="/contributing/project-setup/ubuntu-setup"
+  >
+    Step-by-step Ubuntu installation guide
+  </Card>
+  <Card
+    title="Windows Setup"
+    icon="windows"
+    href="/contributing/project-setup/windows-setup"
+  >
+    Windows 10/11 development environment setup
+  </Card>
+  <Card
+    title="Docker Setup"
+    icon="docker"
+    href="/contributing/project-setup/docker-setup"
+  >
+    Quick setup using Docker containers
+  </Card>
+</CardGroup>
+
+### Speed Up Development
+
+Use our [Make commands](/contributing/project-setup/make-setup) to speed up your local development workflow.
+
+## Project Setup
+
+Once you have set up the environment, follow these guides to get Chatwoot running locally:
+
+1. **[Quick Setup Guide](/contributing/project-setup/setup-guide)** - Step-by-step setup instructions
+2. **[Environment Variables](/contributing/project-setup/environment-variables)** - Configuration options
+3. **[Common Errors](/contributing/project-setup/common-errors)** - Troubleshooting guide
+
+### Special App Integrations
+
+If you're working on specific integrations:
+- **[Telegram App Setup](/contributing/project-setup/telegram-app)** 
+- **[Line App Setup](/contributing/project-setup/line-app)**
+- **[Mobile App Development](/contributing/project-setup/mobile-app)**
+
+## Testing Your Contributions
+
+We use comprehensive testing to ensure code quality:
+
+### Test Types
+- **Unit Tests**: Test individual components and functions
+- **Integration Tests**: Test component interactions
+- **End-to-End Tests**: Test complete user workflows with [Cypress](/contributing/testing)
+
+### Running Tests
+
+```bash
+# Run all tests
+bundle exec rspec
+
+# Run specific test file
+bundle exec rspec spec/models/user_spec.rb
+
+# Run Cypress tests
+npm run cypress:open
+```
+
+## Documentation and Translation
+
+### Documentation Guidelines
+- Keep documentation clear and concise
+- Include code examples where helpful
+- Update documentation when changing functionality
+- Follow our [translation guidelines](https://www.chatwoot.com/docs/contributing-guide/other/translation-guidelines)
+
+### Internationalization
+- All user-facing text must be translatable
+- Only add English strings - other languages are handled via [Crowdin](https://translate.chatwoot.com/)
+- Use proper i18n keys and formatting
+
+## Community Guidelines
+
+We strive to maintain a welcoming and inclusive community:
+
+- **[Code of Conduct](https://www.chatwoot.com/docs/contributing-guide/other/code-of-conduct)** - Our community standards
+- **[Community Guidelines](https://www.chatwoot.com/docs/contributing-guide/other/community-guidelines)** - How we interact
+- **[Security Reports](https://www.chatwoot.com/docs/contributing-guide/other/security-reports)** - Reporting security issues
+
+## API Development
+
+If you're working on API-related features:
+
+- **[Chatwoot APIs](https://www.chatwoot.com/docs/contributing-guide/other/chatwoot-apis)** - API development guide
+- **[API Documentation](https://www.chatwoot.com/docs/contributing-guide/other/api-documentation)** - Documenting APIs
+- **[Platform APIs](https://www.chatwoot.com/docs/contributing-guide/other/chatwoot-platform-apis)** - Platform-level APIs
+
+## Recognition
+
+We value all contributions to Chatwoot. Check out our [Contributors page](https://www.chatwoot.com/docs/contributing-guide/other/contributors) to see the amazing people who have helped make Chatwoot better.
+
+## Getting Help
+
+Need assistance? Here are your options:
+
+- **GitHub Issues**: For bug reports and feature requests
+- **Discord Community**: For real-time discussions with the core team
+- **Documentation**: Comprehensive guides and API references
+- **Community Forums**: Connect with other contributors
+
+---
+
+Ready to start contributing? Pick an issue that interests you and follow our guidelines above. Every contribution, no matter how small, helps make Chatwoot better for everyone! 🚀 

developer-docs/contributing/project-setup/docker-setup.mdx

@@ -0,0 +1,283 @@
+---
+title: Docker Development Setup
+description: Complete guide to setting up Chatwoot development environment using Docker and Docker Compose.
+sidebarTitle: Docker Setup
+---
+
+# Docker Development Setup
+
+This guide will help you set up a complete Chatwoot development environment using Docker and Docker Compose.
+
+## Pre-requisites
+
+Before proceeding, make sure you have the latest version of `docker` and `docker-compose` installed.
+
+As of now, we recommend a version equal to or higher than the following:
+
+```bash
+$ docker --version
+Docker version 25.0.4, build 1a576c5
+$ docker compose --version
+docker-compose version 2.24.7
+```
+
+### Install Docker
+
+#### Windows
+
+1. **Download Docker Desktop** from [https://www.docker.com/products/docker-desktop/](https://www.docker.com/products/docker-desktop/)
+2. **Run the installer** and follow setup instructions
+3. **Enable WSL2 backend** (recommended)
+4. **Restart your computer** when prompted
+
+#### macOS
+
+```bash
+# Option 1: Download from website
+# Go to https://www.docker.com/products/docker-desktop/
+
+# Option 2: Using Homebrew
+brew install --cask docker
+```
+
+#### Linux (Ubuntu/Debian)
+
+```bash
+# Update package index
+sudo apt update
+
+# Install dependencies
+sudo apt install -y apt-transport-https ca-certificates curl gnupg lsb-release
+
+# Add Docker's official GPG key
+curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
+
+# Add Docker repository
+echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+# Install Docker
+sudo apt update
+sudo apt install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
+
+# Add user to docker group
+sudo usermod -aG docker $USER
+
+# Start Docker service
+sudo systemctl start docker
+sudo systemctl enable docker
+```
+
+<Warning>
+After adding yourself to the docker group on Linux, log out and log back in for the changes to take effect.
+</Warning>
+
+## Development Environment
+
+1. **Clone the repository.**
+
+    ```bash
+    git clone https://github.com/chatwoot/chatwoot.git
+    ```
+
+2. **Make a copy of the example environment file and modify it as required.**
+
+    ```bash
+    # Navigate to Chatwoot
+    cd chatwoot
+    cp .env.example .env
+    # Update redis and postgres passwords
+    nano .env
+    # Update docker-compose.yaml with the same postgres password
+    nano docker-compose.yaml
+    ```
+
+3. **Build the images.**
+
+    ```bash
+    # Build base image first
+    docker compose build base
+
+    # Build the server and worker
+    docker compose build
+    ```
+
+4. **After building the image or destroying the stack, you would have to reset the database using the following command.**
+
+    ```bash
+    docker compose run --rm rails bundle exec rails db:chatwoot_prepare
+    ```
+
+5. **To run the app:**
+
+    ```bash
+    docker compose up
+    ```
+
+    * Access the rails app frontend by visiting `http://0.0.0.0:3000/`
+    * Access Mailhog inbox by visiting `http://0.0.0.0:8025/` (You will receive all emails going out of the application here)
+
+    #### Login with credentials
+    ```
+    url: http://localhost:3000
+    user_name: john@acme.inc
+    password: Password1!
+    ```
+
+6. **To stop the app:**
+
+    ```bash
+    docker compose down
+    ```
+
+## Running RSpec Tests
+
+For running the complete RSpec tests:
+
+```bash
+docker compose run --rm rails bundle exec rspec
+```
+
+For running specific test:
+
+```bash
+docker compose run --rm rails bundle exec rspec spec/<path-to-file>:<line-number>
+```
+
+## Production Environment
+
+To debug the production build locally, set `SECRET_KEY_BASE` environment variable in your `.env` file and then run the below commands:
+
+```bash
+docker compose -f docker-compose.production.yaml build
+docker compose -f docker-compose.production.yaml up
+```
+
+## Debugging Mode
+
+To use debuggers like `byebug` or `binding.pry`, use the following command to bring up the app instead of `docker compose up`:
+
+```bash
+docker compose run --rm --service-port rails
+```
+
+## Development Workflow
+
+### Daily Development Commands
+
+```bash
+# Start development environment
+docker compose up
+
+# View logs
+docker compose logs -f rails
+
+# Access Rails console
+docker compose exec rails bundle exec rails console
+
+# Run migrations
+docker compose exec rails bundle exec rails db:migrate
+
+# Install new gems
+docker compose exec rails bundle install
+
+# Restart a service
+docker compose restart rails
+
+# Stop all services
+docker compose down
+
+# Stop and remove volumes (reset database)
+docker compose down -v
+```
+
+## Troubleshooting
+
+If there is an update to any of the following:
+- `dockerfile`
+- `gemfile`
+- `package.json`
+- schema change
+
+Make sure to rebuild the containers and run `db:reset`.
+
+```bash
+docker compose down
+docker compose build
+docker compose run --rm rails bundle exec rails db:reset
+docker compose up
+```
+
+### Common Issues
+
+<Accordion title="Container fails to start">
+**Solution**: Check service dependencies and logs:
+```bash
+# Check service status
+docker compose ps
+
+# Check logs for specific service
+docker compose logs rails
+
+# Restart problematic service
+docker compose restart rails
+```
+</Accordion>
+
+<Accordion title="Database connection refused">
+**Solution**: Ensure PostgreSQL container is healthy:
+```bash
+# Check postgres health
+docker compose exec postgres pg_isready
+
+# Restart postgres if needed
+docker compose restart postgres
+```
+</Accordion>
+
+<Accordion title="Port already in use">
+**Solution**: Stop other services using the same ports:
+```bash
+# Check what's using port 3000
+lsof -i :3000
+
+# Or change ports in docker-compose.yaml
+```
+</Accordion>
+
+<Accordion title="Out of disk space">
+**Solution**: Clean up Docker resources:
+```bash
+# Remove unused containers, networks, images
+docker system prune -f
+
+# Remove volumes (WARNING: This deletes data)
+docker volume prune -f
+
+# Remove everything (nuclear option)
+docker system prune -a --volumes
+```
+</Accordion>
+
+<Accordion title="Build fails">
+**Solution**: Clear Docker cache and rebuild:
+```bash
+# Clear build cache
+docker builder prune
+
+# Rebuild without cache
+docker compose build --no-cache
+```
+</Accordion>
+
+## Getting Help
+
+If you encounter Docker-specific issues:
+
+- **Docker Documentation**: [https://docs.docker.com/](https://docs.docker.com/)
+- **Docker Compose Reference**: [https://docs.docker.com/compose/](https://docs.docker.com/compose/)
+- **Chatwoot Issues**: [GitHub Issues](https://github.com/chatwoot/chatwoot/issues)
+- **Community Support**: [Discord](https://discord.com/invite/cJXdrwS)
+
+---
+
+Your Docker development environment is now ready for Chatwoot development! 🐳 

developer-docs/contributing/project-setup/environment-variables.mdx

@@ -0,0 +1,17 @@
+---
+title: Environment Variables for Development
+description: Complete guide to environment variables for Chatwoot development and testing
+sidebarTitle: Environment Variables
+---
+
+# Environment Variables for Development
+
+This guide covers environment variables specifically for development and testing environments. For production environment variables, see the [Self-hosted Environment Variables](../../self-hosted/configuration/environment-variables) guide.
+
+### Use letter opener instead of mailhog/SMTP
+
+Set the following variable to open emails in letter opener instead of SMTP
+
+```bash
+LETTER_OPENER=true
+```