@extrachill/chat 0.5.0 → 0.6.0

package/dist/components/DiffCard.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+/**
+ * Portable diff visualization card.
+ *
+ * Renders a before/after comparison with word-level `<ins>` / `<del>` tags
+ * and Accept / Reject buttons. Pure React — no Gutenberg or WordPress
+ * dependencies. Works anywhere `@extrachill/chat` is consumed.
+ *
+ * @example
+ * ```tsx
+ * <DiffCard
+ *   diff={{
+ *     diffId: 'abc123',
+ *     diffType: 'edit',
+ *     originalContent: 'Hello world',
+ *     replacementContent: 'Hello universe',
+ *   }}
+ *   onAccept={(id) => apiFetch({ path: `/resolve/${id}`, method: 'POST', data: { action: 'accept' } })}
+ *   onReject={(id) => apiFetch({ path: `/resolve/${id}`, method: 'POST', data: { action: 'reject' } })}
+ * />
+ * ```
+ */
+export function DiffCard({ diff, onAccept, onReject, loading = false, className, }) {
+    const [status, setStatus] = useState(diff.status ?? 'pending');
+    const baseClass = 'ec-chat-diff';
+    const classes = [
+        baseClass,
+        status !== 'pending' ? `${baseClass}--${status}` : '',
+        className,
+    ].filter(Boolean).join(' ');
+    const handleAccept = () => {
+        setStatus('accepted');
+        onAccept?.(diff.diffId);
+    };
+    const handleReject = () => {
+        setStatus('rejected');
+        onReject?.(diff.diffId);
+    };
+    const diffHtml = renderDiff(diff);
+    return (_jsxs("div", { className: classes, children: [_jsxs("div", { className: `${baseClass}__header`, children: [_jsx("span", { className: `${baseClass}__icon`, children: status === 'accepted' ? '✓' : status === 'rejected' ? '✗' : '⟳' }), _jsx("span", { className: `${baseClass}__label`, children: diff.summary ?? formatDiffLabel(diff.diffType) }), status !== 'pending' && (_jsx("span", { className: `${baseClass}__status`, children: status === 'accepted' ? 'Applied' : 'Rejected' }))] }), diff.insertionPoint && (_jsx("div", { className: `${baseClass}__meta`, children: diff.insertionPoint })), _jsx("div", { className: `${baseClass}__content`, dangerouslySetInnerHTML: { __html: diffHtml } }), status === 'pending' && (_jsxs("div", { className: `${baseClass}__actions`, children: [_jsx("button", { type: "button", className: `${baseClass}__accept`, onClick: handleAccept, disabled: loading, children: "Accept" }), _jsx("button", { type: "button", className: `${baseClass}__reject`, onClick: handleReject, disabled: loading, children: "Reject" })] }))] }));
+}
+/**
+ * Render diff HTML based on the diff type.
+ *
+ * For 'edit' diffs: word-level comparison between original and replacement.
+ * For 'replace' diffs: word-level comparison between original and replacement.
+ * For 'insert' diffs: everything is new (all `<ins>`).
+ */
+function renderDiff(diff) {
+    const { diffType, originalContent, replacementContent } = diff;
+    if (diffType === 'insert') {
+        return `<ins class="ec-chat-diff__added">${escapeHtml(replacementContent)}</ins>`;
+    }
+    // Both 'edit' and 'replace' get word-level diff
+    return createWordLevelDiff(originalContent, replacementContent);
+}
+/**
+ * Create a word-level diff between two strings.
+ *
+ * Splits both strings into words, runs a longest-common-subsequence (LCS)
+ * alignment, and wraps removed words in `<del>` and added words in `<ins>`.
+ * Consecutive unchanged words are emitted as-is.
+ */
+function createWordLevelDiff(oldText, newText) {
+    if (oldText === newText) {
+        return escapeHtml(newText);
+    }
+    const oldWords = tokenize(oldText);
+    const newWords = tokenize(newText);
+    // LCS table
+    const m = oldWords.length;
+    const n = newWords.length;
+    const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    for (let i = 1; i <= m; i++) {
+        for (let j = 1; j <= n; j++) {
+            if (oldWords[i - 1] === newWords[j - 1]) {
+                dp[i][j] = dp[i - 1][j - 1] + 1;
+            }
+            else {
+                dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+            }
+        }
+    }
+    // Backtrack to produce diff operations
+    const ops = [];
+    let i = m;
+    let j = n;
+    while (i > 0 || j > 0) {
+        if (i > 0 && j > 0 && oldWords[i - 1] === newWords[j - 1]) {
+            ops.unshift({ type: 'keep', text: oldWords[i - 1] });
+            i--;
+            j--;
+        }
+        else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+            ops.unshift({ type: 'ins', text: newWords[j - 1] });
+            j--;
+        }
+        else {
+            ops.unshift({ type: 'del', text: oldWords[i - 1] });
+            i--;
+        }
+    }
+    // Merge consecutive same-type ops into spans
+    let html = '';
+    let currentType = null;
+    let buffer = [];
+    const flush = () => {
+        if (buffer.length === 0)
+            return;
+        const text = buffer.join(' ');
+        if (currentType === 'del') {
+            html += `<del class="ec-chat-diff__removed">${escapeHtml(text)}</del>`;
+        }
+        else if (currentType === 'ins') {
+            html += `<ins class="ec-chat-diff__added">${escapeHtml(text)}</ins>`;
+        }
+        else {
+            html += escapeHtml(text);
+        }
+        buffer = [];
+    };
+    for (const op of ops) {
+        if (op.type !== currentType) {
+            flush();
+            currentType = op.type;
+        }
+        buffer.push(op.text);
+    }
+    flush();
+    return html;
+}
+/**
+ * Tokenize text into words, preserving whitespace as separate tokens
+ * so the diff output is readable.
+ */
+function tokenize(text) {
+    return text.split(/(\s+)/).filter(Boolean);
+}
+/**
+ * Escape HTML special characters.
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+/**
+ * Human-readable label for a diff type.
+ */
+function formatDiffLabel(diffType) {
+    switch (diffType) {
+        case 'edit':
+            return 'Content edit';
+        case 'replace':
+            return 'Content replacement';
+        case 'insert':
+            return 'New content';
+    }
+}

package/dist/components/ErrorBoundary.d.ts

@@ -21,7 +21,7 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     reset: () => void;
-    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 }
 export {};
 //# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { ChatMessage, type ChatMessageProps } from './ChatMessage.tsx';
 export { ChatMessages, type ChatMessagesProps } from './ChatMessages.tsx';
 export { ChatInput, type ChatInputProps } from './ChatInput.tsx';
 export { ToolMessage, type ToolMessageProps, type ToolGroup } from './ToolMessage.tsx';
+export { DiffCard, type DiffCardProps, type DiffData } from './DiffCard.tsx';
 export { TypingIndicator, type TypingIndicatorProps } from './TypingIndicator.tsx';
 export { SessionSwitcher, type SessionSwitcherProps } from './SessionSwitcher.tsx';
 export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary.tsx';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/index.js

@@ -2,6 +2,7 @@ export { ChatMessage } from "./ChatMessage.js";
 export { ChatMessages } from "./ChatMessages.js";
 export { ChatInput } from "./ChatInput.js";
 export { ToolMessage } from "./ToolMessage.js";
+export { DiffCard } from "./DiffCard.js";
 export { TypingIndicator } from "./TypingIndicator.js";
 export { SessionSwitcher } from "./SessionSwitcher.js";
 export { ErrorBoundary } from "./ErrorBoundary.js";

package/dist/diff.d.ts

@@ -0,0 +1,27 @@
+import type { ToolGroup } from './components/ToolMessage.tsx';
+export type CanonicalDiffType = 'edit' | 'replace' | 'insert';
+export type CanonicalDiffStatus = 'pending' | 'accepted' | 'rejected';
+export interface CanonicalDiffItem {
+    blockIndex?: number;
+    originalContent?: string;
+    replacementContent?: string;
+}
+export interface CanonicalDiffEditorData {
+    [key: string]: unknown;
+}
+export interface CanonicalDiffData {
+    diffId: string;
+    diffType: CanonicalDiffType;
+    originalContent: string;
+    replacementContent: string;
+    status?: CanonicalDiffStatus;
+    summary?: string;
+    items?: CanonicalDiffItem[];
+    position?: string;
+    insertionPoint?: string;
+    editor?: CanonicalDiffEditorData;
+}
+export declare function parseCanonicalDiff(value: unknown): CanonicalDiffData | null;
+export declare function parseCanonicalDiffFromJson(json: string): CanonicalDiffData | null;
+export declare function parseCanonicalDiffFromToolGroup(group: ToolGroup): CanonicalDiffData | null;
+//# sourceMappingURL=diff.d.ts.map

package/dist/diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../src/diff.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAiB;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,uBAAuB;IACvC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CACjC;AA0CD,wBAAgB,kBAAkB,CAAE,KAAK,EAAE,OAAO,GAAI,iBAAiB,GAAG,IAAI,CA0E7E;AAED,wBAAgB,0BAA0B,CAAE,IAAI,EAAE,MAAM,GAAI,iBAAiB,GAAG,IAAI,CAMnF;AAED,wBAAgB,+BAA+B,CAAE,KAAK,EAAE,SAAS,GAAI,iBAAiB,GAAG,IAAI,CAM5F"}

package/dist/diff.js

@@ -0,0 +1,109 @@
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function normalizeItem(item) {
+    if (!isRecord(item)) {
+        return null;
+    }
+    const blockIndex = typeof item.blockIndex === 'number'
+        ? item.blockIndex
+        : typeof item.block_index === 'number'
+            ? item.block_index
+            : undefined;
+    const originalContent = typeof item.originalContent === 'string'
+        ? item.originalContent
+        : typeof item.original_content === 'string'
+            ? item.original_content
+            : undefined;
+    const replacementContent = typeof item.replacementContent === 'string'
+        ? item.replacementContent
+        : typeof item.replacement_content === 'string'
+            ? item.replacement_content
+            : undefined;
+    if (blockIndex === undefined && originalContent === undefined && replacementContent === undefined) {
+        return null;
+    }
+    return {
+        blockIndex,
+        originalContent,
+        replacementContent,
+    };
+}
+export function parseCanonicalDiff(value) {
+    if (!isRecord(value)) {
+        return null;
+    }
+    const container = isRecord(value.data) ? value.data : value;
+    const rawDiff = isRecord(container.diff) ? container.diff : container;
+    const diffId = typeof rawDiff.diffId === 'string'
+        ? rawDiff.diffId
+        : typeof rawDiff.diff_id === 'string'
+            ? rawDiff.diff_id
+            : typeof container.diff_id === 'string'
+                ? container.diff_id
+                : '';
+    const diffType = rawDiff.diffType === 'replace' || rawDiff.diffType === 'insert'
+        ? rawDiff.diffType
+        : rawDiff.diffType === 'edit'
+            ? 'edit'
+            : rawDiff.diff_type === 'replace' || rawDiff.diff_type === 'insert'
+                ? rawDiff.diff_type
+                : 'edit';
+    const originalContent = typeof rawDiff.originalContent === 'string'
+        ? rawDiff.originalContent
+        : typeof rawDiff.original_content === 'string'
+            ? rawDiff.original_content
+            : '';
+    const replacementContent = typeof rawDiff.replacementContent === 'string'
+        ? rawDiff.replacementContent
+        : typeof rawDiff.replacement_content === 'string'
+            ? rawDiff.replacement_content
+            : '';
+    if (!diffId && !originalContent && !replacementContent) {
+        return null;
+    }
+    const itemsSource = Array.isArray(rawDiff.items)
+        ? rawDiff.items
+        : Array.isArray(rawDiff.edits)
+            ? rawDiff.edits
+            : Array.isArray(rawDiff.replacements)
+                ? rawDiff.replacements
+                : undefined;
+    const items = itemsSource
+        ?.map(normalizeItem)
+        .filter((item) => item !== null);
+    const summary = typeof rawDiff.summary === 'string'
+        ? rawDiff.summary
+        : typeof container.message === 'string'
+            ? container.message
+            : undefined;
+    const status = rawDiff.status === 'accepted' || rawDiff.status === 'rejected' || rawDiff.status === 'pending'
+        ? rawDiff.status
+        : undefined;
+    return {
+        diffId,
+        diffType,
+        originalContent,
+        replacementContent,
+        status,
+        summary,
+        items: items && items.length > 0 ? items : undefined,
+        position: typeof rawDiff.position === 'string' ? rawDiff.position : undefined,
+        insertionPoint: typeof rawDiff.insertionPoint === 'string' ? rawDiff.insertionPoint : undefined,
+        editor: isRecord(rawDiff.editor) ? rawDiff.editor : undefined,
+    };
+}
+export function parseCanonicalDiffFromJson(json) {
+    try {
+        return parseCanonicalDiff(JSON.parse(json));
+    }
+    catch {
+        return null;
+    }
+}
+export function parseCanonicalDiffFromToolGroup(group) {
+    if (!group.resultMessage) {
+        return null;
+    }
+    return parseCanonicalDiffFromJson(group.resultMessage.content);
+}

package/dist/index.d.ts

@@ -3,14 +3,19 @@ export type { FetchFn, FetchOptions, ChatApiConfig, SendResult, ContinueResult,
 export { sendMessage, continueResponse, listSessions, loadSession, deleteSession, } from './api.ts';
 export { normalizeMessage, normalizeConversation, normalizeSession } from './normalizer.ts';
 export { markdownToHtml } from './markdown.ts';
+export { formatChatAsMarkdown, copyChatAsMarkdown } from './transcript.ts';
+export { parseCanonicalDiff, parseCanonicalDiffFromJson, parseCanonicalDiffFromToolGroup, type CanonicalDiffData, type CanonicalDiffEditorData, type CanonicalDiffItem, type CanonicalDiffStatus, type CanonicalDiffType, } from './diff.ts';
+export { getOrCreateClientContextRegistry, registerClientContextProvider, getClientContextMetadata, useClientContextMetadata, type ClientContextProvider, type ClientContextProviderSnapshot, type ClientContextSnapshot, type ClientContextRegistry, } from './client-context.ts';
 export { ChatMessage as ChatMessageComponent, type ChatMessageProps, } from './components/ChatMessage.tsx';
 export { ChatMessages, type ChatMessagesProps, } from './components/ChatMessages.tsx';
 export { ChatInput, type ChatInputProps, } from './components/ChatInput.tsx';
+export { CopyTranscriptButton, type CopyTranscriptButtonProps, } from './components/CopyTranscriptButton.tsx';
 export { ToolMessage, type ToolMessageProps, type ToolGroup, } from './components/ToolMessage.tsx';
+export { DiffCard, type DiffCardProps, type DiffData, } from './components/DiffCard.tsx';
 export { TypingIndicator, type TypingIndicatorProps, } from './components/TypingIndicator.tsx';
 export { SessionSwitcher, type SessionSwitcherProps, } from './components/SessionSwitcher.tsx';
 export { ErrorBoundary, type ErrorBoundaryProps, } from './components/ErrorBoundary.tsx';
 export { AvailabilityGate, type AvailabilityGateProps, } from './components/AvailabilityGate.tsx';
 export { useChat, type UseChatOptions, type UseChatReturn, } from './hooks/useChat.ts';
-export { Chat, type ChatProps } from './Chat.tsx';
+export { Chat, type ChatProps, type ChatSessionUi } from './Chat.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,eAAe,EACf,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,UAAU,EACV,eAAe,GACf,MAAM,kBAAkB,CAAC;AAG1B,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACjH,OAAO,EACN,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAG5F,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EACN,WAAW,IAAI,oBAAoB,EACnC,KAAK,gBAAgB,GACrB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACN,YAAY,EACZ,KAAK,iBAAiB,GACtB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EACN,SAAS,EACT,KAAK,cAAc,GACnB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACN,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,SAAS,GACd,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACN,aAAa,EACb,KAAK,kBAAkB,GACvB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACN,gBAAgB,EAChB,KAAK,qBAAqB,GAC1B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,aAAa,GAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,eAAe,EACf,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,UAAU,EACV,eAAe,GACf,MAAM,kBAAkB,CAAC;AAG1B,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACjH,OAAO,EACN,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAG5F,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG3E,OAAO,EACN,kBAAkB,EAClB,0BAA0B,EAC1B,+BAA+B,EAC/B,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,GACtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EACN,gCAAgC,EAChC,6BAA6B,EAC7B,wBAAwB,EACxB,wBAAwB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,EAClC,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC1B,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EACN,WAAW,IAAI,oBAAoB,EACnC,KAAK,gBAAgB,GACrB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACN,YAAY,EACZ,KAAK,iBAAiB,GACtB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EACN,SAAS,EACT,KAAK,cAAc,GACnB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACN,oBAAoB,EACpB,KAAK,yBAAyB,GAC9B,MAAM,uCAAuC,CAAC;AAE/C,OAAO,EACN,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,SAAS,GACd,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACN,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,QAAQ,GACb,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACN,aAAa,EACb,KAAK,kBAAkB,GACvB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACN,gBAAgB,EAChB,KAAK,qBAAqB,GAC1B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,aAAa,GAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -3,11 +3,19 @@ export { sendMessage, continueResponse, listSessions, loadSession, deleteSession
 export { normalizeMessage, normalizeConversation, normalizeSession } from "./normalizer.js";
 // Markdown
 export { markdownToHtml } from "./markdown.js";
+// Transcript
+export { formatChatAsMarkdown, copyChatAsMarkdown } from "./transcript.js";
+// Diff helpers
+export { parseCanonicalDiff, parseCanonicalDiffFromJson, parseCanonicalDiffFromToolGroup, } from "./diff.js";
+// Client context
+export { getOrCreateClientContextRegistry, registerClientContextProvider, getClientContextMetadata, useClientContextMetadata, } from "./client-context.js";
 // Components
 export { ChatMessage as ChatMessageComponent, } from "./components/ChatMessage.js";
 export { ChatMessages, } from "./components/ChatMessages.js";
 export { ChatInput, } from "./components/ChatInput.js";
+export { CopyTranscriptButton, } from "./components/CopyTranscriptButton.js";
 export { ToolMessage, } from "./components/ToolMessage.js";
+export { DiffCard, } from "./components/DiffCard.js";
 export { TypingIndicator, } from "./components/TypingIndicator.js";
 export { SessionSwitcher, } from "./components/SessionSwitcher.js";
 export { ErrorBoundary, } from "./components/ErrorBoundary.js";

package/dist/transcript.d.ts

@@ -0,0 +1,4 @@
+import type { ChatMessage } from './types/index.ts';
+export declare function formatChatAsMarkdown(messages: ChatMessage[]): string;
+export declare function copyChatAsMarkdown(messages: ChatMessage[]): Promise<string>;
+//# sourceMappingURL=transcript.d.ts.map

package/dist/transcript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transcript.d.ts","sourceRoot":"","sources":["../src/transcript.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,wBAAgB,oBAAoB,CAAE,QAAQ,EAAE,WAAW,EAAE,GAAI,MAAM,CA0BtE;AAED,wBAAsB,kBAAkB,CAAE,QAAQ,EAAE,WAAW,EAAE,GAAI,OAAO,CAAE,MAAM,CAAE,CAUrF"}

package/dist/transcript.js

@@ -0,0 +1,32 @@
+export function formatChatAsMarkdown(messages) {
+    return messages
+        .filter((message) => {
+        if (message.role === 'system' || message.role === 'tool_call') {
+            return false;
+        }
+        return true;
+    })
+        .map((message) => {
+        const timestamp = message.timestamp
+            ? new Date(message.timestamp).toLocaleString()
+            : '';
+        const timestampStr = timestamp ? ` (${timestamp})` : '';
+        if (message.role === 'tool_result') {
+            const toolName = message.toolResult?.toolName ?? 'Tool';
+            const success = message.toolResult?.success;
+            const status = success === false ? 'FAILED' : 'SUCCESS';
+            return `**Tool Response (${toolName} - ${status})${timestampStr}:**\n${message.content}`;
+        }
+        const role = message.role === 'user' ? 'User' : 'Assistant';
+        return `**${role}${timestampStr}:**\n${message.content}`;
+    })
+        .join('\n\n---\n\n');
+}
+export async function copyChatAsMarkdown(messages) {
+    const markdown = formatChatAsMarkdown(messages);
+    if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+        throw new Error('Clipboard API is not available.');
+    }
+    await navigator.clipboard.writeText(markdown);
+    return markdown;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/chat",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Chat UI components with built-in REST API client. Speaks the standard chat message format natively.",
   "type": "module",
   "main": "./dist/index.js",

package/src/Chat.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import type { ChatMessage as ChatMessageType, ContentFormat } from './types/index.ts';
 import type { FetchFn } from './api.ts';
+import type { ToolGroup } from './components/ToolMessage.tsx';
 import { useChat, type UseChatOptions } from './hooks/useChat.ts';
 import { ErrorBoundary } from './components/ErrorBoundary.tsx';
 import { AvailabilityGate } from './components/AvailabilityGate.tsx';
@@ -8,6 +9,10 @@ import { ChatMessages } from './components/ChatMessages.tsx';
 import { ChatInput } from './components/ChatInput.tsx';
 import { TypingIndicator } from './components/TypingIndicator.tsx';
 import { SessionSwitcher } from './components/SessionSwitcher.tsx';
+import { CopyTranscriptButton } from './components/CopyTranscriptButton.tsx';
+import type { UseChatReturn } from './hooks/useChat.ts';
+
+export type ChatSessionUi = 'list' | 'none';
 
 export interface ChatProps {
 	/**
@@ -32,6 +37,14 @@ export interface ChatProps {
 	showTools?: boolean;
 	/** Map of tool function names to friendly display labels. */
 	toolNames?: Record<string, string>;
+	/**
+	 * Custom renderers for specific tool names.
+	 *
+	 * Map tool function names to React render functions. When a tool group
+	 * matches a registered name, the custom renderer is used instead of
+	 * the default ToolMessage JSON display.
+	 */
+	toolRenderers?: Record<string, (group: ToolGroup) => ReactNode>;
 	/** Placeholder text for the input. */
 	placeholder?: string;
 	/** Content shown when conversation is empty. */
@@ -50,12 +63,27 @@ export interface ChatProps {
 	className?: string;
 	/** Whether to show the session switcher. Defaults to true. */
 	showSessions?: boolean;
+	/** Session UI mode. 'list' renders the built-in switcher, 'none' lets the consumer render its own. */
+	sessionUi?: ChatSessionUi;
 	/** Label shown during multi-turn processing. */
 	processingLabel?: (turnCount: number) => string;
 	/** Whether to show the attachment button in the input. Defaults to true. */
 	allowAttachments?: boolean;
 	/** Accepted file types for attachments. Defaults to 'image/*,video/*'. */
 	acceptFileTypes?: string;
+	/**
+	 * Arbitrary metadata forwarded to the backend with each message.
+	 * Use for client-side context injection (e.g. `{ client_context: { tab: 'compose', postId: 123 } }`).
+	 */
+	metadata?: Record<string, unknown>;
+	/** Whether to show a built-in copy transcript button. Defaults to false. */
+	showCopyTranscript?: boolean;
+	/** Label for the built-in copy transcript button. */
+	copyTranscriptLabel?: string;
+	/** Label shown after the transcript is copied. */
+	copyTranscriptCopiedLabel?: string;
+	/** Optional custom header/actions area rendered above messages with live chat state. */
+	renderHeader?: ( chat: UseChatReturn ) => ReactNode;
 }
 
 /**
@@ -89,6 +117,7 @@ export function Chat({
 	renderContent,
 	showTools = true,
 	toolNames,
+	toolRenderers,
 	placeholder,
 	emptyState,
 	initialMessages,
@@ -98,9 +127,15 @@ export function Chat({
 	onMessage,
 	className,
 	showSessions = true,
+	sessionUi = 'list',
 	processingLabel,
 	allowAttachments = true,
 	acceptFileTypes,
+	metadata,
+	showCopyTranscript = false,
+	copyTranscriptLabel,
+	copyTranscriptCopiedLabel,
+	renderHeader,
 }: ChatProps) {
 	const chat = useChat({
 		basePath,
@@ -111,6 +146,7 @@ export function Chat({
 		maxContinueTurns,
 		onError,
 		onMessage,
+		metadata,
 	});
 
 	const baseClass = 'ec-chat';
@@ -120,7 +156,19 @@ export function Chat({
 		<ErrorBoundary onError={onError ? (err) => onError(err) : undefined}>
 			<div className={classes}>
 				<AvailabilityGate availability={chat.availability}>
-					{showSessions && (
+					{renderHeader?.( chat )}
+
+					{showCopyTranscript && (
+						<div className="ec-chat__actions">
+							<CopyTranscriptButton
+								messages={chat.messages}
+								label={copyTranscriptLabel}
+								copiedLabel={copyTranscriptCopiedLabel}
+							/>
+						</div>
+					)}
+
+					{showSessions && sessionUi === 'list' && (
 						<SessionSwitcher
 							sessions={chat.sessions}
 							activeSessionId={chat.sessionId ?? undefined}
@@ -131,14 +179,15 @@ export function Chat({
 						/>
 					)}
 
-					<ChatMessages
-						messages={chat.messages}
-						contentFormat={contentFormat}
-						renderContent={renderContent}
-						showTools={showTools}
-						toolNames={toolNames}
-						emptyState={emptyState}
-					/>
+				<ChatMessages
+					messages={chat.messages}
+					contentFormat={contentFormat}
+					renderContent={renderContent}
+					showTools={showTools}
+					toolNames={toolNames}
+					toolRenderers={toolRenderers}
+					emptyState={emptyState}
+				/>
 
 					<TypingIndicator
 						visible={chat.isLoading}