Merge pull request #375 from shunyue1320/change-session-abort-chat

feat: abort chat when change chat session

components/Chat.vue

@@ -324,6 +324,8 @@ async function saveMessage(data: Omit<ChatHistory, 'sessionId'>) {
     ? await clientDB.chatHistories.add({ ...data, sessionId: props.sessionId })
     : Math.random()
 }
+
+defineExpose({ abortChat: onAbortChat })
 </script>
 
 <template>

pages/chat/index.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { ComponentInstance } from 'vue'
 import ChatSessionList from '~/components/ChatSessionList.vue'
-import { type Message } from '~/components/Chat.vue'
+import Chat, { type Message } from '~/components/Chat.vue'
 
 export interface ChatSessionSettings extends Partial<Omit<ChatSession, 'id' | 'createTime'>> { }
 
 const chatSessionListRef = shallowRef<ComponentInstance<typeof ChatSessionList>>()
+const chatRef = shallowRef<ComponentInstance<typeof Chat>>()
+
 const sessionId = ref(0)
 const latestMessageId = ref(0)
 
@@ -33,15 +35,20 @@ function onMessage(data: Message | null) {
 function onNewChat() {
   chatSessionListRef.value?.createChat()
 }
+
+function onChangeChatSession(id: number) {
+  sessionId.value = id
+  chatRef.value?.abortChat()
+}
 </script>
 
 <template>
   <div class="h-full max-w-6xl mx-auto flex flex-1 border border-gray-200 dark:border-gray-800 rounded-md shadow-md"
        style="--chat-side-width:240px">
     <ChatSessionList ref="chatSessionListRef"
                      class="shrink-0 w-[var(--chat-side-width)]"
-                     @select="id => sessionId = id" />
-    <chat v-if="sessionId > 0"
+                     @select="onChangeChatSession" />
+    <chat ref="chatRef" v-if="sessionId > 0"
           class="flex-1 px-4 pb-4 box-border w-[calc(100%-var(--chat-side-width))]"
           :session-id="sessionId"
           @change-settings="onChangeSettings"