Supports multiple concurrent and interruptible chats

Author: aiqlcom

src/renderer/components/common/SamplingCard.vue

@@ -40,13 +40,16 @@ function handleError(errorMessage: string | null) {
   jsonError.value = errorMessage
 }
 
+const samplingId = ref('')
+
 const tryCompletions = () => {
   if (jsonError.value) {
     snackbarStore.showErrorMessage(jsonError.value)
   } else {
     const { messages, ...restParams } = samplingParams.value as SamplingRequest
     restParams.target = samplingResults.value
-    createCompletion(messages, historyStore.getDate(), restParams)
+    samplingId.value = historyStore.getDate()
+    createCompletion(messages, samplingId.value, restParams)
   }
 }
 
@@ -162,7 +165,7 @@ function continueAutoSampling() {
         unwatch()
       }, 30000) // 30 sec
       const unwatch = watch(
-        () => messageStore.generating,
+        () => samplingId.value in messageStore.generating,
         (val) => {
           if (val) {
             // Generation has started, the timer is no longer needed. The watch will track the progress.
@@ -242,7 +245,7 @@ function continueAutoSampling() {
           v-model="samplingProgress.percent"
           class="ml-8 mr-4"
           color="primary"
-          :indeterminate="Boolean(messageStore.generating)"
+          :indeterminate="samplingId in messageStore.generating"
           rounded
           @click="samplingProgress.auto = false"
         ></v-progress-linear>

src/renderer/components/pages/ChatInputPage.vue

@@ -68,22 +68,35 @@ const agentStore = useAgentStore()
       <!-- Adds a horizontal flex container (row direction) to override parent column layout, ensuring right alignment within v-col -->
       <div class="d-flex justify-end">
         <v-spacer></v-spacer>
+
+        <div v-if="messageStore.historyId in messageStore.generating">
+          <v-icon-btn
+            v-tooltip:start="$t('chat.wipe')"
+            color="error"
+            variant="tonal"
+            icon="mdi-delete-outline"
+            rounded="lg"
+            @click="messageStore.init()"
+          ></v-icon-btn>
+          <v-divider class="mx-1" vertical></v-divider>
+          <v-icon-btn
+            color="primary"
+            variant="tonal"
+            icon="mdi-stop"
+            rounded="lg"
+            @click="messageStore.stop"
+          ></v-icon-btn>
+        </div>
+
         <v-icon-btn
-          v-if="messageStore.userMessage"
+          v-else-if="messageStore.userMessage"
           color="primary"
           variant="tonal"
           icon="mdi-arrow-up"
           rounded="lg"
           @click="messageStore.sendMessage"
         ></v-icon-btn>
-        <v-icon-btn
-          v-else-if="messageStore.generating"
-          color="primary"
-          variant="tonal"
-          icon="mdi-stop"
-          rounded="lg"
-          @click="messageStore.stop"
-        ></v-icon-btn>
+
         <div v-else-if="messageStore.conversation.length > 0">
           <v-icon-btn
             v-tooltip:start="$t('chat.wipe')"

src/renderer/composables/chatCompletions.ts

@@ -95,8 +95,6 @@ export const createCompletion = async (
   }, [] as RequestMessageType[])
   // const conversation = rawconversation
   try {
-    console.log('Chat session started: ', sessionId)
-    messageStore.generating = sessionId
     // Create a completion (axios is not used here because it does not support streaming)
 
     const headers: HeadersInit = {
@@ -173,9 +171,17 @@ export const createCompletion = async (
       body: JSON.stringify(body)
     }
 
+    const abortController = new AbortController()
+
+    console.log('Chat session started: ', sessionId)
+    messageStore.generating[sessionId] = abortController
+
     const completion = await fetch(
       chatbotStore.url + (chatbotStore.path ? chatbotStore.path : ''),
-      request
+      {
+        ...request,
+        signal: abortController.signal
+      }
     )
 
     console.log(completion)
@@ -227,8 +233,9 @@ export const createCompletion = async (
   } catch (error: any) {
     snackbarStore.showErrorMessage(error?.message)
   } finally {
-    if (messageStore.generating === sessionId) {
-      messageStore.generating = ''
+    if (sessionId in messageStore.generating) {
+      messageStore.generating[sessionId].abort()
+      delete messageStore.generating[sessionId]
     }
   }
 }
@@ -244,16 +251,17 @@ const read = async (
   const decoder = new TextDecoder()
   const messageStore = useMessageStore()
 
-  if (!messageStore.generating || messageStore.generating !== sessionId) {
+  if (!(sessionId in messageStore.generating)) {
     return reader.releaseLock()
   }
   // Destructure the value returned by reader.read()
   const { done, value } = await reader.read()
 
   // If the stream is done reading, release the lock on the reader
   if (done) {
-    if (messageStore.generating === sessionId) {
-      messageStore.generating = ''
+    if (sessionId in messageStore.generating) {
+      messageStore.generating[sessionId].abort()
+      delete messageStore.generating[sessionId]
     }
     return reader.releaseLock()
   }

src/renderer/screens/PopupScreen.vue

@@ -27,10 +27,7 @@ const commandNotify = (item: PopupPromptsType) => {
 <template>
   <v-app>
     <v-layout>
-      <v-app-bar
-        class="py-2 px-3 drag gradient-command"
-        density="compact"
-      >
+      <v-app-bar class="py-2 px-3 drag gradient-command" density="compact">
         <v-text-field
           v-model="search"
           class="no-drag"

src/renderer/screens/chat/ChatHistoryScreen.vue

@@ -1,6 +1,8 @@
 <script setup lang="tsx">
 import { useHistoryStore } from '@/renderer/store/history'
+import { useMessageStore } from '@/renderer/store/message'
 const historyStore = useHistoryStore()
+const messageStore = useMessageStore()
 
 function parseContent(content) {
   if (typeof content === 'string') {
@@ -30,6 +32,18 @@ function parseContent(content) {
       :subtitle="parseContent(item.messages.at(-1)?.content)"
       @click="historyStore.select(index)"
     >
+      <template #append>
+        <v-list-item-action>
+          <v-icon-btn
+            :loading="item.id in messageStore.generating"
+            icon="mdi-delete-outline"
+            rounded="lg"
+            size="small"
+            @click="historyStore.deleteById(index)"
+          >
+          </v-icon-btn>
+        </v-list-item-action>
+      </template>
     </v-list-item>
   </v-list>
 </template>

src/renderer/store/history.ts

@@ -57,6 +57,7 @@ export const useHistoryStore = defineStore('historyStore', {
     },
     select(index: number) {
       const messageStore = useMessageStore()
+      messageStore.historyId = this.conversation[index].id
       messageStore.conversation = this.conversation[index].messages
     },
     getColor(index: number) {

src/renderer/store/message.ts

@@ -15,7 +15,7 @@ interface MessageStoreState {
   conversation: ChatConversationMessage[]
   historyId: string
   base64: string
-  generating: string
+  generating: Record<string, AbortController>
 }
 
 export const useMessageStore = defineStore('messageStore', {
@@ -24,7 +24,7 @@ export const useMessageStore = defineStore('messageStore', {
     conversation: [],
     historyId: '',
     base64: '',
-    generating: ''
+    generating: {}
   }),
   actions: {
     init() {
@@ -41,8 +41,10 @@ export const useMessageStore = defineStore('messageStore', {
       this.historyId = ''
     },
     stop() {
+      const id = this.historyId
       const snackbarStore = useSnackbarStore()
-      this.generating = ''
+      this.generating[id].abort()
+      delete this.generating[id]
       snackbarStore.showInfoMessage('snackbar.stopped')
     },
     clear() {
@@ -70,7 +72,7 @@ export const useMessageStore = defineStore('messageStore', {
       // when role == "user" is found，drop followings
       if (index >= 0) {
         this.conversation.splice(index + 1)
-        this.startInference()
+        return this.startInference()
       }
     },
     sendMessage() {
@@ -89,7 +91,7 @@ export const useMessageStore = defineStore('messageStore', {
           role: 'user'
         })
 
-        this.startInference()
+        return this.startInference()
       }
     },
     syncHistory: function (): string {
@@ -114,11 +116,15 @@ export const useMessageStore = defineStore('messageStore', {
       this.initConversation(messages)
       // this.syncHistory()
     },
-    startInference: async function () {
+    startInference: function () {
       const historyId = this.syncHistory()
       this.clear()
-      await createCompletion(this.conversation, historyId)
-      await this.postToolCall()
+
+      createCompletion(this.conversation, historyId).then(() => {
+        this.postToolCall()
+      })
+
+      return historyId
     },
     postToolCall: async function () {
       const mcpStore = useMcpStore()