inline-chat-kit 0.49.0

package/dist/ChatTurnRow/ChatTurnRow.d.ts

@@ -0,0 +1,115 @@
+import { Ref } from 'react';
+import { Verdict } from '../AnswerActions/AnswerActions';
+import { ChatInputHandle, InlineAnimConfig } from '../ChatInput/ChatInput';
+import { Attachment } from '../Attachments/Attachments';
+import { TranscribeHandler } from '../voice/useVoiceInput';
+import { Decision } from '../Approval/Approval';
+import { FoldMotion } from '../QuestionGroup/QuestionGroup';
+import { Answer } from '../QuestionCard/types';
+import { ChatTurn } from '../useChatTurns/useChatTurns';
+export interface ChatTurnRowProps {
+    turn: ChatTurn;
+    /** This row owns the live composer: the one the reader types the next question into. */
+    isActiveInput?: boolean;
+    inputRef?: Ref<ChatInputHandle> | null;
+    placeholder?: string;
+    animationConfig?: InlineAnimConfig;
+    /** Overrides for a question group's fold timing. See `defaultFoldMotion`. */
+    foldMotion?: Partial<FoldMotion>;
+    /**
+     * Which artifact the pane is showing, so the card that opened it can say so.
+     * Held by `useArtifacts`, above both of them.
+     */
+    openArtifactId?: string | null;
+    onOpenArtifact?: (turnId: string, artifactId: string) => void;
+    /** Stagger for the entrance, in seconds. */
+    entranceDelay?: number;
+    /** Passed through to the highlighter over the answer. */
+    selectionMode?: "marker" | "precise";
+    /**
+     * Passed through to the composer. Given, this row's live input offers a
+     * microphone; left out, it does not. See `ChatInput`.
+     */
+    onTranscribe?: TranscribeHandler;
+    /**
+     * Where the composer sits in the row.
+     *
+     * `end` by default, because it is about to become the reader's own bubble
+     * and those sit right. `stretch` fills the row instead, which is what an
+     * *opening* composer wants: on an empty conversation it is not a message
+     * yet, it is the thing under the openers — and a pill floating at the right
+     * edge of a centred block reads as unrelated to the block.
+     */
+    questionAlign?: "end" | "stretch";
+    /**
+     * Every callback takes the turn's id rather than being closed over per row.
+     *
+     * Not a style choice. An inline arrow is a new function on every render, and
+     * a new function prop is what makes `memo` give up — see the note on the
+     * component below. Taking the id lets a consumer hoist these once.
+     */
+    onDraft?: (id: string, value: string) => void;
+    onSubmit?: (id: string, value: string, attachments: Attachment[]) => void;
+    onStop?: () => void;
+    onEdit?: (id: string) => void;
+    onCancelEdit?: (id: string) => void;
+    /** Defaults to writing to the clipboard. */
+    onCopy?: (value: string) => void;
+    onHighlight?: (turnId: string, text: string) => void;
+    onReplyInThread?: (text: string, rect: DOMRect) => void;
+    /**
+     * The row of actions under a settled answer.
+     *
+     * Copy is always offered once there is something to copy. Regenerate and the
+     * thumbs are drawn only when there is somewhere for them to report to, so a
+     * host that has no use for them is not showing a button that does nothing.
+     *
+     * They appear when the answer *settles*, not while it arrives: offering to
+     * copy a half-written answer, or to rate one, is offering the wrong thing.
+     */
+    onRegenerate?: (id: string) => void;
+    /** Show another of this turn's answers. Without it the control is inert, so
+        it is not drawn. */
+    onShowVersion?: (id: string, index: number) => void;
+    onFeedback?: (id: string, verdict: Verdict | null) => void;
+    feedback?: Verdict | null;
+    /** Leave the row out entirely. */
+    answerActions?: boolean;
+    /**
+     * A question the assistant asked, answered.
+     *
+     * The row does not keep the answer — `turn.parts` is the host's, and this is
+     * how it hears that one of them changed. `useChatTurns` gives you
+     * `updatePart` to write it back.
+     */
+    onAnswerQuestion?: (turnId: string, partId: string, questionId: string, answer: Answer) => void;
+    /** Somebody asked to change an answer already given. */
+    onEditQuestion?: (turnId: string, partId: string, index: number) => void;
+    /**
+     * Something the agent asked to do, decided.
+     *
+     * Same shape as the question callbacks and for the same reason: the row does
+     * not keep the decision, it reports it. Write it back with `updatePart`.
+     */
+    onDecideApproval?: (turnId: string, partId: string, decision: Decision) => void;
+    className?: string;
+}
+/**
+ * One turn: the question as a composer that has become a bubble, and the
+ * answer beneath it.
+ *
+ * Not `Message`, because it is not one. The user half is a live input that
+ * morphs into its own bubble rather than a rendered record of what was typed
+ * — which is the whole idea, and the reason the row is a turn.
+ *
+ * **Memoised, and the memo is load-bearing.** `useChatTurns` already leaves
+ * untouched turns referentially identical when it rewrites one of them, but
+ * that only pays off if the rows can act on it. Left inline in a `.map()`,
+ * every row re-renders on every flush anyway, because the parent re-rendered.
+ * Measured before this existed: streaming a second answer produced 366 DOM
+ * mutations inside the first, already-finished turn.
+ *
+ * The two halves have to be in place together. Stable objects give React the
+ * grounds to skip; `memo` is what makes it skip.
+ */
+export declare const ChatTurnRow: import('react').MemoExoticComponent<({ turn, isActiveInput, inputRef, placeholder, animationConfig, foldMotion, openArtifactId, onOpenArtifact, entranceDelay, selectionMode, questionAlign, onDraft, onSubmit, onStop, onEdit, onCancelEdit, onCopy, onHighlight, onReplyInThread, onRegenerate, onShowVersion, onFeedback, feedback, answerActions, onAnswerQuestion, onEditQuestion, onDecideApproval, className, onTranscribe, }: ChatTurnRowProps) => import("react").JSX.Element>;

package/dist/Chip/Chip.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface ChipProps {
+    children: ReactNode;
+    className?: string;
+}
+/** A small, self-contained value — an answer given, a count, a tag. */
+export declare function Chip({ children, className }: ChipProps): import("react").JSX.Element;

package/dist/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onCopy"> {
+    code: string;
+    /** The fence's language. Unknown ones render unhighlighted. */
+    lang?: string;
+    /** Shown top-left. Defaults to the language; pass `false` for no bar at all. */
+    label?: string | false;
+    /** Set false for a block nobody is meant to take away. */
+    copyable?: boolean;
+    /** Defaults to the clipboard. */
+    onCopy?: (code: string) => void;
+    /** How long the button stays confirmed, in ms. */
+    copiedFor?: number;
+}
+/**
+ * A fenced block: language, a copy button, and code that scrolls sideways
+ * rather than widening the answer.
+ *
+ * Deliberately not markable. The rest of an answer is split into word tokens
+ * so a marker can be drawn over it; preformatted text split on whitespace
+ * stops being preformatted, so this renders whole and the highlighter skips
+ * it. Copy is what people want from code anyway.
+ */
+export declare function CodeBlock({ code, lang, label, copyable, onCopy, copiedFor, className, ...rest }: CodeBlockProps): import("react").JSX.Element;

package/dist/CodeBlock/grammars.d.ts

@@ -0,0 +1,16 @@
+/** Registered under the names `highlight.ts` claims. A test holds the two
+    lists against each other, since one is written out and one is not. */
+export declare const createHighlighter: () => {
+    highlight: (language: string, value: string, options?: Readonly<import('lowlight').Options> | null | undefined) => import('hast').Root;
+    highlightAuto: (value: string, options?: Readonly<import('lowlight').AutoOptions> | null | undefined) => import('hast').Root;
+    listLanguages: () => Array<string>;
+    register: {
+        (grammars: Readonly<Record<string, import('highlight.js').LanguageFn>>): undefined;
+        (name: string, grammar: import('highlight.js').LanguageFn): undefined;
+    };
+    registerAlias: {
+        (aliases: Readonly<Record<string, ReadonlyArray<string> | string>>): undefined;
+        (language: string, alias: ReadonlyArray<string> | string): undefined;
+    };
+    registered: (aliasOrName: string) => boolean;
+};

package/dist/CodeBlock/highlight.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Syntax highlighting, loaded only once something needs it.
+ *
+ * `lowlight` and eleven grammars are **22.4 kB gzipped** — more than a third
+ * of this package, for a thing most conversations never show. Imported at the
+ * top of the module they were in everybody's bundle whether or not an answer
+ * ever contained a fence.
+ *
+ * So the grammars sit behind a dynamic `import()` and the module itself keeps
+ * only the names. A block renders its code unhighlighted on the first paint
+ * and colours in when the chunk lands; every block after that is highlighted
+ * from the first paint, because the loaded highlighter is kept.
+ *
+ * What is *not* deferred is knowing whether a language can be highlighted at
+ * all — `canHighlight` answers off the list below, so a caller can decide what
+ * to draw without pulling 22 kB to find out.
+ */
+/** A run of code with one highlight class, or none. */
+export interface CodeToken {
+    value: string;
+    /** The `hljs-` class, without the prefix. `null` for plain text. */
+    kind: string | null;
+}
+/** The whole block, one run, no colour. What a block shows before the chunk
+    arrives and what it keeps for a language nothing here can read. */
+export declare const plain: (code: string) => CodeToken[];
+/** Whether the fence's language is one we can actually colour. */
+export declare const canHighlight: (lang?: string) => boolean;
+export type Highlighter = (code: string, lang?: string) => CodeToken[];
+/** The highlighter, if some block has already paid for it. */
+export declare const loaded: () => Highlighter | null;
+/**
+ * Fetch the grammars, once.
+ *
+ * Concurrent callers share the one promise: three code blocks in an answer
+ * arrive together, and three requests for the same chunk is two too many.
+ */
+export declare function loadHighlighter(): Promise<Highlighter>;

package/dist/Context/Context.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactNode } from 'react';
+type Labels = {
+    name: string;
+    /** Between the two numbers: "128k of 1M". */
+    of: string;
+    tokens: string;
+    /** Said once it is past `warnAt`, and it should say what happens next. */
+    nearlyFull: string;
+};
+export interface ContextProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    used: number;
+    total: number;
+    /** Where it stops being quiet. A fraction, default `0.8`. */
+    warnAt?: number;
+    /**
+     * Drawn beside the ring. The percentage by default; `false` for the ring on
+     * its own, which is what a header usually wants.
+     */
+    label?: ReactNode | false;
+    labels?: Partial<Labels>;
+}
+/** `128000` → `128k`, `1000000` → `1M`. Nobody reads the zeroes. */
+export declare function formatCount(n: number): string;
+/**
+ * How full the context window is.
+ *
+ * Small on purpose. It is a gauge, not a feature, and it earns its place for
+ * one reason: it is the only honest way to explain why a long conversation
+ * starts forgetting. Without it the forgetting looks like the model being
+ * stupid rather than the window being full.
+ *
+ * Which is why the warning says what happens next rather than only that a
+ * number is high. "82%" tells somebody nothing they can act on.
+ */
+export declare function Context({ used, total, warnAt, label, labels, className, ...rest }: ContextProps): import("react").JSX.Element;
+export {};

package/dist/Conversation/Conversation.d.ts

@@ -0,0 +1,64 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ConversationProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    /**
+     * How close to the end still counts as following, in pixels. Below this the
+     * view keeps up on its own; above it, the reader is reading and is left
+     * alone.
+     */
+    threshold?: number;
+    /** The button offering a way back. `false` for none. */
+    scrollButton?: boolean;
+    scrollButtonLabel?: string;
+    /**
+     * The id of an element to hold at the top of the view — a turn, usually.
+     *
+     * Without it the view follows the end of the content, which is what a chat
+     * that stacks downwards wants. With it, the named element is brought to the
+     * top and **held** there while the answer grows underneath, so a reader sees
+     * their question and its answer and nothing else. Change the id and the view
+     * moves to the new one.
+     *
+     * This needs room to scroll into: an element cannot be brought to the top of
+     * a container that ends just below it. That is what a large bottom padding
+     * on the viewport is for.
+     */
+    anchorId?: string;
+    /**
+     * How far below the top edge the anchor sits, in pixels. A fixed header over
+     * the conversation is the usual reason — without it the turn is scrolled
+     * neatly underneath and out of sight.
+     */
+    anchorOffset?: number;
+    /** Switch the whole thing off and it is a plain scroll container. */
+    follow?: boolean;
+    /**
+     * For the element that actually scrolls, which is not the one `className`
+     * lands on.
+     *
+     * There are three: a root that positions the button, the viewport that
+     * scrolls, and a wrapper whose height is what "the end" is measured from.
+     * `className` goes to the root, because that is the box a consumer lays out.
+     * Padding has to go here instead — on the scroller — or it is not padding
+     * inside the scroll at all.
+     */
+    viewportClassName?: string;
+}
+/**
+ * The scroll container: it keeps up with an answer as it arrives, and stops
+ * the instant the reader scrolls away.
+ *
+ * **It follows the end of the content, not the bottom of the container**, and
+ * those are only the same thing when nothing is padded below. This kit's demo
+ * carries a screen-height bottom padding so a turn can be pulled to the top,
+ * and scrolling to the true bottom there would push the answer off the screen
+ * to sit in front of a blank space. Measuring the content instead makes one
+ * behaviour correct for both.
+ *
+ * The other half is not fighting the reader. A naive version listens to the
+ * scroll event, cannot tell its own scrolling from theirs, and either drags
+ * them back down while they are reading or lets go entirely. This reads intent
+ * from the input — a wheel, a drag, a page key — and uses the scroll event
+ * only to measure where things ended up.
+ */
+export declare const Conversation: import('react').ForwardRefExoticComponent<ConversationProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/CustomCursor/CustomCursor.d.ts

@@ -0,0 +1 @@
+export declare function CustomCursor(): import("react").JSX.Element | null;

package/dist/EmptyState/EmptyState.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /**
+     * Openers. A blank input asks somebody to think of something; these are for
+     * the moment before they have.
+     */
+    suggestions?: string[];
+    /** Given the suggestion's text. Without it, none are drawn. */
+    onSuggestion?: (text: string) => void;
+    suggestionsLabel?: string;
+    children?: ReactNode;
+}
+/**
+ * What is on screen before anybody has asked anything.
+ *
+ * Not a landmark and not a heading by default — this sits inside a
+ * conversation the host already owns, and claiming a level in their document
+ * is not ours to do. `title` renders as text; wrap it yourself if it should be
+ * a heading.
+ */
+export declare function EmptyState({ icon, title, description, suggestions, onSuggestion, suggestionsLabel, children, className, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/GlassButton/GlassButton.d.ts

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type GlassButtonSize = "s" | "m" | "l";
+export interface GlassButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    /** Show loading spinner and disable interaction */
+    loading?: boolean;
+    /** Leading icon element */
+    iconLeft?: ReactNode;
+    /** Trailing icon element */
+    iconRight?: ReactNode;
+    /** Button size: s=32px, m=40px, l=48px */
+    size?: GlassButtonSize;
+}
+/**
+ * @deprecated Use `<Button variant="glass">`. Kept so existing installs keep
+ * working; it is a thin wrapper, not a second component.
+ */
+declare const GlassButton: import('react').ForwardRefExoticComponent<GlassButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default GlassButton;

package/dist/InlineCitation/InlineCitation.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Source } from '../Sources/Sources';
+export interface InlineCitationProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> {
+    /** 1-based, and it has to match the entry's place in `<Sources>`. */
+    index: number;
+    /** Named in the marker's label, so the marker says more than a number. */
+    source?: Source;
+    /**
+     * The passage this citation is for.
+     *
+     * Given one, the passage is **marked** — the same yellow the highlighter
+     * draws, because it is the same statement: this run of words is spoken for.
+     * Left out, the marker stands on its own after whatever precedes it.
+     */
+    children?: ReactNode;
+    /** Where the reader is taken. Without one the marker is not a control. */
+    onSelect?: (index: number, source?: Source) => void;
+    labels?: Partial<{
+        cite: string;
+    }>;
+}
+/**
+ * The numbered marker in the text, and the passage it speaks for.
+ *
+ * The kit already had a way of saying "this run of words is picked out" — the
+ * marker somebody draws over an answer to ask about it. A citation is that
+ * same statement made by the answer rather than by the reader, so it is drawn
+ * the same way rather than in a second visual language nobody has learned.
+ */
+export declare function InlineCitation({ index, source, children, onSelect, labels, className, ...rest }: InlineCitationProps): import("react").JSX.Element;

package/dist/Loader/Loader.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+export type LoaderVariant = "dots" | "shimmer";
+export interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: LoaderVariant;
+    /** The words the shimmer runs through. Ignored by `dots`. */
+    children?: React.ReactNode;
+    /**
+     * What a screen reader is told, if anything.
+     *
+     * `null` by default, and that is deliberate: `useChatTurns` already
+     * announces that a response is coming, and a second live region saying the
+     * same thing means hearing it twice. Pass a string only when nothing else
+     * is speaking for you.
+     */
+    label?: string | null;
+}
+/**
+ * The gap between sending and the first word arriving.
+ *
+ * `dots` for that gap, when there is nothing to show yet. `shimmer` for words
+ * that are standing in for something — a status line that has not settled.
+ */
+export declare function Loader({ variant, children, label, className, ...rest }: LoaderProps): import("react").JSX.Element;

package/dist/QuestionCard/QuestionCard.d.ts

@@ -0,0 +1,32 @@
+import { Answer, Question, QuestionState } from './types';
+export interface QuestionCardProps {
+    question: Question;
+    /** Shown in the badge. 1-based. */
+    number: number;
+    state: QuestionState;
+    answer?: Answer;
+    onCommit?: (answer: Answer) => void;
+    /** Called when somebody asks to change an answer already given. */
+    onEdit?: () => void;
+    /** Answers can be read but not changed. */
+    readOnly?: boolean;
+    labels?: Partial<Record<"next" | "none" | "edit", string>>;
+}
+/**
+ * What an answer looks like once folded into a row.
+ *
+ * Two at most, then a count. Three chips of unpredictable width in a row that
+ * also holds a title is a row that wraps, and a summary that wraps is not a
+ * summary.
+ */
+export declare function answerChips(question: Question, answer?: Answer): string[];
+/**
+ * One question, in whichever of its three states it is in.
+ *
+ * The card morphs between them rather than swapping: the box animates with
+ * FLIP, and the content inside counter-scales so text keeps its real size
+ * instead of stretching on the way. `overflow: hidden` is what makes growing
+ * read as a reveal rather than as content spilling out of a box that has not
+ * caught up.
+ */
+export declare function QuestionCard({ question, number, state, answer, onCommit, onEdit, readOnly, labels, }: QuestionCardProps): import("react").JSX.Element;

package/dist/QuestionCard/parts.d.ts

@@ -0,0 +1,84 @@
+import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
+export interface QuestionBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** The number or the letter. */
+    children: ReactNode;
+    /** Wearing the accent, because this is the one being answered or chosen. */
+    selected?: boolean;
+    /** Sitting on a raised card rather than on the group's own surface. */
+    onCard?: boolean;
+}
+/** The 24px square carrying a number or a letter. */
+export declare const QuestionBadge: import('react').ForwardRefExoticComponent<QuestionBadgeProps & import('react').RefAttributes<HTMLSpanElement>>;
+type OptionBase = Omit<ComponentPropsWithoutRef<"button">, "title" | "onAnimationStart" | "onAnimationEnd" | "onDrag" | "onDragStart" | "onDragEnd">;
+export interface QuestionOptionRowProps extends OptionBase {
+    /** The a/b/c badge. Left out, the row starts at its title. */
+    letter?: ReactNode;
+    /** Wins the name from the button's own `title` attribute, which is a tooltip. */
+    title: ReactNode;
+    description?: ReactNode;
+    selected?: boolean;
+}
+/** One option, in a single- or multi-select question. */
+export declare const QuestionOptionRow: import('react').ForwardRefExoticComponent<QuestionOptionRowProps & import('react').RefAttributes<HTMLButtonElement>>;
+/** `className` styles the row; everything else lands on the input. */
+type FieldBase = Omit<ComponentPropsWithoutRef<"input">, "value" | "onChange" | "className">;
+export interface QuestionFieldRowProps extends FieldBase {
+    /** The a/b/c badge. Left out, the row starts at its label. */
+    letter?: ReactNode;
+    label: ReactNode;
+    value: string;
+    /** The value, not the event — the row exists to be typed into. */
+    onChange: (value: string) => void;
+    /** Enter, which in a question nearly always means "the next one", not "send". */
+    onEnter?: () => void;
+    /** On the row. Every other prop goes to the input. */
+    className?: string;
+}
+/** A free-text row: letter, label, and the field itself. */
+export declare const QuestionFieldRow: import('react').ForwardRefExoticComponent<QuestionFieldRowProps & import('react').RefAttributes<HTMLInputElement>>;
+type OtherBase = Omit<ComponentPropsWithoutRef<"input">, "value" | "onChange" | "className" | "placeholder">;
+export interface QuestionOtherRowProps extends OtherBase {
+    /** The a/b/c badge. Left out, the row starts at the field. */
+    letter?: ReactNode;
+    value: string;
+    /** Also the accessible name: the row has no visible label of its own. */
+    placeholder: string;
+    onChange: (value: string) => void;
+    onEnter?: () => void;
+    /** On the row. Every other prop goes to the input. */
+    className?: string;
+}
+/**
+ * The "something else" row: reads as one more option, but it is a text field.
+ *
+ * A label rather than a button, and that is not a detail — an input inside a
+ * button is not reliably focusable, and the whole row exists to be typed into.
+ */
+export declare const QuestionOtherRow: import('react').ForwardRefExoticComponent<QuestionOtherRowProps & import('react').RefAttributes<HTMLInputElement>>;
+export interface QuestionShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The badge over the question. Left out, the header starts at the title. */
+    number?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** The rows this question is made of. */
+    children: ReactNode;
+    /** Right-aligned under the rows — usually the button that commits. */
+    footer?: ReactNode;
+    /**
+     * Paint the card box: background, radius, shadow.
+     *
+     * On by default, because a shell used on its own is the reason this is
+     * exported. `QuestionCard` turns it off — it brings its own box, which is
+     * the one that morphs between the three states.
+     */
+    card?: boolean;
+}
+/**
+ * A question laid out: header, rows, footer.
+ *
+ * The scaffolding, so composing a fourth kind of question is a matter of
+ * choosing the rows rather than rebuilding the box, the spacing and the type
+ * around them out of numbers that were tokens ten minutes ago.
+ */
+export declare const QuestionShell: import('react').ForwardRefExoticComponent<QuestionShellProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/QuestionCard/types.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A structured question inside a conversation.
+ *
+ * Three shapes, because there are three ways to answer one: type something,
+ * pick one, or pick several. Each carries a `shortTitle` for the row it
+ * becomes once it is answered — the full question is too long to sit in a
+ * summary, and truncating it loses the end, which is where the meaning is.
+ */
+export interface QuestionOption {
+    id: string;
+    title: string;
+    description?: string;
+    /** Used when several are chosen and the titles would not fit. */
+    short?: string;
+}
+export interface QuestionField {
+    id: string;
+    label: string;
+    placeholder?: string;
+    optional?: boolean;
+}
+interface Common {
+    id: string;
+    title: string;
+    subtitle?: string;
+    /** What it is called once it is answered and folded into a row. */
+    shortTitle: string;
+}
+export type Question = (Common & {
+    type: "inputs";
+    fields: QuestionField[];
+}) | (Common & {
+    type: "single";
+    options: QuestionOption[];
+}) | (Common & {
+    type: "multi";
+    options: QuestionOption[];
+    /** Adds a row that is a text field wearing an option's clothes. */
+    allowOther?: boolean;
+    otherPlaceholder?: string;
+    /** Lets somebody answer "none of these" rather than being stuck. */
+    allowEmpty?: boolean;
+});
+export type Answer = {
+    values: Record<string, string>;
+} | {
+    optionId: string;
+} | {
+    optionIds: string[];
+    other?: string;
+};
+/** Answered, being answered, or still to come. */
+export type QuestionState = "upcoming" | "active" | "collapsed";
+export {};