@blade-hq/agent-kit 0.4.5 → 0.4.7

package/README.md

@@ -17,7 +17,11 @@ SDK 通过两个子包暴露能力：
 pnpm install
 ```
 
-第三方项目未来发布后可安装同一个包，并按需要选择子包入口：
+第三方项目可安装发布包，并按需要选择子包入口：
+
+```bash
+npm install @blade-hq/agent-kit @tanstack/react-query react react-dom sonner
+```
 
 ```ts
 import { BladeClient } from "@blade-hq/agent-kit/client"
@@ -27,6 +31,40 @@ import "@blade-hq/agent-kit/style.css"
 
 如果使用 `@blade-hq/agent-kit/chat`、`@blade-hq/agent-kit/session` 等预制 React UI，应用入口必须导入 `@blade-hq/agent-kit/style.css`。只使用 `/client` 或 hooks 自行渲染 UI 时不需要导入这份样式。
 
+## ChatView 自定义渲染
+
+`ChatView` 默认负责会话数据、Socket.IO 流式更新、历史加载、输入框、技能状态和滚动行为。第三方应用可以只改样式，也可以替换局部渲染。
+
+```tsx
+import { ChatView, type ToolRendererProps } from "@blade-hq/agent-kit/chat"
+
+function BashTool({ toolCall }: ToolRendererProps) {
+  return <pre>{toolCall.arguments}</pre>
+}
+
+<ChatView
+  sessionId={sessionId}
+  classNames={{
+    root: "bg-white text-slate-950",
+    messageListContent: "max-w-4xl",
+    userMessage: "text-right",
+    assistantText: "text-base leading-7",
+    chatInputRoot: "border-t",
+  }}
+  components={{
+    EmptyState: () => <div className="py-16 text-center">开始一个新任务</div>,
+    SkillStatusBar: ({ sessionId }) => <div>当前会话：{sessionId}</div>,
+  }}
+  renderers={{
+    tool: {
+      Bash: BashTool,
+    },
+  }}
+/>
+```
+
+如果需要完全自建聊天界面，可以直接使用 `useChat(sessionId)` 和 `skillsApi` / `useSkills()`。技能选择、`@skill` mention、会话技能状态等能力仍由现有 skills API 提供；`ChatView` 的 `components.SkillStatusBar` 可替换默认技能状态条，用来接入宿主自己的 Anthropic-style skills 入口或展示方式。
+
 ## 认证
 
 SDK 支持 cookie 会话和 Bearer Token 两种模式。

package/dist/{SkillStatusBar-DItrW2vv.d.ts → SkillStatusBar-DQyipdzn.d.ts}

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode } from 'react';
-import { M as MessageContent, C as ChatMessage, A as AskUserAnswerData } from './AskUserQuestionBlock-CjvG_pUY.js';
+import { ComponentType, ReactNode } from 'react';
+import { C as ChatMessage, A as AskUserAnswerData, T as ToolCallInfo, M as MessageContent } from './AskUserQuestionBlock-CjvG_pUY.js';
 import * as zustand from 'zustand';
 import { M as ModeId, S as SessionInfo, a as SessionStatus } from './session-CDeiO81j.js';
 import { m as BladeClient } from './blade-client-nOsdVlb1.js';
+import { C as ContentBlock } from './projection-DIfyh6RK.js';
 
 /**
  * 把 whatif-rerun 后端组装的 prompt 文本解析成可折叠展示的结构。
@@ -68,7 +69,102 @@ declare function splitFilesBySize(files: FileList | File[], limitBytes?: number)
     rejected: OversizedFileInfo[];
 };
 
-interface ChatViewProps {
+type UserChatMessage = ChatMessage & {
+    role: "user";
+};
+type ErrorChatMessage = ChatMessage & {
+    role: "error";
+};
+declare function isUserMessage(message: ChatMessage): message is UserChatMessage;
+declare function isErrorMessage(message: ChatMessage): message is ErrorChatMessage;
+interface UserMessageProps {
+    message: UserChatMessage;
+    className?: string;
+}
+declare function UserMessageBubble({ message, className }: UserMessageProps): react_jsx_runtime.JSX.Element;
+declare function ErrorMessageBlock({ message, className, }: {
+    message: ErrorChatMessage;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+type ChatViewClassNames = Partial<{
+    root: string;
+    viewerBanner: string;
+    messageListRoot: string;
+    messageListContent: string;
+    messageListInner: string;
+    emptyState: string;
+    userMessage: string;
+    errorMessage: string;
+    assistantTurn: string;
+    assistantText: string;
+    toolCall: string;
+    chatInputRoot: string;
+    chatInputInner: string;
+    skillStatusBarRoot: string;
+    skillStatusBarInner: string;
+}>;
+interface ChatViewComponents {
+    EmptyState?: ComponentType;
+    UserMessage?: ComponentType<{
+        message: UserChatMessage;
+        className?: string;
+    }>;
+    ErrorMessage?: ComponentType<{
+        message: ErrorChatMessage;
+        className?: string;
+    }>;
+    AssistantTurn?: ComponentType<AssistantTurnComponentProps>;
+    ToolCall?: ComponentType<ToolCallComponentProps>;
+    SkillStatusBar?: ComponentType<SkillStatusBarComponentProps>;
+}
+interface ChatViewRenderers {
+    tool?: Record<string, ComponentType<ToolRendererProps>>;
+}
+interface ChatViewCustomization {
+    classNames?: ChatViewClassNames;
+    components?: ChatViewComponents;
+    renderers?: ChatViewRenderers;
+}
+interface AssistantTurnComponentProps {
+    turnKey: string;
+    sessionId: string;
+    messages: ChatMessage[];
+    isStreaming?: boolean;
+    isLastTurn?: boolean;
+    askAnswers?: Record<string, AskUserAnswerData>;
+    onAnswer?: (answer: string, toolCallId: string, answerData: AskUserAnswerData) => void;
+    sessionStatus?: string;
+    level?: 1 | 2;
+    forceExpanded?: boolean;
+    customization?: ChatViewCustomization;
+}
+interface ToolCallComponentProps {
+    toolCall: ToolCallInfo;
+    onAnswer?: (answer: string, toolCallId: string, answerData: AskUserAnswerData) => void;
+    answered?: boolean;
+    answerData?: AskUserAnswerData;
+    sessionId?: string;
+    sessionStatus?: string;
+    level?: 1 | 2;
+    turnBlocks?: ContentBlock[];
+    reasoning?: string;
+    customization?: ChatViewCustomization;
+}
+interface ToolRendererProps {
+    toolCall: ToolCallInfo;
+    sessionId?: string;
+}
+interface SkillStatusBarComponentProps {
+    sessionId: string;
+    onResync?: () => void;
+    isResyncing?: boolean;
+    vertical?: boolean;
+    className?: string;
+    innerClassName?: string;
+}
+
+interface ChatViewProps extends ChatViewCustomization {
     sessionId: string;
     renderAttachments?: () => ReactNode;
     onBeforeSend?: (content: MessageContent) => MessageContent;
@@ -77,7 +173,7 @@ interface ChatViewProps {
     onResyncSkills?: () => void;
     isResyncingSkills?: boolean;
 }
-declare function ChatView({ sessionId, renderAttachments, onBeforeSend, onCommand, canShareSession, onResyncSkills, isResyncingSkills, }: ChatViewProps): react_jsx_runtime.JSX.Element;
+declare function ChatView({ sessionId, renderAttachments, onBeforeSend, onCommand, canShareSession, onResyncSkills, isResyncingSkills, classNames, components, renderers, }: ChatViewProps): react_jsx_runtime.JSX.Element;
 
 type SessionMode = ModeId;
 interface SessionState extends ClientAwareState {
@@ -160,6 +256,11 @@ interface Props$2 {
     };
     /** Tailwind class for the inner max-width wrapper. Defaults to `max-w-3xl`. */
     maxWidthClassName?: string;
+    className?: string;
+    innerClassName?: string;
+    SkillStatusBarComponent?: ComponentType<SkillStatusBarComponentProps>;
+    skillStatusBarClassName?: string;
+    skillStatusBarInnerClassName?: string;
     onResyncSkills?: () => void;
     isResyncingSkills?: boolean;
 }
@@ -174,7 +275,7 @@ type FileComposerAttachment = {
     uploadedPath?: string;
     textContent?: string | null;
 };
-declare function ChatInput({ onSend, onStop, isStreaming, mode, onToggleMode, renderAttachments, onBeforeSend, ensureSession, onCommand, canShareSession, slotAboveTextarea, externalDraft, externalAttachments, maxWidthClassName, onResyncSkills, isResyncingSkills, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ onSend, onStop, isStreaming, mode, onToggleMode, renderAttachments, onBeforeSend, ensureSession, onCommand, canShareSession, slotAboveTextarea, externalDraft, externalAttachments, maxWidthClassName, className, innerClassName, SkillStatusBarComponent, skillStatusBarClassName, skillStatusBarInnerClassName, onResyncSkills, isResyncingSkills, }: Props$2): react_jsx_runtime.JSX.Element;
 
 interface Props$1 {
     open: boolean;
@@ -190,14 +291,17 @@ interface Props {
     onAnswer?: (answer: string, toolCallId: string, answerData: AskUserAnswerData) => void;
     sessionStatus?: string;
     onConfirmPlan?: (action: "execute" | "revise", text?: string) => void;
+    customization?: ChatViewCustomization;
 }
-declare function MessageList({ sessionId, messages: rawMessages, onAnswer, sessionStatus, onConfirmPlan, }: Props): react_jsx_runtime.JSX.Element;
+declare function MessageList({ sessionId, messages: rawMessages, onAnswer, sessionStatus, onConfirmPlan, customization, }: Props): react_jsx_runtime.JSX.Element;
 
-declare function SkillStatusBar({ sessionId, onResync, isResyncing, vertical, }: {
+declare function SkillStatusBar({ sessionId, onResync, isResyncing, vertical, className, innerClassName, }: {
     sessionId: string;
     onResync?: () => void;
     isResyncing?: boolean;
     vertical?: boolean;
+    className?: string;
+    innerClassName?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { ATTACHMENT_SIZE_LIMIT_BYTES as A, type BuildWhatIfPromptInput as B, ChatInput as C, type FileComposerAttachment as F, MessageList as M, type OversizedFileInfo as O, type ParsedWhatIfPrompt as P, SkillStatusBar as S, type WhatIfQuote as W, ChatView as a, FileSizeLimitDialog as b, type ClientAwareState as c, buildWhatIfPrompt as d, formatFileSize as f, invalidateHomeSidebarSessions as i, parseWhatIfPrompt as p, splitFilesBySize as s, useSessionStore as u };
+export { type AssistantTurnComponentProps as A, type BuildWhatIfPromptInput as B, type ChatViewCustomization as C, ErrorMessageBlock as E, type FileComposerAttachment as F, MessageList as M, type OversizedFileInfo as O, type ParsedWhatIfPrompt as P, SkillStatusBar as S, type ToolCallComponentProps as T, UserMessageBubble as U, type WhatIfQuote as W, ChatInput as a, ChatView as b, type ChatViewClassNames as c, type ChatViewComponents as d, type ChatViewProps as e, type ChatViewRenderers as f, FileSizeLimitDialog as g, type SkillStatusBarComponentProps as h, type ToolRendererProps as i, isErrorMessage as j, isUserMessage as k, type ClientAwareState as l, ATTACHMENT_SIZE_LIMIT_BYTES as m, buildWhatIfPrompt as n, formatFileSize as o, invalidateHomeSidebarSessions as p, parseWhatIfPrompt as q, splitFilesBySize as s, useSessionStore as u };

package/dist/chunk-2UP7MG3J.js

@@ -0,0 +1,66 @@
+// src/react/lib/card-registry.ts
+var CardComponentRegistry = class {
+  components;
+  constructor(initial) {
+    if (initial instanceof Map) {
+      this.components = new Map(initial);
+    } else if (initial) {
+      this.components = new Map(Object.entries(initial));
+    } else {
+      this.components = /* @__PURE__ */ new Map();
+    }
+  }
+  register(type, component) {
+    this.components.set(type, component);
+  }
+  get(type) {
+    return this.components.get(type);
+  }
+  has(type) {
+    return this.components.has(type);
+  }
+  keys() {
+    return Array.from(this.components.keys());
+  }
+  clear() {
+    this.components.clear();
+  }
+  get size() {
+    return this.components.size;
+  }
+};
+var cardRegistry = new CardComponentRegistry();
+var CardJSON = {
+  safeParseJSON(text) {
+    try {
+      const value = JSON.parse(text);
+      return { ok: true, value };
+    } catch (error) {
+      return {
+        ok: false,
+        error: error instanceof Error ? error.message : "Unknown parsing error"
+      };
+    }
+  },
+  toCardArray(value) {
+    if (value && typeof value === "object" && "type" in value && typeof value.type === "string") {
+      return [value];
+    }
+    if (Array.isArray(value)) {
+      const cards = value.filter(
+        (item) => item && typeof item === "object" && "type" in item && typeof item.type === "string"
+      );
+      return cards.length > 0 ? cards : null;
+    }
+    return null;
+  },
+  isCardsLanguage(lang) {
+    return lang === "card+json";
+  }
+};
+
+export {
+  cardRegistry,
+  CardJSON
+};
+//# sourceMappingURL=chunk-2UP7MG3J.js.map

package/dist/chunk-2UP7MG3J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/lib/card-registry.ts"],"sourcesContent":["import type { ComponentType } from \"react\"\n\nexport interface Card {\n  type: string\n  title?: string\n  payload?: Record<string, unknown>\n  data?: unknown\n  id?: string\n}\n\nexport interface CardComponentProps {\n  card: Card\n  sendMessage?: (content: string) => Promise<void>\n  sessionId?: string\n}\n\nexport type CardComponent = ComponentType<CardComponentProps>\n\nexport class CardComponentRegistry {\n  private readonly components: Map<string, CardComponent>\n\n  constructor(initial?: Record<string, CardComponent> | Map<string, CardComponent>) {\n    if (initial instanceof Map) {\n      this.components = new Map(initial)\n    } else if (initial) {\n      this.components = new Map(Object.entries(initial))\n    } else {\n      this.components = new Map()\n    }\n  }\n\n  register(type: string, component: CardComponent): void {\n    this.components.set(type, component)\n  }\n\n  get(type: string): CardComponent | undefined {\n    return this.components.get(type)\n  }\n\n  has(type: string): boolean {\n    return this.components.has(type)\n  }\n\n  keys(): string[] {\n    return Array.from(this.components.keys())\n  }\n\n  clear(): void {\n    this.components.clear()\n  }\n\n  get size(): number {\n    return this.components.size\n  }\n}\n\nexport const cardRegistry = new CardComponentRegistry()\n\nexport interface ParseResult<T> {\n  ok: boolean\n  value?: T\n  error?: string\n}\n\nexport const CardJSON = {\n  safeParseJSON<T = unknown>(text: string): ParseResult<T> {\n    try {\n      const value = JSON.parse(text) as T\n      return { ok: true, value }\n    } catch (error) {\n      return {\n        ok: false,\n        error: error instanceof Error ? error.message : \"Unknown parsing error\",\n      }\n    }\n  },\n\n  toCardArray(value: unknown): Card[] | null {\n    if (\n      value &&\n      typeof value === \"object\" &&\n      \"type\" in (value as Record<string, unknown>) &&\n      typeof (value as { type?: unknown }).type === \"string\"\n    ) {\n      return [value as Card]\n    }\n\n    if (Array.isArray(value)) {\n      const cards = value.filter(\n        (item): item is Card =>\n          item &&\n          typeof item === \"object\" &&\n          \"type\" in (item as Record<string, unknown>) &&\n          typeof (item as { type?: unknown }).type === \"string\",\n      )\n      return cards.length > 0 ? cards : null\n    }\n\n    return null\n  },\n\n  isCardsLanguage(lang?: string): boolean {\n    return lang === \"card+json\"\n  },\n}\n"],"mappings":";AAkBO,IAAM,wBAAN,MAA4B;AAAA,EAChB;AAAA,EAEjB,YAAY,SAAsE;AAChF,QAAI,mBAAmB,KAAK;AAC1B,WAAK,aAAa,IAAI,IAAI,OAAO;AAAA,IACnC,WAAW,SAAS;AAClB,WAAK,aAAa,IAAI,IAAI,OAAO,QAAQ,OAAO,CAAC;AAAA,IACnD,OAAO;AACL,WAAK,aAAa,oBAAI,IAAI;AAAA,IAC5B;AAAA,EACF;AAAA,EAEA,SAAS,MAAc,WAAgC;AACrD,SAAK,WAAW,IAAI,MAAM,SAAS;AAAA,EACrC;AAAA,EAEA,IAAI,MAAyC;AAC3C,WAAO,KAAK,WAAW,IAAI,IAAI;AAAA,EACjC;AAAA,EAEA,IAAI,MAAuB;AACzB,WAAO,KAAK,WAAW,IAAI,IAAI;AAAA,EACjC;AAAA,EAEA,OAAiB;AACf,WAAO,MAAM,KAAK,KAAK,WAAW,KAAK,CAAC;AAAA,EAC1C;AAAA,EAEA,QAAc;AACZ,SAAK,WAAW,MAAM;AAAA,EACxB;AAAA,EAEA,IAAI,OAAe;AACjB,WAAO,KAAK,WAAW;AAAA,EACzB;AACF;AAEO,IAAM,eAAe,IAAI,sBAAsB;AAQ/C,IAAM,WAAW;AAAA,EACtB,cAA2B,MAA8B;AACvD,QAAI;AACF,YAAM,QAAQ,KAAK,MAAM,IAAI;AAC7B,aAAO,EAAE,IAAI,MAAM,MAAM;AAAA,IAC3B,SAAS,OAAO;AACd,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO,iBAAiB,QAAQ,MAAM,UAAU;AAAA,MAClD;AAAA,IACF;AAAA,EACF;AAAA,EAEA,YAAY,OAA+B;AACzC,QACE,SACA,OAAO,UAAU,YACjB,UAAW,SACX,OAAQ,MAA6B,SAAS,UAC9C;AACA,aAAO,CAAC,KAAa;AAAA,IACvB;AAEA,QAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,YAAM,QAAQ,MAAM;AAAA,QAClB,CAAC,SACC,QACA,OAAO,SAAS,YAChB,UAAW,QACX,OAAQ,KAA4B,SAAS;AAAA,MACjD;AACA,aAAO,MAAM,SAAS,IAAI,QAAQ;AAAA,IACpC;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB,MAAwB;AACtC,WAAO,SAAS;AAAA,EAClB;AACF;","names":[]}