@ain-framework/remote-chat-sdk

Vue 3 AI 对话展示 SDK（由 @business-template/ai-chat-sdk 迁移而来）。 设计原则：只渲染，不持真相 —— 消息 / 会话 / 流式状态全部由业务系统持有，SDK 仅提供展示组件、类型契约与可插拔 Runtime。

Install

pnpm add @ain-framework/remote-chat-sdk ai vue

Usage

import { ChatProvider, MessageList, PromptInput, createMockSseRuntime } from "@ain-framework/remote-chat-sdk";
import "@ain-framework/remote-chat-sdk/style.css";

最小示例（Mock 流）

const runtime = createMockSseRuntime();

然后在模板中：

<ChatProvider :runtime="runtime">
  <MessageList />
  <PromptInput />
</ChatProvider>

接入真实后端

使用 createStreamingRuntime 连接 SSE 服务端，或实现 ChatRuntime 接口（消息、状态、send/stop/regenerate/setMessages）。

组件与 API

• 组件：ChatProvider、MessageList、Message、MessageContent、PromptInput、SessionList、AttachmentPicker、FilePart、Reasoning、Sources、Tool、TypewriterText、CodeBlock、MessageActions、TokenIndicator
• Composables：useChatRuntime、useChatDraft、useAttachment、useChatSessions、useStickToBottom
• 流式：createStreamingRuntime、createMockSseRuntime、parseSseChunk、readSseStream、normalizeUiMessageEvent、reduceStreamEvent、useTypewriter
• 工具：renderMarkdown、highlightCode、copyText、extractMessageText、splitMarkdownBlocks、文件工具（classifyFile / formatFileSize / toFileUIPart 等）
• 类型：ChatMessage、ChatMessagePart、ChatRuntime、ChatProviderProps、ChatSession、ChatStreamEvent、DynamicToolPart，以及从 ai 包 re-export 的 UIMessage / ChatStatus / TextUIPart 等

样式

import "@ain-framework/remote-chat-sdk/style.css";

dist/styles.css 已内置 Tailwind 基础样式、highlight.js 代码高亮与 KaTeX 公式样式（字体资源位于 dist/assets/）。

Peer Dependencies

• vue（^3.4.29）
• ai（^6.0.37，仅类型引用，SDK 产物不含 ai 运行时代码）

Dev

pnpm typecheck
pnpm build
pnpm test:day4   # SSE 解析 / 状态机 smoke
pnpm test:day7   # 会话 CRUD smoke