@columenlabs/lumen-ui 0.1.218 → 0.1.220

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, GlobeIcon, LightbulbIcon, ListPlusIcon, MonitorIcon, PencilIcon, PlusIcon, ReceiptIcon, SearchIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
+import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, GlobeIcon, LightbulbIcon, ListPlusIcon, MonitorIcon, PencilIcon, PlusIcon, ReceiptIcon, RefreshCwIcon, SearchIcon, 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';
@@ -190,9 +190,9 @@ 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, 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(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 })] }));
 }
-function Messages({ chat, status, onSettings, }) {
+function Messages({ chat, status, onSettings, onRetry, }) {
     const end = useRef(null);
     const count = JSON.stringify(chat.items).length;
     // biome-ignore lint/correctness/useExhaustiveDependencies: scroll to the end as the chat grows
@@ -210,7 +210,7 @@ function Messages({ chat, status, onSettings, }) {
                                     status.allowance &&
                                     status.allowance.request?.status !== 'open'
                                     ? '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(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 })] }));
+                                    : '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(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 WAIT = {
@@ -237,12 +237,27 @@ const AssistantName = createContext('Assistant');
 const TierNames = createContext((id) => id);
 /** Takes back a change made at once (Undo on its line). */
 const UndoWrite = createContext(null);
+/** Sends a failed turn again; null while it can't (an answer runs, nobody can pay). */
+const RetryTurn = createContext(null);
+/** Where a turn's unretried error sits in the chat, when the turn starts with a message. */
+function failedAt(t) {
+    if (t.items[0]?.kind !== 'user')
+        return null;
+    for (let i = t.items.length - 1; i > 0; i--) {
+        const it = t.items[i];
+        if (it?.kind === 'error')
+            return it.retried ? null : t.from + i;
+    }
+    return null;
+}
 function Items({ items, onSettle, busy, turns, }) {
     const name = useContext(AssistantName);
+    const retry = useContext(RetryTurn);
     if (turns)
         return (_jsx("div", { className: "flex flex-col gap-3", children: chatTurns(items).map((t) => {
                 const open = busy && t.from + t.items.length === items.length;
-                return (_jsxs("div", { "data-slot": "assistant-turn", className: "group/turn flex flex-col gap-3", children: [_jsx(Items, { items: t.items, onSettle: onSettle, busy: busy }), !open && _jsx(WebSources, { items: t.items }), !open && (_jsx("div", { className: "-mt-2 flex justify-end opacity-0 transition-opacity group-hover/turn:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100", children: _jsx(IconButton, { icon: CopyIcon, label: "Copy this turn", className: "size-6 text-muted-foreground", onClick: () => copyMarkdown(turnMarkdown(t.items, name), 'Turn') }) }))] }, t.from));
+                const failed = retry && !open ? failedAt(t) : null;
+                return (_jsxs("div", { "data-slot": "assistant-turn", className: "group/turn flex flex-col gap-3", children: [_jsx(Items, { items: t.items, onSettle: onSettle, busy: busy }), !open && _jsx(WebSources, { items: t.items }), !open && (_jsxs("div", { className: "-mt-2 flex justify-end gap-0.5", children: [retry && failed !== null && (_jsx(IconButton, { icon: RefreshCwIcon, label: "Retry", className: "size-6", onClick: () => retry(failed, t.items[0]) })), _jsx("div", { className: "flex opacity-0 transition-opacity group-hover/turn:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100", children: _jsx(IconButton, { icon: CopyIcon, label: "Copy this turn", className: "size-6 text-muted-foreground", onClick: () => copyMarkdown(turnMarkdown(t.items, name), 'Turn') }) })] }))] }, t.from));
             }) }));
     // Cards drafted one after another sit in one stack, so many of them skim as lines.
     const rows = [];
@@ -263,10 +278,14 @@ function Items({ items, onSettle, busy, turns, }) {
 function Item({ item, onSettle, busy, }) {
     const tierName = useContext(TierNames);
     switch (item.kind) {
-        case 'user':
+        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] }))] }));
+            const bubble = (_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] }))] }));
+            if (!item.retried)
+                return bubble;
+            return (_jsxs("div", { className: "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(RefreshCwIcon, { className: "size-3" }), "Retry"] }), bubble] }));
+        }
         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" }))] }));
         case 'step':
@@ -288,7 +307,7 @@ function Item({ item, onSettle, busy, }) {
         case 'stopped':
             return _jsx(Rule, { children: item.reason === 'cap' ? "Stopped at this month's spend cap" : 'Stopped' });
         case 'error':
-            return (_jsxs("p", { role: "alert", className: "flex items-start gap-1.5 text-loss text-sm", children: [_jsx(CircleAlertIcon, { className: "mt-0.5 size-4 shrink-0" }), item.text] }));
+            return (_jsxs("p", { role: item.retried ? undefined : 'alert', className: cn('flex items-start gap-1.5 text-sm', item.retried ? 'text-muted-foreground' : 'text-loss'), children: [_jsx(CircleAlertIcon, { className: "mt-0.5 size-4 shrink-0" }), item.text] }));
     }
 }
 /** Every screen call in the chat, hand-off sections included. */

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

@@ -33,6 +33,13 @@ export interface AssistantChatState {
      * next step, else queued for after it.
      */
     send: (message: string, extra?: Extra, how?: 'steer' | 'queue') => void;
+    /**
+     * Sends a failed turn again (Retry): `user` is the turn's message, `at` the error it ended in, which
+     * then stops offering Retry. Its words, parts, tier and images go again, with `extra` from now.
+     */
+    retry: (at: number, user: Extract<ChatItem, {
+        kind: 'user';
+    }>, extra?: Extra) => 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). */

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

@@ -179,7 +179,7 @@ export function useAssistantChat(client) {
             return back.some((x, i) => x !== q[i]) ? back : q;
         });
     }, []);
-    const run = useCallback(async (message, extra) => {
+    const run = useCallback(async (message, extra, retried) => {
         const ctl = new AbortController();
         abort.current = ctl;
         setBusy(true);
@@ -193,6 +193,7 @@ export function useAssistantChat(client) {
                     ...(extra?.context ? { context: extra.context.label } : {}),
                     ...(extra?.refs?.length ? { refs: extra.refs } : {}),
                     ...(extra?.tier ? { tier: extra.tier } : {}),
+                    ...(retried ? { retried: true } : {}),
                     ...(extra?.images?.length
                         ? { images: extra.images.map((i) => `data:${i.media_type};base64,${i.data}`) }
                         : {}),
@@ -299,6 +300,21 @@ export function useAssistantChat(client) {
         if (steer)
             void steerIn(m);
     }, [run, canSteer, steerIn]);
+    const retry = useCallback((at, user, extra) => {
+        if (abort.current)
+            return;
+        setItems((p) => p.map((x, i) => (i === at && x.kind === 'error' ? { ...x, retried: true } : x)));
+        const images = (user.images ?? []).flatMap((src) => {
+            const m = /^data:([^;]+);base64,(.*)$/.exec(src);
+            return m ? [{ media_type: m[1], data: m[2] }] : [];
+        });
+        void run(user.text, {
+            ...extra,
+            ...(user.refs?.length ? { refs: user.refs } : {}),
+            ...(user.tier ? { tier: user.tier } : {}),
+            ...(images.length ? { images } : {}),
+        }, true);
+    }, [run]);
     const steerQueued = useCallback((id) => {
         const m = queueRef.current.find((x) => x.id === id && !x.steering);
         if (!m || !abort.current)
@@ -397,6 +413,7 @@ export function useAssistantChat(client) {
         canSteer,
         loading,
         send,
+        retry,
         steerQueued,
         unqueue,
         stop,

package/dist/settings.js

@@ -172,7 +172,7 @@ export function LumenSettings({ open, section, onOpen, onClose, appLabel, profil
         ...(sections.length ? [{ label: appLabel, items: sections.filter(shown) }] : []),
     ].filter((g) => g.items.length);
     const search = (_jsxs(InputGroup, { className: "bg-background", children: [_jsx(InputGroupAddon, { children: _jsx(SearchIcon, {}) }), _jsx(InputGroupInput, { type: "search", className: "[&::-webkit-search-cancel-button]:hidden", "aria-label": "Search settings", placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value) }), query && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": "Clear search", onClick: () => setQuery(''), children: _jsx(XIcon, {}) }) }))] }));
-    const header = (s, slot) => (_jsxs("div", { className: "flex items-end gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("h3", { id: `settings-${s.id}-title`, className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(s.icon, { className: "size-4 text-muted-foreground" }), s.title, s.health && _jsx(SettingStatus, { health: s.health, title: s.healthTitle })] }), s.description && (_jsx("p", { className: "truncate text-sm text-muted-foreground", title: typeof s.description === 'string' ? s.description : undefined, children: s.description }))] }), _jsx("div", { ref: slot, className: "flex shrink-0 items-center gap-2 empty:hidden" })] }));
+    const header = (s, slot) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-3", children: [_jsxs("h3", { id: `settings-${s.id}-title`, className: "flex shrink-0 items-center gap-2 text-base font-semibold", children: [_jsx(s.icon, { className: "size-4 text-muted-foreground" }), s.title, s.health && _jsx(SettingStatus, { health: s.health, title: s.healthTitle })] }), s.description && (_jsx("p", { className: "min-w-0 truncate text-sm text-muted-foreground sm:border-l sm:pl-3", title: typeof s.description === 'string' ? s.description : undefined, children: s.description }))] }), _jsx("div", { ref: slot, className: "flex shrink-0 items-center gap-2 empty:hidden" })] }));
     return (_jsx(Dialog, { open: open, onOpenChange: (o) => {
             if (o)
                 onOpen(section);

package/package.json

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