yt-chat-components 2.0.6 → 2.0.7

package/src/YtChatView/previewDialogV3/index.jsx

@@ -0,0 +1,648 @@
+import React from 'react';
+import ChatWidget from '../chatWidget/index';
+import aiAvatarPng from '../../assets/aicenter/aiavatar.png';
+import {
+  getFlowInfo,
+  getFlowPage,
+  getHistoryList,
+  getQaInfo,
+  getSceneInfo, modifyScene
+} from '../chatWidget/chatWindow/controllers/index';
+import './index.module.css'
+import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from "lodash";
+import { Drawer, message, message as messageTip, Skeleton, Tooltip } from 'antd'
+import LeftMenu from "./LeftMenu";
+import Icon, { HistoryOutlined, PlusOutlined } from "@ant-design/icons";
+import historyListEmptyPng from "../../assets/aicenter/history-list-empty.png";
+
+
+const commentSvg = ()=> (
+    <svg t="1751111611885" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="3118" width="24" height="20">
+      <path
+          d="M806.9 155.2H217.2c-64 0-116.1 55.6-116.1 124v380c0 68.4 52.1 124 116.1 124h101.3l-5.9 101.6c-0.5 9.4 4.5 18.3 12.8 22.6 3.5 1.8 7.3 2.8 11.2 2.8 5.2 0 10.4-1.7 14.7-5.1l156.8-122h298.7c64 0 116.1-55.6 116.1-124v-380c0.1-68.3-52-123.9-116-123.9zM303 528.7c-33.1 0-60-26.9-60-60s26.9-60 60-60 60 26.9 60 60-26.8 60-60 60z m209 1c-33.1 0-60-26.9-60-60s26.9-60 60-60 60 26.9 60 60-26.8 60-60 60z m209-1c-33.1 0-60-26.9-60-60s26.9-60 60-60 60 26.9 60 60-26.8 60-60 60z"
+          p-id="3119"></path>
+    </svg>
+)
+
+const CommentIcon = (props) => (
+    <Icon component={commentSvg} {...props} />
+);
+
+export const knowledgeInfo = {
+  media: [
+    {
+      a: "https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png",
+      a_type: "image"
+    },
+    {
+      a: "https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/temp/test.mp4",
+      a_type: "video"
+    }
+  ],
+  question: [
+    {category:'学校文化',data: [{q:'学校最有特色的传统是什么？'}, {q:'有哪些值得传承的校训？'}, {q:'学校重视学生个性发展吗？'}, {q:'有什么知名校友吗？'}, {q:'新生入学是否有迎新活动？'}, {q:'学校支持学生创业吗？'}, {q:'学校节日有哪些特色？'}, {q:'学校的学习氛围怎么样？'}, {q:'学生组织有哪些？'}, {q:'是否有艺术或文化类社团？'}]},
+    {category:'校园风景',data: [{q:'校园内有哪些打卡景点？'}, {q:'校园绿化做得好吗？'}, {q:'有湖泊或花园吗？'}, {q:'有特色建筑吗？'}, {q:'校园大不大？适合散步吗？'}, {q:'有哪些适合拍照的地方？'}, {q:'有室外自习空间吗？'}, {q:'校园晚上灯光如何？'}, {q:'有没有露天表演广场？'}, {q:'有樱花或银杏树吗？'}]},
+    {category:'招生流程',data: [{q:'什么时候开始填志愿？'}, {q:'招生简章在哪查看？'}, {q:'是否有预估分数线？'}, {q:'如何获取往年录取线？'}, {q:'能否跨省报考？'}, {q:'有哪些专项招生计划？'}, {q:'报志愿前可参观校园吗？'}, {q:'有无强基计划？'}, {q:'是否有面试环节？'}, {q:'报名后多久公布录取？'}]},
+    {category:'住宿生活',data: [{q:'几人一间宿舍？'}, {q:'宿舍有空调吗？'}, {q:'洗衣机是否自助？'}, {q:'有独立卫生间吗？'}, {q:'能否申请调换宿舍？'}, {q:'有晚归门禁吗？'}, {q:'网络信号好吗？'}, {q:'有宿舍文化活动吗？'}, {q:'宿舍能使用电器吗？'}, {q:'有快递柜或驿站吗？'}]},
+    {category:'餐饮服务',data: [{q:'食堂饭菜贵不贵？'}, {q:'食堂口味多样吗？'}, {q:'有无清真窗口？'}, {q:'学校周边吃饭方便吗？'}, {q:'是否支持刷脸就餐？'}, {q:'饭卡能否线上充值？'}, {q:'有没有饮品店？'}, {q:'食堂有无特色菜？'}, {q:'吃饭时间是否固定？'}, {q:'是否有外卖平台？'}]},
+    {category:'教学资源',data: [{q:'师资力量如何？'}, {q:'有外教课程吗？'}, {q:'是否提供选修课？'}, {q:'教材是否统一购买？'}, {q:'有开放实验室吗？'}, {q:'是否配有学习中心？'}, {q:'有哪些在线课程平台？'}, {q:'图书馆开放时间？'}, {q:'能否跨专业听课？'}, {q:'有无名师公开课？'}]},
+    {category:'就业实习',data: [{q:'是否提供实习机会？'}, {q:'就业指导服务如何？'}, {q:'有哪些合作企业？'}, {q:'实习是否计入学分？'}, {q:'就业率有多高？'}, {q:'毕业生去向有哪些？'}, {q:'能否推荐实习单位？'}, {q:'是否有职业规划课？'}, {q:'能考研继续深造吗？'}, {q:'就业双选会多不多？'}]},
+  ]
+}
+
+const style = `
+.p_closeImg {
+  width: 14px;
+  cursor: pointer;
+}
+
+.p_toolDialog {
+  height:100%;
+  border-radius:8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: unset;
+}
+.p_toolDialog .p_sign{
+  width: calc(100vw - 140px);
+  min-width:1380px;
+  margin: 0 auto;
+}
+
+.dialog_box{
+  width: 100vw;
+  height:100vh;
+  background: #fff;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: row;
+}
+
+.p_toolDialog .dialog_box .p_toolLogo {
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 18px;
+  padding-left: 32px;
+  padding-bottom:12px;
+  border-bottom: #E5E5E5 solid 1px;
+}
+
+.p_toolDialog .dialog_box .p_toolLogo .p_logoImg {
+  width: 48px;
+   position: absolute;
+}
+
+.p_toolDialog .dialog_box .p_toolLogo .p_logoText {
+  font-weight: bold;
+  margin-left: 10px;
+  font-size: 20px;
+  background: #000000;
+  // background: linear-gradient(to right, #1551FF, #8F4BFF);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.p_historyDialog {
+  user-select: none;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  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% - 60px);
+  padding:16px;
+}
+
+.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_historyDialog .p_historyTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: unset;
+}
+
+.p_historyDialog .p_historyTitle .p_historyImg {
+  width: 25px;
+}
+
+.p_historyDialog .p_historyTitle .p_dialogTitle {
+  font-size: 18px;
+  line-height: 16px;
+  text-align: left;
+  font-style: normal;
+  display:flex;
+  font-weight: normal;
+  color: #A4A4A4;
+}
+
+.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% - 1.7rem);
+
+}
+
+.p_historyDialog .p_historyList {
+  height: calc(100% - 1.7rem);
+  margin-top: 10px;
+  overflow-y: auto;
+  scrollbar-width: none !important; /* firefox */
+}
+
+.p_historyDialog .p_historyList::-webkit-scrollbar{
+  display:none;
+}
+
+.p_historyDialog .p_historyList:hover {
+  scrollbar-width: thin !important; /* firefox */
+  scrollbar-color: #ced4e3 transparent;
+}
+
+.p_historyDialog .p_historyList .p_historyItem {
+  padding: 10px 16px;
+  padding-left: 0;
+  
+}
+
+.p_historyDialog .p_historyList .p_historyItem:hover{
+  background: #F5F5F5;
+  border-radius: 9px;
+  color: #1552FF
+  }
+  
+  .p_historyDialog .p_historyList .p_historyItem:hover .p_historyName{
+   
+  }
+  
+.p_historyDialog .p_historyList .p_activeItem{
+  background: #1974FF !important;
+  border-radius: 9px;
+  color:#FFFFFF !important;
+  }
+
+.p_historyDialog .p_historyList .p_historyItem .p_historyName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.p_historyDialog .p_historyList .p_historyItem .p_activeHistoryName {
+    color: #fff !important;
+}
+
+.p_toolDialog .p_toolRight {
+  flex: 1;
+  max-width: 780px;
+  margin-bottom:16px;
+}
+
+:where(.css-dev-only-do-not-override-1v613y0).ant-carousel .slick-dots li.slick-active::after{
+  background:#1974FF;
+}
+
+:where(.css-dev-only-do-not-override-1v613y0).ant-carousel .slick-dots li button{
+  background: #000000;
+}
+
+:where(.css-1v613y0).ant-carousel .slick-dots li.slick-active::after {
+  background: #1974FF;
+}
+
+:where(.css-1v613y0).ant-carousel .slick-dots li button {
+  background: #000000;
+}
+
+.p_newDialog {
+  width: 252px;
+  height: 40px;
+  min-height:40px;
+  cursor: pointer;
+  display: flex;
+  color:#0060FF;
+  align-items: center;
+  background: #EAF3FF;
+  border-radius: 11px;
+  border: 1px solid #1974FF;
+  transition: all 0.2s ease; /* 添加过渡动画 */
+  margin-top: unset;
+}
+
+.p_newDialog:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.p_newDialog:active {
+  background-color: #c4d9ff;
+  border-color: #0040aa;
+  transform: translateY(2px); /* 模拟按下效果 */
+  box-shadow: none; /* 取消阴影，增强按下效果 */
+}
+
+.p_newDialog .p_newDialogText {
+  margin-left: 6px;
+  color: unset;
+}
+`
+
+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';
+
+export const MethodContext = React.createContext();
+
+export class ToolDialogV3 extends React.Component {
+  sessionUserInfo = {};
+  state = {
+    appId:'',
+    historyList: [], // 历史对话列表
+    sessionId: uuidv4(), // 当前激活的对话对应的sessionId
+    dropDownList: [],
+    currentFlow: {},
+    knowledgeInfo: {},
+    loading: false,
+    allFlowList: [],
+    sceneInfo:{},
+  };
+
+  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() {
+    const { appId: flowId,sceneId } = this.props;
+    this.setState({ appId: flowId }, () => {
+      this.getHistoryList(true);
+    })
+    this.getSceneInfo();
+    getFlowPage(this.props.hostUrl, api_key)
+        .then(res => {
+      if(res.status === 200) {
+        this.setState({ allFlowList: res.data?.data_list })
+      }
+    })
+  }
+
+  getCurrentFlowHistory=(flowId)=>{
+    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 { isShowSideLeft = true } = this.props;
+    const { appId } = this.state;
+        //  单独组件情况
+        if(isRefreshWords){
+          this.getFlowInfo().then(currentFlow=>{
+            const dropDownList = this.getDropDownList(currentFlow?.welcome_words||[]);
+            this.setState({ dropDownList, currentFlow })
+          })
+        }
+        if(isShowSideLeft) {
+          this.getCurrentFlowHistory(appId)
+        }
+  };
+
+  getFlowInfo = async () => {
+    const res = await getFlowInfo(this.props.hostUrl, this.state.appId, api_key);
+    if(res.status === 200 && typeof res.data !== "string") {
+      //  查询知识库相关信息用作预置问题
+      getQaInfo(this.props.hostUrl, this.state.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;
+  }
+
+  getSceneInfo = async () => {
+    const res = await getSceneInfo(this.props.hostUrl, this.props.sceneId, api_key);
+    if(res.status === 200 && typeof res.data !== "string") {
+      this.setState({ sceneInfo: res.data });
+      return res;
+    }
+  }
+
+  // 新建对话
+  newDialog = () => {
+    if(this.state.dropDownList) {
+      messageTip.info("当前已是最新对话")
+      return;
+    }
+    this.setState({ sessionId: uuidv4() });
+    this.setState({ dropDownList: this.getDropDownList(this.state.currentFlow?.welcome_words||[]) })
+  }
+
+  updateSessionId = (sessionId) => {
+    this.setState({ sessionId });
+  };
+
+  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,
+        }
+    ))
+  }
+
+  handleSetDialog = (flow) => {
+    this.setState({ loading: true },
+        () => this.setState({ appId: flow.id },
+            () => {
+              this.getHistoryList(true);
+              this.newDialog();
+              setTimeout(()=>{
+                this.setState({ loading: false })
+              },500)
+            }))
+  }
+
+  addToScene = (flow) => {
+    const { sceneInfo } = this.state;
+    sceneInfo.flow_ids = [...sceneInfo.flow_ids, flow.id]
+    modifyScene(this.props.hostUrl, api_key, sceneInfo).then(res => {
+      if(res.status === 200) {
+        this.getSceneInfo();
+      }
+    })
+  }
+
+  removeFromScene = (flow) => {
+    const { sceneInfo } = this.state;
+    sceneInfo.flow_ids = sceneInfo.flow_ids.filter(item => item !== flow.id)
+    modifyScene(this.props.hostUrl, api_key, sceneInfo).then(res => {
+      if(res.status === 200) {
+        this.getSceneInfo();
+      }
+    })
+  }
+
+  render() {
+    const {
+      title,
+      hostUrl,
+      setDialogVisible,
+      userInfo,
+      boxStyle,
+      tags = [],
+      agentUrl = aiAvatarPng,
+      agentName = '校园智多星',
+      logoWidth = '42px',
+      logoFontSize = '26px',
+      isTitleSideIcon = false,//  是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
+      assetMap,
+      isShowUploadButton = false,
+      modalWidth,
+      isShowReadIcon = false,
+      cnxwBottomUrl,
+      isShowVoiceButton,
+      isHideTabSelector,
+      dialogStyle,
+      customAiToldYou
+    } = this.props;
+    const { currentFlow = {}, appId } = this.state;
+    return (
+        <div style={boxStyle}>
+          <style dangerouslySetInnerHTML={{ __html: style }}></style>
+          <div className="p_toolDialog">
+            <div className={"dialog_box"} style={dialogStyle}>
+              <LeftMenu
+                  onNewChat={this.newDialog}        // 如果有新建会话方法
+                  onSelectSession={this.handleSetDialog}  // 如果有切换会话方法
+                  activeId={this.state.sessionId}  // 根据你的状态字段调整
+                  userInfo={userInfo}
+                  sceneInfo={this.state.sceneInfo}
+                  handleLoadHistoryList={async () => getHistoryList(this.props.hostUrl, appId, this.sessionUserInfo['code'] || '')}
+                  addToScene={this.addToScene}
+                  removeFromScene={this.removeFromScene}
+                  appId={appId}
+                  flow={currentFlow}
+                  allFlowList={this.state.allFlowList}
+              />
+              <div style={{flex:1,display:'flex',flexDirection:'column',height:'100vh'}}>
+                <div className="p_toolLogo">
+                  {
+                        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+                          <div style={{
+                            width: logoWidth,
+                            height: logoWidth,
+                            backgroundColor: '#D5D5D5',
+                            borderRadius: '22px',
+                            position: 'relative',
+                            overflow: 'hidden',
+                          }}>
+                            {
+                              this.state.loading ? <Skeleton
+                                      title={false}
+                                      style={{ padding: '0px' }}
+                                      active
+                                      paragraph={{ rows: 1, width: '100%', style: { margin: '0px', } }}
+                                  /> :
+                                  <img className="p_logoImg" src={currentFlow.icon}/>
+                            }
+                          </div>
+                          <div className="p_logoText" style={{ fontSize: logoFontSize }}>{currentFlow.name}</div>
+                        </div>
+                  }
+                  <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+                    <PlusOutlined
+                        style={{ marginRight: '16px', fontSize: '20px' }}
+                        onClick={() => {
+                          this.newDialog();
+                        }}
+                    />
+                    <HistoryOutlined
+                        style={{ marginRight: '16px', fontSize: '20px' }}
+                        onClick={() => {
+                          this.setState({ isShowHistoryList: true })
+                        }}
+                    />
+                  </div>
+                </div>
+                <div style={{
+                  display: 'flex',
+                  flexDirection: "row",
+                  justifyContent: 'center',
+                  flex: 1,
+                  height: 'calc(100% - 75px)'
+                }}>
+                  {
+                    this.state.loading ? <Skeleton
+                            title={false}
+                            style={{ padding: '20px' }}
+                            active
+                            paragraph={{ rows: 5, width: '100%' }}
+                        /> :
+                        <div className="p_toolRight" style={{ borderBottomRightRadius: '15px' }}>
+                          <MethodContext.Provider value={{ registerChatMethods: this.registerChatMethods }}>
+                            <ChatWidget
+                                window_title={currentFlow?.name || title}
+                                flow_id={currentFlow?.id || appId}
+                                tags={currentFlow?.keywords || tags}
+                                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,
+                                  isHideTabSelector,
+                                  customAiToldYou
+                                }}
+                                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}
+                                cnxwBottomUrl={cnxwBottomUrl}
+                            />
+                          </MethodContext.Provider>
+                        </div>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+          <Drawer
+              title={null}
+              closable={false}
+              placement="right"
+              width={'300px'}
+              bodyStyle={{ padding: 0 }}
+              onClose={() => this.setState({ isShowHistoryList: false })}
+              open={this.state.isShowHistoryList}
+          >
+            <div className="p_historyDialog">
+              <div className="p_historyTitle">
+                <div className="p_dialogTitle">对话列表</div>
+                <Tooltip
+                    title={isEmpty(userInfo) ? '当前历史记录将会在页面刷新后清除' : '历史对话记录'}><HistoryOutlined
+                    style={{ color: '#A4A4A4' }}/></Tooltip>
+              </div>
+              {this.state.historyList.length > 0 ? (
+                  <div className="p_historyList">
+                    {this.state.historyList?.map((item) => (
+                        <div
+                            key={item.session_id}
+                            className={`p_historyItem ${item.session_id === this.state.sessionId ? 'p_activeItem' : ''}`}
+                            onClick={() => {
+                              this.setState({ dropDownList: undefined })
+                              this.updateSessionId(item.session_id);
+                            }}
+                        >
+                          <div
+                              className={`p_historyName ${item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''}`}
+                          >
+                            <CommentIcon style={{
+                              marginRight: '8px',
+                              fill: item.session_id === this.state.sessionId ? '#FFFFFF' : '#bfbfbf'
+                            }}/>
+                            <span>{item.text}</span>
+                          </div>
+                        </div>
+                    ))}
+                  </div>
+              ) : (
+                  <div className="p_historyListEmpty">
+                    <img src={historyListEmptyPng}/>
+                    <div className="p_historyListEmptyText">暂无对话记录</div>
+                  </div>
+              )}
+            </div>
+          </Drawer>
+        </div>
+    );
+  }
+}
+
+export default ToolDialogV3;