yt-chat-components 1.2.9 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "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

@@ -302,12 +302,13 @@ 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'
         }
       }
@@ -325,7 +326,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 +335,7 @@ export default function ChatMessage({
                 </Markdown>}]}
             />
           }
+          {/* 有 thinkMessage 的时候没有占位符，否则赞为符输出*/}
           {
             message ? <Markdown
               key={id}
@@ -343,7 +345,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">

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,7 +219,7 @@ export default function ChatWindow({
     })
   }
 
-  const updateMessageItem = (chunk, status = null, isThinkChunk = false) => {
+  const updateMessageItem = ({chunk, status = null, isThinkChunk = false, loadingMessage = null}) => {
     // console.log("--- updateMessageItem", chunk, status)
     setNowAIContentList((prevState) => {
       const latestMessageItem = prevState[prevState.length - 1]
@@ -235,6 +237,7 @@ export default function ChatWindow({
         name: latestMessageItem.name,
         type: latestMessageItem.type,
         toolCallInfo: status,
+        loadingMessage,
         ...content
       }
 
@@ -248,13 +251,13 @@ export default function ChatWindow({
 
   // 流式输出消息，实时显示（token为流式输出内容，end为结束输出，整体输出一次）
   const handleMessageContent = (event, data) => {
-    // console.log("--- event, data",event, data)
+    console.log("--- event, data",event, 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 +269,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,27 +288,35 @@ 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})
         }
       }
       
       if (lastMessage.current) {
         lastMessage.current.scrollIntoView({ behavior: 'smooth' });
       }
+
+
     }
     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) {
@@ -319,16 +332,16 @@ export default function ChatWindow({
         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 +423,8 @@ export default function ChatWindow({
       content_ns = null
       content_id = null
     }
+
+    event_latest = event
   };
 
   const sendMessageNoStream = (res) => {

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