feat: ditch triplit, move to postgresql + drizzle orm

app/components/Message/Agent/Reasoning.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import type { Entity } from '@triplit/client';
-import type schema from '#triplit/schema';
+import type { MessagePart } from '~/composables/useChat';
 
 const props = defineProps<{
-    part: Readonly<Entity<typeof schema, 'message_parts'>>;
+    part: Readonly<MessagePart>;
 }>();
 
 const reasoningOpen = ref(!props.part.finished);
@@ -30,6 +29,12 @@ const handleScroll = () => {
 
     const topThreshold = 0.02 * clientHeight;
 
+    if (scrollHeight <= clientHeight) {
+        // the container does not have enough content to scroll
+        scrollState.value = '';
+        return;
+    }
+
     if (scrollTop <= topThreshold) {
         scrollState.value = 'top';
     } else if (scrollTop + 100 >= scrollHeight - clientHeight) {
@@ -53,7 +58,7 @@ const toggleReasoning = async () => {
 <template>
     <div class="text-[--text-tertiary]">
         <button @click="toggleReasoning" :class="[
-            'w-full hover:bg-[var(--color-hover)] rounded-lg p-1 flex justify-between items-center transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
+            'w-full @hover:bg-[var(--color-hover)] rounded-lg p-1 flex justify-between items-center transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
             part.finished ? '' : 'cursor-default'
         ]">
             <span class="flex items-center gap-1">
@@ -69,7 +74,7 @@ const toggleReasoning = async () => {
         <div v-if="reasoningOpen" ref="containerRef" @scroll="handleScroll"
             :class="['reasoning-contaizner max-h-[min(40vh,320px)] overflow-y-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]', scrollState]">
             <div class="p-2">
-                <MarkdownRenderer :finished="part.finished" :id="part.id" :content="part.content" />
+                <MarkdownRenderer :finished="part.finished" :id="part.id" :content="part.content!" />
             </div>
         </div>
     </div>