feat: add generating state management to chat process (#655)

Signed-off-by: Bob Du <i@bobdu.cc>

Author: BobDu

service/src/chatgpt/index.ts

@@ -237,6 +237,11 @@ search result: <search_result>${searchResultContent}</search_result>`,
     if (!hasSearchResult && key.keyModel !== 'ResponsesAPI')
       (messages as OpenAI.Chat.ChatCompletionMessageParam[])[0].content = systemMessage
 
+    // Send generating status before starting to generate response
+    process?.({
+      generating: true,
+    })
+
     // Choose API by key model
     // ResponsesAPI branch (OpenAI Responses API)
     if (key.keyModel === 'ResponsesAPI') {

service/src/chatgpt/types.ts

@@ -14,6 +14,7 @@ export interface ChatMessage {
 export interface ResponseChunk {
   id?: string
   searching?: boolean
+  generating?: boolean
   searchQuery?: string
   searchResults?: SearchResult[]
   searchUsageTime?: number

service/src/routes/chat.ts

@@ -302,6 +302,9 @@ router.post('/chat-process', [auth, limiter], async (req, res) => {
         if (chunk.searching !== undefined) {
           sendSSEData('searching', { searching: chunk.searching })
         }
+        if (chunk.generating !== undefined) {
+          sendSSEData('generating', { generating: chunk.generating })
+        }
         if (chunk.searchQuery) {
           sendSSEData('search_query', { searchQuery: chunk.searchQuery })
         }

src/api/index.ts

@@ -21,6 +21,7 @@ interface SSEEventHandlers {
   onMessage?: (data: any) => void
   onDelta?: (delta: { reasoning?: string, text?: string }) => void
   onSearching?: (data: { searching: boolean }) => void
+  onGenerating?: (data: { generating: boolean }) => void
   onSearchQuery?: (data: { searchQuery: string }) => void
   onSearchResults?: (data: { searchResults: any[], searchUsageTime: number }) => void
   onComplete?: (data: any) => void
@@ -91,6 +92,9 @@ export function fetchChatAPIProcessSSE(
               else if (jsonData.searching !== undefined) {
                 handlers.onSearching?.(jsonData)
               }
+              else if (jsonData.generating !== undefined) {
+                handlers.onGenerating?.(jsonData)
+              }
               else if (jsonData.searchQuery) {
                 handlers.onSearchQuery?.(jsonData)
               }

src/views/chat/components/Message/Text.vue

@@ -54,8 +54,11 @@ const wrapClass = computed(() => {
 
 const text = computed(() => {
   const value = props.text ?? ''
-  if (!props.asRawText)
-    return mdi.render(value)
+  if (!props.asRawText) {
+    const rendered = mdi.render(value)
+    // If markdown is empty, render a p tag to ensure cursor can be displayed
+    return rendered.trim() === '' ? '<p></p>' : rendered
+  }
   return value
 })
 

src/views/chat/index.vue

@@ -157,6 +157,15 @@ async function onConversation() {
             },
           )
         },
+        onGenerating: (data) => {
+          chatStore.updateChatMessage(
+            currentChatRoom.value!.roomId,
+            dataSources.value.length - 1,
+            {
+              loading: data.generating,
+            },
+          )
+        },
         onSearchQuery: (data) => {
           searchQuery = data.searchQuery
           searching = false
@@ -409,6 +418,15 @@ async function onRegenerate(index: number) {
             },
           )
         },
+        onGenerating: (data) => {
+          updateChatSome(
+            currentChatRoom.value!.roomId,
+            index,
+            {
+              loading: data.generating,
+            },
+          )
+        },
         onSearchQuery: (data) => {
           searchQuery = data.searchQuery
           searching = false