yt-chat-components 0.9.9-a → 0.9.9-b
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 +28 -1
- package/src/YtChatView/chatWidget/chatWindow/index.tsx +147 -97
- package/src/YtChatView/chatWidget/index.tsx +82 -1
- package/src/YtChatView/mobileChat/index.jsx +845 -0
- package/src/YtChatView/mobileChat/index.module.css +254 -0
- package/src/assets/aicenter/icon_agents.png +0 -0
- package/src/assets/aicenter/icon_history.png +0 -0
- package/src/assets/aicenter/icon_history_add.png +0 -0
- package/src/assets/aicenter/icon_history_headerbg.png +0 -0
- package/src/assets/aicenter/icon_history_upload.png +0 -0
- package/src/index.tsx +29 -1
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title
|
|
6
|
+
<title>校园智多星</title>
|
|
7
|
+
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
|
7
8
|
</head>
|
|
8
9
|
<body style="width: 100vw; height: 100vh; position: relative; margin: unset ">
|
|
9
10
|
<yt-chat
|
|
@@ -78,4 +79,30 @@
|
|
|
78
79
|
<!-- is-show-upload-button=false-->
|
|
79
80
|
<!--/>-->
|
|
80
81
|
<!--</body>-->
|
|
82
|
+
|
|
83
|
+
<!--fd432d45-51fa-47cb-9ca9-a545385c618c de12e244-d603-4651-999f-25e22bdceeeb-->
|
|
84
|
+
<!--校园智多星sceneId=de12e244-d603-4651-999f-25e22bdceeeb appId=-->
|
|
85
|
+
<!--<body style="width: 100vw; height: 100vh; margin:0 ">-->
|
|
86
|
+
<!--<yt-page-chat-mobile-->
|
|
87
|
+
<!-- title="移动聊天"-->
|
|
88
|
+
<!-- host-url="https://ai-api.yuntu.cn"-->
|
|
89
|
+
<!-- app-id="a8e7ebd8-9bf7-499b-9e4a-c235078a0910"-->
|
|
90
|
+
<!-- user-info='{"id": "123", "name": "测试校长", "code":"1606451129" }'-->
|
|
91
|
+
<!-- tags='[{"name":"今天天气怎么样？"},{"name":"明天天气怎么样？"},{"name":"昨天天气怎么样？"}]'-->
|
|
92
|
+
<!-- box-style='{"height":"100%"}'-->
|
|
93
|
+
<!-- scene-id="de12e244-d603-4651-999f-25e22bdceeeb"-->
|
|
94
|
+
<!-- is-show-side-right=true-->
|
|
95
|
+
<!-- is-show-side-left=true-->
|
|
96
|
+
<!-- is-show-login=true-->
|
|
97
|
+
<!-- is-login=true-->
|
|
98
|
+
<!-- dialog-index="999999999"-->
|
|
99
|
+
<!-- agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/ccit/user/xc//image/ebfaf4da-c1d9-46fb-a0b1-f159e95cffc2_AI招生咨询小助手.png"-->
|
|
100
|
+
<!-- agent-name="校园智多星"-->
|
|
101
|
+
<!-- logo-width="42px"-->
|
|
102
|
+
<!-- logo-font-size="26px"-->
|
|
103
|
+
<!-- is-title-side-icon=true-->
|
|
104
|
+
<!-- is-show-upload-button=false-->
|
|
105
|
+
<!-- drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"-->
|
|
106
|
+
<!--/>-->
|
|
107
|
+
<!--</body>-->
|
|
81
108
|
</html>
|
|
@@ -72,7 +72,9 @@ export default function ChatWindow({
|
|
|
72
72
|
baseConfig = {},
|
|
73
73
|
isShowUploadButton,
|
|
74
74
|
dropManUrl = '',
|
|
75
|
-
modalWidth
|
|
75
|
+
modalWidth,
|
|
76
|
+
isMobile = false,
|
|
77
|
+
isShowChatHeader = true,
|
|
76
78
|
}: {
|
|
77
79
|
tags: [];
|
|
78
80
|
getHistoryList: Function;
|
|
@@ -113,6 +115,8 @@ export default function ChatWindow({
|
|
|
113
115
|
isShowUploadButton: boolean;
|
|
114
116
|
dropManUrl: string;
|
|
115
117
|
modalWidth: number;
|
|
118
|
+
isMobile: boolean;
|
|
119
|
+
isShowChatHeader: boolean;
|
|
116
120
|
}) {
|
|
117
121
|
const [value, setValue] = useState<string>('');
|
|
118
122
|
const ref = useRef<HTMLDivElement>(null);
|
|
@@ -650,106 +654,151 @@ export default function ChatWindow({
|
|
|
650
654
|
return 'cl-drop-horizontal'
|
|
651
655
|
}
|
|
652
656
|
|
|
657
|
+
const renderTipsInfo = () => {
|
|
658
|
+
if (isMobile && !isEmpty(dropDownList)){
|
|
659
|
+
return (
|
|
660
|
+
<div className={'cl-tips-wrapper'}>
|
|
661
|
+
<img className="drop-man-img" src={dropManUrl}/>
|
|
662
|
+
<div className="drop-down-title"><strong>Hi，</strong><br/><strong>欢迎使用{window_title}!</strong><br/><div>您可以这样问我:</div></div>
|
|
663
|
+
<div className={'cl-drop-down-mobile'}>
|
|
664
|
+
<div className="drop-down-list-mobile">
|
|
665
|
+
{dropDownList.map(({backgroundImg, title}) => (
|
|
666
|
+
<div
|
|
667
|
+
className="drop-down-item-card-mobile"
|
|
668
|
+
key={title}
|
|
669
|
+
onClick={() => {
|
|
670
|
+
setDropDownList(undefined);
|
|
671
|
+
handleClick(title);
|
|
672
|
+
}}>
|
|
673
|
+
<Typography.Paragraph
|
|
674
|
+
className="drop-down-item-title-mobile"
|
|
675
|
+
ellipsis={{
|
|
676
|
+
rows: 2,
|
|
677
|
+
tooltip: `“${title}”`,
|
|
678
|
+
}}>{'“' + title + '”'}
|
|
679
|
+
</Typography.Paragraph>
|
|
680
|
+
<img className="drop-down-item-bottom-img-mobile" src={backgroundImg}/>
|
|
681
|
+
{/*</div>*/}
|
|
682
|
+
</div>
|
|
683
|
+
))}
|
|
684
|
+
</div>
|
|
685
|
+
</div>
|
|
686
|
+
</div>
|
|
687
|
+
)
|
|
688
|
+
}
|
|
689
|
+
if (!isEmpty(dropDownList)){
|
|
690
|
+
if (isEmpty(dropManUrl)){
|
|
691
|
+
return (
|
|
692
|
+
<div className='cl-drop-down'>
|
|
693
|
+
<div className="drop-down-title">Hi，ssss欢迎使用{window_title}，您可以这样问我:</div>
|
|
694
|
+
<div className="drop-down-list">
|
|
695
|
+
{dropDownList.map(({backgroundImg, title}) => (
|
|
696
|
+
<div className="drop-down-item-card" key={title}>
|
|
697
|
+
<Typography.Paragraph
|
|
698
|
+
className="drop-down-item-title"
|
|
699
|
+
ellipsis={{
|
|
700
|
+
rows: 2,
|
|
701
|
+
tooltip: `“${title}”`,
|
|
702
|
+
}}>{'“' + title + '”'}
|
|
703
|
+
</Typography.Paragraph>
|
|
704
|
+
<div className="drop-down-item-bottom">
|
|
705
|
+
<div
|
|
706
|
+
className="drop-down-item-bottom-button"
|
|
707
|
+
onClick={() => {
|
|
708
|
+
setDropDownList(undefined);
|
|
709
|
+
handleClick(title);
|
|
710
|
+
}}
|
|
711
|
+
>
|
|
712
|
+
<img src={btn_answer}/>
|
|
713
|
+
{/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
|
|
714
|
+
</div>
|
|
715
|
+
<img className="drop-down-item-bottom-img" src={backgroundImg}/>
|
|
716
|
+
</div>
|
|
717
|
+
</div>
|
|
718
|
+
))}
|
|
719
|
+
</div>
|
|
720
|
+
</div>
|
|
721
|
+
)
|
|
722
|
+
} else {
|
|
723
|
+
return (
|
|
724
|
+
<div className={judgeDropClass()}>
|
|
725
|
+
<img className="drop-man-img" src={dropManUrl}/>
|
|
726
|
+
<div className='cl-drop-down'>
|
|
727
|
+
<div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
|
|
728
|
+
<div className="drop-down-list">
|
|
729
|
+
{dropDownList.map(({backgroundImg, title}) => (
|
|
730
|
+
<div
|
|
731
|
+
className="drop-down-item-card"
|
|
732
|
+
key={title}
|
|
733
|
+
onClick={() => {
|
|
734
|
+
setDropDownList(undefined);
|
|
735
|
+
handleClick(title);
|
|
736
|
+
}}>
|
|
737
|
+
<Typography.Paragraph
|
|
738
|
+
className="drop-down-item-title"
|
|
739
|
+
ellipsis={{
|
|
740
|
+
rows: 2,
|
|
741
|
+
tooltip: `“${title}”`,
|
|
742
|
+
}}>{'“' + title + '”'}
|
|
743
|
+
</Typography.Paragraph>
|
|
744
|
+
<div className="drop-down-item-bottom">
|
|
745
|
+
<div
|
|
746
|
+
className="drop-down-item-bottom-button"
|
|
747
|
+
onClick={() => {
|
|
748
|
+
setDropDownList(undefined);
|
|
749
|
+
handleClick(title);
|
|
750
|
+
}}
|
|
751
|
+
>
|
|
752
|
+
<img src={btn_answer}/>
|
|
753
|
+
{/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
|
|
754
|
+
</div>
|
|
755
|
+
<img className="drop-down-item-bottom-img" src={backgroundImg}/>
|
|
756
|
+
</div>
|
|
757
|
+
</div>
|
|
758
|
+
))}
|
|
759
|
+
</div>
|
|
760
|
+
</div>
|
|
761
|
+
</div>
|
|
762
|
+
)
|
|
763
|
+
}
|
|
764
|
+
}
|
|
765
|
+
return <></>
|
|
766
|
+
}
|
|
653
767
|
|
|
654
768
|
return (
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
<div className="header-title">
|
|
769
|
+
<div
|
|
770
|
+
style={{...chat_window_style, width: width, height: "100%"}}
|
|
771
|
+
ref={ref}
|
|
772
|
+
className="cl-window"
|
|
773
|
+
>
|
|
774
|
+
<div className="cl-middle-container">
|
|
775
|
+
<div className="cl-header" style={isMobile ? {position: 'absolute', top: 20, left: 0, paddingLeft: '1.6rem', paddingRight: '1.6rem'} : {}}>
|
|
663
776
|
{
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
777
|
+
isShowChatHeader && (
|
|
778
|
+
<div className="header-title">
|
|
779
|
+
{
|
|
780
|
+
isTitleSideIcon ?
|
|
781
|
+
<img className="p_logoImg" style={{width: logoWidth, height: 'auto', marginRight: 10}}
|
|
782
|
+
src={agentUrl}/> :
|
|
783
|
+
<span className="diamond"/>
|
|
784
|
+
}
|
|
785
|
+
{window_title}
|
|
786
|
+
</div>
|
|
787
|
+
)
|
|
667
788
|
}
|
|
668
|
-
|
|
789
|
+
<div className="cl-header-subtitle"/>
|
|
790
|
+
{renderTipsInfo()}
|
|
669
791
|
</div>
|
|
670
|
-
<div
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
ellipsis={{
|
|
681
|
-
rows: 2,
|
|
682
|
-
tooltip: `“${title}”`,
|
|
683
|
-
}}>{'“' + title + '”'}
|
|
684
|
-
</Typography.Paragraph>
|
|
685
|
-
<div className="drop-down-item-bottom">
|
|
686
|
-
<div
|
|
687
|
-
className="drop-down-item-bottom-button"
|
|
688
|
-
onClick={() => {
|
|
689
|
-
setDropDownList(undefined);
|
|
690
|
-
handleClick(title);
|
|
691
|
-
}}
|
|
692
|
-
>
|
|
693
|
-
<img src={btn_answer}/>
|
|
694
|
-
{/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
|
|
695
|
-
</div>
|
|
696
|
-
<img className="drop-down-item-bottom-img" src={backgroundImg}/>
|
|
697
|
-
</div>
|
|
698
|
-
</div>
|
|
699
|
-
))}
|
|
700
|
-
</div>
|
|
701
|
-
</div>
|
|
702
|
-
:
|
|
703
|
-
<div className={judgeDropClass()}>
|
|
704
|
-
<img className="drop-man-img" src={dropManUrl}/>
|
|
705
|
-
<div className="cl-drop-down">
|
|
706
|
-
<div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
|
|
707
|
-
<div className="drop-down-list">
|
|
708
|
-
{dropDownList.map(({backgroundImg, title}) => (
|
|
709
|
-
<div
|
|
710
|
-
className="drop-down-item-card"
|
|
711
|
-
key={title}
|
|
712
|
-
onClick={() => {
|
|
713
|
-
setDropDownList(undefined);
|
|
714
|
-
handleClick(title);
|
|
715
|
-
}}>
|
|
716
|
-
<Typography.Paragraph
|
|
717
|
-
className="drop-down-item-title"
|
|
718
|
-
ellipsis={{
|
|
719
|
-
rows: 2,
|
|
720
|
-
tooltip: `“${title}”`,
|
|
721
|
-
}}>{'“' + title + '”'}
|
|
722
|
-
</Typography.Paragraph>
|
|
723
|
-
<div className="drop-down-item-bottom">
|
|
724
|
-
<div
|
|
725
|
-
className="drop-down-item-bottom-button"
|
|
726
|
-
onClick={() => {
|
|
727
|
-
setDropDownList(undefined);
|
|
728
|
-
handleClick(title);
|
|
729
|
-
}}
|
|
730
|
-
>
|
|
731
|
-
<img src={btn_answer}/>
|
|
732
|
-
{/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
|
|
733
|
-
</div>
|
|
734
|
-
<img className="drop-down-item-bottom-img" src={backgroundImg}/>
|
|
735
|
-
</div>
|
|
736
|
-
</div>
|
|
737
|
-
))}
|
|
738
|
-
</div>
|
|
739
|
-
</div>
|
|
740
|
-
</div>
|
|
741
|
-
)}
|
|
742
|
-
</div>
|
|
743
|
-
<div
|
|
744
|
-
className="cl-messages_container"
|
|
745
|
-
// style={{ maxWidth: '100%', minHeight:'300px', height:'700px', paddingBottom: '56px' }}
|
|
746
|
-
>
|
|
747
|
-
{messages.map((message, index) => (
|
|
748
|
-
<ChatMessage
|
|
749
|
-
bot_message_style={bot_message_style}
|
|
750
|
-
user_message_style={user_message_style}
|
|
751
|
-
error_message_style={error_message_style}
|
|
752
|
-
key={index}
|
|
792
|
+
<div
|
|
793
|
+
className="cl-messages_container"
|
|
794
|
+
// style={{ maxWidth: '100%', minHeight:'300px', height:'700px', paddingBottom: '56px' }}
|
|
795
|
+
>
|
|
796
|
+
{messages.map((message, index) => (
|
|
797
|
+
<ChatMessage
|
|
798
|
+
bot_message_style={bot_message_style}
|
|
799
|
+
user_message_style={user_message_style}
|
|
800
|
+
error_message_style={error_message_style}
|
|
801
|
+
key={index}
|
|
753
802
|
host_url={hostUrl}
|
|
754
803
|
message={message}
|
|
755
804
|
isSend={message.isSend}
|
|
@@ -774,6 +823,7 @@ export default function ChatWindow({
|
|
|
774
823
|
style={{
|
|
775
824
|
// bottom: fileList.length > 0 ? '130px' : '80px',
|
|
776
825
|
display: tagList?.length > 0 ? '' : 'none',
|
|
826
|
+
zIndex: tagList?.length > 0 ? '2' : '-1',
|
|
777
827
|
}}
|
|
778
828
|
>
|
|
779
829
|
{tagList.map((item, index) => (
|
|
@@ -923,7 +973,7 @@ export default function ChatWindow({
|
|
|
923
973
|
abortControllerRef.current.abort('disconnect');
|
|
924
974
|
abortControllerRef.current = new AbortController();
|
|
925
975
|
}else{
|
|
926
|
-
|
|
976
|
+
handleClick()
|
|
927
977
|
}
|
|
928
978
|
}}
|
|
929
979
|
>
|
|
@@ -39,7 +39,9 @@ export default function ChatWidget({
|
|
|
39
39
|
baseConfig,
|
|
40
40
|
isShowUploadButton,
|
|
41
41
|
dropManUrl,
|
|
42
|
-
modalWidth
|
|
42
|
+
modalWidth,
|
|
43
|
+
isMobile = false,
|
|
44
|
+
isShowChatHeader = true,
|
|
43
45
|
}: {
|
|
44
46
|
tags: [];
|
|
45
47
|
getHistoryList: Function;
|
|
@@ -76,6 +78,8 @@ export default function ChatWidget({
|
|
|
76
78
|
isShowUploadButton:boolean;
|
|
77
79
|
dropManUrl: string;
|
|
78
80
|
modalWidth: number;
|
|
81
|
+
isMobile: boolean;
|
|
82
|
+
isShowChatHeader: boolean;
|
|
79
83
|
}) {
|
|
80
84
|
const [open, setOpen] = useState(start_open);
|
|
81
85
|
const [messages, setMessages] = useState<ChatMessageType[]>([]);
|
|
@@ -476,6 +480,81 @@ video {
|
|
|
476
480
|
border-radius: 3px;
|
|
477
481
|
}
|
|
478
482
|
|
|
483
|
+
.cl-tips-wrapper {
|
|
484
|
+
width:100%;
|
|
485
|
+
display:flex;
|
|
486
|
+
margin-top:0.81rem;
|
|
487
|
+
flex-direction: row;
|
|
488
|
+
position: relative;
|
|
489
|
+
padding-bottom: 100px;
|
|
490
|
+
z-index: 1;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.cl-tips-wrapper .drop-man-img {
|
|
494
|
+
width: 35%;
|
|
495
|
+
}
|
|
496
|
+
.cl-tips-wrapper .drop-down-title {
|
|
497
|
+
margin-top: 45px;
|
|
498
|
+
font-family: PingFangSC, PingFang SC;
|
|
499
|
+
font-weight: 500;
|
|
500
|
+
font-size: 22px;
|
|
501
|
+
color: #333333;
|
|
502
|
+
line-height: 28px;
|
|
503
|
+
text-align: left;
|
|
504
|
+
font-style: normal;
|
|
505
|
+
> div {
|
|
506
|
+
margin-top: 15px;
|
|
507
|
+
font-size: 14px;
|
|
508
|
+
color: # 999;
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.cl-tips-wrapper .cl-drop-down-mobile {
|
|
513
|
+
position: absolute;
|
|
514
|
+
width:100%;
|
|
515
|
+
top: 120px;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.cl-tips-wrapper .drop-down-list-mobile {
|
|
519
|
+
display: flex;
|
|
520
|
+
flex-direction: column;
|
|
521
|
+
margin-top: 2rem;
|
|
522
|
+
width:100%;
|
|
523
|
+
align-items: end;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.drop-down-item-card-mobile {
|
|
527
|
+
width: 85%;
|
|
528
|
+
height: 3.4rem;
|
|
529
|
+
padding: 0 0.6rem 0;
|
|
530
|
+
border-radius:20px;
|
|
531
|
+
border-top-left-radius: 0;
|
|
532
|
+
background: url("https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-bg.png");
|
|
533
|
+
background-size: cover;
|
|
534
|
+
background-position: center;
|
|
535
|
+
background-repeat: no-repeat;
|
|
536
|
+
margin-bottom: 20px;
|
|
537
|
+
|
|
538
|
+
display:flex;
|
|
539
|
+
align-items: center;
|
|
540
|
+
}
|
|
541
|
+
.drop-down-item-title-mobile {
|
|
542
|
+
font-family: PingFangSC, PingFang SC;
|
|
543
|
+
font-weight: 400;
|
|
544
|
+
font-size: 13px;
|
|
545
|
+
color: #000000;
|
|
546
|
+
line-height: 17px;
|
|
547
|
+
text-align: left;
|
|
548
|
+
font-style: normal;
|
|
549
|
+
width: 100%;
|
|
550
|
+
margin-bottom:0 !important;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.drop-down-item-bottom-img-mobile{
|
|
554
|
+
width:3.5rem;
|
|
555
|
+
height:2.5rem;
|
|
556
|
+
}
|
|
557
|
+
|
|
479
558
|
.cl-drop-man{
|
|
480
559
|
width:100%;
|
|
481
560
|
display:flex;
|
|
@@ -2496,6 +2575,8 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2496
2575
|
isShowUploadButton={isShowUploadButton}
|
|
2497
2576
|
dropManUrl={dropManUrl}
|
|
2498
2577
|
modalWidth={modalWidth}
|
|
2578
|
+
isMobile={isMobile}
|
|
2579
|
+
isShowChatHeader={isShowChatHeader}
|
|
2499
2580
|
/>
|
|
2500
2581
|
</div>
|
|
2501
2582
|
);
|