@columenlabs/lumen-ui 0.1.77 → 0.1.79

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

@@ -0,0 +1,240 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { errorText } from '../integrations.js';
+/** Where an event lands: the chat, or the last hand-off section when it came from inside one. */
+function sinkOf(items, handoff) {
+    if (!handoff)
+        return items;
+    for (let i = items.length - 1; i >= 0; i--) {
+        const it = items[i];
+        if (it?.kind === 'handoff')
+            return it.items;
+    }
+    return items;
+}
+/** 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 inside = 'handoff' in e.data && e.data.handoff === true;
+    const sink = sinkOf(items, inside);
+    const last = sink[sink.length - 1];
+    switch (e.event) {
+        case 'text':
+            if (last?.kind === 'text' && last.live)
+                sink[sink.length - 1] = { ...last, text: last.text + e.data.delta };
+            else
+                sink.push({ kind: 'text', text: e.data.delta, live: true });
+            break;
+        case 'text_end':
+            if (last?.kind === 'text')
+                sink[sink.length - 1] = { kind: 'text', text: last.text };
+            break;
+        case 'step_start':
+            sink.push({
+                kind: 'step',
+                id: e.data.id,
+                tool: e.data.tool,
+                title: e.data.title,
+                ok: true,
+                ms: 0,
+                live: true,
+            });
+            break;
+        case 'step': {
+            const { handoff: _h, ...step } = e.data;
+            const at = sink.findIndex((i) => i.kind === 'step' && i.id === step.id);
+            if (at >= 0)
+                sink[at] = step;
+            else
+                sink.push(step);
+            break;
+        }
+        case 'draft': {
+            const { handoff: _h, ...draft } = e.data;
+            sink.push(draft);
+            break;
+        }
+        case 'handoff':
+            items.push({ ...e.data, items: [] });
+            break;
+        case 'handoff_done': {
+            const h = [...items].reverse().find((i) => i.kind === 'handoff');
+            if (h)
+                h.usage = e.data.usage;
+            break;
+        }
+        case 'advice':
+            items.push({ kind: 'advice', tier: e.data.tier, label: e.data.label, live: true });
+            break;
+        case 'advice_done': {
+            const at = items.findLastIndex((i) => i.kind === 'advice');
+            const a = items[at];
+            if (a?.kind === 'advice')
+                items[at] = {
+                    kind: 'advice',
+                    tier: a.tier,
+                    label: a.label,
+                    ...(e.data.error ? { error: e.data.error } : {}),
+                };
+            break;
+        }
+        case 'compacted':
+            items.push({ kind: 'compacted' });
+            break;
+        case 'stopped':
+            items.push({ kind: 'stopped', ...(e.data.reason ? { reason: e.data.reason } : {}) });
+            break;
+        case 'error':
+            items.push({
+                kind: 'error',
+                text: e.data.message,
+                ...(e.data.code ? { code: e.data.code } : {}),
+            });
+            break;
+    }
+    return items;
+}
+/** Nothing streams any more: a text or step cut by Stop ends where it was. */
+const settled = (items) => items.map((i) => {
+    if (i.kind === 'handoff')
+        return { ...i, items: settled(i.items) };
+    if (!i.live)
+        return i;
+    const { live: _l, ...rest } = i;
+    return rest;
+});
+export function useAssistantChat(client) {
+    const [chatId, setChatId] = useState(null);
+    const [title, setTitle] = useState('');
+    const [items, setItems] = useState([]);
+    const [usage, setUsage] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [queued, setQueued] = useState(null);
+    const abort = useRef(null);
+    const idRef = useRef(null);
+    idRef.current = chatId;
+    const run = useCallback(async (message, extra) => {
+        const ctl = new AbortController();
+        abort.current = ctl;
+        setBusy(true);
+        if (message !== '/compact')
+            setItems((p) => [
+                ...p,
+                {
+                    kind: 'user',
+                    text: message,
+                    at: Date.now(),
+                    ...(extra?.context ? { context: extra.context.label } : {}),
+                    ...(extra?.refs?.length ? { refs: extra.refs } : {}),
+                    ...(extra?.tier ? { tier: extra.tier } : {}),
+                },
+            ]);
+        try {
+            await client.send({ message, ...(idRef.current ? { chat_id: idRef.current } : {}), ...extra }, (e) => {
+                if (e.event === 'chat') {
+                    idRef.current = e.data.id;
+                    setChatId(e.data.id);
+                    setTitle(e.data.title);
+                }
+                else if (e.event === 'usage')
+                    setUsage(e.data);
+                else if (e.event === 'done')
+                    setUsage(e.data.usage);
+                else
+                    setItems((p) => applyEvent(p, e));
+            }, ctl.signal);
+        }
+        catch (err) {
+            if (ctl.signal.aborted)
+                setItems((p) => [...p, { kind: 'stopped' }]);
+            else
+                setItems((p) => [...p, { kind: 'error', text: errorText(err) }]);
+        }
+        finally {
+            setItems(settled);
+            abort.current = null;
+            setBusy(false);
+        }
+    }, [client]);
+    // A queued message goes once the answer ends.
+    useEffect(() => {
+        if (busy || !queued)
+            return;
+        setQueued(null);
+        void run(queued.message, queued.extra);
+    }, [busy, queued, run]);
+    const send = useCallback((message, extra) => {
+        const text = message.trim();
+        if (!text)
+            return;
+        if (abort.current)
+            setQueued({ message: text, ...(extra ? { extra } : {}) });
+        else
+            void run(text, extra);
+    }, [run]);
+    const stop = useCallback(() => abort.current?.abort(), []);
+    const reset = useCallback(() => {
+        abort.current?.abort();
+        setQueued(null);
+        setChatId(null);
+        idRef.current = null;
+        setTitle('');
+        setItems([]);
+        setUsage(null);
+    }, []);
+    const open = useCallback(async (id) => {
+        abort.current?.abort();
+        setQueued(null);
+        setLoading(true);
+        try {
+            const c = await client.chat(id);
+            idRef.current = c.id;
+            setChatId(c.id);
+            setTitle(c.title);
+            setItems(c.items);
+            setUsage(c.usage ?? null);
+        }
+        catch (err) {
+            setItems([{ kind: 'error', text: errorText(err) }]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    // Puts a settled card or an undone line back in place, in a hand-off section too.
+    const replace = useCallback((next) => {
+        const swap = (list) => list.map((i) => i.kind === next.kind && i.id === next.id
+            ? next
+            : i.kind === 'handoff'
+                ? { ...i, items: swap(i.items) }
+                : i);
+        setItems(swap);
+    }, []);
+    const settle = useCallback(async (draft, action) => {
+        const id = idRef.current;
+        if (!id)
+            return;
+        replace(await client.settleDraft(id, draft.id, action));
+    }, [client, replace]);
+    const undo = useCallback(async (step) => {
+        const id = idRef.current;
+        if (!id)
+            return;
+        replace(await client.undoWrite(id, step.id));
+    }, [client, replace]);
+    return {
+        chatId,
+        title,
+        items,
+        usage,
+        busy,
+        queued: queued?.message ?? null,
+        loading,
+        send,
+        stop,
+        open,
+        reset,
+        settle,
+        undo,
+    };
+}

package/dist/expand-list.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+/** Rows that start collapsed; opening one closes the others. `defaultOpen` names a row open at first. */
+export declare function LumenExpandList({ defaultOpen, className, children, }: {
+    defaultOpen?: string | null;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * One row that expands in place. Inside a LumenExpandList it opens by `id`; `open` and
+ * `onOpenChange` make it controlled; alone it keeps its own state (`defaultOpen`).
+ */
+export declare function LumenExpandRow({ id, name, meta, badge, open: openProp, onOpenChange, defaultOpen, children, }: {
+    id?: string;
+    name: ReactNode;
+    meta?: ReactNode;
+    badge?: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/expand-list.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A stack of rows that start collapsed and expand in place: a settings page's providers, channels or
+// accounts, each row's name, a line about it and a badge, its own settings inside. One row is open
+// at a time within a LumenExpandList.
+import { ChevronRightIcon } from 'lucide-react';
+import { createContext, useContext, useState } from 'react';
+import { cn } from './lib/utils.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
+const ListCtx = createContext(null);
+/** Rows that start collapsed; opening one closes the others. `defaultOpen` names a row open at first. */
+export function LumenExpandList({ defaultOpen = null, className, children, }) {
+    const [open, set] = useState(defaultOpen);
+    return (_jsx(ListCtx.Provider, { value: { open, set }, children: _jsx("div", { className: cn('grid grid-cols-1', className), children: children }) }));
+}
+/**
+ * One row that expands in place. Inside a LumenExpandList it opens by `id`; `open` and
+ * `onOpenChange` make it controlled; alone it keeps its own state (`defaultOpen`).
+ */
+export function LumenExpandRow({ id, name, meta, badge, open: openProp, onOpenChange, defaultOpen = false, children, }) {
+    const list = useContext(ListCtx);
+    const [own, setOwn] = useState(defaultOpen);
+    const inList = list && id !== undefined;
+    const open = openProp ?? (inList ? list.open === id : own);
+    const change = (o) => {
+        if (onOpenChange)
+            onOpenChange(o);
+        else if (inList)
+            list.set(o ? id : null);
+        else
+            setOwn(o);
+    };
+    return (_jsxs(Collapsible, { open: open, onOpenChange: change, className: "border-b last:border-b-0", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-1 py-3 text-left hover:bg-muted/50", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block font-medium", children: name }), meta && _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: meta })] }), badge, _jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') })] }) }), _jsx(CollapsibleContent, { className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5", children: children })] }));
+}

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export { type Crumb, IconButton, type IconButtonProps, Page, PageBody, PageHeade
 export { DEFAULT_PREFS, deviceTimeZone, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, type KitConfig, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestResult, TestBadge, errorText, useClock, } from './integrations.js';
+export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';

package/dist/index.js

@@ -56,6 +56,7 @@ export { IconButton, Page, PageBody, PageHeader, } from './page.js';
 export { DEFAULT_PREFS, deviceTimeZone, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, errorText, useClock, } from './integrations.js';
+export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';

package/dist/integrations.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { LumenExpandRow } from './expand-list.js';
 /** A key's last test: when, whether it worked, and what it read or why it failed. */
 export interface KeyTestResult {
     at: string;
@@ -13,15 +14,8 @@ export declare const errorText: (e: unknown) => string;
 export declare function ErrorLine({ error }: {
     error: unknown;
 }): import("react").JSX.Element | null;
-/** One integration: a row that expands in place. */
-export declare function IntegrationRow({ name, meta, badge, open, onOpenChange, children, }: {
-    name: string;
-    meta: string;
-    badge: ReactNode;
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    children: ReactNode;
-}): import("react").JSX.Element;
+/** One integration: a row that expands in place (LumenExpandRow, kept under its old name). */
+export declare const IntegrationRow: typeof LumenExpandRow;
 /**
  * One linked connection (a bank, a broker) and its accounts (an app banks and
  * An app a broker link brokers alike). Collapsed by default, showing its name, `meta` and status; a

package/dist/integrations.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // the Test line that runs it again. A saved key says nothing; each row shows whether it works.
 import { AlertTriangleIcon, CheckIcon, ChevronRightIcon, RefreshCwIcon } from 'lucide-react';
 import { useState } from 'react';
+import { LumenExpandRow } from './expand-list.js';
 import { IconButton } from './icon-button.js';
 import { cn } from './lib/utils.js';
 import { usePrefs } from './prefs.js';
@@ -32,10 +33,8 @@ export function ErrorLine({ error }) {
         return null;
     return (_jsx("p", { role: "alert", className: "text-xs text-loss", children: errorText(error) }));
 }
-/** One integration: a row that expands in place. */
-export function IntegrationRow({ name, meta, badge, open, onOpenChange, children, }) {
-    return (_jsxs(Collapsible, { open: open, onOpenChange: onOpenChange, className: "border-b last:border-b-0", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-1 py-3 text-left hover:bg-muted/50", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block font-medium", children: name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: meta })] }), badge, _jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') })] }) }), _jsx(CollapsibleContent, { className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5", children: children })] }));
-}
+/** One integration: a row that expands in place (LumenExpandRow, kept under its old name). */
+export const IntegrationRow = LumenExpandRow;
 /**
  * One linked connection (a bank, a broker) and its accounts (an app banks and
  * An app a broker link brokers alike). Collapsed by default, showing its name, `meta` and status; a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.77",
+  "version": "0.1.79",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -19,6 +19,10 @@
       "types": "./dist/people/index.d.ts",
       "default": "./dist/people/index.js"
     },
+    "./assistant": {
+      "types": "./dist/assistant/index.d.ts",
+      "default": "./dist/assistant/index.js"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "files": [
@@ -45,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.77",
+    "@columenlabs/lumen-ui-types": "0.1.79",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",