@kernelift/ai-chat 3.0.5 → 3.0.6
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/CHANGELOG.md +6 -0
- package/README.md +30 -25
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @kernelift/ai-chat
|
|
2
2
|
|
|
3
|
-
[](https://badge.fury.io/js/%40kernelift%2Fai-chat)
|
|
4
4
|
[](https://opensource.org/licenses/GPL-3.0)
|
|
5
5
|
|
|
6
|
-
- 在线预览地址: https://
|
|
7
|
-
- demo工程: https://github.com/
|
|
6
|
+
- 在线预览地址: https://kernelift-labs.github.io/playground/#/ai-chat
|
|
7
|
+
- demo工程: https://github.com/kernelift-labs/playground
|
|
8
8
|
|
|
9
9
|
基于 Vue 3 + TypeScript 的现代化 AI 聊天框组件,提供企业级的对话界面解决方案。无UI库绑定。
|
|
10
10
|
|
|
@@ -28,20 +28,20 @@
|
|
|
28
28
|
|
|
29
29
|
```bash
|
|
30
30
|
# 使用 pnpm
|
|
31
|
-
pnpm add @
|
|
31
|
+
pnpm add @kernelift/ai-chat
|
|
32
32
|
|
|
33
33
|
# 使用 npm
|
|
34
|
-
npm install @
|
|
34
|
+
npm install @kernelift/ai-chat
|
|
35
35
|
|
|
36
36
|
# 使用 yarn
|
|
37
|
-
yarn add @
|
|
37
|
+
yarn add @kernelift/ai-chat
|
|
38
38
|
```
|
|
39
39
|
|
|
40
40
|
### 依赖要求
|
|
41
41
|
|
|
42
42
|
- Vue 3.3+
|
|
43
43
|
- TypeScript 5.0+
|
|
44
|
-
- @
|
|
44
|
+
- @kernelift/markdown (workspace:\*)
|
|
45
45
|
|
|
46
46
|
## 🚀 快速开始
|
|
47
47
|
|
|
@@ -61,9 +61,9 @@ yarn add @gci/ai-chat
|
|
|
61
61
|
|
|
62
62
|
<script setup>
|
|
63
63
|
import { ref } from 'vue'
|
|
64
|
-
import { AiChat } from '@
|
|
65
|
-
import '@
|
|
66
|
-
import type { ChatMessage, ChatRecord, BubbleEvent } from '@
|
|
64
|
+
import { AiChat } from '@kernelift/ai-chat'
|
|
65
|
+
import '@kernelift/ai-chat/style.css'
|
|
66
|
+
import type { ChatMessage, ChatRecord, BubbleEvent } from '@kernelift/ai-chat'
|
|
67
67
|
|
|
68
68
|
const messages = ref<ChatMessage[]>([])
|
|
69
69
|
const inputText = ref('')
|
|
@@ -565,7 +565,7 @@ const handleDeleteRecord = (record: ChatRecord) => {
|
|
|
565
565
|
### 流式消息处理
|
|
566
566
|
|
|
567
567
|
```typescript
|
|
568
|
-
import { SSEClient } from '@
|
|
568
|
+
import { SSEClient } from '@kernelift/ai-chat';
|
|
569
569
|
|
|
570
570
|
const handleStreamResponse = async (question: string, enableThink?: boolean) => {
|
|
571
571
|
const client = new SSEClient('your-token', 'https://api.example.com');
|
|
@@ -676,7 +676,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
|
|
|
676
676
|
|
|
677
677
|
```scss
|
|
678
678
|
// 自定义主题
|
|
679
|
-
.
|
|
679
|
+
.kernelift-chat-container {
|
|
680
680
|
// 主容器样式
|
|
681
681
|
border-radius: 16px;
|
|
682
682
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
|
@@ -702,7 +702,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
|
|
|
702
702
|
|
|
703
703
|
// 自定义消息气泡
|
|
704
704
|
.custom-chat-bubble {
|
|
705
|
-
.
|
|
705
|
+
.kernelift-chat-bubble__assistant {
|
|
706
706
|
background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
|
|
707
707
|
border: 1px solid #e1e8ff;
|
|
708
708
|
border-radius: 12px;
|
|
@@ -712,7 +712,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
|
|
|
712
712
|
}
|
|
713
713
|
}
|
|
714
714
|
|
|
715
|
-
.
|
|
715
|
+
.kernelift-chat-bubble__user {
|
|
716
716
|
&-content {
|
|
717
717
|
background: linear-gradient(135deg, var(--kl-chat-primary-color) 0%, #8a86f1 100%);
|
|
718
718
|
color: white;
|
|
@@ -727,7 +727,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
|
|
|
727
727
|
|
|
728
728
|
// 自定义发送器
|
|
729
729
|
.custom-chat-sender {
|
|
730
|
-
.
|
|
730
|
+
.kernelift-chat-sender__textarea {
|
|
731
731
|
border-radius: 8px;
|
|
732
732
|
border: 2px solid var(--kl-border-color);
|
|
733
733
|
|
|
@@ -737,7 +737,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
|
|
|
737
737
|
}
|
|
738
738
|
}
|
|
739
739
|
|
|
740
|
-
.
|
|
740
|
+
.kernelift-chat-sender__send-button {
|
|
741
741
|
background: linear-gradient(135deg, var(--kl-chat-primary-color) 0%, #8a86f1 100%);
|
|
742
742
|
border-radius: 8px;
|
|
743
743
|
|
|
@@ -781,7 +781,7 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
|
|
|
781
781
|
animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
782
782
|
}
|
|
783
783
|
|
|
784
|
-
.
|
|
784
|
+
.kernelift-chat-bubble {
|
|
785
785
|
margin: 8px 12px;
|
|
786
786
|
|
|
787
787
|
&__actions {
|
|
@@ -801,9 +801,9 @@ const handleStreamResponse = async (question: string, enableThink?: boolean) =>
|
|
|
801
801
|
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
|
|
802
802
|
<script setup lang="ts">
|
|
803
803
|
import { ref, watch, onMounted, nextTick } from 'vue';
|
|
804
|
-
import { AiChat } from '@
|
|
804
|
+
import { AiChat } from '@kernelift/ai-chat';
|
|
805
805
|
import { useChat } from './use-chat';
|
|
806
|
-
import '@
|
|
806
|
+
import '@kernelift/ai-chat/style.css';
|
|
807
807
|
import { CHAT_BASE_URL, CHAT_DEFAULT_MODEL } from './constants';
|
|
808
808
|
import Button from 'primevue/button';
|
|
809
809
|
import Textarea from 'primevue/textarea';
|
|
@@ -1455,7 +1455,12 @@ onMounted(() => {
|
|
|
1455
1455
|
|
|
1456
1456
|
```ts
|
|
1457
1457
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1458
|
-
import type {
|
|
1458
|
+
import type {
|
|
1459
|
+
BubbleEventAction,
|
|
1460
|
+
ChatMessage,
|
|
1461
|
+
ChatRecord,
|
|
1462
|
+
ChatRecordAction
|
|
1463
|
+
} from '@kernelift/ai-chat';
|
|
1459
1464
|
import { formatDate, useAsyncState, useStorage } from '@vueuse/core';
|
|
1460
1465
|
import { useConfirm } from 'primevue/useconfirm';
|
|
1461
1466
|
import { useToast } from 'primevue/usetoast';
|
|
@@ -2152,7 +2157,7 @@ export const useChat = (options: {
|
|
|
2152
2157
|
|
|
2153
2158
|
```scss
|
|
2154
2159
|
// 自定义主题
|
|
2155
|
-
.
|
|
2160
|
+
.kernelift-chat-container {
|
|
2156
2161
|
// 修改主容器样式
|
|
2157
2162
|
border-radius: 16px;
|
|
2158
2163
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
|
@@ -2170,12 +2175,12 @@ export const useChat = (options: {
|
|
|
2170
2175
|
|
|
2171
2176
|
// 自定义消息气泡
|
|
2172
2177
|
.custom-chat-bubble {
|
|
2173
|
-
.
|
|
2178
|
+
.kernelift-chat-bubble__assistant {
|
|
2174
2179
|
background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
|
|
2175
2180
|
border: 1px solid #e1e8ff;
|
|
2176
2181
|
}
|
|
2177
2182
|
|
|
2178
|
-
.
|
|
2183
|
+
.kernelift-chat-bubble__user {
|
|
2179
2184
|
&-content {
|
|
2180
2185
|
background: linear-gradient(135deg, var(--kl-chat-primary-color) 0%, #8a86f1 100%);
|
|
2181
2186
|
color: white;
|
|
@@ -2403,7 +2408,7 @@ const handleSend = async (text: string) => {
|
|
|
2403
2408
|
A: 使用内置的 SSEClient 或其他流式处理方案:
|
|
2404
2409
|
|
|
2405
2410
|
```typescript
|
|
2406
|
-
import { SSEClient } from '@
|
|
2411
|
+
import { SSEClient } from '@kernelift/ai-chat';
|
|
2407
2412
|
|
|
2408
2413
|
const handleStreamResponse = async (question: string) => {
|
|
2409
2414
|
const client = new SSEClient('token', 'https://api.example.com');
|