yt-chat-components 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "yt-chat-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"main": "build/static/js/bundle.min.js",
|
|
5
5
|
"module": "build/static/js/bundle.min.js",
|
|
6
6
|
"types": "build/static/js/index.d.ts",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"axios": "^1.4.0",
|
|
22
22
|
"lodash": "^4.17.21",
|
|
23
23
|
"lucide-react": "^0.256.0",
|
|
24
|
+
"react-draggable": "^4.4.6",
|
|
24
25
|
"react": "^17.0.0 || ^18.0.0",
|
|
25
26
|
"react-dom": "^17.0.0 || ^18.0.0",
|
|
26
27
|
"react-markdown": "^8.0.7",
|
|
@@ -835,6 +835,7 @@ export default function ChatWindow({
|
|
|
835
835
|
</div>
|
|
836
836
|
<div
|
|
837
837
|
className="cl-messages_container"
|
|
838
|
+
style={isMobile ? {paddingLeft: '0', paddingRight: '0'} :{}}
|
|
838
839
|
// style={{ maxWidth: '100%', minHeight:'300px', height:'700px', paddingBottom: '56px' }}
|
|
839
840
|
>
|
|
840
841
|
{messages.map((message, index) => (
|
|
@@ -868,7 +869,20 @@ export default function ChatWindow({
|
|
|
868
869
|
</div>
|
|
869
870
|
<div
|
|
870
871
|
className="w_tagListClass"
|
|
871
|
-
style={
|
|
872
|
+
style={isMobile ?
|
|
873
|
+
{
|
|
874
|
+
display: tagList?.length > 0 ? '' : 'none',
|
|
875
|
+
zIndex: tagList?.length > 0 ? '2' : '-1',
|
|
876
|
+
maxWidth: 'calc(100vw - 3.2rem)',
|
|
877
|
+
flexWrap: "nowrap",
|
|
878
|
+
overflowX: "auto",
|
|
879
|
+
WebkitOverflowScrolling: 'touch',
|
|
880
|
+
scrollbarWidth: "none",
|
|
881
|
+
overflowY: "hidden",
|
|
882
|
+
background: 'transparent',
|
|
883
|
+
}
|
|
884
|
+
:
|
|
885
|
+
{
|
|
872
886
|
// bottom: fileList.length > 0 ? '130px' : '80px',
|
|
873
887
|
display: tagList?.length > 0 ? '' : 'none',
|
|
874
888
|
zIndex: tagList?.length > 0 ? '2' : '-1',
|
|
@@ -891,7 +905,7 @@ export default function ChatWindow({
|
|
|
891
905
|
alt="Image"
|
|
892
906
|
/>
|
|
893
907
|
</div>
|
|
894
|
-
<div className="w_tagItemText">{item?.name}</div>
|
|
908
|
+
<div className="w_tagItemText" style={isMobile ? {wordBreak: "keep-all"} : {}}>{item?.name}</div>
|
|
895
909
|
</div>
|
|
896
910
|
))}
|
|
897
911
|
</div>
|
|
@@ -2439,6 +2439,11 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2439
2439
|
flex-wrap: wrap;
|
|
2440
2440
|
gap: 8px;
|
|
2441
2441
|
}
|
|
2442
|
+
.w_tagListClass::-webkit-scrollbar {
|
|
2443
|
+
height: 0px;
|
|
2444
|
+
display: none;
|
|
2445
|
+
background: transparent;
|
|
2446
|
+
}
|
|
2442
2447
|
.w_tagListClass .w_tagItemBox {
|
|
2443
2448
|
padding: 8px 12px;
|
|
2444
2449
|
display: flex;
|
|
@@ -7,20 +7,16 @@ import { getFlowInfo, getHistoryList, getSceneInfo } from '../chatWidget/chatWin
|
|
|
7
7
|
import './index.module.css'
|
|
8
8
|
import { v4 as uuidv4 } from 'uuid';
|
|
9
9
|
import historyListEmptyPng from '../../assets/aicenter/history-list-empty.png';
|
|
10
|
-
import addPng from '../../assets/aicenter/add.png';
|
|
11
10
|
import {isEmpty, isFunction} from "lodash";
|
|
12
|
-
import {
|
|
13
|
-
import { CloseOutlined } from "@ant-design/icons";
|
|
11
|
+
import {Button, message as messageTip, Progress, Skeleton, Drawer, Tabs} from 'antd'
|
|
14
12
|
import moreAi from '../../assets/aicenter/moreAi.png';
|
|
15
|
-
import moreBg from '../../assets/aicenter/moreBg.png';
|
|
16
13
|
import icon_history from '../../assets/aicenter/icon_history.png';
|
|
17
14
|
import icon_agents from '../../assets/aicenter/icon_agents.png';
|
|
18
15
|
import icon_history_upload from '../../assets/aicenter/icon_history_upload.png';
|
|
19
16
|
import icon_history_headerbg from '../../assets/aicenter/icon_history_headerbg.png';
|
|
20
17
|
import icon_history_add from '../../assets/aicenter/icon_history_add.png';
|
|
21
|
-
import self_knowledge from '../../assets/aicenter/self_knowledge.png';
|
|
22
|
-
import self_skills from '../../assets/aicenter/self_skills.png';
|
|
23
18
|
import ChatWidget from "../chatWidget";
|
|
19
|
+
import Draggable from 'react-draggable';
|
|
24
20
|
|
|
25
21
|
|
|
26
22
|
const style=`
|
|
@@ -347,7 +343,10 @@ const formatFileSize = (bytes) => {
|
|
|
347
343
|
|
|
348
344
|
|
|
349
345
|
const api_key = 'sk-mniUFDpcWwvNF3iFzssXa6etN-S_Y4AApyHYcBU44L0';
|
|
350
|
-
|
|
346
|
+
const drawerTabs = [
|
|
347
|
+
{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'},
|
|
348
|
+
{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'}
|
|
349
|
+
]
|
|
351
350
|
|
|
352
351
|
export class MobileChatPage extends React.Component {
|
|
353
352
|
state = {
|
|
@@ -356,10 +355,16 @@ export class MobileChatPage extends React.Component {
|
|
|
356
355
|
dropDownList: [],
|
|
357
356
|
sceneInfo: {},
|
|
358
357
|
currentFlow: {},
|
|
358
|
+
currentTabKey:'agent',
|
|
359
359
|
historyDrawerVisible: false, // 抽屉历史记录状态
|
|
360
360
|
agentDrawerVisible: false, // 多智能体切换抽屉状态
|
|
361
361
|
};
|
|
362
362
|
|
|
363
|
+
constructor(props) {
|
|
364
|
+
super(props);
|
|
365
|
+
this.dragging = false;
|
|
366
|
+
}
|
|
367
|
+
|
|
363
368
|
async componentDidMount() {
|
|
364
369
|
if(isEmpty(this.props.sceneId)){
|
|
365
370
|
// 兼容非场景打开的情况
|
|
@@ -377,8 +382,8 @@ export class MobileChatPage extends React.Component {
|
|
|
377
382
|
|
|
378
383
|
setWindowTitle = (title) => {
|
|
379
384
|
if (!isEmpty(title)){
|
|
380
|
-
document.title =
|
|
381
|
-
window.document.title =
|
|
385
|
+
document.title = 'AI校园智多星';
|
|
386
|
+
window.document.title = 'AI校园智多星';
|
|
382
387
|
}
|
|
383
388
|
}
|
|
384
389
|
|
|
@@ -516,7 +521,8 @@ export class MobileChatPage extends React.Component {
|
|
|
516
521
|
position: 'absolute',
|
|
517
522
|
left: '0px',
|
|
518
523
|
top: '0px',
|
|
519
|
-
zIndex: 1000
|
|
524
|
+
zIndex: 1000,
|
|
525
|
+
display: 'none',
|
|
520
526
|
}}
|
|
521
527
|
onClick={() => this.setState({drawerVisible: true})}
|
|
522
528
|
/>
|
|
@@ -535,57 +541,79 @@ export class MobileChatPage extends React.Component {
|
|
|
535
541
|
<img style={{width: 35}} src={agentUrl}/>
|
|
536
542
|
<span style={{fontSize: 24, marginLeft: 10}}>{agentName}</span>
|
|
537
543
|
</div>
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
544
|
+
{/*<div className="drawer-history-header-tool" style={{display: 'flex',flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 32 }}>*/}
|
|
545
|
+
{/* <div*/}
|
|
546
|
+
{/* style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginRight: 20, height: 44,background: '#fff', borderRadius: 5,width: '45%'}}*/}
|
|
547
|
+
{/* onClick={() => {this.newDialog()}}*/}
|
|
548
|
+
{/* >*/}
|
|
549
|
+
{/* <img src={icon_history_add} style={{width: '20px', height: '20px', marginRight: 10}}/>*/}
|
|
550
|
+
{/* <span>新建对话</span>*/}
|
|
551
|
+
{/* </div>*/}
|
|
552
|
+
{/* <div*/}
|
|
553
|
+
{/* style={{*/}
|
|
554
|
+
{/* display: 'flex',*/}
|
|
555
|
+
{/* flexDirection: 'row',*/}
|
|
556
|
+
{/* alignItems: 'center',*/}
|
|
557
|
+
{/* justifyContent: 'center',*/}
|
|
558
|
+
{/* marginRight: 20,*/}
|
|
559
|
+
{/* height: 44,*/}
|
|
560
|
+
{/* background: '#fff',*/}
|
|
561
|
+
{/* borderRadius: 5,*/}
|
|
562
|
+
{/* width: '45%',*/}
|
|
563
|
+
{/* zIndex: 0*/}
|
|
564
|
+
{/* }}*/}
|
|
565
|
+
{/* onClick={() => messageTip.info("敬请期待")}*/}
|
|
566
|
+
{/* >*/}
|
|
567
|
+
{/* <img src={icon_history_upload} style={{width: '20px', height: '20px', marginRight: 10}}/>*/}
|
|
568
|
+
{/* <span>个人知识库</span>*/}
|
|
569
|
+
{/* </div>*/}
|
|
570
|
+
{/*</div>*/}
|
|
565
571
|
</div>
|
|
566
572
|
<div
|
|
567
573
|
className="p_historyDialog"
|
|
568
574
|
style={{
|
|
569
|
-
height: 'calc(100% -
|
|
575
|
+
height: 'calc(100% - 146px - 50px)',
|
|
570
576
|
boxSizing: 'border-box',
|
|
571
577
|
userSelect: 'none',
|
|
572
578
|
flex: 1,
|
|
573
|
-
padding: '30px 14px 0 14px',
|
|
574
579
|
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)',
|
|
575
580
|
borderImage: 'linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1',
|
|
576
581
|
backdropFilter: 'blur(10px)',
|
|
577
582
|
position: 'relative',
|
|
578
583
|
}}
|
|
579
584
|
>
|
|
580
|
-
<div
|
|
581
|
-
|
|
582
|
-
|
|
585
|
+
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
|
|
586
|
+
{
|
|
587
|
+
drawerTabs.map((item, index) => (
|
|
588
|
+
<div id={item.id} style={{
|
|
589
|
+
width:'50%',
|
|
590
|
+
display: 'flex',
|
|
591
|
+
WebkitTapHighlightColor: 'transparent',
|
|
592
|
+
userSelect: 'none',
|
|
593
|
+
WebkitUserSelect: 'none',
|
|
594
|
+
WebkitTouchCallout: 'none',
|
|
595
|
+
flexDirection: 'row',
|
|
596
|
+
alignItems: 'center',
|
|
597
|
+
justifyContent: 'center',
|
|
598
|
+
cursor: 'pointer',
|
|
599
|
+
padding: '30px 14px 15px 14px',
|
|
600
|
+
borderBottom: this.state.currentTabKey === item.id ? '2px solid #2850FF' : '2px solid #fff'
|
|
601
|
+
}}
|
|
602
|
+
onClick={() => this.setState({currentTabKey: item.id})}
|
|
603
|
+
>
|
|
604
|
+
<img style={{width:16, marginRight: 8}} src={this.state.currentTabKey === item.id ? item.activeIcon : item.icon} />
|
|
605
|
+
<div style={{fontSize:16, fontWeight: 'bold', color: this.state.currentTabKey === item.id ? '#2850FF' : '#333'}}>{item.name}</div>
|
|
606
|
+
</div>
|
|
607
|
+
))
|
|
608
|
+
}
|
|
583
609
|
</div>
|
|
584
|
-
{
|
|
585
|
-
|
|
586
|
-
|
|
610
|
+
{/*专项技能*/}
|
|
611
|
+
{
|
|
612
|
+
this.state.currentTabKey === 'agent' &&
|
|
613
|
+
<div className="p_historyList" style={{overflowY: 'auto', height: 'calc(100% - 90px)'}}>
|
|
614
|
+
{flows?.map((item) => (
|
|
587
615
|
<div
|
|
588
|
-
key={item.
|
|
616
|
+
key={item.id}
|
|
589
617
|
className="p_historyItem"
|
|
590
618
|
style={{
|
|
591
619
|
display: 'flex',
|
|
@@ -597,37 +625,103 @@ export class MobileChatPage extends React.Component {
|
|
|
597
625
|
fontSize: 14,
|
|
598
626
|
color: '#333',
|
|
599
627
|
borderRadius: 10,
|
|
600
|
-
|
|
628
|
+
marginBottom: 24,
|
|
601
629
|
}}
|
|
602
630
|
onClick={() => {
|
|
603
|
-
|
|
604
|
-
this.
|
|
631
|
+
// 右侧点击一个技能，更新sessionId，切换当前flow信息，重新查询历史记录
|
|
632
|
+
this.setState({
|
|
633
|
+
sessionId: uuidv4(),
|
|
634
|
+
currentFlow: item,
|
|
635
|
+
dropDownList: this.getDropDownList(item.welcome_words),
|
|
636
|
+
agentDrawerVisible: false,
|
|
637
|
+
});
|
|
638
|
+
this.setWindowTitle(item.name)
|
|
639
|
+
this.getCurrentFlowHistory(item.id);
|
|
605
640
|
}}
|
|
606
641
|
>
|
|
607
642
|
<div
|
|
608
|
-
className={`p_historyName ${
|
|
609
|
-
item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''
|
|
610
|
-
}`}
|
|
611
643
|
style={{
|
|
644
|
+
width:'100%',
|
|
645
|
+
display: 'flex',
|
|
646
|
+
flexDirection: 'row',
|
|
647
|
+
alignItems: 'center',
|
|
648
|
+
justifyContent: 'space-between',
|
|
612
649
|
whiteSpace: 'nowrap',
|
|
613
650
|
overflow: 'hidden',
|
|
614
651
|
textOverflow: 'ellipsis',
|
|
615
652
|
color: item.session_id === this.state.sessionId ? '#1551FF' : '#333',
|
|
616
653
|
}}
|
|
617
654
|
>
|
|
618
|
-
{
|
|
655
|
+
<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', color:'#333', fontSize:'16px', textAlign:'left', fontWeight:'bold'}}>
|
|
656
|
+
<img
|
|
657
|
+
src={item.icon}
|
|
658
|
+
alt={item.name}
|
|
659
|
+
style={{width: '36px', borderRadius:5, marginRight: 10}}
|
|
660
|
+
/>
|
|
661
|
+
{item.name}
|
|
662
|
+
</div>
|
|
663
|
+
|
|
664
|
+
<img
|
|
665
|
+
src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/icon/icon_arrow_right.png'}
|
|
666
|
+
style={{ height: '5px'}}
|
|
667
|
+
/>
|
|
619
668
|
</div>
|
|
620
669
|
</div>
|
|
621
670
|
))}
|
|
622
671
|
</div>
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
{/*对话记录*/}
|
|
675
|
+
{
|
|
676
|
+
this.state.currentTabKey === 'history' &&
|
|
677
|
+
(this.state.historyList.length > 0 ? (
|
|
678
|
+
<div className="p_historyList" style={{overflowY: 'auto', height: 'calc(100% - 70px)'}}>
|
|
679
|
+
{this.state.historyList?.map((item) => (
|
|
680
|
+
<div
|
|
681
|
+
key={item.session_id}
|
|
682
|
+
className="p_historyItem"
|
|
683
|
+
style={{
|
|
684
|
+
display: 'flex',
|
|
685
|
+
height: 44,
|
|
686
|
+
alignItems: 'center',
|
|
687
|
+
paddingLeft: 30,
|
|
688
|
+
paddingRight: 30,
|
|
689
|
+
fontWeight: 400,
|
|
690
|
+
fontSize: 14,
|
|
691
|
+
color: '#333',
|
|
692
|
+
borderRadius: 10,
|
|
693
|
+
background: item.session_id === this.state.sessionId ? '#F5F5FF' : '#fff',
|
|
694
|
+
}}
|
|
695
|
+
onClick={() => {
|
|
696
|
+
this.setState({dropDownList: undefined, drawerVisible: false})
|
|
697
|
+
this.updateSessionId(item.session_id);
|
|
698
|
+
}}
|
|
699
|
+
>
|
|
700
|
+
<div
|
|
701
|
+
className={`p_historyName ${
|
|
702
|
+
item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''
|
|
703
|
+
}`}
|
|
704
|
+
style={{
|
|
705
|
+
whiteSpace: 'nowrap',
|
|
706
|
+
overflow: 'hidden',
|
|
707
|
+
textOverflow: 'ellipsis',
|
|
708
|
+
color: item.session_id === this.state.sessionId ? '#1551FF' : '#333',
|
|
709
|
+
}}
|
|
710
|
+
>
|
|
711
|
+
{item.text}
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
))}
|
|
715
|
+
</div>
|
|
716
|
+
) : (
|
|
717
|
+
<div className="p_historyListEmpty" style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 50}}>
|
|
718
|
+
<img src={historyListEmptyPng} style={{width: '100px', height: '100px', marginBottom: 20}}/>
|
|
719
|
+
<div className="p_historyListEmptyText" style={{fontSize: 16, color: '#999' }}>暂无对话记录</div>
|
|
720
|
+
</div>
|
|
721
|
+
))
|
|
722
|
+
}
|
|
629
723
|
</div>
|
|
630
|
-
<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop:
|
|
724
|
+
<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 10, marginBottom: 20}}>
|
|
631
725
|
{
|
|
632
726
|
isShowLogin &&
|
|
633
727
|
<div
|
|
@@ -642,16 +736,11 @@ export class MobileChatPage extends React.Component {
|
|
|
642
736
|
borderRadius: 10
|
|
643
737
|
}}
|
|
644
738
|
onClick={() => {
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
}else {
|
|
648
|
-
if (typeof wx !== 'undefined' && wx.miniProgram) {
|
|
649
|
-
wx.miniProgram.navigateTo({url: '/pages/login/index'});
|
|
650
|
-
}
|
|
651
|
-
}
|
|
739
|
+
this.setState({drawerVisible: false})
|
|
740
|
+
this.newDialog()
|
|
652
741
|
}}
|
|
653
742
|
>
|
|
654
|
-
|
|
743
|
+
新建对话
|
|
655
744
|
</div>
|
|
656
745
|
}
|
|
657
746
|
</div>
|
|
@@ -686,6 +775,13 @@ export class MobileChatPage extends React.Component {
|
|
|
686
775
|
{
|
|
687
776
|
isShowSideRight && (
|
|
688
777
|
<>
|
|
778
|
+
<Draggable onStart={() => { this.dragging = false; }}
|
|
779
|
+
onDrag={() => { this.dragging = true; }}
|
|
780
|
+
onStop={(e) => {
|
|
781
|
+
if (!this.dragging) {
|
|
782
|
+
this.setState({drawerVisible: true})
|
|
783
|
+
}
|
|
784
|
+
}}>
|
|
689
785
|
<img
|
|
690
786
|
src={icon_agents}
|
|
691
787
|
style={{
|
|
@@ -696,8 +792,8 @@ export class MobileChatPage extends React.Component {
|
|
|
696
792
|
bottom: '200px',
|
|
697
793
|
zIndex: 1000
|
|
698
794
|
}}
|
|
699
|
-
onClick={() => this.setState({agentDrawerVisible: true})}
|
|
700
795
|
/>
|
|
796
|
+
</Draggable>
|
|
701
797
|
<Drawer
|
|
702
798
|
title={'专项技能'}
|
|
703
799
|
// closable={false}
|