yt-chat-components 1.2.9 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "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/chatMessage/index.tsx

@@ -6,7 +6,7 @@ import remarkGfm from 'remark-gfm';
 import rehypeMathjax from 'rehype-mathjax';
 // import './index.module.css';
 import upFilePng from '../../../../assets/aicenter/upfile.png';
-import {Button, Collapse, DatePicker, Form, Image, Input, message as messageTip, Select, Skeleton} from 'antd';
+import {Button, Collapse, DatePicker, Form, Image, Input, message as messageTip, Select, Skeleton, Avatar} from 'antd';
 import React, {useRef, useState} from 'react';
 import typePdfPng from '../../../../assets/aicenter/type-pdf.png';
 import typeWordPng from '../../../../assets/aicenter/type-word.png';
@@ -30,6 +30,20 @@ const isEmpty = (o) => {
   return !o || (typeof o === 'object' && Object.keys(o).length === 0) || (typeof o === 'string' && o.trim().length === 0);
 }
 
+// 使用 for 循环生成头像图片数组
+const avatarImages = [];
+for (let i = 1; i <= 68; i++) {
+  avatarImages.push(`https://ai-file.yuntu.cn/yt-ai/system/${i}.png`);
+}
+
+// 根据name生成固定的颜色索引
+const getAvatarByName = (name: string) => {
+  const total = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const index = total % avatarImages.length;
+  const img = avatarImages[index];
+  return <Avatar shape="square" src={img} style={{marginRight: 8}}/>
+};
+
 export default function ChatMessage({
   receivingMessage,
   setReceivingMessage,
@@ -302,18 +316,22 @@ export default function ChatMessage({
 
   const renderBotTextMessage = () => {
     const items = messageItemList.map((item, index) => {
-      const {id, thinkMessage, message, type, name, toolCallInfo, rawInfo} = item;
+      const {id, thinkMessage, message, loadingMessage, type, name, toolCallInfo, rawInfo} = item;
+      const isLatest = index == messageItemList.length - 1;
       let status = 'success'
       // 只有在接收信息的时候有 pending 状态
       if (receivingMessage && isLatest){
         // 最后的信息才为 pending
-        if(messageItemList.length - 1 == index){
+        if(isLatest){
           status = 'pending'
         }
       }
 
       const resultItem: ThoughtChainItem = {
-        title: name,
+        title: <div style={{display:"flex", flexDirection: 'row', alignItems: 'center'}}>
+          {getAvatarByName(name)}
+          <span>{name}</span>
+        </div>,
         description: toolCallInfo,
         icon: getStatusIcon(status),
         status: status,
@@ -325,7 +343,7 @@ export default function ChatMessage({
               size="small"
               defaultActiveKey={'1'}
               expandIconPosition={'end'}
-              items={[{key: '1', label: renderThinkTitle(isEmpty(message)), children: <Markdown
+              items={[{key: '1', label: renderThinkTitle(isEmpty(message) && isLatest), children: <Markdown
                 className={'think markdown-body prose flex flex-col word-break-break-word'}
                 remarkPlugins={[remarkGfm]}
                 rehypePlugins={[rehypeMathjax]}
@@ -334,6 +352,7 @@ export default function ChatMessage({
                 </Markdown>}]}
             />
           }
+          {/* 有 thinkMessage 的时候没有占位符，否则赞为符输出*/}
           {
             message ? <Markdown
               key={id}
@@ -343,7 +362,7 @@ export default function ChatMessage({
               components={CustomRender}
             >
               {message}
-            </Markdown> : thinkMessage ? "" : <ChatMessagePlaceholderInThought aiStatus={"正在处理数据"} />
+            </Markdown> : thinkMessage ? "" : <ChatMessagePlaceholderInThought aiStatus={loadingMessage ? loadingMessage : "正在处理数据"} />
           }
         </div>,
         footer: <div key={id} className="msg_operateBox">
@@ -353,7 +372,7 @@ export default function ChatMessage({
       };
       return resultItem
     });
-    return <ThoughtChain items={items} />
+    return <ThoughtChain items={items} size={'small'} />
   }
 
   const renderBotFormMessage = (form_config) => {

package/src/YtChatView/chatWidget/chatWindow/controllers/index.ts

@@ -163,7 +163,7 @@ const extractAndParseJSON = (buffer, handleMessageContent) => {
             handleMessageContent(parsedJson['event'], parsedJson['data']);
             parsedData.push(parsedJson); // 添加到解析结果中
           } catch (error) {
-            console.warn('无法解析 JSON 数据:', error);
+            console.warn('无法解析 JSON 数据:', error, jsonString);
           }
 
           // 更新剩余缓冲区的起始位置

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

@@ -150,6 +150,7 @@ export default function ChatWindow({
   const [inputContainerHeight, setInputContainerHeight] = useState('50px')
   let content_id: string = null
   let content_ns: string = null
+  let event_latest: string = null
   const nowAIContentListRef = useRef(nowAIContentList)
 
   let voiceChunks = []; // 临时存储录制的语音片段
@@ -176,7 +177,7 @@ export default function ChatWindow({
     if (delayMessageList.length > 0) {
       const data = delayMessageList.shift();
       const {r_id, form_config} = data;
-      updateMessageItem("\n```form\n" + JSON.stringify(form_config) + "\n```\n")
+      updateMessageItem({chunk:"\n```form\n" + JSON.stringify(form_config) + "\n```\n"})
 
       // ?????? done
       // addMessage({
@@ -193,8 +194,8 @@ export default function ChatWindow({
     }
   }
   
-  const addMessageItem = (chunk, id, name, status = null, isThinkChunk = false) => {
-    // console.log("--- addMessageItem", chunk,  status)
+  const addMessageItem = ({chunk, id, name, status = null, isThinkChunk = false, loadingMessage = null}) => {
+    // console.log("--- addMessageItem", chunk, status, loadingMessage)
     setNowAIContentList((prevState) => {
       const content = {}
       if(isThinkChunk){
@@ -210,6 +211,7 @@ export default function ChatWindow({
         name,
         type: MessageType.text,
         toolCallInfo: status,
+        loadingMessage,
         ...content
       }
       nowAIContentListRef.current = [...prevState, messageItem]
@@ -217,8 +219,12 @@ export default function ChatWindow({
     })
   }
 
-  const updateMessageItem = (chunk, status = null, isThinkChunk = false) => {
-    // console.log("--- updateMessageItem", chunk, status)
+  const updateMessageItem = ({chunk, status = null, isThinkChunk = false, loadingMessage = null}) => {
+    // console.log("--- updateMessageItem", chunk, status, loadingMessage)
+    // chunk 和 status 都为空，则不更新
+    if(isEmpty(chunk) && isEmpty(status)){
+      return
+    }
     setNowAIContentList((prevState) => {
       const latestMessageItem = prevState[prevState.length - 1]
       const content = {}
@@ -235,6 +241,7 @@ export default function ChatWindow({
         name: latestMessageItem.name,
         type: latestMessageItem.type,
         toolCallInfo: status,
+        loadingMessage,
         ...content
       }
 
@@ -248,13 +255,13 @@ export default function ChatWindow({
 
   // 流式输出消息，实时显示（token为流式输出内容，end为结束输出，整体输出一次）
   const handleMessageContent = (event, data) => {
-    // console.log("--- event, data",event, data)
+    // console.log(`--- event = ${event}, content_ns = ${content_ns}, content_id = ${content_id}, data = `, data)
 
     if (event == 'add_message' && data['sender'] == 'Machine') {
       getHistoryList();
     }
-    else if (event == 'token') {
-      let { chunk, id, r_id, ns, name } = data
+    else if (event == 'token' || event == 't_full_token') {
+      let { chunk, id, r_id, ns, name, loading_message } = data
       if (chunk.includes('```') && !chunk.startsWith('\n')) {
         // 确保 ``` 前有换行
         chunk = '\n' + chunk;
@@ -266,14 +273,16 @@ export default function ChatWindow({
         // 如果刚才在调用工具，则追加信息
         if (content_id === 'WAIT'){
           content_id = id
-          updateMessageItem(chunk)
+          updateMessageItem({chunk, loadingMessage: loading_message || ''})
         }
         // 新建信息
         else{
           content_id = id
-          addMessageItem(chunk, id, name)
+          addMessageItem({chunk, id, name, loadingMessage: loading_message || ''})
         }
-      }else {
+      }
+      // 输出主体没有变化
+      else {
         // 如果 content_id === WAIT 表示 token 发出来之前 agent在调用工具
         // 但是调用工具的时候已经创建了信息，所以这里更新一下 content_id。这样就可以追加信息
         if(content_id === 'WAIT'){
@@ -283,9 +292,15 @@ export default function ChatWindow({
         // id切换表示一句话说完了， 新增信息
         if (content_id !== id){
           content_id = id
-          addMessageItem(chunk, id, name)
+
+          // 如果 event_latest 是 token，此刻变成了 t_full_token，表示之前都在输出占位符，所以更新信息
+          if (event_latest === 'token' && event === 't_full_token'){
+            updateMessageItem({chunk, loadingMessage: loading_message || ''})
+          } else {
+            addMessageItem({chunk, id, name, loadingMessage:loading_message})
+          }
         }else{
-          updateMessageItem(chunk)
+          updateMessageItem({chunk, loadingMessage: loading_message || ''})
         }
       }
       
@@ -294,16 +309,16 @@ export default function ChatWindow({
       }
     }
     else if (event == 't_token') {
-      let { chunk, id, r_id, ns, name } = data
+      let { chunk, id, r_id, ns, name, loading_message } = data
 
       // ns切换表示切换了智能体
       if (content_ns !== ns){
         content_ns = ns
         // 新建信息
         content_id = id
-        addMessageItem(chunk, id, name, null, true)
+        addMessageItem({chunk, id, name, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
       }else {
-        updateMessageItem(chunk, null, true)
+        updateMessageItem({chunk, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
       }
 
       if (lastMessage.current) {
@@ -312,23 +327,23 @@ export default function ChatWindow({
     }
     else if (event == 'status') {
       // 更新状态
-      const {r_id, id, ns, name, status} = data
+      const {r_id, id, ns, name, status, loading_message} = data
 
       // ns变化表示切换了智能体，表示智能体一上来就调用工具
       if (content_ns !== ns){
         content_ns = ns
         // 表示智能体连续调用工具
         if (content_id === 'WAIT') {
-          updateMessageItem("", status)
+          updateMessageItem({chunk:"", status, loadingMessage: loading_message || ''})
         }else{
           // 这个时候还没有信息的id，所以 content_id 给特殊值
           content_id = "WAIT"
-          addMessageItem("", "WAIT", name, status)
+          addMessageItem({chunk:"", id: "WAIT", name, status})
         }
       }
       // 当前智能体在调用工具
       else{
-        updateMessageItem("", status)
+        updateMessageItem({chunk:"", status, loadingMessage: loading_message || ''})
       }
 
       setAiStatus(data.status)
@@ -410,6 +425,8 @@ export default function ChatWindow({
       content_ns = null
       content_id = null
     }
+
+    event_latest = event
   };
 
   const sendMessageNoStream = (res) => {
@@ -821,7 +838,7 @@ export default function ChatWindow({
    */
   useEffect(() => {
     if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
+  }, [nowAIContentList]);
 
   /* Refocus the User input whenever a new response is returned from the LLM */
 
@@ -848,7 +865,7 @@ export default function ChatWindow({
       let current_r_id: string = null
       let current_sender: string = null
       chatHistory.forEach((data) => {
-        const {sender, sender_name, text, id, category, r_id, error} = data;
+        const {sender, sender_name, text, id, category, r_id, error, reasoning_content} = data;
         // r_id 不一样表示切换了对话轮次，则新增一个 ChatMessageType
         if(current_r_id != r_id){
           current_r_id = r_id
@@ -879,6 +896,7 @@ export default function ChatWindow({
           id: id,
           name: sender_name,
           message: text,
+          thinkMessage: reasoning_content,
           // rawInfo: data,
           type: MessageType.text,
         });

package/src/YtChatView/chatWidget/chatWindow/types/chatWidget/index.ts

@@ -9,6 +9,7 @@ export type MessageItem = {
   name: string;
   thinkMessage: string;
   message: string;
+  loadingMessage?: string;
   rawInfo?: any;
   type?: MessageType,
   toolCallInfo?: string

package/src/YtChatView/chatWidget/style.js

@@ -2459,5 +2459,20 @@ export const yt_style = `
   background: #1552FF;
   border-radius: 8px;
 }
-  `
 
+.ant-thought-chain-item-title{
+  max-height: 32px !important;
+  height: 32px !important;
+}
+
+.ant-thought-chain-item-icon{
+  margin-top: 6px !important;
+}
+
+.ant-thought-chain-item-header::before {
+  top: 6px !important;
+}
+.ant-thought-chain-item-content::before {
+    height: 55px !important;
+}
+`