yt-chat-components 0.6.0 → 0.7.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 +57 -30
- package/src/YtChatView/chatWidget/chatWindow/controllers/index.ts +9 -0
- package/src/YtChatView/chatWidget/chatWindow/index.tsx +23 -5
- package/src/YtChatView/chatWidget/index.tsx +6 -4
- package/src/YtChatView/logoBtn/index.jsx +38 -4
- package/src/YtChatView/logoSplitBtn/index.jsx +39 -6
- package/src/YtChatView/previewDialog/index.jsx +100 -63
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -5,35 +5,8 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Document</title>
|
|
7
7
|
</head>
|
|
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
|
-
<!-- flow-id="a8e7ebd8-9bf7-499b-9e4a-c235078a0910"-->
|
|
19
|
-
<!-- />-->
|
|
20
|
-
<!-- </body>-->
|
|
21
|
-
|
|
22
|
-
<!-- <body style="width: 100vw; height: 100vh; margin:0 ">-->
|
|
23
|
-
<!-- <yt-page-chat-->
|
|
24
|
-
<!-- title="菜鸟驿站"-->
|
|
25
|
-
<!-- host-url="https://ai-api.yuntu.cn"-->
|
|
26
|
-
<!-- flow-id="a8e7ebd8-9bf7-499b-9e4a-c235078a0910"-->
|
|
27
|
-
<!-- user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'-->
|
|
28
|
-
<!-- tags='["tag1", "tag2", "tag3"]'-->
|
|
29
|
-
<!-- box-style='{"height":"100%"}'-->
|
|
30
|
-
<!-- scene-id="e6fb45ea-3415-44e1-a1c8-5e98963bf512"-->
|
|
31
|
-
<!-- is-show-side-right=true-->
|
|
32
|
-
<!-- />-->
|
|
33
|
-
<!-- </body>-->
|
|
34
|
-
|
|
35
8
|
<body style="width: 100vw; height: 100vh; position: relative; margin: unset ">
|
|
36
|
-
<yt-
|
|
9
|
+
<yt-chat
|
|
37
10
|
right="100"
|
|
38
11
|
bottom="100"
|
|
39
12
|
width="50"
|
|
@@ -42,8 +15,62 @@
|
|
|
42
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"
|
|
43
16
|
host-url="https://ai-api.yuntu.cn"
|
|
44
17
|
user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'
|
|
45
|
-
|
|
46
|
-
|
|
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
|
|
47
30
|
/>
|
|
48
31
|
</body>
|
|
32
|
+
|
|
33
|
+
<!--<body style="width: 100vw; height: 100vh; margin:0 ">-->
|
|
34
|
+
<!--<yt-page-chat-->
|
|
35
|
+
<!-- title="菜鸟驿站"-->
|
|
36
|
+
<!-- host-url="https://ai-api.yuntu.cn"-->
|
|
37
|
+
<!-- app-id="a8e7ebd8-9bf7-499b-9e4a-c235078a0910"-->
|
|
38
|
+
<!-- user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'-->
|
|
39
|
+
<!-- tags='[{"name":"今天天气怎么样？"},{"name":"明天天气怎么样？"},{"name":"昨天天气怎么样？"}]'-->
|
|
40
|
+
<!-- box-style='{"height":"100%"}'-->
|
|
41
|
+
<!-- is-show-side-right=false-->
|
|
42
|
+
<!-- is-show-side-left=false-->
|
|
43
|
+
<!-- dialog-index="999999999"-->
|
|
44
|
+
<!-- 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"-->
|
|
45
|
+
<!-- agent-name="医专智能助手"-->
|
|
46
|
+
<!-- logo-width="42px"-->
|
|
47
|
+
<!-- logo-font-size="26px"-->
|
|
48
|
+
<!-- is-title-side-icon=true-->
|
|
49
|
+
<!--/>-->
|
|
50
|
+
<!--</body>-->
|
|
51
|
+
|
|
52
|
+
<!--<body style="width: 100vw; height: 100vh; position: relative; margin: unset ">-->
|
|
53
|
+
<!--<yt-split-modal-chat-->
|
|
54
|
+
<!-- right="100"-->
|
|
55
|
+
<!-- bottom="100"-->
|
|
56
|
+
<!-- width="50"-->
|
|
57
|
+
<!-- height="50"-->
|
|
58
|
+
<!-- title="招生助手"-->
|
|
59
|
+
<!-- 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"-->
|
|
60
|
+
<!-- host-url="https://ai-api.yuntu.cn"-->
|
|
61
|
+
<!-- user-info='{"id": "test", "name": "test", "code":"test" }'-->
|
|
62
|
+
<!-- is-show-side-right=true-->
|
|
63
|
+
<!-- is-show-side-left=true-->
|
|
64
|
+
<!-- scene-id="c1e7a2a4-6127-4e53-a529-113da78eb069"-->
|
|
65
|
+
<!-- modal-index="9999999999"-->
|
|
66
|
+
<!-- modal-width="1400"-->
|
|
67
|
+
<!-- dialog-index="999999999"-->
|
|
68
|
+
<!-- agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/agent.png"-->
|
|
69
|
+
<!-- agent-name="医专智能助手"-->
|
|
70
|
+
<!-- logo-width="42px"-->
|
|
71
|
+
<!-- logo-font-size="26px"-->
|
|
72
|
+
<!-- logo-position="fixed"-->
|
|
73
|
+
<!-- is-title-side-icon=true-->
|
|
74
|
+
<!--/>-->
|
|
75
|
+
<!--</body>-->
|
|
49
76
|
</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,7 @@ export default function ChatWindow({
|
|
|
68
68
|
additional_headers,
|
|
69
69
|
setDropDownList = () => {},
|
|
70
70
|
dropDownList = [],
|
|
71
|
+
baseConfig = {},
|
|
71
72
|
}: {
|
|
72
73
|
tags: [];
|
|
73
74
|
getHistoryList: Function;
|
|
@@ -104,6 +105,7 @@ export default function ChatWindow({
|
|
|
104
105
|
height?: string;
|
|
105
106
|
sessionId: string;
|
|
106
107
|
additional_headers?: { [key: string]: string };
|
|
108
|
+
baseConfig: object;
|
|
107
109
|
}) {
|
|
108
110
|
const [value, setValue] = useState<string>('');
|
|
109
111
|
const ref = useRef<HTMLDivElement>(null);
|
|
@@ -123,6 +125,7 @@ export default function ChatWindow({
|
|
|
123
125
|
const isStream = true;//是否流式输出（手动开关）
|
|
124
126
|
const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
|
|
125
127
|
const [tagList, setTagList] = useState([]); // 问题标签列表
|
|
128
|
+
const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
|
|
126
129
|
|
|
127
130
|
let voiceChunks = []; // 临时存储录制的语音片段
|
|
128
131
|
// 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
|
|
@@ -283,7 +286,11 @@ export default function ChatWindow({
|
|
|
283
286
|
});
|
|
284
287
|
setSendingMessage(true);
|
|
285
288
|
setValue('');
|
|
286
|
-
|
|
289
|
+
let userInfoClone = userInfo;
|
|
290
|
+
if(isEmpty(userInfoClone.code)) {
|
|
291
|
+
userInfoClone.code = sessionId;
|
|
292
|
+
}
|
|
293
|
+
const code = userInfoClone['code'] ? userInfoClone['code'] : ""
|
|
287
294
|
let embedAppExtend: embedAppExtend = {
|
|
288
295
|
operator_id: code,
|
|
289
296
|
upload_file_path_list: [],
|
|
@@ -561,7 +568,7 @@ export default function ChatWindow({
|
|
|
561
568
|
setTimeout(() => {
|
|
562
569
|
// inputRef.current?.focus();
|
|
563
570
|
}, 100);
|
|
564
|
-
}, [messages, open]);
|
|
571
|
+
}, [messages, open, tags]);
|
|
565
572
|
|
|
566
573
|
/**
|
|
567
574
|
* 当获取历史记录时（sessindId变化时），清空消息，并添加历史记录
|
|
@@ -569,7 +576,11 @@ export default function ChatWindow({
|
|
|
569
576
|
useEffect(() => {
|
|
570
577
|
const fetchChatHistory = async () => {
|
|
571
578
|
try {
|
|
572
|
-
|
|
579
|
+
let userInfoClone = userInfo;
|
|
580
|
+
if(isEmpty(userInfoClone.code)) {
|
|
581
|
+
userInfoClone.code = sessionId;
|
|
582
|
+
}
|
|
583
|
+
const res = await getChatHistory(hostUrl, flowId, sessionId, userInfoClone['code']);
|
|
573
584
|
const chatHistory = res.data?.length ? res.data : [];
|
|
574
585
|
|
|
575
586
|
clearMessage();
|
|
@@ -606,7 +617,14 @@ export default function ChatWindow({
|
|
|
606
617
|
>
|
|
607
618
|
<div className="cl-middle-container">
|
|
608
619
|
<div className="cl-header">
|
|
609
|
-
<div className="header-title"
|
|
620
|
+
<div className="header-title">
|
|
621
|
+
{
|
|
622
|
+
isTitleSideIcon ?
|
|
623
|
+
<img className="p_logoImg" style={{width: logoWidth, height: 'auto', marginRight: 10}} src={agentUrl}/> :
|
|
624
|
+
<span className="diamond"/>
|
|
625
|
+
}
|
|
626
|
+
{window_title}
|
|
627
|
+
</div>
|
|
610
628
|
<div className="cl-header-subtitle"/>
|
|
611
629
|
{!isEmpty(dropDownList) && (
|
|
612
630
|
<div className="cl-drop-down">
|
|
@@ -673,7 +691,7 @@ export default function ChatWindow({
|
|
|
673
691
|
className="w_tagListClass"
|
|
674
692
|
style={{
|
|
675
693
|
// bottom: fileList.length > 0 ? '130px' : '80px',
|
|
676
|
-
display: tagList
|
|
694
|
+
display: tagList?.length > 0 ? '' : 'none',
|
|
677
695
|
}}
|
|
678
696
|
>
|
|
679
697
|
{tagList.map((item, index) => (
|
|
@@ -36,6 +36,7 @@ export default function ChatWidget({
|
|
|
36
36
|
start_open = false,
|
|
37
37
|
setDropDownList,
|
|
38
38
|
dropDownList,
|
|
39
|
+
baseConfig
|
|
39
40
|
}: {
|
|
40
41
|
tags: [];
|
|
41
42
|
getHistoryList: Function;
|
|
@@ -68,6 +69,7 @@ export default function ChatWidget({
|
|
|
68
69
|
additional_headers?: { [key: string]: string };
|
|
69
70
|
session_id?: string;
|
|
70
71
|
start_open?: boolean;
|
|
72
|
+
baseConfig:object;
|
|
71
73
|
}) {
|
|
72
74
|
const [open, setOpen] = useState(start_open);
|
|
73
75
|
const [messages, setMessages] = useState<ChatMessageType[]>([]);
|
|
@@ -494,7 +496,7 @@ video {
|
|
|
494
496
|
margin-top:2rem;
|
|
495
497
|
}
|
|
496
498
|
.drop-down-item-card {
|
|
497
|
-
width:
|
|
499
|
+
width: 33%;
|
|
498
500
|
padding: 1.2rem 1.2rem 0.3rem;
|
|
499
501
|
height:7.5rem;
|
|
500
502
|
font-weight: 400;
|
|
@@ -2257,10 +2259,10 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2257
2259
|
|
|
2258
2260
|
&:hover {
|
|
2259
2261
|
background: linear-gradient( 270deg, #828EFE 0%, #4B4FFF 100%);
|
|
2260
|
-
.
|
|
2262
|
+
.w_tagImgh {
|
|
2261
2263
|
filter: brightness(100);
|
|
2262
2264
|
}
|
|
2263
|
-
.
|
|
2265
|
+
.w_tagItemText {
|
|
2264
2266
|
color: #fff;
|
|
2265
2267
|
}
|
|
2266
2268
|
}
|
|
@@ -2272,7 +2274,6 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2272
2274
|
.w_tagItemText {
|
|
2273
2275
|
width: fit-content;
|
|
2274
2276
|
padding-top: 2px;
|
|
2275
|
-
padding-left: 8px;
|
|
2276
2277
|
color: #1552FF;
|
|
2277
2278
|
font-size: 14px;
|
|
2278
2279
|
}
|
|
@@ -2382,6 +2383,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2382
2383
|
additional_headers={additional_headers}
|
|
2383
2384
|
setDropDownList={setDropDownList}
|
|
2384
2385
|
dropDownList={dropDownList}
|
|
2386
|
+
baseConfig={baseConfig}
|
|
2385
2387
|
/>
|
|
2386
2388
|
</div>
|
|
2387
2389
|
);
|
|
@@ -9,7 +9,32 @@ 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
|
+
} = this.props;
|
|
13
38
|
const iconConfig = {
|
|
14
39
|
width: `${width || 100}px`,
|
|
15
40
|
height: `${height || 100}px`,
|
|
@@ -32,20 +57,21 @@ export class LogoBtn extends React.Component {
|
|
|
32
57
|
}
|
|
33
58
|
|
|
34
59
|
return (
|
|
35
|
-
|
|
60
|
+
<div style={{ position: logoPosition, ...iconConfig, zIndex: dialogIndex }}>
|
|
36
61
|
{iconUrl && <img src={iconUrl} style={{ width: "100%", height: "100%" }} onClick={(event) => this.setState({ isShow: true })}/>}
|
|
37
62
|
<Modal
|
|
38
63
|
wrapClassName={'yt-chat-modal'}
|
|
39
64
|
open={this.state.isShow}
|
|
40
|
-
width={
|
|
65
|
+
width={modalWidth}
|
|
41
66
|
closable={false}
|
|
42
67
|
onCancel={() => this.setState({ isShow: false })}
|
|
43
68
|
footer={null}
|
|
44
69
|
centered={true}
|
|
70
|
+
zIndex={modalIndex}
|
|
45
71
|
>
|
|
46
72
|
<ToolDialog
|
|
47
73
|
title={title}
|
|
48
|
-
|
|
74
|
+
appId={appId}
|
|
49
75
|
hostUrl={hostUrl}
|
|
50
76
|
setDialogVisible={() => {
|
|
51
77
|
this.setState({ isShow: false })
|
|
@@ -53,6 +79,14 @@ export class LogoBtn extends React.Component {
|
|
|
53
79
|
userInfo={userInfo || {}}
|
|
54
80
|
tags={tags || []}
|
|
55
81
|
boxStyle={boxStyle || { position: 'relative', height: '700px' }}
|
|
82
|
+
isShowSideRight={isShowSideRight}
|
|
83
|
+
isShowSideLeft={isShowSideLeft}
|
|
84
|
+
agentUrl={agentUrl}
|
|
85
|
+
agentName={agentName}
|
|
86
|
+
logoWidth={logoWidth}
|
|
87
|
+
logoFontSize={logoFontSize}
|
|
88
|
+
isTitleSideIcon={isTitleSideIcon}
|
|
89
|
+
modalIndex={modalIndex}
|
|
56
90
|
/>
|
|
57
91
|
</Modal>
|
|
58
92
|
</div>
|
|
@@ -9,7 +9,33 @@ 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
|
+
} = this.props;
|
|
13
39
|
const iconConfig = {
|
|
14
40
|
width: `${width || 100}px`,
|
|
15
41
|
height: `${height || 100}px`,
|
|
@@ -30,23 +56,23 @@ export class LogoSplitBtn extends React.Component {
|
|
|
30
56
|
}else {
|
|
31
57
|
iconConfig.bottom = `50px`;
|
|
32
58
|
}
|
|
33
|
-
|
|
34
59
|
return (
|
|
35
60
|
// <div style={{ position: "relative", width: "100vw", height: "100vh", background:'transparent' }}>
|
|
36
|
-
|
|
61
|
+
<div style={{ position: logoPosition, ...iconConfig, zIndex: dialogIndex }}>
|
|
37
62
|
<img src={iconUrl} style={{ width: "100%", height: "100%" }} onClick={(event) => this.setState({ isShow: true })}/>
|
|
38
63
|
<Modal
|
|
39
64
|
wrapClassName={'yt-chat-modal'}
|
|
40
65
|
open={this.state.isShow}
|
|
41
|
-
width={
|
|
66
|
+
width={modalWidth}
|
|
42
67
|
closable={false}
|
|
43
68
|
onCancel={() => this.setState({ isShow: false })}
|
|
44
69
|
footer={null}
|
|
45
70
|
centered={true}
|
|
71
|
+
zIndex={modalIndex}
|
|
46
72
|
>
|
|
47
73
|
<ToolDialog
|
|
48
74
|
title={title}
|
|
49
|
-
|
|
75
|
+
appId={appId}
|
|
50
76
|
hostUrl={hostUrl}
|
|
51
77
|
setDialogVisible={() => {
|
|
52
78
|
this.setState({ isShow: false })
|
|
@@ -54,8 +80,15 @@ export class LogoSplitBtn extends React.Component {
|
|
|
54
80
|
userInfo={userInfo || {}}
|
|
55
81
|
tags={tags || []}
|
|
56
82
|
boxStyle={JSON.parse(boxStyle)}
|
|
57
|
-
isShowSideRight={true}
|
|
58
83
|
sceneId={sceneId}
|
|
84
|
+
isShowSideRight={isShowSideRight}
|
|
85
|
+
isShowSideLeft={isShowSideLeft}
|
|
86
|
+
agentUrl={agentUrl}
|
|
87
|
+
agentName={agentName}
|
|
88
|
+
logoWidth={logoWidth}
|
|
89
|
+
logoFontSize={logoFontSize}
|
|
90
|
+
isTitleSideIcon={isTitleSideIcon}
|
|
91
|
+
modalIndex={modalIndex}
|
|
59
92
|
/>
|
|
60
93
|
</Modal>
|
|
61
94
|
</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,80 @@ 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
|
+
} = this.props;
|
|
407
441
|
const { sceneInfo, currentFlow = {} } = this.state;
|
|
408
442
|
const { flows=[], name: sceneName } = sceneInfo;
|
|
409
443
|
return (
|
|
410
444
|
<div style={boxStyle}>
|
|
411
445
|
<style dangerouslySetInnerHTML={{ __html: style }}></style>
|
|
412
|
-
<div style={{ position: 'absolute', top: '18px', right: '18px', zIndex:
|
|
446
|
+
<div style={{ position: 'absolute', top: '18px', right: '18px', zIndex: modalIndex }}>
|
|
413
447
|
{isFunction(setDialogVisible) &&
|
|
414
448
|
<img onClick={() => setDialogVisible(false)} className="p_closeImg" src={closePng}/>}
|
|
415
449
|
</div>
|
|
416
450
|
<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>
|
|
451
|
+
{
|
|
452
|
+
isShowSideLeft && <div className="p_toolLeft">
|
|
453
|
+
<div className="p_toolLogo">
|
|
454
|
+
<img className="p_logoImg" style={{ width: logoWidth }} src={agentUrl}/>
|
|
455
|
+
<div className="p_logoText" style={{ fontSize: logoFontSize }}>{agentName}</div>
|
|
426
456
|
</div>
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
this.updateSessionId(item.session_id);
|
|
436
|
-
}}
|
|
437
|
-
>
|
|
457
|
+
<div className="p_historyDialog">
|
|
458
|
+
<div className="p_historyTitle">
|
|
459
|
+
<img className="p_historyImg" src={historyPng}/>
|
|
460
|
+
<div className="p_dialogTitle">对话列表</div>
|
|
461
|
+
</div>
|
|
462
|
+
{this.state.historyList.length > 0 ? (
|
|
463
|
+
<div className="p_historyList">
|
|
464
|
+
{this.state.historyList?.map((item) => (
|
|
438
465
|
<div
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
466
|
+
key={item.session_id}
|
|
467
|
+
className="p_historyItem"
|
|
468
|
+
onClick={() => {
|
|
469
|
+
this.setState({ dropDownList: undefined })
|
|
470
|
+
this.updateSessionId(item.session_id);
|
|
471
|
+
}}
|
|
442
472
|
>
|
|
443
|
-
|
|
473
|
+
<div
|
|
474
|
+
className={`p_historyName ${
|
|
475
|
+
item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''
|
|
476
|
+
}`}
|
|
477
|
+
>
|
|
478
|
+
{item.text}
|
|
479
|
+
</div>
|
|
444
480
|
</div>
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
481
|
+
))}
|
|
482
|
+
</div>
|
|
483
|
+
) : (
|
|
484
|
+
<div className="p_historyListEmpty">
|
|
485
|
+
<img src={historyListEmptyPng}/>
|
|
486
|
+
<div className="p_historyListEmptyText">暂无对话记录</div>
|
|
487
|
+
</div>
|
|
488
|
+
)}
|
|
489
|
+
</div>
|
|
490
|
+
<div className="p_newDialog" onClick={() => {
|
|
491
|
+
this.newDialog()
|
|
492
|
+
}}>
|
|
493
|
+
<img src={addPng}/>
|
|
494
|
+
<div className="p_newDialogText">新建对话</div>
|
|
495
|
+
</div>
|
|
460
496
|
</div>
|
|
461
|
-
|
|
497
|
+
}
|
|
462
498
|
<div className="p_toolRight">
|
|
463
499
|
<ChatWidget
|
|
464
500
|
window_title={currentFlow?.name || title}
|
|
@@ -471,6 +507,7 @@ export class ToolDialog extends React.Component {
|
|
|
471
507
|
getHistoryList={this.getHistoryList}
|
|
472
508
|
setDropDownList={(list) => this.setState({ dropDownList: list })}
|
|
473
509
|
dropDownList={this.state.dropDownList}
|
|
510
|
+
baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
|
|
474
511
|
/>
|
|
475
512
|
</div>
|
|
476
513
|
{
|