From 1602b071db8079909cb04c13c279959ff6fbe6ac Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Tue, 20 May 2025 21:35:29 -0700
Subject: [PATCH] feat: Add components to show steps in the copilot thinking
 process (#11530)

This PR adds the components for new Copilot UI
- Added a Header component
- Added a thinking block.
- Update the outline on copilot input

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../copilot/CopilotHeader.story.vue           | 21 +++++++
 .../components-next/copilot/CopilotHeader.vue | 32 ++++++++++
 .../components-next/copilot/CopilotInput.vue  |  9 +--
 .../copilot/CopilotThinkingBlock.vue          | 25 ++++++++
 .../copilot/CopilotThinkingGroup.story.vue    | 34 +++++++++++
 .../copilot/CopilotThinkingGroup.vue          | 61 +++++++++++++++++++
 .../i18n/locale/en/integrations.json          |  2 +
 7 files changed, 178 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotHeader.story.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotHeader.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotThinkingBlock.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue
 create mode 100644 app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue

diff --git a/app/javascript/dashboard/components-next/copilot/CopilotHeader.story.vue b/app/javascript/dashboard/components-next/copilot/CopilotHeader.story.vue
new file mode 100644
index 000000000..78a345093
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotHeader.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import CopilotHeader from './CopilotHeader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/Copilot/CopilotHeader"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <!-- Default State -->
+    <Variant title="Default State">
+      <CopilotHeader />
+    </Variant>
+
+    <!-- With New Conversation Button -->
+    <Variant title="With New Conversation Button">
+      <!-- eslint-disable-next-line vue/prefer-true-attribute-shorthand -->
+      <CopilotHeader :has-messages="true" />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotHeader.vue b/app/javascript/dashboard/components-next/copilot/CopilotHeader.vue
new file mode 100644
index 000000000..c7a8696f3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotHeader.vue
@@ -0,0 +1,32 @@
+<script setup>
+import Button from '../button/Button.vue';
+defineProps({
+  hasMessages: {
+    type: Boolean,
+    default: false,
+  },
+});
+defineEmits(['reset', 'close']);
+</script>
+
+<template>
+  <div
+    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">
+        {{ $t('CAPTAIN.COPILOT.TITLE') }}
+      </span>
+      <div class="flex items-center">
+        <Button
+          v-if="hasMessages"
+          icon="i-lucide-plus"
+          ghost
+          sm
+          @click="$emit('reset')"
+        />
+        <Button icon="i-lucide-x" ghost sm @click="$emit('close')" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotInput.vue b/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
index bf14945b5..c8f1a0056 100644
--- a/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
@@ -13,19 +13,16 @@ const sendMessage = () => {
 </script>
 
 <template>
-  <form
-    class="border border-n-weak bg-n-alpha-3 rounded-lg h-12 flex"
-    @submit.prevent="sendMessage"
-  >
+  <form class="relative" @submit.prevent="sendMessage">
     <input
       v-model="message"
       type="text"
       :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
-      class="w-full reset-base bg-transparent px-4 py-3 text-n-slate-11 text-sm"
+      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-n-slate-11 text-sm border border-n-weak rounded-lg focus:outline-none focus:ring-1 focus:ring-n-blue-11 focus:border-n-blue-11"
       @keyup.enter="sendMessage"
     />
     <button
-      class="h-auto w-12 flex items-center justify-center text-n-slate-11"
+      class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"
       type="submit"
     >
       <i class="i-ph-arrow-up" />
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotThinkingBlock.vue b/app/javascript/dashboard/components-next/copilot/CopilotThinkingBlock.vue
new file mode 100644
index 000000000..59e627f8d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingBlock.vue
@@ -0,0 +1,25 @@
+<script setup>
+import Icon from '../../components-next/icon/Icon.vue';
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 p-3 rounded-lg bg-n-background/50 border border-n-weak hover:bg-n-background/80 transition-colors duration-200"
+  >
+    <div class="flex items-start gap-2">
+      <Icon
+        icon="i-lucide-sparkles"
+        class="w-4 h-4 mt-0.5 flex-shrink-0 text-n-slate-9"
+      />
+      <div class="text-sm text-n-slate-11">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue
new file mode 100644
index 000000000..098316dbc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue
@@ -0,0 +1,34 @@
+<script setup>
+import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
+
+const messages = [
+  {
+    id: 1,
+    content: 'Analyzing the user query',
+    reasoning: 'Breaking down the request into actionable steps',
+  },
+  {
+    id: 2,
+    content: 'Searching codebase',
+    reasoning: 'Looking for relevant files and functions',
+  },
+  {
+    id: 3,
+    content: 'Generating response',
+    reasoning: 'Composing a helpful and accurate answer',
+  },
+];
+</script>
+
+<template>
+  <Story title="Captain/Copilot/CopilotThinkingGroup" group="components">
+    <Variant title="Default">
+      <CopilotThinkingGroup :messages="messages" />
+    </Variant>
+
+    <Variant title="With Default Collapsed">
+      <!-- eslint-disable-next-line -->
+      <CopilotThinkingGroup :messages="messages" :default-collapsed="true" />
+    </Variant>
+  </Story>
+</template>
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..c34b5b35a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from '../icon/Icon.vue';
+import CopilotThinkingBlock from './CopilotThinkingBlock.vue';
+
+const props = defineProps({
+  messages: { type: Array, required: true },
+  defaultCollapsed: { type: Boolean, default: false },
+});
+const { t } = useI18n();
+const isExpanded = ref(!props.defaultCollapsed);
+
+const thinkingCount = computed(() => props.messages.length);
+
+watch(
+  () => props.defaultCollapsed,
+  newValue => {
+    if (newValue) {
+      isExpanded.value = false;
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <button
+      class="group flex items-center gap-2 text-xs text-n-slate-10 hover:text-n-slate-11 transition-colors duration-200 -ml-3"
+      @click="isExpanded = !isExpanded"
+    >
+      <Icon
+        :icon="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        class="w-4 h-4 transition-transform duration-200 group-hover:scale-110"
+      />
+      <span class="flex items-center gap-2">
+        {{ t('CAPTAIN.COPILOT.SHOW_STEPS') }}
+        <span
+          class="inline-flex items-center justify-center h-4 min-w-4 px-1 text-xs font-medium rounded-full bg-n-solid-3 text-n-slate-11"
+        >
+          {{ thinkingCount }}
+        </span>
+      </span>
+    </button>
+    <div
+      v-show="isExpanded"
+      class="space-y-3 transition-all duration-200"
+      :class="{
+        'opacity-100': isExpanded,
+        'opacity-0 max-h-0 overflow-hidden': !isExpanded,
+      }"
+    >
+      <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 9767df3ad..9cb504a1d 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -327,12 +327,14 @@
     "NAME": "Captain",
     "HEADER_KNOW_MORE": "Know more",
     "COPILOT": {
+      "TITLE": "Copilot",
       "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",
+      "SHOW_STEPS": "Show steps",
       "SELECT_ASSISTANT": "Select Assistant",
       "PROMPTS": {
         "SUMMARIZE": {