@tulipfarm/sprout 0.1.0 → 0.3.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-sources.js

@@ -53,9 +53,18 @@ export const citationStateKindNames = [
  */
 export function CheckedCitation({ label, state, onOpen, onRetry, }) {
     const popup = useRef(null);
-    return (_jsxs(Popover, { onOpenChange: (open) => {
-            if (open)
+    const openReason = useRef(undefined);
+    return (_jsxs(Popover, { onOpenChange: (open, details) => {
+            if (open) {
+                openReason.current = details.reason;
                 onOpen();
+                return;
+            }
+            // Base UI keeps a hover-close timer from before a reopen; a passage
+            // opened by click or keyboard closes only by click, Escape, or outside press.
+            if (details.reason === "trigger-hover" &&
+                openReason.current === "trigger-press")
+                details.cancel();
         }, 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: () => {

package/dist/components/code-block.js

@@ -5,7 +5,8 @@ import { Check } from "reicon-react/icons/Check";
 import { Copy } from "reicon-react/icons/Copy";
 import { cn } from "../internal/classes.js";
 import { codeLanguageIds, codeLanguageNames, } from "../internal/languages.js";
-import { codeTokens, embeddedLanguages, isLanguageReady, languageForFilename, loadCodeLanguage, maxHighlightedLength, resolveCodeLanguage, } from "../internal/syntax.js";
+import { tokenClass, useCodeTokens } from "../internal/code-tokens.js";
+import { languageForFilename, loadCodeLanguage, resolveCodeLanguage, } from "../internal/syntax.js";
 import { Button } from "./button.js";
 export { languageForFilename };
 export const codeBlockVariantNames = ["inline", "file", "preview"];
@@ -30,38 +31,6 @@ export async function preloadCodeLanguages(...languages) {
         return resolved ? [loadCodeLanguage(resolved)] : [];
     }));
 }
-function useCodeTokens(code, language) {
-    const [loaded, setLoaded] = useState(0);
-    const highlightable = language !== null && code.length <= maxHighlightedLength;
-    const needed = useMemo(() => highlightable ? [language, ...embeddedLanguages(code, language)] : [], [code, language, highlightable]);
-    const missing = needed.filter((name) => !isLanguageReady(name));
-    const key = missing.join(" ");
-    useEffect(() => {
-        if (!key)
-            return;
-        let live = true;
-        void Promise.all(key.split(" ").map((name) => loadCodeLanguage(name))).then(() => live && setLoaded((value) => value + 1), () => undefined);
-        return () => {
-            live = false;
-        };
-    }, [key]);
-    return useMemo(() => (highlightable ? codeTokens(code, language) : null), 
-    // `loaded` and `key` re-run this once the grammars arrive.
-    [code, language, highlightable, loaded, key]);
-}
-const fontStyleClasses = [
-    [1, "sprout-syntax-italic"],
-    [2, "sprout-syntax-bold"],
-    [4, "sprout-syntax-underline"],
-];
-function tokenClass(token) {
-    const role = /--sprout-syntax-(?:token-)?([a-z-]+)/.exec(token.color ?? "")?.[1];
-    const classes = role && role !== "foreground" ? [`sprout-syntax-${role}`] : [];
-    for (const [flag, name] of fontStyleClasses)
-        if ((token.fontStyle ?? 0) & flag)
-            classes.push(name);
-    return classes.length ? classes.join(" ") : undefined;
-}
 export function CodeBlock({ code, language, filename, lineNumbers = true, wrap = false, variant = "inline", className, ...props }) {
     const [copyState, setCopyState] = useState("idle");
     const timer = useRef(undefined);

package/dist/components/file-explorer.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes } from "react";
+export interface FileExplorerTextFile {
+    /** A slash-separated path, such as `agents/scout/persona.md`. Folders come from the paths. */
+    path: string;
+    content: string;
+}
+export interface FileExplorerUnavailableFile {
+    path: string;
+    /** Why the file has no text to show, such as “Binary files cannot be displayed.” */
+    unavailable: string;
+}
+export type FileExplorerFile = FileExplorerTextFile | FileExplorerUnavailableFile;
+export interface FileExplorerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    files: FileExplorerFile[];
+    /** Heads the sidebar and names the tree, such as “Soul”. */
+    label?: string | undefined;
+    /** The file open at first. Its folders start expanded. */
+    defaultPath?: string | undefined;
+}
+/** Search stops after this many matching lines, so one common word cannot flood the list. */
+export declare const fileExplorerMaxMatches = 500;
+/**
+ * A read-only code explorer: a folder tree, open tabs, and a syntax-colored
+ * file pane. Search filters file names and lists matching lines across every
+ * file; picking a line opens the file there.
+ */
+export declare function FileExplorer({ files, label, defaultPath, className, ...props }: FileExplorerProps): import("react").JSX.Element;