Update the UI

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>