diff --git a/web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx b/web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx index 833c98d8..8505f4f9 100644 --- a/web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx +++ b/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(null); const inputRef = useRef(null); const popoverRef = useRef(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 = { - id: -1, + const placeholderRandomId = Math.floor(Math.random() * 1000000); + 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; - // 清除之前的打字效果 - if (typingInterval) { - clearInterval(typingInterval); - } - - // 开始新的打字效果 - let currentPos = displayContent.length; - const targetContent = fullContent; - - typingInterval = setInterval(() => { - if (currentPos < targetContent.length) { - 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); + setMessages((prevMessages) => { + const updatedMessages = [...prevMessages]; + const botMessageIndex = updatedMessages.findIndex( + (message) => message.id === placeholderRandomId, + ); + if (botMessageIndex !== -1) { + updatedMessages[botMessageIndex] = { + ...updatedMessages[botMessageIndex], + content: data.message.content, + message_chain: [ + { type: 'Plain', text: data.message.content }, + ], + }; } - }, 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);