xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-02 12:05:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: no longer use typewriter in debug dialog

Browse Source
This commit is contained in:
Junyan Qin
2025-08-03 17:18:44 +08:00
parent 84129e3339
commit 48d11540ae
1 changed files with 25 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 = {
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);