inline-chat-kit 0.49.0

package/dist/QuestionGroup/QuestionGroup.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { Answer, Question } from '../QuestionCard/types';
+/** Below this, folding saves less room than the summary row costs. */
+export declare const FOLDABLE_FROM = 3;
+/**
+ * What the fold is made of, in numbers.
+ *
+ * Springs for anything that moves, tweens for opacity alone.
+ *
+ * That split is not a preference. A spring is a description of *travel* —
+ * where a thing is going and how it arrives — and opacity has nowhere to
+ * travel: it is bounded at 0 and 1, so a spring with any bounce in it
+ * overshoots into a clamp and spends the overshoot sitting still. Position and
+ * size have no such ceiling, which is exactly why they are worth springing.
+ *
+ * `visualDuration` rather than stiffness and damping, for the same reason
+ * throughout: the two of them describe one spring between them without either
+ * answering "how long is this", which is the only question anybody tuning it
+ * is asking. Motion solves the spring for the duration you name.
+ */
+export interface FoldMotion {
+    /** How long the ground looks like it takes to resize, in seconds. */
+    visualDuration: number;
+    /** The ground's overshoot, 0–1. */
+    bounce: number;
+    /** How long a row takes to arrive, in seconds. */
+    rowDuration: number;
+    /** A row's overshoot, 0–1. Enough to read as arriving, not as bouncing. */
+    rowBounce: number;
+    /** How far above its place a row starts, in pixels. */
+    rowOffset: number;
+    /** Between one row and the next, in seconds. */
+    stagger: number;
+    /** A row's fade, in seconds. Tween: see the note above. */
+    fadeIn: number;
+    /** And the fade of one leaving. */
+    fadeOut: number;
+    /**
+     * How long the arriving body waits, in seconds.
+     *
+     * Not a stylistic pause — it is what stops the two bodies from being in the
+     * same pixels at once. They are anchored to the same top edge, so the folded
+     * row and the first card always want that same band; crossfading them put
+     * two different sentences on top of each other at half opacity, which is
+     * mush rather than motion. At `fadeOut` the one is gone before the other
+     * starts, and the box growing underneath is what carries the eye across.
+     */
+    fadeInDelay: number;
+}
+export declare const defaultFoldMotion: FoldMotion;
+export interface QuestionGroupProps {
+    /** Distinguishes one group's layout animations from another's. */
+    id: string;
+    /**
+     * What this step is about, at the top of the group.
+     *
+     * Also the fold control when there is one — which is the point of putting it
+     * there. A control at the top does not move when the thing under it opens,
+     * so folding stops being two shapes swapping places and becomes a body
+     * changing under a header that stays put.
+     *
+     * Left out on a foldable group, the count stands in, so the control still
+     * has a name.
+     */
+    title?: ReactNode;
+    questions: Question[];
+    answers: Record<string, Answer | undefined>;
+    /** Index of the question being answered, or `null` when none is. */
+    activeIndex?: number | null;
+    /** Offer to fold the whole group into one row. */
+    collapsible?: boolean;
+    onCommit?: (questionId: string, answer: Answer) => void;
+    onEdit?: (index: number) => void;
+    readOnly?: boolean;
+    labels?: Partial<Record<"answers", string>>;
+    /** Overrides for the fold's timing. See `defaultFoldMotion`. */
+    foldMotion?: Partial<FoldMotion>;
+    className?: string;
+}
+/**
+ * One step of a questionnaire: the surface holding its questions.
+ *
+ * Once the conversation has moved past it, it folds down to a single row.
+ * Not a peek at the list — a peek costs more height than the answers it shows,
+ * and a conversation with four half-open steps above it is unreadable.
+ */
+export declare function QuestionGroup({ id, title, questions, answers, activeIndex, collapsible, onCommit, onEdit, readOnly, labels, foldMotion, className, }: QuestionGroupProps): import("react").JSX.Element;

package/dist/Reasoning/Reasoning.d.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/** Still working it out, or finished. */
+export type ReasoningState = "thinking" | "done";
+type Labels = Record<"thinking" | "thought" | "thoughtFor", string>;
+export interface ReasoningProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The thinking itself. Prose, not structure — see `Tool` for that. */
+    children: ReactNode;
+    state?: ReasoningState;
+    /**
+     * How long it took, in ms.
+     *
+     * Left out, the block times itself: it starts a clock when it begins
+     * thinking and reads it when it stops. Pass one when you already know —
+     * replaying a transcript, where the thinking did not happen just now.
+     */
+    duration?: number;
+    /** Controlled. Leave it out and the block looks after itself. */
+    open?: boolean;
+    /** Where it starts, overruling the block's own preference. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<Labels>;
+}
+/**
+ * What the model worked through before it answered.
+ *
+ * **Open while it thinks, folded away once the answer starts.** That is the
+ * one detail every kit that ships this has converged on, and it is right:
+ * thinking is worth watching while it is happening and worth almost nothing
+ * afterwards — but it has to stay reachable, because the times it matters are
+ * exactly the times the answer looks wrong.
+ *
+ * Folding is the block's *preference*, not something done to the reader. Open
+ * it and it stays open, however many times the state changes underneath.
+ */
+export declare function Reasoning({ children, state, duration, open, defaultOpen, onOpenChange, labels, className, ...rest }: ReasoningProps): import("react").JSX.Element;
+export {};

package/dist/ReplyThreadPopup/ReplyThreadPopup.d.ts

@@ -0,0 +1,18 @@
+import { ChatTurn, SendContext } from '../useChatTurns/useChatTurns';
+/** @deprecated Use `ChatTurn`. Kept so existing imports keep resolving. */
+export type Turn = ChatTurn;
+export interface ReplyThreadPopupProps {
+    activeReply: {
+        text: string;
+        rect: DOMRect;
+    };
+    onClose: () => void;
+    onSave?: () => void;
+    /**
+     * Produce the reply to a message sent inside the thread. Receives the
+     * message and the passage the thread hangs off. Required — the popup has no
+     * answers of its own to fall back on.
+     */
+    onSendMessage: (message: string, quotedText: string, context: SendContext) => AsyncIterable<string> | Promise<string> | string;
+}
+export declare function ReplyThreadPopup({ activeReply, onClose, onSave, onSendMessage }: ReplyThreadPopupProps): import("react").JSX.Element;

package/dist/Sources/Sources.d.ts

@@ -0,0 +1,46 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/** Where a claim came from. */
+export interface Source {
+    id: string;
+    title: string;
+    /** Opened when the entry is a link. Without one it is a row, not a link. */
+    url?: string;
+    /** A domain, a filename, a page — whatever names where this is. */
+    origin?: string;
+    /** The passage in the source that carries the claim. */
+    quote?: string;
+}
+type Labels = {
+    title: string;
+    one: string;
+    many: string;
+};
+export interface SourcesProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onSelect"> {
+    sources: Source[];
+    /** Heads the list. Defaults to `labels.title`. */
+    title?: ReactNode;
+    /** Offer to fold the list to its own row. */
+    collapsible?: boolean;
+    /**
+     * The one just arrived at, from a citation in the text.
+     *
+     * Marked rather than scrolled to: the list is directly under the answer, and
+     * moving the page under somebody who clicked a marker in a sentence they
+     * were reading loses them the sentence.
+     */
+    activeId?: string | null;
+    onSelect?: (source: Source, index: number) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<Labels>;
+}
+/**
+ * What the answer was drawn from, numbered to match the markers in it.
+ *
+ * Open by default. Sources are the difference between an answer somebody can
+ * check and one they have to trust, and folding that away by default says the
+ * opposite of what a citation is for.
+ */
+export declare function Sources({ sources, title, collapsible, activeId, onSelect, open, defaultOpen, onOpenChange, labels, className, ...rest }: SourcesProps): import("react").JSX.Element;
+export {};

package/dist/SystemMessage/SystemMessage.d.ts

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Two, not three.
+ *
+ * `Context` settled this already: an amber in the middle makes somebody learn
+ * a scale to read a state they can already read in words. Something either
+ * went wrong or it did not.
+ */
+export type SystemTone = "notice" | "danger";
+export interface SystemMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: ReactNode;
+    tone?: SystemTone;
+}
+/**
+ * The conversation itself saying something — not the reader, not the agent.
+ *
+ * "The oldest messages are dropping out of the window." "The model changed
+ * partway through this answer." "You went offline." Things that happened *to*
+ * the conversation, which until now had nowhere to be said: `Context` warns
+ * that the window is nearly full and then nothing speaks when it fills.
+ *
+ * **No glyph**, deliberately, and for the reason the approval's shield came
+ * off an hour before this was written. Every picture in this kit carries a
+ * state the words beside it also carry — queued, running, failed, allowed — so
+ * that a reader the picture does not reach loses nothing. An icon here would
+ * carry "something is being announced", next to a sentence announcing it. The
+ * tint says which of the two tones it is and the sentence says the rest, which
+ * is the only part anybody can act on.
+ *
+ * **No dismiss, and no action.** It is a line of the transcript rather than a
+ * toast: dismissing one would be editing what happened. A host that needs a
+ * button under it composes one, which costs them a line and costs this
+ * component a whole API.
+ *
+ * **No live region either.** The kit has one, shared and written to on a later
+ * tick — see `announce`. A second one says everything twice, which is the
+ * fault that region exists to have fixed.
+ */
+export declare function SystemMessage({ children, tone, className, ...rest }: SystemMessageProps): import("react").JSX.Element;

package/dist/TaskList/TaskList.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { WorkState } from '../stateGlyph/StateGlyph';
+/** The same four as a tool call. See `StateGlyph`. */
+export type TaskState = WorkState;
+export interface Task {
+    id: string;
+    label: ReactNode;
+    state?: TaskState;
+    /** A line under the label — what it found, or why it failed. */
+    detail?: ReactNode;
+}
+type Labels = Record<TaskState, string> & {
+    /** `{done}` and `{total}` are filled in. */
+    progress: string;
+};
+export interface TaskListProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    tasks: Task[];
+    /** Names the list, and gives it a row to fold into. */
+    title?: ReactNode;
+    /**
+     * Let the whole list fold away.
+     *
+     * It folds itself once every task is done — a plan is worth watching while
+     * it runs and worth little afterwards — and anybody reading it can overrule
+     * that, in either direction, for good.
+     */
+    collapsible?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<Labels>;
+}
+/**
+ * What the agent means to do, what it is doing, and what it has finished.
+ *
+ * The order never changes. A list that sorted itself as work progressed would
+ * move the line somebody is reading out from under them, and the sequence is
+ * half of what the list is saying — these steps, in this order. Only the
+ * glyphs change.
+ */
+export declare function TaskList({ tasks, title, collapsible, open, defaultOpen, onOpenChange, labels, className, ...rest }: TaskListProps): import("react").JSX.Element;
+export {};

package/dist/TextHighlighter/TextHighlighter.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { Source } from '../Sources/Sources';
+export interface TextHighlighterProps {
+    text: string;
+    selectionMode?: "marker" | "precise";
+    onHighlightComplete?: (highlightedText: string) => void;
+    onReplyInThread?: (text: string, rect: DOMRect) => void;
+    /**
+     * What `[^1]` in the text points at, in the order the answer cites them.
+     *
+     * Leave it out and a marker still draws — as a number with nothing behind
+     * it, which is what it is until the list arrives.
+     */
+    sources?: Source[];
+    onSelectSource?: (index: number, source?: Source) => void;
+}
+export declare function TextHighlighter({ text, selectionMode, onHighlightComplete, onReplyInThread, sources, onSelectSource, }: TextHighlighterProps): React.JSX.Element;

package/dist/Tool/Tool.d.ts

@@ -0,0 +1,41 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { WorkState } from '../stateGlyph/StateGlyph';
+/** Queued, working, finished, or failed — the kit's four, shared with `TaskList`. */
+export type ToolState = WorkState;
+type Labels = Record<"input" | "output" | "error" | ToolState, string>;
+export interface ToolProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    /** What was called. Set in mono: it is an identifier, not prose. */
+    name: string;
+    state?: ToolState;
+    /** A sentence for what it did — "Searched the web", "Read 3 files". */
+    summary?: ReactNode;
+    /**
+     * What it was called with.
+     *
+     * A string is shown as text and an object as JSON. Anything you want drawn
+     * some other way, pass as an element and it is rendered untouched.
+     */
+    input?: unknown;
+    /** What came back. Read the same way as `input`. */
+    output?: unknown;
+    /** What went wrong. Drawn instead of the output, and opens the row. */
+    error?: ReactNode;
+    /** How long it took, in ms. Shown once it has finished. */
+    duration?: number;
+    /** Open, controlled. Leave out and the row keeps its own. */
+    open?: boolean;
+    /** Where it starts. Defaults to open only if it failed. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<Labels>;
+}
+/**
+ * One tool call: what was run, what with, what came back.
+ *
+ * Collapsed, because most of the time nobody cares — and open when it failed,
+ * because an error nobody can see has not been reported. The glyph says which
+ * state it is in and the row says so in words too; a status carried only by
+ * colour is a status half the people reading it do not have.
+ */
+export declare function Tool({ name, state, summary, input, output, error, duration, open, defaultOpen, onOpenChange, labels, className, ...rest }: ToolProps): import("react").JSX.Element;
+export {};

package/dist/announce/announce.d.ts

@@ -0,0 +1,27 @@
+/**
+ * A shared live region, for telling a screen reader what just happened.
+ *
+ * Three things about live regions decide the shape of this file:
+ *
+ * 1. The region has to be in the document *before* the text goes into it.
+ *    Adding a region and its content in the same commit is, to most screen
+ *    readers, an ordinary DOM insertion — nothing is spoken. So the node is
+ *    created first and written to on a later tick.
+ * 2. Writing the same string twice is not a change, and is not announced.
+ *    Clearing first makes a repeated answer speak again.
+ * 3. One region per politeness, shared by every component on the page. Several
+ *    regions competing is how announcements get dropped or interleaved.
+ *
+ * This is deliberately not a React component: it must not be something a
+ * consumer can forget to render.
+ */
+export type Politeness = "polite" | "assertive";
+/**
+ * Speak a message. Empty strings are ignored — clearing is not an announcement.
+ */
+export declare function announce(message: string, politeness?: Politeness): void;
+/**
+ * Drop the regions and anything queued. For tests, so one case cannot hear
+ * what a previous one said.
+ */
+export declare function resetAnnouncer(): void;

package/dist/disclosure/DisclosureBody.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface DisclosureBodyProps {
+    /** What the header's `aria-controls` points at. */
+    id: string;
+    open: boolean;
+    /** On the animated box, so a caller can pad or lay out what is revealed. */
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * What a `DisclosureHeader` opens, and how it opens.
+ *
+ * The outer box is **always rendered**, empty and flat when shut, so the
+ * header's `aria-controls` always points at something — a control that names
+ * an id nothing has is a control that says nothing.
+ *
+ * The reveal was ten lines of identical `motion` props in five components. The
+ * height animation is what makes growing read as a reveal rather than as
+ * content arriving before its container has caught up, and `overflow: hidden`
+ * on the moving box is what keeps it from spilling on the way.
+ */
+export declare function DisclosureBody({ id, open, className, children }: DisclosureBodyProps): import("react").JSX.Element;

package/dist/disclosure/DisclosureHeader.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+export interface DisclosureHeaderProps {
+    /**
+     * `band` is a full-width row — it has a right edge, so the meta and the
+     * chevron are pushed to it. `inline` is a label that hugs its own words,
+     * for a header that sits in the flow of an answer as an aside.
+     *
+     * The two are not a style choice. An inline header's chevron pushed to a
+     * right edge 500px away floats alone in white space with nothing beside it.
+     */
+    fit?: "band" | "inline";
+    open: boolean;
+    /** Leave it out and this is a heading rather than a control — no chevron,
+        no `aria-expanded`, nothing to press. */
+    onToggle?: () => void;
+    /** The id of the box it opens. Always present, so this always points at
+        something even while the box is empty. */
+    controls: string;
+    /** A control with nothing to open yet. Still a row worth reading. */
+    disabled?: boolean;
+    glyph?: ReactNode;
+    /** The control's name. */
+    label: ReactNode;
+    /** Shimmers the label: the kit's way of saying "still happening". */
+    pending?: boolean;
+    /** A duration, a count — pushed to the right end of a band. */
+    meta?: ReactNode;
+    /** Anything between the label and the meta. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * The row you click to open something.
+ *
+ * Five components had one of these and the markup was written out five times,
+ * with two pairs byte-for-byte identical and the others differing in ways
+ * nobody had decided on. The shimmer under the label was in two of them, with
+ * the same twenty lines of gradient in each.
+ *
+ * What it does not do is force one shape on all five — see `fit`.
+ */
+export declare function DisclosureHeader({ fit, open, onToggle, controls, disabled, glyph, label, pending, meta, children, className, }: DisclosureHeaderProps): import("react").JSX.Element;

package/dist/disclosure/useDisclosure.d.ts

@@ -0,0 +1,30 @@
+export interface DisclosureOptions {
+    /** Controlled. Leave it out and the row keeps its own. */
+    open?: boolean;
+    /** Where it starts, when the row's own preference is not what you want. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * What the row would do if nobody had an opinion.
+     *
+     * Read every render, so it follows the state: a tool call that fails later
+     * opens itself, a reasoning block folds away when the answer starts.
+     */
+    preferOpen: boolean;
+}
+/**
+ * Open or shut, decided by three sources in order of who gets the last word:
+ * the host if it is controlling the row, then whoever clicked it, then the
+ * row's own preference.
+ *
+ * That order is the whole point, and it is why this is not an effect. An
+ * effect forcing the row open on a state change would also reopen one that
+ * somebody had deliberately shut — showing a reader again what they have
+ * already dismissed is not help. Derived, a reader's decision simply outlives
+ * every state change after it, and a row nobody has touched still follows
+ * along.
+ */
+export declare function useDisclosure({ open, defaultOpen, onOpenChange, preferOpen }: DisclosureOptions): {
+    isOpen: boolean;
+    toggle: () => void;
+};

package/dist/duration/formatDuration.d.ts

@@ -0,0 +1,9 @@
+/**
+ * How long something took, in words somebody reads rather than in the number
+ * the clock handed over.
+ *
+ * `840ms` under a second, `1.2s` over it, whole seconds past ten. Nobody reads
+ * `1173ms`, and the tenth stops mattering once there are two digits in front
+ * of it.
+ */
+export declare function formatDuration(ms: number): string;