Move copilot to websockets

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

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

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

@@ -8,6 +8,7 @@ import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
+import CopilotThinkingBlock from 'dashboard/components/copilot/CopilotThinkingBlock.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
 import Icon from '../icon/Icon.vue';
 import Button from '../button/Button.vue';
@@ -43,8 +44,6 @@ const emit = defineEmits(['sendMessage', 'reset', 'setAssistant', 'close']);
 
 const { t } = useI18n();
 
-const COPILOT_USER_ROLES = ['assistant', 'system'];
-
 const sendMessage = message => {
   emit('sendMessage', message);
   useTrack(COPILOT_EVENTS.SEND_MESSAGE);
@@ -113,11 +112,11 @@ watch(
         </div>
       </div>
     </div>
-    <div ref="chatContainer" class="flex-1 flex px-4 py-4 overflow-y-auto">
-      <div
-        v-if="messages.length"
-        class="space-y-6 flex-1 flex items-start justify-center"
-      >
+    <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">
         <template v-for="message in messages" :key="message.id">
           <CopilotAgentMessage
             v-if="message.role === 'user'"
@@ -125,10 +124,17 @@ watch(
             :message="message"
           />
           <CopilotAssistantMessage
-            v-else-if="COPILOT_USER_ROLES.includes(message.role)"
+            v-else-if="
+              message.role === 'assistant' || message.role === 'system'
+            "
             :message="message"
             :conversation-inbox-type="conversationInboxType"
           />
+          <CopilotThinkingBlock
+            v-else-if="message.role === 'assistant_thinking'"
+            :content="message.content"
+            :reasoning="message.reasoning"
+          />
         </template>
 
         <CopilotLoader v-if="isCaptainTyping" />

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

@@ -1,8 +1,8 @@
 <script setup>
-import { ref, computed, onMounted, watchEffect } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } 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 CopilotActionCableConnector from 'dashboard/helpers/CopilotActionCableConnector';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 
@@ -29,6 +29,7 @@ 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;
@@ -62,7 +63,12 @@ const handleReset = () => {
   messages.value = [];
 };
 
-const sendMessage = async message => {
+const sendMessage = message => {
+  // Ensure WebSocket is connected before sending
+  if (!copilotConnector.value || !isSidebarOpen.value) {
+    return;
+  }
+
   // Add user message
   messages.value.push({
     id: messages.value.length + 1,
@@ -71,47 +77,66 @@ const sendMessage = async message => {
   });
   isCaptainTyping.value = true;
 
-  try {
-    const { data } = await ConversationAPI.requestCopilot(
-      props.conversationId,
-      {
-        previous_history: messages.value
-          .map(m => ({
-            role: m.role,
-            content: m.content,
-          }))
-          .slice(0, -1),
-        message,
-        assistant_id: selectedAssistantId.value,
+  copilotConnector.value.sendMessage({
+    assistantId: activeAssistant.value.id,
+    conversationId: props.conversationId,
+    previousHistory: messages.value
+      .filter(m => m.role !== 'assistant_thinking')
+      .map(m => ({
+        role: m.role,
+        content: m.content,
+      }))
+      .slice(0, -1),
+    message,
+  });
+};
+
+const initializeWebSocket = () => {
+  copilotConnector.value = new CopilotActionCableConnector({
+    accountId: currentUser.value.account_id,
+    userId: currentUser.value.id,
+    onDisconnect: () => {
+      // copilotConnector.value = null;
+    },
+    onCopilotResponse: data => {
+      if (data.type === 'final_response') {
+        messages.value.push({
+          id: new Date().getTime(),
+          role: 'assistant',
+          content: data.response.response,
+        });
+        isCaptainTyping.value = false;
+      } else {
+        messages.value.push({
+          id: new Date().getTime(),
+          role: 'assistant_thinking',
+          content: data.response.response,
+          reasoning: data.response.reasoning,
+        });
       }
-    );
-    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;
+    },
+  });
+};
+
+const disconnectWebSocket = () => {
+  if (copilotConnector.value) {
+    copilotConnector.value.disconnect();
+    copilotConnector.value = null;
   }
 };
 
 onMounted(() => {
+  initializeWebSocket();
   store.dispatch('captainAssistants/get');
 });
 
+onBeforeUnmount(() => {
+  disconnectWebSocket();
+});
+
 const handleClose = () => {
   store.dispatch('uiState/set', { isCopilotSidebarOpen: false });
 };
-
-watchEffect(() => {
-  if (props.conversationId) {
-    store.dispatch('getInboxCaptainAssistantById', props.conversationId);
-    selectedAssistantId.value = activeAssistant.value?.id;
-  }
-});
 </script>
 
 <template>

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

@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  reasoning: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 p-2 rounded bg-n-background">
+    <div
+      v-if="reasoning"
+      class="text-xs text-n-slate-11 border-t border-n-weak pt-2"
+    >
+      {{ reasoning }}
+    </div>
+    <p class="text-sm text-n-slate-12">{{ content }}</p>
+  </div>
+</template>

app/javascript/dashboard/helpers/CopilotActionCableConnector.js

@@ -0,0 +1,49 @@
+import { createConsumer } from '@rails/actioncable';
+
+class CopilotActionCableConnector {
+  constructor(
+    { accountId, userId, onDisconnect, onCopilotResponse },
+    websocketHost = ''
+  ) {
+    const websocketURL = websocketHost ? `${websocketHost}/cable` : undefined;
+
+    this.consumer = createConsumer(websocketURL);
+    this.subscription = this.consumer.subscriptions.create(
+      {
+        channel: 'CopilotChannel',
+        account_id: accountId,
+        user_id: userId,
+      },
+      {
+        received: this.onReceived,
+        disconnected: onDisconnect,
+      }
+    );
+
+    this.events = {
+      'copilot.response': onCopilotResponse,
+    };
+  }
+
+  onReceived = ({ event, data } = {}) => {
+    if (this.events[event] && typeof this.events[event] === 'function') {
+      this.events[event](data);
+    }
+  };
+
+  disconnect() {
+    this.subscription.unsubscribe();
+    this.consumer.disconnect();
+  }
+
+  sendMessage({ message, assistantId, conversationId, previousHistory }) {
+    this.subscription.perform('message', {
+      message,
+      assistant_id: assistantId,
+      conversation_id: conversationId,
+      previous_history: previousHistory,
+    });
+  }
+}
+
+export default CopilotActionCableConnector;