feat: support streaming

nuxt.config.ts

@@ -5,7 +5,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     ai: {
       token: '',
-      model: 'gpt-3.5-turbo',
+      model: 'gpt-3.5-turbo-1106',
       // model: 'gpt-4',
     },
     auth: {

package.json

@@ -16,43 +16,44 @@
     "start:docker": "docker build -t codecaptain . && docker run --rm -ti -p 3000 --env-file .env codecaptain"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.195",
+    "@iconify/json": "^2.2.218",
     "@nuxt/devtools": "latest",
-    "@nuxt/ui": "^2.14.2",
-    "@nuxtjs/tailwindcss": "^6.11.4",
-    "@types/better-sqlite3": "^7.6.9",
+    "@nuxt/ui": "^2.16.0",
+    "@nuxtjs/tailwindcss": "^6.12.0",
+    "@types/better-sqlite3": "^7.6.10",
     "@types/canvas-confetti": "^1.6.4",
     "@types/jsonwebtoken": "^9.0.6",
-    "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.30",
+    "@types/markdown-it": "^13.0.8",
+    "@types/node": "^20.14.2",
     "dotenv": "^16.4.5",
-    "drizzle-kit": "^0.20.14",
+    "drizzle-kit": "^0.20.18",
     "esbuild": "^0.20.2",
     "esbuild-plugin-copy": "^2.1.1",
-    "nuxt": "^3.11.2",
-    "prettier": "^3.2.5",
-    "tsx": "^4.7.1",
+    "nuxt": "^3.12.1",
+    "prettier": "^3.3.2",
+    "tsx": "^4.15.2",
     "typescript": "^5.4.5",
-    "vue-tsc": "^2.0.19"
+    "vue-tsc": "^2.0.21"
   },
   "dependencies": {
     "@gitbeaker/core": "^40.0.3",
     "@gitbeaker/rest": "^40.0.3",
-    "@langchain/community": "^0.2.2",
-    "@langchain/openai": "^0.0.33",
+    "@langchain/community": "^0.2.10",
+    "@langchain/core": "^0.2.6",
+    "@langchain/openai": "^0.1.3",
     "@langchain/weaviate": "^0.0.4",
-    "better-sqlite3": "^9.4.3",
+    "better-sqlite3": "^9.6.0",
     "canvas-confetti": "^1.9.3",
     "consola": "^3.2.3",
-    "drizzle-orm": "^0.30.4",
-    "glob": "^10.3.10",
+    "drizzle-orm": "^0.30.10",
+    "glob": "^10.4.1",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
-    "langchain": "^0.2.2",
+    "langchain": "^0.2.5",
     "nuxt-icon": "^0.6.10",
-    "octokit": "^3.1.2",
-    "simple-git": "^3.23.0",
-    "vue-markdown-render": "^2.1.1",
-    "zod": "^3.22.4"
+    "octokit": "^3.2.1",
+    "simple-git": "^3.25.0",
+    "vue-markdown-render": "^2.2.1",
+    "zod": "^3.23.8"
   }
 }

pages/chats/[chat_id].vue

@@ -1,9 +1,14 @@
 <template>
   <div v-if="repo && chat" class="flex items-center flex-col w-full flex-grow">
     <div class="flex w-full p-2 items-center">
-      <NuxtLink :to="`/repos/${repo.id}`" class="flex gap-4 mr-auto items-center text-2xl">
-        <img v-if="repo.avatarUrl" :src="repo.avatarUrl" alt="avatar" class="w-8 h-8 rounded-md dark:bg-white" />
-        <span>{{ chat.name }}</span>
+      <NuxtLink :to="`/repos/${repo.id}`" class="flex min-w-0 gap-4 mr-auto items-center text-2xl">
+        <img
+          v-if="repo.avatarUrl"
+          :src="repo.avatarUrl"
+          alt="avatar"
+          class="w-8 h-8 flex-shrink-0 rounded-md dark:bg-white"
+        />
+        <span class="truncate">{{ chat.name }}</span>
       </NuxtLink>
 
       <div class="flex gap-2">
@@ -116,6 +121,11 @@ const chatId = computed(() => route.params.chat_id);
 const { data: chat, refresh: refreshChat } = await useFetch(() => `/api/chats/${chatId.value}`);
 const { data: repo } = await useFetch(() => `/api/repos/${chat.value?.repoId}`);
 
+type Source = {
+  url: string;
+  title: string;
+};
+
 async function askQuestion(message: string) {
   inputText.value = message;
   await sendMessage();
@@ -147,14 +157,62 @@ async function sendMessage() {
   thinking.value = true;
 
   try {
-    await $fetch(`/api/chats/${chat.value.id}/chat`, {
+    const _chatId = chat.value.id;
+
+    const response = await fetch(`/api/chats/${chat.value.id}/chat`, {
       method: 'POST',
       body: JSON.stringify({
         message,
       }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (response.status !== 200) {
+      throw new Error('Failed to send message');
+    }
+
+    const runId = response.headers.get('x-langsmith-run-id');
+
+    thinking.value = false;
+    chat.value.messages.push({
+      id: Date.now(),
+      chatId: _chatId,
+      from: 'ai',
+      content: '',
+      createdAt: new Date().toISOString(),
     });
+    const aiMessageIndex = chat.value!.messages.length - 1;
+
+    function updateLastMessage(content: string) {
+      const _chat = chat.value!;
+      _chat.messages[aiMessageIndex].content += content;
+      chat.value = _chat;
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error('Failed to read response');
+    }
+
+    const decoder = new TextDecoder();
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
 
-    await refreshChat();
+      updateLastMessage(decoder.decode(value));
+    }
+
+    // const runId = currentRunId.value;
+    // if (runId) {
+    //   await shareRun(runId);
+    // }
+    console.log('done', runId);
+    thinking.value = false;
+    // await refreshChat();
     await chatsStore.refresh();
   } catch (e) {
     const error = e as Error;
@@ -165,12 +223,8 @@ async function sendMessage() {
       content: error.message,
       createdAt: new Date().toISOString(),
     });
-    return;
-  } finally {
     thinking.value = false;
   }
-
-  await refreshChat();
 }
 
 async function deleteChat() {