feat(reasoning): add component (#75)

Co-authored-by: Benjamin Canac <[email protected]>

Author: HugoRCD

app/components/Reasoning.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const { isStreaming = false } = defineProps<{
+  text: string
+  isStreaming?: boolean
+}>()
+
+const open = ref(false)
+
+watch(() => isStreaming, () => {
+  open.value = isStreaming
+}, { immediate: true })
+
+function cleanMarkdown(text: string): string {
+  return text
+    .replace(/\*\*(.+?)\*\*/g, '$1') // Remove bold
+    .replace(/\*(.+?)\*/g, '$1') // Remove italic
+    .replace(/`(.+?)`/g, '$1') // Remove inline code
+    .replace(/^#+\s+/gm, '') // Remove headers
+}
+</script>
+
+<template>
+  <UCollapsible v-model:open="open" class="flex flex-col gap-1">
+    <UButton
+      class="p-0 group"
+      color="neutral"
+      variant="link"
+      trailing-icon="i-lucide-chevron-down"
+      :ui="{
+        trailingIcon: text.length > 0 ? 'group-data-[state=open]:rotate-180 transition-transform duration-200' : 'hidden'
+      }"
+      :label="isStreaming ? 'Thinking...' : 'Thoughts'"
+    />
+
+    <template #content>
+      <div v-for="(value, index) in cleanMarkdown(text).split('\n').filter(Boolean)" :key="index">
+        <span class="whitespace-pre-wrap text-sm text-muted font-normal">{{ value }}</span>
+      </div>
+    </template>
+  </UCollapsible>
+</template>

app/components/tool/Chart.vue

@@ -5,7 +5,6 @@ const props = defineProps<{
 
 const color = computed(() => {
   return ({
-    'output-available': 'bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 dark:from-sky-500 dark:via-blue-600 dark:to-indigo-700',
     'output-error': 'bg-muted text-error'
   })[props.invocation.state as string] || 'bg-muted text-white'
 })

app/components/tool/Weather.vue

@@ -5,7 +5,7 @@ const props = defineProps<{
 
 const color = computed(() => {
   return ({
-    'output-available': 'bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 dark:from-sky-500 dark:via-blue-600 dark:to-indigo-700',
+    'output-available': 'bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 dark:from-sky-500 dark:via-blue-600 dark:to-indigo-700 text-white',
     'output-error': 'bg-muted text-error'
   })[props.invocation.state as string] || 'bg-muted text-white'
 })
@@ -29,9 +29,9 @@ const message = computed(() => {
   <div class="rounded-xl px-5 py-4" :class="color">
     <template v-if="invocation.state === 'output-available'">
       <div class="flex items-start justify-between mb-3">
-        <div class="flex items-baseline gap-1">
-          <span class="text-4xl font-light">{{ invocation.output.temperature }}°</span>
-          <span class="text-base text-white/80 mt-1">C</span>
+        <div class="flex items-baseline">
+          <span class="text-4xl font-bold">{{ invocation.output.temperature }}°</span>
+          <span class="text-base text-white/80">C</span>
         </div>
         <div class="text-right">
           <div class="text-base font-medium mb-1">

app/composables/useModels.ts

@@ -1,19 +1,11 @@
 export function useModels() {
   const models = [
-    // OpenAI Models
-    'openai/gpt-5',
-    'openai/gpt-5-mini',
-    'openai/gpt-4o',
-    'openai/gpt-4o-mini',
-    // Anthropic Claude Models
-    'anthropic/claude-sonnet-4',
-    'anthropic/claude-sonnet-3.7',
-    // Google Gemini Models
-    'google/gemini-2.5-pro',
+    'openai/gpt-5-nano',
+    'anthropic/claude-haiku-4.5',
     'google/gemini-2.5-flash'
   ]
 
-  const model = useCookie<string>('model', { default: () => 'openai/gpt-4o-mini' })
+  const model = useCookie<string>('model', { default: () => 'openai/gpt-5-nano' })
 
   return {
     models,

app/pages/chat/[id].vue

@@ -93,24 +93,22 @@ onMounted(() => {
           :messages="chat.messages"
           :status="chat.status"
           :assistant="chat.status !== 'streaming' ? { actions: [{ label: 'Copy', icon: copied ? 'i-lucide-copy-check' : 'i-lucide-copy', onClick: copy }] } : { actions: [] }"
-          class="lg:pt-(--ui-header-height) pb-4 sm:pb-6"
           :spacing-offset="160"
+          class="lg:pt-(--ui-header-height) pb-4 sm:pb-6"
         >
           <template #content="{ message }">
-            <div class="space-y-5">
+            <div class="*:first:!mt-0 *:last:!mb-0 space-y-5">
               <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`">
-                <UButton
+                <Reasoning
                   v-if="part.type === 'reasoning'"
-                  :label="part.state === 'done' ? 'Done' : 'Thinking...'"
-                  variant="link"
-                  color="neutral"
-                  class="px-0"
+                  :text="part.text"
+                  :is-streaming="part.state !== 'done'"
                 />
                 <MDCCached
                   v-else-if="part.type === 'text'"
                   :value="part.text"
                   :cache-key="`${message.id}-${index}`"
-                  unwrap="p"
+                  :unwrap="message.role === 'user' ? 'p' : undefined"
                   :components="components"
                   :parser-options="{ highlight: false }"
                 />

server/api/chats/[id].post.ts

@@ -62,7 +62,22 @@ export default defineEventHandler(async (event) => {
     execute: ({ writer }) => {
       const result = streamText({
         model: gateway(model),
-        system: `You are a helpful assistant that can answer questions and help. ${session.user?.username ? `User name is ${session.user?.username}.` : ''} (if not provided, use fake data for tool calls)`,
+        system: `You are a knowledgeable and helpful AI assistant. ${session.user?.username ? `The user's name is ${session.user.username}.` : ''} Your goal is to provide clear, accurate, and well-structured responses.
+
+**FORMATTING RULES (CRITICAL):**
+- ABSOLUTELY NO MARKDOWN HEADINGS: Never use #, ##, ###, ####, #####, or ######
+- NO underline-style headings with === or ---
+- Use **bold text** for emphasis and section labels instead
+- Examples:
+  * Instead of "## Usage", write "**Usage:**" or just "Here's how to use it:"
+  * Instead of "# Complete Guide", write "**Complete Guide**" or start directly with content
+- Start all responses with content, never with a heading
+
+**RESPONSE QUALITY:**
+- Be concise yet comprehensive
+- Use examples when helpful
+- Break down complex topics into digestible parts
+- Maintain a friendly, professional tone`,
         messages: convertToModelMessages(messages),
         providerOptions: {
           openai: {