Refactor error handling and message rendering in chat components (#558)

* Refactor error handling and message rendering in chat components * Remove unused `useMessage` import from axios utility.
swuecho · Dec 14, 2024 · bb88eaa · bb88eaa
1 parent 1d23e5a
commit bb88eaa
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 15 deletions.
diff --git a/web/src/api/chat_main.ts b/web/src/api/chat_main.ts
@@ -1,6 +1,8 @@
 import type { AxiosProgressEvent } from 'axios'
 import request from '@/utils/request/axios'
 
+
+
 export async function fetchChatStream(
   sessionUuid: string,
   chatUuid: string,

diff --git a/web/src/utils/request/axios.ts b/web/src/utils/request/axios.ts
@@ -28,6 +28,8 @@ service.interceptors.response.use(
     if (response.status === 200 || response.status === 201 || response.status === 204)
       return response
 
+
+
     throw new Error(response.status.toString())
   },
   (error) => {

diff --git a/web/src/views/chat/components/Conversation.vue b/web/src/views/chat/components/Conversation.vue
@@ -23,6 +23,7 @@ import ModelSelector from '@/views/chat/components/ModelSelector.vue'
 import MessageList from '@/views/chat/components/MessageList.vue'
 import PromptGallery from '@/views/chat/components/PromptGallery/index.vue'
 import { getDataFromResponseText } from '@/utils/string'
+import renderMessage from './RenderMessage.vue'
 let controller = new AbortController()
 
 const dialog = useDialog()
@@ -31,10 +32,10 @@ const nui_msg = useMessage()
 const chatStore = useChatStore()
 
 const { sessionUuid } = defineProps({
-        sessionUuid: {
-                type: String,
-                required: true
-        },
+  sessionUuid: {
+    type: String,
+    required: true
+  },
 });
 
 
@@ -167,15 +168,14 @@ async function onConversationStream() {
           } = xhr
           if (status >= 400) {
             const error_json: { code: number; message: string; details: any } = JSON.parse(responseText)
-            updateChatPartial(
-              sessionUuid,
-              dataSources.value.length - 1,
-              {
-                loading: false,
-                error: true,
-                text: t(error_json.message), // how to add params to i18n
-              },
-            )
+            nui_msg.error(t(error_json.message), {
+              duration: 5000,
+              closable: true,
+              render: renderMessage
+            })
+
+            chatStore.deleteChatByUuid(sessionUuid, dataSources.value.length -1)
+            // remove last input box
             loading.value = false
           }
           else {
@@ -203,7 +203,7 @@ async function onConversationStream() {
               }
               catch (error) {
                 // eslint-disable-next-line no-console
-                console.log(error)
+                console.log("xxx", error)
               }
             }
           }
@@ -506,7 +506,7 @@ const handleUsePrompt = (_: string, value: string): void => {
           </template>
           <template v-else>
             <div>
-              <MessageList :session-uuid="sessionUuid" :on-regenerate="onRegenerate"/>
+              <MessageList :session-uuid="sessionUuid" :on-regenerate="onRegenerate" />
             </div>
           </template>
         </div>

diff --git a/web/src/views/chat/components/RenderMessage.vue b/web/src/views/chat/components/RenderMessage.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { MessageRenderMessage } from 'naive-ui'
+import { NAlert } from 'naive-ui'
+import { h } from 'vue'
+
+const renderMessage: MessageRenderMessage = (props) => {
+        const { type } = props
+        return h(
+                NAlert,
+                {
+                        closable: props.closable,
+                        onClose: props.onClose,
+                        type: type === 'loading' ? 'default' : type,
+                        style: {
+                                boxShadow: 'var(--n-box-shadow)',
+                                maxWidth: 'calc(100vw - 32px)',
+                                width: '480px'
+                        }
+                },
+                {
+                        default: () => props.content
+                }
+        )
+}
+
+export default renderMessage;
+</script>