yt-chat-components 1.1.2 → 1.1.4

package/src/YtChatView/mobileChat/index.jsx

@@ -1,945 +1,945 @@
-/* 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 {isEmpty, isFunction} from "lodash";
-import {Button, message as messageTip, Progress, Skeleton, Drawer, Tabs} from 'antd'
-import moreAi from '../../assets/aicenter/moreAi.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 ChatWidget from "../chatWidget";
-import Draggable from 'react-draggable';
-
-
-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';
-const drawerTabs = [
-    {id:'agent', name:'专项技能',icon:'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_tab_agent.png',activeIcon:'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_tab_agent_1.png'},
-    {id:'history', name:'对话记录',icon:'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_tab_history.png',activeIcon:'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_tab_history_1.png'}
-]
-
-export class MobileChatPage extends React.Component {
-  state = {
-    historyList: [], // 历史对话列表
-    sessionId: uuidv4(), // 当前激活的对话对应的sessionId
-    dropDownList: [],
-    sceneInfo: {},
-    currentFlow: {},
-    currentTabKey:'agent',
-    historyDrawerVisible: false, // 抽屉历史记录状态
-    agentDrawerVisible: false, // 多智能体切换抽屉状态
-  };
-
-  constructor(props) {
-    super(props);
-    this.dragging = 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 = 'AI校园智多星';
-      window.document.title = 'AI校园智多星';
-    }
-  }
-
-  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,
-                      display: 'none',
-                    }}
-                    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% - 146px - 50px)',
-                          boxSizing: 'border-box',
-                          userSelect: 'none',
-                          flex: 1,
-                          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 style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
-                        {
-                          drawerTabs.map((item, index) => (
-                            <div id={item.id} style={{
-                              width:'50%',
-                              display: 'flex',
-                              WebkitTapHighlightColor: 'transparent',
-                              userSelect: 'none',
-                              WebkitUserSelect: 'none',
-                              WebkitTouchCallout: 'none',
-                              flexDirection: 'row',
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                              cursor: 'pointer',
-                              padding: '30px 14px 15px 14px',
-                              borderBottom: this.state.currentTabKey === item.id ? '2px solid #2850FF' : '2px solid #fff'
-                            }}
-                                 onClick={() => this.setState({currentTabKey: item.id})}
-                            >
-                              <img style={{width:16, marginRight: 8}} src={this.state.currentTabKey === item.id ? item.activeIcon : item.icon} />
-                              <div style={{fontSize:16, fontWeight: 'bold', color: this.state.currentTabKey === item.id ? '#2850FF' : '#333'}}>{item.name}</div>
-                            </div>
-                          ))
-                        }
-                      </div>
-                      {/*专项技能*/}
-                      {
-                          this.state.currentTabKey === 'agent' &&
-                          <div className="p_historyList" style={{overflowY: 'auto', height: 'calc(100% - 90px)'}}>
-                            {flows?.map((item) => (
-                                <div
-                                    key={item.id}
-                                    className="p_historyItem"
-                                    style={{
-                                      display: 'flex',
-                                      height: 44,
-                                      alignItems: 'center',
-                                      paddingLeft: 30,
-                                      paddingRight: 30,
-                                      fontWeight: 400,
-                                      fontSize: 14,
-                                      color: '#333',
-                                      borderRadius: 10,
-                                      marginBottom: 24,
-                                    }}
-                                    onClick={() => {
-                                      //  右侧点击一个技能，更新sessionId，切换当前flow信息，重新查询历史记录
-                                      this.setState({
-                                        sessionId: uuidv4(),
-                                        currentFlow: item,
-                                        dropDownList: this.getDropDownList(item.welcome_words),
-                                        agentDrawerVisible: false,
-                                        drawerVisible: false,
-                                      });
-                                      this.setWindowTitle(item.name)
-                                      this.getCurrentFlowHistory(item.id);
-                                    }}
-                                >
-                                  <div
-                                      style={{
-                                        width:'100%',
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        color: item.session_id === this.state.sessionId ? '#1551FF' : '#333',
-                                      }}
-                                  >
-                                    <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', color:'#333', fontSize:'16px', textAlign:'left', fontWeight:'bold'}}>
-                                      <img
-                                          src={item.icon}
-                                          alt={item.name}
-                                          style={{width: '36px', borderRadius:5, marginRight: 10}}
-                                      />
-                                      {item.name}
-                                    </div>
-
-                                    <img
-                                        src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_arrow_right.png'}
-                                        style={{ height: '5px'}}
-                                    />
-                                  </div>
-                                </div>
-                            ))}
-                          </div>
-                      }
-
-                      {/*对话记录*/}
-                      {
-                          this.state.currentTabKey === 'history' &&
-                          (this.state.historyList.length > 0 ? (
-                              <div className="p_historyList" style={{overflowY: 'auto', height: 'calc(100% - 70px)'}}>
-                                {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: 10, marginBottom: 20}}>
-                      {
-                          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={() => {
-                              this.setState({drawerVisible: false})
-                              this.newDialog()
-                            }}
-                        >
-                          新建对话
-                        </div>
-                      }
-                    </div>
-                  </Drawer>
-                </>
-                )
-            }
-            <div className="p_toolRight">
-              <ChatWidget
-                  input_container_style={{zIndex:2}}
-                  chat_window_style={{paddingTop: 0}}
-                  bot_message_style={{background: '#fff', maxWidth:'100%'}}
-                  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 && (
-                    <>
-                    <Draggable onStart={() => { this.dragging = false; }}
-                               onDrag={() => { this.dragging = true; }}
-                               onStop={(e) => {
-                                 if (!this.dragging) {
-                                   this.setState({drawerVisible: true})
-                                 }
-                               }}>
-                      <img
-                          src={icon_agents}
-                          style={{
-                            width: '60px',
-                            height: '60px',
-                            position: 'absolute',
-                            right: '0px',
-                            bottom: '200px',
-                            zIndex: 1000
-                          }}
-                      />
-                    </Draggable>
-                      <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;
+/* 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 {isEmpty, isFunction} from "lodash";
+import {Button, message as messageTip, Progress, Skeleton, Drawer, Tabs} from 'antd'
+import moreAi from '../../assets/aicenter/moreAi.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 ChatWidget from "../chatWidget";
+import Draggable from 'react-draggable';
+
+
+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';
+const drawerTabs = [
+    {id:'agent', name:'专项技能',icon:'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_tab_agent.png',activeIcon:'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_tab_agent_1.png'},
+    {id:'history', name:'对话记录',icon:'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_tab_history.png',activeIcon:'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_tab_history_1.png'}
+]
+
+export class MobileChatPage extends React.Component {
+  state = {
+    historyList: [], // 历史对话列表
+    sessionId: uuidv4(), // 当前激活的对话对应的sessionId
+    dropDownList: [],
+    sceneInfo: {},
+    currentFlow: {},
+    currentTabKey:'agent',
+    historyDrawerVisible: false, // 抽屉历史记录状态
+    agentDrawerVisible: false, // 多智能体切换抽屉状态
+  };
+
+  constructor(props) {
+    super(props);
+    this.dragging = 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 = 'AI校园智多星';
+      window.document.title = 'AI校园智多星';
+    }
+  }
+
+  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,
+                      display: 'none',
+                    }}
+                    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% - 146px - 50px)',
+                          boxSizing: 'border-box',
+                          userSelect: 'none',
+                          flex: 1,
+                          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 style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
+                        {
+                          drawerTabs.map((item, index) => (
+                            <div id={item.id} style={{
+                              width:'50%',
+                              display: 'flex',
+                              WebkitTapHighlightColor: 'transparent',
+                              userSelect: 'none',
+                              WebkitUserSelect: 'none',
+                              WebkitTouchCallout: 'none',
+                              flexDirection: 'row',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              cursor: 'pointer',
+                              padding: '30px 14px 15px 14px',
+                              borderBottom: this.state.currentTabKey === item.id ? '2px solid #2850FF' : '2px solid #fff'
+                            }}
+                                 onClick={() => this.setState({currentTabKey: item.id})}
+                            >
+                              <img style={{width:16, marginRight: 8}} src={this.state.currentTabKey === item.id ? item.activeIcon : item.icon} />
+                              <div style={{fontSize:16, fontWeight: 'bold', color: this.state.currentTabKey === item.id ? '#2850FF' : '#333'}}>{item.name}</div>
+                            </div>
+                          ))
+                        }
+                      </div>
+                      {/*专项技能*/}
+                      {
+                          this.state.currentTabKey === 'agent' &&
+                          <div className="p_historyList" style={{overflowY: 'auto', height: 'calc(100% - 90px)'}}>
+                            {flows?.map((item) => (
+                                <div
+                                    key={item.id}
+                                    className="p_historyItem"
+                                    style={{
+                                      display: 'flex',
+                                      height: 44,
+                                      alignItems: 'center',
+                                      paddingLeft: 30,
+                                      paddingRight: 30,
+                                      fontWeight: 400,
+                                      fontSize: 14,
+                                      color: '#333',
+                                      borderRadius: 10,
+                                      marginBottom: 24,
+                                    }}
+                                    onClick={() => {
+                                      //  右侧点击一个技能，更新sessionId，切换当前flow信息，重新查询历史记录
+                                      this.setState({
+                                        sessionId: uuidv4(),
+                                        currentFlow: item,
+                                        dropDownList: this.getDropDownList(item.welcome_words),
+                                        agentDrawerVisible: false,
+                                        drawerVisible: false,
+                                      });
+                                      this.setWindowTitle(item.name)
+                                      this.getCurrentFlowHistory(item.id);
+                                    }}
+                                >
+                                  <div
+                                      style={{
+                                        width:'100%',
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        color: item.session_id === this.state.sessionId ? '#1551FF' : '#333',
+                                      }}
+                                  >
+                                    <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', color:'#333', fontSize:'16px', textAlign:'left', fontWeight:'bold'}}>
+                                      <img
+                                          src={item.icon}
+                                          alt={item.name}
+                                          style={{width: '36px', borderRadius:5, marginRight: 10}}
+                                      />
+                                      {item.name}
+                                    </div>
+
+                                    <img
+                                        src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_arrow_right.png'}
+                                        style={{ height: '5px'}}
+                                    />
+                                  </div>
+                                </div>
+                            ))}
+                          </div>
+                      }
+
+                      {/*对话记录*/}
+                      {
+                          this.state.currentTabKey === 'history' &&
+                          (this.state.historyList.length > 0 ? (
+                              <div className="p_historyList" style={{overflowY: 'auto', height: 'calc(100% - 70px)'}}>
+                                {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: 10, marginBottom: 20}}>
+                      {
+                          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={() => {
+                              this.setState({drawerVisible: false})
+                              this.newDialog()
+                            }}
+                        >
+                          新建对话
+                        </div>
+                      }
+                    </div>
+                  </Drawer>
+                </>
+                )
+            }
+            <div className="p_toolRight">
+              <ChatWidget
+                  input_container_style={{zIndex:2}}
+                  chat_window_style={{paddingTop: 0}}
+                  bot_message_style={{background: '#fff', maxWidth:'100%'}}
+                  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 && (
+                    <>
+                    <Draggable onStart={() => { this.dragging = false; }}
+                               onDrag={() => { this.dragging = true; }}
+                               onStop={(e) => {
+                                 if (!this.dragging) {
+                                   this.setState({drawerVisible: true})
+                                 }
+                               }}>
+                      <img
+                          src={icon_agents}
+                          style={{
+                            width: '60px',
+                            height: '60px',
+                            position: 'absolute',
+                            right: '0px',
+                            bottom: '200px',
+                            zIndex: 1000
+                          }}
+                      />
+                    </Draggable>
+                      <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;