fix(chat): improve spacing

Author: benjamincanac

app/components/Reasoning.vue

@@ -20,7 +20,7 @@ function cleanMarkdown(text: string): string {
 </script>
 
 <template>
-  <UCollapsible v-model:open="open" class="flex flex-col gap-1">
+  <UCollapsible v-model:open="open" class="flex flex-col gap-1 my-5">
     <UButton
       class="p-0 group"
       color="neutral"

app/components/tool/Chart.vue

@@ -56,7 +56,7 @@ const formatValue = (value: string | number | undefined): string => {
 </script>
 
 <template>
-  <div v-if="invocation.state === 'output-available'">
+  <div v-if="invocation.state === 'output-available'" class="my-5">
     <div v-if="invocation.output.title" class="flex items-center gap-2 mb-2">
       <UIcon name="i-lucide-line-chart" class="size-5 text-primary shrink-0" />
       <div class="min-w-0">
@@ -113,7 +113,7 @@ const formatValue = (value: string | number | undefined): string => {
     </div>
   </div>
 
-  <div v-else class="rounded-xl px-5 py-4" :class="color">
+  <div v-else class="rounded-xl px-5 py-4 my-5" :class="color">
     <div class="flex items-center justify-center h-44">
       <div class="text-center">
         <UIcon

app/components/tool/Weather.vue

@@ -26,7 +26,7 @@ const message = computed(() => {
 </script>
 
 <template>
-  <div class="rounded-xl px-5 py-4" :class="color">
+  <div class="rounded-xl px-5 py-4 my-5" :class="color">
     <template v-if="invocation.state === 'output-available'">
       <div class="flex items-start justify-between mb-3">
         <div class="flex items-baseline">

app/pages/chat/[id].vue

@@ -97,7 +97,7 @@ onMounted(() => {
           class="lg:pt-(--ui-header-height) pb-4 sm:pb-6"
         >
           <template #content="{ message }">
-            <div class="*:first:!mt-0 *:last:!mb-0 space-y-5">
+            <div class="*:first:mt-0 *:last:mb-0">
               <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`">
                 <Reasoning
                   v-if="part.type === 'reasoning'"
@@ -108,9 +108,9 @@ onMounted(() => {
                   v-else-if="part.type === 'text'"
                   :value="part.text"
                   :cache-key="`${message.id}-${index}`"
-                  :unwrap="message.role === 'user' ? 'p' : undefined"
                   :components="components"
                   :parser-options="{ highlight: false }"
+                  class="*:first:mt-0 *:last:mb-0"
                 />
                 <ToolWeather
                   v-else-if="part.type === 'tool-weather'"