yt-chat-components 1.4.9 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.4.9",
+  "version": "1.5.1",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",

package/public/index.html

@@ -111,7 +111,6 @@
         host-url="https://ai-api.yuntu.cn"
         sign-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/logo.png"
         app-id="5f48c683-38d8-430e-8479-17730a605821"
-        user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'
         box-style='{"height":"100%","background":"url(https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/system/portal_bg_blue.png) center top / 100% 100% no-repeat"}'
         is-show-side-right=false
         is-show-side-left=true

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

@@ -37,7 +37,10 @@ for (let i = 1; i <= 68; i++) {
 }
 
 // 根据name生成固定的颜色索引
-const getAvatarByName = (name: string) => {
+const getAvatar = (name: string, icon: string) => {
+  if(icon){
+    return <Avatar shape="square" src={icon} style={{marginRight: 8}}/>
+  }
   const total = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
   const index = total % avatarImages.length;
   const img = avatarImages[index];
@@ -315,6 +318,35 @@ export default function ChatMessage({
           return renderLoading(MessageType.url, 50);
         }
       }
+      else if (className && className.includes('language-image')) {
+        try {
+          // 解析代码块内容为 JSON 配置
+          const data = JSON.parse(children.toString().trim().replace(/\\n/g, '').replace('\n', ''));
+          const {url} = data;
+          // 渲染组件
+          return <Image
+              height={'auto'}
+              width={'100%'}
+              src={url}
+              alt={''}
+              fallback="data:image/png;base64,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"
+          />
+        } catch (error) {
+          return renderLoading(MessageType.url, 50);
+        }
+      }
+      else if (className && className.includes('language-video')) {
+        try {
+          // 解析代码块内容为 JSON 配置
+          const data = JSON.parse(children.toString().trim().replace(/\\n/g, '').replace('\n', ''));
+          const {url} = data;
+
+          // 渲染组件
+          return <video src={url} autoPlay={true} controls={false}/>
+        } catch (error) {
+          return renderLoading(MessageType.url, 50);
+        }
+      }
       // 默认渲染其他代码块
       return <code className={className} {...props}>{children}</code>;
     },
@@ -357,7 +389,7 @@ export default function ChatMessage({
 
   const renderBotTextMessage = () => {
     const items = messageItemList.map((item, index) => {
-      const {id, thinkMessage, message, loadingMessage, type, name, toolCallInfo, rawInfo} = item;
+      const {id, thinkMessage, message, loadingMessage, type, name, icon, toolCallInfo, rawInfo} = item||{};
       const isLatestItem = index === messageItemList.length - 1;
       let status = 'success'
       // 只有在接收信息的时候有 pending 状态，最后的信息才为 pending
@@ -367,7 +399,7 @@ export default function ChatMessage({
 
       const resultItem: CustomThoughtChainItem = {
         title: <div style={{display:"flex", flexDirection: 'row', alignItems: 'center'}}>
-          {getAvatarByName(name)}
+          {getAvatar(name, icon)}
           <span>{name}</span>
         </div>,
         description: toolCallInfo,

package/src/YtChatView/chatWidget/chatWindow/index.module.css

@@ -1,8 +1,9 @@
 .w_send_file_box {
-  height: 23px;
+  height: 100%;
+  align-items: end;
+  padding-bottom: 16px;
   display: flex;
   background: transparent;
-  align-items: center;
   justify-content: center;
   border-radius: 24px;
   font-size: 12px;
@@ -178,10 +179,11 @@
  */
 
 .w_send_voice_box {
-  height: 23px;
+  height: 100%;
+  align-items: end;
+  padding-bottom: 16px;
   display: flex;
   background: transparent;
-  align-items: center;
   justify-content: center;
   border-radius: 24px;
   font-size: 12px;

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

@@ -164,7 +164,7 @@ export default function ChatWindow({
   let content_ns: string = null
   let event_latest: string = null
   const nowAIContentListRef = useRef(nowAIContentList);
-  const {registerChatMethods} = React.useContext(MethodContext);
+  const {registerChatMethods} = React.useContext(MethodContext) || {};
   let voiceChunks = []; // 临时存储录制的语音片段
   // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
   const handleScroll = () => {
@@ -206,7 +206,7 @@ export default function ChatWindow({
     }
   }
   
-  const addMessageItem = ({chunk, id, name, status = null, isThinkChunk = false, loadingMessage = null}) => {
+  const addMessageItem = ({chunk, id, name, icon = null, status = null, isThinkChunk = false, loadingMessage = null}) => {
     // console.log("--- addMessageItem", chunk, status, loadingMessage)
     setNowAIContentList((prevState) => {
       const content = {}
@@ -221,6 +221,7 @@ export default function ChatWindow({
       const messageItem : MessageItem = {
         id,
         name,
+        icon,
         type: MessageType.text,
         toolCallInfo: status,
         loadingMessage,
@@ -251,6 +252,7 @@ export default function ChatWindow({
       const newMessageItem: MessageItem = {
         id: latestMessageItem.id === 'WAIT' ? content_id : latestMessageItem.id,
         name: latestMessageItem.name,
+        icon: latestMessageItem.icon,
         type: latestMessageItem.type,
         toolCallInfo: status,
         loadingMessage,
@@ -273,7 +275,7 @@ export default function ChatWindow({
       getHistoryList();
     }
     else if (event == 'token' || event == 't_full_token') {
-      let { chunk, id, r_id, ns, name, loading_message } = data
+      let { chunk, id, r_id, ns, name, icon, loading_message } = data
       if (chunk.includes('```') && !chunk.startsWith('\n')) {
         // 确保 ``` 前有换行
         chunk = '\n' + chunk;
@@ -290,7 +292,7 @@ export default function ChatWindow({
         // 新建信息
         else{
           content_id = id
-          addMessageItem({chunk, id, name, loadingMessage: loading_message || ''})
+          addMessageItem({chunk, id, name, icon, loadingMessage: loading_message || ''})
         }
       }
       // 输出主体没有变化
@@ -309,7 +311,7 @@ export default function ChatWindow({
         //   if (event_latest === 'token' && event === 't_full_token'){
         //     updateMessageItem({chunk, loadingMessage: loading_message || ''})
         //   } else {
-        //     addMessageItem({chunk, id, name, loadingMessage:loading_message})
+        //     addMessageItem({chunk, id, name, icon, loadingMessage:loading_message})
         //   }
         // }else{
           updateMessageItem({chunk, loadingMessage: loading_message || ''})
@@ -328,7 +330,7 @@ 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, icon, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
       }else {
         updateMessageItem({chunk, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
       }
@@ -350,7 +352,7 @@ export default function ChatWindow({
         }else{
           // 这个时候还没有信息的id，所以 content_id 给特殊值
           content_id = "WAIT"
-          addMessageItem({chunk:"", id: "WAIT", name, status})
+          addMessageItem({chunk:"", id: "WAIT", name, icon, status})
         }
       }
       // 当前智能体在调用工具
@@ -957,7 +959,6 @@ export default function ChatWindow({
   }, [sessionId]);
 
   useEffect(() => {
-    console.log("registerChatMethods",registerChatMethods)
     if (registerChatMethods) {
       registerChatMethods({
         isActiveMessage,
@@ -1252,10 +1253,11 @@ export default function ChatWindow({
           <button
               style={{
                 ...(receivingMessage ? {cursor: 'pointer'} : {}),
-                padding: '0 13px',
+                height:'100%',
+                padding: '0 13px 16px',
                 background: 'transparent',
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: 'end',
                 justifyContent: 'center'
               }}
               onClick={() => {

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

@@ -8,6 +8,7 @@ export enum MessageType {
 export type MessageItem = {
   id:string,
   name: string;
+  icon: string;
   thinkMessage: string;
   message: string;
   loadingMessage?: string;

package/src/YtChatView/chatWidget/style.js

@@ -2204,10 +2204,11 @@ export const yt_style = `
 }
 
 .w_send_file_box {
-  height: 23px;
+  height: 100%;
+  align-items: end;
+  padding-bottom: 16px;
   display: flex;
   background: transparent;
-  align-items: center;
   justify-content: center;
   border-radius: 24px;
   font-size: 12px;
@@ -2441,10 +2442,11 @@ export const yt_style = `
   }
   
 .w_send_voice_box {
-  height: 23px;
+  height: 100%;
+  align-items: end;
+  padding-bottom: 16px;
   display: flex;
   background: transparent;
-  align-items: center;
   justify-content: center;
   border-radius: 24px;
   font-size: 12px;

package/src/YtChatView/previewDialogV2/index.jsx

@@ -299,7 +299,7 @@ const api_key = 'sk-mniUFDpcWwvNF3iFzssXa6etN-S_Y4AApyHYcBU44L0';
 export const MethodContext = React.createContext();
 
 export class ToolDialogV2 extends React.Component {
-
+  sessionUserInfo = {};
   state = {
     historyList: [], // 历史对话列表
     sessionId: uuidv4(), // 当前激活的对话对应的sessionId
@@ -307,17 +307,26 @@ export class ToolDialogV2 extends React.Component {
     currentFlow: {},
   };
 
+  componentWillMount() {
+    const { userInfo = {} } = this.props;
+    const { sessionId } = this.state;
+    if (isEmpty(userInfo.code)) {
+      const code = sessionId.replaceAll("-", "").slice(2);
+      this.sessionUserInfo.code = code;
+      this.sessionUserInfo.id = code;
+      this.sessionUserInfo.name = code;
+    }else{
+      this.sessionUserInfo = userInfo;
+    }
+  }
+
   async componentDidMount() {
-    this.getHistoryList({},true);
+    this.getHistoryList(true);
   }
 
   getCurrentFlowHistory=(flowId)=>{
-    let { userInfo = {} } = this.props;
     const { sessionId } = this.state;
-    if(isEmpty(userInfo.code)) {
-      userInfo.code = sessionId;
-    }
-    const operationId = userInfo['code'] || '';
+    const operationId = this.sessionUserInfo['code'] || '';
     getHistoryList(this.props.hostUrl, flowId, operationId).then((res) => {
       if(res.status === 200  && typeof res.data !== "string" && typeof res.data !== "string"){
         this.setState({ historyList: res.data });
@@ -464,7 +473,7 @@ export class ToolDialogV2 extends React.Component {
                       <div className="p_historyDialog">
                         <div className="p_historyTitle">
                           <div className="p_dialogTitle">对话列表</div>
-                          <HistoryOutlined style={{color:'#A4A4A4'}}/>
+                          <Tooltip title={isEmpty(userInfo)?'当前历史记录将会在页面刷新后清除':'历史对话记录'}><HistoryOutlined style={{color:'#A4A4A4'}}/></Tooltip>
                         </div>
                         {this.state.historyList.length > 0 ? (
                             <div className="p_historyList">
@@ -508,7 +517,7 @@ export class ToolDialogV2 extends React.Component {
                       host_url={hostUrl}
                       api_key={api_key}
                       session_id={this.state.sessionId}
-                      userInfo={userInfo}
+                      userInfo={this.sessionUserInfo}
                       getHistoryList={this.getHistoryList}
                       setDropDownList={(list) => this.setState({ dropDownList: list })}
                       dropDownList={this.state.dropDownList}