@columenlabs/lumen-ui 0.1.212 → 0.1.213

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

@@ -0,0 +1,4 @@
+export declare function ChatImage({ src, alt }: {
+    src: string;
+    alt: string;
+}): import("react").JSX.Element;

package/dist/assistant/chat-image.js

@@ -0,0 +1,47 @@
+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
+// 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.
+import { Maximize2Icon, Minimize2Icon, RotateCcwIcon, XIcon, ZoomInIcon, ZoomOutIcon, } from 'lucide-react';
+import { useState } from 'react';
+import { TransformComponent, TransformWrapper, useControls, useTransformEffect, } from 'react-zoom-pan-pinch';
+import { IconButton } from '../icon-button.js';
+import { cn } from '../lib/utils.js';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '../ui/dialog.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+const MAX_SCALE = 8;
+/** The zoom buttons and the scale between them; `children` are the buttons after a divider. */
+function ZoomBar({ children }) {
+    const { zoomIn, zoomOut, resetTransform } = useControls();
+    const [scale, setScale] = useState(1);
+    useTransformEffect(({ state }) => setScale(state.scale));
+    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" }) })] }));
+}
+export function ChatImage({ src, alt }) {
+    const [open, setOpen] = useState(false);
+    const [full, setFull] = useState(false);
+    const [ratio, setRatio] = useState(null);
+    if (!open) {
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": "View larger", onClick: () => setOpen(true), className: "group/thumb relative cursor-zoom-in overflow-hidden rounded-md border outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("img", { src: src, alt: alt, className: "max-h-32 max-w-40 object-cover", onLoad: (e) => {
+                                    const { naturalWidth: w, naturalHeight: h } = e.currentTarget;
+                                    if (w && h)
+                                        setRatio(w / h);
+                                } }), _jsx("span", { className: "absolute top-1 right-1 flex size-6 items-center justify-center rounded-md bg-background/80 opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100", children: _jsx(Maximize2Icon, { className: "size-3.5", "aria-hidden": true }) })] }) }), _jsx(TooltipContent, { children: "View larger" })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative w-full overflow-hidden rounded-md border bg-background", style: { aspectRatio: ratio ?? 4 / 3, maxHeight: '60vh' }, "data-slot": "chat-image", children: _jsxs(Zoomable, { src: src, alt: alt, children: [_jsx(IconButton, { icon: Maximize2Icon, label: "Full screen", onClick: () => setFull(true) }), _jsx(IconButton, { icon: Minimize2Icon, label: "Shrink", onClick: () => {
+                                setOpen(false);
+                                setFull(false);
+                            } })] }) }), _jsx(Dialog, { open: full, onOpenChange: setFull, children: _jsxs(DialogContent, { showCloseButton: false, "aria-describedby": undefined, 
+                    // Focus the box, not its first button: a focused button shows its tooltip, which would take
+                    // the first Esc.
+                    onOpenAutoFocus: (e) => {
+                        e.preventDefault();
+                        e.currentTarget.focus();
+                    }, className: cn('h-[90vh] w-[90vw] max-w-none overflow-hidden p-0 sm:max-w-none', 'max-md:h-full max-md:w-full'), children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("div", { className: "relative size-full", children: _jsx(Zoomable, { src: src, alt: alt, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) })] }));
+}

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

@@ -16,6 +16,17 @@ export interface LumenAssistantProps {
     onSettings?: () => void;
     /** Days chats are kept, for the Chats menu's line. */
     keepDays?: number;
+    /**
+     * Chats belong to a place in the app (a workspace, a project): the Chats menu lists the
+     * `current` one's chats (rows whose `scope` matches) and a switch named `label` shows them all,
+     * each with its place's `name`. The switch is kept on this device. A row with no `scope` shows
+     * only with the switch on.
+     */
+    chatScope?: {
+        current: string;
+        label: string;
+        name?: (scope: string) => string | undefined;
+    };
     /** Closes the panel (its ✕). */
     onClose?: () => void;
     /** An outside chat state (the dock shares one between the button and the panel). */
@@ -47,7 +58,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, onClose, chat: outside, commands, sources, images, }: LumenAssistantProps): import("react").JSX.Element;
+export declare function LumenAssistant({ client, context, onSettings, keepDays, chatScope, onClose, chat: outside, commands, sources, images, }: 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

@@ -26,6 +26,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet.js';
 import { Spinner } from '../ui/spinner.js';
 import { Textarea } from '../ui/textarea.js';
+import { ChatImage } from './chat-image.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { UsageHistoryView, tokens, usd } from './usage-history.js';
@@ -48,11 +49,12 @@ 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, onClose, chat: outside, commands = [], sources = [], images = false, }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
     const status = useAssistantStatus(client);
+    const [allScopes, setAllScopes] = useAllScopes(client.key);
     const chats = useQuery({
         queryKey: ['lumen-assistant', client.key, 'chats'],
         queryFn: () => client.chats(),
@@ -181,11 +183,14 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, onC
             allCommands.push(c);
     const shown = useShownAssistantSources();
     const allSources = [...shown, ...sources.filter((x) => !shown.some((y) => y.id === x.id))];
-    return (_jsxs("div", { "data-assistant": "", className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && s.tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: s.tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(LumenAssistantChats, { chats: chats.data?.map((c) => ({
+    return (_jsxs("div", { "data-assistant": "", className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && s.tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: s.tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(LumenAssistantChats, { chats: chats.data
+                            ?.filter((c) => !chatScope || allScopes || c.scope === chatScope.current)
+                            .map((c) => ({
                             id: c.id,
                             title: c.title,
                             updated_at: new Date(c.at).toISOString(),
-                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, 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 })] }));
+                            ...(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 })] }));
 }
 function Messages({ chat, status, onSettings, }) {
     const end = useRef(null);
@@ -259,7 +264,7 @@ function Item({ item, onSettle, busy, }) {
     const tierName = useContext(TierNames);
     switch (item.kind) {
         case 'user':
-            return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap", children: [(item.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: "@", label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: "#", 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("img", { src: src, alt: `Pasted ${i + 1}`, className: "max-h-32 max-w-40 rounded-md border object-cover" }, `${i}:${src.length}`))) })) : null, item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
+            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: "@", label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: "#", 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" }))] }));
         case 'step':
@@ -843,3 +848,26 @@ export function useLumenAssistantDock(client, o = {
         panel: (_jsx(LumenAssistantPanel, { name: name, open: open, onOpenChange: setOpen, children: () => (_jsx(LumenAssistant, { client: client, chat: chat, onClose: () => setOpen(false), ...props })) })),
     };
 }
+/** The Chats menu's All switch (`chatScope`), kept on this device per assistant. */
+function useAllScopes(key) {
+    const name = `lumen-assistant:${key}:all-scopes`;
+    const [on, setOn] = useState(() => {
+        try {
+            return localStorage.getItem(name) === '1';
+        }
+        catch {
+            return false;
+        }
+    });
+    const set = (v) => {
+        setOn(v);
+        try {
+            if (v)
+                localStorage.setItem(name, '1');
+            else
+                localStorage.removeItem(name);
+        }
+        catch { }
+    };
+    return [on, set];
+}

package/dist/assistant-panel.d.ts

@@ -35,17 +35,25 @@ export interface AssistantChat {
     title: string;
     /** ISO time of its last message. */
     updated_at: string;
+    /** Where it was started, shown before its time (`LumenAssistant` `chatScope`, its switch on). */
+    where?: string;
 }
 /**
  * Chats, a dropdown from the panel header: chats grouped by when they were
  * last used, searched by title. A row is read ahead when highlighted, so picking it opens at once.
  */
-export declare function LumenAssistantChats<C extends AssistantChat>({ chats, value, note, disabled, onOpen, onRefresh, onHighlight, }: {
+export declare function LumenAssistantChats<C extends AssistantChat>({ chats, value, note, toggle, disabled, onOpen, onRefresh, onHighlight, }: {
     /** null while loading. */
     chats: C[] | null;
     value?: string;
     /** A line above the list: how long chats are kept. */
     note?: ReactNode;
+    /** A switch at the top of the menu, such as All workspaces (`LumenAssistant` `chatScope`). */
+    toggle?: {
+        label: string;
+        on: boolean;
+        onChange: (on: boolean) => void;
+    };
     disabled?: boolean;
     onOpen: (chat: C) => void;
     /** The menu opened: read the list again. */

package/dist/assistant-panel.js

@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Open or closed and the width are each browser tab's own (sessionStorage). The
 // product fills the body (the product's assistant: its chat, composer, cards and spend).
 import { HistoryIcon, SparklesIcon } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { cn } from './lib/utils.js';
 import { LumenBoundary } from './lumen-boundary.js';
@@ -15,7 +15,9 @@ import { ASSISTANT_WIDTH, usePrefs } from './prefs.js';
 import { ResizeEdge, tabState } from './side-dock.js';
 import { Button } from './ui/button.js';
 import { Kbd } from './ui/kbd.js';
+import { Label } from './ui/label.js';
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from './ui/sheet.js';
+import { Switch } from './ui/switch.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 export { tabState };
 /** Whether the assistant is open in this tab. */
@@ -138,8 +140,9 @@ function whenOf(at, now, group, timeZone) {
  * Chats, a dropdown from the panel header: chats grouped by when they were
  * last used, searched by title. A row is read ahead when highlighted, so picking it opens at once.
  */
-export function LumenAssistantChats({ chats, value, note, disabled, onOpen, onRefresh, onHighlight, }) {
+export function LumenAssistantChats({ chats, value, note, toggle, disabled, onOpen, onRefresh, onHighlight, }) {
     const { timeZone } = usePrefs();
+    const toggleId = useId();
     const now = new Date();
     const byId = new Map((chats ?? []).map((c) => [c.id, c]));
     const groups = GROUPS.map((group) => ({
@@ -148,11 +151,17 @@ export function LumenAssistantChats({ chats, value, note, disabled, onOpen, onRe
             const at = new Date(c.updated_at);
             const g = groupOf(at, now, timeZone);
             return g === group
-                ? [{ value: c.id, label: c.title, detail: whenOf(at, now, g, timeZone) }]
+                ? [
+                    {
+                        value: c.id,
+                        label: c.title,
+                        detail: [c.where, whenOf(at, now, g, timeZone)].filter(Boolean).join(' · '),
+                    },
+                ]
                 : [];
         }),
     })).filter((g) => g.options.length > 0);
-    return (_jsx(LumenSelector, { trigger: "icon", icon: HistoryIcon, label: "Chats", search: true, align: "end", groups: groups, empty: chats === null ? 'Loading…' : 'No chats yet', header: note && _jsx("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: note }), value: value, disabled: disabled, onOpenChange: (o) => o && onRefresh?.(), onHighlight: (id) => {
+    return (_jsx(LumenSelector, { trigger: "icon", icon: HistoryIcon, label: "Chats", search: true, align: "end", groups: groups, empty: chats === null ? 'Loading…' : 'No chats yet', header: (toggle || note) && (_jsxs(_Fragment, { children: [toggle && (_jsxs("div", { className: "flex items-center gap-2 px-2 pt-1.5", children: [_jsx(Label, { htmlFor: toggleId, className: "min-w-0 flex-1 truncate text-xs font-normal", children: toggle.label }), _jsx(Switch, { id: toggleId, checked: toggle.on, onCheckedChange: toggle.onChange, "aria-label": toggle.label })] })), note && _jsx("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: note })] })), value: value, disabled: disabled, onOpenChange: (o) => o && onRefresh?.(), onHighlight: (id) => {
             const c = byId.get(id);
             if (c)
                 onHighlight?.(c);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.212",
+  "version": "0.1.213",
   "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.212",
+    "@columenlabs/lumen-ui-types": "0.1.213",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -75,6 +75,7 @@
     "react-intersection-observer": "9.16.0",
     "react-markdown": "10.1.0",
     "react-resizable-panels": "^4.14.3",
+    "react-zoom-pan-pinch": "4.2.0",
     "recharts": "^3.10.1",
     "remark-gfm": "4.0.1",
     "shiki": "4.5.0",