yt-chat-components 1.5.4 → 1.5.5

package/package.json

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

@@ -23,6 +23,7 @@ import ChatMessagePlaceholder, {ChatMessagePlaceholderInThought} from "../chatPl
 import {UrlCard} from "./urlCard"
 import {CustomThoughtChainItem, CustomThoughtChainProps} from "./CustomThoughtChain";
 import CustomThoughtChain from "./CustomThoughtChain";
+import {isFunction} from "lodash";
 let speechSynth = window.speechSynthesis;
 let utterance = null;
 
@@ -60,7 +61,8 @@ export default function ChatMessage({
   handleSendMessage,
   isLatest,
   key,
-  isShowReadIcon
+  isShowReadIcon,
+  renderInitNode,
 }: ChatMessageType) {
   const parseFileName = (
     text: string,
@@ -167,6 +169,16 @@ export default function ChatMessage({
     }
   }
 
+  const getMessageClassSuffix = () => {
+    if (isFunction(renderInitNode)) {
+      return 'cl-justify-init'
+    }
+    if (isSend) {
+      return 'cl-justify-end';
+    }
+    return 'cl-justify-start';
+  }
+
   const renderUserMessage = () => {
     return (
         <div key={key} style={user_message_style} className="msg_userMessageBox">
@@ -224,6 +236,10 @@ export default function ChatMessage({
     )
   }
 
+  const renderInitMessage = () => {
+    return renderInitNode()
+  }
+
   const renderErrorMessage = () => {
     return (
         <div key={key} style={error_message_style} className={'cl-error_message'}>
@@ -668,6 +684,9 @@ export default function ChatMessage({
   // }
 
   const render = () => {
+    if (isFunction(renderInitNode)) {
+      return renderInitMessage()
+    }
     if (isSend){
       return renderUserMessage()
     }else {
@@ -680,7 +699,7 @@ export default function ChatMessage({
   }
 
   return (
-    <div className={'cl-chat-message ' + (isSend ? ' cl-justify-end' : ' cl-justify-start')}>
+    <div className={'cl-chat-message ' + getMessageClassSuffix()}>
       {
         render()
       }

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

@@ -28,6 +28,7 @@ import {Image, message as messageTip, Tooltip, Typography} from 'antd';
 import {isEmpty, isFunction} from 'lodash';
 import btn_answer from '../../../assets/aicenter/btn_answer.png';
 import {MethodContext} from "../../previewDialogV2";
+import TabSelector from "../../components/TabSelector";
 
 
 let mediaRecorder = null; // 语音对象,用于录音
@@ -89,6 +90,8 @@ export default function ChatWindow({
   isShowReadIcon,
   renderCustomDropDown,
   isTagsHidden,
+  isEnableForV1,
+  questions,
 }: {
   is_enable_call:boolean;
   tags: [];
@@ -138,6 +141,8 @@ export default function ChatWindow({
   isShowReadIcon?:boolean;
   renderCustomDropDown?: Function;
   isTagsHidden?: boolean;
+  isEnableForV1?: boolean;
+  questions?: any[];
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const lastMessage = useRef<HTMLDivElement>(null);
@@ -949,7 +954,30 @@ export default function ChatWindow({
 
       finalChatHistoryList.forEach((item) => {
         addMessage(item)
-      })
+      });
+      if (!isEnableForV1 && !isEmpty(questions)) {
+        addMessage({
+          messageItemList: [],
+          renderInitNode: () => <div style={{minHeight: '365px', width: '100%'}}>
+            {
+                !isEmpty(finalChatHistoryList) && <div style={{display: 'flex', justifyContent: 'center'}}>
+                  <div style={{width: '36px', height: '1px', border: '1px dashed rgb(192, 194, 197)'}}></div>
+                  <div style={{color:'rgb(192, 194, 197)'}}> 以上是历史消息 </div>
+                  <div style={{width: '36px', height: '1px', border: '1px dashed rgb(192, 194, 197)'}}></div>
+                </div>
+            }
+            <TabSelector
+                welcomeWords={`Hi，欢迎使用${window_title}，您可以这样问我:`}
+                handleRowClick={(word) => {
+                  handleSendMessage(word)
+                }}
+                dataList={questions}
+            />
+          </div>,
+          isSend: false,
+          error: false,
+        });
+      }
     } catch (error) {
       console.error("Failed to fetch chat history:", error);
     }
@@ -958,15 +986,18 @@ export default function ChatWindow({
    * 当获取历史记录时（sessindId变化时），清空消息，并添加历史记录
    */
   useEffect(() => {
-    sessionIdRef.current = sessionId;
-    fetchChatHistory().then();
+    // 新组件需要等待预置库信息加载完全来载入初始对话引导，旧组件不用
+    if (!isEnableForV1 && !isEmpty(questions) || isEnableForV1) {
+      sessionIdRef.current = sessionId;
+      fetchChatHistory().then();
 
-    return () => {
-      abortControllerRef.current.abort('disconnect');
-      // abortControllerRef是一次性的，中止之后要初始化，否则fetch请求会被中止导致请求无响应
-      abortControllerRef.current = new AbortController();
-    };
-  }, [sessionId]);
+      return () => {
+        abortControllerRef.current.abort('disconnect');
+        // abortControllerRef是一次性的，中止之后要初始化，否则fetch请求会被中止导致请求无响应
+        abortControllerRef.current = new AbortController();
+      };
+    }
+  }, [sessionId, questions]);
 
   useEffect(() => {
     if (registerChatMethods) {
@@ -1354,7 +1385,6 @@ export default function ChatWindow({
         </>
     )
   }
-
   return (
       <div
           style={{...chat_window_style, width: width, height: "100%"}}
@@ -1378,7 +1408,10 @@ export default function ChatWindow({
                 }}
             />
             :
-            <div className="cl-middle-container">
+            <div
+                className="cl-middle-container"
+                style={isEnableForV1 ? {paddingLeft: '1.6rem', paddingRight: '1.6rem'} : {}}
+            >
               <div className="cl-header" style={isMobile ? {
                 position: 'absolute',
                 top: 20,
@@ -1423,6 +1456,7 @@ export default function ChatWindow({
                           error={message.error}
                           handleSendMessage={handleSendMessage}
                           isShowReadIcon={isShowReadIcon}
+                          renderInitNode={message.renderInitNode}
                       />
                   ))
                 }

package/src/YtChatView/chatWidget/index.tsx

@@ -52,6 +52,8 @@ export default function ChatWidget({
   isShowReadIcon,
   renderCustomDropDown,
   isTagsHidden,
+  isEnableForV1 = true,
+  questions
 }: {
   is_enable_call:boolean,
   tags: [];
@@ -97,6 +99,8 @@ export default function ChatWidget({
   isShowReadIcon: boolean,
   renderCustomDropDown: Function,
   isTagsHidden: boolean;
+  isEnableForV1: boolean;
+  questions: any[];
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -172,6 +176,8 @@ export default function ChatWidget({
         isShowReadIcon={isShowReadIcon}
         renderCustomDropDown={renderCustomDropDown}
         isTagsHidden={isTagsHidden}
+        isEnableForV1={isEnableForV1}
+        questions={questions}
       />
     </div>
   );

package/src/YtChatView/chatWidget/style.js

@@ -657,7 +657,7 @@ margin-bottom:1rem;
   --tw-bg-opacity: 1;
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 0.5rem;
+  // padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -710,6 +710,11 @@ margin-bottom:1rem;
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+.cl-justify-init {
+    justify-content: flex-start;
+    padding-top:0;
+}
+
 .cl-justify-start {
   justify-content: flex-start;
 }

package/src/YtChatView/components/TabSelector/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Tabs, Button, Typography, ConfigProvider } from 'antd';
 import { LeftOutlined, RightOutlined, SyncOutlined } from '@ant-design/icons';
 import styles from './index.module.css';
@@ -6,18 +6,8 @@ import styles from './index.module.css';
 const middleImgUrl = 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/guessYourWant.png';
 const bottomImgUrl = 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/byz/xinge.png';
 
-const defaultMap = {
-    '学校文化': ['学校最有特色的传统是什么？', '有哪些值得传承的校训？', '学校重视学生个性发展吗？', '有什么知名校友吗？', '新生入学是否有迎新活动？', '学校支持学生创业吗？', '学校节日有哪些特色？', '学校的学习氛围怎么样？', '学生组织有哪些？', '是否有艺术或文化类社团？'],
-    '校园风景': ['校园内有哪些打卡景点？', '校园绿化做得好吗？', '有湖泊或花园吗？', '有特色建筑吗？', '校园大不大？适合散步吗？', '有哪些适合拍照的地方？', '有室外自习空间吗？', '校园晚上灯光如何？', '有没有露天表演广场？', '有樱花或银杏树吗？'],
-    '招生流程': ['什么时候开始填志愿？', '招生简章在哪查看？', '是否有预估分数线？', '如何获取往年录取线？', '能否跨省报考？', '有哪些专项招生计划？', '报志愿前可参观校园吗？', '有无强基计划？', '是否有面试环节？', '报名后多久公布录取？'],
-    '住宿生活': ['几人一间宿舍？', '宿舍有空调吗？', '洗衣机是否自助？', '有独立卫生间吗？', '能否申请调换宿舍？', '有晚归门禁吗？', '网络信号好吗？', '有宿舍文化活动吗？', '宿舍能使用电器吗？', '有快递柜或驿站吗？'],
-    '餐饮服务': ['食堂饭菜贵不贵？', '食堂口味多样吗？', '有无清真窗口？', '学校周边吃饭方便吗？', '是否支持刷脸就餐？', '饭卡能否线上充值？', '有没有饮品店？', '食堂有无特色菜？', '吃饭时间是否固定？', '是否有外卖平台？'],
-    '教学资源': ['师资力量如何？', '有外教课程吗？', '是否提供选修课？', '教材是否统一购买？', '有开放实验室吗？', '是否配有学习中心？', '有哪些在线课程平台？', '图书馆开放时间？', '能否跨专业听课？', '有无名师公开课？'],
-    '就业实习': ['是否提供实习机会？', '就业指导服务如何？', '有哪些合作企业？', '实习是否计入学分？', '就业率有多高？', '毕业生去向有哪些？', '能否推荐实习单位？', '是否有职业规划课？', '能考研继续深造吗？', '就业双选会多不多？'],
-};
-
 const TabSelector = ({ customUrl, handleRowClick, welcomeWords, isSimple, dataList = [] }) => {
-    const [activeKey, setActiveKey] = useState(dataList[0]?.category);
+    const [activeKey, setActiveKey] = useState();
     const [valuePage, setValuePage] = useState(0);
     const [tabLocation, setTabLocation] = useState(0);
     const valuesPerPage = 5; // Number of values to show per page
@@ -27,6 +17,11 @@ const TabSelector = ({ customUrl, handleRowClick, welcomeWords, isSimple, dataLi
     const keys = dataList.map(e=>e.category)||[];
     const values = dataList.filter(e => activeKey === e.category).map(e => e.data)[0] || [];
     const visibleValues = isSimple ? values : values.slice(valuePage * valuesPerPage, (valuePage + 1) * valuesPerPage);
+
+    useEffect(() => {
+        setActiveKey(dataList[0]?.category)
+    }, [dataList]);
+
     const handleTabChange = (key) => {
         setActiveKey(key);
         setValuePage(0); // Reset value page when changing tabs
@@ -138,7 +133,7 @@ const TabSelector = ({ customUrl, handleRowClick, welcomeWords, isSimple, dataLi
                             return (<div className={styles.row} key={index} onClick={() => handleRowClick(item.q)}>
                                 <Typography.Paragraph
                                     className={styles.text}
-                                    style={{ maxWidth: isSimple ? '210px' : '300px' }}
+                                    style={{ maxWidth: isSimple ? '190px' : '300px' }}
                                     ellipsis={{ rows: 1, tooltip: `${item.q}`, }}>
                                     {isSimple && <span style={{ marginRight: '12px' }}>·</span>}
                                     {item.q}

package/src/YtChatView/components/TabSelector/index.module.css

@@ -1,6 +1,6 @@
 .mainContainer {
     flex: 1;
-    height: calc(100% - 220px);
+    overflow-y: auto;
     .welcome {
         background: #FFFFFF;
         border-radius: 8px 8px 8px 0px;
@@ -97,7 +97,7 @@
 
     .valueList {
         padding: 10px;
-        min-height: 200px;
+        min-height: 225px;
         font-size: 16px;
         color: #000000;
         overflow-y: auto;

package/src/YtChatView/previewDialogV2/index.jsx

@@ -23,7 +23,7 @@ const CommentIcon = (props) => (
     <Icon component={commentSvg} {...props} />
 );
 
-const knowledgeInfo = {
+export const knowledgeInfo = {
   media: [
     {
       a: "https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png",
@@ -328,7 +328,7 @@ export class ToolDialogV2 extends React.Component {
     sessionId: uuidv4(), // 当前激活的对话对应的sessionId
     dropDownList: [],
     currentFlow: {},
-    knowledgeInfo: {...knowledgeInfo},
+    knowledgeInfo: {},
   };
 
   componentWillMount() {
@@ -383,6 +383,8 @@ export class ToolDialogV2 extends React.Component {
             this.setState({ knowledgeInfo: res.data })
           } else if ( !isEmpty(this.props.knowledgeInfo)) {
             this.setState({ knowledgeInfo: this.props.knowledgeInfo })
+          } else {
+            this.setState({ knowledgeInfo: knowledgeInfo })
           }
         }
       }).catch(e => {
@@ -435,6 +437,7 @@ export class ToolDialogV2 extends React.Component {
   }
 
   renderCustomDropDown=(dropDownList)=>{
+    return null;
     const { title } = this.props;
     const { currentFlow } = this.state;
     return <TabSelector
@@ -571,6 +574,8 @@ export class ToolDialogV2 extends React.Component {
                       renderCustomDropDown={this.renderCustomDropDown}
                       isTagsHidden={true}
                       placeholder={'请输入您想咨询的问题'}
+                      isEnableForV1={false}
+                      questions={this.state.knowledgeInfo?.question || []}
                   />
                   </MethodContext.Provider>
                 </div>