Merge branch 'develop' into rethinking-copilot

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>

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

@@ -1,13 +1,11 @@
 <script setup>
 import Button from '../button/Button.vue';
-
 defineProps({
   hasMessages: {
     type: Boolean,
     default: false,
   },
 });
-
 defineEmits(['reset', 'close']);
 </script>
 
@@ -25,16 +23,9 @@ defineEmits(['reset', 'close']);
           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')"
-        />
+        <Button icon="i-lucide-x" ghost sm @click="$emit('close')" />
       </div>
     </div>
   </div>

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

@@ -18,11 +18,11 @@ const sendMessage = () => {
       v-model="message"
       type="text"
       :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
-      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"
+      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="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"
+      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" />

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>

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>

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

@@ -2,19 +2,19 @@
 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';
+import CopilotThinkingBlock from './CopilotThinkingBlock.vue';
 
 const props = defineProps({
   messages: { type: Array, required: true },
-  hasAssistantMessageAfter: { type: Boolean, default: false },
+  defaultCollapsed: { type: Boolean, default: false },
 });
 const { t } = useI18n();
-const isExpanded = ref(!props.hasAssistantMessageAfter);
+const isExpanded = ref(!props.defaultCollapsed);
 
 const thinkingCount = computed(() => props.messages.length);
 
 watch(
-  () => props.hasAssistantMessageAfter,
+  () => props.defaultCollapsed,
   newValue => {
     if (newValue) {
       isExpanded.value = false;