@bdky/chat-pilot-kit-vue3

@bdky/chat-pilot-kit-vue3

@bdky/chat-pilot-kit 的 Vue3 适配层，提供 Provider、Composables 和 VueNodeViewRenderer，Markdown 渲染使用 markstream-vue，NodeView 样式采用 GitHub 风格设计。

特性

• Provider/Inject 模式 — provideChatPilotKit / injectChatPilotKit，与 Vue3 依赖注入无缝集成
• 4 个 Composables — useChatPilotKit、useChatPilotKitEvents、useConversations、useNodeInteraction
• VueNodeViewRenderer — 将 Vue SFC 注册为 NodeView，与 React 版 API 对称
• 8 个默认 NodeView 组件 — Text、Markdown（流式）、ThinkingBlock、ToolCall、Image、File、Audio、Video
• GitHub 风格样式 — 基于 GitHub Primer 色板，支持亮色/暗色模式

安装

npm install @bdky/chat-pilot-kit-vue3
# or
yarn add @bdky/chat-pilot-kit-vue3

引入样式：

import '@bdky/chat-pilot-kit-vue3/styles.css';

快速开始

1. 创建 controller 并注入

<!-- App.vue -->
<script setup lang="ts">
import {createChatPilotKit, provideChatPilotKit} from '@bdky/chat-pilot-kit-vue3';
import {MyAgentService} from './services/MyAgentService';
import ChatApp from './components/ChatApp.vue';

const controller = createChatPilotKit({
    agentService: new MyAgentService(),
});

provideChatPilotKit(controller);
</script>

<template>
    <ChatApp />
</template>

2. 在子组件中使用 Composables

<!-- ChatApp.vue -->
<script setup lang="ts">
import {
    useChatPilotKit,
    useConversations,
    useChatPilotKitEvents,
    getDefaultVueExtensions,
} from '@bdky/chat-pilot-kit-vue3';
import NodeRenderer from '@bdky/chat-pilot-kit-vue3';

const {controller} = useChatPilotKit();
const conversations = useConversations();

useChatPilotKitEvents({
    onConversationAdd: (conv) => {
        console.log('新会话', conv.id);
    },
    onNodeAdd: (node) => {
        console.log('新节点', node.id);
    },
});

const extensions = getDefaultVueExtensions();

const sendMessage = async () => {
    await controller.conversationService.sendMessage({
        content: 'Hello',
        role: 'user',
    });
};
</script>

<template>
    <div class="chat-container">
        <div
            v-for="conv in conversations"
            :key="conv.id"
            class="conversation"
        >
            <div
                v-for="node in conv.nodes"
                :key="node.id"
            >
                <NodeRenderer
                    :node="node"
                    :extensions="extensions"
                />
            </div>
        </div>
        <button @click="sendMessage">发送</button>
    </div>
</template>

3. 自定义 NodeView

import {VueNodeViewRenderer, MessageExtension} from '@bdky/chat-pilot-kit-vue3';
import MyCustomView from './MyCustomView.vue';

const MyExtension = MessageExtension.extend({
    name: 'my-node',
    addNodeView() {
        return VueNodeViewRenderer(MyCustomView);
    },
});

MyCustomView.vue 接收的 props 类型为 NodeViewProps：

<script setup lang="ts">
import type {NodeViewProps} from '@bdky/chat-pilot-kit-vue3';

const props = defineProps<NodeViewProps>();
</script>

API 文档

Provider

Composables

useChatPilotKit()

返回 { controller }，controller 为 createChatPilotKit() 创建的实例。

useChatPilotKitEvents(props)

监听 emitter 事件，组件卸载时自动清理。

useConversations()

返回 ShallowRef<IConversationItem[]>，响应式跟踪所有会话及其节点。

useNodeInteraction(props)

const {sendCommand} = useNodeInteraction({
    filter: (payload) => payload.nodeId === targetId,
    onInteraction: (payload) => { /* ... */ },
});

// 向节点发送命令
sendCommand(nodeId, 'copy', {});

NodeView

默认扩展

import {getDefaultVueExtensions} from '@bdky/chat-pilot-kit-vue3';

// 获取全部 8 个默认扩展
const extensions = getDefaultVueExtensions();

也可单独引用：

import {
    VueTextExtension,
    VueMarkdownExtension,
    VueThinkingBlockExtension,
    VueToolCallExtension,
    VueImageExtension,
    VueFileExtension,
    VueAudioExtension,
    VueVideoExtension,
} from '@bdky/chat-pilot-kit-vue3';

样式定制

通过 CSS 变量覆盖 GitHub Primer 色板：

:root {
    --cpk-node-accent: #your-brand-color;
    --cpk-node-surface: #your-surface-color;
    --cpk-node-border: #your-border-color;
}

支持 [data-theme="dark"] 属性切换暗色模式：

document.documentElement.setAttribute('data-theme', 'dark');

与 React 版对比

License

MIT