yt-chat-components 1.7.1 → 1.7.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.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.module.css +90 -85
  3. package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.tsx +10 -5
  4. package/src/YtChatView/chatWidget/chatWindow/index.tsx +76 -61
  5. package/src/YtChatView/chatWidget/index.tsx +4 -1
  6. package/src/YtChatView/chatWidget/style.js +7 -2
  7. package/src/YtChatView/mobileChatV2/index.jsx +23 -6
  8. package/src/YtChatView/mobileChatV2/index.module.css +6 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yt-chat-components",
3
- "version": "1.7.1",
3
+ "version": "1.7.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",
package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.module.css CHANGED
@@ -1,86 +1,91 @@
1
- .msg_userMessageBox {
2
- width: fit-content;
3
- max-width: 90%;
4
- display: flex;
5
- flex-direction: column;
6
- align-items: flex-end;
7
- }
8
-
9
- .msg_userMessageBox .msg_messageImgBox {
10
- width: 850px;
11
- display: flex;
12
- flex-wrap: wrap;
13
- justify-content: flex-end;
14
- }
15
-
16
- .msg_userMessageBox .msg_messageImgBox .msg_messageImg {
17
- border-radius: 5px;
18
- }
19
-
20
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox {
21
- flex-shrink: 0;
22
- pointer-events: auto;
23
- position: relative;
24
- width: 137px;
25
- background-color: #f0f0f0;
26
- border-radius: 10px;
27
- margin: 3px 5px;
28
- padding: 5px;
29
- display: flex;
30
- }
31
-
32
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox:hover .msg_fileRemove {
33
- display: block;
34
- }
35
-
36
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox {
37
- margin-left: 10px;
38
- overflow: hidden;
39
- display: flex;
40
- align-items: center;
41
- }
42
-
43
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoFileName {
44
- overflow: hidden;
45
- text-overflow: ellipsis;
46
- white-space: nowrap;
47
- width: 72px;
48
- color: #242424;
49
- user-select: none;
50
- }
51
-
52
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoMeta {
53
- user-select: none;
54
- color: #a8a8a8;
55
- }
56
-
57
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove {
58
- display: none;
59
- position: absolute;
60
- cursor: pointer;
61
- top: -2px;
62
- right: 0;
63
- z-index: 99999;
64
- }
65
-
66
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove img {
67
- width: 20px;
68
- }
69
-
70
- .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_upImg {
71
- border-radius: 3px;
72
- z-index: 510;
73
- }
74
-
75
- .msg_operateBox {
76
- display: flex;
77
- margin-top: 5px;
78
- user-select: none;
79
- }
80
-
81
- .msg_operateBox img {
82
- -webkit-user-drag: none;
83
- margin-right: 3px;
84
- cursor: pointer;
85
- width: 16px;
1
+ .msg_userMessageBox {
2
+ width: fit-content;
3
+ max-width: 90%;
4
+ display: flex;
5
+ flex-direction: column;
6
+ align-items: flex-end;
7
+ }
8
+
9
+ .msg_userMessageBox .msg_messageImgBox {
10
+ width: 850px;
11
+ display: flex;
12
+ flex-wrap: wrap;
13
+ justify-content: flex-end;
14
+ }
15
+
16
+ .msg_userMessageBox .msg_messageImgBox .msg_messageImg {
17
+ border-radius: 5px;
18
+ }
19
+
20
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox {
21
+ flex-shrink: 0;
22
+ pointer-events: auto;
23
+ position: relative;
24
+ width: 137px;
25
+ background-color: #f0f0f0;
26
+ border-radius: 10px;
27
+ margin: 3px 5px;
28
+ padding: 5px;
29
+ display: flex;
30
+ }
31
+
32
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox:hover .msg_fileRemove {
33
+ display: block;
34
+ }
35
+
36
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox {
37
+ margin-left: 10px;
38
+ overflow: hidden;
39
+ display: flex;
40
+ align-items: center;
41
+ }
42
+
43
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoFileName {
44
+ overflow: hidden;
45
+ text-overflow: ellipsis;
46
+ white-space: nowrap;
47
+ width: 72px;
48
+ color: #242424;
49
+ user-select: none;
50
+ }
51
+
52
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoMeta {
53
+ user-select: none;
54
+ color: #a8a8a8;
55
+ }
56
+
57
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove {
58
+ display: none;
59
+ position: absolute;
60
+ cursor: pointer;
61
+ top: -2px;
62
+ right: 0;
63
+ z-index: 99999;
64
+ }
65
+
66
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove img {
67
+ width: 20px;
68
+ }
69
+
70
+ .msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_upImg {
71
+ border-radius: 3px;
72
+ z-index: 510;
73
+ }
74
+
75
+ .msg_operateBox {
76
+ max-width:780px;
77
+ width: 100%;
78
+ display: flex;
79
+ flex-direction: row;
80
+ align-items: center;
81
+ justify-content: space-between;
82
+ margin-top: 5px;
83
+ user-select: none;
84
+ }
85
+
86
+ .msg_operateBox img {
87
+ -webkit-user-drag: none;
88
+ margin-right: 3px;
89
+ cursor: pointer;
90
+ width: 26px;
86
91
  }
package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.tsx CHANGED
@@ -474,15 +474,20 @@ export default function ChatMessage({
474
474
  }
475
475
  </div>,
476
476
  footer: <div key={id} className="msg_operateBox">
477
- {isShowReadIcon && <img src={isPlay ? playRunGif : playPng} onClick={() => playVoice(message)}/>}
478
- <img src={copyPng} onClick={() => copyText(message)}/>
479
477
  <div style={{
480
478
  fontSize: 10,
481
479
  color: '#a3a3a3',
482
480
  bottom: 6,
483
- width: '100%',
484
- marginLeft:'4px',
485
- }}>内容由AI生成，无法保证真实准确，仅供参考
481
+ marginLeft: '4px',
482
+ }}>
483
+ 内容由AI生成，无法保证真实准确，仅供参考
484
+ </div>
485
+ <div style={{display: 'flex', flexDirection: 'row',}}>
486
+ {isShowReadIcon && <img
487
+ src={isPlay ? 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/playing.gif' : 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/play.png'}
488
+ onClick={() => playVoice(message)}/>}
489
+ <img src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/copy.png'}
490
+ onClick={() => copyText(message)}/>
486
491
  </div>
487
492
  </div>
488
493
  };
package/src/YtChatView/chatWidget/chatWindow/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  // @ts-nocheck
2
2
  import {extractMessageFromOutput} from './utils';
3
- import React, {Context, useCallback, useEffect, useRef, useState} from 'react';
3
+ import React, {Context, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
4
4
  import {ChatMessageType, embedAppExtend, InputValueType, MessageItem, MessageType} from './types/chatWidget';
5
5
  import ChatMessage from './chatMessage';
6
6
  import {fetchUploadFile, getChatHistory, sendMessage} from './controllers';
@@ -41,7 +41,70 @@ const setValue = (value) => {
41
41
  inputValue = value
42
42
  };
43
43
 
44
- export default function ChatWindow({
44
+ // 定义通过 ref 可以调用的方法
45
+ export interface ChatWindowRef {
46
+ handleCallButtonClick: () => void;
47
+ }
48
+
49
+ // props 类型定义（为了简洁这里只保留关键部分，其余和你原来一致）
50
+ interface ChatWindowProps {
51
+ is_enable_call:boolean;
52
+ tags: [];
53
+ getHistoryList: Function;
54
+ userInfo: object;
55
+ clearMessage: Function;
56
+ api_key?: string;
57
+ output_type: string;
58
+ input_type: string;
59
+ output_component?: string;
60
+ bot_message_style?: React.CSSProperties;
61
+ send_icon_style?: React.CSSProperties;
62
+ user_message_style?: React.CSSProperties;
63
+ chat_window_style?: React.CSSProperties;
64
+ error_message_style?: React.CSSProperties;
65
+ send_button_style?: React.CSSProperties;
66
+ online?: boolean;
67
+ open: boolean;
68
+ online_message?: string;
69
+ placeholder_sending?: string;
70
+ offline_message?: string;
71
+ window_title?: string;
72
+ placeholder?: string;
73
+ input_style?: React.CSSProperties;
74
+ input_container_style?: React.CSSProperties;
75
+ tweaks?: { [key: string]: any };
76
+ flowId: string;
77
+ hostUrl: string;
78
+ updateLastMessage: Function;
79
+ messages: ChatMessageType[];
80
+ addMessage: Function;
81
+ position?: string;
82
+ triggerRef: React.RefObject<HTMLButtonElement>;
83
+ width?: number;
84
+ height?: string;
85
+ sessionId: string;
86
+ additional_headers?: { [key: string]: string };
87
+ baseConfig: object;
88
+ isShowVoiceButton: boolean;
89
+ isShowUploadButton: boolean;
90
+ dropManUrl: string;
91
+ modalWidth: number;
92
+ isMobile: boolean;
93
+ isShowChatHeader: boolean;
94
+ tipTitle?: string;
95
+ tipContent?: string;
96
+ isShowReadIcon?:boolean;
97
+ renderCustomDropDown?: Function;
98
+ isTagsHidden?: boolean;
99
+ isEnableForV1?: boolean;
100
+ questions?: any[];
101
+ voice?: string;
102
+ onSmartRobotClick?: Function;
103
+ isShowMobileInputArea?: boolean;
104
+ isInH5Page: boolean;
105
+ }
106
+
107
+ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
45
108
  is_enable_call,
46
109
  tags,
47
110
  getHistoryList,
@@ -98,63 +161,8 @@ export default function ChatWindow({
98
161
  onSmartRobotClick,
99
162
  isShowMobileInputArea,
100
163
  isInH5Page
101
- }: {
102
- is_enable_call:boolean;
103
- tags: [];
104
- getHistoryList: Function;
105
- userInfo: object;
106
- clearMessage: Function;
107
- api_key?: string;
108
- output_type: string;
109
- input_type: string;
110
- output_component?: string;
111
- bot_message_style?: React.CSSProperties;
112
- send_icon_style?: React.CSSProperties;
113
- user_message_style?: React.CSSProperties;
114
- chat_window_style?: React.CSSProperties;
115
- error_message_style?: React.CSSProperties;
116
- send_button_style?: React.CSSProperties;
117
- online?: boolean;
118
- open: boolean;
119
- online_message?: string;
120
- placeholder_sending?: string;
121
- offline_message?: string;
122
- window_title?: string;
123
- placeholder?: string;
124
- input_style?: React.CSSProperties;
125
- input_container_style?: React.CSSProperties;
126
- tweaks?: { [key: string]: any };
127
- flowId: string;
128
- hostUrl: string;
129
- updateLastMessage: Function;
130
- messages: ChatMessageType[];
131
- addMessage: Function;
132
- position?: string;
133
- triggerRef: React.RefObject<HTMLButtonElement>;
134
- width?: number;
135
- height?: string;
136
- sessionId: string;
137
- additional_headers?: { [key: string]: string };
138
- baseConfig: object;
139
- isShowVoiceButton: boolean;
140
- isShowUploadButton: boolean;
141
- dropManUrl: string;
142
- modalWidth: number;
143
- isMobile: boolean;
144
- isShowChatHeader: boolean;
145
- tipTitle?: string;
146
- tipContent?: string;
147
- isShowReadIcon?:boolean;
148
- renderCustomDropDown?: Function;
149
- isTagsHidden?: boolean;
150
- isEnableForV1?: boolean;
151
- questions?: any[];
152
- voice?: string;
153
- onSmartRobotClick?: Function;
154
- isShowMobileInputArea?: boolean;
155
- isInH5Page: boolean;
156
- }) {
157
- const ref = useRef<HTMLDivElement>(null);
164
+ }, ref) => {
165
+ const rootRef = useRef<HTMLDivElement>(null);
158
166
  const lastMessage = useRef<HTMLDivElement>(null);
159
167
  const [showCallInterface, setShowCallInterface] = useState(false); // 添加通话界面状态
160
168
  const [aiStatus, setAiStatus] = useState(null);
@@ -185,6 +193,11 @@ export default function ChatWindow({
185
193
  const {registerChatMethods} = React.useContext(MethodContext) || {};
186
194
  let voiceChunks = []; // 临时存储录制的语音片段
187
195
  // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
196
+
197
+ useImperativeHandle(ref, () => ({
198
+ handleCallButtonClick:handleCallButtonClick
199
+ }))
200
+
188
201
  const handleScroll = () => {
189
202
  if (scrollContainerRef.current) {
190
203
  const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.current;
@@ -1485,7 +1498,7 @@ export default function ChatWindow({
1485
1498
  return (
1486
1499
  <div
1487
1500
  style={{...chat_window_style, width: width, height: "100%"}}
1488
- ref={ref}
1501
+ ref={rootRef}
1489
1502
  className="cl-window"
1490
1503
  >
1491
1504
  {/* 添加通话界面 */}
@@ -1588,4 +1601,6 @@ export default function ChatWindow({
1588
1601
  }
1589
1602
  </div>
1590
1603
  );
1591
- }
1604
+ })
1605
+
1606
+ export default ChatWindow;
package/src/YtChatView/chatWidget/index.tsx CHANGED
@@ -57,7 +57,8 @@ export default function ChatWidget({
57
57
  voice,
58
58
  onSmartRobotClick,
59
59
  isShowMobileInputArea,
60
- isInH5Page
60
+ isInH5Page,
61
+ chatWindowRef,
61
62
  }: {
62
63
  is_enable_call:boolean,
63
64
  tags: [];
@@ -109,6 +110,7 @@ export default function ChatWidget({
109
110
  onSmartRobotClick?: Function;
110
111
  isShowMobileInputArea?: boolean;
111
112
  isInH5Page: boolean;
113
+ chatWindowRef?: object;
112
114
  }) {
113
115
  const [open, setOpen] = useState(start_open);
114
116
  const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -134,6 +136,7 @@ export default function ChatWidget({
134
136
  <div style={{ position: 'relative',height:'100%' }}>
135
137
  <style dangerouslySetInnerHTML={{ __html: styles + markdownBody + yt_style + customThoughtChainStyle + cardStyle }}></style>
136
138
  <ChatWindow
139
+ ref={chatWindowRef}
137
140
  is_enable_call={is_enable_call}
138
141
  tags={tags}
139
142
  getHistoryList={getHistoryList}
package/src/YtChatView/chatWidget/style.js CHANGED
@@ -2186,16 +2186,21 @@ export const yt_style = `
2186
2186
  }
2187
2187
 
2188
2188
  .msg_operateBox {
2189
+ max-width:750px;
2190
+ width: 100%;
2189
2191
  display: flex;
2192
+ flex-direction: row;
2193
+ align-items: center;
2194
+ justify-content: space-between;
2190
2195
  margin-top: 5px;
2191
2196
  user-select: none;
2192
2197
  }
2193
2198
 
2194
2199
  .msg_operateBox img {
2195
2200
  -webkit-user-drag: none;
2196
- margin-right: 3px;
2201
+ margin-right: 10px;
2197
2202
  cursor: pointer;
2198
- width: 16px;
2203
+ width: 26px;
2199
2204
  }
2200
2205
 
2201
2206
  .plh_textBox {
package/src/YtChatView/mobileChatV2/index.jsx CHANGED
@@ -331,23 +331,27 @@ const defaultList = [
331
331
  title: '哪里可以找到心理咨询服务？',
332
332
  },
333
333
  ];
334
-
334
+ const currentTabKeyMap = {
335
+ agent: 'agent',
336
+ history: 'history'
337
+ }
335
338
  const api_key = 'sk-mniUFDpcWwvNF3iFzssXa6etN-S_Y4AApyHYcBU44L0';
336
339
  const drawerTabs = [
337
- // {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'},
338
- {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'}
340
+ // {id:currentTabKeyMap.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'},
341
+ {id:currentTabKeyMap.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'}
339
342
  ]
340
343
  export const MethodContext = React.createContext();
341
344
 
342
345
  export class MobileChatPageV2 extends React.Component {
343
346
  sessionUserInfo = {};
347
+ chatWindowRef = React.createRef();
344
348
  state = {
345
349
  historyList: [], // 历史对话列表
346
350
  sessionId: uuidv4(), // 当前激活的对话对应的sessionId
347
351
  dropDownList: [],
348
352
  sceneInfo: {},
349
353
  currentFlow: {},
350
- currentTabKey:'agent',
354
+ currentTabKey: currentTabKeyMap.history,
351
355
  historyDrawerVisible: false, // 抽屉历史记录状态
352
356
  agentDrawerVisible: false, // 多智能体切换抽屉状态
353
357
  knowledgeInfo: {},
@@ -583,7 +587,7 @@ export class MobileChatPageV2 extends React.Component {
583
587
  </div>
584
588
  {/*对话记录*/}
585
589
  {
586
- this.state.currentTabKey === 'history' &&
590
+ this.state.currentTabKey === currentTabKeyMap.history &&
587
591
  (this.state.historyList.length > 0 ? (
588
592
  <div className="p_historyList" style={{overflowY: 'auto', height: 'calc(100% - 70px)'}}>
589
593
  {this.state.historyList?.map((item) => (
@@ -664,11 +668,24 @@ export class MobileChatPageV2 extends React.Component {
664
668
  {/*对话上边的学校标志，定位到左上角header上端*/}
665
669
  <div className={styles.mobile_nav}>
666
670
  <div className={styles.title}>{headerName}</div>
667
- <div></div>
671
+ <div className={styles.call}>
672
+ {
673
+ currentFlow?.is_enable_call &&
674
+ <img src={"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/call.png"}
675
+ alt="call"
676
+ onClick={() => {
677
+ console.log(this.chatWindowRef);
678
+
679
+ this.chatWindowRef.current.handleCallButtonClick()
680
+ }}
681
+ />
682
+ }
683
+ </div>
668
684
  </div>
669
685
 
670
686
  <div className="p_toolRight">
671
687
  <ChatWidget
688
+ chatWindowRef={this.chatWindowRef}
672
689
  window_title={currentFlow?.name || title}
673
690
  flow_id={currentFlow?.id || flowId}
674
691
  tags={currentFlow?.keywords || tags}
package/src/YtChatView/mobileChatV2/index.module.css CHANGED
@@ -264,6 +264,12 @@
264
264
  .title{
265
265
  color: #000;
266
266
  font-size: 19px;
267
+ line-height: 20px;
267
268
  font-weight: bold;
268
269
  }
270
+ .call{
271
+ width: 40px;
272
+ height: 40px;
273
+ margin-right: -10px;
274
+ }
269
275
  }