fix bugs in web sockets

Author: lmiller1990

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+*.json

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleAttributePerLine": true
+}

components/PracticeExam.vue

@@ -2,40 +2,43 @@
 const value = ref("");
 
 async function handleSubmit() {
-    const startChat = await $fetch("/api/tutor", {
-        method: "POST",
-        body: {
-            message: value.value,
-        },
-    });
+  const startChat = await $fetch("/api/tutor", {
+    method: "POST",
+    body: {
+      message: value.value,
+    },
+  });
 
-    console.log(startChat);
-    //
+  console.log(startChat);
+  //
 }
 
 async function handleCreateThread() {
-    await $fetch("/api/threads", {
-        method: "POST",
-    });
+  await $fetch("/api/threads", {
+    method: "POST",
+  });
 }
 
 async function handleShowThreads() {
-    const threads = await $fetch("/api/threads", {
-        method: "GET",
-    });
+  const threads = await $fetch("/api/threads", {
+    method: "GET",
+  });
 
-    console.log(threads);
-    //
+  console.log(threads);
+  //
 }
 </script>
 
 <template>
-    <!--  -->
-    <form @submit.prevent="handleSubmit">
-        <UTextarea v-model="value" placeholder="Start chatting to AI..." />
-        <UButton type="submit">Start!</UButton>
-    </form>
+  <!--  -->
+  <form @submit.prevent="handleSubmit">
+    <UTextarea
+      v-model="value"
+      placeholder="Start chatting to AI..."
+    />
+    <UButton type="submit">Start!</UButton>
+  </form>
 
-    <UButton @click="handleCreateThread">New Conversation</UButton>
-    <UButton @click="handleShowThreads">List conversations</UButton>
+  <UButton @click="handleCreateThread">New Conversation</UButton>
+  <UButton @click="handleShowThreads">List conversations</UButton>
 </template>

composables/useWebSocket.ts

@@ -0,0 +1,33 @@
+export interface TextChunkPayload {
+  type: "text-chunk";
+  text: string;
+}
+
+export type Payload = TextChunkPayload;
+
+/**
+ * @description Create a web socket with listener
+ **/
+export function useWebSocket(options: {
+  onMessage: (payload: Payload) => void;
+}) {
+  const isSecure = location.protocol === "https:";
+  const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
+
+  console.log("Connecting to", url, "...");
+  const ws = new WebSocket(url);
+
+  ws.addEventListener("open", () => {
+    console.log("WebSocket opened");
+  });
+
+  ws.addEventListener("close", () => {
+    console.log("WebSocket closed");
+  });
+
+  ws.addEventListener("message", (event: MessageEvent<any>) => {
+    options.onMessage(JSON.parse(event.data));
+  });
+
+  return ws;
+}

package-lock.json

@@ -7,7 +7,8 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "lint": "prettier --write ."
   },
   "dependencies": {
     "@nuxt/ui": "^2.16.0",
@@ -16,6 +17,7 @@
     "nuxt": "^3.11.2",
     "openai": "^4.47.2",
     "pinia": "^2.1.7",
+    "prettier": "^3.2.5",
     "sqlite3": "^5.1.7",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"

package.json

@@ -44,7 +44,10 @@ connect();
   <div class="flex flex-col items-center justify-center h-full">
     <h2>Welcome.</h2>
     <div>
-      <UButton color="indigo" :loading="loading" @click="run"
+      <UButton
+        color="indigo"
+        :loading="loading"
+        @click="run"
         >Start Studying</UButton
       >
     </div>

pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SerializeObject } from "nitropack";
 import type { Message } from "openai/resources/beta/threads/messages";
+import type { Payload } from "~/composables/useWebSocket";
 
 const route = useRoute();
 
@@ -32,39 +33,23 @@ async function handleRun() {
   ws.send(JSON.stringify({ threadId: id }));
 }
 
-const conversation = computed(() => {
-  return (data.value ?? []).slice().reverse();
-});
-
 let ws: WebSocket;
 
 const replies = ref("");
 
-async function connectWebSocket() {
-  const isSecure = location.protocol === "https:";
-  const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
-  if (ws) {
-    console.log("Closing previous connection before reconnecting...");
-    ws.close();
+function onMessage(payload: Payload) {
+  if (payload.type === "text-chunk") {
+    replies.value += payload.text;
   }
-
-  console.log("Connecting to", url, "...");
-  ws = new WebSocket(url);
-
-  ws.addEventListener("open", () => {
-    console.log("WebSocket opened");
-  });
-
-  ws.addEventListener("message", (event) => {
-    const data = JSON.parse(event.data);
-    if (data.type === "text-chunk") {
-      console.log(data.text);
-      replies.value += data.text;
-    }
-  });
 }
 
-connectWebSocket();
+onMounted(() => {
+  ws = useWebSocket({ onMessage });
+});
+
+onUnmounted(() => {
+  ws!.close();
+});
 </script>
 
 <template>
@@ -79,7 +64,7 @@ connectWebSocket();
           v-if="message.content[0]?.type === 'text'"
           class="p-1 rounded px-2"
           :class="{
-            'bg-gray-200': message.role === 'user',
+            'bg-gray-200 dark:bg-gray-700': message.role === 'user',
             'max-w-[50vw]': message.role === 'user',
           }"
         >
@@ -97,7 +82,10 @@ connectWebSocket();
   <UDivider class="p-4" />
 
   <form @submit.prevent="handleSubmitMessage">
-    <UTextarea v-model="msg" placeholder="Chat..." />
+    <UTextarea
+      v-model="msg"
+      placeholder="Chat..."
+    />
     <UButton type="submit">Start!</UButton>
   </form>
 

pages/threads/[id].vue

@@ -16,6 +16,5 @@ export default defineEventHandler(async (event) => {
     content: body.message,
   });
 
-  console.log(message);
   return message;
 });

server/api/message.post.ts

@@ -8,7 +8,7 @@ export default defineEventHandler(async (event) => {
     threadsForUser.map(async (x) => {
       const t = await openai.beta.threads.retrieve(x.openai_id);
       return { ...t, openai_id: t.id, id: (x.id as number).toString() };
-    })
+    }),
   );
   return all;
   // await db("threads").insert({ openai_id: emptyThread.id, user_id: 1 });

server/api/threads.get.ts

@@ -14,8 +14,8 @@ export default defineEventHandler(async (event) => {
     {
       limit: 5,
       order: "desc",
-    }
+    },
   );
 
-  return threadMessages.data;
+  return threadMessages.data.reverse();
 });

server/api/threads/[id].get.ts

@@ -6,56 +6,31 @@ const assitantId = "asst_sxL8Gxy8meOwaf0vySOnegmu";
 async function streamRun(
   threadId: string,
   assistantId: string,
-  send: (chunk: string) => void
+  send: (chunk: string) => void,
 ) {
-  console.log("Streaming");
   const stream = openai.beta.threads.runs.stream(threadId, {
     assistant_id: assistantId,
   });
 
   for await (const chunk of stream) {
-    // console.log("Event:", chunk.event);
     if (chunk.event === "thread.message.delta") {
       if (chunk.data.delta.content?.[0]?.type === "text") {
         send(chunk.data.delta.content[0].text?.value!);
         // process.stdout.write(chunk.data.delta.content[0].text?.value);
       }
+    } else {
+      console.log(`Used event: ${chunk.event}`);
     }
   }
 }
 
-// .on("textCreated", (text) => process.stdout.write("\nassistant > "))
-// .on("textDelta", (textDelta, snapshot) =>
-//   process.stdout.write(textDelta.value)
-// )
-// .on("toolCallCreated", (toolCall) =>
-//   process.stdout.write(`\nassistant > ${toolCall.type}\n\n`)
-// )
-// .on("toolCallDelta", (toolCallDelta, snapshot) => {
-//   if (toolCallDelta.type === "code_interpreter") {
-//     if (toolCallDelta.code_interpreter.input) {
-//       process.stdout.write(toolCallDelta.code_interpreter.input);
-//     }
-//     if (toolCallDelta.code_interpreter.outputs) {
-//       process.stdout.write("\noutput >\n");
-//       toolCallDelta.code_interpreter.outputs.forEach((output) => {
-//         if (output.type === "logs") {
-//           process.stdout.write(`\n${output.logs}\n`);
-//         }
-//       });
-//     }
-//   }
-// });
-
 export default defineWebSocketHandler({
   open(peer) {
     console.log("[ws] open", peer);
   },
 
   async message(peer, message) {
-    console.log("[ws] message", peer, message);
     const parsed = JSON.parse(message.text());
-    console.log(parsed);
 
     const dbthread = await db("threads").where({ id: parsed.threadId }).first();
     if (!dbthread) {
@@ -67,16 +42,9 @@ export default defineWebSocketHandler({
         JSON.stringify({
           type: "text-chunk",
           text: textChunk,
-        })
-      )
+        }),
+      ),
     );
-    // if (message.text().includes("ping")) {
-    //   peer.send("pong");
-    // }
-
-    // if (message.text().includes("dorun")) {
-    //   streamRun()
-    // }
   },
 
   close(peer, event) {