yt-chat-components 1.2.8 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "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,9 +286,23 @@ 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, type, name, toolCallInfo, rawInfo} = item;
       let status = 'success'
       // 只有在接收信息的时候有 pending 状态
       if (receivingMessage && isLatest){
@@ -298,15 +317,35 @@ 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)), children: <Markdown
+                className={'think markdown-body prose flex flex-col word-break-break-word'}
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeMathjax]}
+                >
+                  {thinkMessage}
+                </Markdown>}]}
+            />
+          }
+          {
+            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={"正在处理数据"} />
+          }
+        </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

@@ -193,32 +193,49 @@ 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) => {
+    // console.log("--- addMessageItem", chunk,  status)
     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,
+        ...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) => {
+    // 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,
+        ...content
       }
 
       const newState = [...prevState]
@@ -228,7 +245,6 @@ export default function ChatWindow({
       return newState
     })
   }
-  
 
   // 流式输出消息，实时显示（token为流式输出内容，end为结束输出，整体输出一次）
   const handleMessageContent = (event, data) => {
@@ -277,9 +293,22 @@ export default function ChatWindow({
         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 } = data
+
+      // ns切换表示切换了智能体
+      if (content_ns !== ns){
+        content_ns = ns
+        // 新建信息
+        content_id = id
+        addMessageItem(chunk, id, name, null, true)
+      }else {
+        updateMessageItem(chunk, null, true)
+      }
+
+      if (lastMessage.current) {
+        lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+      }
     }
     else if (event == 'status') {
       // 更新状态
@@ -288,9 +317,14 @@ 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("", status)
+        }else{
+          // 这个时候还没有信息的id，所以 content_id 给特殊值
+          content_id = "WAIT"
+          addMessageItem("", "WAIT", name, status)
+        }
       }
       // 当前智能体在调用工具
       else{
@@ -299,6 +333,10 @@ export default function ChatWindow({
 
       setAiStatus(data.status)
     }
+    else if (event == 'form') {
+      // 这里添加到延时队列，直接处理可能会把form渲染到token上面
+      delayMessageList.push(data)
+    }
     else if (event == 'end') {
       // const res = {
       //   data: data['result'],
@@ -999,7 +1037,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,12 +1,13 @@
 export enum MessageType {
   text,
-  form,
+  form, // 目前只用于渲染loading
   echart // 目前只用于渲染loading
 }
 
 export type MessageItem = {
   id:string,
   name: string;
+  thinkMessage: string;
   message: string;
   rawInfo?: any;
   type?: MessageType,