From 4cd9bcd93874a8def6b5b9f04622907c1695ab27 Mon Sep 17 00:00:00 2001
From: Pranav <pranavrajs@gmail.com>
Date: Sun, 11 May 2025 10:28:52 -0700
Subject: [PATCH] Showing the thought process hidden

---
 .../components-next/copilot/Copilot.vue       | 65 +++++++++++++------
 .../copilot/CopilotThinkingGroup.vue          | 33 ++++++++++
 .../i18n/locale/en/integrations.json          |  1 +
 .../captain/llm/system_prompts_service.rb     |  2 +-
 4 files changed, 80 insertions(+), 21 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue

diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.vue b/app/javascript/dashboard/components-next/copilot/Copilot.vue
index 903450bdd..966018e69 100644
--- a/app/javascript/dashboard/components-next/copilot/Copilot.vue
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -8,7 +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 CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
 import Icon from '../icon/Icon.vue';
 import Button from '../button/Button.vue';
@@ -67,6 +67,29 @@ 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',
@@ -117,24 +140,26 @@ watch(
       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'"
-            :support-agent="supportAgent"
-            :message="message"
-          />
-          <CopilotAssistantMessage
-            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
+          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" />
         </template>
 
         <CopilotLoader v-if="isCaptainTyping" />
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue
new file mode 100644
index 000000000..14fe756d4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from '../icon/Icon.vue';
+import CopilotThinkingBlock from 'dashboard/components/copilot/CopilotThinkingBlock.vue';
+
+defineProps({ messages: { type: Array, required: true } });
+const { t } = useI18n();
+const isExpanded = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <button
+      class="flex items-center gap-2 text-xs text-n-slate-10 hover:text-n-slate-11"
+      @click="isExpanded = !isExpanded"
+    >
+      <Icon
+        :icon="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        class="w-4 h-4"
+      />
+      {{ t('CAPTAIN.COPILOT.SHOW_THINKING') }}
+    </button>
+    <div v-if="isExpanded" class="space-y-4">
+      <CopilotThinkingBlock
+        v-for="message in messages"
+        :key="message.id"
+        :content="message.content"
+        :reasoning="message.reasoning"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 40c27482b..f25077917 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -335,6 +335,7 @@
       "USE": "Use this",
       "RESET": "Reset",
       "SELECT_ASSISTANT": "Select Assistant",
+      "SHOW_THINKING": "Show thought process",
       "PROMPTS": {
         "SUMMARIZE": {
           "LABEL": "Summarize this conversation",
diff --git a/enterprise/app/services/captain/llm/system_prompts_service.rb b/enterprise/app/services/captain/llm/system_prompts_service.rb
index 325e58454..afd320b26 100644
--- a/enterprise/app/services/captain/llm/system_prompts_service.rb
+++ b/enterprise/app/services/captain/llm/system_prompts_service.rb
@@ -66,7 +66,6 @@ class Captain::Llm::SystemPromptsService
         [Context]
         Identify unresolved queries, and ensure responses are relevant and consistent with previous interactions. Always maintain a coherent and professional tone throughout the conversation.
 
-
         [Response Guidelines]
         - Use natural, polite, and conversational language that is clear and easy to follow. Keep sentences short and use simple words.
         - Reply in the language the agent is using, if you're not able to detect the language, reply in #{language}.
@@ -94,6 +93,7 @@ class Captain::Llm::SystemPromptsService
         9. Cite the sources if you used a tool to find the response.
         10. Do not use your own training data or assumptions to answer queries. Base responses strictly on the provided information.
         11. Always provide a reasoning for the response.
+        12. Always double the check the information with tools unless you are very sure of the information.
 
         ```json
         {