@extrachill/chat 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.8.0] - 2026-03-29
+
+### Added
+- add cycling loading messages with extensible pool
+
+## [0.7.0] - 2026-03-26
+
+### Added
+- standardize canonical diff chat primitives
+- add native chat transcript copy support
+- add shared client context injection api
+
+### Fixed
+- restore list-style on ul/ol inside message bubbles
+
 ## [0.6.0] - 2026-03-25
 
 ### Added

package/css/chat.css

@@ -397,6 +397,12 @@
 .ec-chat-typing__label {
 	font-size: 12px;
 	color: var(--ec-chat-text-muted);
+	transition: opacity 150ms ease;
+	opacity: 1;
+}
+
+.ec-chat-typing__label--fading {
+	opacity: 0;
 }
 
 /* ============================================
@@ -531,72 +537,43 @@
 	font-size: 13px;
 }
 
-.ec-chat-sessions__list {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	max-height: 200px;
-	overflow-y: auto;
-}
-
-.ec-chat-sessions__item {
+.ec-chat-sessions__controls {
 	display: flex;
+	gap: 8px;
 	align-items: center;
+	flex-wrap: wrap;
+	padding: 0 var(--ec-chat-padding) 8px;
 }
 
-.ec-chat-sessions__item--active {
-	background: var(--ec-chat-session-active-bg);
-}
-
-.ec-chat-sessions__item-button {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	padding: 8px var(--ec-chat-padding);
-	border: none;
-	background: transparent;
-	cursor: pointer;
-	text-align: left;
-	font-family: inherit;
-	color: inherit;
+.ec-chat-sessions__select-wrap {
 	min-width: 0;
+	flex: 1 1 220px;
 }
 
-.ec-chat-sessions__item-button:hover {
-	background: var(--ec-chat-session-hover-bg);
-}
-
-.ec-chat-sessions__item-title {
-	font-size: 13px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.ec-chat-sessions__item-date {
-	font-size: 11px;
-	color: var(--ec-chat-text-muted);
+.ec-chat-sessions__select {
+	width: 100%;
+	min-height: 36px;
+	border: 1px solid var(--ec-chat-border);
+	border-radius: 999px;
+	padding: 8px 12px;
+	font: inherit;
+	background: var(--ec-chat-assistant-bg);
+	color: inherit;
 }
 
-.ec-chat-sessions__item-delete {
-	padding: 4px 8px;
-	border: none;
+.ec-chat-sessions__delete {
+	border: 1px solid var(--ec-chat-border);
 	background: transparent;
 	color: var(--ec-chat-text-muted);
+	border-radius: 999px;
+	padding: 8px 12px;
+	font: inherit;
 	cursor: pointer;
-	font-size: 16px;
-	line-height: 1;
-	opacity: 0;
-	transition: opacity 0.15s;
-}
-
-.ec-chat-sessions__item:hover .ec-chat-sessions__item-delete {
-	opacity: 1;
 }
 
-.ec-chat-sessions__item-delete:hover {
-	color: var(--ec-chat-tool-error);
+.ec-chat-sessions__delete:hover {
+	color: var(--ec-chat-text);
+	background: var(--ec-chat-session-hover-bg);
 }
 
 /* ============================================

package/dist/Chat.d.ts

@@ -3,6 +3,7 @@ import type { ChatMessage as ChatMessageType, ContentFormat } from './types/inde
 import type { FetchFn } from './api.ts';
 import type { ToolGroup } from './components/ToolMessage.tsx';
 import { type UseChatOptions } from './hooks/useChat.ts';
+import { type LoadingMessagesConfig } from './hooks/useLoadingMessages.ts';
 import type { UseChatReturn } from './hooks/useChat.ts';
 export type ChatSessionUi = 'list' | 'none';
 export interface ChatProps {
@@ -58,6 +59,18 @@ export interface ChatProps {
     sessionUi?: ChatSessionUi;
     /** Label shown during multi-turn processing. */
     processingLabel?: (turnCount: number) => string;
+    /**
+     * Cycling loading messages shown while the assistant is thinking.
+     *
+     * - `true` — enable with built-in defaults.
+     * - `LoadingMessagesConfig` — extend or override the default pool.
+     * - `false` / `undefined` — disabled (dots only, original behavior).
+     *
+     * When enabled alongside `processingLabel`, loading messages are shown
+     * on the initial turn (turnCount === 0) and `processingLabel` takes
+     * over during multi-turn continuation.
+     */
+    loadingMessages?: boolean | LoadingMessagesConfig;
     /** Whether to show the attachment button in the input. Defaults to true. */
     allowAttachments?: boolean;
     /** Accepted file types for attachments. Defaults to 'image/*,video/*'. */
@@ -67,11 +80,11 @@ export interface ChatProps {
      * 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. */
+    /** Deprecated: built-in copy transcript button UI is no longer rendered. */
     showCopyTranscript?: boolean;
-    /** Label for the built-in copy transcript button. */
+    /** Deprecated legacy prop retained for compatibility. */
     copyTranscriptLabel?: string;
-    /** Label shown after the transcript is copied. */
+    /** Deprecated legacy prop retained for compatibility. */
     copyTranscriptCopiedLabel?: string;
     /** Optional custom header/actions area rendered above messages with live chat state. */
     renderHeader?: (chat: UseChatReturn) => ReactNode;
@@ -99,5 +112,5 @@ export interface ChatProps {
  * }
  * ```
  */
-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;
+export declare function Chat({ basePath, fetchFn, agentId, contentFormat, renderContent, showTools, toolNames, toolRenderers, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions, sessionUi, processingLabel, loadingMessages, 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":"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"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../src/Chat.tsx"],"names":[],"mappings":"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"}

package/dist/Chat.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useChat } from "./hooks/useChat.js";
+import { useLoadingMessages } from "./hooks/useLoadingMessages.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";
-import { CopyTranscriptButton } from "./components/CopyTranscriptButton.js";
 /**
  * Ready-to-use chat component.
  *
@@ -30,7 +30,7 @@ import { CopyTranscriptButton } from "./components/CopyTranscriptButton.js";
  * }
  * ```
  */
-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, }) {
+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, loadingMessages, allowAttachments = true, acceptFileTypes, metadata, showCopyTranscript = false, copyTranscriptLabel, copyTranscriptCopiedLabel, renderHeader, }) {
     const chat = useChat({
         basePath,
         fetchFn,
@@ -42,11 +42,18 @@ export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', r
         onMessage,
         metadata,
     });
+    // Resolve loading messages config.
+    const loadingMessagesConfig = loadingMessages === true ? {} :
+        loadingMessages ? loadingMessages :
+            undefined;
+    const cycling = useLoadingMessages(chat.isLoading && !!loadingMessagesConfig, loadingMessagesConfig);
     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: [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
+    return (_jsx(ErrorBoundary, { onError: onError ? (err) => onError(err) : undefined, children: _jsx("div", { className: classes, children: _jsxs(AvailabilityGate, { availability: chat.availability, children: [renderHeader?.(chat), 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}...`)
-                            : undefined }), _jsx(ChatInput, { onSend: chat.sendMessage, disabled: chat.isLoading, placeholder: placeholder, allowAttachments: allowAttachments, accept: acceptFileTypes })] }) }) }));
+                            : loadingMessagesConfig
+                                ? cycling.message
+                                : undefined }), _jsx(ChatInput, { onSend: chat.sendMessage, disabled: chat.isLoading, placeholder: placeholder, allowAttachments: allowAttachments, accept: acceptFileTypes })] }) }) }));
 }

package/dist/components/SessionSwitcher.d.ts

@@ -18,8 +18,7 @@ export interface SessionSwitcherProps {
 /**
  * Session switcher dropdown.
  *
- * Renders a list of sessions with the active one highlighted.
- * Only rendered when the adapter declares `capabilities.sessions = true`.
+ * Shared default for browsing saved chat history without noisy horizontal chips.
  */
 export declare function SessionSwitcher({ sessions, activeSessionId, onSelect, onNew, onDelete, loading, className, }: SessionSwitcherProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SessionSwitcher.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SessionSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/SessionSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACpC,kCAAkC;IAClC,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC/B,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAe,EACf,SAAS,GACT,EAAE,oBAAoB,2CAyEtB"}
+{"version":3,"file":"SessionSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/SessionSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACpC,kCAAkC;IAClC,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC/B,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAe,EACf,SAAS,GACT,EAAE,oBAAoB,2CAuDtB"}

package/dist/components/SessionSwitcher.js

@@ -2,23 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Session switcher dropdown.
  *
- * Renders a list of sessions with the active one highlighted.
- * Only rendered when the adapter declares `capabilities.sessions = true`.
+ * Shared default for browsing saved chat history without noisy horizontal chips.
  */
 export function SessionSwitcher({ sessions, activeSessionId, onSelect, onNew, onDelete, loading = false, className, }) {
     const baseClass = 'ec-chat-sessions';
     const classes = [baseClass, className].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: classes, children: [_jsxs("div", { className: `${baseClass}__header`, children: [_jsx("span", { className: `${baseClass}__title`, children: "Conversations" }), onNew && (_jsx("button", { className: `${baseClass}__new`, onClick: onNew, "aria-label": "New conversation", type: "button", children: "+" }))] }), loading && (_jsx("div", { className: `${baseClass}__loading`, children: "Loading..." })), _jsx("ul", { className: `${baseClass}__list`, role: "listbox", "aria-label": "Chat sessions", children: sessions.map((session) => {
-                    const isActive = session.id === activeSessionId;
-                    const itemClass = [
-                        `${baseClass}__item`,
-                        isActive ? `${baseClass}__item--active` : '',
-                    ].filter(Boolean).join(' ');
-                    return (_jsxs("li", { className: itemClass, role: "option", "aria-selected": isActive, children: [_jsxs("button", { className: `${baseClass}__item-button`, onClick: () => onSelect(session.id), type: "button", children: [_jsx("span", { className: `${baseClass}__item-title`, children: session.title ?? `Session ${session.id.slice(0, 8)}` }), _jsx("time", { className: `${baseClass}__item-date`, dateTime: session.updatedAt, children: formatRelativeDate(session.updatedAt) })] }), onDelete && (_jsx("button", { className: `${baseClass}__item-delete`, onClick: (e) => {
-                                    e.stopPropagation();
-                                    onDelete(session.id);
-                                }, "aria-label": `Delete session ${session.title ?? session.id}`, type: "button", children: "\\u00D7" }))] }, session.id));
-                }) })] }));
+    const currentSessionId = activeSessionId ?? sessions[0]?.id ?? '';
+    return (_jsxs("div", { className: classes, children: [_jsxs("div", { className: `${baseClass}__header`, children: [_jsx("span", { className: `${baseClass}__title`, children: "Conversations" }), onNew && (_jsx("button", { className: `${baseClass}__new`, onClick: onNew, "aria-label": "New conversation", type: "button", children: "+" }))] }), loading && _jsx("div", { className: `${baseClass}__loading`, children: "Loading..." }), sessions.length > 0 && (_jsxs("div", { className: `${baseClass}__controls`, children: [_jsxs("label", { className: `${baseClass}__select-wrap`, children: [_jsx("span", { className: "screen-reader-text", children: "Select conversation" }), _jsx("select", { className: `${baseClass}__select`, value: currentSessionId, onChange: (event) => onSelect(event.target.value), disabled: loading, children: sessions.map((session) => (_jsxs("option", { value: session.id, children: [session.title ?? `Session ${session.id.slice(0, 8)}`, " \u2014 ", formatRelativeDate(session.updatedAt)] }, session.id))) })] }), onDelete && currentSessionId && (_jsx("button", { className: `${baseClass}__delete`, onClick: () => onDelete(currentSessionId), "aria-label": "Delete selected conversation", type: "button", children: "Delete" }))] }))] }));
 }
 function formatRelativeDate(iso) {
     try {

package/dist/components/TypingIndicator.d.ts

@@ -10,7 +10,9 @@ export interface TypingIndicatorProps {
  * Animated typing indicator with three bouncing dots.
  *
  * Renders as an assistant-style message bubble.
- * The animation is pure CSS — no JS timers.
+ * The dot animation is pure CSS — no JS timers.
+ *
+ * When `label` changes, the text crossfades out/in via CSS transition.
  */
 export declare function TypingIndicator({ visible, label, className, }: TypingIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=TypingIndicator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../src/components/TypingIndicator.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACpC,wCAAwC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,SAAS,GACT,EAAE,oBAAoB,kDAgBtB"}
+{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../src/components/TypingIndicator.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,oBAAoB;IACpC,wCAAwC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,SAAS,GACT,EAAE,oBAAoB,kDAgDtB"}

package/dist/components/TypingIndicator.js

@@ -1,14 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
 /**
  * Animated typing indicator with three bouncing dots.
  *
  * Renders as an assistant-style message bubble.
- * The animation is pure CSS — no JS timers.
+ * The dot animation is pure CSS — no JS timers.
+ *
+ * When `label` changes, the text crossfades out/in via CSS transition.
  */
 export function TypingIndicator({ visible, label, className, }) {
+    // Track displayed label separately so we can fade out/in on change.
+    const [displayLabel, setDisplayLabel] = useState(label);
+    const [fading, setFading] = useState(false);
+    const timeoutRef = useRef();
+    useEffect(() => {
+        if (label === displayLabel)
+            return;
+        // Start fade-out, then swap text and fade-in.
+        setFading(true);
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            setDisplayLabel(label);
+            setFading(false);
+        }, 150); // matches CSS transition duration
+        return () => clearTimeout(timeoutRef.current);
+    }, [label, displayLabel]);
+    // Reset when indicator hides.
+    useEffect(() => {
+        if (!visible) {
+            setDisplayLabel(undefined);
+            setFading(false);
+        }
+    }, [visible]);
     if (!visible)
         return null;
     const baseClass = 'ec-chat-typing';
     const classes = [baseClass, className].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: classes, role: "status", "aria-label": "Assistant is typing", children: [_jsxs("div", { className: `${baseClass}__dots`, children: [_jsx("span", { className: `${baseClass}__dot` }), _jsx("span", { className: `${baseClass}__dot` }), _jsx("span", { className: `${baseClass}__dot` })] }), label && _jsx("span", { className: `${baseClass}__label`, children: label })] }));
+    const labelClasses = [
+        `${baseClass}__label`,
+        fading ? `${baseClass}__label--fading` : '',
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: classes, role: "status", "aria-label": "Assistant is typing", children: [_jsxs("div", { className: `${baseClass}__dots`, children: [_jsx("span", { className: `${baseClass}__dot` }), _jsx("span", { className: `${baseClass}__dot` }), _jsx("span", { className: `${baseClass}__dot` })] }), displayLabel && _jsx("span", { className: labelClasses, children: displayLabel })] }));
 }

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useChat, type UseChatOptions, type UseChatReturn } from './useChat.ts';
+export { useLoadingMessages, DEFAULT_LOADING_MESSAGES, type LoadingMessagesConfig, type UseLoadingMessagesReturn, } from './useLoadingMessages.ts';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EACN,kBAAkB,EAClB,wBAAwB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,GAC7B,MAAM,yBAAyB,CAAC"}

package/dist/hooks/index.js

@@ -1 +1,2 @@
 export { useChat } from "./useChat.js";
+export { useLoadingMessages, DEFAULT_LOADING_MESSAGES, } from "./useLoadingMessages.js";

package/dist/hooks/useLoadingMessages.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Default pool of loading messages.
+ *
+ * Music-forward, Extra-Chill-flavored, but generic enough for any consumer.
+ * Consumers can extend or replace this list entirely.
+ */
+export declare const DEFAULT_LOADING_MESSAGES: readonly string[];
+/**
+ * Configuration for loading message behavior.
+ */
+export interface LoadingMessagesConfig {
+    /**
+     * How to handle the provided messages relative to the defaults.
+     *
+     * - `'default'` — Use only the built-in pool (ignore `messages`).
+     * - `'extend'`  — Merge `messages` into the built-in pool.
+     * - `'override'` — Replace the built-in pool entirely with `messages`.
+     *
+     * @default 'default'
+     */
+    mode?: 'default' | 'extend' | 'override';
+    /**
+     * Custom messages to add or replace the defaults with.
+     * Ignored when `mode` is `'default'`.
+     */
+    messages?: string[];
+    /**
+     * How often (ms) to cycle to the next message.
+     * @default 3000
+     */
+    interval?: number;
+}
+export interface UseLoadingMessagesReturn {
+    /** The current loading message to display. Changes on each cycle. */
+    message: string;
+}
+/**
+ * Cycles through a pool of loading messages while `active` is true.
+ *
+ * On activation, the pool is shuffled and the first message is shown
+ * immediately. Every `interval` ms, the next message in the shuffled
+ * order is displayed. When the pool is exhausted, it re-shuffles and
+ * continues from the top.
+ *
+ * ## Usage modes
+ *
+ * ```tsx
+ * // 1. Defaults — built-in pool
+ * const { message } = useLoadingMessages(chat.isLoading);
+ *
+ * // 2. Extend — add your own on top of defaults
+ * const { message } = useLoadingMessages(chat.isLoading, {
+ *   mode: 'extend',
+ *   messages: ['Summoning the muse…', 'Consulting the oracle…'],
+ * });
+ *
+ * // 3. Override — your pool only
+ * const { message } = useLoadingMessages(chat.isLoading, {
+ *   mode: 'override',
+ *   messages: ['Searching…', 'Analyzing…', 'Compiling…'],
+ * });
+ * ```
+ */
+export declare function useLoadingMessages(active: boolean, config?: LoadingMessagesConfig): UseLoadingMessagesReturn;
+//# sourceMappingURL=useLoadingMessages.d.ts.map

package/dist/hooks/useLoadingMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoadingMessages.d.ts","sourceRoot":"","sources":["../../src/hooks/useLoadingMessages.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,EAAE,SAAS,MAAM,EAkBrD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACrC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,wBAAwB;IACxC,qEAAqE;IACrE,OAAO,EAAE,MAAM,CAAC;CAChB;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CACjC,MAAM,EAAE,OAAO,EACf,MAAM,CAAC,EAAE,qBAAqB,GAC5B,wBAAwB,CA0D1B"}

package/dist/hooks/useLoadingMessages.js

@@ -0,0 +1,117 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+/**
+ * Default pool of loading messages.
+ *
+ * Music-forward, Extra-Chill-flavored, but generic enough for any consumer.
+ * Consumers can extend or replace this list entirely.
+ */
+export const DEFAULT_LOADING_MESSAGES = [
+    'Thinking…',
+    'Working on it…',
+    'Tuning in…',
+    'Spinning the record…',
+    'Vibing on it…',
+    'Getting in the groove…',
+    'Mixing it together…',
+    'Letting it marinate…',
+    'Finding the right note…',
+    'Warming up…',
+    'Loading the setlist…',
+    'Checking the tracklist…',
+    'Cueing up…',
+    'On it…',
+    'One sec…',
+    'Almost there…',
+    'Cooking something up…',
+];
+/**
+ * Shuffle an array using Fisher-Yates.
+ * Returns a new array — does not mutate the input.
+ */
+function shuffle(array) {
+    const result = [...array];
+    for (let i = result.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [result[i], result[j]] = [result[j], result[i]];
+    }
+    return result;
+}
+/**
+ * Cycles through a pool of loading messages while `active` is true.
+ *
+ * On activation, the pool is shuffled and the first message is shown
+ * immediately. Every `interval` ms, the next message in the shuffled
+ * order is displayed. When the pool is exhausted, it re-shuffles and
+ * continues from the top.
+ *
+ * ## Usage modes
+ *
+ * ```tsx
+ * // 1. Defaults — built-in pool
+ * const { message } = useLoadingMessages(chat.isLoading);
+ *
+ * // 2. Extend — add your own on top of defaults
+ * const { message } = useLoadingMessages(chat.isLoading, {
+ *   mode: 'extend',
+ *   messages: ['Summoning the muse…', 'Consulting the oracle…'],
+ * });
+ *
+ * // 3. Override — your pool only
+ * const { message } = useLoadingMessages(chat.isLoading, {
+ *   mode: 'override',
+ *   messages: ['Searching…', 'Analyzing…', 'Compiling…'],
+ * });
+ * ```
+ */
+export function useLoadingMessages(active, config) {
+    const mode = config?.mode ?? 'default';
+    const customMessages = config?.messages;
+    const interval = config?.interval ?? 3000;
+    // Build the resolved pool once per config change.
+    const poolRef = useRef(DEFAULT_LOADING_MESSAGES);
+    // Track the shuffled queue and current index.
+    const queueRef = useRef([]);
+    const indexRef = useRef(0);
+    const [message, setMessage] = useState('');
+    // Resolve pool when config changes.
+    useEffect(() => {
+        if (mode === 'override' && customMessages?.length) {
+            poolRef.current = customMessages;
+        }
+        else if (mode === 'extend' && customMessages?.length) {
+            // Deduplicate: defaults first, then custom entries not already present.
+            const set = new Set(DEFAULT_LOADING_MESSAGES);
+            const extras = customMessages.filter((m) => !set.has(m));
+            poolRef.current = [...DEFAULT_LOADING_MESSAGES, ...extras];
+        }
+        else {
+            poolRef.current = DEFAULT_LOADING_MESSAGES;
+        }
+    }, [mode, customMessages]);
+    /**
+     * Get the next message from the shuffled queue.
+     * Re-shuffles when the queue is exhausted.
+     */
+    const next = useCallback(() => {
+        if (queueRef.current.length === 0 || indexRef.current >= queueRef.current.length) {
+            queueRef.current = shuffle(poolRef.current);
+            indexRef.current = 0;
+        }
+        const msg = queueRef.current[indexRef.current];
+        indexRef.current++;
+        return msg;
+    }, []);
+    // When active flips on, show the first message immediately and start cycling.
+    // When active flips off, stop the timer.
+    useEffect(() => {
+        if (!active)
+            return;
+        // Show first message immediately.
+        setMessage(next());
+        const timer = setInterval(() => {
+            setMessage(next());
+        }, interval);
+        return () => clearInterval(timer);
+    }, [active, interval, next]);
+    return { message };
+}

package/dist/index.d.ts

@@ -17,5 +17,6 @@ export { SessionSwitcher, type SessionSwitcherProps, } from './components/Sessio
 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 { useLoadingMessages, DEFAULT_LOADING_MESSAGES, type LoadingMessagesConfig, type UseLoadingMessagesReturn, } from './hooks/useLoadingMessages.ts';
 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,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"}
+{"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;AAE5B,OAAO,EACN,kBAAkB,EAClB,wBAAwB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,GAC7B,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -20,7 +20,8 @@ export { TypingIndicator, } from "./components/TypingIndicator.js";
 export { SessionSwitcher, } from "./components/SessionSwitcher.js";
 export { ErrorBoundary, } from "./components/ErrorBoundary.js";
 export { AvailabilityGate, } from "./components/AvailabilityGate.js";
-// Hook
+// Hooks
 export { useChat, } from "./hooks/useChat.js";
+export { useLoadingMessages, DEFAULT_LOADING_MESSAGES, } from "./hooks/useLoadingMessages.js";
 // Composed
 export { Chat } from "./Chat.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/chat",
-  "version": "0.6.0",
+  "version": "0.8.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

@@ -3,13 +3,13 @@ import type { ChatMessage as ChatMessageType, ContentFormat } from './types/inde
 import type { FetchFn } from './api.ts';
 import type { ToolGroup } from './components/ToolMessage.tsx';
 import { useChat, type UseChatOptions } from './hooks/useChat.ts';
+import { useLoadingMessages, type LoadingMessagesConfig } from './hooks/useLoadingMessages.ts';
 import { ErrorBoundary } from './components/ErrorBoundary.tsx';
 import { AvailabilityGate } from './components/AvailabilityGate.tsx';
 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';
@@ -67,6 +67,18 @@ export interface ChatProps {
 	sessionUi?: ChatSessionUi;
 	/** Label shown during multi-turn processing. */
 	processingLabel?: (turnCount: number) => string;
+	/**
+	 * Cycling loading messages shown while the assistant is thinking.
+	 *
+	 * - `true` — enable with built-in defaults.
+	 * - `LoadingMessagesConfig` — extend or override the default pool.
+	 * - `false` / `undefined` — disabled (dots only, original behavior).
+	 *
+	 * When enabled alongside `processingLabel`, loading messages are shown
+	 * on the initial turn (turnCount === 0) and `processingLabel` takes
+	 * over during multi-turn continuation.
+	 */
+	loadingMessages?: boolean | LoadingMessagesConfig;
 	/** Whether to show the attachment button in the input. Defaults to true. */
 	allowAttachments?: boolean;
 	/** Accepted file types for attachments. Defaults to 'image/*,video/*'. */
@@ -76,11 +88,11 @@ export interface ChatProps {
 	 * 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. */
+	/** Deprecated: built-in copy transcript button UI is no longer rendered. */
 	showCopyTranscript?: boolean;
-	/** Label for the built-in copy transcript button. */
+	/** Deprecated legacy prop retained for compatibility. */
 	copyTranscriptLabel?: string;
-	/** Label shown after the transcript is copied. */
+	/** Deprecated legacy prop retained for compatibility. */
 	copyTranscriptCopiedLabel?: string;
 	/** Optional custom header/actions area rendered above messages with live chat state. */
 	renderHeader?: ( chat: UseChatReturn ) => ReactNode;
@@ -129,6 +141,7 @@ export function Chat({
 	showSessions = true,
 	sessionUi = 'list',
 	processingLabel,
+	loadingMessages,
 	allowAttachments = true,
 	acceptFileTypes,
 	metadata,
@@ -149,6 +162,17 @@ export function Chat({
 		metadata,
 	});
 
+	// Resolve loading messages config.
+	const loadingMessagesConfig: LoadingMessagesConfig | undefined =
+		loadingMessages === true ? {} :
+		loadingMessages ? loadingMessages :
+		undefined;
+
+	const cycling = useLoadingMessages(
+		chat.isLoading && !!loadingMessagesConfig,
+		loadingMessagesConfig,
+	);
+
 	const baseClass = 'ec-chat';
 	const classes = [baseClass, className].filter(Boolean).join(' ');
 
@@ -158,16 +182,6 @@ export function Chat({
 				<AvailabilityGate availability={chat.availability}>
 					{renderHeader?.( chat )}
 
-					{showCopyTranscript && (
-						<div className="ec-chat__actions">
-							<CopyTranscriptButton
-								messages={chat.messages}
-								label={copyTranscriptLabel}
-								copiedLabel={copyTranscriptCopiedLabel}
-							/>
-						</div>
-					)}
-
 					{showSessions && sessionUi === 'list' && (
 						<SessionSwitcher
 							sessions={chat.sessions}
@@ -196,7 +210,9 @@ export function Chat({
 								? (processingLabel
 									? processingLabel(chat.turnCount)
 									: `Processing turn ${chat.turnCount}...`)
-								: undefined
+								: loadingMessagesConfig
+									? cycling.message
+									: undefined
 						}
 					/>
 

package/src/components/SessionSwitcher.tsx

@@ -20,8 +20,7 @@ export interface SessionSwitcherProps {
 /**
  * Session switcher dropdown.
  *
- * Renders a list of sessions with the active one highlighted.
- * Only rendered when the adapter declares `capabilities.sessions = true`.
+ * Shared default for browsing saved chat history without noisy horizontal chips.
  */
 export function SessionSwitcher({
 	sessions,
@@ -34,6 +33,7 @@ export function SessionSwitcher({
 }: SessionSwitcherProps) {
 	const baseClass = 'ec-chat-sessions';
 	const classes = [baseClass, className].filter(Boolean).join(' ');
+	const currentSessionId = activeSessionId ?? sessions[0]?.id ?? '';
 
 	return (
 		<div className={classes}>
@@ -51,57 +51,38 @@ export function SessionSwitcher({
 				)}
 			</div>
 
-			{loading && (
-				<div className={`${baseClass}__loading`}>Loading...</div>
-			)}
+			{loading && <div className={`${baseClass}__loading`}>Loading...</div>}
 
-			<ul className={`${baseClass}__list`} role="listbox" aria-label="Chat sessions">
-				{sessions.map((session) => {
-					const isActive = session.id === activeSessionId;
-					const itemClass = [
-						`${baseClass}__item`,
-						isActive ? `${baseClass}__item--active` : '',
-					].filter(Boolean).join(' ');
+			{sessions.length > 0 && (
+				<div className={`${baseClass}__controls`}>
+					<label className={`${baseClass}__select-wrap`}>
+						<span className="screen-reader-text">Select conversation</span>
+						<select
+							className={`${baseClass}__select`}
+							value={currentSessionId}
+							onChange={(event) => onSelect(event.target.value)}
+							disabled={loading}
+						>
+							{sessions.map((session) => (
+								<option key={session.id} value={session.id}>
+									{session.title ?? `Session ${session.id.slice(0, 8)}`} — {formatRelativeDate(session.updatedAt)}
+								</option>
+							))}
+						</select>
+					</label>
 
-					return (
-						<li
-							key={session.id}
-							className={itemClass}
-							role="option"
-							aria-selected={isActive}
+					{onDelete && currentSessionId && (
+						<button
+							className={`${baseClass}__delete`}
+							onClick={() => onDelete(currentSessionId)}
+							aria-label="Delete selected conversation"
+							type="button"
 						>
-							<button
-								className={`${baseClass}__item-button`}
-								onClick={() => onSelect(session.id)}
-								type="button"
-							>
-								<span className={`${baseClass}__item-title`}>
-									{session.title ?? `Session ${session.id.slice(0, 8)}`}
-								</span>
-								<time
-									className={`${baseClass}__item-date`}
-									dateTime={session.updatedAt}
-								>
-									{formatRelativeDate(session.updatedAt)}
-								</time>
-							</button>
-							{onDelete && (
-								<button
-									className={`${baseClass}__item-delete`}
-									onClick={(e) => {
-										e.stopPropagation();
-										onDelete(session.id);
-									}}
-									aria-label={`Delete session ${session.title ?? session.id}`}
-									type="button"
-								>
-									\u00D7
-								</button>
-							)}
-						</li>
-					);
-				})}
-			</ul>
+							Delete
+						</button>
+					)}
+				</div>
+			)}
 		</div>
 	);
 }

package/src/components/TypingIndicator.tsx

@@ -1,3 +1,5 @@
+import { useState, useEffect, useRef } from 'react';
+
 export interface TypingIndicatorProps {
 	/** Whether the indicator is visible. */
 	visible: boolean;
@@ -11,17 +13,51 @@ export interface TypingIndicatorProps {
  * Animated typing indicator with three bouncing dots.
  *
  * Renders as an assistant-style message bubble.
- * The animation is pure CSS — no JS timers.
+ * The dot animation is pure CSS — no JS timers.
+ *
+ * When `label` changes, the text crossfades out/in via CSS transition.
  */
 export function TypingIndicator({
 	visible,
 	label,
 	className,
 }: TypingIndicatorProps) {
+	// Track displayed label separately so we can fade out/in on change.
+	const [displayLabel, setDisplayLabel] = useState(label);
+	const [fading, setFading] = useState(false);
+	const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+	useEffect(() => {
+		if (label === displayLabel) return;
+
+		// Start fade-out, then swap text and fade-in.
+		setFading(true);
+
+		clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			setDisplayLabel(label);
+			setFading(false);
+		}, 150); // matches CSS transition duration
+
+		return () => clearTimeout(timeoutRef.current);
+	}, [label, displayLabel]);
+
+	// Reset when indicator hides.
+	useEffect(() => {
+		if (!visible) {
+			setDisplayLabel(undefined);
+			setFading(false);
+		}
+	}, [visible]);
+
 	if (!visible) return null;
 
 	const baseClass = 'ec-chat-typing';
 	const classes = [baseClass, className].filter(Boolean).join(' ');
+	const labelClasses = [
+		`${baseClass}__label`,
+		fading ? `${baseClass}__label--fading` : '',
+	].filter(Boolean).join(' ');
 
 	return (
 		<div className={classes} role="status" aria-label="Assistant is typing">
@@ -30,7 +66,7 @@ export function TypingIndicator({
 				<span className={`${baseClass}__dot`} />
 				<span className={`${baseClass}__dot`} />
 			</div>
-			{label && <span className={`${baseClass}__label`}>{label}</span>}
+			{displayLabel && <span className={labelClasses}>{displayLabel}</span>}
 		</div>
 	);
 }

package/src/hooks/index.ts

@@ -1 +1,7 @@
 export { useChat, type UseChatOptions, type UseChatReturn } from './useChat.ts';
+export {
+	useLoadingMessages,
+	DEFAULT_LOADING_MESSAGES,
+	type LoadingMessagesConfig,
+	type UseLoadingMessagesReturn,
+} from './useLoadingMessages.ts';

package/src/hooks/useLoadingMessages.ts

@@ -0,0 +1,161 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+/**
+ * Default pool of loading messages.
+ *
+ * Music-forward, Extra-Chill-flavored, but generic enough for any consumer.
+ * Consumers can extend or replace this list entirely.
+ */
+export const DEFAULT_LOADING_MESSAGES: readonly string[] = [
+	'Thinking…',
+	'Working on it…',
+	'Tuning in…',
+	'Spinning the record…',
+	'Vibing on it…',
+	'Getting in the groove…',
+	'Mixing it together…',
+	'Letting it marinate…',
+	'Finding the right note…',
+	'Warming up…',
+	'Loading the setlist…',
+	'Checking the tracklist…',
+	'Cueing up…',
+	'On it…',
+	'One sec…',
+	'Almost there…',
+	'Cooking something up…',
+];
+
+/**
+ * Configuration for loading message behavior.
+ */
+export interface LoadingMessagesConfig {
+	/**
+	 * How to handle the provided messages relative to the defaults.
+	 *
+	 * - `'default'` — Use only the built-in pool (ignore `messages`).
+	 * - `'extend'`  — Merge `messages` into the built-in pool.
+	 * - `'override'` — Replace the built-in pool entirely with `messages`.
+	 *
+	 * @default 'default'
+	 */
+	mode?: 'default' | 'extend' | 'override';
+	/**
+	 * Custom messages to add or replace the defaults with.
+	 * Ignored when `mode` is `'default'`.
+	 */
+	messages?: string[];
+	/**
+	 * How often (ms) to cycle to the next message.
+	 * @default 3000
+	 */
+	interval?: number;
+}
+
+export interface UseLoadingMessagesReturn {
+	/** The current loading message to display. Changes on each cycle. */
+	message: string;
+}
+
+/**
+ * Shuffle an array using Fisher-Yates.
+ * Returns a new array — does not mutate the input.
+ */
+function shuffle<T>(array: readonly T[]): T[] {
+	const result = [...array];
+	for (let i = result.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[result[i], result[j]] = [result[j], result[i]];
+	}
+	return result;
+}
+
+/**
+ * Cycles through a pool of loading messages while `active` is true.
+ *
+ * On activation, the pool is shuffled and the first message is shown
+ * immediately. Every `interval` ms, the next message in the shuffled
+ * order is displayed. When the pool is exhausted, it re-shuffles and
+ * continues from the top.
+ *
+ * ## Usage modes
+ *
+ * ```tsx
+ * // 1. Defaults — built-in pool
+ * const { message } = useLoadingMessages(chat.isLoading);
+ *
+ * // 2. Extend — add your own on top of defaults
+ * const { message } = useLoadingMessages(chat.isLoading, {
+ *   mode: 'extend',
+ *   messages: ['Summoning the muse…', 'Consulting the oracle…'],
+ * });
+ *
+ * // 3. Override — your pool only
+ * const { message } = useLoadingMessages(chat.isLoading, {
+ *   mode: 'override',
+ *   messages: ['Searching…', 'Analyzing…', 'Compiling…'],
+ * });
+ * ```
+ */
+export function useLoadingMessages(
+	active: boolean,
+	config?: LoadingMessagesConfig,
+): UseLoadingMessagesReturn {
+	const mode = config?.mode ?? 'default';
+	const customMessages = config?.messages;
+	const interval = config?.interval ?? 3000;
+
+	// Build the resolved pool once per config change.
+	const poolRef = useRef<readonly string[]>(DEFAULT_LOADING_MESSAGES);
+
+	// Track the shuffled queue and current index.
+	const queueRef = useRef<string[]>([]);
+	const indexRef = useRef(0);
+
+	const [message, setMessage] = useState('');
+
+	// Resolve pool when config changes.
+	useEffect(() => {
+		if (mode === 'override' && customMessages?.length) {
+			poolRef.current = customMessages;
+		} else if (mode === 'extend' && customMessages?.length) {
+			// Deduplicate: defaults first, then custom entries not already present.
+			const set = new Set(DEFAULT_LOADING_MESSAGES);
+			const extras = customMessages.filter((m) => !set.has(m));
+			poolRef.current = [...DEFAULT_LOADING_MESSAGES, ...extras];
+		} else {
+			poolRef.current = DEFAULT_LOADING_MESSAGES;
+		}
+	}, [mode, customMessages]);
+
+	/**
+	 * Get the next message from the shuffled queue.
+	 * Re-shuffles when the queue is exhausted.
+	 */
+	const next = useCallback((): string => {
+		if (queueRef.current.length === 0 || indexRef.current >= queueRef.current.length) {
+			queueRef.current = shuffle(poolRef.current);
+			indexRef.current = 0;
+		}
+		const msg = queueRef.current[indexRef.current];
+		indexRef.current++;
+		return msg;
+	}, []);
+
+	// When active flips on, show the first message immediately and start cycling.
+	// When active flips off, stop the timer.
+	useEffect(() => {
+		if (!active) return;
+
+		// Show first message immediately.
+		setMessage(next());
+
+		const timer = setInterval(() => {
+			setMessage(next());
+		}, interval);
+
+		return () => clearInterval(timer);
+	}, [active, interval, next]);
+
+	return { message };
+}

package/src/index.ts

@@ -111,12 +111,19 @@ export {
 	type AvailabilityGateProps,
 } from './components/AvailabilityGate.tsx';
 
-// Hook
+// Hooks
 export {
 	useChat,
 	type UseChatOptions,
 	type UseChatReturn,
 } from './hooks/useChat.ts';
 
+export {
+	useLoadingMessages,
+	DEFAULT_LOADING_MESSAGES,
+	type LoadingMessagesConfig,
+	type UseLoadingMessagesReturn,
+} from './hooks/useLoadingMessages.ts';
+
 // Composed
 export { Chat, type ChatProps, type ChatSessionUi } from './Chat.tsx';