@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/components/chat-confirmation.js

@@ -1,62 +1,56 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { ShieldUser } from "reicon-react/icons/ShieldUser";
-import { cn } from "../internal/classes.js";
-import { Button } from "./button.js";
-import { ReviewCard, ReviewRow, ReviewRows, } from "./review-card.js";
-import { Spinner } from "./spinner.js";
+import { useEffect, useRef } from 'react';
+import { ShieldUser } from 'reicon-react/icons/ShieldUser';
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
+import { ReviewCard, ReviewRow, ReviewRows } from './review-card.js';
+import { Spinner } from './spinner.js';
 export const chatConfirmationStateNames = [
-    "pending",
-    "submitting",
-    "approved",
-    "rejected",
-    "expired",
-    "cancelled",
-    "error",
+    'pending',
+    'submitting',
+    'approved',
+    'rejected',
+    'expired',
+    'cancelled',
+    'error',
 ];
-const settledKinds = new Set([
-    "approved",
-    "rejected",
-    "expired",
-    "cancelled",
-]);
+const settledKinds = new Set(['approved', 'rejected', 'expired', 'cancelled']);
 const badges = {
-    pending: { label: "Approval required", variant: "warning" },
-    submitting: { label: "Approval required", variant: "warning" },
-    error: { label: "Approval required", variant: "warning" },
-    approved: { label: "Approved", variant: "info" },
-    rejected: { label: "Declined", variant: "secondary" },
-    expired: { label: "Expired", variant: "secondary" },
-    cancelled: { label: "Cancelled", variant: "secondary" },
+    pending: { label: 'Approval required', variant: 'warning' },
+    submitting: { label: 'Approval required', variant: 'warning' },
+    error: { label: 'Approval required', variant: 'warning' },
+    approved: { label: 'Approved', variant: 'info' },
+    rejected: { label: 'Declined', variant: 'secondary' },
+    expired: { label: 'Expired', variant: 'secondary' },
+    cancelled: { label: 'Cancelled', variant: 'secondary' },
 };
 const outcomes = {
-    approved: "Approval recorded. This does not confirm the action has completed.",
-    rejected: "The proposed action was declined.",
-    expired: "This approval expired. No approval was granted.",
-    cancelled: "This approval was cancelled. No approval was granted.",
+    approved: 'Approval recorded. This does not confirm the action has completed.',
+    rejected: 'The proposed action was declined.',
+    expired: 'This approval expired. No approval was granted.',
+    cancelled: 'This approval was cancelled. No approval was granted.',
 };
 /**
  * Asks someone in chat to approve or decline an action an agent proposed.
  * Built on `ReviewCard`: it folds once decided, and when the decision was
  * made from inside the card, focus moves to the outcome.
  */
-export function ChatConfirmation({ title, description, details, state, onDecision, disabled = false, approveLabel = "Approve action", className, ...props }) {
+export function ChatConfirmation({ title, description, details, state, onDecision, disabled = false, approveLabel = 'Approve action', className, ...props }) {
     const done = settledKinds.has(state.kind);
     const section = useRef(null);
     const result = useRef(null);
     const submittedHere = useRef(false);
     useEffect(() => {
-        if (state.kind === "submitting")
-            submittedHere.current =
-                section.current?.contains(document.activeElement) ?? false;
+        if (state.kind === 'submitting')
+            submittedHere.current = section.current?.contains(document.activeElement) ?? false;
         if (done && submittedHere.current) {
             result.current?.focus();
             submittedHere.current = false;
         }
     }, [done, state.kind]);
-    const submitting = state.kind === "submitting";
-    const busy = (decision) => state.kind === "submitting" && state.decision === decision;
+    const submitting = state.kind === 'submitting';
+    const busy = (decision) => state.kind === 'submitting' && state.decision === decision;
     const outcome = outcomes[state.kind];
-    return (_jsx("div", { ref: section, "data-slot": "chat-confirmation", "data-state": state.kind, ...props, className: cn("sprout-chat-confirmation", className), children: _jsxs(ReviewCard, { icon: _jsx(ShieldUser, { size: 16 }), title: title, badge: badges[state.kind], settled: done, status: state.kind === "error" || outcome ? (_jsxs(_Fragment, { children: [state.kind === "error" && (_jsx("p", { role: "alert", className: "sprout-chat-confirmation-error", children: state.message })), outcome && (_jsx("p", { ref: result, tabIndex: -1, role: "status", className: "sprout-chat-confirmation-result", children: outcome }))] })) : undefined, actions: done ? undefined : (_jsxs(_Fragment, { children: [_jsxs(Button, { disabled: disabled || submitting, "aria-busy": busy("approve"), onClick: () => onDecision("approve"), children: [busy("approve") && _jsx(Spinner, { "aria-hidden": "true" }), approveLabel] }), _jsxs(Button, { variant: "ghost", disabled: disabled || submitting, "aria-busy": busy("reject"), onClick: () => onDecision("reject"), children: [busy("reject") && _jsx(Spinner, { "aria-hidden": "true" }), "Decline"] })] })), children: [_jsx("p", { className: "sprout-chat-confirmation-description", children: description }), _jsx(ReviewRows, { children: details.map((detail) => (_jsx(ReviewRow, { label: detail.label, children: detail.value }, detail.label))) })] }) }));
+    return (_jsx("div", { ref: section, "data-slot": "chat-confirmation", "data-state": state.kind, ...props, className: cn('sprout-chat-confirmation', className), children: _jsxs(ReviewCard, { icon: _jsx(ShieldUser, { size: 16 }), title: title, badge: badges[state.kind], settled: done, status: state.kind === 'error' || outcome ? (_jsxs(_Fragment, { children: [state.kind === 'error' && (_jsx("p", { role: "alert", className: "sprout-chat-confirmation-error", children: state.message })), outcome && (_jsx("p", { ref: result, tabIndex: -1, role: "status", className: "sprout-chat-confirmation-result", children: outcome }))] })) : undefined, actions: done ? undefined : (_jsxs(_Fragment, { children: [_jsxs(Button, { disabled: disabled || submitting, "aria-busy": busy('approve'), onClick: () => onDecision('approve'), children: [busy('approve') && _jsx(Spinner, { "aria-hidden": "true" }), approveLabel] }), _jsxs(Button, { variant: "ghost", disabled: disabled || submitting, "aria-busy": busy('reject'), onClick: () => onDecision('reject'), children: [busy('reject') && _jsx(Spinner, { "aria-hidden": "true" }), "Decline"] })] })), children: [_jsx("p", { className: "sprout-chat-confirmation-description", children: description }), _jsx(ReviewRows, { children: details.map(detail => (_jsx(ReviewRow, { label: detail.label, children: detail.value }, detail.label))) })] }) }));
 }

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

@@ -1,7 +1,7 @@
-import { type ReactNode } from "react";
-import { type AttachmentFile } from "./attachment.js";
-import { type Brand } from "./brand-icon.js";
-import { type RichTextValue } from "./rich-text-editor.js";
+import { type ReactNode } from 'react';
+import { type AttachmentFile } from './attachment.js';
+import { type Brand } from './brand-icon.js';
+import { type RichTextValue } from './rich-text-editor.js';
 export declare const chatInputReferenceKindNames: readonly ["agent", "skill", "file"];
 export declare const chatInputStatusNames: readonly ["idle", "streaming"];
 export type ChatInputReferenceKind = (typeof chatInputReferenceKindNames)[number];

package/dist/components/chat-input.js

@@ -1,92 +1,92 @@
-"use client";
+'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"];
+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." },
+    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",
+    name: 'chatReference',
     inline: true,
-    group: "inline",
+    group: 'inline',
     atom: true,
     selectable: true,
     addAttributes() {
         return {
             kind: {
-                default: "file",
+                default: 'file',
                 rendered: false,
-                parseHTML: (el) => el.getAttribute("data-chat-reference"),
+                parseHTML: el => el.getAttribute('data-chat-reference'),
             },
             id: {
-                default: "",
+                default: '',
                 rendered: false,
-                parseHTML: (el) => el.getAttribute("data-id"),
+                parseHTML: el => el.getAttribute('data-id'),
             },
             label: {
-                default: "",
+                default: '',
                 rendered: false,
-                parseHTML: (el) => el.getAttribute("data-label"),
+                parseHTML: el => el.getAttribute('data-label'),
             },
         };
     },
     parseHTML() {
-        return [{ tag: "span[data-chat-reference]" }];
+        return [{ tag: 'span[data-chat-reference]' }];
     },
     renderHTML({ node, HTMLAttributes }) {
         const kind = node.attrs.kind;
         return [
-            "span",
+            'span',
             mergeAttributes(HTMLAttributes, {
-                "data-chat-reference": kind,
-                "data-id": node.attrs.id,
-                "data-label": node.attrs.label,
-                class: "sprout-chat-input-reference",
+                '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}`,
+            `${triggers[kind]?.char ?? ''}${node.attrs.label}`,
         ];
     },
     renderText({ node }) {
         const kind = node.attrs.kind;
-        return `${triggers[kind]?.char ?? ""}${node.attrs.label}`;
+        return `${triggers[kind]?.char ?? ''}${node.attrs.label}`;
     },
 });
 const linkShortcut = Extension.create({
-    name: "chatInputLinkShortcut",
+    name: 'chatInputLinkShortcut',
     addKeyboardShortcuts() {
         return {
-            "Mod-k": ({ editor }) => {
-                if (editor.isActive("link"))
+            '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.")
+                        ? text.startsWith('www.')
                             ? `https://${text}`
                             : text
                         : null;
@@ -114,10 +114,10 @@ function triggerExtension(kind, source, onState) {
                         .focus()
                         .insertContentAt(range, [
                         {
-                            type: "chatReference",
+                            type: 'chatReference',
                             attrs: { kind, id: props.id, label: props.label },
                         },
-                        { type: "text", text: " " },
+                        { type: 'text', text: ' ' },
                     ])
                         .run(),
                     render: () => {
@@ -131,7 +131,7 @@ function triggerExtension(kind, source, onState) {
                                 kind,
                                 items,
                                 active: Math.min(active, Math.max(0, items.length - 1)),
-                                select: (index) => {
+                                select: index => {
                                     const item = items[index];
                                     if (item)
                                         current?.command(item);
@@ -139,33 +139,30 @@ function triggerExtension(kind, source, onState) {
                             });
                         };
                         return {
-                            onStart: (props) => {
+                            onStart: props => {
                                 current = props;
                                 active = 0;
                                 publish();
                             },
-                            onUpdate: (props) => {
+                            onUpdate: props => {
                                 current = props;
                                 active = 0;
                                 publish();
                             },
                             onKeyDown: ({ event, view }) => {
-                                if (event.key === "Escape") {
+                                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;
+                                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") {
+                                if ((event.key === 'Enter' && !event.shiftKey) || event.key === 'Tab') {
                                     current.command(current.items[active]);
                                     return true;
                                 }
@@ -183,7 +180,7 @@ function triggerExtension(kind, source, onState) {
     });
 }
 function hasContent(node) {
-    if (node.type === "chatReference")
+    if (node.type === 'chatReference')
         return true;
     if (node.text?.trim())
         return true;
@@ -191,8 +188,8 @@ function hasContent(node) {
 }
 function textDoc(text) {
     return {
-        type: "doc",
-        content: [{ type: "paragraph", content: [{ type: "text", text }] }],
+        type: 'doc',
+        content: [{ type: 'paragraph', content: [{ type: 'text', text }] }],
     };
 }
 function ModelMark({ model }) {
@@ -202,8 +199,8 @@ function ModelMark({ model }) {
 }
 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: () => {
+    const selected = options.find(option => option.id === value);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(InputGroupButton, { "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))) })] })] }) })] }));
@@ -213,7 +210,7 @@ function OptionPicker({ label, search, options, value, onChange, disabled, icon,
  * 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, }) {
+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();
@@ -232,15 +229,15 @@ export function ChatInput({ value, onValueChange, onSend, onStop, status = "idle
         referenceNode,
         linkShortcut,
         ...chatInputReferenceKindNames
-            .filter((kind) => sources[kind].current)
-            .map((kind) => triggerExtension(kind, sources[kind], setPanel)),
+            .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 streaming = status === 'streaming';
     const filled = hasContent(value) || attachments.length > 0;
     const canSend = filled && !disabled && !streaming;
-    const activeMode = modes?.find((option) => option.id === mode);
+    const activeMode = modes?.find(option => option.id === mode);
     const optionId = (index) => `${listId}-option-${index}`;
     const panelOpen = !!panel;
     useLayoutEffect(() => {
@@ -255,25 +252,21 @@ export function ChatInput({ value, onValueChange, onSend, onStop, status = "idle
     };
     const fill = (prompt) => {
         editor.current?.setContent(textDoc(prompt.prompt ?? prompt.label));
-        editor.current?.editor()?.commands.focus("end");
+        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
+    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,
+                '--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) => {
+            : 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
+                }, 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", "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", "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,
+                                                                                    '--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
+                                                                                : 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, { 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", 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", 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))) }))] }));
+                                : 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

@@ -1,4 +1,4 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps } from 'react';
 export declare const chatPlanStepStateNames: readonly ["pending", "running", "complete", "error"];
 export type ChatPlanStepState = (typeof chatPlanStepStateNames)[number];
 export type ChatPlanStep = {
@@ -8,7 +8,7 @@ export type ChatPlanStep = {
     detail?: string | undefined;
     state: ChatPlanStepState;
 };
-export interface ChatPlanProps extends Omit<ComponentProps<"section">, "title" | "children"> {
+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. */

package/dist/components/chat-plan.js

@@ -1,27 +1,22 @@
 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",
-];
+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",
+    pending: 'Not started',
+    running: 'In progress',
+    complete: 'Complete',
+    error: 'Failed',
 };
 function StepIcon({ state }) {
-    if (state === "running")
+    if (state === 'running')
         return _jsx(Spinner, { "aria-hidden": "true" });
-    if (state === "complete")
+    if (state === 'complete')
         return _jsx(Check, { size: 16, "aria-hidden": "true" });
-    if (state === "error")
+    if (state === 'error')
         return _jsx(Warning, { size: 16, "aria-hidden": "true" });
     return _jsx(Clock, { size: 16, "aria-hidden": "true" });
 }
@@ -30,6 +25,6 @@ function StepIcon({ state }) {
  * 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))) }))] }));
+    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

@@ -1,4 +1,4 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps } from 'react';
 export type ChatSource = {
     id: string;
     title: string;
@@ -18,7 +18,7 @@ export interface InlineCitationProps {
  * 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"> {
+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. */
@@ -32,19 +32,19 @@ export declare function ChatSources({ sources, defaultOpen, className, ...props
 export declare const citationStateKindNames: readonly ["idle", "loading", "ready", "unavailable", "error"];
 export type CitationStateKind = (typeof citationStateKindNames)[number];
 export type CitationState = {
-    kind: "idle";
+    kind: 'idle';
 } | {
-    kind: "loading";
+    kind: 'loading';
 } | {
-    kind: "ready";
+    kind: 'ready';
     title: string;
     location: string;
     excerpt: string;
 } | {
-    kind: "unavailable";
+    kind: 'unavailable';
     message: string;
 } | {
-    kind: "error";
+    kind: 'error';
     message: string;
 };
 export interface CheckedCitationProps {
@@ -61,4 +61,4 @@ export interface CheckedCitationProps {
  * 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;
+export declare function CheckedCitation({ label, state, onOpen, onRetry }: CheckedCitationProps): import("react").JSX.Element;