diff --git a/frontend-react/src/components/ChatBox.jsx b/frontend-react/src/components/ChatBox.jsx index e9b7547..6a3196b 100644 --- a/frontend-react/src/components/ChatBox.jsx +++ b/frontend-react/src/components/ChatBox.jsx @@ -1,15 +1,116 @@ -import React from 'react'; +import React, { useState, useRef } from 'react'; const ChatBox = () => { + const [isHtmlRender, setIsHtmlRender] = useState(false); + const [isImageGen, setIsImageGen] = useState(false); + const [isDynamicTable, setIsDynamicTable] = useState(false); + const [isSettingsExpanded, setIsSettingsExpanded] = useState(false); + + const textareaRef = useRef(null); + + // 自动调整 Textarea 高度 + const adjustHeight = () => { + const textarea = textareaRef.current; + if (textarea) { + textarea.style.height = 'auto'; // 重置高度以获取正确的 scrollHeight + // 重新设置高度，限制最大高度由 CSS max-height 控制 + textarea.style.height = textarea.scrollHeight + 'px'; + } + }; + + const handleInput = () => { + adjustHeight(); + }; + + // 生成示例数据 + const generateMessages = () => { + const messages = []; + for (let i = 1; i <= 150; i++) { + const isUser = i % 2 !== 0; + messages.push({ + id: i, + role: isUser ? 'user' : 'ai', + content: isUser + ? `这是第 ${i} 条用户消息。这是一段比较长的文本，用来测试气泡的换行效果以及滚动条的表现。` + : `这是第 ${i} 条 AI 回复。包含 HTML 标签的内容。如果渲染开关开启，这里应该显示粗体字。如果不开启，应该显示原始标签。` + }); + } + return messages; + }; + + const messages = generateMessages(); + return (
+ {/* 上方：消息列表区域 */}
- {/* 消息列表占位 */} -
历史消息区域
+ + {/* 右上角：可折叠设置面板 */} +
+
setIsSettingsExpanded(!isSettingsExpanded)} + > + {isSettingsExpanded ? '▼' : '⚙'} +
+ + {isSettingsExpanded && ( +
+
+ + setIsHtmlRender(!isHtmlRender)} + /> +
+
+ + setIsImageGen(!isImageGen)} + /> +
+
+ + setIsDynamicTable(!isDynamicTable)} + /> +
+
+ )} +
+ + {/* 消息列表 */} + {messages.map((msg) => ( +
+
+ {isHtmlRender ? ( +
+ ) : ( +
{msg.content}
+ )} +
+
+ ))}
-
- {/* 输入框占位 */} - + + {/* 下方：输入框区域 */} +
+
+