langgraph-vue3-chatbot 0.1.12 → 0.1.14

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.
Files changed (6) hide show
  1. package/README.md +132 -16
  2. package/dist-lib/components/ai-bot/ChatBot.vue.d.ts.map +1 -1
  3. package/dist-lib/components/ai-bot/chatbot.css +1 -1
  4. package/dist-lib/index.js +171 -165
  5. package/dist-lib/index.js.map +1 -1
  6. package/package.json +10 -9
package/README.md CHANGED
@@ -1,23 +1,70 @@
1
1
  # langgraph-vue3-chatbot
2
2
 
3
- 基于 Vue 3 的 AI 聊天组件库，当前提供两个组件：
3
+ [![npm version](https://img.shields.io/npm/v/langgraph-vue3-chatbot)](https://www.npmjs.com/package/langgraph-vue3-chatbot)
4
+ [![npm downloads](https://img.shields.io/npm/dw/langgraph-vue3-chatbot)](https://www.npmjs.com/package/langgraph-vue3-chatbot)
5
+ [![npm types](https://img.shields.io/npm/types/langgraph-vue3-chatbot)](https://www.npmjs.com/package/langgraph-vue3-chatbot)
6
+ [![license](https://img.shields.io/npm/l/langgraph-vue3-chatbot)](https://github.com/izerui/langgraph-vue3-chatbot/blob/main/LICENSE)
7
+ [![GitHub stars](https://img.shields.io/github/stars/izerui/langgraph-vue3-chatbot?style=social)](https://github.com/izerui/langgraph-vue3-chatbot)
8
+ [![GitHub last commit](https://img.shields.io/github/last-commit/izerui/langgraph-vue3-chatbot)](https://github.com/izerui/langgraph-vue3-chatbot/commits/main)
9
+ [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/izerui/langgraph-vue3-chatbot/pulls)
10
+ [![Vue](https://img.shields.io/badge/Vue-3.4%2B-42b883?logo=vue.js&logoColor=white)](https://vuejs.org/)
11
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
12
+ [![Vite](https://img.shields.io/badge/Vite-5.x-646cff?logo=vite&logoColor=white)](https://vite.dev/)
13
+ [![LangGraph](https://img.shields.io/badge/LangGraph-SDK-blue)](https://www.npmjs.com/package/@langchain/langgraph-sdk)
4
14
 
5
- - `AskAiBot`：悬浮按钮 + 展开聊天窗
6
- - `ChatBot`：可直接嵌入页面的聊天面板
15
+ 一个面向 Vue 3 的 AI 聊天组件库，基于 `@langchain/langgraph-sdk` 实现与 LangGraph 后端的流式通信。
7
16
 
8
- 组件内部已集成与 LangGraph 后端通信、流式消息、工具调用展示、附件能力、建议问题、模型选择等现有能力。
17
+ 当前提供两个核心组件：
18
+
19
+ - `AskAiBot`：悬浮按钮 + 展开聊天窗，适合挂在页面右下角快速唤起
20
+ - `ChatBot`：可直接嵌入页面的聊天面板，适合详情页、工作台、后台系统等场景
21
+
22
+ 组件内部已集成：流式消息渲染、工具调用展示、附件能力、建议问题、模型选择等常见 AI 聊天能力。
23
+
24
+ ## 预览
25
+
26
+ ![langgraph-vue3-chatbot preview](https://raw.githubusercontent.com/izerui/langgraph-vue3-chatbot/main/docs/img.png)
27
+
28
+ ## 特性
29
+
30
+ - 开箱即用的 Vue 3 AI 聊天组件
31
+ - 基于 LangGraph 的流式消息通信
32
+ - 同时支持嵌入式面板和悬浮聊天窗
33
+ - 内置工具调用展示
34
+ - 支持附件上传入口插槽
35
+ - 支持建议问题、空状态、自定义消息内容插槽
36
+ - 自动引入组件样式，接入成本低
37
+ - 使用 TypeScript 编写，提供类型声明
9
38
 
10
39
  ## 安装
11
40
 
12
- 宿主项目需自行提供 Vue 3，其余运行时依赖会随 `langgraph-vue3-chatbot` 自动安装，无需额外手动安装 `markstream-vue`、`mermaid`、`shiki` 等依赖。
41
+ 宿主项目需自行提供 `vue`，其余运行时依赖会随 `langgraph-vue3-chatbot` 自动安装，无需额外手动安装 `markstream-vue`、`mermaid`、`shiki` 等依赖。
13
42
 
14
43
  ```bash
15
44
  pnpm add langgraph-vue3-chatbot
16
45
  ```
17
46
 
18
- ## 使用
47
+ ## 快速开始
19
48
 
20
- ### AskAiBot
49
+ ### 1. 准备 LangGraph 服务
50
+
51
+ 组件默认通过以下参数连接 LangGraph 后端：
52
+
53
+ - `apiUrl`：LangGraph 服务地址
54
+ - `apiKey`：LangGraph 服务访问凭证（可选）
55
+ - `assistantId`：目标 assistant 标识
56
+
57
+ 本地开发时，常见配置类似：
58
+
59
+ ```env
60
+ VITE_LANGGRAPH_API_URL=http://localhost:2024
61
+ VITE_LANGGRAPH_ASSISTANT_ID=demo-assistant
62
+ VITE_LANGGRAPH_ASSISTANT_NAME=AI 助手
63
+ ```
64
+
65
+ ### 2. 使用 `AskAiBot`
66
+
67
+ 适合在现有页面中增加一个可随时唤起的 AI 助手入口。
21
68
 
22
69
  ```vue
23
70
  <script setup lang="ts">
@@ -35,9 +82,9 @@ import { AskAiBot } from 'langgraph-vue3-chatbot'
35
82
  </template>
36
83
  ```
37
84
 
38
- 主入口会自动带出组件样式。
85
+ ### 3. 使用 `ChatBot`
39
86
 
40
- ### ChatBot
87
+ 适合直接嵌入业务页面，作为主要聊天区域。
41
88
 
42
89
  ```vue
43
90
  <script setup lang="ts">
@@ -56,11 +103,45 @@ import { ChatBot } from 'langgraph-vue3-chatbot'
56
103
  </template>
57
104
  ```
58
105
 
106
+ ## 推荐接入方式
107
+
108
+ 如果你希望接入方式更贴近本仓库 demo，可以结合环境变量来传入配置：
109
+
110
+ ```vue
111
+ <script setup lang="ts">
112
+ import { AskAiBot, ChatBot } from 'langgraph-vue3-chatbot'
113
+
114
+ const apiUrl = import.meta.env.VITE_LANGGRAPH_API_URL || 'http://localhost:2024'
115
+ const assistantId = import.meta.env.VITE_LANGGRAPH_ASSISTANT_ID || 'demo-assistant'
116
+ const assistantName = import.meta.env.VITE_LANGGRAPH_ASSISTANT_NAME || 'AI 助手'
117
+
118
+ const suggestions = [
119
+ '这个 demo 怎么接入真实服务？',
120
+ 'ChatBot 和 AskAiBot 分别适合什么场景？',
121
+ ]
122
+ </script>
123
+
124
+ <template>
125
+ <ChatBot
126
+ :api-url="apiUrl"
127
+ :assistant-id="assistantId"
128
+ :assistant-name="assistantName"
129
+ />
130
+
131
+ <AskAiBot
132
+ :api-url="apiUrl"
133
+ :assistant-id="assistantId"
134
+ :assistant-name="assistantName"
135
+ :suggestions="suggestions"
136
+ />
137
+ </template>
138
+ ```
139
+
59
140
  ## Props
60
141
 
61
142
  ### AskAiBot
62
143
 
63
- | prop | 用途 | 默认值 |
144
+ | Prop | 用途 | 默认值 |
64
145
  | --- | --- | --- |
65
146
  | `assistantId` | 指定 LangGraph 侧的 assistant 标识 | `'research'` |
66
147
  | `assistantName` | 设置组件头部展示的助手名称 | `'Chat'` |
@@ -76,7 +157,7 @@ import { ChatBot } from 'langgraph-vue3-chatbot'
76
157
 
77
158
  ### ChatBot
78
159
 
79
- | prop | 用途 | 默认值 |
160
+ | Prop | 用途 | 默认值 |
80
161
  | --- | --- | --- |
81
162
  | `assistantId` | 指定 LangGraph 侧的 assistant 标识 | `'research'` |
82
163
  | `assistantName` | 设置聊天面板头部展示的助手名称 | `'Chat'` |
@@ -92,7 +173,7 @@ import { ChatBot } from 'langgraph-vue3-chatbot'
92
173
 
93
174
  ### AskAiBot
94
175
 
95
- | slot | 用途 | slot props |
176
+ | Slot | 用途 | Slot Props |
96
177
  | --- | --- | --- |
97
178
  | `empty` | 自定义空状态内容 | `{ sendMessage }` |
98
179
  | `custom` | 自定义 custom 消息渲染 | `{ customContent, threadId }` |
@@ -100,14 +181,49 @@ import { ChatBot } from 'langgraph-vue3-chatbot'
100
181
 
101
182
  ### ChatBot
102
183
 
103
- | slot | 用途 | slot props |
184
+ | Slot | 用途 | Slot Props |
104
185
  | --- | --- | --- |
105
186
  | `empty` | 自定义空状态内容 | `{ sendMessage }` |
106
187
  | `custom` | 自定义 custom 消息渲染 | `{ customContent, threadId }` |
107
188
  | `attachment-trigger` | 自定义附件触发器 | `{ addAttachments }` |
108
189
 
109
- ## 说明
190
+ ## 样式说明
110
191
 
111
- - 组件面向 Vue 3 使用，宿主项目需提供 `vue@^3.4.0`
112
192
  - 组件通过主入口导出
113
- - 主入口自动带样式
193
+ - 主入口会自动带出组件样式
194
+ - 使用时无需额外单独引入样式文件
195
+
196
+ ## 使用建议
197
+
198
+ - 页面内主聊天区域优先使用 `ChatBot`
199
+ - 作为全局 AI 助手入口优先使用 `AskAiBot`
200
+ - 如果你已经有 thread id，可通过 `threadId` 复用已有会话
201
+ - 如果需要区分用户上下文，可传入 `userId`
202
+
203
+ ## 本地开发
204
+
205
+ ```bash
206
+ pnpm install
207
+ pnpm dev
208
+ ```
209
+
210
+ 构建生产版本：
211
+
212
+ ```bash
213
+ pnpm build
214
+ ```
215
+
216
+ 预览构建结果：
217
+
218
+ ```bash
219
+ pnpm preview
220
+ ```
221
+
222
+ ## 相关链接
223
+
224
+ - npm: https://www.npmjs.com/package/langgraph-vue3-chatbot
225
+ - Repository: https://github.com/izerui/langgraph-vue3-chatbot
226
+
227
+ ## License
228
+
229
+ MIT
package/dist-lib/components/ai-bot/ChatBot.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatBot.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ai-bot/ChatBot.vue"],"names":[],"mappings":"AA+0BA,OAAO,KAAK,EAAE,0BAA0B,EAAsB,MAAM,mBAAmB,CAAA;AACvF,OAAO,KAAK,EAA2B,QAAQ,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAa3F,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAcD,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;KAAE,KAAK,GAAG,CAAA;IACtF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,aAAa,EAAE,aAAa,CAAC;QAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,KAAK,GAAG,CAAA;IAClF,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,GAAG,CAAA;CAClE,CAAC;AAq6BF,QAAA,MAAM,eAAe;;;;;;;uBA37BC,OAAO;iBACb,MAAM,EAAE;YACb,MAAM;iBAPD,MAAM;mBACJ,MAAM;kBACP,MAAM;YAEZ,MAAM;YAIN,MAAM;4EAg8Bf,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"ChatBot.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ai-bot/ChatBot.vue"],"names":[],"mappings":"AAy3BA,OAAO,KAAK,EAAE,0BAA0B,EAAsB,MAAM,mBAAmB,CAAA;AACvF,OAAO,KAAK,EAA2B,QAAQ,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAa3F,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAcD,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;KAAE,KAAK,GAAG,CAAA;IACtF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,aAAa,EAAE,aAAa,CAAC;QAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,KAAK,GAAG,CAAA;IAClF,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,GAAG,CAAA;CAClE,CAAC;AA07BF,QAAA,MAAM,eAAe;;;;;;;uBAh9BC,OAAO;iBACb,MAAM,EAAE;YACb,MAAM;iBAPD,MAAM;mBACJ,MAAM;kBACP,MAAM;YAEZ,MAAM;YAIN,MAAM;4EAq9Bf,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}