Update the UI

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

@@ -9,7 +9,7 @@ import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
 import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
-import Button from '../button/Button.vue';
+import CopilotHeader from './CopilotHeader.vue';
 import CopilotEmptyState from './CopilotEmptyState.vue';
 
 const props = defineProps({
@@ -93,25 +93,11 @@ watch(
 
 <template>
   <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
-    <div
-      class="flex items-center justify-between px-4 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="messages.length"
-            icon="i-lucide-plus"
-            ghost
-            sm
-            @click="handleReset"
-          />
-          <Button icon="i-lucide-x" ghost sm @click="$emit('close')" />
-        </div>
-      </div>
-    </div>
+    <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"

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

@@ -1,29 +1,19 @@
 <script setup>
-import Avatar from '../avatar/Avatar.vue';
-
 defineProps({
   message: {
     type: Object,
     required: true,
   },
-  supportAgent: {
-    type: Object,
-    required: true,
-  },
 });
 </script>
 
 <template>
   <div class="flex flex-row gap-2">
-    <Avatar
-      :name="supportAgent.available_name"
-      :src="supportAgent.avatar_url"
-      :size="20"
-      rounded-full
-    />
-    <div class="space-y-1 text-n-slate-12">
-      <div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
-      <div class="break-words">
+    <div class="space-y-1">
+      <div class="font-medium text-n-slate-12">
+        {{ $t('CAPTAIN.COPILOT.YOU') }}
+      </div>
+      <div class="break-words text-n-slate-11">
         {{ message.content }}
       </div>
     </div>

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

@@ -9,7 +9,6 @@ import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
-import Avatar from '../avatar/Avatar.vue';
 
 const props = defineProps({
   message: {
@@ -47,21 +46,15 @@ const useCopilotResponse = () => {
 
 <template>
   <div class="flex flex-row gap-2">
-    <Avatar
-      name="Captain Copilot"
-      icon-name="i-woot-captain"
-      :size="20"
-      rounded-full
-    />
     <div class="flex flex-col gap-1 text-n-slate-12">
-      <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
+      <div class="font-medium text-n-slate-12">{{ $t('CAPTAIN.NAME') }}</div>
       <span v-if="hasEmptyMessageContent" class="text-n-ruby-11">
         {{ $t('CAPTAIN.COPILOT.EMPTY_MESSAGE') }}
       </span>
       <div
         v-else
         v-dompurify-html="messageContent"
-        class="prose-sm break-words"
+        class="prose-sm break-words text-n-slate-11"
       />
       <div class="flex flex-row mt-1">
         <Button

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

@@ -0,0 +1,41 @@
+<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
+          tooltip-text="Create a new conversation"
+          @click="$emit('reset')"
+        />
+        <Button
+          icon="i-lucide-x"
+          ghost
+          sm
+          tooltip-text="Close Copilot"
+          @click="$emit('close')"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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 px-4 py-3 pr-12 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 right-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" />

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Icon from '../icon/Icon.vue';
 import CopilotThinkingBlock from 'dashboard/components/copilot/CopilotThinkingBlock.vue';
@@ -11,6 +11,8 @@ const props = defineProps({
 const { t } = useI18n();
 const isExpanded = ref(!props.hasAssistantMessageAfter);
 
+const thinkingCount = computed(() => props.messages.length);
+
 watch(
   () => props.hasAssistantMessageAfter,
   newValue => {
@@ -22,18 +24,32 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 pl-4">
+  <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"
+      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"
+        class="w-4 h-4 transition-transform duration-200 group-hover:scale-110"
       />
-      {{ t('CAPTAIN.COPILOT.SHOW_THINKING') }}
+      <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-if="isExpanded" class="space-y-4">
+    <div
+      v-show="isExpanded"
+      class="space-y-3 transition-all duration-200"
+      :class="{
+        'opacity-100 max-h-96': isExpanded,
+        'opacity-0 max-h-0 overflow-hidden': !isExpanded,
+      }"
+    >
       <CopilotThinkingBlock
         v-for="message in messages"
         :key="message.id"

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-2 m-0 list-none">
+      <ul class="flex flex-col gap-1.5 m-0 list-none">
         <SidebarGroup
           v-for="item in menuItems"
           :key="item.name"

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

@@ -1,4 +1,6 @@
 <script setup>
+import Icon from '../../components-next/icon/Icon.vue';
+
 defineProps({
   content: {
     type: String,
@@ -12,13 +14,22 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex flex-col gap-1 px-2 rounded bg-n-background">
-    <div
-      v-if="reasoning"
-      class="text-xs text-n-slate-11 border-t border-n-weak"
-    >
-      {{ reasoning }}
+  <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-1 flex-shrink-0 text-n-slate-9"
+      />
+      <p class="text-sm text-n-slate-11">{{ content }}</p>
+    </div>
+    <div v-if="reasoning" class="flex items-start gap-2 pl-6">
+      <Icon
+        icon="i-lucide-lightbulb"
+        class="w-4 h-4 mt-1 flex-shrink-0 text-n-slate-9"
+      />
+      <p class="text-xs text-n-slate-10">{{ reasoning }}</p>
     </div>
-    <p class="text-sm text-n-slate-11">{{ content }}</p>
   </div>
 </template>

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

@@ -338,7 +338,7 @@
       "USE": "Use this",
       "RESET": "Reset",
       "SELECT_ASSISTANT": "Select Assistant",
-      "SHOW_THINKING": "Show thought process",
+      "SHOW_STEPS": "Show steps",
       "PROMPTS": {
         "SUMMARIZE": {
           "LABEL": "Summarize this conversation",