yt-chat-components 1.3.0 → 1.3.1
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
CHANGED
|
@@ -6,7 +6,7 @@ import remarkGfm from 'remark-gfm';
|
|
|
6
6
|
import rehypeMathjax from 'rehype-mathjax';
|
|
7
7
|
// import './index.module.css';
|
|
8
8
|
import upFilePng from '../../../../assets/aicenter/upfile.png';
|
|
9
|
-
import {Button, Collapse, DatePicker, Form, Image, Input, message as messageTip, Select, Skeleton} from 'antd';
|
|
9
|
+
import {Button, Collapse, DatePicker, Form, Image, Input, message as messageTip, Select, Skeleton, Avatar} from 'antd';
|
|
10
10
|
import React, {useRef, useState} from 'react';
|
|
11
11
|
import typePdfPng from '../../../../assets/aicenter/type-pdf.png';
|
|
12
12
|
import typeWordPng from '../../../../assets/aicenter/type-word.png';
|
|
@@ -30,6 +30,20 @@ const isEmpty = (o) => {
|
|
|
30
30
|
return !o || (typeof o === 'object' && Object.keys(o).length === 0) || (typeof o === 'string' && o.trim().length === 0);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
// 使用 for 循环生成头像图片数组
|
|
34
|
+
const avatarImages = [];
|
|
35
|
+
for (let i = 1; i <= 68; i++) {
|
|
36
|
+
avatarImages.push(`https://ai-file.yuntu.cn/yt-ai/system/${i}.png`);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// 根据name生成固定的颜色索引
|
|
40
|
+
const getAvatarByName = (name: string) => {
|
|
41
|
+
const total = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
42
|
+
const index = total % avatarImages.length;
|
|
43
|
+
const img = avatarImages[index];
|
|
44
|
+
return <Avatar shape="square" src={img} style={{marginRight: 8}}/>
|
|
45
|
+
};
|
|
46
|
+
|
|
33
47
|
export default function ChatMessage({
|
|
34
48
|
receivingMessage,
|
|
35
49
|
setReceivingMessage,
|
|
@@ -314,7 +328,10 @@ export default function ChatMessage({
|
|
|
314
328
|
}
|
|
315
329
|
|
|
316
330
|
const resultItem: ThoughtChainItem = {
|
|
317
|
-
title:
|
|
331
|
+
title: <div style={{display:"flex", flexDirection: 'row', alignItems: 'center'}}>
|
|
332
|
+
{getAvatarByName(name)}
|
|
333
|
+
<span>{name}</span>
|
|
334
|
+
</div>,
|
|
318
335
|
description: toolCallInfo,
|
|
319
336
|
icon: getStatusIcon(status),
|
|
320
337
|
status: status,
|
|
@@ -355,7 +372,7 @@ export default function ChatMessage({
|
|
|
355
372
|
};
|
|
356
373
|
return resultItem
|
|
357
374
|
});
|
|
358
|
-
return <ThoughtChain items={items} />
|
|
375
|
+
return <ThoughtChain items={items} size={'small'} />
|
|
359
376
|
}
|
|
360
377
|
|
|
361
378
|
const renderBotFormMessage = (form_config) => {
|
|
@@ -163,7 +163,7 @@ const extractAndParseJSON = (buffer, handleMessageContent) => {
|
|
|
163
163
|
handleMessageContent(parsedJson['event'], parsedJson['data']);
|
|
164
164
|
parsedData.push(parsedJson); // 添加到解析结果中
|
|
165
165
|
} catch (error) {
|
|
166
|
-
console.warn('无法解析 JSON 数据:', error);
|
|
166
|
+
console.warn('无法解析 JSON 数据:', error, jsonString);
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
// 更新剩余缓冲区的起始位置
|
|
@@ -195,7 +195,7 @@ export default function ChatWindow({
|
|
|
195
195
|
}
|
|
196
196
|
|
|
197
197
|
const addMessageItem = ({chunk, id, name, status = null, isThinkChunk = false, loadingMessage = null}) => {
|
|
198
|
-
// console.log("--- addMessageItem", chunk,
|
|
198
|
+
// console.log("--- addMessageItem", chunk, status, loadingMessage)
|
|
199
199
|
setNowAIContentList((prevState) => {
|
|
200
200
|
const content = {}
|
|
201
201
|
if(isThinkChunk){
|
|
@@ -220,7 +220,11 @@ export default function ChatWindow({
|
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
const updateMessageItem = ({chunk, status = null, isThinkChunk = false, loadingMessage = null}) => {
|
|
223
|
-
// console.log("--- updateMessageItem", chunk, status)
|
|
223
|
+
// console.log("--- updateMessageItem", chunk, status, loadingMessage)
|
|
224
|
+
// chunk 和 status 都为空,则不更新
|
|
225
|
+
if(isEmpty(chunk) && isEmpty(status)){
|
|
226
|
+
return
|
|
227
|
+
}
|
|
224
228
|
setNowAIContentList((prevState) => {
|
|
225
229
|
const latestMessageItem = prevState[prevState.length - 1]
|
|
226
230
|
const content = {}
|
|
@@ -251,7 +255,7 @@ export default function ChatWindow({
|
|
|
251
255
|
|
|
252
256
|
// 流式输出消息,实时显示(token为流式输出内容,end为结束输出,整体输出一次)
|
|
253
257
|
const handleMessageContent = (event, data) => {
|
|
254
|
-
console.log(
|
|
258
|
+
// console.log(`--- event = ${event}, content_ns = ${content_ns}, content_id = ${content_id}, data = `, data)
|
|
255
259
|
|
|
256
260
|
if (event == 'add_message' && data['sender'] == 'Machine') {
|
|
257
261
|
getHistoryList();
|
|
@@ -269,12 +273,12 @@ export default function ChatWindow({
|
|
|
269
273
|
// 如果刚才在调用工具,则追加信息
|
|
270
274
|
if (content_id === 'WAIT'){
|
|
271
275
|
content_id = id
|
|
272
|
-
updateMessageItem({chunk, loadingMessage: loading_message})
|
|
276
|
+
updateMessageItem({chunk, loadingMessage: loading_message || ''})
|
|
273
277
|
}
|
|
274
278
|
// 新建信息
|
|
275
279
|
else{
|
|
276
280
|
content_id = id
|
|
277
|
-
addMessageItem({chunk, id, name, loadingMessage:loading_message})
|
|
281
|
+
addMessageItem({chunk, id, name, loadingMessage: loading_message || ''})
|
|
278
282
|
}
|
|
279
283
|
}
|
|
280
284
|
// 输出主体没有变化
|
|
@@ -291,20 +295,18 @@ export default function ChatWindow({
|
|
|
291
295
|
|
|
292
296
|
// 如果 event_latest 是 token,此刻变成了 t_full_token,表示之前都在输出占位符,所以更新信息
|
|
293
297
|
if (event_latest === 'token' && event === 't_full_token'){
|
|
294
|
-
updateMessageItem({chunk, loadingMessage: loading_message})
|
|
298
|
+
updateMessageItem({chunk, loadingMessage: loading_message || ''})
|
|
295
299
|
} else {
|
|
296
300
|
addMessageItem({chunk, id, name, loadingMessage:loading_message})
|
|
297
301
|
}
|
|
298
302
|
}else{
|
|
299
|
-
updateMessageItem({chunk, loadingMessage: loading_message})
|
|
303
|
+
updateMessageItem({chunk, loadingMessage: loading_message || ''})
|
|
300
304
|
}
|
|
301
305
|
}
|
|
302
306
|
|
|
303
307
|
if (lastMessage.current) {
|
|
304
308
|
lastMessage.current.scrollIntoView({ behavior: 'smooth' });
|
|
305
309
|
}
|
|
306
|
-
|
|
307
|
-
|
|
308
310
|
}
|
|
309
311
|
else if (event == 't_token') {
|
|
310
312
|
let { chunk, id, r_id, ns, name, loading_message } = data
|
|
@@ -314,9 +316,9 @@ export default function ChatWindow({
|
|
|
314
316
|
content_ns = ns
|
|
315
317
|
// 新建信息
|
|
316
318
|
content_id = id
|
|
317
|
-
addMessageItem({chunk, id, name, status:null, isThinkChunk:true, loadingMessage: loading_message})
|
|
319
|
+
addMessageItem({chunk, id, name, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
|
|
318
320
|
}else {
|
|
319
|
-
updateMessageItem({chunk, status:null, isThinkChunk:true, loadingMessage: loading_message})
|
|
321
|
+
updateMessageItem({chunk, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
|
|
320
322
|
}
|
|
321
323
|
|
|
322
324
|
if (lastMessage.current) {
|
|
@@ -325,14 +327,14 @@ export default function ChatWindow({
|
|
|
325
327
|
}
|
|
326
328
|
else if (event == 'status') {
|
|
327
329
|
// 更新状态
|
|
328
|
-
const {r_id, id, ns, name, status} = data
|
|
330
|
+
const {r_id, id, ns, name, status, loading_message} = data
|
|
329
331
|
|
|
330
332
|
// ns变化表示切换了智能体,表示智能体一上来就调用工具
|
|
331
333
|
if (content_ns !== ns){
|
|
332
334
|
content_ns = ns
|
|
333
335
|
// 表示智能体连续调用工具
|
|
334
336
|
if (content_id === 'WAIT') {
|
|
335
|
-
updateMessageItem({chunk:"", status, loadingMessage: loading_message})
|
|
337
|
+
updateMessageItem({chunk:"", status, loadingMessage: loading_message || ''})
|
|
336
338
|
}else{
|
|
337
339
|
// 这个时候还没有信息的id,所以 content_id 给特殊值
|
|
338
340
|
content_id = "WAIT"
|
|
@@ -341,7 +343,7 @@ export default function ChatWindow({
|
|
|
341
343
|
}
|
|
342
344
|
// 当前智能体在调用工具
|
|
343
345
|
else{
|
|
344
|
-
updateMessageItem({chunk:"", status, loadingMessage: loading_message})
|
|
346
|
+
updateMessageItem({chunk:"", status, loadingMessage: loading_message || ''})
|
|
345
347
|
}
|
|
346
348
|
|
|
347
349
|
setAiStatus(data.status)
|
|
@@ -836,7 +838,7 @@ export default function ChatWindow({
|
|
|
836
838
|
*/
|
|
837
839
|
useEffect(() => {
|
|
838
840
|
if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
|
|
839
|
-
}, [
|
|
841
|
+
}, [nowAIContentList]);
|
|
840
842
|
|
|
841
843
|
/* Refocus the User input whenever a new response is returned from the LLM */
|
|
842
844
|
|
|
@@ -863,7 +865,7 @@ export default function ChatWindow({
|
|
|
863
865
|
let current_r_id: string = null
|
|
864
866
|
let current_sender: string = null
|
|
865
867
|
chatHistory.forEach((data) => {
|
|
866
|
-
const {sender, sender_name, text, id, category, r_id, error} = data;
|
|
868
|
+
const {sender, sender_name, text, id, category, r_id, error, reasoning_content} = data;
|
|
867
869
|
// r_id 不一样表示切换了对话轮次,则新增一个 ChatMessageType
|
|
868
870
|
if(current_r_id != r_id){
|
|
869
871
|
current_r_id = r_id
|
|
@@ -894,6 +896,7 @@ export default function ChatWindow({
|
|
|
894
896
|
id: id,
|
|
895
897
|
name: sender_name,
|
|
896
898
|
message: text,
|
|
899
|
+
thinkMessage: reasoning_content,
|
|
897
900
|
// rawInfo: data,
|
|
898
901
|
type: MessageType.text,
|
|
899
902
|
});
|
|
@@ -2459,5 +2459,20 @@ export const yt_style = `
|
|
|
2459
2459
|
background: #1552FF;
|
|
2460
2460
|
border-radius: 8px;
|
|
2461
2461
|
}
|
|
2462
|
-
`
|
|
2463
2462
|
|
|
2463
|
+
.ant-thought-chain-item-title{
|
|
2464
|
+
max-height: 32px !important;
|
|
2465
|
+
height: 32px !important;
|
|
2466
|
+
}
|
|
2467
|
+
|
|
2468
|
+
.ant-thought-chain-item-icon{
|
|
2469
|
+
margin-top: 6px !important;
|
|
2470
|
+
}
|
|
2471
|
+
|
|
2472
|
+
.ant-thought-chain-item-header::before {
|
|
2473
|
+
top: 6px !important;
|
|
2474
|
+
}
|
|
2475
|
+
.ant-thought-chain-item-content::before {
|
|
2476
|
+
height: 55px !important;
|
|
2477
|
+
}
|
|
2478
|
+
`
|