langgraph-vue3-chatbot 0.1.20 → 0.1.22

package/README.md

@@ -19,13 +19,17 @@
 - `AskAiBot`：悬浮按钮 + 展开聊天窗，适合挂在页面右下角快速唤起
 - `ChatBot`：可直接嵌入页面的聊天面板，适合详情页、工作台、后台系统等场景
 
-组件内部已集成：流式消息渲染、工具调用展示、附件能力、建议问题、模型选择等常见 AI 聊天能力。
+组件内部已集成：流式消息渲染、工具调用展示、附件能力、建议问题、模型选择、浅色/深色主题切换等常见 AI 聊天能力。
 
 ## 预览
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/izerui/langgraph-vue3-chatbot/main/docs/img.png" alt="langgraph-vue3-chatbot preview 1" width="48%" />
-  <img src="https://raw.githubusercontent.com/izerui/langgraph-vue3-chatbot/main/docs/img_1.png" alt="langgraph-vue3-chatbot preview 2" width="48%" />
+  <img src="https://raw.githubusercontent.com/izerui/langgraph-vue3-chatbot/main/docs/img.png" alt="langgraph-vue3-chatbot light theme preview" width="48%" />
+  <img src="https://raw.githubusercontent.com/izerui/langgraph-vue3-chatbot/main/docs/img_1.png" alt="langgraph-vue3-chatbot dark theme preview" width="48%" />
+</p>
+
+<p align="center">
+  左图为浅色主题（<code>light</code>），右图为深色主题（<code>dark</code>）。
 </p>
 
 ## 特性
@@ -79,6 +83,7 @@ import { AskAiBot } from 'langgraph-vue3-chatbot'
     assistant-id="research"
     assistant-name="AI 助手"
     api-url="http://localhost:2024"
+    theme="light"
     :width="400"
     height="calc(100vh - 120px)"
   />
@@ -100,6 +105,7 @@ import { ChatBot } from 'langgraph-vue3-chatbot'
       assistant-id="research"
       assistant-name="AI 助手"
       api-url="http://localhost:2024"
+      theme="dark"
       :show-header-actions="false"
     />
   </div>
@@ -112,11 +118,13 @@ import { ChatBot } from 'langgraph-vue3-chatbot'
 
 ```vue
 <script setup lang="ts">
-import { AskAiBot, ChatBot } from 'langgraph-vue3-chatbot'
+import { AskAiBot, ChatBot, type AiBotTheme } from 'langgraph-vue3-chatbot'
 
 const apiUrl = import.meta.env.VITE_LANGGRAPH_API_URL || 'http://localhost:2024'
 const assistantId = import.meta.env.VITE_LANGGRAPH_ASSISTANT_ID || 'demo-assistant'
 const assistantName = import.meta.env.VITE_LANGGRAPH_ASSISTANT_NAME || 'AI 助手'
+const chatbotTheme: AiBotTheme = 'light'
+const askAiBotTheme: AiBotTheme = 'dark'
 
 const suggestions = [
   '这个 demo 怎么接入真实服务？',
@@ -129,6 +137,7 @@ const suggestions = [
     :api-url="apiUrl"
     :assistant-id="assistantId"
     :assistant-name="assistantName"
+    :theme="chatbotTheme"
   />
 
   <AskAiBot
@@ -136,6 +145,7 @@ const suggestions = [
     :assistant-id="assistantId"
     :assistant-name="assistantName"
     :suggestions="suggestions"
+    :theme="askAiBotTheme"
   />
 </template>
 ```
@@ -155,6 +165,7 @@ const suggestions = [
 | `suggestions` | 配置输入区上方的建议问题列表 | `[]` |
 | `apiUrl` | 指定 LangGraph 服务地址 | `'http://localhost:2024'` |
 | `apiKey` | 指定 LangGraph 服务访问凭证 | `undefined` |
+| `theme` | 设置组件主题，可选 `light` / `dark` | `'light'` |
 | `width` | 设置悬浮聊天窗打开后的宽度，支持 `number` 或 CSS 尺寸字符串 | `400` |
 | `height` | 设置悬浮聊天窗打开后的高度，支持 `number` 或 CSS 尺寸字符串 | `'calc(100vh - 90px)'` |
 
@@ -171,6 +182,7 @@ const suggestions = [
 | `suggestions` | 配置输入区上方的建议问题列表 | `[]` |
 | `apiUrl` | 指定 LangGraph 服务地址 | `'http://localhost:2024'` |
 | `apiKey` | 指定 LangGraph 服务访问凭证 | `undefined` |
+| `theme` | 设置组件主题，可选 `light` / `dark` | `'light'` |
 
 ## Slots
 
@@ -195,6 +207,11 @@ const suggestions = [
 - 组件通过主入口导出
 - 主入口会自动带出组件样式
 - 使用时无需额外单独引入样式文件
+- 当前内置两套主题：`light`（浅色，默认）与 `dark`（深色）
+- `AskAiBot` 的 `theme` 会同时作用于外层悬浮按钮、内部 `ChatBot` 与 portal 浮层
+- 内部 markdown 渲染基于 `markstream-vue`，代码高亮会随主题自动切换：
+  - `light` -> `vitesse-light`
+  - `dark` -> `vitesse-dark`
 
 ## 使用建议
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "langgraph-vue3-chatbot",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "private": false,
   "type": "module",
   "main": "./dist-lib/index.js",