@columenlabs/lumen-ui 0.1.214 → 0.1.216

package/dist/assistant/chat-image.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ChatImage: an image in a chat message. A thumbnail until clicked; then it opens full width in place,
-// where the wheel or a pinch zooms at the pointer, a drag or two fingers pan and a double-click
+// where a pinch (or Ctrl + wheel) zooms at the pointer, a drag or two fingers pan and a double-click
 // toggles fit and 2× (react-zoom-pan-pinch). Its toolbar zooms, resets, opens the image in a 90%
 // lightbox with the same controls (the kit's Dialog: Esc, × or a click outside closes it) and
 // shrinks it back to the thumbnail.
@@ -20,8 +20,11 @@ function ZoomBar({ children }) {
     return (_jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-0.5 rounded-lg border bg-popover/90 p-0.5 text-popover-foreground shadow-sm backdrop-blur-sm", "data-slot": "image-zoom-bar", children: [_jsx(IconButton, { icon: ZoomOutIcon, label: "Zoom out", disabled: scale <= 1.001, onClick: () => zoomOut() }), _jsxs("span", { className: "num min-w-10 text-center text-muted-foreground text-xs", "aria-live": "polite", children: [Math.round(scale * 100), "%"] }), _jsx(IconButton, { icon: ZoomInIcon, label: "Zoom in", disabled: scale >= MAX_SCALE - 0.001, onClick: () => zoomIn() }), _jsx(IconButton, { icon: RotateCcwIcon, label: "Reset zoom", onClick: () => resetTransform() }), _jsx("span", { className: "mx-0.5 h-4 w-px bg-border", "aria-hidden": true }), children] }));
 }
 /** The image at fit (scale 1), with zoom and pan; the wrapper takes the box its parent gives it. */
-function Zoomable({ src, alt, children, }) {
-    return (_jsxs(TransformWrapper, { minScale: 1, maxScale: MAX_SCALE, centerZoomedOut: true, wheel: { step: 0.004 }, doubleClick: { mode: 'toggle', step: 1 }, children: [_jsx(ZoomBar, { children: children }), _jsx(TransformComponent, { wrapperClass: "!size-full cursor-grab active:cursor-grabbing", contentClass: "!size-full", children: _jsx("img", { src: src, alt: alt, draggable: false, className: "size-full object-contain" }) })] }));
+function Zoomable({ src, alt, panAtFit = false, children, }) {
+    const [zoomed, setZoomed] = useState(false);
+    return (_jsxs(TransformWrapper, { minScale: 1, maxScale: MAX_SCALE, centerZoomedOut: true, 
+        // A pinch (a wheel with ctrlKey) zooms; two fingers or a plain wheel pan.
+        wheel: { step: 0.01, wheelDisabled: true }, trackPadPanning: { disabled: !panAtFit && !zoomed, velocityDisabled: true }, onTransform: (_, { scale }) => setZoomed(scale > 1.001), doubleClick: { mode: 'toggle', step: 1 }, children: [_jsx(ZoomBar, { children: children }), _jsx(TransformComponent, { wrapperClass: "!size-full cursor-grab active:cursor-grabbing", contentClass: "!size-full", children: _jsx("img", { src: src, alt: alt, draggable: false, className: "size-full object-contain" }) })] }));
 }
 export function ChatImage({ src, alt }) {
     const [open, setOpen] = useState(false);
@@ -43,5 +46,5 @@ export function ChatImage({ src, alt }) {
                     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, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) })] }));
+                    }, 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/client.d.ts

@@ -38,6 +38,13 @@ export interface AssistantAdapter {
     usage?(month?: string): Promise<UsageHistory>;
     /** One answer: `onEvent` hears each event as it streams; abort `signal` to stop it. */
     send(msg: AssistantMessage, onEvent: (e: AssistantEvent) => void, signal?: AbortSignal): Promise<void>;
+    /**
+     * A message for the answer running in `chatId`: it joins at the answer's next step. `steered:
+     * false` (or no method) and the panel queues it for after the answer instead.
+     */
+    steer?(chatId: string, message: string): Promise<{
+        steered: boolean;
+    }>;
     settleDraft(chatId: string, draftId: string, action: 'save' | 'dismiss'): Promise<DraftItem>;
     /** Takes back a change the assistant made at once. */
     undoWrite(chatId: string, stepId: string): Promise<StepItem>;

package/dist/assistant/client.js

@@ -71,6 +71,7 @@ export function assistantClient(base) {
             action,
             ...(amount !== undefined ? { amount } : {}),
         }),
+        steer: (chatId, message) => send('POST', `/chats/${encodeURIComponent(chatId)}/steer`, { message }),
         async send(msg, onEvent, signal) {
             const url = `${root}/chat`;
             const res = await fetch(url, {

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

@@ -3,7 +3,7 @@ import { type LumenOption } from '../lumen-selector.js';
 import type { AssistantAdapter } from './client.js';
 import { type AssistantSource } from './sources.js';
 import { usd } from './usage-history.js';
-import { type AssistantChatState } from './use-assistant-chat.js';
+import { type AssistantChatState, type QueuedMessage } from './use-assistant-chat.js';
 export declare const assistantStatusKey: (client: AssistantAdapter) => string[];
 /** The person's assistant status, shared by the panel and Settings. */
 export declare function useAssistantStatus(client: AssistantAdapter): import("@tanstack/react-query").UseQueryResult<AssistantStatus, Error>;
@@ -68,18 +68,28 @@ export interface ComposerExtra {
     images?: AssistantImage[];
 }
 /**
- * The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. Three
+ * The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. While it
+ * runs, words in the box go into it with Enter (Steer, where `canSteer`) or wait for it to end
+ * with Alt+Enter (Queue); the `queue` lists above the box, each with Steer now, Edit and Remove.
+ * Three
  * 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, 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, onSend, onStop, }: {
     name: string;
     /** Images can be pasted or dropped on the box (`LumenAssistant` `images`). */
     images?: boolean;
     /** The page's name for `@` This page; the document's title by default. */
     page?: string;
     busy: boolean;
+    /** The first queued message; `queue` lists them all, with their actions. */
     queued: string | null;
+    queue?: QueuedMessage[];
+    /** Enter steers a message into the running answer; Alt+Enter queues it. */
+    canSteer?: boolean;
+    onSteerQueued?: (id: string) => void;
+    /** Takes a queued message out; Edit puts its words back in the box. */
+    onUnqueue?: (id: string) => QueuedMessage | undefined;
     disabled?: boolean;
     commands?: AssistantCommand[];
     /** What `#` lists. */
@@ -90,7 +100,7 @@ export declare function LumenComposer({ name, busy, queued, disabled, commands,
     }[];
     /** What `@` lists, a group each. */
     sources?: readonly AssistantSource[];
-    onSend: (text: string, extra: ComposerExtra) => void;
+    onSend: (text: string, extra: ComposerExtra, how?: 'steer' | 'queue') => void;
     onStop: () => void;
 }): import("react").JSX.Element;
 /**

package/dist/assistant/lumen-assistant.js

@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // with Stop, a queued message and the chat's cost and context under it.
 import { ASSISTANT_IMAGES_MAX, ASSISTANT_IMAGE_CHARS, } from '@columenlabs/lumen-ui-types/assistant';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, MonitorIcon, PencilIcon, PlusIcon, ReceiptIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
+import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, ListPlusIcon, MonitorIcon, PencilIcon, PlusIcon, ReceiptIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
 import { Fragment, createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, useAssistantHotkey, } from '../assistant-panel.js';
 import { screenMapFor, useAssistantScreen } from '../assistant-screen.js';
@@ -30,7 +30,7 @@ import { ChatImage } from './chat-image.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { UsageHistoryView, tokens, usd } from './usage-history.js';
-import { useAssistantChat } from './use-assistant-chat.js';
+import { useAssistantChat, } from './use-assistant-chat.js';
 // The Markdown renderer (tables included) loads with the first answer (lazy-part.tsx).
 // A tab whose build a deploy replaced shows the answer as plain text instead of reloading mid chat.
 const ChatMarkdown = lazyPart(() => import('./chat-markdown.js').then((m) => m.default), null, ({ children }) => _jsx("p", { className: "whitespace-pre-wrap", children: children }));
@@ -190,7 +190,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 }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, onSend: (text, more) => chat.send(text, { ...extra(), ...more }), 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(Messages, { chat: chat, status: s, onSettings: onSettings }) }) }), _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 })] }));
 }
 function Messages({ chat, status, onSettings, }) {
     const end = useRef(null);
@@ -264,6 +264,8 @@ function Item({ item, onSettle, busy, }) {
     const tierName = useContext(TierNames);
     switch (item.kind) {
         case 'user':
+            if (item.steered)
+                return (_jsxs("div", { className: "ml-8 flex flex-col items-end gap-0.5 self-end", children: [_jsxs("span", { className: "flex items-center gap-1 text-primary text-xs", children: [_jsx(CornerDownRightIcon, { className: "size-3" }), "Steered"] }), _jsx("div", { className: "rounded-lg border border-primary/40 bg-muted px-3 py-2 text-sm whitespace-pre-wrap break-words", children: item.text })] }));
             return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap has-[[data-slot=chat-image]]:ml-0 has-[[data-slot=chat-image]]:w-full", children: [(item.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: TIER, label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: POINT, label: r.label }, `${r.kind}:${r.label}:${i}`)))] })), item.images?.length ? (_jsx("span", { className: "mb-1 flex flex-wrap gap-1.5", children: item.images.map((src, i) => (_jsx(ChatImage, { src: src, alt: `Pasted ${i + 1}` }, `${i}:${src.length}`))) })) : null, item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
         case 'text':
             return (_jsxs("div", { className: "prose-sm text-sm leading-relaxed [&_code]:font-code [&_code]:text-xs [&_li]:ml-4 [&_ol]:list-decimal [&_p]:my-1.5 [&_ul]:list-disc", children: [_jsx(ChatMarkdown, { children: item.text }), item.live && (_jsx("span", { className: "ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground/60 align-middle" }))] }));
@@ -466,11 +468,14 @@ async function readImage(file) {
 }
 const imageUrl = (i) => `data:${i.media_type};base64,${i.data}`;
 /**
- * The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. Three
+ * The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. While it
+ * runs, words in the box go into it with Enter (Steer, where `canSteer`) or wait for it to end
+ * with Alt+Enter (Queue); the `queue` lists above the box, each with Steer now, Edit and Remove.
+ * Three
  * 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, 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, onSend, onStop, }) {
     const [text, setText] = useState('');
     const [caret, setCaret] = useState(0);
     const [closed, setClosed] = useState(null);
@@ -557,7 +562,7 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
             lumenToast.error(errorText(e));
         }
     };
-    const send = () => {
+    const send = (how) => {
         if (!text.trim() || disabled)
             return;
         const c = m ? commands.find((x) => x.name === m[1]) : undefined;
@@ -565,9 +570,25 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
             void run(c, m?.[2] ?? '');
             return;
         }
-        onSend(text, extra());
+        onSend(text, extra(), busy ? (how ?? (canSteer ? 'steer' : 'queue')) : undefined);
         clear();
     };
+    // Edit: a queued message back in the box, its chips with it.
+    const edit = (id) => {
+        const q = onUnqueue?.(id);
+        if (!q)
+            return;
+        setText(q.message);
+        setCaret(q.message.length);
+        if (q.extra?.tier)
+            setTier(q.extra.tier);
+        if (q.extra?.refs?.length)
+            setRefs(q.extra.refs);
+        if (q.extra?.images?.length)
+            setImages(q.extra.images);
+        requestAnimationFrame(() => box.current?.focus());
+    };
+    const waiting = queue ?? (queued ? [{ id: 'queued', message: queued }] : []);
     const pickCommand = (o) => {
         const c = commands.find((x) => x.name === o.value);
         if (!c)
@@ -707,7 +728,7 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
     };
     const tierLabel = tiers.find((t) => t.id === tier)?.label;
     const hints = [commands.length && '/', POINT, tiers.length > 1 && TIER].filter(Boolean);
-    return (_jsxs("div", { className: "shrink-0 border-t p-3", children: [queued && (_jsxs("p", { className: "mb-2 truncate text-muted-foreground text-xs", children: ["Queued: ", _jsx("span", { className: "text-foreground", children: queued })] })), picking === 'command' && (_jsx(LumenSelectorList, { handle: list, label: "Commands", className: "mb-2", fuzzy: true, query: m?.[1] ?? '', options: commands.map((c) => ({
+    return (_jsxs("div", { className: "shrink-0 border-t p-3", children: [waiting.length > 0 && (_jsx(ComposerQueue, { queue: waiting, canSteer: busy && canSteer && !!onSteerQueued, onSteer: (id) => onSteerQueued?.(id), onEdit: onUnqueue ? edit : undefined, onRemove: onUnqueue ? (id) => void onUnqueue(id) : undefined })), picking === 'command' && (_jsx(LumenSelectorList, { handle: list, label: "Commands", className: "mb-2", fuzzy: true, query: m?.[1] ?? '', options: commands.map((c) => ({
                     value: c.name,
                     label: `/${c.name}`,
                     ...(c.args ? { detail: c.args } : {}),
@@ -728,7 +749,7 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
                     const r = sourceItems.get(o.value)?.();
                     if (r)
                         setRefs((p) => [...p, r]);
-                }, onClose: () => setClosed(`${text}|${caret}`) })), 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: "max-h-48 min-h-11 resize-none pr-11", value: text, disabled: disabled, onChange: (e) => {
+                }, onClose: () => setClosed(`${text}|${caret}`) })), 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'), value: text, disabled: disabled, onChange: (e) => {
                             setText(e.target.value);
                             setCaret(e.target.selectionStart);
                         }, onSelect: (e) => setCaret(e.currentTarget.selectionStart), onPaste: (e) => {
@@ -746,9 +767,17 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
                                 return;
                             if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
                                 e.preventDefault();
-                                send();
+                                send(e.altKey ? 'queue' : undefined);
                             }
-                        } }), _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 })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: busy ? 'Queue' : 'Send', variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: send })) })] })] }));
+                        } }), _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,
+ * then queued ones in order, each with Steer now, Edit (back in the box) and Remove.
+ */
+function ComposerQueue({ queue, canSteer, onSteer, onEdit, onRemove, }) {
+    const waiting = queue.filter((q) => !q.steering).length;
+    return (_jsxs("div", { className: "mb-2 flex flex-col gap-1", children: [waiting > 0 && (_jsxs("p", { className: "flex items-center gap-1.5 text-muted-foreground text-xs", children: [_jsx(ListPlusIcon, { className: "size-3.5" }), "Queued \u00B7 ", waiting] })), queue.map((q) => (_jsxs("div", { className: "flex h-8 min-w-0 items-center gap-1 rounded-md border bg-background pr-1 pl-2 text-sm", children: [q.steering && (_jsx(CornerDownRightIcon, { "aria-label": "Steering: Sage reads it at its next step", className: "size-3.5 shrink-0 animate-pulse text-primary" })), _jsx("span", { className: cn('min-w-0 flex-1 truncate', q.steering && 'text-muted-foreground'), title: q.message, children: q.message }), !q.steering && canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now", size: "icon-xs", onClick: () => onSteer(q.id) })), !q.steering && onEdit && (_jsx(IconButton, { icon: PencilIcon, label: "Edit", size: "icon-xs", onClick: () => onEdit(q.id) })), !q.steering && onRemove && (_jsx(IconButton, { icon: XIcon, label: "Remove", size: "icon-xs", onClick: () => onRemove(q.id) }))] }, q.id)))] }));
 }
 // The same thing pointed at twice: its kind and what finds it, whatever its words read then.
 const refKey = (r) => r.kind === 'page'

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

@@ -4,6 +4,15 @@ import type { AssistantAdapter } from './client.js';
 export type LiveItem = ChatItem & {
     live?: boolean;
 };
+type Extra = Omit<AssistantMessage, 'message' | 'chat_id'>;
+/** A message sent while an answer runs: waiting for it to end, or steered into it. */
+export interface QueuedMessage {
+    id: string;
+    message: string;
+    extra?: Extra;
+    /** Sent into the running answer, not read by it yet. */
+    steering?: boolean;
+}
 export interface AssistantChatState {
     chatId: string | null;
     title: string;
@@ -11,11 +20,23 @@ export interface AssistantChatState {
     usage: ChatUsage | null;
     /** An answer is streaming. */
     busy: boolean;
-    /** A message waiting for the answer to end. */
+    /** The first message waiting for the answer to end (`queue` has them all). */
     queued: string | null;
+    /** Messages sent while the answer runs, in order: steering ones first wait to be read. */
+    queue: QueuedMessage[];
+    /** The adapter takes a message into a running answer (Steer). */
+    canSteer: boolean;
     /** The chat is loading. */
     loading: boolean;
-    send: (message: string, extra?: Omit<AssistantMessage, 'message' | 'chat_id'>) => void;
+    /**
+     * Sends now, or while an answer runs: `steer` (the default where the adapter can) into it at its
+     * next step, else queued for after it.
+     */
+    send: (message: string, extra?: Extra, how?: 'steer' | 'queue') => void;
+    /** A queued message steered into the running answer now. */
+    steerQueued: (id: string) => void;
+    /** Takes a queued message out; its words and extras come back (Edit puts them in the box). */
+    unqueue: (id: string) => QueuedMessage | undefined;
     stop: () => void;
     open: (id: string) => Promise<void>;
     reset: () => void;
@@ -28,3 +49,4 @@ export interface AssistantChatState {
 /** A copy of the items with one event applied (hand-off sections copied too). */
 export declare function applyEvent(prev: LiveItem[], e: AssistantEvent): LiveItem[];
 export declare function useAssistantChat(client: AssistantAdapter): AssistantChatState;
+export {};

package/dist/assistant/use-assistant-chat.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { ApiError } from '../api-fetch.js';
 import { errorText } from '../integrations.js';
 /** The browser's IANA zone, sent with each message for the assistant's bearings. */
 function browserZone() {
@@ -30,6 +31,8 @@ function keepOutcomes(m) {
     }
     catch { }
 }
+let queuedSeq = 0;
+const queuedId = () => `q${++queuedSeq}`;
 /** Where an event lands: the chat, or the last hand-off section when it came from inside one. */
 function sinkOf(items, handoff) {
     if (!handoff)
@@ -148,12 +151,34 @@ export function useAssistantChat(client) {
     const [usage, setUsage] = useState(null);
     const [busy, setBusy] = useState(false);
     const [loading, setLoading] = useState(false);
-    const [queued, setQueued] = useState(null);
+    const [queue, setQueue] = useState([]);
+    // An adapter whose app has no steer route: Steer hides and messages queue.
+    const [steerOff, setSteerOff] = useState(false);
     const abort = useRef(null);
     const outcomes = useRef(null);
     outcomes.current ??= readOutcomes();
     const idRef = useRef(null);
     idRef.current = chatId;
+    const queueRef = useRef([]);
+    queueRef.current = queue;
+    /** Steering messages not read (all, or those `texts`) go back to waiting, first in line. */
+    const unsteer = useCallback((texts) => {
+        setQueue((q) => {
+            const left = [...(texts ?? [])];
+            const back = q.map((x) => {
+                if (!x.steering)
+                    return x;
+                if (texts) {
+                    const at = left.indexOf(x.message);
+                    if (at < 0)
+                        return x;
+                    left.splice(at, 1);
+                }
+                return { ...x, steering: false };
+            });
+            return back.some((x, i) => x !== q[i]) ? back : q;
+        });
+    }, []);
     const run = useCallback(async (message, extra) => {
         const ctl = new AbortController();
         abort.current = ctl;
@@ -194,6 +219,19 @@ export function useAssistantChat(client) {
                     setUsage(e.data);
                 else if (e.event === 'done')
                     setUsage(e.data.usage);
+                else if (e.event === 'steered') {
+                    // Read by the answer here: the line moves from the queue into the chat.
+                    setQueue((q) => {
+                        const at = q.findIndex((m) => m.steering && m.message === e.data.text);
+                        return at < 0 ? q : [...q.slice(0, at), ...q.slice(at + 1)];
+                    });
+                    setItems((p) => [
+                        ...settled(p),
+                        { kind: 'user', text: e.data.text, at: e.data.at, steered: true },
+                    ]);
+                }
+                else if (e.event === 'unsteered')
+                    unsteer(e.data.texts);
                 else
                     setItems((p) => applyEvent(p, e));
             }, ctl.signal);
@@ -211,30 +249,78 @@ export function useAssistantChat(client) {
         }
         finally {
             setItems(settled);
+            // Steers the answer never read (Stop, an error) wait for the next answer instead.
+            unsteer();
             abort.current = null;
             setBusy(false);
         }
-    }, [client]);
-    // A queued message goes once the answer ends.
+    }, [client, unsteer]);
+    // A queued message goes once the answer ends, one an answer.
     useEffect(() => {
-        if (busy || !queued)
+        if (busy)
+            return;
+        const next = queue[0];
+        if (!next || next.steering)
             return;
-        setQueued(null);
-        void run(queued.message, queued.extra);
-    }, [busy, queued, run]);
-    const send = useCallback((message, extra) => {
+        setQueue((q) => q.slice(1));
+        void run(next.message, next.extra);
+    }, [busy, queue, run]);
+    const canSteer = !!client.steer && !steerOff;
+    // Into the running answer; refused (none runs, the model reads none) it waits in the queue.
+    const steerIn = useCallback(async (m) => {
+        const id = idRef.current;
+        let steered = false;
+        if (id && client.steer && abort.current)
+            try {
+                steered = (await client.steer(id, m.message)).steered;
+            }
+            catch (err) {
+                if (err instanceof ApiError && [404, 405, 410].includes(err.status))
+                    setSteerOff(true);
+            }
+        if (!steered)
+            setQueue((q) => q.map((x) => (x.id === m.id ? { ...x, steering: false } : x)));
+    }, [client]);
+    const send = useCallback((message, extra, how) => {
         const text = message.trim();
         if (!text)
             return;
-        if (abort.current)
-            setQueued({ message: text, ...(extra ? { extra } : {}) });
-        else
-            void run(text, extra);
-    }, [run]);
+        if (!abort.current)
+            return void run(text, extra);
+        const steer = (how ?? 'steer') === 'steer' && canSteer && !!idRef.current;
+        const m = {
+            id: queuedId(),
+            message: text,
+            ...(extra ? { extra } : {}),
+            ...(steer ? { steering: true } : {}),
+        };
+        // Steering ones sit first: they are read before anything queued after the answer.
+        setQueue((q) => steer ? [...q.filter((x) => x.steering), m, ...q.filter((x) => !x.steering)] : [...q, m]);
+        if (steer)
+            void steerIn(m);
+    }, [run, canSteer, steerIn]);
+    const steerQueued = useCallback((id) => {
+        const m = queueRef.current.find((x) => x.id === id && !x.steering);
+        if (!m || !abort.current)
+            return;
+        const on = { ...m, steering: true };
+        setQueue((q) => [
+            ...q.filter((x) => x.steering),
+            on,
+            ...q.filter((x) => !x.steering && x.id !== id),
+        ]);
+        void steerIn(on);
+    }, [steerIn]);
+    const unqueue = useCallback((id) => {
+        const m = queueRef.current.find((x) => x.id === id && !x.steering);
+        if (m)
+            setQueue((q) => q.filter((x) => x.id !== id));
+        return m;
+    }, []);
     const stop = useCallback(() => abort.current?.abort(), []);
     const reset = useCallback(() => {
         abort.current?.abort();
-        setQueued(null);
+        setQueue([]);
         setChatId(null);
         idRef.current = null;
         setTitle('');
@@ -243,7 +329,7 @@ export function useAssistantChat(client) {
     }, []);
     const open = useCallback(async (id) => {
         abort.current?.abort();
-        setQueued(null);
+        setQueue([]);
         setLoading(true);
         try {
             const c = await client.chat(id);
@@ -306,9 +392,13 @@ export function useAssistantChat(client) {
         items,
         usage,
         busy,
-        queued: queued?.message ?? null,
+        queued: queue[0]?.message ?? null,
+        queue,
+        canSteer,
         loading,
         send,
+        steerQueued,
+        unqueue,
         stop,
         open,
         reset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.214",
+  "version": "0.1.216",
   "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.214",
+    "@columenlabs/lumen-ui-types": "0.1.216",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",