yt-chat-components 0.9.1 → 0.9.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 +1 -1
- package/public/index.html +2 -3
- package/src/YtChatView/chatWidget/chatWindow/index.tsx +29 -3
- package/src/YtChatView/chatWidget/index.tsx +77 -1
- package/src/YtChatView/logoBtn/index.jsx +1 -0
- package/src/YtChatView/logoSplitBtn/index.jsx +1 -0
- package/src/YtChatView/previewDialog/index.jsx +5 -3
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<!--/>-->
|
|
33
33
|
<!--</body>-->
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
<body style="width: 100vw; height: 100vh; margin:0 ">
|
|
36
36
|
<!--<yt-page-chat-->
|
|
37
37
|
<!-- title="菜鸟驿站"-->
|
|
38
38
|
<!-- host-url="https://ai-api.yuntu.cn"-->
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
is-show-side-left=true
|
|
69
69
|
scene-id="c1e7a2a4-6127-4e53-a529-113da78eb069"
|
|
70
70
|
modal-index="9999999999"
|
|
71
|
-
modal-width="
|
|
71
|
+
modal-width="1300"
|
|
72
72
|
dialog-index="999999999"
|
|
73
73
|
agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/agent.png"
|
|
74
74
|
agent-name="医专智能助手"
|
|
@@ -77,7 +77,6 @@
|
|
|
77
77
|
logo-position="fixed"
|
|
78
78
|
is-title-side-icon=false
|
|
79
79
|
is-show-upload-button=false
|
|
80
|
-
drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"
|
|
81
80
|
/>
|
|
82
81
|
</body>
|
|
83
82
|
</html>
|
|
@@ -72,6 +72,7 @@ export default function ChatWindow({
|
|
|
72
72
|
baseConfig = {},
|
|
73
73
|
isShowUploadButton,
|
|
74
74
|
dropManUrl = '',
|
|
75
|
+
modalWidth
|
|
75
76
|
}: {
|
|
76
77
|
tags: [];
|
|
77
78
|
getHistoryList: Function;
|
|
@@ -111,6 +112,7 @@ export default function ChatWindow({
|
|
|
111
112
|
baseConfig: object;
|
|
112
113
|
isShowUploadButton: boolean;
|
|
113
114
|
dropManUrl: string;
|
|
115
|
+
modalWidth: number;
|
|
114
116
|
}) {
|
|
115
117
|
const [value, setValue] = useState<string>('');
|
|
116
118
|
const ref = useRef<HTMLDivElement>(null);
|
|
@@ -615,6 +617,24 @@ export default function ChatWindow({
|
|
|
615
617
|
};
|
|
616
618
|
}, [sessionId]);
|
|
617
619
|
|
|
620
|
+
/**
|
|
621
|
+
* 开场白展示优化
|
|
622
|
+
* 1、如果是全屏模式：则横向展示三项开场白
|
|
623
|
+
* 2、如果是弹窗模式，则当弹窗宽度大于【x】时横向展示三项开场白，当小于等于【x】时则纵向展示三项开场白
|
|
624
|
+
* */
|
|
625
|
+
const judgeDropClass = () => {
|
|
626
|
+
if (modalWidth === undefined) {
|
|
627
|
+
if(isEmpty(dropManUrl)){
|
|
628
|
+
return 'cl-drop-down';
|
|
629
|
+
}
|
|
630
|
+
return 'cl-drop-screen';
|
|
631
|
+
}
|
|
632
|
+
if (modalWidth > 1800) {
|
|
633
|
+
return 'cl-drop-man';
|
|
634
|
+
}
|
|
635
|
+
return 'cl-drop-horizontal'
|
|
636
|
+
}
|
|
637
|
+
|
|
618
638
|
|
|
619
639
|
return (
|
|
620
640
|
<div
|
|
@@ -665,13 +685,19 @@ export default function ChatWindow({
|
|
|
665
685
|
</div>
|
|
666
686
|
</div>
|
|
667
687
|
:
|
|
668
|
-
<div className=
|
|
688
|
+
<div className={judgeDropClass()}>
|
|
669
689
|
<img className="drop-man-img" src={dropManUrl}/>
|
|
670
690
|
<div className="cl-drop-down">
|
|
671
691
|
<div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
|
|
672
692
|
<div className="drop-down-list">
|
|
673
|
-
{dropDownList.slice(0,
|
|
674
|
-
<div
|
|
693
|
+
{dropDownList.slice(0,3).map(({backgroundImg, title}) => (
|
|
694
|
+
<div
|
|
695
|
+
className="drop-down-item-card"
|
|
696
|
+
key={title}
|
|
697
|
+
onClick={() => {
|
|
698
|
+
setDropDownList(undefined);
|
|
699
|
+
handleClick(title);
|
|
700
|
+
}}>
|
|
675
701
|
<Typography.Paragraph
|
|
676
702
|
className="drop-down-item-title"
|
|
677
703
|
ellipsis={{
|
|
@@ -38,7 +38,8 @@ export default function ChatWidget({
|
|
|
38
38
|
dropDownList,
|
|
39
39
|
baseConfig,
|
|
40
40
|
isShowUploadButton,
|
|
41
|
-
dropManUrl
|
|
41
|
+
dropManUrl,
|
|
42
|
+
modalWidth
|
|
42
43
|
}: {
|
|
43
44
|
tags: [];
|
|
44
45
|
getHistoryList: Function;
|
|
@@ -74,6 +75,7 @@ export default function ChatWidget({
|
|
|
74
75
|
baseConfig:object;
|
|
75
76
|
isShowUploadButton:boolean;
|
|
76
77
|
dropManUrl: string;
|
|
78
|
+
modalWidth: number;
|
|
77
79
|
}) {
|
|
78
80
|
const [open, setOpen] = useState(start_open);
|
|
79
81
|
const [messages, setMessages] = useState<ChatMessageType[]>([]);
|
|
@@ -507,6 +509,79 @@ video {
|
|
|
507
509
|
border-bottom-left-radius: 0;
|
|
508
510
|
}
|
|
509
511
|
|
|
512
|
+
.cl-drop-horizontal{
|
|
513
|
+
width:100%;
|
|
514
|
+
display:flex;
|
|
515
|
+
margin-top:0.81rem;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.cl-drop-horizontal .drop-man-img{
|
|
519
|
+
height:340px;
|
|
520
|
+
margin-right: 4rem;
|
|
521
|
+
margin-left: 3rem;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.cl-drop-horizontal .drop-down-list{
|
|
525
|
+
width:auto;
|
|
526
|
+
display:flex;
|
|
527
|
+
flex-direction:row;
|
|
528
|
+
flex-wrap:wrap;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.cl-drop-horizontal .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
|
|
532
|
+
height:2.4rem;
|
|
533
|
+
width:auto;
|
|
534
|
+
margin-right:20px;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.cl-drop-horizontal .cl-drop-down{
|
|
538
|
+
flex:1;
|
|
539
|
+
position:unset;
|
|
540
|
+
border-bottom-left-radius: 0;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.cl-drop-horizontal .cl-drop-down .drop-down-item-card{
|
|
544
|
+
width:100%;
|
|
545
|
+
height:unset;
|
|
546
|
+
justify-content:unset;
|
|
547
|
+
flex-direction:row;
|
|
548
|
+
align-items: center;
|
|
549
|
+
padding: 0.8rem 1.2rem 0.8rem;
|
|
550
|
+
cursor:pointer;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.cl-drop-horizontal .drop-down-item-bottom-button{
|
|
554
|
+
display:none;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.cl-drop-screen{
|
|
558
|
+
width:100%;
|
|
559
|
+
display:flex;
|
|
560
|
+
margin-top:0.81rem;
|
|
561
|
+
align-items: flex-start;
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
.cl-drop-screen .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
|
|
565
|
+
height:2.4rem;
|
|
566
|
+
width:auto;
|
|
567
|
+
margin-right:20px;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
.cl-drop-screen .drop-man-img{
|
|
571
|
+
height:340px;
|
|
572
|
+
margin-right: 4rem;
|
|
573
|
+
margin-left: 3rem;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.cl-drop-screen .cl-drop-down{
|
|
577
|
+
flex:1;
|
|
578
|
+
position:unset;
|
|
579
|
+
border-bottom-left-radius: 0;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.cl-drop-screen .cl-drop-down .drop-down-item-card{
|
|
583
|
+
width:calc(33% - 0.65rem);
|
|
584
|
+
}
|
|
510
585
|
|
|
511
586
|
.cl-drop-down {
|
|
512
587
|
background: #FFFFFF;
|
|
@@ -2423,6 +2498,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2423
2498
|
baseConfig={baseConfig}
|
|
2424
2499
|
isShowUploadButton={isShowUploadButton}
|
|
2425
2500
|
dropManUrl={dropManUrl}
|
|
2501
|
+
modalWidth={modalWidth}
|
|
2426
2502
|
/>
|
|
2427
2503
|
</div>
|
|
2428
2504
|
);
|
|
@@ -441,10 +441,11 @@ export class ToolDialog extends React.Component {
|
|
|
441
441
|
isTitleSideIcon = false,// 是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
|
|
442
442
|
modalIndex,
|
|
443
443
|
isShowUploadButton,
|
|
444
|
-
dropManUrl
|
|
444
|
+
dropManUrl,
|
|
445
|
+
modalWidth
|
|
445
446
|
} = this.props;
|
|
446
447
|
const { sceneInfo, currentFlow = {} } = this.state;
|
|
447
|
-
const { flows=[], name: sceneName, } = sceneInfo;
|
|
448
|
+
const { flows = [], name: sceneName, character } = sceneInfo;
|
|
448
449
|
return (
|
|
449
450
|
<div style={boxStyle}>
|
|
450
451
|
<style dangerouslySetInnerHTML={{ __html: style }}></style>
|
|
@@ -514,7 +515,8 @@ export class ToolDialog extends React.Component {
|
|
|
514
515
|
dropDownList={this.state.dropDownList}
|
|
515
516
|
baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
|
|
516
517
|
isShowUploadButton={isShowUploadButton}
|
|
517
|
-
dropManUrl={dropManUrl}
|
|
518
|
+
dropManUrl={character || dropManUrl}
|
|
519
|
+
modalWidth={modalWidth}
|
|
518
520
|
/>
|
|
519
521
|
</div>
|
|
520
522
|
{
|