yt-chat-components 0.9.8 → 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.
Files changed (15) hide show
  1. package/.idea/sonarlint/issuestore/index.pb +1 -5
  2. package/package.json +1 -1
  3. package/public/index.html +28 -1
  4. package/src/YtChatView/chatWidget/chatWindow/index.tsx +165 -100
  5. package/src/YtChatView/chatWidget/index.tsx +82 -1
  6. package/src/YtChatView/mobileChat/index.jsx +845 -0
  7. package/src/YtChatView/mobileChat/index.module.css +254 -0
  8. package/src/assets/aicenter/icon_agents.png +0 -0
  9. package/src/assets/aicenter/icon_history.png +0 -0
  10. package/src/assets/aicenter/icon_history_add.png +0 -0
  11. package/src/assets/aicenter/icon_history_headerbg.png +0 -0
  12. package/src/assets/aicenter/icon_history_upload.png +0 -0
  13. package/src/index.tsx +29 -1
  14. package/.idea/sonarlint/issuestore/2/e/2e9f70bf32b414323ca1647e2b6f26e1533ee2fc +0 -0
  15. package/.idea/sonarlint/issuestore/5/a/5ab44fe33ca96299f51ad4778a73e425b92bf439 +0 -0
package/.idea/sonarlint/issuestore/index.pb CHANGED
@@ -19,8 +19,6 @@ H
19
19
  src/chatWidget/index.tsx,3/6/364385cedcce4c06de1901392ffeeac0caef0f3c
20
20
  =
21
21
 
22
- j
23
- :src/YtChatView/chatWidget/chatWindow/chatMessage/index.tsx,2/e/2e9f70bf32b414323ca1647e2b6f26e1533ee2fc
24
22
  e
25
23
  5src/YtChatView/chatWidget/chatWindow/index.module.css,d/7/d747cbed4201192dfa83a1a51345b020a050b647
26
24
  U
@@ -34,6 +32,4 @@ U
34
32
  A
35
33
  webpack.config.js,d/5/d5595158cc48f9bf3e51b06f6e6805a8fd2d6262
36
34
  S
37
- #src/chatWidget/chatWindow/index.tsx,6/c/6c024c1d0ad64656b9d4b0695ec3c49c0454addf
38
- =
39
-
35
+ #src/chatWidget/chatWindow/index.tsx,6/c/6c024c1d0ad64656b9d4b0695ec3c49c0454addf
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yt-chat-components",
3
- "version": "0.9.8",
3
+ "version": "0.9.9b",
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",
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>Document</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>
package/src/YtChatView/chatWidget/chatWindow/index.tsx CHANGED
@@ -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);
@@ -135,6 +139,7 @@ export default function ChatWindow({
135
139
  const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
136
140
  const inputContainerRef = useRef(null);
137
141
  const [inputContainerHeight,setInputContainerHeight] = useState('50px')
142
+ const contentRef = useRef(nowAIContent);
138
143
 
139
144
  let voiceChunks = []; // 临时存储录制的语音片段
140
145
  // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
@@ -155,16 +160,21 @@ export default function ChatWindow({
155
160
 
156
161
  // 流式输出消息，实时显示（token为流式输出内容，end为结束输出，整体输出一次）
157
162
  const handleMessageContent = (event, data) => {
163
+ // console.error("event, data",event, data)
158
164
  if (event == 'add_message' && data['sender'] == 'Machine') {
159
165
  getHistoryList();
160
166
  } else if (event == 'token') {
161
- setNowAIContent((prevState) => prevState + data['chunk']);
167
+ setNowAIContent((prevState) => {
168
+ const newValue = prevState + data['chunk'];
169
+ contentRef.current = newValue
170
+ return newValue
171
+ });
162
172
  if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
163
- } else if (false && event == 'end') {// 移除end事件的响应
173
+ } else if (event == 'end') {
164
174
  const res = {
165
175
  data: data['result'],
166
176
  };
167
- if (
177
+ if (false&&
168
178
  res.data &&
169
179
  res.data.outputs &&
170
180
  Object.keys(res.data.outputs).length > 0 &&
@@ -217,6 +227,15 @@ export default function ChatWindow({
217
227
  });
218
228
  }
219
229
  }
230
+ const output = {
231
+ message:contentRef.current,
232
+ type:'text'
233
+ };
234
+ addMessage({
235
+ message: extractMessageFromOutput(output),
236
+ isSend: false,
237
+ rawInfo: output.message,
238
+ });
220
239
  setSendingMessage(false);
221
240
  }
222
241
  };
@@ -635,106 +654,151 @@ export default function ChatWindow({
635
654
  return 'cl-drop-horizontal'
636
655
  }
637
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
+ }
638
767
 
639
768
  return (
640
- <div
641
- style={{ ...chat_window_style, width: width, height: "100%" }}
642
- ref={ref}
643
- className="cl-window"
644
- >
645
- <div className="cl-middle-container">
646
- <div className="cl-header">
647
- <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'} : {}}>
648
776
  {
649
- isTitleSideIcon ?
650
- <img className="p_logoImg" style={{width: logoWidth, height: 'auto', marginRight: 10}} src={agentUrl}/> :
651
- <span className="diamond"/>
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
+ )
652
788
  }
653
- {window_title}
789
+ <div className="cl-header-subtitle"/>
790
+ {renderTipsInfo()}
654
791
  </div>
655
- <div className="cl-header-subtitle"/>
656
- {!isEmpty(dropDownList) && (
657
- isEmpty(dropManUrl) ?
658
- <div className="cl-drop-down">
659
- <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
660
- <div className="drop-down-list">
661
- {dropDownList.map(({backgroundImg, title}) => (
662
- <div className="drop-down-item-card" key={title}>
663
- <Typography.Paragraph
664
- className="drop-down-item-title"
665
- ellipsis={{
666
- rows: 2,
667
- tooltip: `“${title}”`,
668
- }}>{'“' + title + '”'}
669
- </Typography.Paragraph>
670
- <div className="drop-down-item-bottom">
671
- <div
672
- className="drop-down-item-bottom-button"
673
- onClick={() => {
674
- setDropDownList(undefined);
675
- handleClick(title);
676
- }}
677
- >
678
- <img src={btn_answer}/>
679
- {/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
680
- </div>
681
- <img className="drop-down-item-bottom-img" src={backgroundImg}/>
682
- </div>
683
- </div>
684
- ))}
685
- </div>
686
- </div>
687
- :
688
- <div className={judgeDropClass()}>
689
- <img className="drop-man-img" src={dropManUrl}/>
690
- <div className="cl-drop-down">
691
- <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
692
- <div className="drop-down-list">
693
- {dropDownList.map(({backgroundImg, title}) => (
694
- <div
695
- className="drop-down-item-card"
696
- key={title}
697
- onClick={() => {
698
- setDropDownList(undefined);
699
- handleClick(title);
700
- }}>
701
- <Typography.Paragraph
702
- className="drop-down-item-title"
703
- ellipsis={{
704
- rows: 2,
705
- tooltip: `“${title}”`,
706
- }}>{'“' + title + '”'}
707
- </Typography.Paragraph>
708
- <div className="drop-down-item-bottom">
709
- <div
710
- className="drop-down-item-bottom-button"
711
- onClick={() => {
712
- setDropDownList(undefined);
713
- handleClick(title);
714
- }}
715
- >
716
- <img src={btn_answer}/>
717
- {/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
718
- </div>
719
- <img className="drop-down-item-bottom-img" src={backgroundImg}/>
720
- </div>
721
- </div>
722
- ))}
723
- </div>
724
- </div>
725
- </div>
726
- )}
727
- </div>
728
- <div
729
- className="cl-messages_container"
730
- // style={{ maxWidth: '100%', minHeight:'300px', height:'700px', paddingBottom: '56px' }}
731
- >
732
- {messages.map((message, index) => (
733
- <ChatMessage
734
- bot_message_style={bot_message_style}
735
- user_message_style={user_message_style}
736
- error_message_style={error_message_style}
737
- 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}
738
802
  host_url={hostUrl}
739
803
  message={message}
740
804
  isSend={message.isSend}
@@ -759,6 +823,7 @@ export default function ChatWindow({
759
823
  style={{
760
824
  // bottom: fileList.length > 0 ? '130px' : '80px',
761
825
  display: tagList?.length > 0 ? '' : 'none',
826
+ zIndex: tagList?.length > 0 ? '2' : '-1',
762
827
  }}
763
828
  >
764
829
  {tagList.map((item, index) => (
@@ -908,7 +973,7 @@ export default function ChatWindow({
908
973
  abortControllerRef.current.abort('disconnect');
909
974
  abortControllerRef.current = new AbortController();
910
975
  }else{
911
-
976
+ handleClick()
912
977
  }
913
978
  }}
914
979
  >
package/src/YtChatView/chatWidget/index.tsx CHANGED
@@ -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
  );