yt-chat-components 1.5.7 → 1.5.8

package/src/YtChatView/mobileChatV2/index.jsx

@@ -0,0 +1,712 @@
+/* global wx */
+import React from 'react';
+import aiAvatarPng from '../../assets/aicenter/aiavatar.png';
+import closePng from '../../assets/aicenter/close.png';
+import {getFlowInfo, getHistoryList, getQaInfo, 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, message} from 'antd'
+import moreAi from '../../assets/aicenter/moreAi.png';
+import icon_history from '../../assets/aicenter/icon_history.png';
+import icon_history_headerbg from '../../assets/aicenter/icon_history_headerbg.png';
+import ChatWidget from "../chatWidget";
+import {knowledgeInfo} from "../previewDialogV2";
+import styles from './index.module.css';
+
+
+const style=`
+.ant-thought-chain-item-content-box {
+  max-width: 100% !important;
+}
+.ant-thought-chain-item-content{
+  width: calc(100% + 20px)!important;
+}
+.ant-thought-chain.ant-thought-chain-small{
+  max-width: 100% !important;
+}
+
+.p_closeImg {
+  width: 14px;
+  cursor: pointer;
+}
+
+.p_toolDialog {
+  display: flex;
+  flex-direction: column;
+  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 {
+  height: calc(100vh - 60px);
+  width: 100%;
+  max-width: 100%;
+}
+
+.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%);
+  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 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 const MethodContext = React.createContext();
+
+export class MobileChatPageV2 extends React.Component {
+  sessionUserInfo = {};
+  state = {
+    historyList: [], // 历史对话列表
+    sessionId: uuidv4(), // 当前激活的对话对应的sessionId
+    dropDownList: [],
+    sceneInfo: {},
+    currentFlow: {},
+    currentTabKey:'agent',
+    historyDrawerVisible: false, // 抽屉历史记录状态
+    agentDrawerVisible: false, // 多智能体切换抽屉状态
+    knowledgeInfo: {},
+  };
+
+  constructor(props) {
+    super(props);
+    this.dragging = false;
+  }
+
+  componentWillMount() {
+    const { userInfo = {} } = this.props;
+    const { sessionId } = this.state;
+    if (isEmpty(userInfo.code)) {
+      const code = sessionId.replaceAll("-", "").slice(2);
+      this.sessionUserInfo.code = code;
+      this.sessionUserInfo.id = code;
+      this.sessionUserInfo.name = code;
+    }else{
+      this.sessionUserInfo = userInfo;
+    }
+  }
+
+  async componentDidMount() {
+    this.getHistoryList(true);
+  }
+
+  setWindowTitle = (title) => {
+    if (!isEmpty(title)){
+    }
+  }
+
+  getCurrentFlowHistory=(flowId)=>{
+    let { userInfo = {} } = this.props;
+    const { sessionId } = this.state;
+    const operationId = this.sessionUserInfo['code'] || '';
+    getHistoryList(this.props.hostUrl, flowId, operationId).then((res) => {
+      if(res.status === 200  && typeof res.data !== "string" && typeof res.data !== "string"){
+        this.setState({ historyList: res.data });
+      }
+    });
+  }
+
+  // 获取历史对话列表
+  getHistoryList = (isRefreshWords) => {
+    const {appId: flowId, isShowSideLeft} = this.props;
+    //  单独组件情况
+    if (isRefreshWords) {
+      this.getFlowInfo().then(currentFlow => {
+        const dropDownList = this.getDropDownList(currentFlow.welcome_words||[]);
+        this.setState({dropDownList, currentFlow})
+      })
+    }
+    if (isShowSideLeft) {
+      this.getCurrentFlowHistory(flowId)
+    }
+  }
+
+  getFlowInfo = async () => {
+    const res = await getFlowInfo(this.props.hostUrl, this.props.appId, api_key);
+    if(res.status === 200 && typeof res.data !== "string") {
+      //  查询知识库相关信息用作预置问题
+      getQaInfo(this.props.hostUrl, this.props.appId, api_key).then(res => {
+        if (res.status === 200 && typeof res.data !== "string") {
+          if ( !isEmpty(res.data) && !isEmpty(res.data.media) && !isEmpty(res.data.question)) {
+            this.setState({ knowledgeInfo: res.data })
+          } else if ( !isEmpty(this.props.knowledgeInfo)) {
+            this.setState({ knowledgeInfo: this.props.knowledgeInfo })
+          } else {
+            this.setState({ knowledgeInfo: knowledgeInfo })
+          }
+        }
+      }).catch(e => {
+        console.log(e);
+      });
+      this.setState({ currentFlow: 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 });
+  };
+
+  registerChatMethods = ({ isActiveMessage, handleSendMessage }) => {
+    this.handleSendMessage = handleSendMessage;
+    this.isActiveMessage = isActiveMessage;
+  }
+
+  handleClick = (word) => {
+    if(!this.isActiveMessage()){
+      this.handleSendMessage(word);
+    }else{
+      message.destroy();
+      message.info("请等待回复结束后再发送")
+    }
+  };
+
+  getDropDownList = (welcome_words)=>{
+    if(isEmpty(welcome_words)){
+      return defaultList;
+    }
+   return  welcome_words.slice(0,3).map((question,index)=>(
+        {
+          backgroundImg:defaultList[index].backgroundImg,
+          title:question,
+        }
+    ))
+  }
+
+  renderCustomDropDown=(dropDownList)=>{
+    return null;
+  }
+
+  render() {
+    const {
+      title,
+      appId: flowId,
+      hostUrl,
+      setDialogVisible,
+      userInfo,
+      boxStyle,
+      isShowSideRight,
+      isShowSideLeft = true,
+      tags = [],
+      agentUrl = aiAvatarPng,
+      agentName = '校园智多星',
+      logoWidth = '42px',
+      logoFontSize = '26px',
+      isTitleSideIcon = false,//  是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
+      assetMap,
+      modalIndex,
+      isShowVoiceButton,
+      isShowUploadButton,
+      dropManUrl,
+      modalWidth,
+      isLogin = false,
+      isShowLogin = false,
+      loginBtnClick,
+      tipTitle,
+      tipContent,
+      isShowReadIcon,
+      signUrl,
+      headerName,
+      isShowMobileInputArea,
+    } = this.props;
+    const { currentFlow = {} } = this.state;
+    return (
+        <div style={boxStyle}>
+          <style dangerouslySetInnerHTML={{ __html: style }}></style>
+          <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>
+                    <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 === '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
+                    }}>
+                      <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>
+                </>
+                )
+            }
+            {/*对话上边的学校标志，定位到左上角header上端*/}
+            <div className={styles.mobile_nav}>
+              <div className={styles.title}>{headerName}</div>
+              <div></div>
+            </div>
+
+            <div className="p_toolRight">
+              <ChatWidget
+                  window_title={currentFlow?.name || title}
+                  flow_id={currentFlow?.id || flowId}
+                  tags={currentFlow?.keywords || tags}
+                  input_container_style={{zIndex: 2}}
+                  is_enable_call={currentFlow?.is_enable_call || false}
+                  host_url={hostUrl}
+                  api_key={api_key}
+                  session_id={this.state.sessionId}
+                  userInfo={this.sessionUserInfo}
+                  getHistoryList={this.getHistoryList}
+                  setDropDownList={(list) => this.setState({ dropDownList: list })}
+                  dropDownList={this.state.dropDownList}
+                  baseConfig={{ isTitleSideIcon, logoWidth, agentUrl, ...assetMap }}
+                  isShowUploadButton={isShowUploadButton}
+                  isShowVoiceButton={isShowVoiceButton}
+                  dropManUrl={currentFlow.character}
+                  modalWidth={modalWidth}
+                  isShowReadIcon={isShowReadIcon}
+                  isShowChatHeader={false}
+                  renderCustomDropDown={this.renderCustomDropDown}
+                  isTagsHidden={true}
+                  placeholder={'请输入您想咨询的问题'}
+                  isEnableForV1={false}
+                  questions={this.state.knowledgeInfo?.question || []}
+                  voice={currentFlow.call_voice}
+                  onSmartRobotClick={() => {
+                    this.setState({drawerVisible: true})
+                  }}
+                  chat_window_style={{paddingTop: 0}}
+                  bot_message_style={{background: '#fff', maxWidth:'100%'}}
+                  isMobile={true}
+                  tipTitle={tipTitle}
+                  tipContent={tipContent}
+                  isShowMobileInputArea={isShowMobileInputArea}
+              />
+            </div>
+          </div>
+        </div>
+    );
+  }
+}
+
+export default MobileChatPageV2;