@extrachill/chat 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.6.0] - 2026-03-25
+
+### Added
+- add DiffCard component and toolRenderers prop for custom tool rendering
+
+## [0.5.1] - 2026-03-24
+
+### Changed
+- add metadata prop to Chat component for client context injection
+
 ## [0.5.0] - 2026-03-24
 
 ### Added

package/README.md

@@ -68,7 +68,7 @@ Override CSS custom properties on `.ec-chat` to match your design system:
 ## Consumers
 
 - **extrachill-studio** — Studio Chat tab (agent_id=5)
-- **extrachill-chat** — chat.extrachill.com frontend
+- **extrachill-roadie** — Portable floating agent chat
 - **data-machine** — Admin chat sidebar
 
 ## License

package/css/chat.css

@@ -79,6 +79,35 @@
 	height: 100%;
 }
 
+.ec-chat__actions {
+	display: flex;
+	justify-content: flex-end;
+	padding: 8px 16px 0;
+	gap: 8px;
+}
+
+.ec-chat-copy {
+	appearance: none;
+	border: 1px solid var(--ec-chat-border);
+	background: var(--ec-chat-input-bg);
+	color: var(--ec-chat-text);
+	border-radius: 999px;
+	padding: 6px 12px;
+	font: inherit;
+	font-size: 12px;
+	cursor: pointer;
+	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+}
+
+.ec-chat-copy:hover:not(:disabled) {
+	background: var(--ec-chat-session-hover-bg);
+}
+
+.ec-chat-copy:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
 /* ============================================
    Chat Messages Container
    ============================================ */
@@ -170,10 +199,16 @@
 .ec-chat-message__bubble h2 { font-size: 1.15em; }
 .ec-chat-message__bubble h3 { font-size: 1.05em; }
 
-.ec-chat-message__bubble ul,
+.ec-chat-message__bubble ul {
+	margin: 6px 0;
+	padding-left: 1.5em;
+	list-style: disc;
+}
+
 .ec-chat-message__bubble ol {
 	margin: 6px 0;
 	padding-left: 1.5em;
+	list-style: decimal;
 }
 
 .ec-chat-message__bubble li {
@@ -820,3 +855,151 @@
 	top: -4px;
 	right: -4px;
 }
+
+/* ============================================
+   Diff Card
+   ============================================ */
+
+.ec-chat-diff {
+	--ec-chat-diff-added-bg: #dcfce7;
+	--ec-chat-diff-added-text: #166534;
+	--ec-chat-diff-removed-bg: #fee2e2;
+	--ec-chat-diff-removed-text: #991b1b;
+	--ec-chat-diff-accept-bg: #16a34a;
+	--ec-chat-diff-accept-text: #ffffff;
+	--ec-chat-diff-reject-bg: transparent;
+	--ec-chat-diff-reject-text: var(--ec-chat-text-muted);
+	--ec-chat-diff-reject-border: var(--ec-chat-border);
+
+	margin: 4px 0;
+	border: 1px solid var(--ec-chat-tool-border);
+	border-radius: 8px;
+	background: var(--ec-chat-tool-bg);
+	overflow: hidden;
+	font-size: 13px;
+}
+
+.ec-chat-diff--accepted {
+	border-color: var(--ec-chat-diff-accept-bg);
+}
+
+.ec-chat-diff--rejected {
+	opacity: 0.6;
+}
+
+.ec-chat-diff__header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--ec-chat-tool-border);
+}
+
+.ec-chat-diff__icon {
+	flex-shrink: 0;
+	font-size: 14px;
+}
+
+.ec-chat-diff--accepted .ec-chat-diff__icon {
+	color: var(--ec-chat-diff-accept-bg);
+}
+
+.ec-chat-diff--rejected .ec-chat-diff__icon {
+	color: var(--ec-chat-tool-error);
+}
+
+.ec-chat-diff__label {
+	flex: 1;
+	font-weight: 500;
+}
+
+.ec-chat-diff__status {
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--ec-chat-text-muted);
+}
+
+.ec-chat-diff__meta {
+	padding: 0 12px 8px;
+	font-size: 12px;
+	color: var(--ec-chat-text-muted);
+	border-bottom: 1px solid var(--ec-chat-tool-border);
+}
+
+.ec-chat-diff__content {
+	padding: 10px 12px;
+	line-height: 1.6;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+}
+
+.ec-chat-diff__added {
+	background: var(--ec-chat-diff-added-bg);
+	color: var(--ec-chat-diff-added-text);
+	text-decoration: none;
+	border-radius: 2px;
+	padding: 1px 2px;
+}
+
+.ec-chat-diff__removed {
+	background: var(--ec-chat-diff-removed-bg);
+	color: var(--ec-chat-diff-removed-text);
+	text-decoration: line-through;
+	border-radius: 2px;
+	padding: 1px 2px;
+}
+
+.ec-chat-diff__actions {
+	display: flex;
+	gap: 8px;
+	padding: 8px 12px;
+	border-top: 1px solid var(--ec-chat-tool-border);
+}
+
+.ec-chat-diff__accept {
+	padding: 6px 16px;
+	border: none;
+	border-radius: 6px;
+	background: var(--ec-chat-diff-accept-bg);
+	color: var(--ec-chat-diff-accept-text);
+	font-family: inherit;
+	font-size: 13px;
+	font-weight: 500;
+	cursor: pointer;
+	transition: opacity 0.15s;
+}
+
+.ec-chat-diff__accept:hover:not(:disabled) {
+	opacity: 0.9;
+}
+
+.ec-chat-diff__accept:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.ec-chat-diff__reject {
+	padding: 6px 16px;
+	border: 1px solid var(--ec-chat-diff-reject-border);
+	border-radius: 6px;
+	background: var(--ec-chat-diff-reject-bg);
+	color: var(--ec-chat-diff-reject-text);
+	font-family: inherit;
+	font-size: 13px;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+}
+
+.ec-chat-diff__reject:hover:not(:disabled) {
+	background: var(--ec-chat-diff-removed-bg);
+	color: var(--ec-chat-diff-removed-text);
+}
+
+.ec-chat-diff__reject:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}

package/dist/Chat.d.ts

@@ -1,7 +1,10 @@
 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 { type UseChatOptions } from './hooks/useChat.ts';
+import type { UseChatReturn } from './hooks/useChat.ts';
+export type ChatSessionUi = 'list' | 'none';
 export interface ChatProps {
     /**
      * Base path for the chat REST endpoints.
@@ -25,6 +28,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. */
@@ -43,12 +54,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;
 }
 /**
  * Ready-to-use chat component.
@@ -73,5 +99,5 @@ export interface ChatProps {
  * }
  * ```
  */
-export declare function Chat({ basePath, fetchFn, agentId, contentFormat, renderContent, showTools, toolNames, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions, processingLabel, allowAttachments, acceptFileTypes, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ basePath, fetchFn, agentId, contentFormat, renderContent, showTools, toolNames, toolRenderers, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions, sessionUi, processingLabel, allowAttachments, acceptFileTypes, metadata, showCopyTranscript, copyTranscriptLabel, copyTranscriptCopiedLabel, renderHeader, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Chat.d.ts.map

package/dist/Chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../src/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAW,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAQlE,MAAM,WAAW,SAAS;IACzB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EACpB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAgB,EAChB,SAAS,EACT,WAAW,EACX,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,SAAS,EACT,SAAS,EACT,YAAmB,EACnB,eAAe,EACf,gBAAuB,EACvB,eAAe,GACf,EAAE,SAAS,2CA6DX"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../src/Chat.tsx"],"names":[],"mappings":"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"}

package/dist/Chat.js

@@ -6,6 +6,7 @@ import { ChatMessages } from "./components/ChatMessages.js";
 import { ChatInput } from "./components/ChatInput.js";
 import { TypingIndicator } from "./components/TypingIndicator.js";
 import { SessionSwitcher } from "./components/SessionSwitcher.js";
+import { CopyTranscriptButton } from "./components/CopyTranscriptButton.js";
 /**
  * Ready-to-use chat component.
  *
@@ -29,7 +30,7 @@ import { SessionSwitcher } from "./components/SessionSwitcher.js";
  * }
  * ```
  */
-export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', renderContent, showTools = true, toolNames, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions = true, processingLabel, allowAttachments = true, acceptFileTypes, }) {
+export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', renderContent, showTools = true, toolNames, toolRenderers, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions = true, sessionUi = 'list', processingLabel, allowAttachments = true, acceptFileTypes, metadata, showCopyTranscript = false, copyTranscriptLabel, copyTranscriptCopiedLabel, renderHeader, }) {
     const chat = useChat({
         basePath,
         fetchFn,
@@ -39,10 +40,11 @@ export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', r
         maxContinueTurns,
         onError,
         onMessage,
+        metadata,
     });
     const baseClass = 'ec-chat';
     const classes = [baseClass, className].filter(Boolean).join(' ');
-    return (_jsx(ErrorBoundary, { onError: onError ? (err) => onError(err) : undefined, children: _jsx("div", { className: classes, children: _jsxs(AvailabilityGate, { availability: chat.availability, children: [showSessions && (_jsx(SessionSwitcher, { sessions: chat.sessions, activeSessionId: chat.sessionId ?? undefined, onSelect: chat.switchSession, onNew: chat.newSession, onDelete: chat.deleteSession, loading: chat.sessionsLoading })), _jsx(ChatMessages, { messages: chat.messages, contentFormat: contentFormat, renderContent: renderContent, showTools: showTools, toolNames: toolNames, emptyState: emptyState }), _jsx(TypingIndicator, { visible: chat.isLoading, label: chat.turnCount > 0
+    return (_jsx(ErrorBoundary, { onError: onError ? (err) => onError(err) : undefined, children: _jsx("div", { className: classes, children: _jsxs(AvailabilityGate, { availability: chat.availability, children: [renderHeader?.(chat), showCopyTranscript && (_jsx("div", { className: "ec-chat__actions", children: _jsx(CopyTranscriptButton, { messages: chat.messages, label: copyTranscriptLabel, copiedLabel: copyTranscriptCopiedLabel }) })), showSessions && sessionUi === 'list' && (_jsx(SessionSwitcher, { sessions: chat.sessions, activeSessionId: chat.sessionId ?? undefined, onSelect: chat.switchSession, onNew: chat.newSession, onDelete: chat.deleteSession, loading: chat.sessionsLoading })), _jsx(ChatMessages, { messages: chat.messages, contentFormat: contentFormat, renderContent: renderContent, showTools: showTools, toolNames: toolNames, toolRenderers: toolRenderers, emptyState: emptyState }), _jsx(TypingIndicator, { visible: chat.isLoading, label: chat.turnCount > 0
                             ? (processingLabel
                                 ? processingLabel(chat.turnCount)
                                 : `Processing turn ${chat.turnCount}...`)

package/dist/client-context.d.ts

@@ -0,0 +1,31 @@
+export interface ClientContextProvider {
+    id: string;
+    priority?: number;
+    getContext: () => Record<string, unknown> | null;
+}
+export interface ClientContextProviderSnapshot {
+    id: string;
+    priority: number;
+    context: Record<string, unknown>;
+}
+export interface ClientContextSnapshot {
+    activeContext: Record<string, unknown> | null;
+    providers: ClientContextProviderSnapshot[];
+}
+export interface ClientContextRegistry {
+    registerProvider: (provider: ClientContextProvider) => () => void;
+    unregisterProvider: (id: string) => void;
+    subscribe: (listener: () => void) => () => void;
+    notify: () => void;
+    getSnapshot: () => ClientContextSnapshot;
+}
+declare global {
+    interface Window {
+        ecClientContextRegistry?: ClientContextRegistry;
+    }
+}
+export declare function getOrCreateClientContextRegistry(): ClientContextRegistry;
+export declare function registerClientContextProvider(provider: ClientContextProvider): () => void;
+export declare function getClientContextMetadata(): Record<string, unknown>;
+export declare function useClientContextMetadata(): Record<string, unknown>;
+//# sourceMappingURL=client-context.d.ts.map

package/dist/client-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-context.d.ts","sourceRoot":"","sources":["../src/client-context.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,qBAAqB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,GAAG,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,6BAA6B;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;CACnC;AAED,MAAM,WAAW,qBAAqB;IACrC,aAAa,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,GAAG,IAAI,CAAC;IAChD,SAAS,EAAE,6BAA6B,EAAE,CAAC;CAC3C;AAED,MAAM,WAAW,qBAAqB;IACrC,gBAAgB,EAAE,CAAE,QAAQ,EAAE,qBAAqB,KAAM,MAAM,IAAI,CAAC;IACpE,kBAAkB,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAE,QAAQ,EAAE,MAAM,IAAI,KAAM,MAAM,IAAI,CAAC;IAClD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,qBAAqB,CAAC;CACzC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,uBAAuB,CAAC,EAAE,qBAAqB,CAAC;KAChD;CACD;AAED,wBAAgB,gCAAgC,IAAI,qBAAqB,CAgFxE;AAED,wBAAgB,6BAA6B,CAAE,QAAQ,EAAE,qBAAqB,GAAI,MAAM,IAAI,CAE3F;AAED,wBAAgB,wBAAwB,IAAI,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAqBpE;AAED,wBAAgB,wBAAwB,IAAI,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAiBpE"}

package/dist/client-context.js

@@ -0,0 +1,100 @@
+import { useEffect, useMemo, useState } from 'react';
+export function getOrCreateClientContextRegistry() {
+    if (typeof window === 'undefined') {
+        return {
+            registerProvider: () => () => undefined,
+            unregisterProvider: () => undefined,
+            subscribe: () => () => undefined,
+            notify: () => undefined,
+            getSnapshot: () => ({
+                activeContext: null,
+                providers: [],
+            }),
+        };
+    }
+    if (window.ecClientContextRegistry) {
+        return window.ecClientContextRegistry;
+    }
+    const providers = new Map();
+    const listeners = new Set();
+    const registry = {
+        registerProvider(provider) {
+            providers.set(provider.id, provider);
+            registry.notify();
+            return () => {
+                registry.unregisterProvider(provider.id);
+            };
+        },
+        unregisterProvider(id) {
+            if (providers.delete(id)) {
+                registry.notify();
+            }
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        notify() {
+            listeners.forEach((listener) => listener());
+        },
+        getSnapshot() {
+            const providerSnapshots = Array.from(providers.values())
+                .map((provider) => {
+                const context = provider.getContext();
+                if (!context) {
+                    return null;
+                }
+                return {
+                    id: provider.id,
+                    priority: provider.priority ?? 0,
+                    context,
+                };
+            })
+                .filter((provider) => Boolean(provider))
+                .sort((a, b) => b.priority - a.priority);
+            return {
+                activeContext: providerSnapshots[0]?.context ?? null,
+                providers: providerSnapshots,
+            };
+        },
+    };
+    window.ecClientContextRegistry = registry;
+    return registry;
+}
+export function registerClientContextProvider(provider) {
+    return getOrCreateClientContextRegistry().registerProvider(provider);
+}
+export function getClientContextMetadata() {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    const snapshot = getOrCreateClientContextRegistry().getSnapshot();
+    return {
+        client_context: {
+            site: window.location.hostname,
+            url: window.location.href,
+            path: window.location.pathname,
+            page_title: document.title,
+            active_context: snapshot.activeContext,
+            available_contexts: snapshot.providers.map((provider) => ({
+                id: provider.id,
+                priority: provider.priority,
+                context: provider.context,
+            })),
+        },
+    };
+}
+export function useClientContextMetadata() {
+    const registry = useMemo(() => getOrCreateClientContextRegistry(), []);
+    const [metadata, setMetadata] = useState(() => getClientContextMetadata());
+    useEffect(() => {
+        const sync = () => {
+            setMetadata(getClientContextMetadata());
+        };
+        sync();
+        return registry.subscribe(sync);
+    }, [registry]);
+    return metadata;
+}

package/dist/components/ChatMessages.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { ChatMessage as ChatMessageType, ContentFormat } from '../types/index.ts';
+import { type ToolGroup } from './ToolMessage.tsx';
 export interface ChatMessagesProps {
     /** All messages in the conversation. */
     messages: ChatMessageType[];
@@ -11,6 +12,22 @@ export interface ChatMessagesProps {
     showTools?: boolean;
     /** Custom tool name display map. Maps tool function names to friendly 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.
+     *
+     * @example
+     * ```tsx
+     * toolRenderers={{
+     *   edit_post_blocks: (group) => <DiffCard diff={parseDiff(group)} />,
+     *   replace_post_blocks: (group) => <DiffCard diff={parseDiff(group)} />,
+     * }}
+     * ```
+     */
+    toolRenderers?: Record<string, (group: ToolGroup) => ReactNode>;
     /** Whether to auto-scroll to bottom on new messages. Defaults to true. */
     autoScroll?: boolean;
     /** Placeholder content shown when there are no messages. */
@@ -24,5 +41,5 @@ export interface ChatMessagesProps {
  * Filters system messages, groups tool_call/tool_result pairs,
  * and renders user/assistant messages as ChatMessage components.
  */
-export declare function ChatMessages({ messages, contentFormat, renderContent, showTools, toolNames, autoScroll, emptyState, className, }: ChatMessagesProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessages({ messages, contentFormat, renderContent, showTools, toolNames, toolRenderers, autoScroll, emptyState, className, }: ChatMessagesProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatMessages.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessages.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessages.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIvF,MAAM,WAAW,iBAAiB;IACjC,wCAAwC;IACxC,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,6DAA6D;IAC7D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC5B,QAAQ,EACR,aAAa,EACb,aAAa,EACb,SAAiB,EACjB,SAAS,EACT,UAAiB,EACjB,UAAU,EACV,SAAS,GACT,EAAE,iBAAiB,2CA0DnB"}
+{"version":3,"file":"ChatMessages.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessages.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvF,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IACjC,wCAAwC;IACxC,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,6DAA6D;IAC7D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;;;;;;;;;;;OAcG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC;IAChE,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC5B,QAAQ,EACR,aAAa,EACb,aAAa,EACb,SAAiB,EACjB,SAAS,EACT,aAAa,EACb,UAAiB,EACjB,UAAU,EACV,SAAS,GACT,EAAE,iBAAiB,2CAmEnB"}

package/dist/components/ChatMessages.js

@@ -8,7 +8,7 @@ import { ToolMessage } from "./ToolMessage.js";
  * Filters system messages, groups tool_call/tool_result pairs,
  * and renders user/assistant messages as ChatMessage components.
  */
-export function ChatMessages({ messages, contentFormat, renderContent, showTools = false, toolNames, autoScroll = true, emptyState, className, }) {
+export function ChatMessages({ messages, contentFormat, renderContent, showTools = false, toolNames, toolRenderers, autoScroll = true, emptyState, className, }) {
     const bottomRef = useRef(null);
     const containerRef = useRef(null);
     useEffect(() => {
@@ -32,6 +32,10 @@ export function ChatMessages({ messages, contentFormat, renderContent, showTools
                     return (_jsx(ChatMessage, { message: item.message, contentFormat: contentFormat, renderContent: renderContent }, item.message.id));
                 }
                 if (item.type === 'tool-group' && showTools) {
+                    const customRenderer = toolRenderers?.[item.group.toolName];
+                    if (customRenderer) {
+                        return (_jsx("div", { children: customRenderer(item.group) }, item.group.callMessage.id));
+                    }
                     return (_jsx(ToolMessage, { group: item.group, toolNames: toolNames }, item.group.callMessage.id));
                 }
                 return null;

package/dist/components/CopyTranscriptButton.d.ts

@@ -0,0 +1,12 @@
+import type { ChatMessage } from '../types/index.ts';
+export interface CopyTranscriptButtonProps {
+    messages: ChatMessage[];
+    label?: string;
+    copiedLabel?: string;
+    className?: string;
+    copyTimeoutMs?: number;
+    onCopy?: (markdown: string) => void;
+    onError?: (error: Error) => void;
+}
+export declare function CopyTranscriptButton({ messages, label, copiedLabel, className, copyTimeoutMs, onCopy, onError, }: CopyTranscriptButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CopyTranscriptButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyTranscriptButton.d.ts","sourceRoot":"","sources":["../../src/components/CopyTranscriptButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,WAAW,yBAAyB;IACzC,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,CAAE,QAAQ,EAAE,MAAM,KAAM,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAE,KAAK,EAAE,KAAK,KAAM,IAAI,CAAC;CACnC;AAED,wBAAgB,oBAAoB,CAAE,EACrC,QAAQ,EACR,KAAc,EACd,WAAuB,EACvB,SAAS,EACT,aAAoB,EACpB,MAAM,EACN,OAAO,GACP,EAAE,yBAAyB,2CAmC3B"}

package/dist/components/CopyTranscriptButton.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { copyChatAsMarkdown } from "../transcript.js";
+export function CopyTranscriptButton({ messages, label = 'Copy', copiedLabel = 'Copied!', className, copyTimeoutMs = 2000, onCopy, onError, }) {
+    const [isCopied, setIsCopied] = useState(false);
+    useEffect(() => {
+        if (!isCopied) {
+            return undefined;
+        }
+        const timer = window.setTimeout(() => setIsCopied(false), copyTimeoutMs);
+        return () => window.clearTimeout(timer);
+    }, [isCopied, copyTimeoutMs]);
+    const handleClick = useCallback(async () => {
+        try {
+            const markdown = await copyChatAsMarkdown(messages);
+            setIsCopied(true);
+            onCopy?.(markdown);
+        }
+        catch (error) {
+            onError?.(error);
+        }
+    }, [messages, onCopy, onError]);
+    const baseClass = 'ec-chat-copy';
+    const classes = [baseClass, className].filter(Boolean).join(' ');
+    return (_jsx("button", { type: "button", className: classes, onClick: handleClick, disabled: messages.length === 0, children: isCopied ? copiedLabel : label }));
+}

package/dist/components/DiffCard.d.ts

@@ -0,0 +1,40 @@
+import type { CanonicalDiffData } from '../diff.ts';
+/**
+ * Diff data returned by a content-editing tool in preview mode.
+ */
+export type DiffData = CanonicalDiffData;
+export interface DiffCardProps {
+    /** The diff data to visualize. */
+    diff: DiffData;
+    /** Called when the user accepts the change. */
+    onAccept?: (diffId: string) => void;
+    /** Called when the user rejects the change. */
+    onReject?: (diffId: string) => void;
+    /** Whether the accept/reject action is in progress. */
+    loading?: boolean;
+    /** Additional CSS class name. */
+    className?: string;
+}
+/**
+ * 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 declare function DiffCard({ diff, onAccept, onReject, loading, className, }: DiffCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DiffCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiffCard.d.ts","sourceRoot":"","sources":["../../src/components/DiffCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;AAEzC,MAAM,WAAW,aAAa;IAC7B,kCAAkC;IAClC,IAAI,EAAE,QAAQ,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,QAAQ,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,SAAS,GACT,EAAE,aAAa,2CAuEf"}