yt-chat-components 0.9.9 → 1.0.0

package/src/YtChatView/mobileChat/index.jsx

@@ -0,0 +1,848 @@
+/* global wx */
+import React from 'react';
+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, Drawer } from 'antd'
+import { CloseOutlined } from "@ant-design/icons";
+import moreAi from '../../assets/aicenter/moreAi.png';
+import moreBg from '../../assets/aicenter/moreBg.png';
+import icon_history from '../../assets/aicenter/icon_history.png';
+import icon_agents from '../../assets/aicenter/icon_agents.png';
+import icon_history_upload from '../../assets/aicenter/icon_history_upload.png';
+import icon_history_headerbg from '../../assets/aicenter/icon_history_headerbg.png';
+import icon_history_add from '../../assets/aicenter/icon_history_add.png';
+import self_knowledge from '../../assets/aicenter/self_knowledge.png';
+import self_skills from '../../assets/aicenter/self_skills.png';
+import ChatWidget from "../chatWidget";
+
+
+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;
+}
+
+.drawer-history-header {
+  margin-top: 40px;
+}
+
+.drawer-history-header-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  
+  > img {
+  width:35px
+  }
+  
+  > span {
+  }
+}
+
+.drawer-history-header .drawer-history-header-tool {
+  
+  > img {
+  }
+  
+  > span {
+  }
+}
+
+.drawer-history-content {
+}
+.drawer-history-footer {
+}
+
+`
+
+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 MobileChatPage extends React.Component {
+  state = {
+    historyList: [], // 历史对话列表
+    sessionId: uuidv4(), // 当前激活的对话对应的sessionId
+    dropDownList: [],
+    sceneInfo: {},
+    currentFlow: {},
+    historyDrawerVisible: false, // 抽屉历史记录状态
+    agentDrawerVisible: false, // 多智能体切换抽屉状态
+  };
+
+  async componentDidMount() {
+    if(isEmpty(this.props.sceneId)){
+      //  兼容非场景打开的情况
+      this.getHistoryList({},true);
+    }else{
+      const sceneData = await this.getSceneInfo();
+      if(isEmpty(sceneData)) {
+        this.getHistoryList({},true);
+      } else {
+        this.setWindowTitle(sceneData.name)
+        this.getHistoryList(sceneData,true);
+      }
+    }
+  }
+
+  setWindowTitle = (title) => {
+    if (!isEmpty(title)){
+      document.title = title;
+      window.document.title = title;
+    }
+  }
+
+  getCurrentFlowHistory=(flowId)=>{
+    let { userInfo = {} } = this.props;
+    const { sessionId } = this.state;
+    if(isEmpty(userInfo.code)) {
+      userInfo.code = sessionId;
+    }
+    const operationId = userInfo['code'] || '';
+    console.log('getCurrentFlowHistory', flowId, operationId)
+    getHistoryList(this.props.hostUrl, flowId, operationId).then((res) => {
+      if(res.status === 200){
+        console.log('getCurrentFlowHistory', res.data)
+        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];
+        console.log('getHistoryList', sceneData, currentFlow)
+        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), drawerVisible: false })
+  }
+
+  updateSessionId = (sessionId) => {
+    this.setState({ sessionId });
+  };
+
+  getDropDownList = (welcome_words)=>{
+    if(isEmpty(welcome_words)){
+      return defaultList;
+    }
+   return  welcome_words.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,
+      isShowVoiceButton,
+      isShowUploadButton,
+      dropManUrl,
+      modalWidth,
+      isLogin = false,
+      isShowLogin = false,
+      loginBtnClick,
+    } = 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: '15px', right: '14px', zIndex: modalIndex }}>
+            {isFunction(setDialogVisible) &&
+            <img onClick={() => setDialogVisible(false)} className="p_closeImg" src={closePng}/>}
+          </div>
+          <div className="p_toolDialog" style={{borderRadius:0, backgroundImage:'url(https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/yt/agent_list_bg2.png)'}}>
+            {
+              isShowSideLeft && (
+                <>
+                  <img
+                    src={icon_history}
+                    style={{
+                      width: '40px',
+                      height: '40px',
+                      position: 'absolute',
+                      left: '0px',
+                      top: '0px',
+                      zIndex: 1000
+                    }}
+                    onClick={() => this.setState({drawerVisible: true})}
+                  />
+                  <Drawer
+                      title={null}
+                      closable={false}
+                      placement="left"
+                      width={'80%'}
+                      bodyStyle={{padding: 0}}
+                      onClose={() => this.setState({drawerVisible: false})}
+                      open={this.state.drawerVisible}
+                  >
+                    <div className="drawer-history-header" style={{marginTop:0, padding: '54px 14px 14px 14px', background: 'linear-gradient( 71deg, #E1E9FF 0%, #FFFFFF 100%)', position: "relative"}}>
+                      <img src={icon_history_headerbg} style={{position: 'absolute', right: 0, bottom: 0, width: '40%', zIndex:0}}/>
+                      <div className="drawer-history-header-title" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+                        <img style={{width: 35}} src={agentUrl}/>
+                        <span style={{fontSize: 24, marginLeft: 10}}>{agentName}</span>
+                      </div>
+                      <div className="drawer-history-header-tool" style={{display: 'flex',flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 32 }}>
+                        <div
+                            style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginRight: 20, height: 44,background: '#fff', borderRadius: 5,width: '45%'}}
+                            onClick={() => {this.newDialog()}}
+                        >
+                          <img src={icon_history_add} style={{width: '20px', height: '20px', marginRight: 10}}/>
+                          <span>新建对话</span>
+                        </div>
+                        <div
+                            style={{
+                              display: 'flex',
+                              flexDirection: 'row',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              marginRight: 20,
+                              height: 44,
+                              background: '#fff',
+                              borderRadius: 5,
+                              width: '45%',
+                              zIndex: 0
+                            }}
+                            onClick={() => messageTip.info("敬请期待")}
+                        >
+                          <img src={icon_history_upload} style={{width: '20px', height: '20px', marginRight: 10}}/>
+                          <span>个人知识库</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                        className="p_historyDialog"
+                        style={{
+                          height: 'calc(100% - 179px - 114px)',
+                          boxSizing: 'border-box',
+                          userSelect: 'none',
+                          flex: 1,
+                          padding: '30px 14px 0 14px',
+                          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)',
+                          borderImage: 'linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1',
+                          backdropFilter: 'blur(10px)',
+                          position: 'relative',
+                    }}
+                    >
+                      <div className="p_historyTitle" style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: 20}}>
+                        <img className="p_historyImg" src={historyPng} style={{width: '20px', height: '20px', marginRight: 10}}/>
+                        <div className="p_dialogTitle" style={{fontSize: 18, fontWeight: 400, color: '#333'}}>对话记录</div>
+                      </div>
+                      {this.state.historyList.length > 0 ? (
+                          <div className="p_historyList" style={{overflowY: 'auto',height: 'calc(100% - 50px)'}}>
+                            {this.state.historyList?.map((item) => (
+                                <div
+                                    key={item.session_id}
+                                    className="p_historyItem"
+                                    style={{
+                                      display: 'flex',
+                                      height: 44,
+                                      alignItems: 'center',
+                                      paddingLeft: 30,
+                                      paddingRight: 30,
+                                      fontWeight: 400,
+                                      fontSize: 14,
+                                      color: '#333',
+                                      borderRadius: 10,
+                                      background: item.session_id === this.state.sessionId ? '#F5F5FF' : '#fff',
+                                    }}
+                                    onClick={() => {
+                                      this.setState({dropDownList: undefined, drawerVisible: false})
+                                      this.updateSessionId(item.session_id);
+                                    }}
+                                >
+                                  <div
+                                      className={`p_historyName ${
+                                          item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''
+                                      }`}
+                                      style={{
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        color: item.session_id === this.state.sessionId ? '#1551FF' : '#333',
+                                      }}
+                                  >
+                                    {item.text}
+                                  </div>
+                                </div>
+                            ))}
+                          </div>
+                      ) : (
+                          <div className="p_historyListEmpty" style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 50}}>
+                            <img src={historyListEmptyPng} style={{width: '100px', height: '100px', marginBottom: 20}}/>
+                            <div className="p_historyListEmptyText" style={{fontSize: 16, color: '#999' }}>暂无对话记录</div>
+                          </div>
+                      )}
+                    </div>
+                    <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 20, marginBottom: 50}}>
+                      {
+                          isShowLogin &&
+                          <div
+                            style={{
+                              display: 'flex',
+                              justifyContent: 'center',
+                              alignItems: 'center',
+                              width: '80%',
+                              height: 44,
+                              color: '#fff',
+                              background: 'linear-gradient( 30deg, #1551FF 0%, #8F4BFF 100%)',
+                              borderRadius: 10
+                            }}
+                            onClick={() => {
+                              if (isFunction(loginBtnClick)){
+                                loginBtnClick()
+                              }else {
+                                if (typeof wx !== 'undefined' && wx.miniProgram) {
+                                  wx.miniProgram.navigateTo({url: '/pages/login/index'});
+                                }
+                              }
+                            }}
+                        >
+                          {isLogin ? '退出登录' : '登录'}
+                        </div>
+                      }
+                    </div>
+                  </Drawer>
+                </>
+                )
+            }
+            <div className="p_toolRight">
+              <ChatWidget
+                  input_container_style={{zIndex:2}}
+                  chat_window_style={{paddingTop: 0}}
+                  bot_message_style={{background: '#fff'}}
+                  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}}
+                  isShowVoiceButton={isShowVoiceButton}
+                  isShowUploadButton={isShowUploadButton}
+                  dropManUrl={character || dropManUrl}
+                  modalWidth={modalWidth}
+                  isMobile={true}
+                  isShowChatHeader={false}
+              />
+            </div>
+            {
+                isShowSideRight && (
+                    <>
+                      <img
+                          src={icon_agents}
+                          style={{
+                            width: '60px',
+                            height: '60px',
+                            position: 'absolute',
+                            right: '0px',
+                            bottom: '200px',
+                            zIndex: 1000
+                          }}
+                          onClick={() => this.setState({agentDrawerVisible: true})}
+                      />
+                      <Drawer
+                          title={'专项技能'}
+                          // closable={false}
+                          placement="right"
+                          width={'100%'}
+                          style={{
+                            backgroundImage: 'url(https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/yt/agent_list_bg.png)',
+                            backgroundSize: 'cover',
+                            backgroundRepeat: 'no-repeat',
+                            backgroundPosition: 'center'
+                          }}
+                          bodyStyle={{
+                            padding: 0,
+                          }}
+                          onClose={() => this.setState({agentDrawerVisible: false})}
+                          open={this.state.agentDrawerVisible}
+                      >
+                        <div
+                            className={"p_toolRightToRight"}
+                            style={{
+                              width:'100%',
+                              display:'flex',
+                              boxSizing:'border-box',
+                              flexDirection:'column',
+                              padding: '1rem 1rem 1rem 1rem',
+                            }}
+                        >
+                          <div
+                              className={"rightInnerContainer"}
+                              style={{
+                                width:'100%',
+                                display:'flex',
+                                flexDirection:'row',
+                                justifyContent:'space-between',
+
+                              }}
+                          >
+                            <div style={{width:'100%'}}>
+                              {/*<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"} style={{width:'100%'}}>
+                                      <div
+                                          className={"rightSkillList"}
+                                          style={{
+                                            width:'100%',
+                                            display: 'grid',
+                                            gridTemplateColumns: 'repeat(2, 1fr)', /* 每行 2 列 */
+                                            gap: 20 /* 设置列和行之间的间距 */
+                                          }}>
+                                        {flows.slice(0, 12).map((item) => (
+                                            <div
+                                                key={item.id}
+                                                className={"rightSkillItem"}
+                                                style={{
+                                                  display: 'flex',
+                                                  flexDirection: 'column',
+                                                  background: '#fff',
+                                                  borderRadius: 22,
+                                                  opacity: 0.7,
+                                                  width:'100%',
+                                                  height: '45vw',
+                                                  boxSizing: 'border-box',
+                                                  padding: '18px',
+                                                }}
+                                                onClick={() => {
+                                                  //  右侧点击一个技能，更新sessionId，切换当前flow信息，重新查询历史记录
+                                                  this.setState({
+                                                    sessionId: uuidv4(),
+                                                    currentFlow: item,
+                                                    dropDownList: this.getDropDownList(item.welcome_words),
+                                                    agentDrawerVisible: false,
+                                                  });
+                                                  this.setWindowTitle(item.name)
+                                                  this.getCurrentFlowHistory(item.id);
+                                                }}
+                                            >
+                                              <img
+                                                  src={item.icon}
+                                                  alt={item.name}
+                                                  style={{width: '40px', height: '40px'}}
+                                              />
+                                              <div style={{marginTop: '12px', color: '#333333', fontWeight: "bold", fontSize: '14px', textAlign: "left"}}>{item.name}</div>
+                                              <div style={{marginTop: '8px', color: '#333333', fontSize: '10px', textAlign: "left"}}>{item.content}</div>
+                                            </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>
+                      </Drawer>
+                    </>
+                )
+            }
+          </div>
+        </div>
+    );
+  }
+}
+
+export default MobileChatPage;