@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/chat-input.js

@@ -0,0 +1,279 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Extension, Node, mergeAttributes, } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion, { exitSuggestion, } from "@tiptap/suggestion";
+import { ArrowUp } from "reicon-react/icons/ArrowUp";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { Folder } from "reicon-react/icons/Folder";
+import { Plus } from "reicon-react/icons/Plus";
+import { Sliders } from "reicon-react/icons/Sliders";
+import { X } from "reicon-react/icons/X";
+import { cn } from "../internal/classes.js";
+import { FileAttachment } from "./attachment.js";
+import { BrandIcon } from "./brand-icon.js";
+import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, } from "./input-group.js";
+import { MentionList, MentionOption, MentionStatus } from "./mention-list.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { RichTextEditor, } from "./rich-text-editor.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+export const chatInputReferenceKindNames = ["agent", "skill", "file"];
+export const chatInputStatusNames = ["idle", "streaming"];
+const triggers = {
+    agent: { char: "@", label: "Agents", empty: "No agents match." },
+    skill: { char: "/", label: "Skills", empty: "No skills match." },
+    file: { char: "#", label: "Files", empty: "No files match." },
+};
+const referenceNode = Node.create({
+    name: "chatReference",
+    inline: true,
+    group: "inline",
+    atom: true,
+    selectable: true,
+    addAttributes() {
+        return {
+            kind: {
+                default: "file",
+                rendered: false,
+                parseHTML: (el) => el.getAttribute("data-chat-reference"),
+            },
+            id: {
+                default: "",
+                rendered: false,
+                parseHTML: (el) => el.getAttribute("data-id"),
+            },
+            label: {
+                default: "",
+                rendered: false,
+                parseHTML: (el) => el.getAttribute("data-label"),
+            },
+        };
+    },
+    parseHTML() {
+        return [{ tag: "span[data-chat-reference]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        const kind = node.attrs.kind;
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                "data-chat-reference": kind,
+                "data-id": node.attrs.id,
+                "data-label": node.attrs.label,
+                class: "sprout-chat-input-reference",
+            }),
+            `${triggers[kind]?.char ?? ""}${node.attrs.label}`,
+        ];
+    },
+    renderText({ node }) {
+        const kind = node.attrs.kind;
+        return `${triggers[kind]?.char ?? ""}${node.attrs.label}`;
+    },
+});
+const linkShortcut = Extension.create({
+    name: "chatInputLinkShortcut",
+    addKeyboardShortcuts() {
+        return {
+            "Mod-k": ({ editor }) => {
+                if (editor.isActive("link"))
+                    return editor.chain().focus().unsetLink().run();
+                const { from, to } = editor.state.selection;
+                const text = editor.state.doc.textBetween(from, to).trim();
+                const href = /^\S+@\S+\.\S+$/.test(text)
+                    ? `mailto:${text}`
+                    : /^(https?:\/\/|www\.)\S+$/i.test(text)
+                        ? text.startsWith("www.")
+                            ? `https://${text}`
+                            : text
+                        : null;
+                if (!href)
+                    return false;
+                return editor.chain().focus().setLink({ href }).run();
+            },
+        };
+    },
+});
+function triggerExtension(kind, source, onState) {
+    const key = new PluginKey(`chatInput-${kind}`);
+    return Extension.create({
+        name: `chatInput-${kind}`,
+        addProseMirrorPlugins() {
+            return [
+                Suggestion({
+                    editor: this.editor,
+                    pluginKey: key,
+                    char: triggers[kind].char,
+                    allowSpaces: false,
+                    items: async ({ query }) => (await source.current?.(query)) ?? [],
+                    command: ({ editor, range, props }) => editor
+                        .chain()
+                        .focus()
+                        .insertContentAt(range, [
+                        {
+                            type: "chatReference",
+                            attrs: { kind, id: props.id, label: props.label },
+                        },
+                        { type: "text", text: " " },
+                    ])
+                        .run(),
+                    render: () => {
+                        let current = null;
+                        let active = 0;
+                        const publish = () => {
+                            if (!current)
+                                return;
+                            const items = current.items;
+                            onState({
+                                kind,
+                                items,
+                                active: Math.min(active, Math.max(0, items.length - 1)),
+                                select: (index) => {
+                                    const item = items[index];
+                                    if (item)
+                                        current?.command(item);
+                                },
+                            });
+                        };
+                        return {
+                            onStart: (props) => {
+                                current = props;
+                                active = 0;
+                                publish();
+                            },
+                            onUpdate: (props) => {
+                                current = props;
+                                active = 0;
+                                publish();
+                            },
+                            onKeyDown: ({ event, view }) => {
+                                if (event.key === "Escape") {
+                                    exitSuggestion(view, key);
+                                    return true;
+                                }
+                                const count = current?.items.length ?? 0;
+                                if (!count)
+                                    return false;
+                                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                                    active =
+                                        (active + (event.key === "ArrowDown" ? 1 : count - 1)) %
+                                            count;
+                                    publish();
+                                    return true;
+                                }
+                                if ((event.key === "Enter" && !event.shiftKey) ||
+                                    event.key === "Tab") {
+                                    current.command(current.items[active]);
+                                    return true;
+                                }
+                                return false;
+                            },
+                            onExit: () => {
+                                current = null;
+                                onState(null);
+                            },
+                        };
+                    },
+                }),
+            ];
+        },
+    });
+}
+function hasContent(node) {
+    if (node.type === "chatReference")
+        return true;
+    if (node.text?.trim())
+        return true;
+    return node.content?.some(hasContent) ?? false;
+}
+function textDoc(text) {
+    return {
+        type: "doc",
+        content: [{ type: "paragraph", content: [{ type: "text", text }] }],
+    };
+}
+function ModelMark({ model }) {
+    if (model.brand)
+        return _jsx(BrandIcon, { brand: model.brand, size: "inline" });
+    return model.icon ?? null;
+}
+function OptionPicker({ label, search, options, value, onChange, disabled, icon, align, }) {
+    const [open, setOpen] = useState(false);
+    const selected = options.find((option) => option.id === value);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(InputGroupButton, { size: "sm", "aria-label": `${label}: ${selected?.label ?? "None"}`, disabled: disabled, className: "sprout-chat-input-picker" }), children: [icon(selected), _jsx("span", { className: "sprout-chat-input-picker-label", children: selected?.label ?? label }), _jsx(ChevronDown, { size: 12, "aria-hidden": "true" })] }), _jsx(PopoverContent, { size: "picker", side: "top", align: align, sideOffset: 8, className: "sprout-chat-input-menu", children: _jsxs(Command, { children: [_jsx(CommandInput, { "aria-label": search, placeholder: `${search}…` }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { heading: label, children: options.map((option) => (_jsxs(CommandItem, { value: `${option.label} ${option.description ?? ""}`, "data-checked": option.id === value, disabled: "disabled" in option && !!option.disabled, onSelect: () => {
+                                            onChange(option.id);
+                                            setOpen(false);
+                                        }, children: [icon(option), _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: option.description }))] })] }, option.id))) })] })] }) })] }));
+}
+/**
+ * A chat message box on `RichTextEditor`. `@` tags agents, `/` adds skills,
+ * and `#` adds files. The bar holds attach and mode menus, a project picker,
+ * a model picker, and send or stop. Starter prompts sit under an empty box.
+ */
+export function ChatInput({ value, onValueChange, onSend, onStop, status = "idle", placeholder = "Ask anything, @agents, /skills, #files…", streamingPlaceholder = "Working on your request…", disabled = false, label = "Message", agents, skills, files, attachments = [], onRemoveAttachment, attachActions, modes, mode = null, onModeChange, projects, project, onProjectChange, models, model, onModelChange, prompts, onPromptSelect, className, }) {
+    const editor = useRef(null);
+    const form = useRef(null);
+    const listId = useId();
+    const [panel, setPanel] = useState(null);
+    const [panelBelow, setPanelBelow] = useState(false);
+    const sources = {
+        agent: useRef(agents),
+        skill: useRef(skills),
+        file: useRef(files),
+    };
+    sources.agent.current = agents;
+    sources.skill.current = skills;
+    sources.file.current = files;
+    const enabled = `${!!agents}${!!skills}${!!files}`;
+    const extensions = useMemo(() => [
+        referenceNode,
+        linkShortcut,
+        ...chatInputReferenceKindNames
+            .filter((kind) => sources[kind].current)
+            .map((kind) => triggerExtension(kind, sources[kind], setPanel)),
+    ], 
+    // Sources are refs, so only adding or removing a trigger rebuilds the editor.
+    [enabled]);
+    const streaming = status === "streaming";
+    const filled = hasContent(value) || attachments.length > 0;
+    const canSend = filled && !disabled && !streaming;
+    const activeMode = modes?.find((option) => option.id === mode);
+    const optionId = (index) => `${listId}-option-${index}`;
+    const panelOpen = !!panel;
+    useLayoutEffect(() => {
+        const bounds = form.current?.getBoundingClientRect();
+        // Near the top of a short screen there's no room above, so the panel opens below.
+        if (panel && bounds)
+            setPanelBelow(bounds.top < 320 && window.innerHeight - bounds.bottom > bounds.top);
+    }, [panelOpen]);
+    const send = () => {
+        if (canSend)
+            onSend();
+    };
+    const fill = (prompt) => {
+        editor.current?.setContent(textDoc(prompt.prompt ?? prompt.label));
+        editor.current?.editor()?.commands.focus("end");
+        onPromptSelect?.(prompt);
+    };
+    return (_jsxs("div", { "data-slot": "chat-input", "data-status": status, "data-mode-color": activeMode?.color ? "" : undefined, style: activeMode?.color
+            ? {
+                "--sprout-chat-input-mode": activeMode.color,
+            }
+            : undefined, className: cn("sprout-chat-input", className), children: [_jsxs("form", { ref: form, "aria-label": label, className: "sprout-chat-input-form", onSubmit: (event) => {
+                    event.preventDefault();
+                    send();
+                }, children: [_jsxs(InputGroup, { variant: "composer", className: "sprout-chat-input-box", children: [attachments.length > 0 && (_jsx(InputGroupAddon, { align: "block-start", className: "sprout-chat-input-attachments", children: attachments.map((file) => (_jsx(FileAttachment, { file: file, variant: "chip", viewable: true, preview: true, onRemove: onRemoveAttachment && !disabled
+                                        ? () => onRemoveAttachment(file.id)
+                                        : undefined }, file.id))) })), _jsx(RichTextEditor, { ref: editor, value: value, onChange: onValueChange, onSend: send, extensions: extensions, placeholder: streaming ? streamingPlaceholder : placeholder, disabled: disabled, ariaLabel: label, ariaExpanded: !!panel, ariaControls: panel ? listId : undefined, ariaActiveDescendant: panel?.items.length ? optionId(panel.active) : undefined, className: "sprout-chat-input-editor", toolbarAddon: _jsxs("div", { className: "sprout-chat-input-bar", children: [_jsxs("div", { className: "sprout-chat-input-bar-start", children: [attachActions && attachActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(DropdownMenuTrigger, { render: _jsx(InputGroupButton, { size: "icon-sm", "aria-label": "Add files and more", disabled: disabled }) }), children: _jsx(Plus, { size: 16, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Add files and more" })] }), _jsx(DropdownMenuContent, { size: "menu", side: "top", align: "start", className: "sprout-chat-input-menu", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Add" }), attachActions.map((action) => (_jsxs(DropdownMenuItem, { onClick: action.onSelect, children: [action.icon, _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: action.label }), action.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: action.description }))] })] }, action.id)))] }) })] })), modes && modes.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(DropdownMenuTrigger, { render: _jsx(InputGroupButton, { size: "icon-sm", "aria-label": `Mode: ${activeMode?.label ?? "Default"}`, disabled: disabled }) }), children: _jsx(Sliders, { size: 16, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Modes" })] }), _jsx(DropdownMenuContent, { size: "menu", side: "top", align: "start", className: "sprout-chat-input-menu", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Mode" }), _jsx(DropdownMenuRadioGroup, { value: mode ?? "", onValueChange: (next) => onModeChange?.(next === mode || !next ? null : String(next)), children: modes.map((option) => (_jsxs(DropdownMenuRadioItem, { value: option.id, closeOnClick: true, style: option.color
+                                                                                ? {
+                                                                                    "--sprout-chat-input-mode": option.color,
+                                                                                }
+                                                                                : undefined, className: option.color
+                                                                                ? "sprout-chat-input-mode-option"
+                                                                                : undefined, children: [option.icon, _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: option.description }))] })] }, option.id))) })] }) })] })), activeMode && (_jsxs(InputGroupButton, { size: "sm", variant: "secondary", className: "sprout-chat-input-mode", "aria-label": `Turn off ${activeMode.label}`, disabled: disabled, onClick: () => onModeChange?.(null), children: [activeMode.icon, _jsx("span", { className: "sprout-chat-input-picker-label", children: activeMode.label }), _jsx(X, { size: 12, "aria-hidden": "true" })] })), projects && projects.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "sprout-chat-input-divider", "aria-hidden": "true" }), _jsx(OptionPicker, { label: "Project", search: "Search projects", options: projects, value: project, onChange: (id) => onProjectChange?.(id), disabled: disabled, icon: (option) => option?.icon ?? (_jsx(Folder, { size: 16, "aria-hidden": "true" })), align: "start" })] }))] }), _jsxs("div", { className: "sprout-chat-input-bar-end", children: [models && models.length > 0 && (_jsx(OptionPicker, { label: "Model", search: "Search models", options: models, value: model, onChange: (id) => onModelChange?.(id), disabled: disabled, icon: (option) => option && _jsx(ModelMark, { model: option }), align: "end" })), streaming ? (_jsx(InputGroupButton, { size: "icon-sm", variant: "default", className: "sprout-chat-input-send", "aria-label": "Stop", onClick: onStop, children: _jsx("span", { className: "sprout-chat-input-stop", "aria-hidden": "true" }) })) : (_jsx(InputGroupButton, { type: "submit", size: "icon-sm", variant: canSend ? "default" : "secondary", className: "sprout-chat-input-send", "aria-label": "Send message", disabled: !canSend, children: _jsx(ArrowUp, { size: 16, "aria-hidden": "true" }) }))] })] }) })] }), panel && (_jsx("div", { className: "sprout-chat-input-panel", "data-side": panelBelow ? "bottom" : "top", children: _jsx(MentionList, { id: listId, label: triggers[panel.kind].label, announcement: panel.items.length
+                                ? `${panel.items.length} ${triggers[panel.kind].label.toLowerCase()}. Use Up and Down to choose, Enter to add, Escape to close.`
+                                : triggers[panel.kind].empty, status: panel.items.length ? undefined : (_jsx(MentionStatus, { tone: "empty", children: triggers[panel.kind].empty })), children: panel.items.map((item, index) => (_jsx(MentionOption, { id: optionId(index), active: index === panel.active, onSelect: () => panel.select(index), media: item.media, title: item.label, description: item.description }, item.id))) }) }))] }), prompts && prompts.length > 0 && !filled && !streaming && (_jsx("div", { role: "group", "aria-label": "Suggested prompts", className: "sprout-chat-input-prompts", children: prompts.map((prompt) => (_jsxs(Button, { size: "sm", variant: "outline", disabled: disabled, className: "sprout-chat-input-prompt", onClick: () => fill(prompt), children: [prompt.icon, prompt.label] }, prompt.id))) }))] }));
+}

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+export declare const chatPlanStepStateNames: readonly ["pending", "running", "complete", "error"];
+export type ChatPlanStepState = (typeof chatPlanStepStateNames)[number];
+export type ChatPlanStep = {
+    id: string;
+    title: string;
+    /** One line under the title, such as why a step failed. */
+    detail?: string | undefined;
+    state: ChatPlanStepState;
+};
+export interface ChatPlanProps extends Omit<ComponentProps<"section">, "title" | "children"> {
+    /** The plan name. It names the section and shows above the steps. */
+    title: string;
+    /** Steps in order. With none, the plan says no steps were proposed yet. */
+    steps: readonly ChatPlanStep[];
+}
+/**
+ * A plan an agent proposed in chat, with each step’s progress: not started,
+ * in progress, complete, or failed. The header counts completed steps.
+ */
+export declare function ChatPlan({ title, steps, className, ...props }: ChatPlanProps): import("react").JSX.Element;

package/dist/components/chat-plan.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "reicon-react/icons/Check";
+import { Clock } from "reicon-react/icons/Clock";
+import { Warning } from "reicon-react/icons/Warning";
+import { cn } from "../internal/classes.js";
+import { Spinner } from "./spinner.js";
+export const chatPlanStepStateNames = [
+    "pending",
+    "running",
+    "complete",
+    "error",
+];
+const stateLabels = {
+    pending: "Not started",
+    running: "In progress",
+    complete: "Complete",
+    error: "Failed",
+};
+function StepIcon({ state }) {
+    if (state === "running")
+        return _jsx(Spinner, { "aria-hidden": "true" });
+    if (state === "complete")
+        return _jsx(Check, { size: 16, "aria-hidden": "true" });
+    if (state === "error")
+        return _jsx(Warning, { size: 16, "aria-hidden": "true" });
+    return _jsx(Clock, { size: 16, "aria-hidden": "true" });
+}
+/**
+ * A plan an agent proposed in chat, with each step’s progress: not started,
+ * in progress, complete, or failed. The header counts completed steps.
+ */
+export function ChatPlan({ title, steps, className, ...props }) {
+    const complete = steps.filter((step) => step.state === "complete").length;
+    return (_jsxs("section", { "data-slot": "chat-plan", "aria-label": title, ...props, className: cn("sprout-chat-plan", className), children: [_jsxs("div", { className: "sprout-chat-plan-header", children: [_jsx("h4", { className: "sprout-chat-plan-title", children: title }), _jsxs("span", { className: "sprout-chat-plan-count", children: [complete, " of ", steps.length, " complete"] })] }), steps.length === 0 ? (_jsx("p", { className: "sprout-chat-plan-empty", children: "No steps have been proposed yet." })) : (_jsx("ol", { className: "sprout-chat-plan-steps", children: steps.map((step) => (_jsxs("li", { "data-slot": "chat-plan-step", "data-state": step.state, className: "sprout-chat-plan-step", children: [_jsx("span", { className: "sprout-chat-plan-icon", children: _jsx(StepIcon, { state: step.state }) }, step.state), _jsxs("div", { className: "sprout-chat-plan-text", children: [_jsxs("p", { className: "sprout-chat-plan-step-title", children: [step.title, _jsxs("span", { className: "sprout-chat-plan-sr-only", children: [" · ", stateLabels[step.state]] })] }), step.detail && (_jsx("p", { className: "sprout-chat-plan-detail", children: step.detail }))] })] }, step.id))) }))] }));
+}

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

@@ -0,0 +1,64 @@
+import { type ComponentProps } from "react";
+export type ChatSource = {
+    id: string;
+    title: string;
+    /** Where the passage lives, such as a collection or a heading. */
+    location: string;
+    excerpt: string;
+    /** Opens the source in a new tab. */
+    href: string;
+};
+export interface InlineCitationProps {
+    source: ChatSource;
+    /** The citation number shown in the reply and in the sources list. */
+    number: number;
+}
+/**
+ * A numbered citation inside a reply. Hovering, clicking, tapping, or pressing
+ * Enter shows the cited passage and where it comes from.
+ */
+export declare function InlineCitation({ source, number }: InlineCitationProps): import("react").JSX.Element;
+export interface ChatSourcesProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Sources in citation order. With none, it says no sources were used. */
+    sources: readonly ChatSource[];
+    /** Start with the list open. */
+    defaultOpen?: boolean | undefined;
+}
+/**
+ * The sources a reply used. A count opens the numbered list; numbers match
+ * each `InlineCitation`.
+ */
+export declare function ChatSources({ sources, defaultOpen, className, ...props }: ChatSourcesProps): import("react").JSX.Element;
+export declare const citationStateKindNames: readonly ["idle", "loading", "ready", "unavailable", "error"];
+export type CitationStateKind = (typeof citationStateKindNames)[number];
+export type CitationState = {
+    kind: "idle";
+} | {
+    kind: "loading";
+} | {
+    kind: "ready";
+    title: string;
+    location: string;
+    excerpt: string;
+} | {
+    kind: "unavailable";
+    message: string;
+} | {
+    kind: "error";
+    message: string;
+};
+export interface CheckedCitationProps {
+    /** The linked words in the reply. */
+    label: string;
+    state: CitationState;
+    /** Called each time the passage opens, to check access again. */
+    onOpen: () => void;
+    /** Called by “Load source again” after an error. */
+    onRetry: () => void;
+}
+/**
+ * A citation link whose passage is checked each time it opens, on hover or
+ * click. While checking it shows a spinner; an unavailable source never shows
+ * an old passage.
+ */
+export declare function CheckedCitation({ label, state, onOpen, onRetry, }: CheckedCitationProps): import("react").JSX.Element;

package/dist/components/chat-sources.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ArrowUpRight } from "reicon-react/icons/ArrowUpRight";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { FileText } from "reicon-react/icons/FileText";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Spinner } from "./spinner.js";
+const hoverDelay = 300;
+const hoverCloseDelay = 150;
+function hostOf(href) {
+    try {
+        return new URL(href).hostname.replace(/^www\./, "");
+    }
+    catch {
+        return null;
+    }
+}
+function SourceContent({ source, number, }) {
+    const host = number === undefined ? null : hostOf(source.href);
+    return (_jsxs("div", { "data-slot": "chat-source", className: "sprout-chat-sources-source", children: [number !== undefined && (_jsxs("p", { className: "sprout-chat-sources-preview-head", children: [_jsx("span", { className: "sprout-chat-sources-badge", "aria-hidden": "true", children: number }), _jsx("span", { children: host ?? `Source ${number}` })] })), _jsx("p", { className: "sprout-chat-sources-title", children: source.title }), _jsx("p", { className: "sprout-chat-sources-location", children: source.location }), _jsx("p", { className: "sprout-chat-sources-excerpt", children: source.excerpt }), _jsxs("a", { href: source.href, target: "_blank", rel: "noopener noreferrer", className: "sprout-chat-sources-link", children: ["Open source", _jsx(ArrowUpRight, { size: 14, "aria-hidden": "true" }), _jsx("span", { className: "sprout-chat-sources-sr-only", children: " in a new tab" })] })] }));
+}
+/**
+ * A numbered citation inside a reply. Hovering, clicking, tapping, or pressing
+ * Enter shows the cited passage and where it comes from.
+ */
+export function InlineCitation({ source, number }) {
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { openOnHover: true, delay: hoverDelay, closeDelay: hoverCloseDelay, "data-slot": "inline-citation", className: "sprout-chat-sources-citation", render: _jsx(Button, { variant: "secondary", size: "icon-xs", "aria-label": `Source ${number}: ${source.title}` }), children: number }), _jsx(PopoverContent, { className: "sprout-chat-sources-preview", children: _jsx(SourceContent, { source: source, number: number }) })] }));
+}
+/**
+ * The sources a reply used. A count opens the numbered list; numbers match
+ * each `InlineCitation`.
+ */
+export function ChatSources({ sources, defaultOpen, className, ...props }) {
+    if (sources.length === 0)
+        return (_jsx("div", { "data-slot": "chat-sources", "data-empty": "", ...props, className: cn("sprout-chat-sources", className), children: _jsx("p", { className: "sprout-chat-sources-empty", children: "No sources were used for this response." }) }));
+    return (_jsxs(Collapsible, { "data-slot": "chat-sources", defaultOpen: defaultOpen, ...props, className: cn("sprout-chat-sources", className), children: [_jsxs(CollapsibleTrigger, { className: "sprout-chat-sources-trigger", children: [_jsx(FileText, { size: 16, "aria-hidden": "true" }), _jsxs("span", { children: [sources.length, " ", sources.length === 1 ? "source" : "sources"] }), _jsx(ChevronDown, { size: 14, "aria-hidden": "true", "data-slot": "collapsible-indicator" })] }), _jsx(CollapsibleContent, { variant: "sidebar", children: _jsx("ol", { className: "sprout-chat-sources-list", children: sources.map((source, index) => (_jsxs("li", { className: "sprout-chat-sources-item", children: [_jsx("span", { className: "sprout-chat-sources-number", children: index + 1 }), _jsx(SourceContent, { source: source })] }, source.id))) }) })] }));
+}
+export const citationStateKindNames = [
+    "idle",
+    "loading",
+    "ready",
+    "unavailable",
+    "error",
+];
+/**
+ * A citation link whose passage is checked each time it opens, on hover or
+ * click. While checking it shows a spinner; an unavailable source never shows
+ * an old passage.
+ */
+export function CheckedCitation({ label, state, onOpen, onRetry, }) {
+    const popup = useRef(null);
+    return (_jsxs(Popover, { onOpenChange: (open) => {
+            if (open)
+                onOpen();
+        }, children: [_jsx(PopoverTrigger, { openOnHover: true, delay: hoverDelay, closeDelay: hoverCloseDelay, "data-slot": "checked-citation", className: "sprout-chat-sources-checked", render: _jsx(Button, { variant: "link", size: "task-link", "aria-label": `Source: ${label}` }), children: label }), _jsx(PopoverContent, { ref: popup, "data-citation-state": state.kind, className: "sprout-chat-sources-preview", children: state.kind === "idle" || state.kind === "loading" ? (_jsxs("p", { role: "status", className: "sprout-chat-sources-checking", children: [_jsx(Spinner, { "aria-hidden": "true" }), "Checking access to this source\u2026"] })) : state.kind === "ready" ? (_jsxs("div", { "data-slot": "chat-source", className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.title }), _jsx("p", { className: "sprout-chat-sources-location", children: state.location }), _jsx("p", { className: "sprout-chat-sources-excerpt", "data-preserve-lines": "", children: state.excerpt })] })) : (_jsxs("div", { className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.kind === "unavailable"
+                                ? "Source unavailable"
+                                : "Couldn’t load this source" }), _jsx("p", { role: "alert", className: "sprout-chat-sources-excerpt", children: state.message }), state.kind === "error" && (_jsx(Button, { variant: "outline", size: "sm", className: "sprout-chat-sources-retry", onClick: () => {
+                                // The button leaves as loading starts; keep focus in the passage.
+                                popup.current?.focus();
+                                onRetry();
+                            }, children: "Load source again" }))] })) })] }));
+}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,16 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+export declare const checkboxVariantNames: readonly ["default", "neutral"];
+export type CheckboxVariant = (typeof checkboxVariantNames)[number];
+export interface CheckboxProps extends BaseCheckbox.Root.Props {
+    /**
+     * `default` fills with the primary color. `neutral` fills with the text
+     * color, for filter lists that should not look branded.
+     */
+    variant?: CheckboxVariant | undefined;
+}
+/**
+ * A 16px checkbox with a larger hit area. Name it with a wrapping `Label`,
+ * a `Label htmlFor` pointing at its `id`, or `aria-label`. Pass
+ * `indeterminate` to show a mixed state, such as a "select all" box.
+ */
+export declare function Checkbox({ variant, indeterminate, className, disabled, ref, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/checkbox.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Check } from "reicon-react/icons/Check";
+import { Minus } from "reicon-react/icons/Minus";
+import { cn, stateClassName } from "../internal/classes.js";
+import { useFieldsetDisabled } from "../internal/fieldset.js";
+export const checkboxVariantNames = ["default", "neutral"];
+/**
+ * A 16px checkbox with a larger hit area. Name it with a wrapping `Label`,
+ * a `Label htmlFor` pointing at its `id`, or `aria-label`. Pass
+ * `indeterminate` to show a mixed state, such as a "select all" box.
+ */
+export function Checkbox({ variant = "default", indeterminate = false, className, disabled, ref, ...props }) {
+    const [fieldsetDisabled, fieldsetRef] = useFieldsetDisabled(ref);
+    return (_jsx(BaseCheckbox.Root, { "data-slot": "checkbox", "data-variant": variant, indeterminate: indeterminate, ...props, ref: fieldsetRef, disabled: disabled || fieldsetDisabled, className: stateClassName(cn("sprout-checkbox", `sprout-checkbox-variant-${variant}`), className), children: _jsx(BaseCheckbox.Indicator, { "data-slot": "checkbox-indicator", className: "sprout-checkbox-indicator", children: indeterminate ? (_jsx(Minus, { "aria-hidden": "true" })) : (_jsx(Check, { "aria-hidden": "true" })) }) }));
+}

package/dist/components/choice-list.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+export declare const choiceListLayoutNames: readonly ["stacked", "compact"];
+export type ChoiceListLayout = (typeof choiceListLayoutNames)[number];
+export interface ChoiceListOption {
+    id: string;
+    label: string;
+    /** Shows a "Recommended" badge. A label ending in "(Recommended)" does the same. */
+    recommended?: boolean | undefined;
+}
+export interface ChoiceListTextOption {
+    value: string;
+    /** True while the typed answer is the chosen one. */
+    active: boolean;
+    onChange: (value: string) => void;
+    onFocus: () => void;
+    /** Id of the answer box, for an "Other answer" toggle's `aria-controls`. */
+    id?: string | undefined;
+    error: string | null;
+    label?: string | undefined;
+    placeholder?: string | undefined;
+}
+export interface ChoiceListProps {
+    legend: string;
+    options: readonly ChoiceListOption[];
+    value: readonly string[];
+    onChange: (value: string[]) => void;
+    /** Checkboxes instead of radios. */
+    multiple?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    /**
+     * `stacked` draws bordered rows with radio or checkbox marks. `compact`
+     * draws numbered rows in a scrolling list, for questions inside a chat.
+     */
+    layout?: ChoiceListLayout | undefined;
+    /** A free-text answer after the options. Compact lists show it only while active. */
+    textOption?: ChoiceListTextOption | undefined;
+    className?: string | undefined;
+}
+/**
+ * A fieldset of radio or checkbox rows for answering a question, with an
+ * optional typed answer. Value is always an array of option ids.
+ */
+export declare function ChoiceList({ legend, options, value, onChange, multiple, disabled, error, layout, textOption, className, }: ChoiceListProps): import("react").JSX.Element;
+export interface ChoiceSummaryProps {
+    prompt: string;
+    /** The recorded answer. Omit it when the question expired or was cancelled. */
+    answer?: string | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/** One line that shows a question and its recorded answer. */
+export declare function ChoiceSummary({ prompt, answer, className, children, }: ChoiceSummaryProps): import("react").JSX.Element;

package/dist/components/choice-list.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Check } from "reicon-react/icons/Check";
+import { HelpCircle } from "reicon-react/icons/HelpCircle";
+import { cn } from "../internal/classes.js";
+import { Badge } from "./badge.js";
+export const choiceListLayoutNames = ["stacked", "compact"];
+const recommendedSuffix = /\s*\(recommended\)\s*$/i;
+/**
+ * A fieldset of radio or checkbox rows for answering a question, with an
+ * optional typed answer. Value is always an array of option ids.
+ */
+export function ChoiceList({ legend, options, value, onChange, multiple = false, disabled = false, error, layout = "stacked", textOption, className, }) {
+    const name = useId();
+    const compact = layout === "compact";
+    const errorId = `${name}-choices-error`;
+    const textId = `${name}-text`;
+    const textErrorId = `${name}-text-error`;
+    return (_jsxs("fieldset", { "data-slot": "choice-list", "data-layout": layout, "data-multiple": multiple || undefined, disabled: disabled, className: cn("sprout-choice-list", className), children: [_jsx("legend", { className: compact && !multiple
+                    ? "sprout-choice-list-sr-only"
+                    : "sprout-choice-list-legend", children: legend }), _jsx("div", { "data-slot": "choice-list-options", className: "sprout-choice-list-options", children: options.map((option, index) => {
+                    const checked = value.includes(option.id);
+                    const recommended = option.recommended === true || recommendedSuffix.test(option.label);
+                    const label = option.label.replace(recommendedSuffix, "");
+                    return (_jsxs("label", { "data-slot": "choice-list-option", "data-checked": checked || undefined, "data-disabled": disabled || undefined, "data-recommended": recommended || undefined, className: "sprout-choice-list-option", children: [_jsx("input", { type: multiple ? "checkbox" : "radio", name: name, value: option.id, checked: checked, "aria-invalid": error ? true : undefined, "aria-describedby": error ? errorId : undefined, onChange: (event) => onChange(multiple
+                                    ? event.target.checked
+                                        ? [...value, option.id]
+                                        : value.filter((id) => id !== option.id)
+                                    : [option.id]), className: "sprout-choice-list-input" }), _jsx("span", { "aria-hidden": "true", className: "sprout-choice-list-mark", children: checked ? _jsx(Check, {}) : compact ? index + 1 : null }), _jsxs("span", { className: "sprout-choice-list-label", children: [label, recommended && (_jsx(Badge, { variant: "info", className: "sprout-choice-list-badge", children: "Recommended" }))] })] }, option.id));
+                }) }), error && (_jsx("p", { id: errorId, className: "sprout-choice-list-error", children: error })), textOption && (!compact || textOption.active) && (_jsxs("div", { id: textOption.id ?? `${name}-custom`, "data-slot": "choice-list-text", "data-checked": textOption.active || undefined, "data-invalid": textOption.error ? true : undefined, className: "sprout-choice-list-text", children: [_jsx("span", { "aria-hidden": "true", className: "sprout-choice-list-mark", children: textOption.active && _jsx(Check, {}) }), _jsxs("div", { className: "sprout-choice-list-text-body", children: [_jsx("label", { htmlFor: textId, className: "sprout-choice-list-text-label", children: textOption.label ?? "Your answer" }), _jsx("textarea", { id: textId, autoFocus: compact, rows: 1, value: textOption.value, disabled: disabled, placeholder: textOption.placeholder ?? "Type a different answer…", "aria-describedby": textOption.error ? textErrorId : undefined, "aria-invalid": textOption.error ? true : undefined, onFocus: textOption.onFocus, onChange: (event) => textOption.onChange(event.target.value), className: "sprout-choice-list-textarea" }), textOption.error && (_jsx("p", { id: textErrorId, role: "alert", className: "sprout-choice-list-error", children: textOption.error }))] })] }))] }));
+}
+/** One line that shows a question and its recorded answer. */
+export function ChoiceSummary({ prompt, answer, className, children, }) {
+    return (_jsxs("div", { "data-slot": "choice-summary", className: cn("sprout-choice-summary", className), children: [_jsx(HelpCircle, { "aria-hidden": "true", className: "sprout-choice-summary-icon" }), _jsx("span", { className: "sprout-choice-summary-prompt", children: prompt }), answer && (_jsxs("span", { className: "sprout-choice-summary-answer", children: [_jsx(Check, { "aria-hidden": "true", className: "sprout-choice-summary-check" }), _jsx("span", { className: "sprout-choice-summary-answer-text", children: answer })] })), children] }));
+}