Clearify api sse (#40)

* add useChatBot

* polish code

Author: hylarucoder

package.json

@@ -57,6 +57,7 @@
     "@types/unist": "^2.0.6",
     "pinia": "^2.1.4",
     "rehype-highlight": "^6.0.0",
+    "rehype-sanitize": "^5.0.1",
     "rehype-stringify": "^9.0.3",
     "remark-html": "^15.0.2",
     "style-to-object": "^0.4.1",

pnpm-lock.yaml

@@ -20,7 +20,6 @@ body,
   height: 100vh;
   margin: 0;
   padding: 0;
-  background: #f2f2f2;
   color: black;
   display: flex;
   justify-content: center;

src/app.vue

@@ -8,6 +8,7 @@ import remarkSqueezeParagraphs from "remark-squeeze-paragraphs"
 import remarkRehype from "remark-rehype"
 import rehypeHighlight from "rehype-highlight"
 import rehypeStringify from "rehype-stringify"
+import rehypeSanitize from "rehype-sanitize"
 
 const processor = unified()
   .use(remarkParse)
@@ -16,25 +17,31 @@ const processor = unified()
   .use(remarkSqueezeParagraphs)
   .use(remarkGfm)
   .use(rehypeHighlight)
+  .use(rehypeSanitize)
   .use(rehypeStringify)
 
 const props = defineProps({
   md: {
     type: String,
     required: true,
   },
-  cid: {
-    type: String,
-    default: "TODO-uid",
-  },
 })
 
 const parsedMarkdown = ref(props.md)
 
+const throttleParse = useThrottleFn(
+  (s) => {
+    const a = processor.processSync(s)
+    parsedMarkdown.value = String(a)
+  },
+  80,
+  true,
+  true
+)
+
 watchEffect(async () => {
   try {
-    const a = processor.processSync(props.md || "...")
-    parsedMarkdown.value = String(a)
+    await throttleParse(props.md || "...")
   } catch (err) {
     parsedMarkdown.value = ""
   }

src/components/MarkdownPreview.vue

@@ -6,7 +6,7 @@ const chatSession = useRoutedChatSession()
 const { t } = useTrans()
 </script>
 <template>
-  <div class="relative flex items-center justify-between border border-gray-200 px-5 py-3.5">
+  <div class="relative flex items-center justify-between border-b border-gray-200 px-5 py-3.5">
     <div class="truncate">
       <div class="cursor-pointer truncate text-[1.25rem] font-bold">{{ chatSession.session.topic }}</div>
       <div class="mt-1 text-[0.88rem]">

src/components/VChatDetailHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoutedChatSession, useSidebarChatSessions } from "~/composable/chat"
+import { useSidebarChatSessions } from "~/composable/chat"
 
 const router = useRouter()
 

src/components/VChatList.vue

@@ -35,9 +35,11 @@ const composeNewMessage = () => {
 }
 </script>
 <template>
-  <div class="relative flex-col rounded-xl border p-3">
+  <div class="relative flex-col rounded-xl border-t p-3">
     <div class="flex flex-wrap">
-      <div class="mb-3 mr-1 flex cursor-pointer items-center rounded-2xl border px-3 py-1 text-[0.75rem]">
+      <div
+        class="mb-3 mr-1 flex cursor-pointer items-center rounded-2xl border px-3 py-1 text-[0.75rem] hover:bg-gray-200"
+      >
         <Icon name="bx:bot" size="1.4em" />
       </div>
     </div>

src/components/VComposeView.vue

@@ -2,10 +2,9 @@ import { defineStore } from "pinia"
 import { ComputedRef, ref } from "vue"
 import { useSettingStore } from "~/composable/settings"
 import { DEFAULT_INPUT_TEMPLATE, StoreKey } from "~/constants"
-import { fetchStream } from "~/constants/api"
+import useChatBot from "~/composable/useChatBot"
 import { TChatDirection, TChatSession, TMask } from "~/constants/typing"
 import { getUtcNow } from "~/utils/date"
-import { debounce } from "~/utils/debounce"
 import { loadFromLocalStorage, saveSessionToLocalStorage, saveToLocalStorage } from "./storage"
 
 function makeEmptySession(s: number, simple: TSimple, mask?: TMask): TChatSession {
@@ -84,12 +83,17 @@ export const useSidebarChatSessions = defineStore(StoreKey.Chat, () => {
     sessionGid.value = loaded.sessionGid
   }
 
-  const saveAll = debounce(() => {
-    saveToLocalStorage(StoreKey.ChatSession, {
-      sessions: sessions.value,
-      sessionGid: sessionGid.value,
-    })
-  }, 1000)
+  const saveAll = useThrottleFn(
+    () => {
+      saveToLocalStorage(StoreKey.ChatSession, {
+        sessions: sessions.value,
+        sessionGid: sessionGid.value,
+      })
+    },
+    1000,
+    true,
+    true
+  )
 
   const clearSessions = () => {
     sessions.value = []
@@ -194,16 +198,17 @@ export const useChatSession = (sid: string): TUseChatSession => {
   })
   session.messages.push(...res.messages)
 
-  const debounceSave = debounce(
+  const throttledSave = useThrottleFn(
     () => {
-      console.log("toRaw message before saving", toRaw(session.messages))
       saveSessionToLocalStorage(toRaw(session))
     },
     1000,
-    false
+    true,
+    true
   )
 
   const onNewMessage = (message: string) => {
+    const { chat, message: currentMessage } = useChatBot()
     // latest 4 messages
     const lastMessages = session.messages.slice(-4).map((message) => {
       return {
@@ -259,22 +264,23 @@ export const useChatSession = (sid: string): TUseChatSession => {
     }, 500)
     chatStore.refreshSession(session)
 
-    fetchStream(
-      payload,
-      (receivedData: string) => {
+    chat(
+      payload as TOpenApiChatCompletionMessage,
+      () => {},
+      (message) => {
         clearInterval(loadingInterval) // 清除定时器
-        nMessage.content = receivedData
-        debounceSave()
+        nMessage.content = message.content
+        throttledSave()
       },
-      settings.serverUrl,
-      settings.apiKey
-    ).catch((error) => {
-      clearInterval(loadingInterval) // 清除定时器
-      // 在聊天中展示 error message
-      nMessage.isError = true
-      nMessage.content = `Error occurred: ${error}`
-      console.error("Error occurred:", error)
-    })
+      (message) => {
+        clearInterval(loadingInterval) // 清除定时器
+        // 在聊天中展示 error message
+        nMessage.isError = true
+        nMessage.content = `Error occurred: ${message.errorMessage}`
+        console.error("Error occurred:", message.errorMessage)
+      },
+      () => {}
+    ).then((r) => {})
   }
 
   const onUserInput = async (content: string) => {
@@ -302,7 +308,7 @@ export const useChatSession = (sid: string): TUseChatSession => {
     // chatStore.saveAll()
   }
 
-  const result = <TUseChatSession> {
+  const result = <TUseChatSession>{
     session,
     onUserInput,
     rename,

src/composable/chat.ts

@@ -0,0 +1,83 @@
+import { fetchEventSource } from "@fortaine/fetch-event-source"
+import { useSettingStore } from "~/composable/settings"
+
+type TChatCompletionMessage = {
+  content: string
+  status: "pending" | "connected" | "client error" | "messaging" | "error" | "done"
+  errorMessage: string
+}
+
+export default function useChatBot() {
+  const { settings } = useSettingStore()
+  const message = reactive<TChatCompletionMessage>({
+    content: "",
+    status: "pending",
+    errorMessage: "",
+  })
+
+  async function chat(
+    payload: TOpenApiChatCompletion,
+    onStart: (message: TChatCompletionMessage) => void,
+    onMessage: (message: TChatCompletionMessage) => void,
+    onError: (message: TChatCompletionMessage) => void,
+    onDone: (message: TChatCompletionMessage) => void
+  ) {
+    const BASE_URL = settings.serverUrl
+    const TOKEN = settings.apiKey
+    const API_URL = `${BASE_URL}/v1/chat/completions`
+
+    await fetchEventSource(API_URL, {
+      method: "POST",
+      headers: {
+        Accept: "text/event-stream",
+        Authorization: `Bearer ${TOKEN}`,
+      },
+      body: JSON.stringify({
+        ...payload,
+      }),
+      async onopen(res) {
+        if (res.ok && res.status === 200) {
+          console.log("Connection made ", res)
+          message.status = "connected"
+          onStart(message)
+        } else if (res.status >= 400 && res.status < 500 && res.status !== 429) {
+          message.status = "client error"
+          message.errorMessage = `Client-side error ${res.status || res.statusText} ${res.type}`
+          onError(message)
+          console.log("Client-side error ", res)
+        }
+      },
+      onmessage(ev) {
+        if ("[DONE]" == ev.data) {
+          message.status = "done"
+          onDone(message)
+          return
+        }
+        if (!ev.data) {
+          return
+        }
+        try {
+          const parsedData = JSON.parse(ev.data)
+          let content = parsedData.choices[0]?.delta?.content
+          if (content) {
+            message.content += content
+            onMessage(message)
+          }
+        } catch (e) {
+          message.content = String(s)
+          onError(message)
+        }
+      },
+      onerror(ev) {
+        message.status = "error"
+        message.errorMessage = `error ${ev.status || ev.statusText || ""} ${ev.type || ""}`
+        onError(message)
+      },
+    })
+  }
+
+  return {
+    message,
+    chat,
+  }
+}