yt-chat-components 1.2.8 → 1.3.0

package/package.json

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

@@ -6,8 +6,8 @@ import remarkGfm from 'remark-gfm';
 import rehypeMathjax from 'rehype-mathjax';
 // import './index.module.css';
 import upFilePng from '../../../../assets/aicenter/upfile.png';
-import {Form, Image, Input, message as messageTip, Select, DatePicker, Button, Spin, Skeleton} from 'antd';
-import React, {useState, useRef} from 'react';
+import {Button, Collapse, DatePicker, Form, Image, Input, message as messageTip, Select, Skeleton} from 'antd';
+import React, {useRef, useState} from 'react';
 import typePdfPng from '../../../../assets/aicenter/type-pdf.png';
 import typeWordPng from '../../../../assets/aicenter/type-word.png';
 import typeExcelPng from '../../../../assets/aicenter/type-excel.png';
@@ -18,13 +18,18 @@ import typeRPubPng from '../../../../assets/aicenter/type-rpub.png';
 import playPng from '../../../../assets/aicenter/play.png';
 import playRunGif from '../../../../assets/aicenter/play-run.gif';
 import copyPng from '../../../../assets/aicenter/copy.png';
-import { ThoughtChain } from '@ant-design/x';
-import type { ThoughtChainProps, ThoughtChainItem } from '@ant-design/x';
-import { CheckCircleOutlined, MoreOutlined, InfoCircleOutlined, LoadingOutlined, EllipsisOutlined } from '@ant-design/icons';
+import type {ThoughtChainItem} from '@ant-design/x';
+import {ThoughtChain} from '@ant-design/x';
+import {CheckCircleOutlined, EllipsisOutlined, InfoCircleOutlined, ClockCircleOutlined} from '@ant-design/icons';
+import ChatMessagePlaceholder, {ChatMessagePlaceholderInThought} from "../chatPlaceholder";
 
 let speechSynth = window.speechSynthesis;
 let utterance = null;
 
+const isEmpty = (o) => {
+  return !o || (typeof o === 'object' && Object.keys(o).length === 0) || (typeof o === 'string' && o.trim().length === 0);
+}
+
 export default function ChatMessage({
   receivingMessage,
   setReceivingMessage,
@@ -219,7 +224,7 @@ export default function ChatMessage({
         >
           {
             // 其他类型暂不处理
-            type == MessageType.echart && (
+            (type == MessageType.echart || type == MessageType.form) && (
               <Skeleton.Image active={true} style={{width: '100%', height: '100%'}}/>
             )
           }
@@ -261,7 +266,7 @@ export default function ChatMessage({
           // 渲染 form 组件
           return renderBotFormMessage(form_config);
         } catch (error) {
-          return renderLoading(MessageType.echart, 300);
+          return renderLoading(MessageType.form, 300);
         }
       }
       // 默认渲染其他代码块
@@ -281,14 +286,29 @@ export default function ChatMessage({
     }
   }
 
+  const renderThinkTitle = (isThinking) => {
+    return <div style={{display: 'flex', alignItems: 'center', color: '#989898', fontSize: 14}}>
+      {
+        isThinking ? [
+          <ClockCircleOutlined style={{color: '#82b6dd'}}/>,
+          <span style={{marginLeft: 8}}>正在深度思考</span>
+        ] : [
+          <CheckCircleOutlined style={{color: '#8add82'}} />,
+          <span style={{marginLeft: 8}}>已完成深度思考</span>
+        ]
+      }
+    </div>
+  }
+
   const renderBotTextMessage = () => {
     const items = messageItemList.map((item, index) => {
-      const {id, 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'
         }
       }
@@ -298,15 +318,36 @@ export default function ChatMessage({
         description: toolCallInfo,
         icon: getStatusIcon(status),
         status: status,
-        content: <Markdown
-            key={id}
-            className={'markdown-body prose flex flex-col word-break-break-word'}
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={[rehypeMathjax]}
-            components={CustomRender}
-        >
-          {message}
-        </Markdown>,
+        content: <div style={{display:"flex", flexDirection: 'column'}}>
+          {
+            thinkMessage && <Collapse
+              bordered={false}
+              style={{marginBottom: 15, color: '#989898'}}
+              size="small"
+              defaultActiveKey={'1'}
+              expandIconPosition={'end'}
+              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]}
+                >
+                  {thinkMessage}
+                </Markdown>}]}
+            />
+          }
+          {/* 有 thinkMessage 的时候没有占位符，否则赞为符输出*/}
+          {
+            message ? <Markdown
+              key={id}
+              className={'markdown-body prose flex flex-col word-break-break-word'}
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeMathjax]}
+              components={CustomRender}
+            >
+              {message}
+            </Markdown> : thinkMessage ? "" : <ChatMessagePlaceholderInThought aiStatus={loadingMessage ? loadingMessage : "正在处理数据"} />
+          }
+        </div>,
         footer: <div key={id} className="msg_operateBox">
           <img src={isPlay ? playRunGif : playPng} onClick={() => playVoice(message)} />
           <img src={copyPng} onClick={() => copyText(message)} />

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

@@ -21,3 +21,22 @@ export default function ChatMessagePlaceholder({
     </div>
   );
 }
+
+export function ChatMessagePlaceholderInThought({
+                                                  aiStatus
+                                               }: ChatMessagePlaceholderType) {
+    return (
+        <div
+            className="cl-chat-message-in-thought cl-justify-start"
+        >
+            <div className={"cl-bot_message-in-thought"}>
+                <div className="cl-animate-pulse">
+                    <div className="plh_textBox">
+                        <div className="plh_text">{aiStatus ? aiStatus : "深度思考中"}</div>
+                        <MoreHorizontal />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

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,32 +194,51 @@ export default function ChatWindow({
     }
   }
   
-  const addMessageItem = (chunk, id, name, status = null) => {
-    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){
+        content["thinkMessage"] = chunk
+        content["message"] = ""
+      }else {
+        content["thinkMessage"] = ""
+        content["message"] = chunk
+      }
+
       const messageItem : MessageItem = {
         id,
         name,
-        message: chunk,
         type: MessageType.text,
         toolCallInfo: status,
+        loadingMessage,
+        ...content
       }
       nowAIContentListRef.current = [...prevState, messageItem]
       return [...prevState, messageItem]
     })
   }
 
-  const updateMessageItem = (chunk, status = null) => {
-    console.log("--- updateMessageItem", chunk, status)
+  const updateMessageItem = ({chunk, status = null, isThinkChunk = false, loadingMessage = null}) => {
+    // console.log("--- updateMessageItem", chunk, status)
     setNowAIContentList((prevState) => {
       const latestMessageItem = prevState[prevState.length - 1]
+      const content = {}
+      if(isThinkChunk){
+        content["thinkMessage"] = latestMessageItem.thinkMessage + chunk
+        content["message"] = latestMessageItem.message
+      }else {
+        content["thinkMessage"] = latestMessageItem.thinkMessage
+        content["message"] = latestMessageItem.message + chunk
+      }
 
       const newMessageItem: MessageItem = {
         id: latestMessageItem.id === 'WAIT' ? content_id : latestMessageItem.id,
         name: latestMessageItem.name,
-        message: latestMessageItem.message + chunk,
         type: latestMessageItem.type,
         toolCallInfo: status,
+        loadingMessage,
+        ...content
       }
 
       const newState = [...prevState]
@@ -228,17 +248,16 @@ export default function ChatWindow({
       return newState
     })
   }
-  
 
   // 流式输出消息，实时显示（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;
@@ -250,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'){
@@ -267,19 +288,40 @@ 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 == 'form') {
-      // 这里添加到延时队列，直接处理可能会把form渲染到token上面
-      delayMessageList.push(data)
+    else if (event == 't_token') {
+      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, status:null, isThinkChunk:true, loadingMessage: loading_message})
+      }else {
+        updateMessageItem({chunk, status:null, isThinkChunk:true, loadingMessage: loading_message})
+      }
+
+      if (lastMessage.current) {
+        lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+      }
     }
     else if (event == 'status') {
       // 更新状态
@@ -288,17 +330,26 @@ export default function ChatWindow({
       // ns变化表示切换了智能体，表示智能体一上来就调用工具
       if (content_ns !== ns){
         content_ns = ns
-        // 这个时候还没有信息的id，所以 content_id 给特殊值
-        content_id = "WAIT"
-        addMessageItem("", "WAIT", name, status)
+        // 表示智能体连续调用工具
+        if (content_id === 'WAIT') {
+          updateMessageItem({chunk:"", status, loadingMessage: loading_message})
+        }else{
+          // 这个时候还没有信息的id，所以 content_id 给特殊值
+          content_id = "WAIT"
+          addMessageItem({chunk:"", id: "WAIT", name, status})
+        }
       }
       // 当前智能体在调用工具
       else{
-        updateMessageItem("", status)
+        updateMessageItem({chunk:"", status, loadingMessage: loading_message})
       }
 
       setAiStatus(data.status)
     }
+    else if (event == 'form') {
+      // 这里添加到延时队列，直接处理可能会把form渲染到token上面
+      delayMessageList.push(data)
+    }
     else if (event == 'end') {
       // const res = {
       //   data: data['result'],
@@ -372,6 +423,8 @@ export default function ChatWindow({
       content_ns = null
       content_id = null
     }
+
+    event_latest = event
   };
 
   const sendMessageNoStream = (res) => {
@@ -999,7 +1052,7 @@ export default function ChatWindow({
     if(messages.length > 0){
       const { messageItemList } = messages[messages.length - 1]
       const latestMessageItem = messageItemList[messageItemList.length - 1]
-      isRender = !latestMessageItem.message.includes("```form")
+      isRender = !(latestMessageItem.message || "").includes("```form")
     }
 
     if(!isRender){

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

@@ -1,13 +1,15 @@
 export enum MessageType {
   text,
-  form,
+  form, // 目前只用于渲染loading
   echart // 目前只用于渲染loading
 }
 
 export type MessageItem = {
   id:string,
   name: string;
+  thinkMessage: string;
   message: string;
+  loadingMessage?: string;
   rawInfo?: any;
   type?: MessageType,
   toolCallInfo?: string