npm package: @skillpet/chat-vue
Description: Vue 3 SSE 流式 AI 对话面板组件 — 内置 i18n（7 语言）、品牌色主题、子智能体支持
Latest version: 0.5.0

# @skillpet/chat-vue

<p align="center">
  <strong>Vue 3 SSE 流式 AI 对话面板组件 — 内置 i18n（7 语言）、品牌色主题、子智能体支持。</strong>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@skillpet/chat-vue"><img src="https://img.shields.io/npm/v/@skillpet/chat-vue.svg" alt="npm version"></a>
  <a href="https://github.com/skillpet/skillpet-chat/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@skillpet/chat-vue.svg" alt="license"></a>
</p>

---

## 功能特性

- SSE 流式对话，实时显示 AI 思考过程与工具调用
- 子智能体（consult agent）多轮对话与工具步骤展示
- 结构化提问（ask_user）表单交互
- 斜杠指令面板
- 内置 7 种语言（zh-CN、zh-TW、en、ja、ko、es、fr）
- 蓝色品牌色默认主题，支持深色/浅色模式
- CSS 变量完全自定义配色
- Markdown 渲染
- Vue 3.3+ 兼容

## 安装

```bash
npm install @skillpet/chat-vue
```

自动安装 `@skillpet/chat-core`（类型/SSE/i18n）及 `lucide-vue-next`、`markdown-it` 等依赖。

## 快速开始

```vue
<script setup>
import { ChatPanel } from "@skillpet/chat-vue";
import "@skillpet/chat-core/styles.css";

const config = {
  api: {
    baseUrl: "/api/chat",
    deleteConversationUrl: "/api/chat/conversation",
  },
  getAccessToken: () => localStorage.getItem("token"),
};
</script>

<template>
  <ChatPanel project-id="my-project" :config="config" />
</template>
```

## 三层 API

### Layer 1: 开箱即用

| 导出 | 说明 |
|------|------|
| `ChatPanel` | 主组件 SFC，包含完整聊天 UI |
| `provideChatConfig` | 通过 provide/inject 注入配置 |
| `useChatConfig` | 读取注入的配置 |
| `setChatLanguage` | 切换 i18n 语言 |

### Layer 2: 自定义组合

| 导出 | 说明 |
|------|------|
| `useChatPanel` | Composable，返回响应式状态和操作 |
| `MessageBubble` | 消息气泡 SFC |
| `AskUserBlock` | 结构化表单 SFC |
| `ThinkingBlock` | AI 思考过程 SFC |
| `SlashCommandPalette` | 斜杠指令面板 SFC |

### Layer 3: 底层原语

| 导出 | 说明 |
|------|------|
| `processSSEStream` | SSE 流处理（从 core 重导出） |
| `parseHistoryMessages` | 历史消息解析（从 core 重导出） |

## ChatPanel Props

| Prop | 类型 | 必选 | 说明 |
|------|------|------|------|
| `projectId` | `string` | 是 | 项目/会话 ID |
| `config` | `ChatPanelConfig` | | API 地址、鉴权等配置 |
| `quickStarters` | `string[]` | | 空状态快捷开场文案 |
| `emptyState` | `ChatPanelEmptyState` | | 自定义空状态 |
| `extraSlashCommands` | `SlashCommand[]` | | 追加斜杠指令 |
| `className` | `string` | | 追加 CSS 类名 |

## 多配置共享

```vue
<script setup>
import { ChatPanel, provideChatConfig } from "@skillpet/chat-vue";

provideChatConfig({
  api: { baseUrl: "/api/chat", deleteConversationUrl: "/api/chat/conversation" },
  getAccessToken: () => localStorage.getItem("token"),
});
</script>

<template>
  <ChatPanel project-id="project-a" />
  <ChatPanel project-id="project-b" />
</template>
```

## 自定义 UI

```vue
<script setup>
import { useChatPanel, MessageBubble } from "@skillpet/chat-vue";
import "@skillpet/chat-core/styles.css";

const chat = useChatPanel({
  projectId: "xxx",
  config: { /* ... */ },
});
</script>

<template>
  <div class="skillpet-chat">
    <MessageBubble v-for="msg in chat.messages.value" :key="msg.id" :msg="msg" />
  </div>
</template>
```

## 主题定制

与 React 版共享同一套 CSS 变量系统。深色模式通过 `.dark` 类或 `[data-theme="dark"]` 自动切换。

```css
.skillpet-chat {
  --skillpet-chat-primary: oklch(0.6 0.22 145);
}
```

## i18n

```ts
import { setChatLanguage } from "@skillpet/chat-vue";
setChatLanguage("en"); // zh-CN | zh-TW | en | ja | ko | es | fr
```

## CDN 使用

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/@skillpet/chat-core/dist/index.umd.js"></script>
<script src="https://unpkg.com/@skillpet/chat-vue/dist/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@skillpet/chat-core/dist/skillpet-chat.css" />

<div id="app" class="skillpet-chat"></div>
<script>
  const { ChatPanel } = SkillpetChatVue;
  const app = Vue.createApp({
    components: { ChatPanel },
    template: `<ChatPanel project-id="demo" :config="config" />`,
    setup() {
      return { config: { /* ... */ } };
    },
  });
  app.mount("#app");
</script>
```

## License

[MIT](https://github.com/skillpet/skillpet-chat/blob/main/LICENSE)