@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/chat-page.d.ts

@@ -1,6 +1,5 @@
 import { type ComponentProps, type ReactNode } from "react";
-import type { ChatClient } from "../chat/chat-client.js";
-import type { ConversationId } from "../chat/contract.js";
+import type { ChatConversationSummary } from "../chat/conversation-source.js";
 export { AgentTaskCard, AgentWork, AgentWorkButton, agentTaskAnchorId, jumpToAgentTask, type AgentTask, type AgentTaskAsk, type AgentTaskCardProps, type AgentTaskReply, type AgentWorkButtonProps, type AgentWorkProps, } from "./agent-work.js";
 export type ChatPageProps = ComponentProps<"div"> & {
     /** The open thread, such as a wide `ChatConversation`. */
@@ -21,14 +20,16 @@ export type ChatPageProps = ComponentProps<"div"> & {
     /** Which one column shows under 700px. */
     phoneView?: "history" | "conversation";
 });
-export declare function ChatPage({ variant, history, children, aside, phoneView, className, ...props }: ChatPageProps): import("@types/react").JSX.Element;
+export declare function ChatPage({ variant, history, children, aside, phoneView, className, ...props }: ChatPageProps): import("react").JSX.Element;
 export type ChatHistoryProps = {
-    /** Needs a `QueryClientProvider` above it. */
-    client: ChatClient;
-    selectedId: ConversationId | null;
-    onSelect: (conversationId: ConversationId) => void;
+    /** Newest first; `useChatClientConversations` over the lib's chat client, or the app's own. */
+    conversations: readonly ChatConversationSummary[];
+    /** The list is loading: skeleton rows in its place. */
+    loading?: boolean;
+    selectedId: string | null;
+    onSelect: (conversationId: string) => void;
     onNew: () => void;
     className?: string;
 };
 /** The caller's conversations, newest first under day labels, with search and New chat. */
-export declare function ChatHistory({ client, selectedId, onSelect, onNew, className }: ChatHistoryProps): import("@types/react").JSX.Element;
+export declare function ChatHistory({ conversations, loading, selectedId, onSelect, onNew, className, }: ChatHistoryProps): import("react").JSX.Element;

package/dist/components/chat-page.js

@@ -5,15 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * waits on the user) in the `aside` on the right; under 700px the aside goes and the page's
  * header carries `AgentWorkButton` instead. `variant="conversations"` lays out the
  * conversation history, the open conversation and an optional context column; `ChatHistory`
- * lists the caller's conversations from the chat client, searchable and grouped by day, with New
- * chat. Under 700px one column shows at a time, the history or the conversation; the context
+ * lists the caller's conversations (from `useChatClientConversations`, or the app's own),
+ * searchable and grouped by day, with New chat. Under 700px one column shows at a time, the history or the conversation; the context
  * column shows from 1000px up.
  */
 import { PlusIcon } from "@phosphor-icons/react";
 import { differenceInCalendarDays, isToday, isYesterday } from "date-fns";
 import { useState } from "react";
 import { css, cx } from "#primitives/css";
-import { useConversationList } from "../chat/use-conversation-list.js";
 import { IconButton } from "./button.js";
 import { icon, Spinner } from "./icon.js";
 import { SearchField } from "./input.js";
@@ -123,21 +122,18 @@ const emptyLine = css({
 });
 const skeletonRow = css({ height: "menu.item", display: "flex", alignItems: "center" });
 /** The caller's conversations, newest first under day labels, with search and New chat. */
-export function ChatHistory({ client, selectedId, onSelect, onNew, className }) {
+export function ChatHistory({ conversations, loading = false, selectedId, onSelect, onNew, className, }) {
     const [query, setQuery] = useState("");
     const locale = useCiridaeLocale();
     const { labels } = locale;
-    const list = useConversationList(client);
-    const conversations = list.data?.pages.flatMap((listPage) => listPage.data) ?? [];
     const needle = query.trim().toLowerCase();
     const matching = needle
         ? conversations.filter((conversation) => [conversation.title, conversation.preview].some((text) => text?.toLowerCase().includes(needle)))
         : conversations;
     const groups = groupByDay(matching, locale);
-    return (_jsxs("nav", { className: cx(column, css({ flex: "1" }), className), "aria-label": labels.chat.conversations, children: [_jsxs("div", { className: historyHeader, children: [_jsx(SearchField, { size: "compact", placeholder: labels.common.search, "aria-label": labels.chat.searchConversations, value: query, onChange: (event) => setQuery(event.target.value), onClear: query ? () => setQuery("") : undefined, wrapperClassName: css({ flex: "1" }) }), _jsx(IconButton, { "aria-label": labels.chat.newChat, size: "small", onClick: onNew, children: _jsx(PlusIcon, { className: icon({ size: "small" }) }) })] }), _jsxs("div", { className: historyList, children: [list.isPending &&
-                        Array.from({ length: 6 }, (_, index) => (_jsx("div", { className: skeletonRow, children: _jsx(Skeleton, { shape: "text", style: { width: `${72 - (index % 3) * 12}%` } }) }, index))), !list.isPending && matching.length === 0 && (_jsx("div", { className: emptyLine, children: labels.common.noResults })), groups.map((group) => (_jsxs("section", { children: [_jsx("div", { className: groupLabel, children: group.label }), group.conversations.map((conversation) => {
-                                const status = conversation.latest_response?.status;
-                                return (_jsxs("button", { type: "button", className: historyRow, "aria-current": conversation.id === selectedId ? "page" : undefined, onClick: () => onSelect(conversation.id), children: [_jsx("span", { "data-title": "", children: conversation.title ?? conversation.preview ?? labels.chat.newChat }), status === "queued" || status === "in_progress" ? (_jsx(Spinner, { size: "compact", label: labels.chat.running })) : (_jsx("time", { dateTime: conversation.updated_at, children: formatUpdatedAt(Date.parse(conversation.updated_at), locale) }))] }, conversation.id));
+    return (_jsxs("nav", { className: cx(column, css({ flex: "1" }), className), "aria-label": labels.chat.conversations, children: [_jsxs("div", { className: historyHeader, children: [_jsx(SearchField, { size: "compact", placeholder: labels.common.search, "aria-label": labels.chat.searchConversations, value: query, onChange: (event) => setQuery(event.target.value), onClear: query ? () => setQuery("") : undefined, wrapperClassName: css({ flex: "1" }) }), _jsx(IconButton, { "aria-label": labels.chat.newChat, size: "small", onClick: onNew, children: _jsx(PlusIcon, { className: icon({ size: "small" }) }) })] }), _jsxs("div", { className: historyList, children: [loading &&
+                        Array.from({ length: 6 }, (_, index) => (_jsx("div", { className: skeletonRow, children: _jsx(Skeleton, { shape: "text", style: { width: `${72 - (index % 3) * 12}%` } }) }, index))), !loading && matching.length === 0 && (_jsx("div", { className: emptyLine, children: labels.common.noResults })), groups.map((group) => (_jsxs("section", { children: [_jsx("div", { className: groupLabel, children: group.label }), group.conversations.map((conversation) => {
+                                return (_jsxs("button", { type: "button", className: historyRow, "aria-current": conversation.id === selectedId ? "page" : undefined, onClick: () => onSelect(conversation.id), children: [_jsx("span", { "data-title": "", children: conversation.title ?? conversation.preview ?? labels.chat.newChat }), conversation.running ? (_jsx(Spinner, { size: "compact", label: labels.chat.running })) : (_jsx("time", { dateTime: new Date(conversation.updatedAt).toISOString(), children: formatUpdatedAt(conversation.updatedAt, locale) }))] }, conversation.id));
                             })] }, group.label)))] })] }));
 }
 /** Conversations under Today, Yesterday, Previous 7 days and Earlier, newest first. */
@@ -152,7 +148,7 @@ function groupByDay(conversations, { labels }) {
                 : labels.dates.earlier;
     const groups = [];
     for (const conversation of conversations) {
-        const label = labelOf(Date.parse(conversation.updated_at));
+        const label = labelOf(conversation.updatedAt);
         const group = groups.find((candidate) => candidate.label === label);
         if (group)
             group.conversations.push(conversation);

package/dist/components/chat-sheet-controller.d.ts

@@ -15,13 +15,13 @@ export type UseChatSheetControllerOptions = {
 };
 export declare function useChatSheetController({ hotkey, defaultPlacement, dockedQuery, persistKey, onOpenFullPage, }?: UseChatSheetControllerOptions): {
     open: boolean;
-    setOpen: import("@types/react").Dispatch<import("@types/react").SetStateAction<boolean>>;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     toggle: () => void;
     draft: string;
-    setDraft: import("@types/react").Dispatch<import("@types/react").SetStateAction<string>>;
-    conversationId: (string & import("zod/index.cjs").$brand<"ConversationId">) | null;
-    setConversationId: import("@types/react").Dispatch<import("@types/react").SetStateAction<(string & import("zod/index.cjs").$brand<"ConversationId">) | null>>;
-    composerRef: import("@types/react").RefObject<HTMLDivElement | null>;
+    setDraft: import("react").Dispatch<import("react").SetStateAction<string>>;
+    conversationId: (string & import("zod").$brand<"ConversationId">) | null;
+    setConversationId: import("react").Dispatch<import("react").SetStateAction<(string & import("zod").$brand<"ConversationId">) | null>>;
+    composerRef: import("react").RefObject<HTMLDivElement | null>;
     focusComposer: (caret?: number) => void;
     prefill: (text: string) => void;
     placement: ChatSheetPlacement;
@@ -29,22 +29,19 @@ export declare function useChatSheetController({ hotkey, defaultPlacement, docke
     openInSheet: () => void;
     sheetProps: {
         open: boolean;
-        onOpenChange: import("@types/react").Dispatch<import("@types/react").SetStateAction<boolean>>;
+        onOpenChange: import("react").Dispatch<import("react").SetStateAction<boolean>>;
         placement: ChatSheetPlacement;
         onPlacementChange: ((next: ChatSheetPlacement) => void) | undefined;
         onOpenFullPage: (() => void) | undefined;
+        shortcut: HotkeyChord;
         draft: string;
-        onDraftChange: import("@types/react").Dispatch<import("@types/react").SetStateAction<string>>;
-        composerRef: import("@types/react").RefObject<HTMLDivElement | null>;
-        conversationId: (string & import("zod/index.cjs").$brand<"ConversationId">) | null;
-        onConversationCreated: (conversation: {
-            id: ConversationId;
-        }) => void;
+        onDraftChange: import("react").Dispatch<import("react").SetStateAction<string>>;
+        composerRef: import("react").RefObject<HTMLDivElement | null>;
     };
     pageProps: {
         draft: string;
-        onDraftChange: import("@types/react").Dispatch<import("@types/react").SetStateAction<string>>;
-        composerRef: import("@types/react").RefObject<HTMLDivElement | null>;
+        onDraftChange: import("react").Dispatch<import("react").SetStateAction<string>>;
+        composerRef: import("react").RefObject<HTMLDivElement | null>;
     };
 };
 export type ChatSheetController = ReturnType<typeof useChatSheetController>;

package/dist/components/chat-sheet-controller.js

@@ -4,7 +4,8 @@
  * sheet and a full chat page. `hotkey` (Cmd/Ctrl+J) opens the sheet on its composer, focuses the
  * composer when it is open elsewhere, and closes it from the composer. The sheet docks only where
  * `dockedQuery` matches and is a drawer below it. The app spreads `sheetProps` onto `ChatSheet`
- * (with its client, title and suggestions) and `pageProps` onto a full page's `ChatConversation`.
+ * (with its source, title and suggestions) and `pageProps` onto a full page's `ChatConversation`;
+ * `conversationId` is the open conversation, such as for `useChatClientSource`.
  */
 import { useCallback, useRef, useState, useSyncExternalStore } from "react";
 import { useHotkey } from "./hotkeys.js";
@@ -122,11 +123,10 @@ export function useChatSheetController({ hotkey = "Mod+J", defaultPlacement = "d
             placement,
             onPlacementChange: dockable ? changePlacement : undefined,
             onOpenFullPage: openFullPage,
+            shortcut: hotkey,
             draft,
             onDraftChange: setDraft,
             composerRef,
-            conversationId,
-            onConversationCreated: (conversation) => setConversationId(conversation.id),
         },
         pageProps: { draft, onDraftChange: setDraft, composerRef },
     };

package/dist/components/chat-sheet.d.ts

@@ -1,9 +1,13 @@
 import { type ReactNode, type Ref } from "react";
 import { type AgentTask, type AgentTaskReply } from "./agent-work.js";
+import { type ChatDictation } from "./chat.js";
 import { DrawerBody } from "./drawer.js";
+import type { HotkeyChord } from "./hotkeys.js";
 import type { MentionMark, MentionTrigger } from "./mention-input.js";
-import type { ChatClient } from "../chat/chat-client.js";
-import type { Conversation, ConversationId, Mention } from "../chat/contract.js";
+import type { Mention } from "../chat/contract.js";
+import type { ChatConversationSource } from "../chat/conversation-source.js";
+export type { ChatConversationItem, ChatConversationSource, ChatConversationSummary, ChatOutgoingMessage, ChatTurnStatus, } from "../chat/conversation-source.js";
+export { useChatClientConversations, useChatClientSource, type UseChatClientSourceOptions, } from "./chat-client-source.js";
 export type ChatSheetPlacement = "docked" | "drawer";
 /** A record the agent reads for this conversation, named in the row under the header. */
 export type ChatSheetContext = {
@@ -27,13 +31,10 @@ export type ChatConversationProps = {
     tasks?: readonly AgentTask[];
     /** The user's approval or answer on a waiting task's card. */
     onTaskReply?: (task: AgentTask, reply: AgentTaskReply) => void;
-    /** Needs a `QueryClientProvider` above it. */
-    client: ChatClient;
-    /** Null before the first message; the conversation is created with it and reported. */
-    conversationId: ConversationId | null;
-    onConversationCreated: (conversation: Conversation) => void;
+    /** The conversation: `useChatClientSource` over the lib's chat client, or the app's own. */
+    source: ChatConversationSource;
     placeholder: string;
-    /** The composer's text, when the host owns it, such as to start a question for the user. */
+    /** The composer's text, when the host owns it, such as a draft it keeps per conversation. */
     draft?: string;
     onDraftChange?: (draft: string) => void;
     /** The composer's field, so the host can focus it, such as from its shortcut. */
@@ -54,6 +55,10 @@ export type ChatConversationProps = {
     suggestions?: readonly string[];
     /** A Copy control in the footer of each reply once its turn has finished, and not failed. */
     copyReplies?: boolean;
+    /** More tools in the composer's bar after the paperclip, such as a dictation button. */
+    composerTools?: ReactNode;
+    /** While the host takes dictation, its levels as the composer's waveform; see `ChatComposer`. */
+    dictation?: ChatDictation;
 };
 export type ChatSheetProps = ChatConversationProps & {
     open: boolean;
@@ -67,14 +72,16 @@ export type ChatSheetProps = ChatConversationProps & {
     onPlacementChange?: (placement: ChatSheetPlacement) => void;
     /** Shows a header button that moves the conversation to a full page. */
     onOpenFullPage?: () => void;
+    /** The hotkey that opens the sheet, shown as keys in its header. */
+    shortcut?: HotkeyChord;
 };
-export declare function ChatSheet({ open, onOpenChange, title, context, placement, onPlacementChange, onOpenFullPage, ...conversationProps }: ChatSheetProps): import("@types/react").JSX.Element | null;
+export declare function ChatSheet({ open, onOpenChange, title, context, placement, onPlacementChange, onOpenFullPage, shortcut, ...conversationProps }: ChatSheetProps): import("react").JSX.Element | null;
 /**
  * The thread and the composer: everything that reads or writes the conversation. `layout="wide"`
  * sets both in one readable column for a full page; the sheet uses `sheet`.
  */
-export declare function ChatConversation({ client, conversationId, onConversationCreated, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events, assistantName: ownAssistantName, suggestions, copyReplies, variant, tasks, onTaskReply, layout, scrollBody: ScrollBody, }: ChatConversationProps & {
+export declare function ChatConversation({ source, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events, assistantName: ownAssistantName, suggestions, copyReplies, composerTools, dictation, variant, tasks, onTaskReply, layout, scrollBody: ScrollBody, }: ChatConversationProps & {
     layout?: "sheet" | "wide";
     /** The drawer's body inside a `Drawer`, a plain element otherwise. */
     scrollBody?: typeof DrawerBody | "div";
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;