@icanbwell/baileyai-chat-ui 0.2.1-pre.0

package/dist/index.d.ts

@@ -0,0 +1,366 @@
+import { Components } from 'react-markdown';
+import { JSX } from 'react';
+import { ReactNode } from 'react';
+
+export declare const BAILEY_CHART_PROMPT_FRAGMENT: string;
+
+export declare const BAILEY_TABLE_GRID_ROW_THRESHOLD = 5;
+
+export declare const BAILEYAI_CHAT_UI_VERSION: string;
+
+export declare interface BaileyChartDataset {
+    label: string;
+    data: number[] | Array<{
+        x: number;
+        y: number;
+    }>;
+}
+
+export declare interface BaileyChartSpec {
+    type: BaileyChartType;
+    title?: string;
+    data: {
+        labels?: string[];
+        datasets: BaileyChartDataset[];
+    };
+}
+
+export declare type BaileyChartType = 'bar' | 'line' | 'pie' | 'doughnut' | 'scatter';
+
+export declare interface BaileyChatInputMessage {
+    role: 'user' | 'assistant';
+    content: string;
+}
+
+export declare function BaileyChatPanel({ chat, placeholder, className, renderMessageActions, renderTable, renderChart, }: BaileyChatPanelProps): JSX.Element;
+
+export declare interface BaileyChatPanelProps extends BaileyMarkdownRenderers {
+    chat: UseBaileyChatResult;
+    placeholder?: string;
+    className?: string;
+    /** Renders next to the built-in copy button for a completed assistant message — a static,
+     *  per-message extension point for a host action (e.g. "regenerate", feedback buttons).
+     *  Content-derived actions (e.g. baileyai-skills-service's save-as-skill artifact UI) are a
+     *  host-side composition around useBaileyChat, not this prop — see the Phase 4 plan. */
+    renderMessageActions?: (message: BaileyMessage) => ReactNode;
+}
+
+export declare interface BaileyChatTransport {
+    streamChat(params: {
+        model: string;
+        instructions: string;
+        input: BaileyChatInputMessage[];
+        tools: BaileyMcpToolConfig[];
+        toolChoice?: BaileyToolChoice;
+        signal: AbortSignal;
+        onChunk: (text: string) => void;
+        onRequestId?: (requestId: string) => void;
+    }): Promise<{
+        status?: number;
+        text: string;
+        errorMessage?: string;
+    }>;
+}
+
+export declare interface BaileyLastRequest {
+    model: string;
+    systemPrompt: string;
+    messages: BaileyChatInputMessage[];
+    tools: BaileyMcpToolConfig[];
+    toolChoice?: BaileyToolChoice;
+    stream: true;
+    sentAt: number;
+    streamStats: BaileyStreamStats;
+    requestId?: string;
+    response?: {
+        content: string;
+    };
+}
+
+export declare interface BaileyMarkdownRenderers {
+    /** Renders a table once it exceeds BAILEY_TABLE_GRID_ROW_THRESHOLD rows. Omit to always
+     *  render the plain GFM <table> regardless of size. */
+    renderTable?: (data: {
+        headers: string[];
+        rows: BaileyTableCell[][];
+    }) => ReactNode;
+    /** Renders a validated ```chartjs code block. Omit to fall through to a plain <pre>. */
+    renderChart?: (spec: BaileyChartSpec) => ReactNode;
+}
+
+export declare interface BaileyMcpToolConfig {
+    type: 'mcp';
+    server_url: string;
+    server_label: string;
+}
+
+export declare interface BaileyMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    streaming?: boolean;
+}
+
+export declare interface BaileyOutputItem {
+    type: string;
+    name?: string;
+    arguments?: string;
+    output?: string;
+    is_error?: boolean;
+    runtime_seconds?: number;
+}
+
+export declare type BaileyStreamEvent = {
+    type: 'response.output_text.delta';
+    delta: string;
+} | {
+    type: 'response.output_text.done';
+} | {
+    type: 'response.output_item.added';
+    item: BaileyOutputItem;
+} | {
+    type: 'response.output_item.done';
+    item: BaileyOutputItem;
+} | {
+    type: 'task.progress';
+    status: string;
+    message?: string;
+} | {
+    type: 'response.created';
+} | {
+    type: 'response.completed';
+} | {
+    type: 'error';
+    message: string;
+} | {
+    type: 'info';
+    message: string;
+};
+
+export declare interface BaileyStreamStats {
+    chunkCount: number;
+    firstChunkAt: number | null;
+    lastChunkAt: number | null;
+}
+
+export declare interface BaileyTableCell {
+    text: string;
+    href?: string;
+}
+
+export declare type BaileyToolChoice = 'none' | 'auto' | 'required';
+
+export declare type BaileyTraceEvent = {
+    kind: 'tool_start';
+    name: string;
+    args?: string;
+    at: number;
+    turnSentAt: number;
+} | {
+    kind: 'tool_end';
+    name: string;
+    args?: string;
+    at: number;
+    turnSentAt: number;
+    output?: string;
+    isError?: boolean;
+    runtimeSeconds?: number;
+} | {
+    kind: 'pseudo_tool_call';
+    name: string;
+    args?: string;
+    at: number;
+    turnSentAt: number;
+} | {
+    kind: 'progress';
+    status: string;
+    message?: string;
+    at: number;
+    turnSentAt: number;
+} | {
+    kind: 'info';
+    message: string;
+    at: number;
+    turnSentAt: number;
+} | {
+    kind: 'error';
+    message: string;
+    at: number;
+    turnSentAt: number;
+    httpStatus?: number;
+    rawBody?: string;
+    source?: 'client-timeout';
+} | {
+    kind: 'raw';
+    eventType: string;
+    raw: string;
+    at: number;
+    turnSentAt: number;
+};
+
+export declare function BaileyTracePanel({ events, lastRequest, onClear }: BaileyTracePanelProps): JSX.Element | null;
+
+export declare interface BaileyTracePanelProps {
+    events: BaileyTraceEvent[];
+    lastRequest: BaileyLastRequest | null;
+    onClear: () => void;
+}
+
+export declare function CopyMarkdownButton({ markdown, className }: CopyMarkdownButtonProps): JSX.Element;
+
+export declare interface CopyMarkdownButtonProps {
+    markdown: string;
+    className?: string;
+}
+
+export declare function createBaileyMarkdownComponents({ renderTable, renderChart }?: BaileyMarkdownRenderers): Components;
+
+export declare function extractPseudoToolCalls(text: string): ExtractPseudoToolCallsResult;
+
+declare interface ExtractPseudoToolCallsResult {
+    /** `text` with every matched block removed. */
+    cleanedText: string;
+    /** Matches in document order. */
+    matches: PseudoToolCallMatch[];
+}
+
+export declare const extractTableData: (node: HastNode) => {
+    headers: string[];
+    rows: BaileyTableCell[][];
+} | null;
+
+export declare function formatTraceGap(ms: number): string;
+
+export declare function formatTraceTime(at: number): string;
+
+export declare interface HastNode {
+    type: string;
+    tagName?: string;
+    value?: string;
+    properties?: {
+        href?: string;
+    };
+    children?: HastNode[];
+}
+
+export declare function hasTraceFailure(events: BaileyTraceEvent[]): boolean;
+
+export declare const isSafeMarkdownUrl: (href: string) => boolean;
+
+export declare function joinInstructions(...parts: Array<string | undefined | null | false>): string;
+
+export declare const parseBaileyChartSpec: (raw: string) => BaileyChartSpec | null;
+
+export declare interface ParsedSseFrames {
+    events: BaileyStreamEvent[];
+    remainder: string;
+    done: boolean;
+}
+
+export declare function parseSseFrames(buffer: string): ParsedSseFrames;
+
+export declare interface PseudoToolCallMatch {
+    /** The tool name the model claimed to call, or 'search_tools' for a bare exploration block. */
+    name: string;
+    /** Raw argument text found inside the block, if any. */
+    args?: string;
+}
+
+export declare interface ResolvedToolCall {
+    /** The real tool name, unwrapped from the call_tool meta-tool if needed. */
+    name: string;
+    /** The real tool's arguments, or null if they couldn't be parsed. */
+    args: Record<string, unknown> | null;
+    /** True when this call was made indirectly via the call_tool meta-tool. */
+    viaCallTool: boolean;
+}
+
+export declare function resolveToolCall(name: string, argsJson: string | undefined): ResolvedToolCall;
+
+export declare const shouldUseGrid: (rows: BaileyTableCell[][]) => boolean;
+
+export declare function toTraceRows(events: BaileyTraceEvent[]): TraceRow[];
+
+export declare function toTraceSegments(rows: TraceRow[]): TraceSegment[];
+
+export declare const TRACE_KIND_LABEL: Record<BaileyTraceEvent['kind'], string>;
+
+export declare function traceEventArgsDetail(event: BaileyTraceEvent, resolved?: ResolvedToolCall | null): string | null;
+
+export declare function traceEventHint(event: BaileyTraceEvent): string;
+
+export declare function traceEventOutputDetail(event: BaileyTraceEvent): string | null;
+
+export declare function traceEventRawDetail(event: BaileyTraceEvent): string | null;
+
+export declare function traceEventSummary(event: BaileyTraceEvent, resolved?: ResolvedToolCall | null): string;
+
+export declare function traceEventToolName(event: BaileyTraceEvent, resolved?: ResolvedToolCall | null): string | null;
+
+export declare interface TraceRow {
+    key: string;
+    kind: BaileyTraceEvent['kind'];
+    toolName: string | null;
+    isToolStart: boolean;
+    failed: boolean;
+    time: string;
+    gapMs: number;
+    label: string;
+    summary: string;
+    argsDetail: string | null;
+    outputDetail: string | null;
+    rawDetail: string | null;
+}
+
+export declare type TraceSegment = {
+    type: 'group';
+    toolName: string;
+    rows: TraceRow[];
+} | {
+    type: 'single';
+    row: TraceRow;
+};
+
+export declare function traceSummaryLine(events: BaileyTraceEvent[]): string;
+
+export declare const useBaileyChat: ({ transport, model, instructions, tools, toolChoice, firstUserMessagePrefix, onAssistantMessageComplete, idleTimeoutMs, }: UseBaileyChatConfig) => UseBaileyChatResult;
+
+export declare interface UseBaileyChatConfig {
+    transport: BaileyChatTransport;
+    model: string;
+    instructions: string;
+    /** Passed verbatim to transport.streamChat on every turn. Memoize this array (e.g. via
+     *  useMemo) to avoid recreating send/stop/retryLast on every render. */
+    tools?: BaileyMcpToolConfig[];
+    toolChoice?: BaileyToolChoice;
+    /** Prepended to only the very first user message of the conversation (not the system
+     *  prompt) — e.g. a slash-command-style skill/context marker a host wants visible in the
+     *  transcript itself. Never applied to any later turn. */
+    firstUserMessagePrefix?: string;
+    /** Fires once a turn's assistant message finishes successfully, with its final content and
+     *  the trace events produced during that turn. Lets a host post-process a response — e.g.
+     *  parsing `propose_skill` tool calls / fenced artifact blocks out of it to drive a
+     *  save-as-skill UI — without useBaileyChat needing to know anything about what a host does
+     *  with it. Not called for a turn that errors or is stopped. */
+    onAssistantMessageComplete?: (message: BaileyMessage, turnTraceEvents: BaileyTraceEvent[]) => void | Promise<void>;
+    /** Aborts a turn that goes this long without a chunk arriving, so a stuck backend doesn't
+     *  hang the UI forever. Resets on every chunk. Defaults to 150s, matching Bailey's own
+     *  upstream idle timeout so a well-behaved backend error has a chance to arrive first. */
+    idleTimeoutMs?: number;
+}
+
+export declare interface UseBaileyChatResult {
+    messages: BaileyMessage[];
+    traceEvents: BaileyTraceEvent[];
+    lastRequest: BaileyLastRequest | null;
+    status: 'idle' | 'streaming' | 'error';
+    error: string | null;
+    send: (text: string) => void;
+    stop: () => void;
+    retryLast: () => void;
+    clearTrace: () => void;
+    /** Dismisses the current error without resending — distinct from retryLast, which resends. */
+    clearError: () => void;
+}
+
+export { }

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@icanbwell/baileyai-chat-ui",
+  "version": "0.2.1-pre.0",
+  "description": "Shared React chat UI and streaming logic for Bailey, the icanbwell AI assistant",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/icanbwell/baileyai-chat-ui.git"
+  },
+  "homepage": "https://github.com/icanbwell/baileyai-chat-ui#readme",
+  "bugs": {
+    "url": "https://github.com/icanbwell/baileyai-chat-ui/issues"
+  },
+  "type": "module",
+  "main": "./dist/baileyai-chat-ui.cjs",
+  "module": "./dist/baileyai-chat-ui.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/baileyai-chat-ui.js",
+      "require": "./dist/baileyai-chat-ui.cjs"
+    },
+    "./styles.css": "./dist/baileyai-chat-ui.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "packageManager": "yarn@4.14.1",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev/ --config vite.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p dev/tsconfig.json --noEmit",
+    "lint": "eslint \"src/**/*.{ts,tsx}\" \"dev/**/*.{ts,tsx}\" \"vite.config.ts\" \"*.js\""
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.4",
+    "jsdom": "^29.1.1",
+    "postcss": "^8.5.23",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.10"
+  }
+}