yt-chat-components 0.1.0

package/src/YtChatView/logoBtn/index.css

@@ -0,0 +1,4 @@
+/* Modal 样式 */
+.yt-chat-modal .ant-modal-content {
+    padding: 0 !important;
+}

package/src/YtChatView/logoBtn/index.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import ToolDialog from "../previewDialog";
+import { Modal } from 'antd';
+import './index.css'
+
+class LogoBtn extends React.Component {
+  state={
+    isShow:false
+  }
+
+    render() {
+    const { left, right, top, bottom, width, height, iconUrl, title, flowId, hostUrl, userInfo, tags,boxStyle } = this.props;
+    const iconConfig = {
+      width: `${width || 100}px`,
+      height: `${height || 100}px`,
+    }
+
+    if(left){
+      iconConfig.left = `${left}px`;
+    }else if(right){
+      iconConfig.right = `${right}px`;
+    }else {
+      iconConfig.right = `50px`;
+    }
+
+    if(top){
+      iconConfig.top = `${top}px`;
+    }else if(bottom){
+      iconConfig.bottom = `${bottom}px`;
+    }else {
+      iconConfig.bottom = `50px`;
+    }
+
+    return (
+        // <div style={{ position: "relative", width: "100vw", height: "100vh", background:'transparent' }}>
+          <div style={{ position: "absolute", ...iconConfig }}>
+            <img src={iconUrl} style={{ width: "100%", height: "100%" }} onClick={(event) => this.setState({ isShow: true })}/>
+            <Modal
+                wrapClassName={'yt-chat-modal'}
+                open={this.state.isShow}
+                width={1000}
+                closable={false}
+                onCancel={() => this.setState({ isShow: false })}
+                footer={null}
+                centered={true}
+            >
+              <ToolDialog
+                  title={title}
+                  flowId={flowId}
+                  hostUrl={hostUrl}
+                  setDialogVisible={() => {
+                    this.setState({ isShow: false })
+                  }}
+                  userInfo={userInfo || {}}
+                  tags={tags || []}
+                  boxStyle={boxStyle || { position: 'relative', height: '700px' }}
+              />
+            </Modal>
+          </div>
+        // </div>
+    );
+  }
+}
+
+export default LogoBtn;

package/src/YtChatView/logoSplitBtn/index.css

@@ -0,0 +1,4 @@
+/* Modal 样式 */
+.yt-chat-modal .ant-modal-content {
+    padding: 0 !important;
+}

package/src/YtChatView/logoSplitBtn/index.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import ToolDialog from "../previewDialog";
+import { Modal } from 'antd';
+import './index.css'
+
+class LogoSplitBtn extends React.Component {
+  state={
+    isShow:false
+  }
+
+    render() {
+    const { left, right, top, bottom, width, height, iconUrl, title, flowId, hostUrl, userInfo, tags,boxStyle, sceneId} = this.props;
+    const iconConfig = {
+      width: `${width || 100}px`,
+      height: `${height || 100}px`,
+    }
+
+    if(left){
+      iconConfig.left = `${left}px`;
+    }else if(right){
+      iconConfig.right = `${right}px`;
+    }else {
+      iconConfig.right = `50px`;
+    }
+
+    if(top){
+      iconConfig.top = `${top}px`;
+    }else if(bottom){
+      iconConfig.bottom = `${bottom}px`;
+    }else {
+      iconConfig.bottom = `50px`;
+    }
+
+    return (
+        // <div style={{ position: "relative", width: "100vw", height: "100vh", background:'transparent' }}>
+          <div style={{ position: "absolute", ...iconConfig }}>
+            <img src={iconUrl} style={{ width: "100%", height: "100%" }} onClick={(event) => this.setState({ isShow: true })}/>
+            <Modal
+                wrapClassName={'yt-chat-modal'}
+                open={this.state.isShow}
+                width={1300}
+                closable={false}
+                onCancel={() => this.setState({ isShow: false })}
+                footer={null}
+                centered={true}
+            >
+              <ToolDialog
+                  title={title}
+                  flowId={flowId}
+                  hostUrl={hostUrl}
+                  setDialogVisible={() => {
+                    this.setState({ isShow: false })
+                  }}
+                  userInfo={userInfo || {}}
+                  tags={tags || []}
+                  boxStyle={boxStyle || { position: 'relative', height: '700px' }}
+                  isShowSideRight={true}
+                  sceneId={sceneId}
+              />
+            </Modal>
+          </div>
+        // </div>
+    );
+  }
+}
+
+export default LogoSplitBtn;

package/src/YtChatView/previewDialog/index.jsx

@@ -0,0 +1,431 @@
+import React from 'react';
+import ChatWidget from '../chatWidget/index';
+import aiAvatarPng from '../../assets/aicenter/aiavatar.png';
+import historyPng from '../../assets/aicenter/history.png';
+import closePng from '../../assets/aicenter/close.png';
+import { getHistoryList, getSceneInfo } from '../chatWidget/chatWindow/controllers/index';
+import './index.module.css'
+import { v4 as uuidv4 } from 'uuid';
+import historyListEmptyPng from '../../assets/aicenter/history-list-empty.png';
+import addPng from '../../assets/aicenter/add.png';
+import {isEmpty, isFunction} from "lodash";
+import { Button, message as messageTip, Progress } from 'antd'
+import { CloseOutlined } from "@ant-design/icons";
+import moreAi from '../../assets/aicenter/moreAi.png';
+import moreBg from '../../assets/aicenter/moreBg.png';
+
+
+const style=`
+.p_closeImg {
+  width: 14px;
+  cursor: pointer;
+}
+
+.p_toolDialog {
+  display: flex;
+  height:100%;
+}
+
+.p_toolDialog .p_toolLeft {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  height: 100%;
+  background: linear-gradient(180deg, #CFDAFC 0%, #F0F3FF 100%);
+  padding: 24px;
+  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: 60px;
+}
+
+.p_toolDialog .p_toolLeft .p_toolLogo .p_logoText {
+  font-weight: bold;
+  margin-left: 10px;
+  padding-top: 16px;
+  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;
+}
+
+.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: 16px 16px 0 16px;
+  display: flex;
+  align-items: center;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_historyImg {
+  width: 20px;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_dialogTitle {
+  font-weight: bold;
+  font-size: 16px;
+  margin-left: 10px;
+  color: #666666;
+}
+
+.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;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList {
+  margin-top: 10px;
+  // height: 360px;
+  overflow-y: auto;
+  scrollbar-width: none !important; /* firefox */
+}
+
+.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;
+  // width: calc(100% - 300px - 300px);
+}
+
+.p_toolRightToRight{
+  width:300px;
+  display:flex;
+  flex-direction:column;
+  padding:24px;
+}
+.rightInnerContainer{
+  height:calc(100% - 80px);
+  flex:1;
+}
+.p_toolRightToRight .rightSideTitle{
+  margin-bottom:40px;
+  margin-top:0;
+  font-size:18px;
+  font-weight:500;
+}
+.p_toolRightToRight .rightSideTitle .titleSideColumn{
+  color:#1551FF;
+}
+.p_toolRightToRight .rightSkillContainer{
+  min-height:40%;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin-bottom: 20px;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem{
+  text-align: center;
+  cursor:pointer;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem img{
+  width: 40px;
+   height: 40px;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem  p{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width:80px;
+}
+.p_toolRightToRight .rightKnowledgeTitle{
+  margin-bottom:64px;
+  font-size:18px;
+  font-weight:500;
+}
+.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;
+  background: linear-gradient(244deg, #828EFE 0%, #4B4FFF 100%);
+  margin-top: 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p_newDialog img {
+  width: 18px;
+}
+
+.p_newDialog .p_newDialogText {
+  color: #fff;
+  margin-left: 6px;
+}
+`
+
+const defaultList = [
+  {
+    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-01.png',
+    title: '我这学期的课程安排是什么样？',
+  },
+  {
+    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-02.png',
+    title: '我上个学期的成绩是多少？',
+  },
+  {
+    backgroundImg: 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-03.png',
+    title: '哪里可以找到心理咨询服务？',
+  },
+];
+
+
+const api_key = 'sk-mniUFDpcWwvNF3iFzssXa6etN-S_Y4AApyHYcBU44L0';
+
+
+class ToolDialog extends React.Component {
+  state = {
+    historyList: [], // 历史对话列表
+    sessionId: uuidv4(), // 当前激活的对话对应的sessionId
+    dropDownList: [],
+    sceneInfo: {},
+    currentFlow: {},
+  };
+
+  async componentDidMount() {
+    const sceneData = await this.getSceneInfo();
+    console.log("sceneData",sceneData)
+    if(isEmpty(sceneData)) {
+      this.getHistoryList();
+    } else {
+      this.getHistoryList(sceneData);
+    }
+    this.setState({dropDownList:defaultList})
+  }
+
+  getCurrentFlowHistory=(flowId)=>{
+    const operationId = this.props.userInfo['code'] | '';
+    getHistoryList(this.props.hostUrl, flowId, operationId).then((res) => {
+      if(res.status === 200){
+        this.setState({ historyList: res.data });
+      }
+    });
+  }
+
+  // 获取历史对话列表
+  getHistoryList = (sceneData) => {
+    const realFlowId = sceneData.flows[0].id || this.props.flowId;
+    this.setState({ currentFlow: sceneData.flows[0] })
+    this.getCurrentFlowHistory(realFlowId)
+  };
+
+  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;
+  }
+
+  // 新建对话
+  newDialog = () => {
+    if(this.state.dropDownList) {
+      messageTip.info("当前已是最新对话")
+      return;
+    }
+    this.setState({ sessionId: uuidv4() });
+    this.setState({ dropDownList: defaultList })
+  }
+  updateSessionId = (sessionId) => {
+    this.setState({ sessionId });
+  };
+
+  render() {
+    const dialogHeight = 650;
+    const { title, flowId, hostUrl, setDialogVisible, userInfo, tags, boxStyle, isShowSideRight } = this.props;
+    const { dropDownList, sceneInfo, currentFlow } = this.state;
+    const { flows=[], name: sceneName } = sceneInfo;
+    return (
+        <div style={boxStyle}>
+          <style dangerouslySetInnerHTML={{ __html: style }}></style>
+          <div style={{ position: 'absolute', top: '18px', right: '18px', zIndex: 999 }}>
+            {isFunction(setDialogVisible) &&
+            <img onClick={() => setDialogVisible(false)} className="p_closeImg" src={closePng}/>}
+          </div>
+          <div className="p_toolDialog">
+            <div className="p_toolLeft">
+              <div className="p_toolLogo">
+                <img className="p_logoImg" src={aiAvatarPng}/>
+                <div className="p_logoText">校园智多星</div>
+              </div>
+              <div className="p_historyDialog">
+                <div className="p_historyTitle">
+                  <img className="p_historyImg" src={historyPng}/>
+                  <div className="p_dialogTitle">对话列表</div>
+                </div>
+                {this.state.historyList.length > 0 ? (
+                    <div className="p_historyList">
+                      {this.state.historyList?.map((item) => (
+                          <div
+                              key={item.session_id}
+                              className="p_historyItem"
+                              onClick={() => {
+                                this.setState({ dropDownList: undefined })
+                                this.updateSessionId(item.session_id);
+                              }}
+                          >
+                            <div
+                                className={`p_historyName ${
+                                    item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''
+                                }`}
+                            >
+                              {item.text}
+                            </div>
+                          </div>
+                      ))}
+                    </div>
+                ) : (
+                    <div className="p_historyListEmpty">
+                      <img src={historyListEmptyPng}/>
+                      <div className="p_historyListEmptyText">暂无对话记录</div>
+                    </div>
+                )}
+              </div>
+              <div className="p_newDialog" onClick={() => {
+                this.newDialog()
+              }}>
+                <img src={addPng}/>
+                <div className="p_newDialogText">新建对话</div>
+              </div>
+            </div>
+            <div className="p_toolRight">
+              <ChatWidget
+                  window_title={currentFlow.name}
+                  flow_id={currentFlow.id}
+                  tags={tags}
+                  host_url={hostUrl}
+                  // height={dialogHeight + 'px'}
+                  api_key={api_key}
+                  session_id={this.state.sessionId}
+                  userInfo={userInfo}
+                  getHistoryList={this.getHistoryList}
+                  setDropDownList={(list) => this.setState({ dropDownList: list })}
+                  dropDownList={dropDownList}
+              />
+            </div>
+            {
+              isShowSideRight&&
+              <div className={"p_toolRightToRight"}>
+                <div className={"rightInnerContainer"}>
+                  <h3 className={"rightSideTitle"} ><span className={"titleSideColumn"} >▎</span>专项技能</h3>
+                  <div className={"rightSkillContainer"}>
+                    <div className={"rightSkillList"}>
+                      {flows.slice(0,9).map((item) => (
+                          <div className={"rightSkillItem"} key={item.id} onClick={()=>{
+                          //  右侧点击一个技能，更新sessionId，切换当前flow信息，重新查询历史记录
+                            this.setState({ sessionId: uuidv4(),currentFlow: item});
+                            this.getCurrentFlowHistory(item.id);
+                          }}>
+                            <img
+                                src={item.icon}
+                                alt={item.name}/>
+                            <p>{item.name}</p>
+                          </div>
+                      ))}
+                    </div>
+                  </div>
+                  <h4 className={"rightKnowledgeTitle"} style={{ marginBottom: '36px' }}><span style={{color:"#1551FF"}}>▎</span>个人知识库</h4>
+                  <div className={"rightKnowledgeContainer"} style={{ marginBottom: '20px' }}>
+                    <img src={moreBg}/>
+                    <div style={{position:'absolute', top:'40px',left:'16px'}}>
+                      <div>文件总数<span style={{padding:8,fontSize:'20px',fontWeight:700}}>180</span>个</div>
+                      <div style={{marginTop:10}}>文件总量<span style={{padding:8,fontSize:'20px',fontWeight:700}}>200</span>GB</div>
+                    </div>
+                    <div className={"rightMoreButton"}>
+                      <div className={"rightMoreTitle"} onClick={()=>messageTip.info("敬请期待")}>训练你的专属知识库</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+    );
+  }
+}
+
+export default ToolDialog;