@columenlabs/lumen-ui 0.1.286 → 0.1.287

package/dist/assistant/client.d.ts

@@ -52,6 +52,11 @@ export interface AssistantAdapter {
     steer?(chatId: string, message: string): Promise<{
         steered: boolean;
     }>;
+    /**
+     * Stops the answer running in `chatId` on the server: what it said and made so far is kept, and
+     * the answer's stream ends with `stopped`. Without it Stop only stops reading the stream.
+     */
+    stop?(chatId: string): Promise<void>;
     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

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

package/dist/assistant/copy.js

@@ -72,6 +72,11 @@ function itemMarkdown(i, depth, name) {
             ]
                 .filter(Boolean)
                 .join('\n\n');
+        case 'task':
+            return [
+                `${h} ${i.label} (${i.state})`,
+                ...i.items.map((x) => itemMarkdown(x, depth + 1, name)),
+            ].join('\n\n');
         case 'advice':
             return `_${i.error ? 'Could not ask' : 'Asked'} ${i.label} for advice._`;
         case 'fresh':

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

@@ -1,4 +1,4 @@
-import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantQuote, type AssistantRefNote, type AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantQuote, type AssistantRefNote, type AssistantStatus, type AssistantTask, type AssistantTaskState } from '@columenlabs/lumen-ui-types/assistant';
 import { type LucideIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
 import { type LumenOption } from '../lumen-selector.js';
@@ -63,6 +63,16 @@ export interface LumenAssistantProps {
      * yellow at 75% of it and red at it. The person's Auto-compact (status `compact_at`) wins; 150k by default.
      */
     compactAt?: number;
+    /**
+     * A task in the chat (`AssistantTask`, the app's work in its own session): the buttons in its
+     * block's header, such as Keep and Drop, from the app.
+     */
+    taskActions?: (task: AssistantTask) => ReactNode;
+    /**
+     * The app's word on where a task stands, ahead of the chat's: it took or dropped the task's result
+     * in its own screens. A task no longer open drops its chip over the box.
+     */
+    taskState?: (task: AssistantTask) => AssistantTaskState | undefined;
 }
 /** A composer mode: its toggle's icon and label (also its tooltip and aria-label). */
 export interface AssistantMode {
@@ -84,7 +94,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, modes, imageTool, compactAt, }: LumenAssistantProps): import("react").JSX.Element;
+export declare function LumenAssistant({ client, context, onSettings, keepDays, chatScope, onClose, chat: outside, commands, sources, images, modes, imageTool, compactAt, taskActions, taskState, }: 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 `@`. */

package/dist/assistant/lumen-assistant.js

@@ -49,7 +49,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, modes = [], imageTool, compactAt = COMPACT_AT, }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, modes = [], imageTool, compactAt = COMPACT_AT, taskActions, taskState, }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
@@ -80,9 +80,16 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, cha
     // each new screen call runs here once; how it ended goes with the next message.
     const screen = useAssistantScreen();
     const screenOn = !!screen && (s?.screen ?? 'move') === 'move';
+    // The open task's chip over the box: the next message goes to the task (the app decides) until
+    // the person steps out with its ×, or the task ends.
+    const [stepped, setStepped] = useState(null);
+    const openTask = chat.task && (taskState?.(chat.task) ?? chat.task.state) === 'open' && stepped !== chat.task.id
+        ? chat.task
+        : null;
     const extra = () => ({
         ...(context ? { context } : {}),
         ...(screenOn && screen ? { screen: screenMapFor(screen) } : {}),
+        ...(openTask ? { task: openTask.id } : {}),
     });
     const ran = useRef(new Set());
     const ended = chat.screenEnded;
@@ -191,7 +198,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(ImageTool.Provider, { value: imageTool ?? null, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()), onFresh: (choice) => chat.fresh(choice, 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, meter: _jsx(ContextDonut, { usage: chat.usage, compactAt: s?.compact_at ?? compactAt, items: chat.items }) })] }));
+                        })) ?? (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(TaskSlots.Provider, { value: { actions: taskActions, state: taskState }, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()), onFresh: (choice) => chat.fresh(choice, extra()) }) }) }) }) }), openTask && (_jsx("div", { className: "flex px-3 pt-1", children: _jsx(TaskChip, { task: openTask, onLeave: () => setStepped(openTask.id) }) })), _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, meter: _jsx(ContextDonut, { usage: chat.usage, compactAt: s?.compact_at ?? compactAt, items: chat.items }) })] }));
 }
 function Messages({ chat, status, onSettings, onRetry, onFresh, }) {
     const end = useRef(null);
@@ -214,7 +221,7 @@ function Messages({ chat, status, onSettings, onRetry, onFresh, }) {
                                     ? 'Request more'
                                     : 'Open Settings' }))] })] })), chat.loading ? (_jsxs("p", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Loading the chat\u2026"] })) : chat.items.length === 0 && !status?.wait ? (_jsxs("p", { className: "pt-8 text-center text-muted-foreground text-sm", children: ["Ask ", status?.name ?? 'the assistant', " anything."] })) : (_jsx(TierNames.Provider, { value: (id) => status?.tiers.find((t) => t.id === id)?.label ?? id, children: _jsx(UndoWrite.Provider, { value: chat.undo, children: _jsx(RetryTurn.Provider, { value: chat.busy || status?.wait ? null : onRetry, children: _jsx(FreshChoice.Provider, { value: chat.busy ? null : onFresh, children: _jsx(Items, { items: chat.items, onSettle: chat.settle, busy: chat.busy, turns: true }) }) }) }) })), chat.busy && !chat.items.some(isLive) && (_jsxs("p", { className: "flex items-center gap-2 py-1 text-muted-foreground text-sm", children: [_jsx(Spinner, {}), " Thinking\u2026"] })), _jsx("div", { ref: end })] }));
 }
-const isLive = (i) => !!i.live || (i.kind === 'handoff' && i.items.some(isLive));
+const isLive = (i) => !!i.live || ((i.kind === 'handoff' || i.kind === 'task') && i.items.some(isLive));
 const WAIT = {
     not_connected: (admin, provider) => admin
         ? `Add an ${provider} key in Settings ▸ Model providers, or pick another model in Models.`
@@ -310,6 +317,8 @@ function Item({ item, onSettle, busy, }) {
             return _jsx(ScreenChip, { item: item });
         case 'handoff':
             return _jsx(HandOff, { item: item, onSettle: onSettle, busy: busy });
+        case 'task':
+            return _jsx(TaskBlock, { item: item, onSettle: onSettle, busy: busy });
         case 'advice':
             return (_jsxs("p", { className: "flex items-center gap-1.5 text-muted-foreground text-xs", children: [item.live ? _jsx(Spinner, { className: "size-3" }) : _jsx(LightbulbIcon, { className: "size-3.5" }), item.live
                         ? `Asking ${item.label}…`
@@ -528,6 +537,29 @@ const WHY = {
 function HandOff({ item, onSettle, busy, }) {
     return (_jsxs("section", { className: "flex flex-col gap-2 border-l-2 border-primary/40 pl-3", children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: item.label }), _jsxs("span", { className: "text-muted-foreground", children: ["\u00B7 ", WHY[item.why]] })] }), item.task && _jsx("p", { className: "text-muted-foreground text-xs", children: item.task }), _jsx(Items, { items: item.items, onSettle: onSettle, busy: busy })] }));
 }
+/** The app's parts of a task's block (`taskActions`, `taskState`). */
+const TaskSlots = createContext({});
+const TASK_STATE = {
+    open: 'Open',
+    done: 'Kept',
+    dropped: 'Dropped',
+};
+/**
+ * A task's turns in the chat (`TaskItem`): one block with its label and state; while open the
+ * app's buttons (`taskActions`) sit in its header, once ended it folds to that one line.
+ */
+function TaskBlock({ item, onSettle, busy, }) {
+    const slots = useContext(TaskSlots);
+    const state = slots.state?.(item) ?? item.state;
+    const live = item.items.some(isLive);
+    const [open, setOpen] = useState(null);
+    const shown = open ?? (state === 'open' || live);
+    return (_jsxs("section", { "data-slot": "chat-task", "data-state": state, className: "flex min-w-0 flex-col gap-2 rounded-md border border-primary/30 bg-primary/5 px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx(WrenchIcon, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("button", { type: "button", className: "min-w-0 flex-1 truncate text-left font-medium", title: item.label, "aria-expanded": shown, onClick: () => setOpen(!shown), children: item.label }), state === 'open' ? (!live && slots.actions?.(item)) : (_jsxs("span", { className: "shrink-0 text-muted-foreground", children: [state === 'done' ? _jsx(CheckIcon, { className: "inline size-3.5", "aria-hidden": true }) : null, ' ', TASK_STATE[state]] }))] }), shown && _jsx(Items, { items: item.items, onSettle: onSettle, busy: busy })] }));
+}
+/** The open task's chip over the box: the next message goes to it; its × steps out. */
+function TaskChip({ task, onLeave }) {
+    return (_jsxs("span", { "data-slot": "chat-task-chip", className: "inline-flex min-w-0 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-1.5 py-0.5 text-xs", title: `Your next message goes to ${task.label}`, children: [_jsx(WrenchIcon, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("span", { className: "truncate", children: task.label }), _jsx(IconButton, { icon: XIcon, label: "Step out of this task", size: "icon-xs", onClick: onLeave })] }));
+}
 /** The composer's triggers: `@` points at a thing (the `sources`), `#` picks the tier for one message. */
 const POINT = '@';
 const TIER = '#';

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

@@ -1,4 +1,4 @@
-import type { AssistantEvent, AssistantMessage, AssistantScreenOutcome, ChatItem, ChatUsage, DraftItem, StepItem } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantEvent, AssistantMessage, AssistantScreenOutcome, AssistantTask, ChatItem, ChatUsage, DraftItem, StepItem } from '@columenlabs/lumen-ui-types/assistant';
 import type { AssistantAdapter } from './client.js';
 /**
  * An item as the panel draws it: a text still streaming, a step still running. `writing` marks a
@@ -32,6 +32,8 @@ export interface AssistantChatState {
     canSteer: boolean;
     /** The chat is loading. */
     loading: boolean;
+    /** The newest task open in this chat (`AssistantTask`): the composer offers to keep the next message on it. */
+    task: AssistantTask | null;
     /**
      * 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.

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

@@ -46,8 +46,13 @@ function resendOf(user) {
         ...(images.length ? { images } : {}),
     };
 }
-/** Where an event lands: the chat, or the last hand-off section when it came from inside one. */
-function sinkOf(items, handoff) {
+/**
+ * Where an event lands: the chat, the task block this answer runs in, or the last hand-off section
+ * when it came from inside one.
+ */
+function sinkOf(all, handoff) {
+    const top = all[all.length - 1];
+    const items = top?.kind === 'task' && top.live ? top.items : all;
     if (!handoff)
         return items;
     for (let i = items.length - 1; i >= 0; i--) {
@@ -59,7 +64,10 @@ function sinkOf(items, handoff) {
 }
 /** A copy of the items with one event applied (hand-off sections copied too). */
 export function applyEvent(prev, e) {
-    const items = prev.map((i) => i.kind === 'handoff' ? { ...i, items: [...i.items] } : i);
+    const copy = (i) => i.kind === 'handoff' || i.kind === 'task'
+        ? { ...i, items: i.items.map(copy) }
+        : i;
+    const items = prev.map(copy);
     const inside = 'handoff' in e.data && e.data.handoff === true;
     const sink = sinkOf(items, inside);
     const last = sink[sink.length - 1];
@@ -115,10 +123,31 @@ export function applyEvent(prev, e) {
             break;
         }
         case 'handoff':
-            items.push({ ...e.data, items: [] });
+            sink.push({ ...e.data, items: [] });
             break;
+        case 'task': {
+            // This answer runs in a task: the message just sent joins the task's block when the block is
+            // right above it, else a new block opens under it; what the answer says lands in the block.
+            const user = items.findLastIndex((i) => i.kind === 'user' && !i.steered);
+            const above = user > 0 ? items[user - 1] : undefined;
+            if (user >= 0 &&
+                user === items.length - 1 &&
+                above?.kind === 'task' &&
+                above.id === e.data.id) {
+                const u = items.splice(user, 1)[0];
+                items[user - 1] = {
+                    ...above,
+                    ...e.data,
+                    items: [...above.items, u],
+                    live: true,
+                };
+            }
+            else
+                items.push({ kind: 'task', ...e.data, items: [], live: true });
+            break;
+        }
         case 'handoff_done': {
-            const h = [...items].reverse().find((i) => i.kind === 'handoff');
+            const h = [...sink].reverse().find((i) => i.kind === 'handoff');
             if (h)
                 h.usage = e.data.usage;
             break;
@@ -164,16 +193,23 @@ export function applyEvent(prev, e) {
 const settled = (items) => items.map((i) => {
     if (i.kind === 'handoff')
         return { ...i, items: settled(i.items) };
+    if (i.kind === 'task') {
+        const { live: _l, ...rest } = i;
+        return { ...rest, items: settled(i.items) };
+    }
     if (!i.live || i.kind === 'screen')
         return i;
     const { live: _l, writing: _w, ...rest } = i;
     return rest;
 });
+/** How long Stop waits for the server to end the answer before it stops reading the stream. */
+const STOP_WAIT_MS = 8_000;
 export function useAssistantChat(client) {
     const [chatId, setChatId] = useState(null);
     const [title, setTitle] = useState('');
     const [items, setItems] = useState([]);
     const [usage, setUsage] = useState(null);
+    const [task, setTask] = useState(null);
     const [busy, setBusy] = useState(false);
     const [loading, setLoading] = useState(false);
     const [queue, setQueue] = useState([]);
@@ -244,6 +280,10 @@ export function useAssistantChat(client) {
                 }
                 else if (e.event === 'usage')
                     setUsage(e.data);
+                else if (e.event === 'task') {
+                    setTask(e.data.state === 'open' ? e.data : null);
+                    setItems((p) => applyEvent(p, e));
+                }
                 else if (e.event === 'done')
                     setUsage(e.data.usage);
                 else if (e.event === 'steered') {
@@ -351,6 +391,7 @@ export function useAssistantChat(client) {
             setTitle('');
             setItems([]);
             setUsage(null);
+            setTask(null);
             void run(user.text, { ...extra, ...resendOf(user) });
         }
         else {
@@ -377,7 +418,26 @@ export function useAssistantChat(client) {
             setQueue((q) => q.filter((x) => x.id !== id));
         return m;
     }, []);
-    const stop = useCallback(() => abort.current?.abort(), []);
+    // Stop asks the server to end the answer, and the stream ends there with what was said and made
+    // so far, so nothing it finished is lost. An app with no stop route (or one that does not
+    // answer in a few seconds) stops reading the stream instead.
+    const stop = useCallback(() => {
+        const ctl = abort.current;
+        const id = idRef.current;
+        if (!ctl)
+            return;
+        if (!client.stop || !id)
+            return void ctl.abort();
+        const late = setTimeout(() => {
+            if (abort.current === ctl)
+                ctl.abort();
+        }, STOP_WAIT_MS);
+        client.stop(id).catch(() => {
+            clearTimeout(late);
+            if (abort.current === ctl)
+                ctl.abort();
+        });
+    }, [client]);
     const reset = useCallback(() => {
         abort.current?.abort();
         setQueue([]);
@@ -386,6 +446,7 @@ export function useAssistantChat(client) {
         setTitle('');
         setItems([]);
         setUsage(null);
+        setTask(null);
     }, []);
     const open = useCallback(async (id) => {
         abort.current?.abort();
@@ -405,6 +466,7 @@ export function useAssistantChat(client) {
                     : i;
             }));
             setUsage(c.usage ?? null);
+            setTask(c.task ?? null);
         }
         catch (err) {
             setItems([{ kind: 'error', text: errorText(err) }]);
@@ -417,7 +479,7 @@ export function useAssistantChat(client) {
     const replace = useCallback((next) => {
         const swap = (list) => list.map((i) => i.kind === next.kind && i.id === next.id
             ? next
-            : i.kind === 'handoff'
+            : i.kind === 'handoff' || i.kind === 'task'
                 ? { ...i, items: swap(i.items) }
                 : i);
         setItems(swap);
@@ -441,7 +503,7 @@ export function useAssistantChat(client) {
         const outcome = { status: o.status, ...(o.text ? { text: o.text } : {}) };
         const mark = (list) => list.map((i) => i.kind === 'screen' && i.id === o.id
             ? { kind: 'screen', id: i.id, label: i.label, moves: i.moves, outcome }
-            : i.kind === 'handoff'
+            : i.kind === 'handoff' || i.kind === 'task'
                 ? { ...i, items: mark(i.items) }
                 : i);
         setItems(mark);
@@ -456,6 +518,7 @@ export function useAssistantChat(client) {
         queue,
         canSteer,
         loading,
+        task,
         send,
         retry,
         steerQueued,

package/package.json

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