yt-chat-components 0.6.0 → 0.8.0
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 +59 -29
- package/src/YtChatView/chatWidget/chatWindow/controllers/index.ts +9 -0
- package/src/YtChatView/chatWidget/chatWindow/index.tsx +37 -14
- package/src/YtChatView/chatWidget/index.tsx +9 -4
- package/src/YtChatView/logoBtn/index.jsx +40 -4
- package/src/YtChatView/logoSplitBtn/index.jsx +41 -6
- package/src/YtChatView/previewDialog/index.jsx +102 -63
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -5,32 +5,51 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Document</title>
|
|
7
7
|
</head>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
8
|
+
<body style="width: 100vw; height: 100vh; position: relative; margin: unset ">
|
|
9
|
+
<yt-chat
|
|
10
|
+
right="100"
|
|
11
|
+
bottom="100"
|
|
12
|
+
width="50"
|
|
13
|
+
height="50"
|
|
14
|
+
title="菜鸟驿站"
|
|
15
|
+
icon-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"
|
|
16
|
+
host-url="https://ai-api.yuntu.cn"
|
|
17
|
+
user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'
|
|
18
|
+
app-id="620005e0-3370-4447-951f-b1d5c814a92a"
|
|
19
|
+
is-show-side-right=false
|
|
20
|
+
is-show-side-left=false
|
|
21
|
+
modal-index="9999999999"
|
|
22
|
+
modal-width="1400"
|
|
23
|
+
dialog-index="999999999"
|
|
24
|
+
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"
|
|
25
|
+
agent-name="医专智能助手"
|
|
26
|
+
logo-width="42px"
|
|
27
|
+
logo-font-size="26px"
|
|
28
|
+
logo-position="fixed"
|
|
29
|
+
is-title-side-icon=true
|
|
30
|
+
is-show-upload-button=false
|
|
31
|
+
/>
|
|
32
|
+
</body>
|
|
21
33
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
+
<body style="width: 100vw; height: 100vh; margin:0 ">
|
|
35
|
+
<yt-page-chat
|
|
36
|
+
title="菜鸟驿站"
|
|
37
|
+
host-url="https://ai-api.yuntu.cn"
|
|
38
|
+
app-id="a8e7ebd8-9bf7-499b-9e4a-c235078a0910"
|
|
39
|
+
user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'
|
|
40
|
+
tags='[{"name":"今天天气怎么样？"},{"name":"明天天气怎么样？"},{"name":"昨天天气怎么样？"}]'
|
|
41
|
+
box-style='{"height":"100%"}'
|
|
42
|
+
is-show-side-right=false
|
|
43
|
+
is-show-side-left=false
|
|
44
|
+
dialog-index="999999999"
|
|
45
|
+
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"
|
|
46
|
+
agent-name="医专智能助手"
|
|
47
|
+
logo-width="42px"
|
|
48
|
+
logo-font-size="26px"
|
|
49
|
+
is-title-side-icon=true
|
|
50
|
+
is-show-upload-button=false
|
|
51
|
+
/>
|
|
52
|
+
</body>
|
|
34
53
|
|
|
35
54
|
<body style="width: 100vw; height: 100vh; position: relative; margin: unset ">
|
|
36
55
|
<yt-split-modal-chat
|
|
@@ -38,12 +57,23 @@
|
|
|
38
57
|
bottom="100"
|
|
39
58
|
width="50"
|
|
40
59
|
height="50"
|
|
41
|
-
title="
|
|
60
|
+
title="招生助手"
|
|
42
61
|
icon-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"
|
|
43
62
|
host-url="https://ai-api.yuntu.cn"
|
|
44
|
-
user-info='{"id": "
|
|
45
|
-
|
|
46
|
-
|
|
63
|
+
user-info='{"id": "test", "name": "test", "code":"test" }'
|
|
64
|
+
is-show-side-right=true
|
|
65
|
+
is-show-side-left=true
|
|
66
|
+
scene-id="c1e7a2a4-6127-4e53-a529-113da78eb069"
|
|
67
|
+
modal-index="9999999999"
|
|
68
|
+
modal-width="1400"
|
|
69
|
+
dialog-index="999999999"
|
|
70
|
+
agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/agent.png"
|
|
71
|
+
agent-name="医专智能助手"
|
|
72
|
+
logo-width="42px"
|
|
73
|
+
logo-font-size="26px"
|
|
74
|
+
logo-position="fixed"
|
|
75
|
+
is-title-side-icon=true
|
|
76
|
+
is-show-upload-button=false
|
|
47
77
|
/>
|
|
48
78
|
</body>
|
|
49
79
|
</html>
|
|
@@ -235,4 +235,13 @@ export async function getSceneInfo(baseUrl: string, sceneId: string, api_key: st
|
|
|
235
235
|
timeout:600000
|
|
236
236
|
};
|
|
237
237
|
return axios.get(`${baseUrl}/api/t1/scene/detail/${sceneId}`,{headers});
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
export async function getFlowInfo(baseUrl: string, flowId: string, api_key: string) {
|
|
241
|
+
const headers = {
|
|
242
|
+
'Content-Type': 'multipart/form-data',
|
|
243
|
+
'x-api-key': api_key,
|
|
244
|
+
timeout:600000
|
|
245
|
+
};
|
|
246
|
+
return axios.get(`${baseUrl}/api/t1/flow/detail/${flowId}`,{headers});
|
|
238
247
|
}
|
|
@@ -68,6 +68,8 @@ export default function ChatWindow({
|
|
|
68
68
|
additional_headers,
|
|
69
69
|
setDropDownList = () => {},
|
|
70
70
|
dropDownList = [],
|
|
71
|
+
baseConfig = {},
|
|
72
|
+
isShowUploadButton
|
|
71
73
|
}: {
|
|
72
74
|
tags: [];
|
|
73
75
|
getHistoryList: Function;
|
|
@@ -104,6 +106,8 @@ export default function ChatWindow({
|
|
|
104
106
|
height?: string;
|
|
105
107
|
sessionId: string;
|
|
106
108
|
additional_headers?: { [key: string]: string };
|
|
109
|
+
baseConfig: object;
|
|
110
|
+
isShowUploadButton: boolean;
|
|
107
111
|
}) {
|
|
108
112
|
const [value, setValue] = useState<string>('');
|
|
109
113
|
const ref = useRef<HTMLDivElement>(null);
|
|
@@ -123,6 +127,7 @@ export default function ChatWindow({
|
|
|
123
127
|
const isStream = true;//是否流式输出（手动开关）
|
|
124
128
|
const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
|
|
125
129
|
const [tagList, setTagList] = useState([]); // 问题标签列表
|
|
130
|
+
const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
|
|
126
131
|
|
|
127
132
|
let voiceChunks = []; // 临时存储录制的语音片段
|
|
128
133
|
// 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
|
|
@@ -283,7 +288,11 @@ export default function ChatWindow({
|
|
|
283
288
|
});
|
|
284
289
|
setSendingMessage(true);
|
|
285
290
|
setValue('');
|
|
286
|
-
|
|
291
|
+
let userInfoClone = userInfo;
|
|
292
|
+
if(isEmpty(userInfoClone.code)) {
|
|
293
|
+
userInfoClone.code = sessionId;
|
|
294
|
+
}
|
|
295
|
+
const code = userInfoClone['code'] ? userInfoClone['code'] : ""
|
|
287
296
|
let embedAppExtend: embedAppExtend = {
|
|
288
297
|
operator_id: code,
|
|
289
298
|
upload_file_path_list: [],
|
|
@@ -561,7 +570,7 @@ export default function ChatWindow({
|
|
|
561
570
|
setTimeout(() => {
|
|
562
571
|
// inputRef.current?.focus();
|
|
563
572
|
}, 100);
|
|
564
|
-
}, [messages, open]);
|
|
573
|
+
}, [messages, open, tags]);
|
|
565
574
|
|
|
566
575
|
/**
|
|
567
576
|
* 当获取历史记录时（sessindId变化时），清空消息，并添加历史记录
|
|
@@ -569,7 +578,11 @@ export default function ChatWindow({
|
|
|
569
578
|
useEffect(() => {
|
|
570
579
|
const fetchChatHistory = async () => {
|
|
571
580
|
try {
|
|
572
|
-
|
|
581
|
+
let userInfoClone = userInfo;
|
|
582
|
+
if(isEmpty(userInfoClone.code)) {
|
|
583
|
+
userInfoClone.code = sessionId;
|
|
584
|
+
}
|
|
585
|
+
const res = await getChatHistory(hostUrl, flowId, sessionId, userInfoClone['code']);
|
|
573
586
|
const chatHistory = res.data?.length ? res.data : [];
|
|
574
587
|
|
|
575
588
|
clearMessage();
|
|
@@ -606,7 +619,14 @@ export default function ChatWindow({
|
|
|
606
619
|
>
|
|
607
620
|
<div className="cl-middle-container">
|
|
608
621
|
<div className="cl-header">
|
|
609
|
-
<div className="header-title"
|
|
622
|
+
<div className="header-title">
|
|
623
|
+
{
|
|
624
|
+
isTitleSideIcon ?
|
|
625
|
+
<img className="p_logoImg" style={{width: logoWidth, height: 'auto', marginRight: 10}} src={agentUrl}/> :
|
|
626
|
+
<span className="diamond"/>
|
|
627
|
+
}
|
|
628
|
+
{window_title}
|
|
629
|
+
</div>
|
|
610
630
|
<div className="cl-header-subtitle"/>
|
|
611
631
|
{!isEmpty(dropDownList) && (
|
|
612
632
|
<div className="cl-drop-down">
|
|
@@ -673,7 +693,7 @@ export default function ChatWindow({
|
|
|
673
693
|
className="w_tagListClass"
|
|
674
694
|
style={{
|
|
675
695
|
// bottom: fileList.length > 0 ? '130px' : '80px',
|
|
676
|
-
display: tagList
|
|
696
|
+
display: tagList?.length > 0 ? '' : 'none',
|
|
677
697
|
}}
|
|
678
698
|
>
|
|
679
699
|
{tagList.map((item, index) => (
|
|
@@ -792,15 +812,18 @@ export default function ChatWindow({
|
|
|
792
812
|
</div>
|
|
793
813
|
</Tooltip>
|
|
794
814
|
{/*<Tooltip title="支持PDF / Word / Excel / Markdown / txt / mobi / rpub">*/}
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
815
|
+
{
|
|
816
|
+
isShowUploadButton &&
|
|
817
|
+
<Tooltip title="支持图片格式">
|
|
818
|
+
<div
|
|
819
|
+
className="w_send_file_box"
|
|
820
|
+
style={sendingMessage ? { cursor: 'not-allowed' } : {}}
|
|
821
|
+
onClick={uploadFile}
|
|
822
|
+
>
|
|
823
|
+
<img src={fileuploadPng} style={{ width: 23 }}></img>
|
|
824
|
+
</div>
|
|
825
|
+
</Tooltip>
|
|
826
|
+
}
|
|
804
827
|
<button
|
|
805
828
|
disabled={sendingMessage}
|
|
806
829
|
style={{ ...(sendingMessage ? { cursor: 'not-allowed' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
|
|
@@ -36,6 +36,8 @@ export default function ChatWidget({
|
|
|
36
36
|
start_open = false,
|
|
37
37
|
setDropDownList,
|
|
38
38
|
dropDownList,
|
|
39
|
+
baseConfig,
|
|
40
|
+
isShowUploadButton
|
|
39
41
|
}: {
|
|
40
42
|
tags: [];
|
|
41
43
|
getHistoryList: Function;
|
|
@@ -68,6 +70,8 @@ export default function ChatWidget({
|
|
|
68
70
|
additional_headers?: { [key: string]: string };
|
|
69
71
|
session_id?: string;
|
|
70
72
|
start_open?: boolean;
|
|
73
|
+
baseConfig:object;
|
|
74
|
+
isShowUploadButton:boolean;
|
|
71
75
|
}) {
|
|
72
76
|
const [open, setOpen] = useState(start_open);
|
|
73
77
|
const [messages, setMessages] = useState<ChatMessageType[]>([]);
|
|
@@ -494,7 +498,7 @@ video {
|
|
|
494
498
|
margin-top:2rem;
|
|
495
499
|
}
|
|
496
500
|
.drop-down-item-card {
|
|
497
|
-
width:
|
|
501
|
+
width: 33%;
|
|
498
502
|
padding: 1.2rem 1.2rem 0.3rem;
|
|
499
503
|
height:7.5rem;
|
|
500
504
|
font-weight: 400;
|
|
@@ -2257,10 +2261,10 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2257
2261
|
|
|
2258
2262
|
&:hover {
|
|
2259
2263
|
background: linear-gradient( 270deg, #828EFE 0%, #4B4FFF 100%);
|
|
2260
|
-
.
|
|
2264
|
+
.w_tagImgh {
|
|
2261
2265
|
filter: brightness(100);
|
|
2262
2266
|
}
|
|
2263
|
-
.
|
|
2267
|
+
.w_tagItemText {
|
|
2264
2268
|
color: #fff;
|
|
2265
2269
|
}
|
|
2266
2270
|
}
|
|
@@ -2272,7 +2276,6 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2272
2276
|
.w_tagItemText {
|
|
2273
2277
|
width: fit-content;
|
|
2274
2278
|
padding-top: 2px;
|
|
2275
|
-
padding-left: 8px;
|
|
2276
2279
|
color: #1552FF;
|
|
2277
2280
|
font-size: 14px;
|
|
2278
2281
|
}
|
|
@@ -2382,6 +2385,8 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2382
2385
|
additional_headers={additional_headers}
|
|
2383
2386
|
setDropDownList={setDropDownList}
|
|
2384
2387
|
dropDownList={dropDownList}
|
|
2388
|
+
baseConfig={baseConfig}
|
|
2389
|
+
isShowUploadButton={isShowUploadButton}
|
|
2385
2390
|
/>
|
|
2386
2391
|
</div>
|
|
2387
2392
|
);
|
|
@@ -9,7 +9,33 @@ export class LogoBtn extends React.Component {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
render() {
|
|
12
|
-
|
|
12
|
+
const {
|
|
13
|
+
left,
|
|
14
|
+
right,
|
|
15
|
+
top,
|
|
16
|
+
bottom,
|
|
17
|
+
width,
|
|
18
|
+
height,
|
|
19
|
+
iconUrl,
|
|
20
|
+
title,
|
|
21
|
+
appId,
|
|
22
|
+
hostUrl,
|
|
23
|
+
userInfo,
|
|
24
|
+
tags,
|
|
25
|
+
boxStyle,
|
|
26
|
+
isShowSideRight,
|
|
27
|
+
isShowSideLeft,
|
|
28
|
+
modalIndex = 1000,
|
|
29
|
+
modalWidth = 1000,
|
|
30
|
+
dialogIndex = 1000,
|
|
31
|
+
agentUrl,
|
|
32
|
+
agentName,
|
|
33
|
+
logoWidth,
|
|
34
|
+
logoFontSize,
|
|
35
|
+
logoPosition = 'absolute',
|
|
36
|
+
isTitleSideIcon,
|
|
37
|
+
isShowUploadButton
|
|
38
|
+
} = this.props;
|
|
13
39
|
const iconConfig = {
|
|
14
40
|
width: `${width || 100}px`,
|
|
15
41
|
height: `${height || 100}px`,
|
|
@@ -32,20 +58,21 @@ export class LogoBtn extends React.Component {
|
|
|
32
58
|
}
|
|
33
59
|
|
|
34
60
|
return (
|
|
35
|
-
|
|
61
|
+
<div style={{ position: logoPosition, ...iconConfig, zIndex: dialogIndex }}>
|
|
36
62
|
{iconUrl && <img src={iconUrl} style={{ width: "100%", height: "100%" }} onClick={(event) => this.setState({ isShow: true })}/>}
|
|
37
63
|
<Modal
|
|
38
64
|
wrapClassName={'yt-chat-modal'}
|
|
39
65
|
open={this.state.isShow}
|
|
40
|
-
width={
|
|
66
|
+
width={modalWidth}
|
|
41
67
|
closable={false}
|
|
42
68
|
onCancel={() => this.setState({ isShow: false })}
|
|
43
69
|
footer={null}
|
|
44
70
|
centered={true}
|
|
71
|
+
zIndex={modalIndex}
|
|
45
72
|
>
|
|
46
73
|
<ToolDialog
|
|
47
74
|
title={title}
|
|
48
|
-
|
|
75
|
+
appId={appId}
|
|
49
76
|
hostUrl={hostUrl}
|
|
50
77
|
setDialogVisible={() => {
|
|
51
78
|
this.setState({ isShow: false })
|
|
@@ -53,6 +80,15 @@ export class LogoBtn extends React.Component {
|
|
|
53
80
|
userInfo={userInfo || {}}
|
|
54
81
|
tags={tags || []}
|
|
55
82
|
boxStyle={boxStyle || { position: 'relative', height: '700px' }}
|
|
83
|
+
isShowSideRight={isShowSideRight}
|
|
84
|
+
isShowSideLeft={isShowSideLeft}
|
|
85
|
+
agentUrl={agentUrl}
|
|
86
|
+
agentName={agentName}
|
|
87
|
+
logoWidth={logoWidth}
|
|
88
|
+
logoFontSize={logoFontSize}
|
|
89
|
+
isTitleSideIcon={isTitleSideIcon}
|
|
90
|
+
modalIndex={modalIndex}
|
|
91
|
+
isShowUploadButton={isShowUploadButton}
|
|
56
92
|
/>
|
|
57
93
|
</Modal>
|
|
58
94
|
</div>
|
|
@@ -9,7 +9,34 @@ export class LogoSplitBtn extends React.Component {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
render() {
|
|
12
|
-
|
|
12
|
+
const {
|
|
13
|
+
left,
|
|
14
|
+
right,
|
|
15
|
+
top,
|
|
16
|
+
bottom,
|
|
17
|
+
width,
|
|
18
|
+
height,
|
|
19
|
+
iconUrl,
|
|
20
|
+
title,
|
|
21
|
+
appId,
|
|
22
|
+
hostUrl,
|
|
23
|
+
userInfo,
|
|
24
|
+
tags,
|
|
25
|
+
boxStyle = '{"position":"relative","height":"700px"}',
|
|
26
|
+
sceneId,
|
|
27
|
+
isShowSideRight,
|
|
28
|
+
isShowSideLeft,
|
|
29
|
+
modalIndex = 1000,
|
|
30
|
+
dialogIndex,
|
|
31
|
+
agentUrl,
|
|
32
|
+
agentName,
|
|
33
|
+
modalWidth = 1300,
|
|
34
|
+
logoWidth = '42px',
|
|
35
|
+
logoFontSize = '26px',
|
|
36
|
+
logoPosition = 'absolute',
|
|
37
|
+
isTitleSideIcon,
|
|
38
|
+
isShowUploadButton,
|
|
39
|
+
} = this.props;
|
|
13
40
|
const iconConfig = {
|
|
14
41
|
width: `${width || 100}px`,
|
|
15
42
|
height: `${height || 100}px`,
|
|
@@ -30,23 +57,23 @@ export class LogoSplitBtn extends React.Component {
|
|
|
30
57
|
}else {
|
|
31
58
|
iconConfig.bottom = `50px`;
|
|
32
59
|
}
|
|
33
|
-
|
|
34
60
|
return (
|
|
35
61
|
// <div style={{ position: "relative", width: "100vw", height: "100vh", background:'transparent' }}>
|
|
36
|
-
|
|
62
|
+
<div style={{ position: logoPosition, ...iconConfig, zIndex: dialogIndex }}>
|
|
37
63
|
<img src={iconUrl} style={{ width: "100%", height: "100%" }} onClick={(event) => this.setState({ isShow: true })}/>
|
|
38
64
|
<Modal
|
|
39
65
|
wrapClassName={'yt-chat-modal'}
|
|
40
66
|
open={this.state.isShow}
|
|
41
|
-
width={
|
|
67
|
+
width={modalWidth}
|
|
42
68
|
closable={false}
|
|
43
69
|
onCancel={() => this.setState({ isShow: false })}
|
|
44
70
|
footer={null}
|
|
45
71
|
centered={true}
|
|
72
|
+
zIndex={modalIndex}
|
|
46
73
|
>
|
|
47
74
|
<ToolDialog
|
|
48
75
|
title={title}
|
|
49
|
-
|
|
76
|
+
appId={appId}
|
|
50
77
|
hostUrl={hostUrl}
|
|
51
78
|
setDialogVisible={() => {
|
|
52
79
|
this.setState({ isShow: false })
|
|
@@ -54,8 +81,16 @@ export class LogoSplitBtn extends React.Component {
|
|
|
54
81
|
userInfo={userInfo || {}}
|
|
55
82
|
tags={tags || []}
|
|
56
83
|
boxStyle={JSON.parse(boxStyle)}
|
|
57
|
-
isShowSideRight={true}
|
|
58
84
|
sceneId={sceneId}
|
|
85
|
+
isShowSideRight={isShowSideRight}
|
|
86
|
+
isShowSideLeft={isShowSideLeft}
|
|
87
|
+
agentUrl={agentUrl}
|
|
88
|
+
agentName={agentName}
|
|
89
|
+
logoWidth={logoWidth}
|
|
90
|
+
logoFontSize={logoFontSize}
|
|
91
|
+
isTitleSideIcon={isTitleSideIcon}
|
|
92
|
+
modalIndex={modalIndex}
|
|
93
|
+
isShowUploadButton={isShowUploadButton}
|
|
59
94
|
/>
|
|
60
95
|
</Modal>
|
|
61
96
|
</div>
|
|
@@ -3,7 +3,7 @@ import ChatWidget from '../chatWidget/index';
|
|
|
3
3
|
import aiAvatarPng from '../../assets/aicenter/aiavatar.png';
|
|
4
4
|
import historyPng from '../../assets/aicenter/history.png';
|
|
5
5
|
import closePng from '../../assets/aicenter/close.png';
|
|
6
|
-
import { getHistoryList, getSceneInfo } from '../chatWidget/chatWindow/controllers/index';
|
|
6
|
+
import { getFlowInfo, getHistoryList, getSceneInfo } from '../chatWidget/chatWindow/controllers/index';
|
|
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';
|
|
@@ -336,7 +336,12 @@ export class ToolDialog extends React.Component {
|
|
|
336
336
|
}
|
|
337
337
|
|
|
338
338
|
getCurrentFlowHistory=(flowId)=>{
|
|
339
|
-
|
|
339
|
+
let { userInfo = {} } = this.props;
|
|
340
|
+
const { sessionId } = this.state;
|
|
341
|
+
if(isEmpty(userInfo.code)) {
|
|
342
|
+
userInfo.code = sessionId;
|
|
343
|
+
}
|
|
344
|
+
const operationId = userInfo['code'] || '';
|
|
340
345
|
getHistoryList(this.props.hostUrl, flowId, operationId).then((res) => {
|
|
341
346
|
if(res.status === 200){
|
|
342
347
|
this.setState({ historyList: res.data });
|
|
@@ -346,25 +351,31 @@ export class ToolDialog extends React.Component {
|
|
|
346
351
|
|
|
347
352
|
// 获取历史对话列表
|
|
348
353
|
getHistoryList = (sceneData, isRefreshWords) => {
|
|
349
|
-
const { sceneId, flowId } = this.props;
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
this.
|
|
354
|
+
const { sceneId, appId: flowId, isShowSideLeft } = this.props;
|
|
355
|
+
if(isEmpty(sceneId)){
|
|
356
|
+
// 单独组件情况
|
|
357
|
+
if(isRefreshWords){
|
|
358
|
+
this.getFlowInfo().then(currentFlow=>{
|
|
359
|
+
const dropDownList = this.getDropDownList(currentFlow.welcome_words);
|
|
360
|
+
this.setState({ dropDownList, currentFlow })
|
|
361
|
+
})
|
|
362
|
+
}
|
|
363
|
+
if(isShowSideLeft) {
|
|
364
|
+
this.getCurrentFlowHistory(flowId)
|
|
365
|
+
}
|
|
366
|
+
}else{
|
|
367
|
+
const currentScene = sceneData||this.state.sceneInfo;
|
|
368
|
+
const currentFlow = currentScene.flows[0];
|
|
369
|
+
const dropDownList = this.getDropDownList(currentFlow.welcome_words);
|
|
370
|
+
if(!isEmpty(sceneData)){
|
|
371
|
+
this.setState({ currentFlow, dropDownList })
|
|
372
|
+
}else if(isEmpty(this.state.sceneInfo)){
|
|
373
|
+
this.setState({ dropDownList:defaultList })
|
|
374
|
+
}
|
|
375
|
+
if(isShowSideLeft) {
|
|
376
|
+
this.getCurrentFlowHistory(currentFlow.id)
|
|
377
|
+
}
|
|
365
378
|
}
|
|
366
|
-
this.getCurrentFlowHistory(currentFlow.id)
|
|
367
|
-
}
|
|
368
379
|
};
|
|
369
380
|
|
|
370
381
|
getSceneInfo = async ()=>{
|
|
@@ -375,6 +386,14 @@ export class ToolDialog extends React.Component {
|
|
|
375
386
|
return res.data;
|
|
376
387
|
}
|
|
377
388
|
|
|
389
|
+
getFlowInfo = async () => {
|
|
390
|
+
const res = await getFlowInfo(this.props.hostUrl, this.props.appId, api_key);
|
|
391
|
+
if(res.status === 200) {
|
|
392
|
+
this.setState({ sceneInfo: res.data });
|
|
393
|
+
}
|
|
394
|
+
return res.data;
|
|
395
|
+
}
|
|
396
|
+
|
|
378
397
|
// 新建对话
|
|
379
398
|
newDialog = () => {
|
|
380
399
|
if(this.state.dropDownList) {
|
|
@@ -402,63 +421,81 @@ export class ToolDialog extends React.Component {
|
|
|
402
421
|
}
|
|
403
422
|
|
|
404
423
|
render() {
|
|
405
|
-
const
|
|
406
|
-
|
|
424
|
+
const {
|
|
425
|
+
title,
|
|
426
|
+
appId: flowId,
|
|
427
|
+
hostUrl,
|
|
428
|
+
setDialogVisible,
|
|
429
|
+
userInfo,
|
|
430
|
+
boxStyle,
|
|
431
|
+
isShowSideRight,
|
|
432
|
+
isShowSideLeft = true,
|
|
433
|
+
tags = [],
|
|
434
|
+
agentUrl = aiAvatarPng,
|
|
435
|
+
agentName = '校园智多星',
|
|
436
|
+
logoWidth = '42px',
|
|
437
|
+
logoFontSize = '26px',
|
|
438
|
+
isTitleSideIcon = false,// 是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
|
|
439
|
+
modalIndex,
|
|
440
|
+
isShowUploadButton
|
|
441
|
+
} = this.props;
|
|
407
442
|
const { sceneInfo, currentFlow = {} } = this.state;
|
|
408
443
|
const { flows=[], name: sceneName } = sceneInfo;
|
|
409
444
|
return (
|
|
410
445
|
<div style={boxStyle}>
|
|
411
446
|
<style dangerouslySetInnerHTML={{ __html: style }}></style>
|
|
412
|
-
<div style={{ position: 'absolute', top: '18px', right: '18px', zIndex:
|
|
447
|
+
<div style={{ position: 'absolute', top: '18px', right: '18px', zIndex: modalIndex }}>
|
|
413
448
|
{isFunction(setDialogVisible) &&
|
|
414
449
|
<img onClick={() => setDialogVisible(false)} className="p_closeImg" src={closePng}/>}
|
|
415
450
|
</div>
|
|
416
451
|
<div className="p_toolDialog">
|
|
417
|
-
|
|
418
|
-
<div className="
|
|
419
|
-
<
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
<div className="p_historyDialog">
|
|
423
|
-
<div className="p_historyTitle">
|
|
424
|
-
<img className="p_historyImg" src={historyPng}/>
|
|
425
|
-
<div className="p_dialogTitle">对话列表</div>
|
|
452
|
+
{
|
|
453
|
+
isShowSideLeft && <div className="p_toolLeft">
|
|
454
|
+
<div className="p_toolLogo">
|
|
455
|
+
<img className="p_logoImg" style={{ width: logoWidth }} src={agentUrl}/>
|
|
456
|
+
<div className="p_logoText" style={{ fontSize: logoFontSize }}>{agentName}</div>
|
|
426
457
|
</div>
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
this.updateSessionId(item.session_id);
|
|
436
|
-
}}
|
|
437
|
-
>
|
|
458
|
+
<div className="p_historyDialog">
|
|
459
|
+
<div className="p_historyTitle">
|
|
460
|
+
<img className="p_historyImg" src={historyPng}/>
|
|
461
|
+
<div className="p_dialogTitle">对话列表</div>
|
|
462
|
+
</div>
|
|
463
|
+
{this.state.historyList.length > 0 ? (
|
|
464
|
+
<div className="p_historyList">
|
|
465
|
+
{this.state.historyList?.map((item) => (
|
|
438
466
|
<div
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
467
|
+
key={item.session_id}
|
|
468
|
+
className="p_historyItem"
|
|
469
|
+
onClick={() => {
|
|
470
|
+
this.setState({ dropDownList: undefined })
|
|
471
|
+
this.updateSessionId(item.session_id);
|
|
472
|
+
}}
|
|
442
473
|
>
|
|
443
|
-
|
|
474
|
+
<div
|
|
475
|
+
className={`p_historyName ${
|
|
476
|
+
item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''
|
|
477
|
+
}`}
|
|
478
|
+
>
|
|
479
|
+
{item.text}
|
|
480
|
+
</div>
|
|
444
481
|
</div>
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
482
|
+
))}
|
|
483
|
+
</div>
|
|
484
|
+
) : (
|
|
485
|
+
<div className="p_historyListEmpty">
|
|
486
|
+
<img src={historyListEmptyPng}/>
|
|
487
|
+
<div className="p_historyListEmptyText">暂无对话记录</div>
|
|
488
|
+
</div>
|
|
489
|
+
)}
|
|
490
|
+
</div>
|
|
491
|
+
<div className="p_newDialog" onClick={() => {
|
|
492
|
+
this.newDialog()
|
|
493
|
+
}}>
|
|
494
|
+
<img src={addPng}/>
|
|
495
|
+
<div className="p_newDialogText">新建对话</div>
|
|
496
|
+
</div>
|
|
460
497
|
</div>
|
|
461
|
-
|
|
498
|
+
}
|
|
462
499
|
<div className="p_toolRight">
|
|
463
500
|
<ChatWidget
|
|
464
501
|
window_title={currentFlow?.name || title}
|
|
@@ -471,6 +508,8 @@ export class ToolDialog extends React.Component {
|
|
|
471
508
|
getHistoryList={this.getHistoryList}
|
|
472
509
|
setDropDownList={(list) => this.setState({ dropDownList: list })}
|
|
473
510
|
dropDownList={this.state.dropDownList}
|
|
511
|
+
baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
|
|
512
|
+
isShowUploadButton={isShowUploadButton}
|
|
474
513
|
/>
|
|
475
514
|
</div>
|
|
476
515
|
{
|