@extrachill/chat 0.2.0

package/dist/Chat.d.ts

@@ -0,0 +1,73 @@
+import { type ReactNode } from 'react';
+import type { ChatMessage as ChatMessageType, ContentFormat } from './types/index.ts';
+import type { FetchFn } from './api.ts';
+import { type UseChatOptions } from './hooks/useChat.ts';
+export interface ChatProps {
+    /**
+     * Base path for the chat REST endpoints.
+     * e.g. '/datamachine/v1/chat'
+     */
+    basePath: string;
+    /**
+     * Fetch function for API calls. Must accept { path, method?, data? }
+     * and return parsed JSON. @wordpress/api-fetch works directly.
+     */
+    fetchFn: FetchFn;
+    /**
+     * Agent ID to scope the chat to.
+     */
+    agentId?: number;
+    /** Content format for message rendering. Defaults to 'markdown'. */
+    contentFormat?: ContentFormat;
+    /** Custom content renderer for messages. */
+    renderContent?: (content: string, role: ChatMessageType['role']) => ReactNode;
+    /** Whether to display tool call/result messages. Defaults to true. */
+    showTools?: boolean;
+    /** Map of tool function names to friendly display labels. */
+    toolNames?: Record<string, string>;
+    /** Placeholder text for the input. */
+    placeholder?: string;
+    /** Content shown when conversation is empty. */
+    emptyState?: ReactNode;
+    /** Initial messages (hydrated from server). */
+    initialMessages?: ChatMessageType[];
+    /** Initial session ID. */
+    initialSessionId?: string;
+    /** Maximum continuation turns. */
+    maxContinueTurns?: number;
+    /** Called when an error occurs. */
+    onError?: UseChatOptions['onError'];
+    /** Called when a new message is added. */
+    onMessage?: UseChatOptions['onMessage'];
+    /** Additional CSS class name on the root element. */
+    className?: string;
+    /** Whether to show the session switcher. Defaults to true. */
+    showSessions?: boolean;
+    /** Label shown during multi-turn processing. */
+    processingLabel?: (turnCount: number) => string;
+}
+/**
+ * Ready-to-use chat component.
+ *
+ * Composes all the primitives (messages, input, typing, sessions, etc.)
+ * into a complete chat experience. For full control, use the individual
+ * components and `useChat` hook directly.
+ *
+ * @example
+ * ```tsx
+ * import { Chat } from '@extrachill/chat';
+ * import apiFetch from '@wordpress/api-fetch';
+ *
+ * function StudioChat() {
+ *   return (
+ *     <Chat
+ *       basePath="/datamachine/v1/chat"
+ *       fetchFn={apiFetch}
+ *       agentId={5}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function Chat({ basePath, fetchFn, agentId, contentFormat, renderContent, showTools, toolNames, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions, processingLabel, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chat.d.ts.map

package/dist/Chat.d.ts.map

@@ -0,0 +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;CAChD;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,GACf,EAAE,SAAS,2CA2DX"}

package/dist/Chat.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChat } from "./hooks/useChat.js";
+import { ErrorBoundary } from "./components/ErrorBoundary.js";
+import { AvailabilityGate } from "./components/AvailabilityGate.js";
+import { ChatMessages } from "./components/ChatMessages.js";
+import { ChatInput } from "./components/ChatInput.js";
+import { TypingIndicator } from "./components/TypingIndicator.js";
+import { SessionSwitcher } from "./components/SessionSwitcher.js";
+/**
+ * Ready-to-use chat component.
+ *
+ * Composes all the primitives (messages, input, typing, sessions, etc.)
+ * into a complete chat experience. For full control, use the individual
+ * components and `useChat` hook directly.
+ *
+ * @example
+ * ```tsx
+ * import { Chat } from '@extrachill/chat';
+ * import apiFetch from '@wordpress/api-fetch';
+ *
+ * function StudioChat() {
+ *   return (
+ *     <Chat
+ *       basePath="/datamachine/v1/chat"
+ *       fetchFn={apiFetch}
+ *       agentId={5}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', renderContent, showTools = true, toolNames, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions = true, processingLabel, }) {
+    const chat = useChat({
+        basePath,
+        fetchFn,
+        agentId,
+        initialMessages,
+        initialSessionId,
+        maxContinueTurns,
+        onError,
+        onMessage,
+    });
+    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
+                            ? (processingLabel
+                                ? processingLabel(chat.turnCount)
+                                : `Processing turn ${chat.turnCount}...`)
+                            : undefined }), _jsx(ChatInput, { onSend: chat.sendMessage, disabled: chat.isLoading, placeholder: placeholder })] }) }) }));
+}

package/dist/api.d.ts

@@ -0,0 +1,68 @@
+/**
+ * REST API client for the chat package.
+ *
+ * Speaks the standard chat REST contract natively. Any backend that
+ * implements the same endpoint shapes works out of the box.
+ *
+ * The `fetchFn` parameter allows consumers to plug in their own
+ * fetch implementation (e.g. @wordpress/api-fetch for cookie auth).
+ */
+import type { ChatMessage } from './types/message.ts';
+import type { ChatSession } from './types/session.ts';
+/**
+ * A fetch-like function. Accepts path + options, returns parsed JSON.
+ *
+ * This matches @wordpress/api-fetch signature:
+ *   apiFetch({ path: '/datamachine/v1/chat', method: 'POST', data: {...} })
+ *
+ * For non-WordPress contexts, consumers wrap native fetch:
+ *   (opts) => fetch(baseUrl + opts.path, { method: opts.method, body: JSON.stringify(opts.data) }).then(r => r.json())
+ */
+export interface FetchOptions {
+    path: string;
+    method?: string;
+    data?: Record<string, unknown>;
+}
+export type FetchFn = (options: FetchOptions) => Promise<unknown>;
+export interface ChatApiConfig {
+    /** Base path for the chat endpoints (e.g. '/datamachine/v1/chat'). */
+    basePath: string;
+    /** The fetch function to use for requests. */
+    fetchFn: FetchFn;
+    /** Agent ID to scope sessions to. */
+    agentId?: number;
+}
+export interface SendResult {
+    sessionId: string;
+    messages: ChatMessage[];
+    completed: boolean;
+    turnNumber: number;
+    maxTurnsReached: boolean;
+}
+export interface ContinueResult {
+    messages: ChatMessage[];
+    completed: boolean;
+    turnNumber: number;
+    maxTurnsReached: boolean;
+}
+/**
+ * Send a user message (create or continue a session).
+ */
+export declare function sendMessage(config: ChatApiConfig, content: string, sessionId?: string): Promise<SendResult>;
+/**
+ * Continue a multi-turn response.
+ */
+export declare function continueResponse(config: ChatApiConfig, sessionId: string): Promise<ContinueResult>;
+/**
+ * List sessions for the current user.
+ */
+export declare function listSessions(config: ChatApiConfig, limit?: number): Promise<ChatSession[]>;
+/**
+ * Load a single session's conversation.
+ */
+export declare function loadSession(config: ChatApiConfig, sessionId: string): Promise<ChatMessage[]>;
+/**
+ * Delete a session.
+ */
+export declare function deleteSession(config: ChatApiConfig, sessionId: string): Promise<void>;
+//# sourceMappingURL=api.d.ts.map

package/dist/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAUtD;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AAElE,MAAM,WAAW,aAAa;IAC7B,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAChC,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,MAAM,GAChB,OAAO,CAAC,UAAU,CAAC,CAsBrB;AAED;;GAEG;AACH,wBAAsB,gBAAgB,CACrC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,cAAc,CAAC,CAiBzB;AAED;;GAEG;AACH,wBAAsB,YAAY,CACjC,MAAM,EAAE,aAAa,EACrB,KAAK,SAAK,GACR,OAAO,CAAC,WAAW,EAAE,CAAC,CAaxB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAChC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,WAAW,EAAE,CAAC,CAUxB;AAED;;GAEG;AACH,wBAAsB,aAAa,CAClC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC,CASf"}

package/dist/api.js

@@ -0,0 +1,93 @@
+/**
+ * REST API client for the chat package.
+ *
+ * Speaks the standard chat REST contract natively. Any backend that
+ * implements the same endpoint shapes works out of the box.
+ *
+ * The `fetchFn` parameter allows consumers to plug in their own
+ * fetch implementation (e.g. @wordpress/api-fetch for cookie auth).
+ */
+import { normalizeConversation, normalizeMessage, normalizeSession } from "./normalizer.js";
+/**
+ * Send a user message (create or continue a session).
+ */
+export async function sendMessage(config, content, sessionId) {
+    const body = { message: content };
+    if (sessionId)
+        body.session_id = sessionId;
+    if (config.agentId)
+        body.agent_id = config.agentId;
+    const raw = await config.fetchFn({
+        path: config.basePath,
+        method: 'POST',
+        data: body,
+    });
+    if (!raw.success) {
+        throw new Error(raw.message ?? 'Failed to send message');
+    }
+    return {
+        sessionId: raw.data.session_id,
+        messages: normalizeConversation(raw.data.conversation),
+        completed: raw.data.completed,
+        turnNumber: raw.data.turn_number,
+        maxTurnsReached: raw.data.max_turns_reached,
+    };
+}
+/**
+ * Continue a multi-turn response.
+ */
+export async function continueResponse(config, sessionId) {
+    const raw = await config.fetchFn({
+        path: `${config.basePath}/continue`,
+        method: 'POST',
+        data: { session_id: sessionId },
+    });
+    if (!raw.success) {
+        throw new Error(raw.message ?? 'Failed to continue');
+    }
+    return {
+        messages: raw.data.new_messages.map(normalizeMessage),
+        completed: raw.data.completed,
+        turnNumber: raw.data.turn_number,
+        maxTurnsReached: raw.data.max_turns_reached,
+    };
+}
+/**
+ * List sessions for the current user.
+ */
+export async function listSessions(config, limit = 20) {
+    const params = new URLSearchParams({ limit: String(limit) });
+    if (config.agentId)
+        params.set('agent_id', String(config.agentId));
+    const raw = await config.fetchFn({
+        path: `${config.basePath}/sessions?${params.toString()}`,
+    });
+    if (!raw.success) {
+        throw new Error('Failed to list sessions');
+    }
+    return raw.data.sessions.map(normalizeSession);
+}
+/**
+ * Load a single session's conversation.
+ */
+export async function loadSession(config, sessionId) {
+    const raw = await config.fetchFn({
+        path: `${config.basePath}/${sessionId}`,
+    });
+    if (!raw.success) {
+        throw new Error('Failed to load session');
+    }
+    return normalizeConversation(raw.data.conversation);
+}
+/**
+ * Delete a session.
+ */
+export async function deleteSession(config, sessionId) {
+    const raw = await config.fetchFn({
+        path: `${config.basePath}/${sessionId}`,
+        method: 'DELETE',
+    });
+    if (!raw.success) {
+        throw new Error('Failed to delete session');
+    }
+}

package/dist/components/AvailabilityGate.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { ChatAvailability } from '../types/index.ts';
+export interface AvailabilityGateProps {
+    /** Current availability state. */
+    availability: ChatAvailability;
+    /** Custom renderer for non-ready states. */
+    renderState?: (availability: ChatAvailability) => ReactNode;
+    /** Children to render when ready. */
+    children: ReactNode;
+}
+/**
+ * Gates chat UI behind availability states.
+ *
+ * When the adapter reports a non-ready state, this component renders
+ * an appropriate message instead of the chat. Consumers can override
+ * the default rendering with `renderState`.
+ */
+export declare function AvailabilityGate({ availability, renderState, children, }: AvailabilityGateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvailabilityGate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvailabilityGate.d.ts","sourceRoot":"","sources":["../../src/components/AvailabilityGate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,qBAAqB;IACrC,kCAAkC;IAClC,YAAY,EAAE,gBAAgB,CAAC;IAC/B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,KAAK,SAAS,CAAC;IAC5D,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAChC,YAAY,EACZ,WAAW,EACX,QAAQ,GACR,EAAE,qBAAqB,2CAUvB"}

package/dist/components/AvailabilityGate.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Gates chat UI behind availability states.
+ *
+ * When the adapter reports a non-ready state, this component renders
+ * an appropriate message instead of the chat. Consumers can override
+ * the default rendering with `renderState`.
+ */
+export function AvailabilityGate({ availability, renderState, children, }) {
+    if (availability.status === 'ready') {
+        return _jsx(_Fragment, { children: children });
+    }
+    if (renderState) {
+        return _jsx(_Fragment, { children: renderState(availability) });
+    }
+    return _jsx(DefaultAvailabilityMessage, { availability: availability });
+}
+function DefaultAvailabilityMessage({ availability }) {
+    const baseClass = 'ec-chat-availability';
+    switch (availability.status) {
+        case 'login-required':
+            return (_jsxs("div", { className: `${baseClass} ${baseClass}--login`, children: [_jsx("p", { children: "Please log in to use the chat." }), availability.loginUrl && (_jsx("a", { href: availability.loginUrl, className: `${baseClass}__action`, children: "Log in" }))] }));
+        case 'unavailable':
+            return (_jsx("div", { className: `${baseClass} ${baseClass}--unavailable`, children: _jsx("p", { children: availability.reason ?? 'Chat is currently unavailable.' }) }));
+        case 'provisioning':
+            return (_jsx("div", { className: `${baseClass} ${baseClass}--provisioning`, children: _jsx("p", { children: availability.message ?? 'Setting up your chat...' }) }));
+        case 'upgrade-required':
+            return (_jsxs("div", { className: `${baseClass} ${baseClass}--upgrade`, children: [_jsx("p", { children: availability.message ?? 'Upgrade required to access chat.' }), availability.upgradeUrl && (_jsx("a", { href: availability.upgradeUrl, className: `${baseClass}__action`, children: "Upgrade" }))] }));
+        case 'error':
+            return (_jsx("div", { className: `${baseClass} ${baseClass}--error`, children: _jsx("p", { children: availability.message }) }));
+    }
+}

package/dist/components/ChatInput.d.ts

@@ -0,0 +1,21 @@
+export interface ChatInputProps {
+    /** Called when the user submits a message. */
+    onSend: (content: string) => void;
+    /** Whether input is disabled (e.g. while waiting for response). */
+    disabled?: boolean;
+    /** Placeholder text. Defaults to 'Type a message...'. */
+    placeholder?: string;
+    /** Maximum number of rows the textarea auto-grows to. Defaults to 6. */
+    maxRows?: number;
+    /** Additional CSS class name. */
+    className?: string;
+}
+/**
+ * Chat input with auto-growing textarea and keyboard shortcuts.
+ *
+ * - Enter sends the message
+ * - Shift+Enter adds a newline
+ * - Textarea auto-grows up to `maxRows`
+ */
+export declare function ChatInput({ onSend, disabled, placeholder, maxRows, className, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC9B,8CAA8C;IAC9C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,QAAgB,EAChB,WAAiC,EACjC,OAAW,EACX,SAAS,GACT,EAAE,cAAc,2CAkEhB"}

package/dist/components/ChatInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from 'react';
+/**
+ * Chat input with auto-growing textarea and keyboard shortcuts.
+ *
+ * - Enter sends the message
+ * - Shift+Enter adds a newline
+ * - Textarea auto-grows up to `maxRows`
+ */
+export function ChatInput({ onSend, disabled = false, placeholder = 'Type a message...', maxRows = 6, className, }) {
+    const [value, setValue] = useState('');
+    const textareaRef = useRef(null);
+    const cooldownRef = useRef(false);
+    const resize = useCallback(() => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20;
+        const maxHeight = lineHeight * maxRows;
+        el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    }, [maxRows]);
+    const handleSubmit = useCallback((e) => {
+        e?.preventDefault();
+        const trimmed = value.trim();
+        if (!trimmed || disabled || cooldownRef.current)
+            return;
+        // Debounce to prevent double-submit
+        cooldownRef.current = true;
+        setTimeout(() => { cooldownRef.current = false; }, 300);
+        onSend(trimmed);
+        setValue('');
+        // Reset textarea height after clearing
+        requestAnimationFrame(() => {
+            const el = textareaRef.current;
+            if (el)
+                el.style.height = 'auto';
+        });
+    }, [value, disabled, onSend]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    }, [handleSubmit]);
+    const baseClass = 'ec-chat-input';
+    const classes = [baseClass, className].filter(Boolean).join(' ');
+    return (_jsxs("form", { className: classes, onSubmit: handleSubmit, children: [_jsx("textarea", { ref: textareaRef, className: `${baseClass}__textarea`, value: value, onChange: (e) => { setValue(e.target.value); resize(); }, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": placeholder }), _jsx("button", { className: `${baseClass}__send`, type: "submit", disabled: disabled || !value.trim(), "aria-label": "Send message", children: _jsx(SendIcon, {}) })] }));
+}
+function SendIcon() {
+    return (_jsxs("svg", { className: "ec-chat-input__send-icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
+}

package/dist/components/ChatMessage.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import type { ChatMessage as ChatMessageType, ContentFormat } from '../types/index.ts';
+export interface ChatMessageProps {
+    /** The message to render. */
+    message: ChatMessageType;
+    /** How to render message content. Defaults to 'markdown'. */
+    contentFormat?: ContentFormat;
+    /**
+     * Custom content renderer. When provided, overrides contentFormat.
+     * Use this to plug in your own markdown renderer (react-markdown, etc.).
+     */
+    renderContent?: (content: string, role: ChatMessageType['role']) => ReactNode;
+    /** Additional CSS class name on the outer wrapper. */
+    className?: string;
+}
+/**
+ * Renders a single chat message bubble.
+ *
+ * User messages align right, assistant messages align left.
+ * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ */
+export declare function ChatMessage({ message, contentFormat, renderContent, className, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvF,MAAM,WAAW,gBAAgB;IAChC,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAS,GACT,EAAE,gBAAgB,2CAyBlB"}

package/dist/components/ChatMessage.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Renders a single chat message bubble.
+ *
+ * User messages align right, assistant messages align left.
+ * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ */
+export function ChatMessage({ message, contentFormat = 'markdown', renderContent, className, }) {
+    const isUser = message.role === 'user';
+    const baseClass = 'ec-chat-message';
+    const roleClass = isUser ? `${baseClass}--user` : `${baseClass}--assistant`;
+    const classes = [baseClass, roleClass, className].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: classes, "data-message-id": message.id, children: [_jsx("div", { className: `${baseClass}__bubble`, children: renderContent
+                    ? renderContent(message.content, message.role)
+                    : _jsx(DefaultContent, { content: message.content, format: contentFormat }) }), message.timestamp && (_jsx("time", { className: `${baseClass}__timestamp`, dateTime: message.timestamp, title: new Date(message.timestamp).toLocaleString(), children: formatTime(message.timestamp) }))] }));
+}
+function DefaultContent({ content, format }) {
+    if (format === 'html') {
+        return _jsx("div", { dangerouslySetInnerHTML: { __html: content } });
+    }
+    // For 'text' and 'markdown' (without a custom renderer), render as text
+    // with basic paragraph splitting. Consumers should provide renderContent
+    // for proper markdown support.
+    return (_jsx(_Fragment, { children: content.split('\n\n').map((paragraph, i) => (_jsx("p", { children: paragraph }, i))) }));
+}
+function formatTime(iso) {
+    try {
+        const date = new Date(iso);
+        return date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+    }
+    catch {
+        return '';
+    }
+}

package/dist/components/ChatMessages.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import type { ChatMessage as ChatMessageType, ContentFormat } from '../types/index.ts';
+export interface ChatMessagesProps {
+    /** All messages in the conversation. */
+    messages: ChatMessageType[];
+    /** How to render message content. Defaults to 'markdown'. */
+    contentFormat?: ContentFormat;
+    /** Custom content renderer passed through to ChatMessage. */
+    renderContent?: (content: string, role: ChatMessageType['role']) => ReactNode;
+    /** Whether to show tool call/result messages. Defaults to false. */
+    showTools?: boolean;
+    /** Custom tool name display map. Maps tool function names to friendly labels. */
+    toolNames?: Record<string, string>;
+    /** Whether to auto-scroll to bottom on new messages. Defaults to true. */
+    autoScroll?: boolean;
+    /** Placeholder content shown when there are no messages. */
+    emptyState?: ReactNode;
+    /** Additional CSS class name. */
+    className?: string;
+}
+/**
+ * Scrollable message list with auto-scroll behavior.
+ *
+ * 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;
+//# sourceMappingURL=ChatMessages.d.ts.map

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

@@ -0,0 +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,2CAqDnB"}

package/dist/components/ChatMessages.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { ChatMessage } from "./ChatMessage.js";
+import { ToolMessage } from "./ToolMessage.js";
+/**
+ * Scrollable message list with auto-scroll behavior.
+ *
+ * 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, }) {
+    const bottomRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (autoScroll && bottomRef.current) {
+            bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages, autoScroll]);
+    const displayItems = buildDisplayItems(messages, showTools);
+    const baseClass = 'ec-chat-messages';
+    const classes = [baseClass, className].filter(Boolean).join(' ');
+    if (displayItems.length === 0 && emptyState) {
+        return (_jsx("div", { className: classes, ref: containerRef, children: _jsx("div", { className: `${baseClass}__empty`, children: emptyState }) }));
+    }
+    return (_jsxs("div", { className: classes, ref: containerRef, children: [displayItems.map((item) => {
+                if (item.type === 'message') {
+                    return (_jsx(ChatMessage, { message: item.message, contentFormat: contentFormat, renderContent: renderContent }, item.message.id));
+                }
+                if (item.type === 'tool-group' && showTools) {
+                    return (_jsx(ToolMessage, { group: item.group, toolNames: toolNames }, item.group.callMessage.id));
+                }
+                return null;
+            }), _jsx("div", { ref: bottomRef })] }));
+}
+/**
+ * Build display items from raw messages.
+ *
+ * - Filters out system messages
+ * - Groups tool_call + tool_result pairs
+ * - Returns ordered display items
+ */
+function buildDisplayItems(messages, showTools) {
+    const items = [];
+    const toolResultMap = new Map();
+    // Pre-index tool results by tool name for pairing
+    if (showTools) {
+        for (const msg of messages) {
+            if (msg.role === 'tool_result' && msg.toolResult?.toolName) {
+                toolResultMap.set(msg.toolResult.toolName, msg);
+            }
+        }
+    }
+    const processedToolResults = new Set();
+    for (const msg of messages) {
+        // Skip system messages
+        if (msg.role === 'system')
+            continue;
+        // Skip tool messages when tools are hidden
+        if (!showTools && (msg.role === 'tool_call' || msg.role === 'tool_result'))
+            continue;
+        // Handle user/assistant messages (assistant messages with toolCalls get both treatments)
+        if (msg.role === 'user' || msg.role === 'assistant') {
+            // If assistant message has tool calls, render the text part as a message
+            // and the tool calls as tool groups
+            if (msg.role === 'assistant' && msg.toolCalls?.length && showTools) {
+                // Only render text bubble if there's actual text content
+                if (msg.content.trim()) {
+                    items.push({ type: 'message', message: msg });
+                }
+                for (const call of msg.toolCalls) {
+                    const resultMsg = toolResultMap.get(call.name);
+                    if (resultMsg) {
+                        processedToolResults.add(resultMsg.id);
+                    }
+                    items.push({
+                        type: 'tool-group',
+                        group: {
+                            callMessage: {
+                                ...msg,
+                                content: '',
+                                toolCalls: [call],
+                            },
+                            resultMessage: resultMsg ?? null,
+                            toolName: call.name,
+                            parameters: call.parameters,
+                            success: resultMsg?.toolResult?.success ?? null,
+                        },
+                    });
+                }
+            }
+            else {
+                items.push({ type: 'message', message: msg });
+            }
+            continue;
+        }
+        // Handle standalone tool_call messages
+        if (msg.role === 'tool_call' && showTools) {
+            const toolName = msg.toolCalls?.[0]?.name ?? 'unknown';
+            const resultMsg = toolResultMap.get(toolName);
+            if (resultMsg) {
+                processedToolResults.add(resultMsg.id);
+            }
+            items.push({
+                type: 'tool-group',
+                group: {
+                    callMessage: msg,
+                    resultMessage: resultMsg ?? null,
+                    toolName,
+                    parameters: msg.toolCalls?.[0]?.parameters ?? {},
+                    success: resultMsg?.toolResult?.success ?? null,
+                },
+            });
+            continue;
+        }
+        // Handle orphaned tool_result messages
+        if (msg.role === 'tool_result' && showTools && !processedToolResults.has(msg.id)) {
+            items.push({ type: 'message', message: msg });
+        }
+    }
+    return items;
+}