feat: no longer use typewriter in debug dialog

web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx

@@ -37,15 +37,11 @@ export default function DebugDialog({
   const [showAtPopover, setShowAtPopover] = useState(false);
   const [hasAt, setHasAt] = useState(false);
   const [isHovering, setIsHovering] = useState(false);
-  const [isStreaming, setIsStreaming] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(true);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 
-  //   const scrollToBottom = () => {
-  //     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  //   };
-
   const scrollToBottom = useCallback(() => {
     // 使用setTimeout确保在DOM更新后执行滚动
     setTimeout(() => {
@@ -177,6 +173,7 @@ export default function DebugDialog({
         // for showing
         text_content = '@webchatbot' + text_content;
       }
+
       const userMessage: Message = {
         id: -1,
         role: 'user',
@@ -186,13 +183,15 @@ export default function DebugDialog({
       };
       // 根据isStreaming状态决定使用哪种传输方式
       if (isStreaming) {
+        // streaming
         // 创建初始bot消息
-        const botMessage: Message = {
+        const placeholderRandomId = Math.floor(Math.random() * 1000000);
-          id: -1,
+        const botMessagePlaceholder: Message = {
+          id: placeholderRandomId,
           role: 'assistant',
           content: 'Generating...',
           timestamp: new Date().toISOString(),
-          message_chain: [{ type: 'Plain', text: '' }],
+          message_chain: [{ type: 'Plain', text: 'Generating...' }],
         };
 
         // 添加用户消息和初始bot消息到状态
@@ -200,16 +199,11 @@ export default function DebugDialog({
         setMessages((prevMessages) => [
           ...prevMessages,
           userMessage,
-          botMessage,
+          botMessagePlaceholder,
         ]);
         setInputValue('');
         setHasAt(false);
-
         try {
-          let fullContent = ''; // 保存完整内容
-          let displayContent = ''; // 当前显示内容
-          let typingInterval: NodeJS.Timeout;
-
           await httpClient.sendStreamingWebChatMessage(
             sessionType,
             messageChain,
@@ -219,78 +213,29 @@ export default function DebugDialog({
               console.log('data', data);
               if (data.message) {
                 // 更新完整内容
-                fullContent = data.message.content;
 
-                // 清除之前的打字效果
+                setMessages((prevMessages) => {
-                if (typingInterval) {
+                  const updatedMessages = [...prevMessages];
-                  clearInterval(typingInterval);
+                  const botMessageIndex = updatedMessages.findIndex(
-                }
+                    (message) => message.id === placeholderRandomId,
-
+                  );
-                // 开始新的打字效果
+                  if (botMessageIndex !== -1) {
-                let currentPos = displayContent.length;
+                    updatedMessages[botMessageIndex] = {
-                const targetContent = fullContent;
+                      ...updatedMessages[botMessageIndex],
-
+                      content: data.message.content,
-                typingInterval = setInterval(() => {
+                      message_chain: [
-                  if (currentPos < targetContent.length) {
+                        { type: 'Plain', text: data.message.content },
-                    displayContent = targetContent.substring(
+                      ],
-                      0,
+                    };
-                      currentPos + 10,
-                    );
-                    currentPos += 10;
-
-                    // 更新bot消息
-                    setMessages((prevMessages) => {
-                      const updatedMessages = [...prevMessages];
-                      const botMessageIndex = updatedMessages.length - 1;
-
-                      if (botMessageIndex !== -1) {
-                        const updatedBotMessage = {
-                          ...updatedMessages[botMessageIndex],
-                          content: displayContent,
-                          message_chain: [
-                            { type: 'Plain', text: displayContent },
-                          ],
-                        };
-                        updatedMessages[botMessageIndex] = updatedBotMessage;
-                      }
-                      setTimeout(scrollToBottom, 0); // 确保在状态更新后滚动
-                      return updatedMessages;
-                    });
-                  } else {
-                    clearInterval(typingInterval);
                   }
-                }, 1); // 调整这个值可以改变打字速度
+                  return updatedMessages;
+                });
               }
             },
-            () => {
+            () => {},
-              // 流传输完成
-              console.log('Streaming completed');
-              if (typingInterval) {
-                clearInterval(typingInterval);
-              }
-              // 确保最终内容完全显示
-              setMessages((prevMessages) => {
-                const updatedMessages = [...prevMessages];
-                const botMessageIndex = updatedMessages.length - 1;
-
-                if (botMessageIndex !== -1) {
-                  const updatedBotMessage = {
-                    ...updatedMessages[botMessageIndex],
-                    content: fullContent,
-                    message_chain: [{ type: 'Plain', text: fullContent }],
-                  };
-                  updatedMessages[botMessageIndex] = updatedBotMessage;
-                }
-                setTimeout(scrollToBottom, 0); // 确保在状态更新后滚动
-                return updatedMessages;
-              });
-            },
             (error) => {
               // 处理错误
               console.error('Streaming error:', error);
-              if (typingInterval) {
-                clearInterval(typingInterval);
-              }
               if (sessionType === 'person') {
                 toast.error(t('pipelines.debugDialog.sendFailed'));
               }
@@ -303,6 +248,7 @@ export default function DebugDialog({
           }
         }
       } else {
+        // non-streaming
         setMessages((prevMessages) => [...prevMessages, userMessage]);
         setInputValue('');
         setHasAt(false);