yt-chat-components 0.3.0 → 0.5.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/.idea/sonarlint/issuestore/index.pb +0 -2
- package/build/static/js/bundle.min.js +1 -1
- package/build/static/js/bundle.min.js.LICENSE.txt +8 -0
- package/package.json +1 -1
- package/public/index.html +13 -13
- package/src/YtChatView/chatWidget/chatWindow/controllers/index.ts +7 -5
- package/src/YtChatView/chatWidget/chatWindow/index.tsx +16 -7
- package/src/YtChatView/chatWidget/index.tsx +6 -5
- package/src/YtChatView/previewDialog/index.jsx +73 -36
- package/src/chatWidget/chatWindow/index.tsx +2 -2
- package/yt-chat-components-0.4.0.tgz +0 -0
- package/.idea/sonarlint/issuestore/6/c/6c024c1d0ad64656b9d4b0695ec3c49c0454addf +0 -0
|
@@ -97,10 +97,18 @@
|
|
|
97
97
|
|
|
98
98
|
/** */
|
|
99
99
|
|
|
100
|
+
/** */
|
|
101
|
+
|
|
100
102
|
/** */
|
|
101
103
|
|
|
102
104
|
/** */
|
|
103
105
|
|
|
106
|
+
/** */
|
|
107
|
+
|
|
108
|
+
/** */
|
|
109
|
+
|
|
110
|
+
/** */
|
|
111
|
+
|
|
104
112
|
/** */
|
|
105
113
|
|
|
106
114
|
/** */
|
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
<!-- />-->
|
|
20
20
|
<!-- </body>-->
|
|
21
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
|
|
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
34
|
|
|
35
35
|
<body style="width: 100vw; height: 100vh; position: relative; margin: unset ">
|
|
36
36
|
<yt-split-modal-chat
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
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
43
|
host-url="https://ai-api.yuntu.cn"
|
|
44
44
|
user-info='{"id": "123", "name": "John Doe", "code":"1606451129" }'
|
|
45
|
-
flow-id="
|
|
45
|
+
flow-id="3fa4348a-ba83-4054-80d7-594f5cf2f5b5"
|
|
46
46
|
scene-id="e6fb45ea-3415-44e1-a1c8-5e98963bf512"
|
|
47
47
|
/>
|
|
48
48
|
</body>
|
|
@@ -48,7 +48,7 @@ export async function sendMessage(
|
|
|
48
48
|
if (embed_app_extend) {
|
|
49
49
|
data['embed_app_extend'] = embed_app_extend;
|
|
50
50
|
}
|
|
51
|
-
let headers: { [key: string]: string } = {'Content-Type': 'application/json'};
|
|
51
|
+
let headers: { [key: string]: string } = {'Content-Type': 'application/json', 'timeout': 600000};
|
|
52
52
|
if (api_key) {
|
|
53
53
|
headers['x-api-key'] = api_key;
|
|
54
54
|
}
|
|
@@ -81,7 +81,7 @@ export async function sendMessage(
|
|
|
81
81
|
async function fetchCustomStream(url, body, headers, handleMessageContent, signal) {
|
|
82
82
|
const response = await fetch(url, {
|
|
83
83
|
method: 'POST',
|
|
84
|
-
headers: headers,
|
|
84
|
+
headers: {...headers, timeout: 600000},
|
|
85
85
|
body: JSON.stringify(body),
|
|
86
86
|
signal: signal,
|
|
87
87
|
});
|
|
@@ -182,7 +182,7 @@ function extractAndParseJSON(buffer, handleMessageContent) {
|
|
|
182
182
|
* @param operatorId
|
|
183
183
|
*/
|
|
184
184
|
export async function getHistoryList(baseUrl: string, flowId: string, operatorId: string) {
|
|
185
|
-
return axios.get(`${baseUrl}/api/v1/embed/chat_history_list/${flowId}/${operatorId}
|
|
185
|
+
return axios.get(`${baseUrl}/api/v1/embed/chat_history_list/${flowId}/${operatorId}`, {timeout: 600000});
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
/**
|
|
@@ -212,7 +212,8 @@ export async function getChatHistory(
|
|
|
212
212
|
export async function fetchUploadFile(baseUrl: string, file: File, flowId: string, api_key: string) {
|
|
213
213
|
const headers = {
|
|
214
214
|
'Content-Type': 'multipart/form-data',
|
|
215
|
-
'x-api-key': api_key
|
|
215
|
+
'x-api-key': api_key,
|
|
216
|
+
timeout:600000
|
|
216
217
|
};
|
|
217
218
|
const formData = new FormData();
|
|
218
219
|
formData.append('file', file);
|
|
@@ -230,7 +231,8 @@ export async function fetchUploadFile(baseUrl: string, file: File, flowId: strin
|
|
|
230
231
|
export async function getSceneInfo(baseUrl: string, sceneId: string, api_key: string) {
|
|
231
232
|
const headers = {
|
|
232
233
|
'Content-Type': 'multipart/form-data',
|
|
233
|
-
'x-api-key': api_key
|
|
234
|
+
'x-api-key': api_key,
|
|
235
|
+
timeout:600000
|
|
234
236
|
};
|
|
235
237
|
return axios.get(`${baseUrl}/api/t1/scene/detail/${sceneId}`,{headers});
|
|
236
238
|
}
|
|
@@ -22,7 +22,7 @@ import typeRPubPng from '../../../assets/aicenter/type-rpub.png';
|
|
|
22
22
|
import soundWavePng from '../../../assets/aicenter/sound-wave.gif';
|
|
23
23
|
import luyinPng from '../../../assets/aicenter/luyin.png';
|
|
24
24
|
import { RightOutlined } from '@ant-design/icons';
|
|
25
|
-
import { Image, message as messageTip, Tooltip } from 'antd';
|
|
25
|
+
import { Image, message as messageTip, Tooltip, Typography } from 'antd';
|
|
26
26
|
import { isEmpty, isFunction } from 'lodash';
|
|
27
27
|
import btn_answer from '../../../assets/aicenter/btn_answer.png';
|
|
28
28
|
|
|
@@ -120,7 +120,7 @@ export default function ChatWindow({
|
|
|
120
120
|
const scrollContainerRef = useRef(null);
|
|
121
121
|
const [showLeftArrow, setShowLeftArrow] = useState(false); // 控制左侧箭头显示
|
|
122
122
|
const [showRightArrow, setShowRightArrow] = useState(false); // 控制右侧箭头显示
|
|
123
|
-
const
|
|
123
|
+
const isStream = true;//是否流式输出（手动开关）
|
|
124
124
|
const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
|
|
125
125
|
const [tagList, setTagList] = useState([]); // 问题标签列表
|
|
126
126
|
|
|
@@ -307,7 +307,7 @@ export default function ChatWindow({
|
|
|
307
307
|
handleScroll();
|
|
308
308
|
sendMessage(
|
|
309
309
|
embedAppExtend,
|
|
310
|
-
|
|
310
|
+
isStream,
|
|
311
311
|
handleMessageContent,
|
|
312
312
|
abortControllerRef.current.signal,
|
|
313
313
|
hostUrl,
|
|
@@ -323,7 +323,7 @@ export default function ChatWindow({
|
|
|
323
323
|
)
|
|
324
324
|
.then((res) => {
|
|
325
325
|
// 非流式输出
|
|
326
|
-
if(!
|
|
326
|
+
if(!isStream){
|
|
327
327
|
sendMessageNoStream(res);
|
|
328
328
|
}
|
|
329
329
|
getHistoryList();
|
|
@@ -591,7 +591,9 @@ export default function ChatWindow({
|
|
|
591
591
|
fetchChatHistory();
|
|
592
592
|
|
|
593
593
|
return () => {
|
|
594
|
-
abortControllerRef.current.abort();
|
|
594
|
+
abortControllerRef.current.abort('disconnect');
|
|
595
|
+
// abortControllerRef是一次性的，中止之后要初始化，否则fetch请求会被中止导致请求无响应
|
|
596
|
+
abortControllerRef.current = new AbortController();
|
|
595
597
|
};
|
|
596
598
|
}, [sessionId]);
|
|
597
599
|
|
|
@@ -612,7 +614,13 @@ export default function ChatWindow({
|
|
|
612
614
|
<div className="drop-down-list">
|
|
613
615
|
{dropDownList.map(({ backgroundImg, title }) => (
|
|
614
616
|
<div className="drop-down-item-card" key={title}>
|
|
615
|
-
|
|
617
|
+
<Typography.Paragraph
|
|
618
|
+
className="drop-down-item-title"
|
|
619
|
+
ellipsis={{
|
|
620
|
+
rows: 2,
|
|
621
|
+
tooltip: `“${title}”`,
|
|
622
|
+
}}>{'“'+title+'”'}
|
|
623
|
+
</Typography.Paragraph>
|
|
616
624
|
<div className="drop-down-item-bottom">
|
|
617
625
|
<div
|
|
618
626
|
className="drop-down-item-bottom-button"
|
|
@@ -664,7 +672,7 @@ export default function ChatWindow({
|
|
|
664
672
|
<div
|
|
665
673
|
className="w_tagListClass"
|
|
666
674
|
style={{
|
|
667
|
-
bottom: fileList.length > 0 ? '130px' : '80px',
|
|
675
|
+
// bottom: fileList.length > 0 ? '130px' : '80px',
|
|
668
676
|
display: tagList.length > 0 ? '' : 'none',
|
|
669
677
|
}}
|
|
670
678
|
>
|
|
@@ -674,6 +682,7 @@ export default function ChatWindow({
|
|
|
674
682
|
className="w_tagItemBox"
|
|
675
683
|
onClick={() => {
|
|
676
684
|
handleClick(item?.name);
|
|
685
|
+
setFileList([]);
|
|
677
686
|
}}
|
|
678
687
|
>
|
|
679
688
|
<div>
|
|
@@ -495,8 +495,8 @@ video {
|
|
|
495
495
|
}
|
|
496
496
|
.drop-down-item-card {
|
|
497
497
|
width: 32%;
|
|
498
|
-
padding: 1.
|
|
499
|
-
height:
|
|
498
|
+
padding: 1.2rem 1.2rem 0.3rem;
|
|
499
|
+
height:7.5rem;
|
|
500
500
|
font-weight: 400;
|
|
501
501
|
font-size: 14px;
|
|
502
502
|
color: #FFFFFF;
|
|
@@ -516,9 +516,10 @@ video {
|
|
|
516
516
|
font-weight: 400;
|
|
517
517
|
font-size: 16px;
|
|
518
518
|
color: #000000;
|
|
519
|
-
line-height:
|
|
519
|
+
line-height: 20px;
|
|
520
520
|
text-align: left;
|
|
521
521
|
width: 100%;
|
|
522
|
+
margin-bottom:0 !important;
|
|
522
523
|
}
|
|
523
524
|
.drop-down-item-bottom{
|
|
524
525
|
display:flex;
|
|
@@ -2232,7 +2233,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2232
2233
|
}
|
|
2233
2234
|
|
|
2234
2235
|
.w_tagListClass {
|
|
2235
|
-
position: absolute;
|
|
2236
|
+
// position: absolute;
|
|
2236
2237
|
width: 100%;
|
|
2237
2238
|
height: fit-content;
|
|
2238
2239
|
// background: #F9FAFB;
|
|
@@ -2301,7 +2302,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
|
|
|
2301
2302
|
box-shadow: none !important;
|
|
2302
2303
|
color: #333;
|
|
2303
2304
|
outline: 0;
|
|
2304
|
-
padding: 5px 10px 0 10px;
|
|
2305
|
+
// padding: 5px 10px 0 10px;
|
|
2305
2306
|
width: 100%;
|
|
2306
2307
|
|
|
2307
2308
|
box-sizing: border-box;
|
|
@@ -9,7 +9,7 @@ import { v4 as uuidv4 } from 'uuid';
|
|
|
9
9
|
import historyListEmptyPng from '../../assets/aicenter/history-list-empty.png';
|
|
10
10
|
import addPng from '../../assets/aicenter/add.png';
|
|
11
11
|
import {isEmpty, isFunction} from "lodash";
|
|
12
|
-
import { Button, message as messageTip, Progress } from 'antd'
|
|
12
|
+
import { Button, message as messageTip, Progress, Skeleton } from 'antd'
|
|
13
13
|
import { CloseOutlined } from "@ant-design/icons";
|
|
14
14
|
import moreAi from '../../assets/aicenter/moreAi.png';
|
|
15
15
|
import moreBg from '../../assets/aicenter/moreBg.png';
|
|
@@ -346,13 +346,23 @@ export class ToolDialog extends React.Component {
|
|
|
346
346
|
|
|
347
347
|
// 获取历史对话列表
|
|
348
348
|
getHistoryList = (sceneData) => {
|
|
349
|
-
const
|
|
350
|
-
if(
|
|
351
|
-
|
|
349
|
+
const { sceneId, flowId } = this.props;
|
|
350
|
+
if(isEmpty(sceneId)){
|
|
351
|
+
// 单独组件情况
|
|
352
|
+
this.setState({ dropDownList: defaultList })
|
|
353
|
+
this.getCurrentFlowHistory(flowId)
|
|
354
|
+
|
|
355
|
+
}else{
|
|
356
|
+
const currentScene = sceneData||this.state.sceneInfo;
|
|
357
|
+
const currentFlow = currentScene.flows[0];
|
|
352
358
|
const dropDownList = this.getDropDownList(currentFlow.welcome_words);
|
|
353
|
-
|
|
359
|
+
if(!isEmpty(sceneData)){
|
|
360
|
+
this.setState({ currentFlow, dropDownList })
|
|
361
|
+
}else if(isEmpty(this.state.sceneInfo)){
|
|
362
|
+
this.setState({ dropDownList:defaultList })
|
|
363
|
+
}
|
|
364
|
+
this.getCurrentFlowHistory(currentFlow.id)
|
|
354
365
|
}
|
|
355
|
-
this.getCurrentFlowHistory(realFlowId)
|
|
356
366
|
};
|
|
357
367
|
|
|
358
368
|
getSceneInfo = async ()=>{
|
|
@@ -462,7 +472,7 @@ export class ToolDialog extends React.Component {
|
|
|
462
472
|
/>
|
|
463
473
|
</div>
|
|
464
474
|
{
|
|
465
|
-
isShowSideRight&&
|
|
475
|
+
isShowSideRight &&
|
|
466
476
|
<div className={"p_toolRightToRight"}>
|
|
467
477
|
<div className={"rightInnerContainer"}>
|
|
468
478
|
<div>
|
|
@@ -470,42 +480,69 @@ export class ToolDialog extends React.Component {
|
|
|
470
480
|
<img width={15} src={self_skills}/>
|
|
471
481
|
<span style={{ color: "#333333" }}>专项技能</span>
|
|
472
482
|
</h3>
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
483
|
+
{
|
|
484
|
+
isEmpty(flows) ?
|
|
485
|
+
<Skeleton
|
|
486
|
+
title={false}
|
|
487
|
+
active
|
|
488
|
+
paragraph={{ rows: 5, width: '100%' }}
|
|
489
|
+
/>
|
|
490
|
+
:
|
|
491
|
+
<div className={"rightSkillContainer"}>
|
|
492
|
+
<div className={"rightSkillList"}>
|
|
493
|
+
{flows.slice(0, 12).map((item) => (
|
|
494
|
+
<div className={"rightSkillItem"} key={item.id} onClick={() => {
|
|
495
|
+
// 右侧点击一个技能，更新sessionId，切换当前flow信息，重新查询历史记录
|
|
496
|
+
this.setState({
|
|
497
|
+
sessionId: uuidv4(),
|
|
498
|
+
currentFlow: item,
|
|
499
|
+
dropDownList: this.getDropDownList(item.welcome_words)
|
|
500
|
+
});
|
|
501
|
+
this.getCurrentFlowHistory(item.id);
|
|
502
|
+
}}>
|
|
503
|
+
<img
|
|
504
|
+
src={item.icon}
|
|
505
|
+
alt={item.name}/>
|
|
506
|
+
<p>{item.name}</p>
|
|
507
|
+
</div>
|
|
508
|
+
))}
|
|
489
509
|
</div>
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
</div>
|
|
510
|
+
</div>
|
|
511
|
+
}
|
|
493
512
|
</div>
|
|
494
513
|
<div>
|
|
495
514
|
<h3 className={"rightKnowledgeTitle"}>
|
|
496
515
|
<img width={15} src={self_knowledge}/>
|
|
497
516
|
<span style={{ color: "#333333" }}>个人知识库</span>
|
|
498
517
|
</h3>
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
518
|
+
{
|
|
519
|
+
isEmpty(currentFlow) ?
|
|
520
|
+
<Skeleton
|
|
521
|
+
title={false}
|
|
522
|
+
active
|
|
523
|
+
paragraph={{ rows: 5, width: '100%' }}
|
|
524
|
+
/> :
|
|
525
|
+
<div className={"rightKnowledgeContainer"}>
|
|
526
|
+
<img src={moreBg}/>
|
|
527
|
+
<div style={{ position: 'absolute', top: '40px', left: '16px' }}>
|
|
528
|
+
<div>文件总数<span style={{
|
|
529
|
+
padding: 8,
|
|
530
|
+
fontSize: '20px',
|
|
531
|
+
fontWeight: 700
|
|
532
|
+
}}>{currentFlow.k_count || 0}</span>个
|
|
533
|
+
</div>
|
|
534
|
+
<div style={{ marginTop: 10 }}>文件总量<span style={{
|
|
535
|
+
padding: 8,
|
|
536
|
+
fontSize: '20px',
|
|
537
|
+
fontWeight: 700
|
|
538
|
+
}}>{formatFileSize(currentFlow.k_size).formattedSize}</span>{formatFileSize(currentFlow.k_size).unit}
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
<div className={"rightMoreButton"}>
|
|
542
|
+
<div className={"rightMoreTitle"} onClick={() => messageTip.info("敬请期待")}>训练你的专属知识库</div>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
}
|
|
509
546
|
</div>
|
|
510
547
|
</div>
|
|
511
548
|
</div>
|
|
@@ -91,7 +91,7 @@ export default function ChatWindow({
|
|
|
91
91
|
);
|
|
92
92
|
}, [triggerRef, width, height, position]);
|
|
93
93
|
|
|
94
|
-
const
|
|
94
|
+
const isStream = true;
|
|
95
95
|
|
|
96
96
|
/* Initial listener for loss of focus that refocuses User input after a small delay */
|
|
97
97
|
|
|
@@ -291,7 +291,7 @@ export default function ChatWindow({
|
|
|
291
291
|
addMessage({ message: value, isSend: true });
|
|
292
292
|
setSendingMessage(true);
|
|
293
293
|
setValue("");
|
|
294
|
-
|
|
294
|
+
isStream ? sendMessageStreamWrapper() : sendMessageWrapper();
|
|
295
295
|
}
|
|
296
296
|
}
|
|
297
297
|
|
|
Binary file
|
|
File without changes
|