@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/chat.d.ts

@@ -1,6 +1,9 @@
 import { type ComponentProps, type ReactNode } from "react";
 import { type MessageSide } from "../chat/message-group-position.js";
 import { type MentionMark, type MentionTrigger } from "./mention-input.js";
+import { type ResolveFileUrl } from "./resolved-file-url.js";
+export { MessageText, splitSources, type MessageSource, type MessageTextProps, } from "../chat/message-text.js";
+export type { ResolvableFile, ResolveFileUrl } from "./resolved-file-url.js";
 export type ChatComposerProps = Omit<ComponentProps<"div">, "onSubmit"> & {
     /** The text, each mention in it as `[@label](mention://kind/id)`. */
     value?: string;
@@ -18,6 +21,17 @@ export type ChatComposerProps = Omit<ComponentProps<"div">, "onSubmit"> & {
     sendsWithoutText?: boolean;
     /** What goes with the message, such as its files as chips, just above the text. */
     attachments?: ReactNode;
+    /**
+     * Files pasted into the composer, such as a screenshot or files copied from the desktop, to
+     * attach as a drop or the picker would. Rich text pasted with a picture of itself stays text.
+     */
+    onPasteFiles?: (files: File[]) => void;
+    /**
+     * While the host takes dictation: the microphone's levels, drawn as a waveform beside the
+     * tools. The host owns the microphone and its controls, such as Cancel and Insert in `actions`,
+     * and writes what it heard into the text.
+     */
+    dictation?: ChatDictation;
     /**
      * `page` is a chat page's wide card; `sheet` the field at the foot of the agent sheet; `feed`
      * a comment field, which sends on Cmd/Ctrl+Enter rather than Enter.
@@ -33,21 +47,49 @@ export type ChatComposerProps = Omit<ComponentProps<"div">, "onSubmit"> & {
     /** Props for the text field itself, such as a ref. */
     inputProps?: Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSubmit" | "placeholder">;
 };
-export declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled, sendsWithoutText, attachments, variant, autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }: ChatComposerProps): import("@types/react").JSX.Element;
+export declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled, sendsWithoutText, attachments, onPasteFiles, dictation, variant, autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }: ChatComposerProps): import("react").JSX.Element;
+/** A tool for the sheet composer's bar, such as the paperclip: its icon alone. */
+export declare function ChatComposerTool({ className, ...props }: Omit<ComponentProps<"button">, "aria-label"> & {
+    "aria-label": string;
+}): import("react").JSX.Element;
+/** The microphone's loudness while the host takes dictation, each level 0 to 1, newest last. */
+export type ChatDictation = {
+    levels: readonly number[];
+    listening: boolean;
+};
+/**
+ * Dictation's waveform: a bar per level, each as tall as its level; flat while `listening` is
+ * off, such as while the host turns what it heard into text.
+ */
+export declare function ChatDictationWaveform({ levels, listening, className, ...props }: ComponentProps<"div"> & ChatDictation): import("react").JSX.Element;
 export type ChatBubbleProps = ComponentProps<"div"> & {
     side: "user" | "assistant";
     /** Where the bubble sits in its run of messages from one side; see `listMessageGroupPositions`. */
     groupPosition?: "single" | "first" | "middle" | "last";
 };
-/** A message bubble in the agent sheet. */
-export declare function ChatBubble({ side, groupPosition, className, ...props }: ChatBubbleProps): import("@types/react").JSX.Element;
+/** A message bubble: the user's raised on the right, another author's filled on the left. */
+export declare function ChatBubble({ side, groupPosition, className, ...props }: ChatBubbleProps): import("react").JSX.Element;
 /** A centered line between bubbles: a finished tool call, a decision, something the page did. */
 export declare function ChatSystemLine({ tone, className, ...props }: ComponentProps<"div"> & {
     tone?: "muted" | "error";
-}): import("@types/react").JSX.Element;
-/** Three pulsing dots: the assistant is typing. */
-export declare function ChatTypingDots({ className, ...props }: ComponentProps<"span">): import("@types/react").JSX.Element;
-export declare function ChatAction({ className, ...props }: ComponentProps<"button">): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+export declare function ChatAction({ className, ...props }: ComponentProps<"button">): import("react").JSX.Element;
+export type ChatSourceCardProps = {
+    /** The source's name, such as "Vendor portal" or a rule's. */
+    label: ReactNode;
+    icon?: ReactNode;
+    /** What the source says that the reply relies on. */
+    children: ReactNode;
+    /** Under it, who entered it or when. */
+    meta?: ReactNode;
+    /** `yellow` marks a source the reply weighs, such as one of two rules in conflict. */
+    tone?: "neutral" | "yellow";
+    /** Makes the card a link to the source. */
+    href?: string;
+    className?: string;
+};
+/** A source cited in a reply, as a card of what it says under its name. */
+export declare function ChatSourceCard({ label, icon, children, meta, tone, href, className, }: ChatSourceCardProps): import("react").JSX.Element;
 /** Who wrote a message: drawn as the avatar beside its group and named in the group's footer. */
 export type ChatAuthor = {
     name: string;
@@ -58,7 +100,8 @@ export type ChatAuthor = {
 };
 /**
  * A file sent with a message, linked when it has a `url`. With the thread's `attachmentTiles`, an
- * image (`mediaType` `image/*`) with a `url` shows as a thumbnail.
+ * image (`mediaType` `image/*`) shows as a thumbnail; one with no `url` loads through the thread's
+ * `resolveAttachmentUrl`.
  */
 export type ChatAttachment = {
     id: string;
@@ -66,16 +109,39 @@ export type ChatAttachment = {
     url?: string | null;
     mediaType?: string;
 };
-/** A source a reply cites, linked when it has an `href`. */
+/**
+ * A source a reply cites: a link in the row under it, linked when it has an `href`; with a
+ * `quote`, a `ChatSourceCard` of what it says.
+ */
 export type ChatSource = {
     id: string;
     label: ReactNode;
     href?: string;
+    /** What the source says that the reply relies on, such as a value or a rule. */
+    quote?: ReactNode;
+    /** Leads the card's label, such as the source's kind as an icon. */
+    icon?: ReactNode;
+    /** Under the card's quote: who entered it, or when. */
+    meta?: ReactNode;
+    tone?: ChatSourceCardProps["tone"];
+};
+/** A step the agent took on its way to a reply: a thought, or a tool it called. */
+export type ChatStep = {
+    id: string;
+    kind: "reasoning" | "tool";
+    /** What it did, as one line, such as "Search invoices". */
+    title: string;
+    /**
+     * More about it, such as the rest of the thought. Everyone reading the thread sees it, so never
+     * a tool call's raw arguments.
+     */
+    detail?: string;
+    status: "running" | "completed" | "failed";
 };
 /**
- * One entry of a thread: a message from either side, a centered line, the assistant typing, a
- * failure with its retry, or something of the caller's own, such as an
- * approval card, drawn by `renderCustom` in the side's flow.
+ * One entry of a thread: a message from either side, a centered line, the agent at work, the
+ * steps it took, a failure with its retry, or something of the caller's own, such as an approval
+ * card, drawn by `renderCustom` in the side's flow.
  */
 export type ChatThreadEntry<Custom = never> = {
     id: string;
@@ -89,20 +155,32 @@ export type ChatThreadEntry<Custom = never> = {
     attachments?: readonly ChatAttachment[];
     /** Still on its way: the footer says Sending in place of the time. */
     sending?: boolean;
-    /** What the reply cites, in a row under it. */
+    /** What the reply cites: links in a row under it, and the ones with a quote as cards. */
     sources?: readonly ChatSource[];
-    /** Controls at the end of the group's footer, such as Copy. */
+    /** Controls beside the message, shown while it is hovered or focused, such as Copy. */
     actions?: ReactNode;
+    /** Buttons under the message for what it suggests doing, always shown. */
+    suggestedActions?: ReactNode;
+    /** A closing line under the message, such as what the reply read. */
+    footnote?: ReactNode;
 } | {
     kind: "line";
     text: ReactNode;
     tone?: "muted" | "error";
-} | {
+}
+/** The agent at work before its reply: what it is doing, the locale's "Working" by default. */
+ | {
     kind: "typing";
     label?: ReactNode;
 } | {
+    kind: "steps";
+    steps: readonly ChatStep[];
+}
+/** A reply that did not finish: `title` over why, and Try again under it. */
+ | {
     kind: "failure";
-    message: ReactNode;
+    title?: ReactNode;
+    message?: ReactNode;
     onRetry: () => void;
 } | {
     kind: "custom";
@@ -117,19 +195,31 @@ export type ChatThreadProps<Custom = never> = {
     renderCustom?: (data: Custom) => ReactNode;
     /** How a footer writes the time; the time of day, dated once not today, otherwise. */
     formatTime?: (at: number) => string;
-    /** `compact` trims the padding around the thread and between groups, as the agent sheet does. */
+    /** `compact` trims the padding around the thread and between groups. */
     density?: "comfortable" | "compact";
+    /**
+     * `bubble`, the default, draws every message in a bubble, the assistant's beside its author's
+     * avatar, with the author and time under each group. `plain` draws the assistant's replies as
+     * text on the sheet, the thread's full width, with no avatar and no author or time, as the
+     * agent sheet does.
+     */
+    replyStyle?: "bubble" | "plain";
     /** Draws a message's files as tiles over its bubble, rather than as names inside it. */
     attachmentTiles?: boolean;
     /** Heads each day's entries with its date, for a thread that runs over days. */
     dayLabels?: boolean;
+    /**
+     * Loads the link of an attachment with no `url`, such as a file the service serves only with a
+     * bearer token, for its thumbnail and the lightbox; see `ResolveFileUrl`.
+     */
+    resolveAttachmentUrl?: ResolveFileUrl<ChatAttachment>;
     className?: string;
 };
-export declare function ChatThread<Custom = never>({ entries, assistant, renderCustom, formatTime, density, attachmentTiles, dayLabels, className, }: ChatThreadProps<Custom>): import("@types/react").JSX.Element;
+export declare function ChatThread<Custom = never>({ entries, assistant, renderCustom, formatTime, density, replyStyle, attachmentTiles, dayLabels, resolveAttachmentUrl, className, }: ChatThreadProps<Custom>): import("react").JSX.Element;
 export type ChatSuggestionsProps = {
     suggestions: readonly string[];
     onSelect: (suggestion: string) => void;
     className?: string;
 };
 /** Prompts to start a conversation from, stacked at the foot of an empty thread. */
-export declare function ChatSuggestions({ suggestions, onSelect, className }: ChatSuggestionsProps): import("@types/react").JSX.Element;
+export declare function ChatSuggestions({ suggestions, onSelect, className }: ChatSuggestionsProps): import("react").JSX.Element;