Browse Source

fix: 修复聊天框高度闪烁

王晓东 1 month ago
parent
commit
8e71961b57

+ 10 - 10
src/components/chat-message/MarkdownParser.tsx

@@ -151,12 +151,12 @@ const renderListItems = (items: ListItem[], level: number) => {
     // 渲染子列表
     const renderChildLists = () => {
       if (!item.children || item.children.length === 0) return null;
-      
+
       return item.children.map((childLevel, childIndex) => {
         const childListKey = getStableKey(`child-list-${childLevel.type}-${childIndex}`, index);
         return (
-          <View 
-            key={childListKey} 
+          <View
+            key={childListKey}
             className={`markdown-list markdown-${childLevel.type} depth-${childLevel.depth}`}
           >
             {renderListItems(childLevel.items, level + 1)}
@@ -184,14 +184,14 @@ const MarkdownParser = ({ content }: MarkdownParserProps) => {
     let inCodeBlock = false;
     let currentCodeBlock = '';
     let codeLang = '';
-    
+
     // 列表栈:管理嵌套列表层级(栈顶为当前层级)
     const listStack: ListLevel[] = [];
 
     // 刷新当前列表(将栈中所有列表弹出并嵌套组装)
     const flushLists = () => {
       if (listStack.length === 0) return;
-      
+
       // 从顶层渲染列表
       listStack.forEach((level, index) => {
         const listKey = getStableKey(`list-${level.type}-${level.depth}-${index}`);
@@ -201,7 +201,7 @@ const MarkdownParser = ({ content }: MarkdownParserProps) => {
           </View>
         );
       });
-      
+
       // 清空栈
       listStack.length = 0;
     };
@@ -264,9 +264,9 @@ const MarkdownParser = ({ content }: MarkdownParserProps) => {
       if (listMatch) {
         const depth = getIndentDepth(line); // 当前列表项的缩进深度
         // 提取文本内容(移除列表标记)
-        const text = line.replace(/^\s*([-*+]|\d+\.)\s+/, ''); 
+        const text = line.replace(/^\s*([-*+]|\d+\.)\s+/, '');
         const itemKey = getStableKey(`list-item-${text}`, lineIndex);
-        
+
         // 创建新列表项
         const newItem: ListItem = {
           content: <RichText nodes={parseInlineToNodes(text)} />,
@@ -353,10 +353,10 @@ const MarkdownParser = ({ content }: MarkdownParserProps) => {
   }, [content]);
 
   return (
-    <View className="markdown-viewer">
+    <View className="markdown-viewer" user-select>
       {parsedElements}
     </View>
   );
 };
 
-export default MarkdownParser;
+export default MarkdownParser;

+ 3 - 1
src/pages/agent/index.tsx

@@ -136,9 +136,11 @@ export default function Index() {
     console.log(111)
   }, [])
 
+  const navBarText = agentEdit?.agentId ? '编辑智能体' : '创建智能体'
+
   return (
     <PageCustom>
-      <NavBarNormal  onNavBack={handleNavBack}>编辑智能体</NavBarNormal>
+      <NavBarNormal  onNavBack={handleNavBack}>{navBarText}</NavBarNormal>
       <View className="px-16 w-full flex flex-col gap-20">
         <View className={style.tabContainer}
         style={{

+ 2 - 1
src/pages/chat/components/InputBar/TextInputBar.tsx

@@ -42,7 +42,8 @@ export default ({disabled, onIconClick, onSend}:Props) => {
       <WemetaTextarea
       	adjustPosition={false}
         disabled={disabled}
-        style={{'borderRadius': '10px', maxHeight: '120px', 'lineHeight': '24px'}}
+        // 必须添加 height 与 maxHeight 否则在初始化时高度会先 maxheight 再跳回到 lineHeight,导致闪烁和 高度计算错误
+        style={{'borderRadius': '10px', maxHeight: '120px', 'lineHeight': '24px', 'height': '24px'}}
         autoHeight
         placeholder="有问题尽管问我..."
         value={value}

+ 14 - 13
src/pages/chat/components/InputBar/useChatInput.ts

@@ -30,7 +30,7 @@ export const useChatInput = ({
 }: Props) => {
   let myMsgUk = "";
   let mySessionId = "";
-  
+
   // 聊天框 store
   const {
     pushRobotMessage,
@@ -47,8 +47,8 @@ export const useChatInput = ({
     setScrollTop,
     setAutoScroll,
   } = useTextChat();
-  
-  
+
+
 
   // 聊天框内消息定时上报
   const { startTimedMessage, stopTimedMessage } =
@@ -72,14 +72,14 @@ export const useChatInput = ({
     setMessageStopHandle(null)
   }
 
-  
+
   // 聊天
   const chatWithGpt = async (
     message: string,
     sessionId: string,
     msgUk: string
   ) => {
-    
+
     if (!agent?.agentId) {
       return;
     }
@@ -99,7 +99,7 @@ export const useChatInput = ({
     let currentRobotMsgUk = "";
     await delay(300);
     setDisabled?.(true);
-    
+
     const submitMyMessageSuccess = await sendMyMessageToServer({
       agentId: agent.agentId,
       message,
@@ -107,15 +107,15 @@ export const useChatInput = ({
       msgUk,
       sessionId
     })
-    
+
     // todo: 如果自己发送的消息失败了,需要显示错误信息提示用户?
     if (!submitMyMessageSuccess) {
       setReacting(false)
       setDisabled?.(false);
       return;
     }
-    
-    
+
+
 
     let isFirstChunk = true;
     console.log('==== start new chat ====')
@@ -222,7 +222,7 @@ export const useChatInput = ({
         if(!enableOutputAudioStream){
           enableUserInput()
         }
-        
+
         stopTimedMessage();
         if (!agent.agentId) {
           return;
@@ -266,7 +266,7 @@ export const useChatInput = ({
             sessionId
           );
         }
-        
+
       },
       onError: () => {
         setDisabled?.(false);
@@ -283,7 +283,7 @@ export const useChatInput = ({
     if(!message.length){
       console.log('empty message')
       myMsgUk && deleteMessage(myMsgUk);
-      return 
+      return
     }
     updateMessage(message, myMsgUk);
     chatWithGpt(message, mySessionId, myMsgUk);
@@ -298,6 +298,7 @@ export const useChatInput = ({
   const handleBeforeSend = () => {
     console.log('bubble started')
     const { sessionId, msgUk } = pushMessage("");
+    setQuestions([]);
     console.log('bubble end')
     myMsgUk = msgUk;
     mySessionId = sessionId;
@@ -327,7 +328,7 @@ export const useChatInput = ({
       }
     }
   }, [enableOutputAudioStream]);
-  
+
   // 清理
   useEffect(() => {
     console.log('chat input ')

+ 3 - 3
src/pages/chat/hooks/useChatUI.tsx

@@ -24,7 +24,7 @@ export const useChatUI = (
   const [showWelcome, setShowWelcome] = useState(!historyListLength);
   const [inputContainerHeight, setInputContainerHeight] = useState(0);
   // const scrollTop = useTextChat((state)=> state.scrollTop)
-  
+
   const bottomSafeHeight = useAppStore((state) => state.bottomSafeHeight);
 
   // 判断是否有背景
@@ -98,10 +98,10 @@ export const useChatUI = (
     haveBg,
     inputContainerHeight,
     inputContainerBottomOffset,
-    
+
     // 设置方法
     setShowWelcome,
-    
+
     // 工具方法
     getBgContent,
     createNavLeftRenderer,

+ 1 - 8
src/pages/chat/index.tsx

@@ -83,7 +83,7 @@ export default function Index() {
   const [isVoice, setIsVoice] = useState(false);
   const [disabled, setDisabled] = useState(false);
 
-  const { destroy, genSessionId, clearList } = useTextChat();
+  const { destroy, genSessionId } = useTextChat();
 
   // 统一的聊天输入逻辑 - 只在主组件中实例化一次
   const chatInputActions = useChatInput({
@@ -95,13 +95,6 @@ export default function Index() {
     historyList,
   });
 
-  // 页面显示时刷新数据
-  useDidShow(() => {
-    // 需要清掉当前已经进行的聊天
-    // clearList();
-  });
-
-
 
   // 首次进入聊天生成 session id
   useEffect(() => {

+ 6 - 5
src/styles/markdown.less

@@ -1,5 +1,6 @@
 // Markdown 解析器主样式
 .markdown-viewer {
+  user-select: text;
   font-size: 14px;
   // 标题样式
   .markdown-h1,
@@ -178,22 +179,22 @@
 .markdown-list {
   margin: 2px 0;
   padding-left: 12px;
-  
+
   &.depth-0 { padding-left: 12px;  padding-bottom: 12px;}
   &.depth-1 { padding-left: 24px; }
   &.depth-2 { padding-left: 36px; }
   &.depth-3 { padding-left: 48px; }
-  
+
   // &.markdown-ul {
   //   list-style-type: disc;
-    
+
   //   &.depth-1 { list-style-type: circle; }
   //   &.depth-2 { list-style-type: square; }
   // }
-  
+
   // &.markdown-ol {
   //   list-style-type: decimal;
-    
+
   //   &.depth-1 { list-style-type: lower-alpha; }
   //   &.depth-2 { list-style-type: lower-roman; }
   // }