yt-chat-components 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",

package/src/YtChatView/chatWidget/chatWindow/index.tsx

@@ -196,16 +196,13 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
   const [receivingMessage, setReceivingMessage] = useState(false);
   const receivingMessageRef = useRef(receivingMessage);
   const abortControllerRef = useRef(new AbortController());
-  const [fileList, setFileList] = useState<
-    { file: File; fileUrl: string; fileType: string; fileId: string, fileName: string }[]
-  >([]);
-  const scrollContainerRef = useRef(null);
+  const [fileList, setFileList] = useState<{ file: File; fileUrl: string; fileType: string; fileId: string, fileName: string }[]>([]);
+  const fileScrollContainerRef = useRef(null);
   const sessionIdRef = useRef(null);
   const [showLeftArrow, setShowLeftArrow] = useState(false); // 控制左侧箭头显示
   const [showRightArrow, setShowRightArrow] = useState(false); // 控制右侧箭头显示
   const isStream = true;//是否流式输出（手动开关）
   const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
-  const [tagList, setTagList] = useState([]); // 问题标签列表
   const {isTitleSideIcon, logoWidth, agentUrl, stopMessageUrl, sendMessageUrl, speakUrl, callUrl, smartBoyUrl, wonderBoyUrl, isHideTabSelector, customAiToldYou} = baseConfig;
   const [inputContainerHeight, setInputContainerHeight] = useState('120px')
   let content_id: string = null
@@ -216,14 +213,15 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
   let voiceChunks = []; // 临时存储录制的语音片段
   // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
   const messageContainerRef = useRef<HTMLDivElement>(null);
+  const [isUserScrolledUp, setIsUserScrolledUp] = useState(false);
 
   useImperativeHandle(ref, () => ({
     handleCallButtonClick:handleCallButtonClick
   }))
 
-  const handleScroll = () => {
-    if (scrollContainerRef.current) {
-      const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.current;
+  const handleFileScroll = () => {
+    if (fileScrollContainerRef.current) {
+      const { scrollLeft, clientWidth, scrollWidth } = fileScrollContainerRef.current;
 
       // 判断内容是否超出容器
       const isContentOverflowed = scrollWidth > clientWidth;
@@ -236,6 +234,50 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
     }
   };
 
+  /**
+   * 监听用户滚动标志，一旦出现滚动事件就会执行判断
+   * 若处于底部且之前激活向上滚动，则使向上滚动标志失效
+   * 若不处于底部且未向上滚动，则激活向上滚动标志
+   * */
+  useEffect(() => {
+    const container = messageContainerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10; // <= 更稳妥
+
+      if (!isAtBottom && !isUserScrolledUp) {
+        setIsUserScrolledUp(true);
+      } else if (isAtBottom && isUserScrolledUp) {
+        setIsUserScrolledUp(false);
+      }
+    };
+
+    container.addEventListener('scroll', handleScroll);
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [isUserScrolledUp]);
+
+
+  /**
+   * 判断是否需要滚动到底部
+   * */
+  const judgeToScrollEnd = (isForce) => {
+    const container = messageContainerRef.current;
+    if (!container) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+      const isCurrentlyAtBottom = scrollHeight - scrollTop - clientHeight < 120; //
+    if (isForce) {
+      container.scrollTop = scrollHeight;
+      setIsUserScrolledUp(false); // 强制滚动后认为用户在底部
+      return;
+    }
+    if (isCurrentlyAtBottom) {
+      container.scrollTop = scrollHeight;
+    }
+  };
+
   // 处理延时队列，因为后端返回的是 token token form token token.....会导致form渲染在token前面，所以用这个方式
   // 当处理token的时候，form的信息放到这里，然后使用 delayMessageTimer 处理这个延时队列
   // 处理逻辑是：收到 token 的时候，重置timer，由于timer一直被重置所以不会处理 delayMessageList，直到 1.5内没有新 token 才会处理延时队列
@@ -372,7 +414,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
       }
       
       if (lastMessage.current) {
-        lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+        setTimeout(()=>judgeToScrollEnd(),100)
       }
     }
     else if (event == 't_token') {
@@ -389,7 +431,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
       }
 
       if (lastMessage.current) {
-        lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+        setTimeout(()=>judgeToScrollEnd(),100)
       }
     }
     else if (event == 'status') {
@@ -627,7 +669,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
         });
       }
       setFileList([]);
-      handleScroll();
+      handleFileScroll();
       sendMessage(
         input_value_type,
         embedAppExtend,
@@ -711,7 +753,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
     setTimeout(() => {
       if (lastMessage.current) {
         console.error('开始滚动最后一条消息到可视区域')
-        lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+        judgeToScrollEnd();
       }
     }, 600);
   };
@@ -721,9 +763,9 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
    * @param file File 对象
    */
   const getFileType = (file) => {
-    if (!(file instanceof File)) {
-      throw new Error('Input must be a File object');
-    }
+    // if (!(file instanceof File)) {
+    //   throw new Error('Input must be a File object');
+    // }
 
     const mimeType = file.type;
 
@@ -787,7 +829,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
         .then(res => {
       setFileList(fileList.filter((item, i) => i !== index));
     })
-    handleScroll();
+    handleFileScroll();
   };
 
   /**
@@ -862,7 +904,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
                             : item
                     )
                 );
-                handleScroll();
+                handleFileScroll();
               })
               .catch((e) => {
                 setFileList((prevFileList) =>
@@ -889,12 +931,12 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
   // 向右滚动方法
   const handleScrollRight = (direction) => {
     if (direction == 'right') {
-      if (scrollContainerRef.current) {
-        scrollContainerRef.current.scrollLeft += 200;
+      if (fileScrollContainerRef.current) {
+        fileScrollContainerRef.current.scrollLeft += 200;
       }
     } else if (direction == 'left') {
-      if (scrollContainerRef.current) {
-        scrollContainerRef.current.scrollLeft -= 200;
+      if (fileScrollContainerRef.current) {
+        fileScrollContainerRef.current.scrollLeft -= 200;
       }
     }
   };
@@ -1006,21 +1048,12 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
   };
 
   /**
-   * 输出消息时，滚动到底部
-   */
-  useEffect(() => {
-    if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
-  }, [nowAIContentList]);
-
-  /* Refocus the User input whenever a new response is returned from the LLM */
-
+   * 当前对话历史消息发生变化时，强制滚动到底部
+   * */
   useEffect(() => {
-    // after a slight delay
-    setTagList(tags);
-    setTimeout(() => {
-      // inputRef.current?.focus();
-    }, 100);
-  }, [messages, open, tags]);
+    judgeToScrollEnd(true);
+    setIsUserScrolledUp(false);
+  }, [messages]);
 
   const fetchChatHistory = async () => {
     try {
@@ -1063,14 +1096,22 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
         }
 
         // 处理最后的 ChatMessageType
-        let latestMessage: ChatMessageType= finalChatHistoryList[finalChatHistoryList.length - 1]
+        let latestMessage: ChatMessageType= finalChatHistoryList[finalChatHistoryList.length - 1];
         latestMessage.messageItemList.push({
           id: id,
           name: sender_name,
           message: text,
           thinkMessage: reasoning_content,
           // rawInfo: data,
-          rawInfo: {files: files},
+          rawInfo: {
+            files: files.map((fileItem) => ({
+              fileUrl: fileItem.url,
+              name: fileItem.name,
+              size: fileItem.size,
+              fileType: getFileType(fileItem)
+            }))
+          },
+
           type: MessageType.text,
         });
 
@@ -1337,7 +1378,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
     }
 
     const inputNode = <div style={input_container_style} className="cl-input_container">
-      <div className="w_file_preview" ref={scrollContainerRef} onScroll={handleScroll}>
+      <div className="w_file_preview" ref={fileScrollContainerRef} onScroll={handleFileScroll}>
         <div className="w_toLeftBox" style={{display: showLeftArrow ? 'flex' : 'none'}}>
           <div className="w_toLeft" onClick={() => handleScrollRight('left')}>
             <img src={toLeftPng}/>
@@ -1506,7 +1547,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
                   abortControllerRef.current.abort('disconnect');
                   abortControllerRef.current = new AbortController();
                 } else {
-                  handleSendMessage()
+                  handleSendMessage();
                 }
               }}
           >
@@ -1527,55 +1568,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
     }
     return (
         <>
-          <div
-              className="w_tagListClass"
-              style={isMobile ?
-                  {
-                    display: tagList?.length > 0 ? '' : 'none',
-                    zIndex: tagList?.length > 0 ? '2' : '-1',
-                    maxWidth: 'calc(100vw - 3.2rem - 24px)',
-                    flexWrap: "nowrap",
-                    overflowX: "auto",
-                    WebkitOverflowScrolling: 'touch',
-                    scrollbarWidth: "none",
-                    overflowY: "hidden",
-                    background: 'transparent',
-                    padding: '8px 0 8px 0',
-                    marginLeft: 10,
-                  } : {
-                    // bottom: fileList.length > 0 ? '130px' : '80px',
-                    display: tagList?.length > 0 ? '' : 'none',
-                    zIndex: tagList?.length > 0 ? '2' : '-1',
-                  }}
-          >
-            {
-              tagList.map((item, index) => (
-                  <div
-                      key={index}
-                      className="w_tagItemBox"
-                      onClick={() => {
-                        if (receivingMessage) {
-                          return
-                        }
-                        handleSendMessage(item?.name);
-                        setFileList([]);
-                      }}
-                  >
-                    <div>
-                      <img
-                          style={item?.img ? {} : {display: 'none'}}
-                          src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/' + item?.img}
-                          className="w_tagImgh"
-                          alt="Image"
-                      />
-                    </div>
-                    <div className="w_tagItemText"
-                         style={isMobile ? {wordBreak: "keep-all", whiteSpace: "nowrap",} : {}}>{item?.name}</div>
-                  </div>
-              ))
-            }
-            {inputNode}
-          </div>
+
         </>
     )
   }