yt-chat-components 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "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,
@@ -314,7 +328,10 @@ export default function ChatMessage({
       }
 
       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,
@@ -355,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

@@ -83,6 +83,8 @@ export default function ChatWindow({
   modalWidth,
   isMobile = false,
   isShowChatHeader = true,
+  tipTitle,
+  tipContent,
 }: {
   is_enable_call:boolean;
   tags: [];
@@ -127,6 +129,8 @@ export default function ChatWindow({
   modalWidth: number;
   isMobile: boolean;
   isShowChatHeader: boolean;
+  tipTitle?: string;
+  tipContent?: string;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const lastMessage = useRef<HTMLDivElement>(null);
@@ -195,7 +199,7 @@ export default function ChatWindow({
   }
   
   const addMessageItem = ({chunk, id, name, status = null, isThinkChunk = false, loadingMessage = null}) => {
-    // console.log("--- addMessageItem", chunk,  status, loadingMessage)
+    // console.log("--- addMessageItem", chunk, status, loadingMessage)
     setNowAIContentList((prevState) => {
       const content = {}
       if(isThinkChunk){
@@ -220,7 +224,11 @@ export default function ChatWindow({
   }
 
   const updateMessageItem = ({chunk, status = null, isThinkChunk = false, loadingMessage = null}) => {
-    // console.log("--- updateMessageItem", chunk, status)
+    // console.log("--- updateMessageItem", chunk, status, loadingMessage)
+    // chunk 和 status 都为空，则不更新
+    if(isEmpty(chunk) && isEmpty(status)){
+      return
+    }
     setNowAIContentList((prevState) => {
       const latestMessageItem = prevState[prevState.length - 1]
       const content = {}
@@ -251,7 +259,7 @@ 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();
@@ -269,12 +277,12 @@ export default function ChatWindow({
         // 如果刚才在调用工具，则追加信息
         if (content_id === 'WAIT'){
           content_id = id
-          updateMessageItem({chunk, loadingMessage: loading_message})
+          updateMessageItem({chunk, loadingMessage: loading_message || ''})
         }
         // 新建信息
         else{
           content_id = id
-          addMessageItem({chunk, id, name, loadingMessage:loading_message})
+          addMessageItem({chunk, id, name, loadingMessage: loading_message || ''})
         }
       }
       // 输出主体没有变化
@@ -291,20 +299,18 @@ export default function ChatWindow({
 
           // 如果 event_latest 是 token，此刻变成了 t_full_token，表示之前都在输出占位符，所以更新信息
           if (event_latest === 'token' && event === 't_full_token'){
-            updateMessageItem({chunk, loadingMessage: loading_message})
+            updateMessageItem({chunk, loadingMessage: loading_message || ''})
           } else {
             addMessageItem({chunk, id, name, loadingMessage:loading_message})
           }
         }else{
-          updateMessageItem({chunk, loadingMessage: loading_message})
+          updateMessageItem({chunk, loadingMessage: loading_message || ''})
         }
       }
       
       if (lastMessage.current) {
         lastMessage.current.scrollIntoView({ behavior: 'smooth' });
       }
-
-
     }
     else if (event == 't_token') {
       let { chunk, id, r_id, ns, name, loading_message } = data
@@ -314,9 +320,9 @@ export default function ChatWindow({
         content_ns = ns
         // 新建信息
         content_id = id
-        addMessageItem({chunk, id, name, status:null, isThinkChunk:true, loadingMessage: loading_message})
+        addMessageItem({chunk, id, name, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
       }else {
-        updateMessageItem({chunk, status:null, isThinkChunk:true, loadingMessage: loading_message})
+        updateMessageItem({chunk, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
       }
 
       if (lastMessage.current) {
@@ -325,14 +331,14 @@ 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({chunk:"", status, loadingMessage: loading_message})
+          updateMessageItem({chunk:"", status, loadingMessage: loading_message || ''})
         }else{
           // 这个时候还没有信息的id，所以 content_id 给特殊值
           content_id = "WAIT"
@@ -341,7 +347,7 @@ export default function ChatWindow({
       }
       // 当前智能体在调用工具
       else{
-        updateMessageItem({chunk:"", status, loadingMessage: loading_message})
+        updateMessageItem({chunk:"", status, loadingMessage: loading_message || ''})
       }
 
       setAiStatus(data.status)
@@ -836,7 +842,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 */
 
@@ -863,7 +869,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
@@ -894,6 +900,7 @@ export default function ChatWindow({
           id: id,
           name: sender_name,
           message: text,
+          thinkMessage: reasoning_content,
           // rawInfo: data,
           type: MessageType.text,
         });
@@ -945,7 +952,10 @@ export default function ChatWindow({
       return (
           <div className={'cl-tips-wrapper'}>
             <img className="drop-man-img" src={dropManUrl}/>
-            <div className="drop-down-title"><strong>Hi，</strong><br/><strong>欢迎使用{window_title}!</strong><br/><div style={{fontSize:'14px'}}>您可以这样问我:</div></div>
+            <div className="drop-down-title">
+              <strong>Hi，</strong><br/><strong>{tipTitle || `欢迎使用${window_title}!`}</strong><br/>
+              <div style={{fontSize:'14px'}}>{tipTitle || `您可以这样问我:`}</div>
+            </div>
             <div className={'cl-drop-down-mobile'}>
               <div className="drop-down-list-mobile">
                 {dropDownList.map(({backgroundImg, title}) => (
@@ -976,7 +986,7 @@ export default function ChatWindow({
       if (isEmpty(dropManUrl)){
         return (
             <div className='cl-drop-down'>
-              <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
+              <div className="drop-down-title">Hi，{tipTitle || `欢迎使用${window_title}`}，{tipContent || '您可以这样问我:'}</div>
               <div className="drop-down-list">
                 {dropDownList.map(({backgroundImg, title}) => (
                     <div className="drop-down-item-card" key={title}>
@@ -1010,7 +1020,7 @@ export default function ChatWindow({
             <div className={judgeDropClass()}>
               <img className="drop-man-img" src={dropManUrl}/>
               <div className='cl-drop-down'>
-                <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
+                <div className="drop-down-title">Hi，{tipTitle || `欢迎使用${window_title}`}，{tipContent || '您可以这样问我:'}</div>
                 <div className="drop-down-list">
                   {dropDownList.map(({backgroundImg, title}) => (
                       <div

package/src/YtChatView/chatWidget/index.tsx

@@ -45,6 +45,8 @@ export default function ChatWidget({
   modalWidth,
   isMobile = false,
   isShowChatHeader = true,
+  tipTitle,
+  tipContent,
 }: {
   is_enable_call:boolean,
   tags: [];
@@ -85,6 +87,8 @@ export default function ChatWidget({
   modalWidth: number;
   isMobile: boolean;
   isShowChatHeader: boolean;
+  tipTitle: string,
+  tipContent: string,
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -157,6 +161,8 @@ export default function ChatWidget({
         modalWidth={modalWidth}
         isMobile={isMobile}
         isShowChatHeader={isShowChatHeader}
+        tipTitle={tipTitle}
+        tipContent={tipContent}
       />
     </div>
   );

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;
+}
+`

package/src/YtChatView/mobileChat/index.jsx

@@ -382,8 +382,6 @@ export class MobileChatPage extends React.Component {
 
   setWindowTitle = (title) => {
     if (!isEmpty(title)){
-      document.title = 'AI校园智多星';
-      window.document.title = 'AI校园智多星';
     }
   }
 
@@ -499,6 +497,8 @@ export class MobileChatPage extends React.Component {
       isLogin = false,
       isShowLogin = false,
       loginBtnClick,
+      tipTitle,
+      tipContent
     } = this.props;
     const { sceneInfo, currentFlow = {} } = this.state;
     const { flows = [], name: sceneName, character } = sceneInfo;
@@ -771,6 +771,8 @@ export class MobileChatPage extends React.Component {
                   modalWidth={modalWidth}
                   isMobile={true}
                   isShowChatHeader={false}
+                  tipTitle={tipTitle}
+                  tipContent={tipContent}
               />
             </div>
             {