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>

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>