fix: click history while chat thinking

Author: ulleo

frontend/src/views/chat/ChatListContainer.vue

@@ -103,54 +103,61 @@ function onChatCreated(chat: ChatInfo) {
 
 const chatCreatorRef = ref()
 
-function goEmpty() {
+function goEmpty(func?: (...p: any[]) => void, ...params: any[]) {
   _currentChat.value = new ChatInfo()
   _currentChatId.value = undefined
-  emits('goEmpty')
+  emits('goEmpty', func, ...params)
 }
 
 const createNewChat = async () => {
-  if (!_loading.value) {
-    goEmpty()
-    if (isAssistant.value) {
-      const assistantChat = await assistantStore.setChat()
-      if (assistantChat) {
-        onChatCreated(assistantChat)
-      }
-      return
-    } else {
-      chatCreatorRef.value?.showDs()
+  goEmpty(doCreateNewChat)
+}
+
+async function doCreateNewChat() {
+  if (isAssistant.value) {
+    const assistantChat = await assistantStore.setChat()
+    if (assistantChat) {
+      onChatCreated(assistantChat)
     }
+    return
+  } else {
+    chatCreatorRef.value?.showDs()
   }
 }
 
 function onClickHistory(chat: Chat) {
-  if (chat !== undefined && chat.id !== undefined && !_loading.value) {
-    goEmpty()
-    nextTick(() => {
-      if (chat !== undefined && chat.id !== undefined) {
-        _currentChat.value = new ChatInfo(chat)
-        _currentChatId.value = chat.id
-        _loading.value = true
-        chatApi
-          .get(chat.id)
-          .then((res) => {
-            const info = chatApi.toChatInfo(res)
-            if (info) {
-              _currentChat.value = info
-
-              // scrollToBottom()
-              emits('onClickHistory', info)
-            }
-          })
-          .finally(() => {
-            _loading.value = false
-          })
-      }
-    })
+  if (chat !== undefined && chat.id !== undefined) {
+    if (_currentChatId.value === chat.id) {
+      return
+    }
+    goEmpty(goHistory, chat)
   }
 }
 
+function goHistory(chat: Chat) {
+  nextTick(() => {
+    if (chat !== undefined && chat.id !== undefined) {
+      _currentChat.value = new ChatInfo(chat)
+      _currentChatId.value = chat.id
+      _loading.value = true
+      chatApi
+        .get(chat.id)
+        .then((res) => {
+          const info = chatApi.toChatInfo(res)
+          if (info && info.id === _currentChatId.value) {
+            _currentChat.value = info
+
+            // scrollToBottom()
+            emits('onClickHistory', info)
+          }
+        })
+        .finally(() => {
+          _loading.value = false
+        })
+    }
+  })
+}
+
 function onChatDeleted(id: number) {
   for (let i = 0; i < _chatList.value.length; i++) {
     if (_chatList.value[i].id === id) {

frontend/src/views/chat/RecommendQuestion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 import { endsWith, startsWith } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { chatApi, ChatInfo } from '@/api/chat.ts'
@@ -19,7 +19,7 @@ const props = withDefaults(
   }
 )
 
-const emits = defineEmits(['clickQuestion', 'update:currentChat'])
+const emits = defineEmits(['clickQuestion', 'update:currentChat', 'stop'])
 
 const loading = ref(false)
 
@@ -57,7 +57,7 @@ async function getRecommendQuestions() {
   loading.value = true
   try {
     const controller: AbortController = new AbortController()
-    const response = await chatApi.recommendQuestions(props.recordId)
+    const response = await chatApi.recommendQuestions(props.recordId, controller)
     const reader = response.body.getReader()
     const decoder = new TextDecoder()
 
@@ -138,8 +138,13 @@ async function getRecommendQuestions() {
 function stop() {
   stopFlag.value = true
   loading.value = false
+  emits('stop')
 }
 
+onBeforeUnmount(() => {
+  stop()
+})
+
 defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
 </script>
 

frontend/src/views/chat/answer/AnalysisAnswer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseAnswer from './BaseAnswer.vue'
 import { chatApi, ChatInfo, type ChatMessage, ChatRecord } from '@/api/chat.ts'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 import MdComponent from '@/views/chat/component/MdComponent.vue'
 const props = withDefaults(
   defineProps<{
@@ -23,6 +23,7 @@ const props = withDefaults(
 const emits = defineEmits([
   'finish',
   'error',
+  'stop',
   'update:loading',
   'update:chatList',
   'update:currentChat',
@@ -192,7 +193,12 @@ const sendMessage = async () => {
 function stop() {
   stopFlag.value = true
   _loading.value = false
+  emits('stop')
 }
+
+onBeforeUnmount(() => {
+  stop()
+})
 defineExpose({ sendMessage, index: () => index.value, chatList: () => _chatList.value, stop })
 </script>
 

frontend/src/views/chat/answer/ChartAnswer.vue

@@ -2,7 +2,7 @@
 import BaseAnswer from './BaseAnswer.vue'
 import { Chat, chatApi, ChatInfo, type ChatMessage, ChatRecord, questionApi } from '@/api/chat.ts'
 import { useAssistantStore } from '@/stores/assistant'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 const assistantStore = useAssistantStore()
 const props = withDefaults(
   defineProps<{
@@ -25,6 +25,7 @@ const props = withDefaults(
 const emits = defineEmits([
   'finish',
   'error',
+  'stop',
   'update:loading',
   'update:chatList',
   'update:currentChat',
@@ -102,11 +103,10 @@ const sendMessage = async () => {
       question: currentRecord.question,
       chat_id: _currentChatId.value,
       assistant_certificate: assistantStore.getCertificate,
-      controller,
     }
     console.log(assistantStore.getCertificate)
     console.log(param)
-    const response = await questionApi.add(param)
+    const response = await questionApi.add(param, controller)
     const reader = response.body.getReader()
     const decoder = new TextDecoder()
 
@@ -235,7 +235,13 @@ function getChatData(recordId?: number) {
 function stop() {
   stopFlag.value = true
   _loading.value = false
+  emits('stop')
 }
+
+onBeforeUnmount(() => {
+  stop()
+})
+
 defineExpose({ sendMessage, index: () => index.value, stop })
 </script>
 

frontend/src/views/chat/answer/PredictAnswer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseAnswer from './BaseAnswer.vue'
 import { chatApi, ChatInfo, type ChatMessage, ChatRecord } from '@/api/chat.ts'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 import MdComponent from '@/views/chat/component/MdComponent.vue'
 const props = withDefaults(
   defineProps<{
@@ -23,6 +23,7 @@ const props = withDefaults(
 const emits = defineEmits([
   'finish',
   'error',
+  'stop',
   'update:loading',
   'update:chatList',
   'update:currentChat',
@@ -95,7 +96,7 @@ const sendMessage = async () => {
 
   try {
     const controller: AbortController = new AbortController()
-    const response = await chatApi.predict(currentRecord.predict_record_id)
+    const response = await chatApi.predict(currentRecord.predict_record_id, controller)
     const reader = response.body.getReader()
     const decoder = new TextDecoder()
 
@@ -195,10 +196,17 @@ const sendMessage = async () => {
     _loading.value = false
   }
 }
+
 function stop() {
   stopFlag.value = true
   _loading.value = false
+  emits('stop')
 }
+
+onBeforeUnmount(() => {
+  stop()
+})
+
 defineExpose({ sendMessage, index: () => index.value, chatList: () => _chatList, stop })
 </script>
 

frontend/src/views/chat/index.vue

@@ -99,6 +99,7 @@
                   :questions="message.recommended_question"
                   :first-chat="message.first_chat"
                   @click-question="quickAsk"
+                  @stop="onChatStop"
                 />
                 <UserChat v-if="message.role === 'user'" :message="message" />
                 <template v-if="message.role === 'assistant' && !message.first_chat">
@@ -118,6 +119,7 @@
                     :reasoning-name="['sql_answer', 'chart_answer']"
                     @finish="onChartAnswerFinish"
                     @error="onChartAnswerError"
+                    @stop="onChatStop"
                   >
                     <ChartBlock style="margin-top: 12px" :message="message" />
                     <div
@@ -190,6 +192,7 @@
                         :questions="message.recommended_question"
                         :first-chat="message.first_chat"
                         @click-question="quickAsk"
+                        @stop="onChatStop"
                       />
                     </template>
                   </ChartAnswer>
@@ -206,6 +209,7 @@
                     :message="message"
                     @finish="onAnalysisAnswerFinish"
                     @error="onAnalysisAnswerError"
+                    @stop="onChatStop"
                   >
                     <div
                       v-if="message.record?.error && message.record?.error?.trim().length > 0"
@@ -230,6 +234,7 @@
                     :message="message"
                     @finish="onPredictAnswerFinish"
                     @error="onPredictAnswerError"
+                    @stop="onChatStop"
                   >
                     <ChartBlock style="margin-top: 12px" :message="message" is-predict />
                     <div
@@ -382,9 +387,9 @@ const computedMessages = computed<Array<ChatMessage>>(() => {
   return messages
 })
 
-const goEmpty = () => {
+const goEmpty = (func?: (...p: any[]) => void, ...param: any[]) => {
   inputMessage.value = ''
-  stop()
+  stop(func, ...param)
 }
 
 const createNewChatSimple = async () => {
@@ -418,8 +423,8 @@ function getChatList() {
 }
 
 function onClickHistory(chat: Chat) {
-  console.log('click history', chat)
   scrollToBottom()
+  console.debug('click history', chat)
 }
 
 function toAssistantHistory(chat: Chat) {
@@ -510,6 +515,13 @@ async function onChartAnswerFinish(id: number) {
 function onChartAnswerError() {
   loading.value = false
   isTyping.value = false
+  console.debug('onChartAnswerError')
+}
+
+function onChatStop() {
+  loading.value = false
+  isTyping.value = false
+  console.debug('onChatStop')
 }
 
 const sendMessage = async () => {
@@ -698,7 +710,7 @@ function clickInput() {
   inputRef.value?.focus()
 }
 
-function stop() {
+function stop(func?: (...p: any[]) => void, ...param: any[]) {
   if (recommendQuestionRef.value) {
     if (recommendQuestionRef.value instanceof Array) {
       for (let i = 0; i < recommendQuestionRef.value.length; i++) {
@@ -735,6 +747,9 @@ function stop() {
       predictAnswerRef.value.stop()
     }
   }
+  if (func && typeof func === 'function') {
+    func(...param)
+  }
 }
 
 onMounted(() => {