@linker-design-plus/chat-next 1.0.3 → 1.0.5
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/README.md +591 -10
- package/dist/index.js +18 -18
- package/dist/index.mjs +2308 -2160
- package/dist/src/component/ChatItem/chat-item.vue.d.ts +8 -4
- package/dist/src/typing/chat-next/i-chat-actionbar.d.ts +8 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# ChatNext 组件库
|
|
1
|
+
sud# ChatNext 组件库
|
|
2
2
|
|
|
3
3
|
提供了一套用于构建聊天界面的 Vue 3 组件集合。
|
|
4
4
|
|
|
@@ -129,7 +129,17 @@ export interface IChatAttachment {
|
|
|
129
129
|
### 接口类型
|
|
130
130
|
|
|
131
131
|
```typescript
|
|
132
|
-
|
|
132
|
+
import type { Component } from 'vue';
|
|
133
|
+
|
|
134
|
+
export type IChatActionBuiltin = 'copy' | 'replay' | 'good' | 'bad';
|
|
135
|
+
|
|
136
|
+
export interface IChatActionConfig {
|
|
137
|
+
action: string;
|
|
138
|
+
text?: string;
|
|
139
|
+
icon?: string | Component;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export type IChatActions = IChatActionBuiltin | IChatActionConfig;
|
|
133
143
|
```
|
|
134
144
|
|
|
135
145
|
---
|
|
@@ -200,14 +210,16 @@ export type IChatLoadingAnimation = 'spin' | 'dot';
|
|
|
200
210
|
|
|
201
211
|
### 插槽 (Slots)
|
|
202
212
|
|
|
203
|
-
| 插槽名
|
|
204
|
-
|
|
|
205
|
-
| `user-files`
|
|
206
|
-
| `loading`
|
|
207
|
-
| `thinking`
|
|
208
|
-
| `
|
|
209
|
-
| `
|
|
210
|
-
| `
|
|
213
|
+
| 插槽名 | 说明 |
|
|
214
|
+
| ------------- | ------------------------------------------- |
|
|
215
|
+
| `user-files` | 用户角色时的文件展示区域 |
|
|
216
|
+
| `loading` | AI 角色 `status='pending'` 时的加载区域 |
|
|
217
|
+
| `thinking` | AI 角色 `status='thinking'` 时的思考区域 |
|
|
218
|
+
| `information` | AI 角色时的额外信息展示区域（位于内容上方） |
|
|
219
|
+
| `actions` | AI 角色时的操作栏区域 |
|
|
220
|
+
| `card` | AI 角色时的卡片展示区域（位于内容下方） |
|
|
221
|
+
| `suggest` | AI 角色时的建议区域 |
|
|
222
|
+
| `user-extra` | 用户角色底部的扩展区域 |
|
|
211
223
|
|
|
212
224
|
### 接口类型
|
|
213
225
|
|
|
@@ -235,3 +247,572 @@ export interface IChatItem {
|
|
|
235
247
|
| `content` | `string` | `''` | 要渲染的 Markdown 字符串 |
|
|
236
248
|
|
|
237
249
|
_注意：此组件内置了 Highlight.js 语法高亮和 GitHub Markdown CSS 样式，并自带代码块一键复制功能。_
|
|
250
|
+
|
|
251
|
+
# demo 示例
|
|
252
|
+
|
|
253
|
+
```vue
|
|
254
|
+
<template>
|
|
255
|
+
<div class="chat-demo-container">
|
|
256
|
+
<h2>AI Chat Demo</h2>
|
|
257
|
+
|
|
258
|
+
<div class="chat-box">
|
|
259
|
+
<!-- 聊天消息列表区域 -->
|
|
260
|
+
<div class="chat-message-list">
|
|
261
|
+
<HChatItem
|
|
262
|
+
v-for="(msg, index) in messages"
|
|
263
|
+
:key="index"
|
|
264
|
+
:avatar="msg.role === 'assistant'"
|
|
265
|
+
:chat-item="msg"
|
|
266
|
+
>
|
|
267
|
+
<template #user-files>
|
|
268
|
+
<template v-if="msg.inputFiles && msg.inputFiles.length">
|
|
269
|
+
<div class="user-files-list">
|
|
270
|
+
<img
|
|
271
|
+
v-for="file in msg.inputFiles"
|
|
272
|
+
:key="file.url"
|
|
273
|
+
:src="file.url"
|
|
274
|
+
alt="file-image"
|
|
275
|
+
/>
|
|
276
|
+
</div>
|
|
277
|
+
</template>
|
|
278
|
+
</template>
|
|
279
|
+
<template #user-extra>
|
|
280
|
+
<template v-if="msg.userExtra">
|
|
281
|
+
<img :src="QuoteIconPNG" alt="icon-quote" @click="handleQuote(msg)" />
|
|
282
|
+
</template>
|
|
283
|
+
</template>
|
|
284
|
+
<template #loading>
|
|
285
|
+
<HChatLoading />
|
|
286
|
+
</template>
|
|
287
|
+
<template #thinking>
|
|
288
|
+
<HChatThinking
|
|
289
|
+
:animation="'circle'"
|
|
290
|
+
:layout="'border'"
|
|
291
|
+
status="pending"
|
|
292
|
+
:content="{ title: '思考中', text: msg.thinking }"
|
|
293
|
+
/>
|
|
294
|
+
</template>
|
|
295
|
+
|
|
296
|
+
<template #information>
|
|
297
|
+
<div class="information">
|
|
298
|
+
<div>随便你在这里</div>
|
|
299
|
+
<div>做什么</div>
|
|
300
|
+
</div>
|
|
301
|
+
</template>
|
|
302
|
+
|
|
303
|
+
<template #actions>
|
|
304
|
+
<HChatActionbar
|
|
305
|
+
:content="msg.content"
|
|
306
|
+
:actions="[
|
|
307
|
+
'copy',
|
|
308
|
+
'replay',
|
|
309
|
+
{
|
|
310
|
+
action: 'document',
|
|
311
|
+
text: '生成文档并编辑',
|
|
312
|
+
icon: IconBook,
|
|
313
|
+
},
|
|
314
|
+
]"
|
|
315
|
+
@action="handleAction"
|
|
316
|
+
/>
|
|
317
|
+
</template>
|
|
318
|
+
|
|
319
|
+
<template #card>
|
|
320
|
+
<div class="card-item">
|
|
321
|
+
<div class="card-item-title">
|
|
322
|
+
<span>生成文档并编辑</span>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
</template>
|
|
326
|
+
<template #suggest>
|
|
327
|
+
<div class="suggest-list">
|
|
328
|
+
<div v-for="suggest in msg.suggest" :key="suggest" class="suggest-item">{{
|
|
329
|
+
suggest
|
|
330
|
+
}}</div>
|
|
331
|
+
</div>
|
|
332
|
+
</template>
|
|
333
|
+
</HChatItem>
|
|
334
|
+
</div>
|
|
335
|
+
|
|
336
|
+
<!-- 发送消息区域 -->
|
|
337
|
+
<div class="chat-sender-wrapper">
|
|
338
|
+
<HChatSender
|
|
339
|
+
v-model="inputValue"
|
|
340
|
+
:templates="templateNodes"
|
|
341
|
+
:textarea-props="{
|
|
342
|
+
placeholder: '你好...',
|
|
343
|
+
}"
|
|
344
|
+
@send="handleSendMessage"
|
|
345
|
+
>
|
|
346
|
+
<template #header>
|
|
347
|
+
<div class="header-out">
|
|
348
|
+
<span v-for="skill in skillList" :key="skill" class="skill-item">{{ skill }}</span>
|
|
349
|
+
</div>
|
|
350
|
+
</template>
|
|
351
|
+
|
|
352
|
+
<template #inner-header>
|
|
353
|
+
<HChatAttachments
|
|
354
|
+
overflow="scrollX"
|
|
355
|
+
:field-names="{
|
|
356
|
+
suffix: 'bak',
|
|
357
|
+
}"
|
|
358
|
+
:items="inputFiles"
|
|
359
|
+
@remove="handleRemoveFile"
|
|
360
|
+
/>
|
|
361
|
+
</template>
|
|
362
|
+
|
|
363
|
+
<template #input-prefix>
|
|
364
|
+
<span>我是插槽撒打撒</span>
|
|
365
|
+
</template>
|
|
366
|
+
|
|
367
|
+
<template #footer-prefix>
|
|
368
|
+
<div class="footer-prefix-item">深度思考</div>
|
|
369
|
+
</template>
|
|
370
|
+
<template #footer-suffix>
|
|
371
|
+
<div>123</div>
|
|
372
|
+
</template>
|
|
373
|
+
</HChatSender>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
</div>
|
|
377
|
+
</template>
|
|
378
|
+
|
|
379
|
+
<script setup lang="ts">
|
|
380
|
+
import { ref, onMounted } from 'vue';
|
|
381
|
+
import { IconBook } from '@arco-design/web-vue/es/icon';
|
|
382
|
+
|
|
383
|
+
import {
|
|
384
|
+
HChatItem,
|
|
385
|
+
HChatSender,
|
|
386
|
+
HChatActionbar,
|
|
387
|
+
HChatLoading,
|
|
388
|
+
HChatThinking,
|
|
389
|
+
HChatAttachments,
|
|
390
|
+
// eslint-disable-next-line
|
|
391
|
+
} from '../index';
|
|
392
|
+
// eslint-disable-next-line
|
|
393
|
+
import { useEventSource } from '../eventSource';
|
|
394
|
+
// eslint-disable-next-line
|
|
395
|
+
import type { IChatItem, IChatActions, IChatAttachment, ITemplateNode } from '../src/typing/index';
|
|
396
|
+
import QuoteIconPNG from './assets/images/quote.png';
|
|
397
|
+
|
|
398
|
+
defineOptions({
|
|
399
|
+
name: 'ChatDemo',
|
|
400
|
+
});
|
|
401
|
+
|
|
402
|
+
const { startEventSource, stopEventSource } = useEventSource();
|
|
403
|
+
|
|
404
|
+
const inputValue = ref('');
|
|
405
|
+
|
|
406
|
+
const templateNodes = ref<ITemplateNode[]>([
|
|
407
|
+
{ type: 'text', id: 't1', content: '帮我用 ' },
|
|
408
|
+
{ type: 'select', id: 's1', options: ['Vue', 'React', 'Angular'], value: 'Vue' },
|
|
409
|
+
{ type: 'text', id: 't2', content: ' 以及 ' },
|
|
410
|
+
{
|
|
411
|
+
type: 'select',
|
|
412
|
+
id: 's2',
|
|
413
|
+
multiple: true,
|
|
414
|
+
placeholder: '选择打包工具',
|
|
415
|
+
options: ['TypeScript', 'Vite', 'Webpack', 'Less'],
|
|
416
|
+
value: [],
|
|
417
|
+
},
|
|
418
|
+
{ type: 'text', id: 't3', content: ' 开发一个 ' },
|
|
419
|
+
{ type: 'input', id: 'i1', placeholder: '组件名称', value: '' },
|
|
420
|
+
{ type: 'text', id: 't4', content: ' 组件。' },
|
|
421
|
+
]);
|
|
422
|
+
|
|
423
|
+
const skillList = ref<string[]>([
|
|
424
|
+
'vue',
|
|
425
|
+
'react',
|
|
426
|
+
'angular',
|
|
427
|
+
'nodejs',
|
|
428
|
+
'mongodb',
|
|
429
|
+
'redis',
|
|
430
|
+
'mysql',
|
|
431
|
+
'postgresql',
|
|
432
|
+
'docker',
|
|
433
|
+
'kubernetes',
|
|
434
|
+
]);
|
|
435
|
+
|
|
436
|
+
const inputFiles = ref<IChatAttachment[]>([
|
|
437
|
+
{
|
|
438
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
439
|
+
name: 'testtesttesttesttesttesttesttesttesttesttesttesttesttest',
|
|
440
|
+
bak: 'png',
|
|
441
|
+
size: 100,
|
|
442
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
446
|
+
name: 'test.png',
|
|
447
|
+
suffix: 'png',
|
|
448
|
+
size: 100,
|
|
449
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
453
|
+
name: 'test.png',
|
|
454
|
+
suffix: 'png',
|
|
455
|
+
size: 100,
|
|
456
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
460
|
+
name: 'test.png',
|
|
461
|
+
suffix: 'png',
|
|
462
|
+
size: 100,
|
|
463
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
467
|
+
name: 'test.png',
|
|
468
|
+
suffix: 'png',
|
|
469
|
+
size: 100,
|
|
470
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
471
|
+
},
|
|
472
|
+
{
|
|
473
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
474
|
+
name: 'test.png',
|
|
475
|
+
suffix: 'png',
|
|
476
|
+
size: 100,
|
|
477
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
478
|
+
},
|
|
479
|
+
{
|
|
480
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
481
|
+
name: 'test.png',
|
|
482
|
+
suffix: 'png',
|
|
483
|
+
size: 100,
|
|
484
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
485
|
+
},
|
|
486
|
+
{
|
|
487
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
488
|
+
name: 'test.png',
|
|
489
|
+
suffix: 'png',
|
|
490
|
+
size: 100,
|
|
491
|
+
status: 'pending',
|
|
492
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
493
|
+
},
|
|
494
|
+
{
|
|
495
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
496
|
+
name: 'test.png',
|
|
497
|
+
suffix: 'png',
|
|
498
|
+
size: 100,
|
|
499
|
+
status: 'pending',
|
|
500
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
501
|
+
},
|
|
502
|
+
{
|
|
503
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
504
|
+
name: 'test.png',
|
|
505
|
+
suffix: 'png',
|
|
506
|
+
size: 100,
|
|
507
|
+
status: 'pending',
|
|
508
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
509
|
+
},
|
|
510
|
+
{
|
|
511
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
512
|
+
name: 'test.png',
|
|
513
|
+
suffix: 'png',
|
|
514
|
+
size: 100,
|
|
515
|
+
status: 'pending',
|
|
516
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
520
|
+
name: 'test.png',
|
|
521
|
+
suffix: 'png',
|
|
522
|
+
size: 100,
|
|
523
|
+
status: 'pending',
|
|
524
|
+
icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
525
|
+
},
|
|
526
|
+
]);
|
|
527
|
+
|
|
528
|
+
const fullThinkingText =
|
|
529
|
+
'好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？';
|
|
530
|
+
|
|
531
|
+
// 模拟的聊天记录
|
|
532
|
+
const messages = ref<IChatItem[]>([
|
|
533
|
+
{
|
|
534
|
+
role: 'assistant',
|
|
535
|
+
content: '好的，请问你需要什么类型的组件呢？',
|
|
536
|
+
thinking: '',
|
|
537
|
+
avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
538
|
+
status: 'thinking',
|
|
539
|
+
},
|
|
540
|
+
{
|
|
541
|
+
role: 'assistant',
|
|
542
|
+
content: `
|
|
543
|
+
# This is TDesign
|
|
544
|
+
|
|
545
|
+
## This is TDesign
|
|
546
|
+
|
|
547
|
+
### This is TDesign
|
|
548
|
+
|
|
549
|
+
#### This is TDesign
|
|
550
|
+
|
|
551
|
+
The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.
|
|
552
|
+
|
|
553
|
+
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.
|
|
554
|
+
|
|
555
|
+
an example | *an example* | **an example**
|
|
556
|
+
|
|
557
|
+
1. Bird
|
|
558
|
+
1. McHale
|
|
559
|
+
1. Parish
|
|
560
|
+
1. Bird
|
|
561
|
+
1. McHale
|
|
562
|
+
1. Parish
|
|
563
|
+
|
|
564
|
+
- Red
|
|
565
|
+
- Green
|
|
566
|
+
- Blue
|
|
567
|
+
- Red
|
|
568
|
+
- Green
|
|
569
|
+
- Blue
|
|
570
|
+
|
|
571
|
+
This is [an example](http://example.com/ "Title") inline link.
|
|
572
|
+
|
|
573
|
+
<http://example.com/>
|
|
574
|
+
# TDesign（腾讯设计体系）核心特性与技术架构
|
|
575
|
+
|
|
576
|
+
以下是关于 TDesign（腾讯设计体系）的核心特性与技术架构的表格化总结：
|
|
577
|
+
|
|
578
|
+
| 表头 | 表头 |
|
|
579
|
+
| ---- | ---- |
|
|
580
|
+
| 单元格 | 单元格 |
|
|
581
|
+
| 单元格 | 单元格 |
|
|
582
|
+
|
|
583
|
+
| 分类 | 核心内容 | 关键技术/特性 |
|
|
584
|
+
|------|----------|---------------|
|
|
585
|
+
| **设计理念** | • 设计价值观：用户为本、科技向善、突破创新... | • 设计原子单元 |
|
|
586
|
+
| **核心组件库** | • 基础组件：Button/Input/Table/Modal... | • 组件覆盖率 |
|
|
587
|
+
| **技术特性** | • 多框架支持：Vue/React/Angular... | • 按需加载 |
|
|
588
|
+
\`\`\`bash
|
|
589
|
+
$ npm i tdesign-vue-next
|
|
590
|
+
\`\`\`
|
|
591
|
+
|
|
592
|
+
---
|
|
593
|
+
|
|
594
|
+
\`\`\`javascript
|
|
595
|
+
import { createApp } from 'vue';
|
|
596
|
+
import App from './app.vue';
|
|
597
|
+
|
|
598
|
+
const app = createApp(App);
|
|
599
|
+
app.use(TDesignChat);
|
|
600
|
+
\`\`\`
|
|
601
|
+
`,
|
|
602
|
+
avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
603
|
+
status: 'success',
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
role: 'user',
|
|
607
|
+
content: '帮我写一段 Vue3 组件代码。',
|
|
608
|
+
avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
|
|
609
|
+
userExtra: true,
|
|
610
|
+
|
|
611
|
+
inputFiles: [
|
|
612
|
+
{
|
|
613
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
614
|
+
name: 'test.png',
|
|
615
|
+
size: 100,
|
|
616
|
+
type: 'image/png',
|
|
617
|
+
},
|
|
618
|
+
{
|
|
619
|
+
url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
620
|
+
name: 'test.png',
|
|
621
|
+
size: 100,
|
|
622
|
+
type: 'image/png',
|
|
623
|
+
},
|
|
624
|
+
],
|
|
625
|
+
status: 'success',
|
|
626
|
+
},
|
|
627
|
+
{
|
|
628
|
+
role: 'assistant',
|
|
629
|
+
content: '好的，请问你需要什么类型的组件呢？',
|
|
630
|
+
avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
631
|
+
status: 'success',
|
|
632
|
+
},
|
|
633
|
+
|
|
634
|
+
{
|
|
635
|
+
role: 'user',
|
|
636
|
+
content: '帮我写一段 Vue3 组件代码。',
|
|
637
|
+
avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
|
|
638
|
+
userExtra: false,
|
|
639
|
+
status: 'success',
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
role: 'assistant',
|
|
643
|
+
content: '好的，请问你需要什么类型的组件呢？',
|
|
644
|
+
avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
|
|
645
|
+
status: 'success',
|
|
646
|
+
suggest: ['vue3', 'react', 'angular'],
|
|
647
|
+
},
|
|
648
|
+
]);
|
|
649
|
+
|
|
650
|
+
const handleQuote = (msg: IChatItem) => {
|
|
651
|
+
console.log(msg);
|
|
652
|
+
};
|
|
653
|
+
|
|
654
|
+
const handleAction = (action: IChatActions) => {
|
|
655
|
+
console.log(action);
|
|
656
|
+
};
|
|
657
|
+
|
|
658
|
+
// 处理发送消息
|
|
659
|
+
const handleSendMessage = (text: string) => {
|
|
660
|
+
if (!text.trim()) return;
|
|
661
|
+
|
|
662
|
+
// 添加用户消息
|
|
663
|
+
messages.value.push({ role: 'user', content: text, status: 'success' });
|
|
664
|
+
inputValue.value = ''; // 保证触发发送后立即清空双向绑定的输入框
|
|
665
|
+
|
|
666
|
+
// 模拟 AI 回复
|
|
667
|
+
setTimeout(() => {
|
|
668
|
+
messages.value.push({
|
|
669
|
+
role: 'assistant',
|
|
670
|
+
content: `收到你的消息：${text}。这是一个模拟的回复。`,
|
|
671
|
+
status: 'success',
|
|
672
|
+
});
|
|
673
|
+
}, 1000);
|
|
674
|
+
};
|
|
675
|
+
|
|
676
|
+
const handleRemoveFile = (file: IChatAttachment, index: number) => {
|
|
677
|
+
console.log(file, index);
|
|
678
|
+
inputFiles.value = inputFiles.value.filter((item, i) => i !== index);
|
|
679
|
+
};
|
|
680
|
+
|
|
681
|
+
onMounted(() => {
|
|
682
|
+
let i = 0;
|
|
683
|
+
const timer = setInterval(() => {
|
|
684
|
+
if (i < fullThinkingText.length) {
|
|
685
|
+
messages.value[0].thinking += fullThinkingText[i];
|
|
686
|
+
i++;
|
|
687
|
+
} else {
|
|
688
|
+
clearInterval(timer);
|
|
689
|
+
}
|
|
690
|
+
}, 30);
|
|
691
|
+
});
|
|
692
|
+
</script>
|
|
693
|
+
|
|
694
|
+
<style scoped lang="less">
|
|
695
|
+
@import '../src/style/variables.less';
|
|
696
|
+
|
|
697
|
+
.chat-demo-container {
|
|
698
|
+
width: 100%;
|
|
699
|
+
max-width: 800px;
|
|
700
|
+
margin: 0 auto;
|
|
701
|
+
padding: @chat-spacing-xl;
|
|
702
|
+
font-family: sans-serif;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.chat-box {
|
|
706
|
+
border: 1px solid @chat-border-color;
|
|
707
|
+
border-radius: @chat-border-radius-md;
|
|
708
|
+
display: flex;
|
|
709
|
+
flex-direction: column;
|
|
710
|
+
height: 600px;
|
|
711
|
+
overflow: hidden;
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
.chat-message-list {
|
|
715
|
+
flex: 1;
|
|
716
|
+
padding: @chat-spacing-xl;
|
|
717
|
+
overflow-y: auto;
|
|
718
|
+
display: flex;
|
|
719
|
+
flex-direction: column;
|
|
720
|
+
gap: @chat-spacing-lg;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.chat-sender-wrapper {
|
|
724
|
+
padding: @chat-spacing-lg;
|
|
725
|
+
background-color: @chat-panel-bg-color;
|
|
726
|
+
border-top: 1px solid @chat-border-color;
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.user-files-list {
|
|
730
|
+
display: flex;
|
|
731
|
+
gap: 10px;
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
.header-out {
|
|
735
|
+
display: flex;
|
|
736
|
+
gap: @chat-spacing-sm;
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
.skill-item {
|
|
740
|
+
padding: @chat-spacing-xs @chat-spacing-sm;
|
|
741
|
+
border-radius: @chat-border-radius-base;
|
|
742
|
+
background-color: @chat-bg-color;
|
|
743
|
+
color: @chat-text-color-1;
|
|
744
|
+
font-size: @chat-font-size-sm;
|
|
745
|
+
cursor: pointer;
|
|
746
|
+
&:hover {
|
|
747
|
+
background-color: @chat-hover-bg-color;
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
.information {
|
|
751
|
+
display: flex;
|
|
752
|
+
flex-direction: column;
|
|
753
|
+
gap: @chat-spacing-sm;
|
|
754
|
+
padding: @chat-spacing-md;
|
|
755
|
+
border-radius: @chat-border-radius-md;
|
|
756
|
+
background-color: @chat-bg-color;
|
|
757
|
+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
|
758
|
+
margin-bottom: @chat-spacing-md;
|
|
759
|
+
}
|
|
760
|
+
.card-item {
|
|
761
|
+
padding: @chat-spacing-md;
|
|
762
|
+
border-radius: @chat-border-radius-md;
|
|
763
|
+
background-color: @chat-bg-color;
|
|
764
|
+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
|
765
|
+
margin-bottom: @chat-spacing-md;
|
|
766
|
+
}
|
|
767
|
+
.suggest-list {
|
|
768
|
+
display: flex;
|
|
769
|
+
flex-direction: column;
|
|
770
|
+
gap: @chat-spacing-sm;
|
|
771
|
+
.suggest-item {
|
|
772
|
+
width: fit-content;
|
|
773
|
+
padding: @chat-spacing-xs @chat-spacing-sm;
|
|
774
|
+
border-radius: @chat-border-radius-base;
|
|
775
|
+
background-color: @chat-bg-color;
|
|
776
|
+
color: @chat-text-color-1;
|
|
777
|
+
font-size: @chat-font-size-sm;
|
|
778
|
+
cursor: pointer;
|
|
779
|
+
&:hover {
|
|
780
|
+
background-color: @chat-hover-bg-color;
|
|
781
|
+
}
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
.footer-prefix-item {
|
|
785
|
+
border-radius: @chat-border-radius-lg;
|
|
786
|
+
background-color: @chat-bg-color;
|
|
787
|
+
padding: @chat-spacing-xs @chat-spacing-md;
|
|
788
|
+
font-size: @chat-font-size-sm;
|
|
789
|
+
color: @chat-text-color-2;
|
|
790
|
+
cursor: pointer;
|
|
791
|
+
&:hover {
|
|
792
|
+
background-color: @chat-hover-bg-color;
|
|
793
|
+
}
|
|
794
|
+
}
|
|
795
|
+
</style>
|
|
796
|
+
```
|
|
797
|
+
|
|
798
|
+
# Aaas 大模型返回类型字典
|
|
799
|
+
|
|
800
|
+
| 事件名称 | 解释 | 图例 | 备注 |
|
|
801
|
+
| ------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
|
|
802
|
+
| `answer` | 大模型流式输出 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/61b2cb4b-7937-4f39-88cb-9ed4bada27af.png?Expires=1773222895&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=215OuxJ7ogzskina%2Bs4HxCPtMAk%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219295-423b0e9d8ba54f7fbf177f57f9252fd5-0-09a19d7ffb361abed51f5c044df1f411" alt="描述文字" width="300"> | 通用 |
|
|
803
|
+
| `information` | 标记信息，用作提示 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/04c0c194-c9f4-48af-bb90-0c4222cc157a.png?Expires=1773222959&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=ErkLEOJg4PWo5NxNFJU4QSxDhds%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219359-e250de23af7241b5adb3d7cf550469df-0-93404c39ee3ad08183e5a21811cfd2cc"> | 通用 |
|
|
804
|
+
| `search_result` | 搜索到的文件和片段 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/44eaca3f-19d0-489b-9a99-2520cdf33652.png?Expires=1773223103&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=XAiQJhw%2FSFZMNPzPx%2FMtYnOAltE%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219503-84590de0cb44453ea1b1ad112975077c-0-ac344b3c6137e2a181a5ba741d2809d1"> | 文殊 |
|
|
805
|
+
| `search_filter` | 标记信息，用作展示过滤的文案信息 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/eb91eccb-58ba-4254-8dbc-0d772d317ce5.png?Expires=1773223192&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=a9rvw1VfaB5QcYiaQKL63kFRluw%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219592-3c610c3670b14356a92744ceae756ca1-0-87e8599abb0143b66e2e4fef8177615e"> | 文殊 |
|
|
806
|
+
| `markdown` | 输出`markdown`的消息 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/12341f25-6691-4a7a-ba60-9d83c36c4c97.png?Expires=1773223384&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=RK5ww0FvbwAVh7Qaai6Pgv8DRzc%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219784-da5473cb75dd43f8886cd1d700a397ae-0-b69ee6a20ebae2c94aec5036b63d802b"> | 通用 |
|
|
807
|
+
| ~~`file_import`~~ | ~~会话文件导入了文件，通知前端更新数据~~ | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/29b4fc5f-e183-4fb0-ac9c-48bd27c98cc5.png?Expires=1773223451&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=cOw70EPoCi3xraFyzagP9dkuxxs%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219851-959cc222ff384bc5bca6c2369843d082-0-fb03453cc25f08c85cd5a9d7a9abc22a"> | ~~通用，已废弃~~ |
|
|
808
|
+
| `thinking` | 思考过程 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/ba84f4d0-63fa-472e-b3f4-57fdb5e01780.png?Expires=1773223637&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=D3ZnT8QPkUs4z6ENwXM0cgddNws%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220037-e0a6e21adddf4d2d8ad7c050c297f160-0-67c962d46523119952bb3a159564cca4"> | 通用 |
|
|
809
|
+
| `suggest` | 推荐问题 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/a9cfb452-746f-407d-8cbc-ccf21697fc2f.png?Expires=1773223690&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=oWOM9T9TaMl4djS7n6PopZ5CQt4%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220090-ee91c6f19f804ae1b08388277c312bcc-0-4c4820be7fdf55585eb12f44b7061657"> | 通用 |
|
|
810
|
+
| `faqRet` | 命中 faq | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/7a06907e-62ed-42da-a945-812bd1dff771.png?Expires=1773223745&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=xIL%2FSLlThrWzt6K%2F9iG1RSYp4EQ%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220145-1bba01a2fe6f45eba896a9628e6efe1c-0-530cc1e528ed353c3b150072e0cac129"> <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/4afb3810-12ee-40f4-b64a-a0eb3348ba2b.png?Expires=1773223766&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=5aYWUKHDy3dNT2kYxZ860uL6lHg%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220166-76e604b9b8dc4e73aa2d4333cb58df97-0-fba6a87b77d21bbdf36d4b7d64d9a2dc"> | 文殊 |
|
|
811
|
+
| `docRet` | 命中文档信息 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/dd1de8ce-4b30-415e-82bf-ad45c5063a21.png?Expires=1773223924&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=YDpJb%2FpnjOTKHu57KOuef5gdPnM%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220324-f5c91f86b06e4b6299fb064bc39935c3-0-1dad03517055b6b709290bd739ca4e98" alt="命中文档信息" width="300"> | 文殊 |
|
|
812
|
+
| `k0_alarm_search_result` | 命中告警查询 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/bae14b2a-3032-4e7f-9ab8-de8e520011e6.png?Expires=1773224059&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=Dj7wkMrAPIo9M555fIF05UyOGe0%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220459-2444f64e6e6146cbb092cd3a8cbb4936-0-16e1950f4089f630e7c712bace3522fc" alt="命中告警查询" width="300"> | 哨兵 |
|
|
813
|
+
| ~~`video_url_dict`~~ | 视频高光信息 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/9b997048-dd5c-4192-a6f3-1d24947a8023.png?Expires=1773224113&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=2lJe4kMzq0DBtXGCvJRzuyRkFGM%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220513-05b0a833813741739e439b959e866adf-0-1e3a6b227f50605408b9d895bb5268a6" alt="视频高光信息" width="300"> | ~~指令成片器、精华切片机~~ |
|
|
814
|
+
| `fileOutput` | 溯源文档信息 用于定位引用的文档片段并高亮 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/2be6d458-63b5-465b-b0ad-e12ea8955885.png?Expires=1773224431&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=%2BIai9tdcUYlCcNIAPB6hWIKqjTY%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220831-a481d6c5ae7d4f8e983118dd4bf22081-0-dd6603a7cae2d39528594394da173f8a" alt="溯源" width="300"> | 文殊 |
|
|
815
|
+
| `process_input` | 过程输出 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/f5807dda-6f49-4c42-897f-6476a81e2c27.png?Expires=1773224490&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=Lieqitde6a96brVNhWKCQRjHk7k%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220890-b08b38d59e1c47d09fdcda489b10a69f-0-4d6b03620c710413c3a0c9c1b85fca54" alt="过程输出" width="300"> | 广西机房 demo |
|
|
816
|
+
| `query` | 工作流输出结果的操作按钮的文字 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/7b452576-d8e8-4001-b395-e989f62c2fd3.png?Expires=1773224537&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=%2FJLwdueDaTcwowvJVyWpHY9TUjM%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220937-9917a7d9785841b39f9f40d7fd383b3d-0-3da3b91b00d5eb5f51537d8d2c2eaa28" alt="按钮文字" width="300"> | 哨兵 |
|
|
817
|
+
| `agentPro` | 流式大模型输出，不同于`answer`,这个 type 用作多个节点一起输出内容 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/83ac69a4-7cf5-47c9-9a8a-42c9ed026be3.png?Expires=1773224829&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=tMAD3AyQgyNotjAINL5wn4nydn8%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773221229-cb70c64cbe8c44d48144cbe00e7a4446-0-8aaeefc50ea725afe7bc8d55abfbbdc5" alt="流式大模型输出" width="300"> | 通用 |
|
|
818
|
+
| `progressRate` | 流式大模型输出，用作自定义渲染处理进度 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/b65dba01-5fea-45da-89bc-010b52e2f6b7.png?Expires=1773225686&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=PArLWRn%2FLHyU8%2FsTpM%2F%2F43qjVMw%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773222086-4ed1563650d94e8f9e59b879875a7ced-0-70fa46d575f8c851e32fdd213d1f3fbf" alt="进度" width="300"> | 通用 |
|