Merge pull request #806 from SuanmoSuanyangTechnology/feature/ui_upgrade_zy

fix(web): stream loading

web/src/components/Chat/ChatContent.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2025-12-10 16:46:17 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-02 16:05:01
+ * @Last Modified time: 2026-04-07 21:29:59
  */
 import { type FC, useRef, useEffect, useState } from 'react'
 import clsx from 'clsx'
@@ -131,7 +131,9 @@ const ChatContent: FC<ChatContentProps> = ({
     <div ref={scrollContainerRef} className={clsx("rb:relative rb:overflow-y-auto", classNames)}>
       {data.length === 0 
         ? empty // Display empty state
-        : data.map((item, index) => (
+        : data.map((item, index) => {
+          if (!item) return null
+          return (
           <div key={index} className={clsx("rb:relative", {
             'rb:mt-6': index !== 0, // Add top margin for non-first messages
             'rb:right-0 rb:text-right': item.role === 'user', // User messages right-aligned
@@ -147,7 +149,7 @@ const ChatContent: FC<ChatContentProps> = ({
                     {labelFormat(item)}
                   </div>
                 }
-                {item.meta_data?.files && item.meta_data?.files.length > 0 && <Flex gap={8} vertical align="end" className="rb:mb-2!">
+                {item?.meta_data?.files && item.meta_data?.files.length > 0 && <Flex gap={8} vertical align="end" className="rb:mb-2!">
                   {item.meta_data?.files?.map((file) => {
                     if (file.type.includes('image')) {
                       return (
@@ -305,7 +307,7 @@ const ChatContent: FC<ChatContentProps> = ({
               </>
             }
           </div>
-        ))
+        )})
       }
     </div>
   )

web/src/views/ApplicationConfig/TestChat/index.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-03-13 17:27:52 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-07 20:25:45
+ * @Last Modified time: 2026-04-07 21:31:19
  */
 import { type FC, useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -90,6 +90,7 @@ const TestChat: FC<TestChatProps> = ({
   const [variables, setVariables] = useState<Variable[]>([])
   
   const audioPollingRef = useRef<Map<string, ReturnType<typeof setInterval>>>(new Map())
+  const streamLoadingRef = useRef(false)
   const [audioStatusMap, setAudioStatusMap] = useState<Record<string, string>>({})
 
   useEffect(() => {
@@ -191,7 +192,10 @@ const TestChat: FC<TestChatProps> = ({
   }
   const updateAssistantReasoningMessage = (content: string) => {
     if (!content) return
-    if (streamLoading) setStreamLoading(false)
+    if (streamLoadingRef.current) {
+      streamLoadingRef.current = false
+      setStreamLoading(false)
+    }
     setChatList(prev => {
       const newList = [...prev]
       const lastMsg = newList[newList.length - 1]
@@ -251,6 +255,7 @@ const TestChat: FC<TestChatProps> = ({
     toolbarRef.current?.setFiles([])
     setFileList([])
     addAssistantMessage()
+    streamLoadingRef.current = true
     setStreamLoading(true)
     setLoading(true)
 
@@ -265,6 +270,7 @@ const TestChat: FC<TestChatProps> = ({
       })
       .finally(() => {
         setLoading(false)
+        streamLoadingRef.current = false
         setStreamLoading(false)
       })
   }
@@ -341,6 +347,7 @@ const TestChat: FC<TestChatProps> = ({
             updateAssistantMessage(content, audio_url, undefined, citations)
           }
           updateErrorAssistantMessage(message_length)
+          streamLoadingRef.current = false
           setStreamLoading(false)
           break
       }
@@ -361,6 +368,7 @@ const TestChat: FC<TestChatProps> = ({
     setFileList([])
     setMessage(undefined)
     setStreamLoading(true)
+    streamLoadingRef.current = true
 
     draftRun(
       application.id,
@@ -381,6 +389,7 @@ const TestChat: FC<TestChatProps> = ({
       .finally(() => {
         setLoading(false)
         setStreamLoading(false)
+        streamLoadingRef.current = false
       })
   }
 
@@ -419,6 +428,7 @@ const TestChat: FC<TestChatProps> = ({
             updateWorkflowEndMessage(item.data as NodeData, citations)
           }
           setStreamLoading(false)
+          streamLoadingRef.current = false
           setLoading(false)
           break
       }

web/src/views/Conversation/index.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:58:03 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-07 18:08:52
+ * @Last Modified time: 2026-04-07 21:21:52
  */
 /**
  * Conversation Page
@@ -438,8 +438,9 @@ const Conversation: FC = () => {
       console.log('firstMsg', firstMsg)
       if (firstMsg && firstMsg.role === 'assistant' && firstMsg.content && features?.opening_statement?.enabled && features?.opening_statement.statement && variables.length > 0) {
         firstMsg.content = replaceVariables(features?.opening_statement.statement, variables as unknown as AppVariable[])
+        return [firstMsg, ...prev.slice(1)]
       }
-      return [firstMsg, ...prev.slice(1)]
+      return prev
     })
   }