yt-chat-components 1.0.0 → 1.0.2

package/src/YtChatView/previewDialog/index.jsx

@@ -1,600 +1,600 @@
-import React from 'react';
-import ChatWidget from '../chatWidget/index';
-import aiAvatarPng from '../../assets/aicenter/aiavatar.png';
-import historyPng from '../../assets/aicenter/history.png';
-import closePng from '../../assets/aicenter/close.png';
-import { getFlowInfo, getHistoryList, getSceneInfo } from '../chatWidget/chatWindow/controllers/index';
-import './index.module.css'
-import { v4 as uuidv4 } from 'uuid';
-import historyListEmptyPng from '../../assets/aicenter/history-list-empty.png';
-import addPng from '../../assets/aicenter/add.png';
-import {isEmpty, isFunction} from "lodash";
-import { Button, message as messageTip, Progress, Skeleton } from 'antd'
-import { CloseOutlined } from "@ant-design/icons";
-import moreAi from '../../assets/aicenter/moreAi.png';
-import moreBg from '../../assets/aicenter/moreBg.png';
-import self_knowledge from '../../assets/aicenter/self_knowledge.png';
-import self_skills from '../../assets/aicenter/self_skills.png';
-
-
-const style=`
-.p_closeImg {
-  width: 14px;
-  cursor: pointer;
-}
-
-.p_toolDialog {
-  display: flex;
-  height:100%;
-  background:url('https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_modal_bg.png');
-  background-size: cover;
-  border-radius:8px;
-}
-
-.p_toolDialog .p_toolLeft {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 300px;
-  padding: 1.7rem 1.6rem 1.7rem 1.6rem;
-  
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-}
-
-.p_toolDialog .p_toolLeft .p_toolLogo {
-  user-select: none;
-  display: flex;
-  align-items: center;
-}
-
-.p_toolDialog .p_toolLeft .p_toolLogo .p_logoImg {
-  width: 48px;
-}
-
-.p_toolDialog .p_toolLeft .p_toolLogo .p_logoText {
-  font-weight: bold;
-  margin-left: 10px;
-  font-size: 30px;
-  background: linear-gradient(to right, #1551FF, #8F4BFF);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog {
-  user-select: none;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-radius: 10px;
-  flex: 1;
-  width: 100%;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
-  border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
-  backdrop-filter: blur(10px);
-  position: relative;
-  max-height:calc(100% - 5.5rem - 60px);
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog ::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-  background: #535353 !important;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle {
-  padding: 1.3rem 16px 0 16px;
-  display: flex;
-  align-items: center;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_historyImg {
-  width: 25px;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_dialogTitle {
-  margin-left: 10px;
-  font-weight: 500;
-  font-size: 18px;
-  color: #333333;
-  line-height: 16px;
-  text-align: left;
-  font-style: normal;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyListEmpty {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  font-size: 12px;
-  color: #999999;
-  max-height: calc(100% - 3rem);
-
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList {
-  height: calc(100% - 3rem);
-  margin-top: 10px;
-  overflow-y: auto;
-  scrollbar-width: none !important; /* firefox */
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList::-webkit-scrollbar{
-  display:none;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList:hover {
-  scrollbar-width: thin !important; /* firefox */
-  scrollbar-color: #ced4e3 transparent;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem {
-  padding: 7px 16px;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_activeHistoryName {
-  color: #1552FF !important;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_historyName {
-  color: #333333;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_historyName:hover {
-  color: #171717;
-}
-
-.p_toolDialog .p_toolRight {
-  flex: 1;
-}
-
-.p_toolRightToRight {
-  width:300px;
-  display:flex;
-  flex-direction:column;
-  padding:2rem 1.6rem 1.8rem 1.6rem
-}
-.rightInnerContainer{
-  height:calc(100% - 80px);
-  flex:1;
-  display:flex;
-  flex-direction:column;
-  justify-content: space-between;
-}
-.p_toolRightToRight .rightSideTitle{
-  margin-bottom:1.4rem;
-  margin-top:10px;
-  margin-top:0;
-  font-size:18px;
-  font-weight:500;
-  display:flex;
-  align-items: center;
-}
-.p_toolRightToRight .rightSideTitle img{
-  margin-right:4px;
-}
-
-.p_toolRightToRight .rightSideTitle .titleSideColumn{
-  color:#1551FF;
-}
-
-.p_toolRightToRight .rightSkillContainer{
-  min-height:40%;
-}
-.p_toolRightToRight .rightSkillContainer .rightSkillList{
-  display: flex;
-  flex-wrap: wrap;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-}
-.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem{
-  text-align: center;
-  cursor:pointer;
-  width:30%;
-}
-.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem img{
-  width: 40px;
-  height: 40px;
-  border-radius:10px;
-}
-.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem  p{
-  margin-top:0px;
-  margin-bottom:4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #333333;
-}
-.p_toolRightToRight .rightKnowledgeTitle{
-  nargin-top: 2.2rem;
-  margin-bottom: 1.4rem;
-  font-size:18px;
-  font-weight:500;
-  display:flex;
-  align-items: center;
-}
-
-.p_toolRightToRight .rightKnowledgeTitle img{
-  margin-right:4px;
-}
-
-.p_toolRightToRight .rightKnowledgeContainer{
-  position:relative;
-}
-.p_toolRightToRight .rightMoreButton{
-  background: url(${moreAi});
-  background-size: 85% auto;
-  background-repeat: no-repeat;
-  background-position: bottom;
-  position: absolute;
-  bottom: 8px;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-}
-.p_toolRightToRight .rightMoreButton div{
-  width:calc(100% - 50px);
-  padding: 16px 16px 10px 20px;
-  font-weight: 500;
-  color: #ffffff;
-  line-height: 17px;
-  font-size: 12px;
-  cursor:pointer;
-}
-
-.p_newDialog {
-  width: 252px;
-  height: 40px;
-  min-height:40px;
-  background: linear-gradient( 45deg, #1551FF 0%, #8F4BFF 100%);
-  margin-top: 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.p_newDialog img {
-  width: 18px;
-}
-
-.p_newDialog .p_newDialogText {
-  color: #fff;
-  margin-left: 6px;
-}
-`
-
-const defaultList = [
-  {
-    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-01.png',
-    title: '我这学期的课程安排是什么样？',
-  },
-  {
-    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-02.png',
-    title: '我上个学期的成绩是多少？',
-  },
-  {
-    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-03.png',
-    title: '哪里可以找到心理咨询服务？',
-  },
-];
-
-const formatFileSize = (bytes) => {
-  // 如果字节数为0，直接返回
-  if(isEmpty(bytes)) {
-    return { formattedSize: 0, unit: 'B' };
-  }
-  if(bytes === 0) return { formattedSize: 0, unit: 'B' };
-
-  // 定义单位和对应的字节数（1024进制）
-  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
-  // 计算合适的单位索引
-  const index = Math.floor(Math.log(bytes) / Math.log(1024));
-  // 将字节数转换为目标单位
-  const size = bytes / Math.pow(1024, index);
-  // 保留两位小数，并去除多余的0
-  const formattedSize = size.toFixed(2).replace(/\.?0+$/, '');
-  return { formattedSize, unit: units[index] }
-}
-
-
-const api_key = 'sk-mniUFDpcWwvNF3iFzssXa6etN-S_Y4AApyHYcBU44L0';
-
-
-export class ToolDialog extends React.Component {
-  state = {
-    historyList: [], // 历史对话列表
-    sessionId: uuidv4(), // 当前激活的对话对应的sessionId
-    dropDownList: [],
-    sceneInfo: {},
-    currentFlow: {},
-  };
-
-  async componentDidMount() {
-    if(isEmpty(this.props.sceneId)){
-      //  兼容非场景打开的情况
-      this.getHistoryList({},true);
-    }else{
-      const sceneData = await this.getSceneInfo();
-      if(isEmpty(sceneData)) {
-        this.getHistoryList({},true);
-      } else {
-        this.getHistoryList(sceneData,true);
-      }
-    }
-  }
-
-  getCurrentFlowHistory=(flowId)=>{
-    let { userInfo = {} } = this.props;
-    const { sessionId } = this.state;
-    if(isEmpty(userInfo.code)) {
-      userInfo.code = sessionId;
-    }
-    const operationId = userInfo['code'] || '';
-    getHistoryList(this.props.hostUrl, flowId, operationId).then((res) => {
-      if(res.status === 200){
-        this.setState({ historyList: res.data });
-      }
-    });
-  }
-
-  // 获取历史对话列表
-  getHistoryList = (sceneData, isRefreshWords) => {
-    const { sceneId, appId: flowId, isShowSideLeft } = this.props;
-      if(isEmpty(sceneId)){
-        //  单独组件情况
-        if(isRefreshWords){
-          this.getFlowInfo().then(currentFlow=>{
-            const dropDownList = this.getDropDownList(currentFlow?.welcome_words||[]);
-            this.setState({ dropDownList, currentFlow })
-          })
-        }
-        if(isShowSideLeft) {
-          this.getCurrentFlowHistory(flowId)
-        }
-      }else{
-        const currentScene = sceneData||this.state.sceneInfo;
-        const currentFlow = currentScene.flows[0];
-        const dropDownList = this.getDropDownList(currentFlow?.welcome_words||[]);
-        if(!isEmpty(sceneData)){
-          this.setState({ currentFlow, dropDownList })
-        }else if(isEmpty(this.state.sceneInfo)){
-          this.setState({ dropDownList:defaultList })
-        }
-        if(isShowSideLeft) {
-          this.getCurrentFlowHistory(currentFlow.id)
-        }
-      }
-  };
-
-  getSceneInfo = async ()=>{
-   const res = await getSceneInfo(this.props.hostUrl, this.props.sceneId, api_key);
-    if(res.status === 200){
-      this.setState({ sceneInfo: res.data });
-    }
-    return res.data;
-  }
-
-  getFlowInfo = async () => {
-    const res = await getFlowInfo(this.props.hostUrl, this.props.appId, api_key);
-    if(res.status === 200) {
-      this.setState({ sceneInfo: res.data });
-    }
-    return res.data;
-  }
-
-  // 新建对话
-  newDialog = () => {
-    if(this.state.dropDownList) {
-      messageTip.info("当前已是最新对话")
-      return;
-    }
-    this.setState({ sessionId: uuidv4() });
-    this.setState({ dropDownList: this.getDropDownList(this.state.currentFlow?.welcome_words||[]) })
-  }
-
-  updateSessionId = (sessionId) => {
-    this.setState({ sessionId });
-  };
-
-  getDropDownList = (welcome_words)=>{
-    if(isEmpty(welcome_words)){
-      return defaultList;
-    }
-   return  welcome_words.slice(0,3).map((question,index)=>(
-        {
-          backgroundImg:defaultList[index].backgroundImg,
-          title:question,
-        }
-    ))
-  }
-
-  render() {
-    const {
-      title,
-      appId: flowId,
-      hostUrl,
-      setDialogVisible,
-      userInfo,
-      boxStyle,
-      isShowSideRight,
-      isShowSideLeft = true,
-      tags = [],
-      agentUrl = aiAvatarPng,
-      agentName = '校园智多星',
-      logoWidth = '42px',
-      logoFontSize = '26px',
-      isTitleSideIcon = false,//  是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
-      modalIndex,
-      isShowUploadButton,
-      dropManUrl,
-      modalWidth
-    } = this.props;
-    const { sceneInfo, currentFlow = {} } = this.state;
-    const { flows = [], name: sceneName, character } = sceneInfo;
-    return (
-        <div style={boxStyle}>
-          <style dangerouslySetInnerHTML={{ __html: style }}></style>
-          <div style={{ position: 'absolute', top: '18px', right: '18px', zIndex: modalIndex }}>
-            {isFunction(setDialogVisible) &&
-            <img onClick={() => setDialogVisible(false)} className="p_closeImg" src={closePng}/>}
-          </div>
-          <div className="p_toolDialog">
-            {
-              isShowSideLeft && <div className="p_toolLeft">
-                <div className="p_toolLogo">
-                  <img className="p_logoImg" style={{ width: logoWidth, borderRadius: 15 }} src={agentUrl}/>
-                  <div className="p_logoText" style={{ fontSize: logoFontSize }}>{agentName}</div>
-                </div>
-                <div className="p_historyDialog">
-                  <div className="p_historyTitle">
-                    <img className="p_historyImg" src={historyPng}/>
-                    <div className="p_dialogTitle">对话列表</div>
-                  </div>
-                  {this.state.historyList.length > 0 ? (
-                      <div className="p_historyList">
-                        {this.state.historyList?.map((item) => (
-                            <div
-                                key={item.session_id}
-                                className="p_historyItem"
-                                onClick={() => {
-                                  this.setState({ dropDownList: undefined })
-                                  this.updateSessionId(item.session_id);
-                                }}
-                            >
-                              <div
-                                  className={`p_historyName ${
-                                      item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''
-                                  }`}
-                              >
-                                {item.text}
-                              </div>
-                            </div>
-                        ))}
-                      </div>
-                  ) : (
-                      <div className="p_historyListEmpty">
-                        <img src={historyListEmptyPng}/>
-                        <div className="p_historyListEmptyText">暂无对话记录</div>
-                      </div>
-                  )}
-                </div>
-                <div className="p_newDialog" onClick={() => {
-                  this.newDialog()
-                }}>
-                  <img src={addPng}/>
-                  <div className="p_newDialogText">新建对话</div>
-                </div>
-              </div>
-            }
-            <div className="p_toolRight">
-              <ChatWidget
-                  window_title={currentFlow?.name || title}
-                  flow_id={currentFlow?.id || flowId}
-                  tags={currentFlow?.keywords || tags}
-                  host_url={hostUrl}
-                  api_key={api_key}
-                  session_id={this.state.sessionId}
-                  userInfo={userInfo}
-                  getHistoryList={this.getHistoryList}
-                  setDropDownList={(list) => this.setState({ dropDownList: list })}
-                  dropDownList={this.state.dropDownList}
-                  baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
-                  isShowUploadButton={isShowUploadButton}
-                  dropManUrl={character || dropManUrl}
-                  modalWidth={modalWidth}
-              />
-            </div>
-            {
-              isShowSideRight &&
-              <div className={"p_toolRightToRight"}>
-                <div className={"rightInnerContainer"}>
-                  <div>
-                    <h3 className={"rightSideTitle"}>
-                      <img width={15} src={self_skills}/>
-                      <span style={{ color: "#333333" }}>专项技能</span>
-                    </h3>
-                    {
-                      isEmpty(flows) ?
-                          <Skeleton
-                              title={false}
-                              active
-                              paragraph={{ rows: 5, width: '100%' }}
-                          />
-                          :
-                          <div className={"rightSkillContainer"}>
-                            <div className={"rightSkillList"}>
-                              {flows.slice(0, 12).map((item) => (
-                                  <div className={"rightSkillItem"} key={item.id} onClick={() => {
-                                    //  右侧点击一个技能，更新sessionId，切换当前flow信息，重新查询历史记录
-                                    this.setState({
-                                      sessionId: uuidv4(),
-                                      currentFlow: item,
-                                      dropDownList: this.getDropDownList(item?.welcome_words||[])
-                                    });
-                                    this.getCurrentFlowHistory(item.id);
-                                  }}>
-                                    <img
-                                        src={item.icon}
-                                        alt={item.name}/>
-                                    <p>{item.name}</p>
-                                  </div>
-                              ))}
-                            </div>
-                          </div>
-                    }
-                  </div>
-                  <div>
-                    <h3 className={"rightKnowledgeTitle"}>
-                      <img width={15} src={self_knowledge}/>
-                      <span style={{ color: "#333333" }}>个人知识库</span>
-                    </h3>
-                    {
-                      isEmpty(currentFlow) ?
-                          <Skeleton
-                              title={false}
-                              active
-                              paragraph={{ rows: 5, width: '100%' }}
-                          /> :
-                          <div className={"rightKnowledgeContainer"}>
-                            <img src={moreBg}/>
-                            <div style={{ position: 'absolute', top: '40px', left: '16px' }}>
-                              <div>文件总数<span style={{
-                                padding: 8,
-                                fontSize: '20px',
-                                fontWeight: 700
-                              }}>{currentFlow.k_count || 0}</span>个
-                              </div>
-                              <div style={{ marginTop: 10 }}>文件总量<span style={{
-                                padding: 8,
-                                fontSize: '20px',
-                                fontWeight: 700
-                              }}>{formatFileSize(currentFlow.k_size).formattedSize}</span>{formatFileSize(currentFlow.k_size).unit}
-                              </div>
-                            </div>
-                            <div className={"rightMoreButton"}>
-                              <div className={"rightMoreTitle"} onClick={() => messageTip.info("敬请期待")}>训练你的专属知识库</div>
-                            </div>
-                          </div>
-                    }
-                  </div>
-                </div>
-              </div>
-            }
-          </div>
-        </div>
-    );
-  }
-}
-
-export default ToolDialog;
+import React from 'react';
+import ChatWidget from '../chatWidget/index';
+import aiAvatarPng from '../../assets/aicenter/aiavatar.png';
+import historyPng from '../../assets/aicenter/history.png';
+import closePng from '../../assets/aicenter/close.png';
+import { getFlowInfo, getHistoryList, getSceneInfo } from '../chatWidget/chatWindow/controllers/index';
+import './index.module.css'
+import { v4 as uuidv4 } from 'uuid';
+import historyListEmptyPng from '../../assets/aicenter/history-list-empty.png';
+import addPng from '../../assets/aicenter/add.png';
+import {isEmpty, isFunction} from "lodash";
+import { Button, message as messageTip, Progress, Skeleton } from 'antd'
+import { CloseOutlined } from "@ant-design/icons";
+import moreAi from '../../assets/aicenter/moreAi.png';
+import moreBg from '../../assets/aicenter/moreBg.png';
+import self_knowledge from '../../assets/aicenter/self_knowledge.png';
+import self_skills from '../../assets/aicenter/self_skills.png';
+
+
+const style=`
+.p_closeImg {
+  width: 14px;
+  cursor: pointer;
+}
+
+.p_toolDialog {
+  display: flex;
+  height:100%;
+  background:url('https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_modal_bg.png');
+  background-size: cover;
+  border-radius:8px;
+}
+
+.p_toolDialog .p_toolLeft {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  padding: 1.7rem 1.6rem 1.7rem 1.6rem;
+  
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.p_toolDialog .p_toolLeft .p_toolLogo {
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
+.p_toolDialog .p_toolLeft .p_toolLogo .p_logoImg {
+  width: 48px;
+}
+
+.p_toolDialog .p_toolLeft .p_toolLogo .p_logoText {
+  font-weight: bold;
+  margin-left: 10px;
+  font-size: 30px;
+  background: linear-gradient(to right, #1551FF, #8F4BFF);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog {
+  user-select: none;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  flex: 1;
+  width: 100%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+  border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
+  backdrop-filter: blur(10px);
+  position: relative;
+  max-height:calc(100% - 5.5rem - 60px);
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: #535353 !important;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle {
+  padding: 1.3rem 16px 0 16px;
+  display: flex;
+  align-items: center;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_historyImg {
+  width: 25px;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_dialogTitle {
+  margin-left: 10px;
+  font-weight: 500;
+  font-size: 18px;
+  color: #333333;
+  line-height: 16px;
+  text-align: left;
+  font-style: normal;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyListEmpty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-size: 12px;
+  color: #999999;
+  max-height: calc(100% - 3rem);
+
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList {
+  height: calc(100% - 3rem);
+  margin-top: 10px;
+  overflow-y: auto;
+  scrollbar-width: none !important; /* firefox */
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList::-webkit-scrollbar{
+  display:none;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList:hover {
+  scrollbar-width: thin !important; /* firefox */
+  scrollbar-color: #ced4e3 transparent;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem {
+  padding: 7px 16px;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_activeHistoryName {
+  color: #1552FF !important;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_historyName {
+  color: #333333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_historyName:hover {
+  color: #171717;
+}
+
+.p_toolDialog .p_toolRight {
+  flex: 1;
+}
+
+.p_toolRightToRight {
+  width:300px;
+  display:flex;
+  flex-direction:column;
+  padding:2rem 1.6rem 1.8rem 1.6rem
+}
+.rightInnerContainer{
+  height:calc(100% - 80px);
+  flex:1;
+  display:flex;
+  flex-direction:column;
+  justify-content: space-between;
+}
+.p_toolRightToRight .rightSideTitle{
+  margin-bottom:1.4rem;
+  margin-top:10px;
+  margin-top:0;
+  font-size:18px;
+  font-weight:500;
+  display:flex;
+  align-items: center;
+}
+.p_toolRightToRight .rightSideTitle img{
+  margin-right:4px;
+}
+
+.p_toolRightToRight .rightSideTitle .titleSideColumn{
+  color:#1551FF;
+}
+
+.p_toolRightToRight .rightSkillContainer{
+  min-height:40%;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList{
+  display: flex;
+  flex-wrap: wrap;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem{
+  text-align: center;
+  cursor:pointer;
+  width:30%;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem img{
+  width: 40px;
+  height: 40px;
+  border-radius:10px;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem  p{
+  margin-top:0px;
+  margin-bottom:4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #333333;
+}
+.p_toolRightToRight .rightKnowledgeTitle{
+  nargin-top: 2.2rem;
+  margin-bottom: 1.4rem;
+  font-size:18px;
+  font-weight:500;
+  display:flex;
+  align-items: center;
+}
+
+.p_toolRightToRight .rightKnowledgeTitle img{
+  margin-right:4px;
+}
+
+.p_toolRightToRight .rightKnowledgeContainer{
+  position:relative;
+}
+.p_toolRightToRight .rightMoreButton{
+  background: url(${moreAi});
+  background-size: 85% auto;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  position: absolute;
+  bottom: 8px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+.p_toolRightToRight .rightMoreButton div{
+  width:calc(100% - 50px);
+  padding: 16px 16px 10px 20px;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 17px;
+  font-size: 12px;
+  cursor:pointer;
+}
+
+.p_newDialog {
+  width: 252px;
+  height: 40px;
+  min-height:40px;
+  background: linear-gradient( 45deg, #1551FF 0%, #8F4BFF 100%);
+  margin-top: 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p_newDialog img {
+  width: 18px;
+}
+
+.p_newDialog .p_newDialogText {
+  color: #fff;
+  margin-left: 6px;
+}
+`
+
+const defaultList = [
+  {
+    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-01.png',
+    title: '我这学期的课程安排是什么样？',
+  },
+  {
+    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-02.png',
+    title: '我上个学期的成绩是多少？',
+  },
+  {
+    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-03.png',
+    title: '哪里可以找到心理咨询服务？',
+  },
+];
+
+const formatFileSize = (bytes) => {
+  // 如果字节数为0，直接返回
+  if(isEmpty(bytes)) {
+    return { formattedSize: 0, unit: 'B' };
+  }
+  if(bytes === 0) return { formattedSize: 0, unit: 'B' };
+
+  // 定义单位和对应的字节数（1024进制）
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  // 计算合适的单位索引
+  const index = Math.floor(Math.log(bytes) / Math.log(1024));
+  // 将字节数转换为目标单位
+  const size = bytes / Math.pow(1024, index);
+  // 保留两位小数，并去除多余的0
+  const formattedSize = size.toFixed(2).replace(/\.?0+$/, '');
+  return { formattedSize, unit: units[index] }
+}
+
+
+const api_key = 'sk-mniUFDpcWwvNF3iFzssXa6etN-S_Y4AApyHYcBU44L0';
+
+
+export class ToolDialog extends React.Component {
+  state = {
+    historyList: [], // 历史对话列表
+    sessionId: uuidv4(), // 当前激活的对话对应的sessionId
+    dropDownList: [],
+    sceneInfo: {},
+    currentFlow: {},
+  };
+
+  async componentDidMount() {
+    if(isEmpty(this.props.sceneId)){
+      //  兼容非场景打开的情况
+      this.getHistoryList({},true);
+    }else{
+      const sceneData = await this.getSceneInfo();
+      if(isEmpty(sceneData)) {
+        this.getHistoryList({},true);
+      } else {
+        this.getHistoryList(sceneData,true);
+      }
+    }
+  }
+
+  getCurrentFlowHistory=(flowId)=>{
+    let { userInfo = {} } = this.props;
+    const { sessionId } = this.state;
+    if(isEmpty(userInfo.code)) {
+      userInfo.code = sessionId;
+    }
+    const operationId = userInfo['code'] || '';
+    getHistoryList(this.props.hostUrl, flowId, operationId).then((res) => {
+      if(res.status === 200){
+        this.setState({ historyList: res.data });
+      }
+    });
+  }
+
+  // 获取历史对话列表
+  getHistoryList = (sceneData, isRefreshWords) => {
+    const { sceneId, appId: flowId, isShowSideLeft } = this.props;
+      if(isEmpty(sceneId)){
+        //  单独组件情况
+        if(isRefreshWords){
+          this.getFlowInfo().then(currentFlow=>{
+            const dropDownList = this.getDropDownList(currentFlow?.welcome_words||[]);
+            this.setState({ dropDownList, currentFlow })
+          })
+        }
+        if(isShowSideLeft) {
+          this.getCurrentFlowHistory(flowId)
+        }
+      }else{
+        const currentScene = sceneData||this.state.sceneInfo;
+        const currentFlow = currentScene.flows[0];
+        const dropDownList = this.getDropDownList(currentFlow?.welcome_words||[]);
+        if(!isEmpty(sceneData)){
+          this.setState({ currentFlow, dropDownList })
+        }else if(isEmpty(this.state.sceneInfo)){
+          this.setState({ dropDownList:defaultList })
+        }
+        if(isShowSideLeft) {
+          this.getCurrentFlowHistory(currentFlow.id)
+        }
+      }
+  };
+
+  getSceneInfo = async ()=>{
+   const res = await getSceneInfo(this.props.hostUrl, this.props.sceneId, api_key);
+    if(res.status === 200){
+      this.setState({ sceneInfo: res.data });
+    }
+    return res.data;
+  }
+
+  getFlowInfo = async () => {
+    const res = await getFlowInfo(this.props.hostUrl, this.props.appId, api_key);
+    if(res.status === 200) {
+      this.setState({ sceneInfo: res.data });
+    }
+    return res.data;
+  }
+
+  // 新建对话
+  newDialog = () => {
+    if(this.state.dropDownList) {
+      messageTip.info("当前已是最新对话")
+      return;
+    }
+    this.setState({ sessionId: uuidv4() });
+    this.setState({ dropDownList: this.getDropDownList(this.state.currentFlow?.welcome_words||[]) })
+  }
+
+  updateSessionId = (sessionId) => {
+    this.setState({ sessionId });
+  };
+
+  getDropDownList = (welcome_words)=>{
+    if(isEmpty(welcome_words)){
+      return defaultList;
+    }
+   return  welcome_words.slice(0,3).map((question,index)=>(
+        {
+          backgroundImg:defaultList[index].backgroundImg,
+          title:question,
+        }
+    ))
+  }
+
+  render() {
+    const {
+      title,
+      appId: flowId,
+      hostUrl,
+      setDialogVisible,
+      userInfo,
+      boxStyle,
+      isShowSideRight,
+      isShowSideLeft = true,
+      tags = [],
+      agentUrl = aiAvatarPng,
+      agentName = '校园智多星',
+      logoWidth = '42px',
+      logoFontSize = '26px',
+      isTitleSideIcon = false,//  是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
+      modalIndex,
+      isShowUploadButton,
+      dropManUrl,
+      modalWidth
+    } = this.props;
+    const { sceneInfo, currentFlow = {} } = this.state;
+    const { flows = [], name: sceneName, character } = sceneInfo;
+    return (
+        <div style={boxStyle}>
+          <style dangerouslySetInnerHTML={{ __html: style }}></style>
+          <div style={{ position: 'absolute', top: '18px', right: '18px', zIndex: modalIndex }}>
+            {isFunction(setDialogVisible) &&
+            <img onClick={() => setDialogVisible(false)} className="p_closeImg" src={closePng}/>}
+          </div>
+          <div className="p_toolDialog">
+            {
+              isShowSideLeft && <div className="p_toolLeft">
+                <div className="p_toolLogo">
+                  <img className="p_logoImg" style={{ width: logoWidth, borderRadius: 15 }} src={agentUrl}/>
+                  <div className="p_logoText" style={{ fontSize: logoFontSize }}>{agentName}</div>
+                </div>
+                <div className="p_historyDialog">
+                  <div className="p_historyTitle">
+                    <img className="p_historyImg" src={historyPng}/>
+                    <div className="p_dialogTitle">对话列表</div>
+                  </div>
+                  {this.state.historyList.length > 0 ? (
+                      <div className="p_historyList">
+                        {this.state.historyList?.map((item) => (
+                            <div
+                                key={item.session_id}
+                                className="p_historyItem"
+                                onClick={() => {
+                                  this.setState({ dropDownList: undefined })
+                                  this.updateSessionId(item.session_id);
+                                }}
+                            >
+                              <div
+                                  className={`p_historyName ${
+                                      item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''
+                                  }`}
+                              >
+                                {item.text}
+                              </div>
+                            </div>
+                        ))}
+                      </div>
+                  ) : (
+                      <div className="p_historyListEmpty">
+                        <img src={historyListEmptyPng}/>
+                        <div className="p_historyListEmptyText">暂无对话记录</div>
+                      </div>
+                  )}
+                </div>
+                <div className="p_newDialog" onClick={() => {
+                  this.newDialog()
+                }}>
+                  <img src={addPng}/>
+                  <div className="p_newDialogText">新建对话</div>
+                </div>
+              </div>
+            }
+            <div className="p_toolRight">
+              <ChatWidget
+                  window_title={currentFlow?.name || title}
+                  flow_id={currentFlow?.id || flowId}
+                  tags={currentFlow?.keywords || tags}
+                  host_url={hostUrl}
+                  api_key={api_key}
+                  session_id={this.state.sessionId}
+                  userInfo={userInfo}
+                  getHistoryList={this.getHistoryList}
+                  setDropDownList={(list) => this.setState({ dropDownList: list })}
+                  dropDownList={this.state.dropDownList}
+                  baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
+                  isShowUploadButton={isShowUploadButton}
+                  dropManUrl={character || dropManUrl}
+                  modalWidth={modalWidth}
+              />
+            </div>
+            {
+              isShowSideRight &&
+              <div className={"p_toolRightToRight"}>
+                <div className={"rightInnerContainer"}>
+                  <div>
+                    <h3 className={"rightSideTitle"}>
+                      <img width={15} src={self_skills}/>
+                      <span style={{ color: "#333333" }}>专项技能</span>
+                    </h3>
+                    {
+                      isEmpty(flows) ?
+                          <Skeleton
+                              title={false}
+                              active
+                              paragraph={{ rows: 5, width: '100%' }}
+                          />
+                          :
+                          <div className={"rightSkillContainer"}>
+                            <div className={"rightSkillList"}>
+                              {flows.slice(0, 12).map((item) => (
+                                  <div className={"rightSkillItem"} key={item.id} onClick={() => {
+                                    //  右侧点击一个技能，更新sessionId，切换当前flow信息，重新查询历史记录
+                                    this.setState({
+                                      sessionId: uuidv4(),
+                                      currentFlow: item,
+                                      dropDownList: this.getDropDownList(item?.welcome_words||[])
+                                    });
+                                    this.getCurrentFlowHistory(item.id);
+                                  }}>
+                                    <img
+                                        src={item.icon}
+                                        alt={item.name}/>
+                                    <p>{item.name}</p>
+                                  </div>
+                              ))}
+                            </div>
+                          </div>
+                    }
+                  </div>
+                  <div>
+                    <h3 className={"rightKnowledgeTitle"}>
+                      <img width={15} src={self_knowledge}/>
+                      <span style={{ color: "#333333" }}>个人知识库</span>
+                    </h3>
+                    {
+                      isEmpty(currentFlow) ?
+                          <Skeleton
+                              title={false}
+                              active
+                              paragraph={{ rows: 5, width: '100%' }}
+                          /> :
+                          <div className={"rightKnowledgeContainer"}>
+                            <img src={moreBg}/>
+                            <div style={{ position: 'absolute', top: '40px', left: '16px' }}>
+                              <div>文件总数<span style={{
+                                padding: 8,
+                                fontSize: '20px',
+                                fontWeight: 700
+                              }}>{currentFlow.k_count || 0}</span>个
+                              </div>
+                              <div style={{ marginTop: 10 }}>文件总量<span style={{
+                                padding: 8,
+                                fontSize: '20px',
+                                fontWeight: 700
+                              }}>{formatFileSize(currentFlow.k_size).formattedSize}</span>{formatFileSize(currentFlow.k_size).unit}
+                              </div>
+                            </div>
+                            <div className={"rightMoreButton"}>
+                              <div className={"rightMoreTitle"} onClick={() => messageTip.info("敬请期待")}>训练你的专属知识库</div>
+                            </div>
+                          </div>
+                    }
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+    );
+  }
+}
+
+export default ToolDialog;