@columenlabs/lumen-ui 0.1.226 → 0.1.228

package/dist/assistant/chat-image.d.ts

@@ -2,3 +2,10 @@ export declare function ChatImage({ src, alt }: {
     src: string;
     alt: string;
 }): import("react").JSX.Element;
+/** An image over 90% of the screen with zoom and pan (the kit's Dialog: Esc, × or a click outside closes it). */
+export declare function ImageLightbox({ src, alt, open, onOpenChange, }: {
+    src: string;
+    alt: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

package/dist/assistant/chat-image.js

@@ -40,11 +40,15 @@ export function ChatImage({ src, alt }) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative w-full overflow-hidden rounded-md border bg-background", style: { aspectRatio: ratio ?? 4 / 3, maxHeight: '60vh' }, "data-slot": "chat-image", children: _jsxs(Zoomable, { src: src, alt: alt, children: [_jsx(IconButton, { icon: Maximize2Icon, label: "Full screen", onClick: () => setFull(true) }), _jsx(IconButton, { icon: Minimize2Icon, label: "Shrink", onClick: () => {
                                 setOpen(false);
                                 setFull(false);
-                            } })] }) }), _jsx(Dialog, { open: full, onOpenChange: setFull, children: _jsxs(DialogContent, { showCloseButton: false, "aria-describedby": undefined, 
-                    // Focus the box, not its first button: a focused button shows its tooltip, which would take
-                    // the first Esc.
-                    onOpenAutoFocus: (e) => {
-                        e.preventDefault();
-                        e.currentTarget.focus();
-                    }, className: cn('h-[90vh] w-[90vw] max-w-none overflow-hidden p-0 sm:max-w-none', 'max-md:h-full max-md:w-full'), children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("div", { className: "relative size-full", children: _jsx(Zoomable, { src: src, alt: alt, panAtFit: true, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) })] }));
+                            } })] }) }), _jsx(ImageLightbox, { src: src, alt: alt, open: full, onOpenChange: setFull })] }));
+}
+/** An image over 90% of the screen with zoom and pan (the kit's Dialog: Esc, × or a click outside closes it). */
+export function ImageLightbox({ src, alt, open, onOpenChange, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { showCloseButton: false, "aria-describedby": undefined, 
+            // Focus the box, not its first button: a focused button shows its tooltip, which would take
+            // the first Esc.
+            onOpenAutoFocus: (e) => {
+                e.preventDefault();
+                e.currentTarget.focus();
+            }, className: cn('h-[90vh] w-[90vw] max-w-none overflow-hidden p-0 sm:max-w-none', 'max-md:h-full max-md:w-full'), children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("div", { className: "relative size-full", children: _jsx(Zoomable, { src: src, alt: alt, panAtFit: true, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) }));
 }

package/dist/assistant/image-card.d.ts

@@ -0,0 +1,11 @@
+import type { StepImage, StepItem } from '@columenlabs/lumen-ui-types/assistant';
+/** Whether a tool's name as the model called it (`group__tool`) is `tool`. */
+export declare const toolIs: (called: string, tool: string) => boolean;
+export declare function ImageCard({ step, image, mode, }: {
+    step: StepItem;
+    image: StepImage;
+    /** The composer mode Make another turns on. */
+    mode?: string;
+}): import("react").JSX.Element;
+/** The image tool's line while it runs. */
+export declare function ImagePending(): import("react").JSX.Element;

package/dist/assistant/image-card.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DownloadIcon, ImageIcon, ImagePlusIcon, Maximize2Icon, RefreshCwIcon } from 'lucide-react';
+import { useState } from 'react';
+import { IconButton } from '../icon-button.js';
+import { lumenToast } from '../lumen-toast.js';
+import { ImageLightbox } from './chat-image.js';
+import { composeAssistant } from './sources.js';
+/** Whether a tool's name as the model called it (`group__tool`) is `tool`. */
+export const toolIs = (called, tool) => called === tool || called.endsWith(`__${tool}`);
+/** The image as the composer sends it, or null when it cannot be read. */
+async function asReference(url) {
+    try {
+        const res = await fetch(url, {
+            credentials: 'same-origin',
+            signal: AbortSignal.timeout(15_000),
+        });
+        if (!res.ok)
+            return null;
+        const blob = await res.blob();
+        const data = await new Promise((ok, fail) => {
+            const f = new FileReader();
+            f.onload = () => ok(String(f.result));
+            f.onerror = () => fail(f.error);
+            f.readAsDataURL(blob);
+        });
+        const m = /^data:(image\/(?:png|jpeg|webp|gif));base64,(.*)$/.exec(data);
+        return m ? { media_type: m[1], data: m[2] } : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function ImageCard({ step, image, mode, }) {
+    const [zoom, setZoom] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const alt = image.alt || step.title;
+    const withImage = async (then) => {
+        setBusy(true);
+        const img = await asReference(image.url);
+        setBusy(false);
+        if (img)
+            then(img);
+        else
+            lumenToast.error("That image couldn't be read. Try again.");
+    };
+    return (_jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1.5", "data-slot": "chat-made-image", children: [_jsxs("div", { className: "relative w-full max-w-sm overflow-hidden rounded-lg border bg-muted", children: [_jsx("img", { src: image.url, alt: alt, className: "block w-full" }), _jsxs("div", { className: "absolute top-2 right-2 flex gap-1 rounded-lg border bg-popover/90 p-0.5 text-popover-foreground shadow-sm backdrop-blur-sm", children: [_jsx(IconButton, { icon: Maximize2Icon, label: "Zoom", onClick: () => setZoom(true) }), _jsx(IconButton, { icon: ImagePlusIcon, label: "Use as reference", disabled: busy, onClick: () => void withImage((img) => composeAssistant({ images: [img] })) }), _jsx(IconButton, { icon: DownloadIcon, label: "Download", onClick: () => {
+                                    const a = document.createElement('a');
+                                    a.href = image.url;
+                                    a.download = 'image.png';
+                                    a.click();
+                                } }), _jsx(IconButton, { icon: RefreshCwIcon, label: "Make another", disabled: busy, onClick: () => void withImage((img) => composeAssistant({
+                                    text: 'Make another version of this image.',
+                                    images: [img],
+                                    ...(mode ? { use: mode } : {}),
+                                    send: true,
+                                })) })] })] }), image.cost && _jsxs("span", { className: "text-muted-foreground text-xs", children: ["Image \u00B7 ", image.cost] }), _jsx(ImageLightbox, { src: image.url, alt: alt, open: zoom, onOpenChange: setZoom })] }));
+}
+/** The image tool's line while it runs. */
+export function ImagePending() {
+    return (_jsx("div", { className: "flex w-full min-w-0 flex-col gap-1.5", children: _jsxs("output", { className: "flex aspect-[400/260] w-full max-w-sm animate-pulse flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-muted/50 text-muted-foreground", children: [_jsx(ImageIcon, { className: "size-7", "aria-hidden": true }), _jsx("span", { className: "text-foreground text-sm", children: "Making the image" }), _jsx("span", { className: "text-xs", children: "Usually 10 to 20 s" })] }) }));
+}

package/dist/assistant/index.d.ts

@@ -1,6 +1,6 @@
 export { type AssistantAdapter, assistantClient } from './client.js';
 export { ChatImage } from './chat-image.js';
-export { type AssistantCommand, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { type AssistantCommand, type AssistantMode, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
 export { type AssistantSource, type AssistantSourceItem, type ComposeRequest, type PageSelection, composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';

package/dist/assistant/lumen-assistant.d.ts

@@ -1,4 +1,5 @@
 import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantQuote, type AssistantRefNote, type AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import { type LucideIcon } from 'lucide-react';
 import { type LumenOption } from '../lumen-selector.js';
 import type { AssistantAdapter } from './client.js';
 import { type AssistantSource } from './sources.js';
@@ -43,6 +44,25 @@ export interface LumenAssistantProps {
      * until it is sent. Turn it on when the app's chat route passes `images` on to the agent.
      */
     images?: boolean;
+    /**
+     * Toggles beside the paperclip, one per mode ("Make an image"): one turned on goes with the next
+     * message as its `use`, and the app's plan reads it (call the tool that makes an image).
+     */
+    modes?: AssistantMode[];
+    /**
+     * The app's tool that makes images: while it runs its line is a "Making the image" box, and its
+     * card's Make another sends again with `mode` on.
+     */
+    imageTool?: {
+        tool: string;
+        mode?: string;
+    };
+}
+/** A composer mode: its toggle's icon and label (also its tooltip and aria-label). */
+export interface AssistantMode {
+    id: string;
+    icon: LucideIcon;
+    label: string;
 }
 /** A slash command: typing `/` in the composer lists them. */
 export interface AssistantCommand {
@@ -58,7 +78,7 @@ export interface AssistantCommand {
     run: (args: string) => string | undefined | Promise<string | undefined>;
 }
 /** The assistant's chat: header, messages and composer. */
-export declare function LumenAssistant({ client, context, onSettings, keepDays, chatScope, onClose, chat: outside, commands, sources, images, }: LumenAssistantProps): import("react").JSX.Element;
+export declare function LumenAssistant({ client, context, onSettings, keepDays, chatScope, onClose, chat: outside, commands, sources, images, modes, imageTool, }: LumenAssistantProps): import("react").JSX.Element;
 /** An allowance in its unit: `$4.20`, or `350 credits`. */
 export declare const allowanceAmount: (u: AllowanceUnit, n: number) => string;
 /** What the composer sends with the text: the tier picked with `#` and the things pointed at with `@`. */
@@ -67,6 +87,7 @@ export interface ComposerExtra {
     refs?: AssistantRefNote[];
     images?: AssistantImage[];
     quote?: AssistantQuote;
+    use?: string;
 }
 /**
  * A pasted, dropped or picked image, ready to send: scaled to `IMAGE_EDGE` on a canvas and saved as JPEG
@@ -81,7 +102,9 @@ export declare function readAssistantImage(file: File): Promise<AssistantImage |
  * triggers list what can follow them as it is typed: `/` at the start a command, `@` a thing to
  * point at (the `sources`), `#` a tier for this message; a picked tier or thing shows as a chip.
  */
-export declare function LumenComposer({ name, busy, queued, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, onSend, onStop, }: {
+export declare function LumenComposer({ name, busy, queued, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, modes, onSend, onStop, }: {
+    /** Toggles beside the paperclip (`LumenAssistant` `modes`). */
+    modes?: AssistantMode[];
     name: string;
     /** Images can be pasted or dropped on the box (`LumenAssistant` `images`). */
     images?: boolean;

package/dist/assistant/lumen-assistant.js

@@ -28,6 +28,7 @@ import { Spinner } from '../ui/spinner.js';
 import { Textarea } from '../ui/textarea.js';
 import { ChatImage } from './chat-image.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
+import { ImageCard, ImagePending, toolIs } from './image-card.js';
 import { ReplyToSelection } from './reply-selection.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { UsageHistoryView, tokens, usd } from './usage-history.js';
@@ -50,7 +51,7 @@ export function useAssistantStatus(client) {
 export { usd };
 const seconds = (ms) => (ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFixed(1)} s`);
 /** The assistant's chat: header, messages and composer. */
-export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, modes = [], imageTool, }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
@@ -191,7 +192,7 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, cha
                             title: c.title,
                             updated_at: new Date(c.at).toISOString(),
                             ...(chatScope && allScopes && c.scope ? { where: chatScope.name?.(c.scope) } : {}),
-                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, toggle: chatScope && { label: chatScope.label, on: allScopes, onChange: setAllScopes }, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()) }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, queue: chat.queue, canSteer: chat.canSteer, onSteerQueued: chat.steerQueued, onUnqueue: chat.unqueue, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, onSend: (text, more, how) => chat.send(text, { ...extra(), ...more }, how), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
+                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, toggle: chatScope && { label: chatScope.label, on: allScopes, onChange: setAllScopes }, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _jsx(ImageTool.Provider, { value: imageTool ?? null, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()) }) }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, queue: chat.queue, canSteer: chat.canSteer, onSteerQueued: chat.steerQueued, onUnqueue: chat.unqueue, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, modes: modes, onSend: (text, more, how) => chat.send(text, { ...extra(), ...more }, how), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
 }
 function Messages({ chat, status, onSettings, onRetry, }) {
     const end = useRef(null);
@@ -238,6 +239,8 @@ const AssistantName = createContext('Assistant');
 /** A tier's name for a message's `#` chip. */
 const TierNames = createContext((id) => id);
 /** Takes back a change made at once (Undo on its line). */
+/** The app's image tool (`LumenAssistant` `imageTool`). */
+const ImageTool = createContext(null);
 const UndoWrite = createContext(null);
 /** Sends a failed turn again; null while it can't (an answer runs, nobody can pay). */
 const RetryTurn = createContext(null);
@@ -400,6 +403,11 @@ function WebSources({ items }) {
     return (_jsx("ol", { "aria-label": "Sources", className: "flex min-w-0 flex-wrap gap-1.5", children: pages.map((p, n) => (_jsx("li", { className: "min-w-0 max-w-full", children: _jsxs("a", { href: p.url, target: "_blank", rel: "noopener noreferrer", title: p.title ? `${p.title} · ${p.url}` : p.url, className: "flex h-6 min-w-0 items-center gap-1.5 rounded-full border pr-2.5 pl-1 text-xs hover:bg-muted", children: [_jsx("span", { className: "grid size-4 shrink-0 place-items-center rounded-full bg-primary/15 font-medium text-primary text-xs tabular-nums", children: n + 1 }), _jsx("span", { className: "truncate", children: hostOf(p.url) })] }) }, p.url))) }));
 }
 function Step({ step, live }) {
+    const images = useContext(ImageTool);
+    if (step.image)
+        return _jsx(ImageCard, { step: step, image: step.image, mode: images?.mode });
+    if (live && images && toolIs(step.tool, images.tool))
+        return _jsx(ImagePending, {});
     if (step.web)
         return _jsx(WebStep, { step: step, live: live });
     return _jsx(ToolStep, { step: step, live: live });
@@ -560,7 +568,7 @@ const imageUrl = (i) => `data:${i.media_type};base64,${i.data}`;
  * triggers list what can follow them as it is typed: `/` at the start a command, `@` a thing to
  * point at (the `sources`), `#` a tier for this message; a picked tier or thing shows as a chip.
  */
-export function LumenComposer({ name, busy, queued, queue, canSteer = false, onSteerQueued, onUnqueue, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, onSend, onStop, }) {
+export function LumenComposer({ name, busy, queued, queue, canSteer = false, onSteerQueued, onUnqueue, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, modes = [], onSend, onStop, }) {
     const [text, setText] = useState('');
     const [caret, setCaret] = useState(0);
     const [closed, setClosed] = useState(null);
@@ -568,6 +576,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
     const [refs, setRefs] = useState([]);
     const [images, setImages] = useState([]);
     const [quote, setQuote] = useState(null);
+    const [use, setUse] = useState(null);
     const list = useRef(null);
     const box = useRef(null);
     const filePick = useRef(null);
@@ -579,6 +588,18 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         if (!request)
             return;
         take();
+        // Make another: sent at once, the box left as it is.
+        if (request.send && request.text) {
+            onSend(request.text, {
+                ...(request.images?.length ? { images: request.images } : {}),
+                ...(request.use ? { use: request.use } : {}),
+            });
+            return;
+        }
+        if (request.images?.length)
+            setImages((p) => [...p, ...(request.images ?? [])].slice(0, ASSISTANT_IMAGES_MAX));
+        if (request.use)
+            setUse(request.use);
         if (request.refs?.length)
             setRefs((p) => [...p, ...(request.refs ?? [])]);
         if (request.tier)
@@ -606,6 +627,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         ...(refs.length ? { refs } : {}),
         ...(images.length ? { images } : {}),
         ...(quote ? { quote } : {}),
+        ...(use ? { use } : {}),
     });
     const clear = () => {
         setText('');
@@ -614,6 +636,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         setRefs([]);
         setImages([]);
         setQuote(null);
+        setUse(null);
     };
     /** Adds the image files among `files`; says so when one is left out. Returns whether any was an image. */
     const attach = (files) => {
@@ -679,6 +702,8 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
             setImages(q.extra.images);
         if (q.extra?.quote)
             setQuote(q.extra.quote);
+        if (q.extra?.use)
+            setUse(q.extra.use);
         requestAnimationFrame(() => box.current?.focus());
     };
     const waiting = queue ?? (queued ? [{ id: 'queued', message: queued }] : []);
@@ -842,7 +867,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                     const r = sourceItems.get(o.value)?.();
                     if (r)
                         setRefs((p) => [...p, r]);
-                }, onClose: () => setClosed(`${text}|${caret}`) })), quote && _jsx(QuoteLine, { quote: quote, onRemove: () => setQuote(null) }), images.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", "aria-label": "Images going with your message", children: images.map((img, i) => (_jsxs("span", { className: "relative", children: [_jsx("img", { src: imageUrl(img), alt: `Pasted ${i + 1}`, className: "size-12 rounded-md border object-cover" }), _jsx("button", { type: "button", "aria-label": `Remove image ${i + 1}`, className: "absolute -top-1.5 -right-1.5 grid size-4 place-items-center rounded-full border bg-background text-muted-foreground hover:text-foreground", onClick: () => setImages((p) => p.filter((_, j) => j !== i)), children: _jsx(XIcon, { className: "size-3" }) })] }, `${i}:${img.data.length}`))) })), (tierLabel || refs.length > 0) && (_jsxs("div", { className: "mb-2 flex flex-wrap gap-1", children: [tierLabel && (_jsx(ComposerChip, { sign: TIER, label: tierLabel, onRemove: () => setTier(null) })), refs.map((r, i) => (_jsx(ComposerChip, { sign: POINT, label: r.label, onRemove: () => setRefs((p) => p.filter((_, j) => j !== i)) }, `${r.kind}:${r.label}:${i}`)))] })), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: box, "aria-label": `Message ${name}`, placeholder: `Ask ${name}…${hints.length ? ` (${hints.join(' ')})` : ''}`, className: cn('max-h-48 min-h-11 resize-none', busy && text.trim() && canSteer ? 'pr-18' : 'pr-11', canAttach && 'pb-9'), value: text, disabled: disabled, onChange: (e) => {
+                }, onClose: () => setClosed(`${text}|${caret}`) })), quote && _jsx(QuoteLine, { quote: quote, onRemove: () => setQuote(null) }), images.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", "aria-label": "Images going with your message", children: images.map((img, i) => (_jsxs("span", { className: "relative", children: [_jsx("img", { src: imageUrl(img), alt: `Pasted ${i + 1}`, className: "size-12 rounded-md border object-cover" }), _jsx("button", { type: "button", "aria-label": `Remove image ${i + 1}`, className: "absolute -top-1.5 -right-1.5 grid size-4 place-items-center rounded-full border bg-background text-muted-foreground hover:text-foreground", onClick: () => setImages((p) => p.filter((_, j) => j !== i)), children: _jsx(XIcon, { className: "size-3" }) })] }, `${i}:${img.data.length}`))) })), (tierLabel || refs.length > 0) && (_jsxs("div", { className: "mb-2 flex flex-wrap gap-1", children: [tierLabel && (_jsx(ComposerChip, { sign: TIER, label: tierLabel, onRemove: () => setTier(null) })), refs.map((r, i) => (_jsx(ComposerChip, { sign: POINT, label: r.label, onRemove: () => setRefs((p) => p.filter((_, j) => j !== i)) }, `${r.kind}:${r.label}:${i}`)))] })), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: box, "aria-label": `Message ${name}`, placeholder: `Ask ${name}…${hints.length ? ` (${hints.join(' ')})` : ''}`, className: cn('max-h-48 min-h-11 resize-none', busy && text.trim() && canSteer ? 'pr-18' : 'pr-11', (canAttach || modes.length > 0) && 'pb-9'), value: text, disabled: disabled, onChange: (e) => {
                             setText(e.target.value);
                             setCaret(e.target.selectionStart);
                         }, onSelect: (e) => setCaret(e.currentTarget.selectionStart), onPaste: (e) => {
@@ -862,11 +887,11 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                                 e.preventDefault();
                                 send(e.altKey ? 'queue' : undefined);
                             }
-                        } }), canAttach && (_jsxs("div", { className: "absolute bottom-1.5 left-1.5", children: [_jsx(IconButton, { icon: PaperclipIcon, label: "Attach images", size: "icon-xs", disabled: disabled, onClick: () => filePick.current?.click() }), _jsx("input", { ref: filePick, type: "file", accept: "image/*", multiple: true, hidden: true, onChange: (e) => {
-                                    if (e.target.files)
-                                        attach(e.target.files);
-                                    e.target.value = '';
-                                } })] })), _jsx("div", { className: "absolute right-1.5 bottom-1.5", children: busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : busy ? (_jsxs("span", { className: "flex gap-1", children: [_jsx(IconButton, { icon: ListPlusIcon, label: canSteer ? 'Queue for after (⌥↩)' : 'Queue for after (↩)', variant: canSteer ? 'outline' : 'default', size: "icon-xs", disabled: disabled, onClick: () => send('queue') }), canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now (\u21A9)", variant: "default", size: "icon-xs", disabled: disabled, onClick: () => send('steer') }))] })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: "Send", variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: () => send() })) })] })] }));
+                        } }), (canAttach || modes.length > 0) && (_jsxs("div", { className: "absolute bottom-1.5 left-1.5 flex items-center gap-0.5", children: [canAttach && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: PaperclipIcon, label: "Attach images", size: "icon-xs", disabled: disabled, onClick: () => filePick.current?.click() }), _jsx("input", { ref: filePick, type: "file", accept: "image/*", multiple: true, hidden: true, onChange: (e) => {
+                                            if (e.target.files)
+                                                attach(e.target.files);
+                                            e.target.value = '';
+                                        } })] })), modes.map((md) => (_jsx(IconButton, { icon: md.icon, label: md.label, size: "icon-xs", variant: use === md.id ? 'secondary' : 'ghost', "aria-pressed": use === md.id, className: cn(use === md.id && 'text-primary'), disabled: disabled, onClick: () => setUse((u) => (u === md.id ? null : md.id)) }, md.id)))] })), _jsx("div", { className: "absolute right-1.5 bottom-1.5", children: busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : busy ? (_jsxs("span", { className: "flex gap-1", children: [_jsx(IconButton, { icon: ListPlusIcon, label: canSteer ? 'Queue for after (⌥↩)' : 'Queue for after (↩)', variant: canSteer ? 'outline' : 'default', size: "icon-xs", disabled: disabled, onClick: () => send('queue') }), canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now (\u21A9)", variant: "default", size: "icon-xs", disabled: disabled, onClick: () => send('steer') }))] })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: "Send", variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: () => send() })) })] })] }));
 }
 /**
  * What waits above the box while an answer runs: steering messages until the answer reads them,

package/dist/assistant/sources.d.ts

@@ -1,4 +1,4 @@
-import type { AssistantQuote, AssistantRefNote } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantImage, AssistantQuote, AssistantRefNote } from '@columenlabs/lumen-ui-types/assistant';
 import { type ComponentType } from 'react';
 /** One thing a source holds: a row in the `@` list, sent with the message as `ref`. */
 export interface AssistantSourceItem {
@@ -37,6 +37,12 @@ export interface ComposeRequest {
     tier?: string;
     /** A piece of the chat to reply to: it shows above the box with an ×. */
     quote?: AssistantQuote;
+    /** Images to send with the message (an image card's Use as reference). */
+    images?: AssistantImage[];
+    /** A composer mode to turn on (`LumenAssistant` `modes`), by id. */
+    use?: string;
+    /** Send at once with `text`, leaving the box as it is (an image card's Make another). */
+    send?: boolean;
 }
 /**
  * Opens the assistant with `refs` as chips in its composer and `text` typed, focused for the person

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.226",
+  "version": "0.1.228",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.226",
+    "@columenlabs/lumen-ui-types": "0.1.228",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",