@extrachill/chat 0.5.0 → 0.6.0

package/src/client-context.ts

@@ -0,0 +1,160 @@
+import { useEffect, useMemo, useState } from 'react';
+
+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 function getOrCreateClientContextRegistry(): ClientContextRegistry {
+	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< string, ClientContextProvider >();
+	const listeners = new Set< () => void >();
+
+	const registry: ClientContextRegistry = {
+		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
+					): provider is ClientContextProviderSnapshot => 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: ClientContextProvider ): () => void {
+	return getOrCreateClientContextRegistry().registerProvider( provider );
+}
+
+export function getClientContextMetadata(): Record< string, unknown > {
+	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(): Record< string, unknown > {
+	const registry = useMemo( () => getOrCreateClientContextRegistry(), [] );
+	const [ metadata, setMetadata ] = useState< Record< string, unknown > >( () =>
+		getClientContextMetadata()
+	);
+
+	useEffect( () => {
+		const sync = (): void => {
+			setMetadata( getClientContextMetadata() );
+		};
+
+		sync();
+
+		return registry.subscribe( sync );
+	}, [ registry ] );
+
+	return metadata;
+}

package/src/components/ChatMessages.tsx

@@ -14,6 +14,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. */
@@ -34,6 +50,7 @@ export function ChatMessages({
 	renderContent,
 	showTools = false,
 	toolNames,
+	toolRenderers,
 	autoScroll = true,
 	emptyState,
 	className,
@@ -81,6 +98,15 @@ export function ChatMessages({
 				}
 
 				if (item.type === 'tool-group' && showTools) {
+					const customRenderer = toolRenderers?.[item.group.toolName];
+					if (customRenderer) {
+						return (
+							<div key={item.group.callMessage.id}>
+								{customRenderer(item.group)}
+							</div>
+						);
+					}
+
 					return (
 						<ToolMessage
 							key={item.group.callMessage.id}

package/src/components/CopyTranscriptButton.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { ChatMessage } from '../types/index.ts';
+import { copyChatAsMarkdown } from '../transcript.ts';
+
+export interface CopyTranscriptButtonProps {
+	messages: ChatMessage[];
+	label?: string;
+	copiedLabel?: string;
+	className?: string;
+	copyTimeoutMs?: number;
+	onCopy?: ( markdown: string ) => void;
+	onError?: ( error: Error ) => void;
+}
+
+export function CopyTranscriptButton( {
+	messages,
+	label = 'Copy',
+	copiedLabel = 'Copied!',
+	className,
+	copyTimeoutMs = 2000,
+	onCopy,
+	onError,
+}: CopyTranscriptButtonProps ) {
+	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 as Error );
+		}
+	}, [ messages, onCopy, onError ] );
+
+	const baseClass = 'ec-chat-copy';
+	const classes = [ baseClass, className ].filter( Boolean ).join( ' ' );
+
+	return (
+		<button
+			type="button"
+			className={ classes }
+			onClick={ handleClick }
+			disabled={ messages.length === 0 }
+		>
+			{ isCopied ? copiedLabel : label }
+		</button>
+	);
+}

package/src/components/DiffCard.tsx

@@ -0,0 +1,252 @@
+import { useState, type ReactNode } from 'react';
+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;
+}
+
+type DiffCardStatus = 'pending' | 'accepted' | 'rejected';
+
+/**
+ * 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,
+}: DiffCardProps) {
+	const [status, setStatus] = useState<DiffCardStatus>(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 (
+		<div className={classes}>
+			<div className={`${baseClass}__header`}>
+				<span className={`${baseClass}__icon`}>
+					{status === 'accepted' ? '✓' : status === 'rejected' ? '✗' : '⟳'}
+				</span>
+				<span className={`${baseClass}__label`}>
+					{diff.summary ?? formatDiffLabel(diff.diffType)}
+				</span>
+				{status !== 'pending' && (
+					<span className={`${baseClass}__status`}>
+						{status === 'accepted' ? 'Applied' : 'Rejected'}
+					</span>
+				)}
+			</div>
+
+			{diff.insertionPoint && (
+				<div className={`${baseClass}__meta`}>
+					{diff.insertionPoint}
+				</div>
+			)}
+
+			<div
+				className={`${baseClass}__content`}
+				dangerouslySetInnerHTML={{ __html: diffHtml }}
+			/>
+
+			{status === 'pending' && (
+				<div className={`${baseClass}__actions`}>
+					<button
+						type="button"
+						className={`${baseClass}__accept`}
+						onClick={handleAccept}
+						disabled={loading}
+					>
+						Accept
+					</button>
+					<button
+						type="button"
+						className={`${baseClass}__reject`}
+						onClick={handleReject}
+						disabled={loading}
+					>
+						Reject
+					</button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+/**
+ * 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: DiffData): string {
+	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: string, newText: string): string {
+	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: number[][] = Array.from({ length: m + 1 }, () => new Array<number>(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: Array<{ type: 'keep' | 'del' | 'ins'; text: string }> = [];
+	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: 'keep' | 'del' | 'ins' | null = null;
+	let buffer: string[] = [];
+
+	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: string): string[] {
+	return text.split(/(\s+)/).filter(Boolean);
+}
+
+/**
+ * Escape HTML special characters.
+ */
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+}
+
+/**
+ * Human-readable label for a diff type.
+ */
+function formatDiffLabel(diffType: DiffData['diffType']): string {
+	switch (diffType) {
+		case 'edit':
+			return 'Content edit';
+		case 'replace':
+			return 'Content replacement';
+		case 'insert':
+			return 'New content';
+	}
+}

package/src/components/index.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/src/diff.ts

@@ -0,0 +1,159 @@
+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;
+}
+
+type UnknownRecord = Record< string, unknown >;
+
+function isRecord( value: unknown ): value is UnknownRecord {
+	return !! value && typeof value === 'object' && ! Array.isArray( value );
+}
+
+function normalizeItem( item: unknown ): CanonicalDiffItem | null {
+	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: unknown ): CanonicalDiffData | null {
+	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 is CanonicalDiffItem => 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: string ): CanonicalDiffData | null {
+	try {
+		return parseCanonicalDiff( JSON.parse( json ) );
+	} catch {
+		return null;
+	}
+}
+
+export function parseCanonicalDiffFromToolGroup( group: ToolGroup ): CanonicalDiffData | null {
+	if ( ! group.resultMessage ) {
+		return null;
+	}
+
+	return parseCanonicalDiffFromJson( group.resultMessage.content );
+}