@columenlabs/lumen-ui 0.1.224 → 0.1.226

package/dist/assistant/copy.js

@@ -36,7 +36,13 @@ function itemMarkdown(i, depth, name) {
             const refs = i.refs?.length
                 ? `\n\nPointing at: ${i.refs.map((r) => r.label).join(', ')}`
                 : '';
-            return `${h} You\n\n${i.text}${refs}`;
+            const quote = i.quote
+                ? `${i.quote.text
+                    .split('\n')
+                    .map((l) => `> ${l}`)
+                    .join('\n')}\n\n`
+                : '';
+            return `${h} You\n\n${quote}${i.text}${refs}`;
         }
         case 'text':
             return `${h} ${name}\n\n${i.text}`;

package/dist/assistant/index.d.ts

@@ -1,5 +1,6 @@
 export { type AssistantAdapter, assistantClient } from './client.js';
-export { type AssistantCommand, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { ChatImage } from './chat-image.js';
+export { type AssistantCommand, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
 export { type AssistantSource, type AssistantSourceItem, type ComposeRequest, type PageSelection, composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';

package/dist/assistant/index.js

@@ -2,7 +2,8 @@
 // routes of `@columenlabs/lumen-ai/assistant`; the shapes both share are
 // `@columenlabs/lumen-ui-types/assistant`.
 export { assistantClient } from './client.js';
-export { LumenAssistant, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { ChatImage } from './chat-image.js';
+export { LumenAssistant, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
 export { composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';

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

@@ -1,4 +1,4 @@
-import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantRefNote, type AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantQuote, type AssistantRefNote, type AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
 import { type LumenOption } from '../lumen-selector.js';
 import type { AssistantAdapter } from './client.js';
 import { type AssistantSource } from './sources.js';
@@ -66,7 +66,13 @@ export interface ComposerExtra {
     tier?: string;
     refs?: AssistantRefNote[];
     images?: AssistantImage[];
+    quote?: AssistantQuote;
 }
+/**
+ * A pasted, dropped or picked image, ready to send: scaled to `IMAGE_EDGE` on a canvas and saved as JPEG
+ * (PNG when it has few pixels to lose), as base64. `null` when the browser cannot read it.
+ */
+export declare function readAssistantImage(file: File): Promise<AssistantImage | null>;
 /**
  * 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

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, RefreshCwIcon, SearchIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
+import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, GlobeIcon, LightbulbIcon, ListPlusIcon, MonitorIcon, PaperclipIcon, PencilIcon, PlusIcon, ReceiptIcon, RefreshCwIcon, ReplyIcon, 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';
@@ -28,6 +28,7 @@ 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 { ReplyToSelection } from './reply-selection.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';
@@ -194,6 +195,7 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, cha
 }
 function Messages({ chat, status, onSettings, onRetry, }) {
     const end = useRef(null);
+    const box = useRef(null);
     const count = JSON.stringify(chat.items).length;
     // biome-ignore lint/correctness/useExhaustiveDependencies: scroll to the end as the chat grows
     useEffect(() => {
@@ -202,7 +204,7 @@ function Messages({ chat, status, onSettings, onRetry, }) {
     // The app's own link to Settings, else the shell's, at the section that answers the wait.
     const shellSettings = useOpenSettings();
     const settings = onSettings ? (_section) => onSettings() : shellSettings;
-    return (_jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 py-3", children: [status?.wait && (_jsxs(Alert, { className: "mb-3", children: [_jsx(CircleAlertIcon, {}), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-2", children: [status.wait === 'app_cap' && status.allowance
+    return (_jsxs("div", { ref: box, className: "relative min-h-0 flex-1 overflow-y-auto px-3 py-3", children: [_jsx(ReplyToSelection, { box: box }), status?.wait && (_jsxs(Alert, { className: "mb-3", children: [_jsx(CircleAlertIcon, {}), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-2", children: [status.wait === 'app_cap' && status.allowance
                                 ? allowanceWait(status.allowance)
                                 : WAIT[status.wait](status.admin, status.providers.find((p) => p.id === status.wait_provider)?.label ?? 'API'), settings && (_jsx(Button, { size: "sm", variant: "outline", onClick: () => settings(status.wait === 'app_cap' && status.allowance
                                     ? 'assistant-allowance'
@@ -281,13 +283,13 @@ function Item({ item, onSettle, busy, }) {
         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 })] }));
-            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] }))] }));
+            const bubble = (_jsxs("div", { "data-chat-from": "user", 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.quote && _jsx(QuoteLine, { quote: item.quote }), (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" }))] }));
+            return (_jsxs("div", { "data-chat-from": "assistant", 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':
             return _jsx(Step, { step: item, live: !!item.live });
         case 'draft':
@@ -512,13 +514,20 @@ const TIER = '#';
 function ComposerChip({ sign, label, onRemove, }) {
     return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md border bg-background px-1.5 py-0.5 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: sign }), _jsx("span", { className: "truncate", children: label }), onRemove && (_jsx("button", { type: "button", "aria-label": `Remove ${label}`, className: "text-muted-foreground hover:text-foreground", onClick: onRemove, children: _jsx(XIcon, { className: "size-3" }) }))] }));
 }
+/**
+ * A quote a message replies to: the reply icon and the quoted words. Over the box it is one line
+ * with an × (`onRemove`); in a sent message up to two lines. The whole text is in its hover.
+ */
+function QuoteLine({ quote, onRemove }) {
+    return (_jsxs("span", { "data-slot": "chat-quote", className: cn('flex min-w-0 items-start gap-1.5 rounded-md bg-background/60 px-2 py-1 text-muted-foreground text-xs whitespace-normal', onRemove ? 'mb-2 items-center bg-muted py-0.5 pr-0.5' : 'mb-1.5'), title: quote.text, children: [_jsx(ReplyIcon, { className: cn('size-3.5 shrink-0', !onRemove && 'mt-0.5'), "aria-hidden": true }), _jsx("span", { className: cn('min-w-0 flex-1', onRemove ? 'truncate' : 'line-clamp-2 break-words'), children: quote.text }), onRemove && (_jsx(IconButton, { icon: XIcon, label: "Remove quote", size: "icon-xs", onClick: onRemove }))] }));
+}
 /** The longest edge an image is sent at (what the models read best; larger only costs more). */
 const IMAGE_EDGE = 1568;
 /**
- * A pasted or dropped image, ready to send: scaled to `IMAGE_EDGE` on a canvas and saved as JPEG
+ * A pasted, dropped or picked image, ready to send: scaled to `IMAGE_EDGE` on a canvas and saved as JPEG
  * (PNG when it has few pixels to lose), as base64. `null` when the browser cannot read it.
  */
-async function readImage(file) {
+export async function readAssistantImage(file) {
     try {
         const bmp = await createImageBitmap(file);
         const k = Math.min(1, IMAGE_EDGE / Math.max(bmp.width, bmp.height));
@@ -558,8 +567,10 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
     const [tier, setTier] = useState(null);
     const [refs, setRefs] = useState([]);
     const [images, setImages] = useState([]);
+    const [quote, setQuote] = useState(null);
     const list = useRef(null);
     const box = useRef(null);
+    const filePick = useRef(null);
     const selection = usePageSelection();
     // An app's compose request (`composeAssistant`): its chips and text, ready to finish.
     const [request, take] = useComposeRequest();
@@ -572,6 +583,8 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
             setRefs((p) => [...p, ...(request.refs ?? [])]);
         if (request.tier)
             setTier(request.tier);
+        if (request.quote)
+            setQuote(request.quote);
         if (request.text !== undefined) {
             setText(request.text);
             setCaret(request.text.length);
@@ -592,6 +605,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         ...(tier ? { tier } : {}),
         ...(refs.length ? { refs } : {}),
         ...(images.length ? { images } : {}),
+        ...(quote ? { quote } : {}),
     });
     const clear = () => {
         setText('');
@@ -599,6 +613,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         setTier(null);
         setRefs([]);
         setImages([]);
+        setQuote(null);
     };
     /** Adds the image files among `files`; says so when one is left out. Returns whether any was an image. */
     const attach = (files) => {
@@ -606,7 +621,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         if (!canAttach || !picked.length)
             return false;
         void (async () => {
-            const read = (await Promise.all(picked.map(readImage))).filter((x) => !!x);
+            const read = (await Promise.all(picked.map(readAssistantImage))).filter((x) => !!x);
             if (read.length < picked.length)
                 lumenToast.error("That image couldn't be read. Try a PNG or JPEG.");
             setImages((p) => {
@@ -662,6 +677,8 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
             setRefs(q.extra.refs);
         if (q.extra?.images?.length)
             setImages(q.extra.images);
+        if (q.extra?.quote)
+            setQuote(q.extra.quote);
         requestAnimationFrame(() => box.current?.focus());
     };
     const waiting = queue ?? (queued ? [{ id: 'queued', message: queued }] : []);
@@ -825,7 +842,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                     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: cn('max-h-48 min-h-11 resize-none', busy && text.trim() && canSteer ? 'pr-18' : 'pr-11'), value: text, disabled: disabled, onChange: (e) => {
+                }, onClose: () => setClosed(`${text}|${caret}`) })), quote && _jsx(QuoteLine, { quote: quote, onRemove: () => setQuote(null) }), 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', canAttach && 'pb-9'), value: text, disabled: disabled, onChange: (e) => {
                             setText(e.target.value);
                             setCaret(e.target.selectionStart);
                         }, onSelect: (e) => setCaret(e.currentTarget.selectionStart), onPaste: (e) => {
@@ -845,7 +862,11 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                                 e.preventDefault();
                                 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 })) : 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() })) })] })] }));
+                        } }), canAttach && (_jsxs("div", { className: "absolute bottom-1.5 left-1.5", children: [_jsx(IconButton, { icon: PaperclipIcon, label: "Attach images", size: "icon-xs", disabled: disabled, onClick: () => filePick.current?.click() }), _jsx("input", { ref: filePick, type: "file", accept: "image/*", multiple: true, hidden: true, onChange: (e) => {
+                                    if (e.target.files)
+                                        attach(e.target.files);
+                                    e.target.value = '';
+                                } })] })), _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,

package/dist/assistant/reply-selection.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * The Reply bar over selected chat text. `box` is the chat's scrolling box, positioned; the bar
+ * sits in it, above the selection (below it when the top is out of view).
+ */
+export declare function ReplyToSelection({ box }: {
+    box: RefObject<HTMLElement | null>;
+}): import("react").JSX.Element | null;

package/dist/assistant/reply-selection.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Reply to a piece of the chat: text selected inside one message (the person's or the assistant's)
+// gets a small bar above it, Reply and Copy. Reply puts the selection over the composer as a quote
+// (`composeAssistant`), which goes with the next message.
+import { ASSISTANT_QUOTE_MAX } from '@columenlabs/lumen-ui-types/assistant';
+import { CopyIcon, ReplyIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { IconButton } from '../icon-button.js';
+import { lumenToast } from '../lumen-toast.js';
+import { composeAssistant } from './sources.js';
+/** The bar's size, to keep it inside the chat's box. */
+const BAR_W = 72;
+const BAR_H = 40;
+/** The message (`data-chat-from`) a node sits in, when it is inside `box`. */
+function messageOf(node, box) {
+    const el = node instanceof Element ? node : node?.parentElement;
+    const m = el?.closest('[data-chat-from]') ?? null;
+    return m && box.contains(m) ? m : null;
+}
+/** The selection as a quote and where its bar goes in `box`, or null when it is not one message's text. */
+function pickedIn(box) {
+    const sel = document.getSelection();
+    if (!sel || sel.isCollapsed || !sel.rangeCount)
+        return null;
+    const from = messageOf(sel.anchorNode, box);
+    if (!from || from !== messageOf(sel.focusNode, box))
+        return null;
+    const text = sel.toString().trim().slice(0, ASSISTANT_QUOTE_MAX);
+    if (!text)
+        return null;
+    const r = sel.getRangeAt(0).getBoundingClientRect();
+    const b = box.getBoundingClientRect();
+    const above = r.top - b.top - BAR_H - 4;
+    const top = (above >= 0 ? above : r.bottom - b.top + 4) + box.scrollTop;
+    const mid = r.left - b.left + r.width / 2 - BAR_W / 2;
+    const left = Math.max(4, Math.min(mid, b.width - BAR_W - 4));
+    return {
+        quote: { text, from: from.dataset.chatFrom === 'user' ? 'user' : 'assistant' },
+        top,
+        left,
+    };
+}
+/**
+ * The Reply bar over selected chat text. `box` is the chat's scrolling box, positioned; the bar
+ * sits in it, above the selection (below it when the top is out of view).
+ */
+export function ReplyToSelection({ box }) {
+    const [picked, setPicked] = useState(null);
+    useEffect(() => {
+        let frame = 0;
+        const read = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const el = box.current;
+                setPicked(el ? pickedIn(el) : null);
+            });
+        };
+        document.addEventListener('selectionchange', read);
+        return () => {
+            cancelAnimationFrame(frame);
+            document.removeEventListener('selectionchange', read);
+        };
+    }, [box]);
+    if (!picked)
+        return null;
+    const done = () => {
+        document.getSelection()?.removeAllRanges();
+        setPicked(null);
+    };
+    return (_jsxs("div", { role: "toolbar", "aria-label": "Selected text", className: "absolute z-10 flex gap-0.5 rounded-lg border bg-popover p-0.5 shadow-md", style: { top: picked.top, left: picked.left }, 
+        // A press on the bar keeps the selection.
+        onMouseDown: (e) => e.preventDefault(), children: [_jsx(IconButton, { icon: ReplyIcon, label: "Reply", onClick: () => {
+                    composeAssistant({ quote: picked.quote });
+                    done();
+                } }), _jsx(IconButton, { icon: CopyIcon, label: "Copy", onClick: () => {
+                    void navigator.clipboard.writeText(picked.quote.text).then(() => lumenToast.success('Copied'), () => lumenToast.error("Couldn't copy. Copy it with your keyboard instead."));
+                    done();
+                } })] }));
+}

package/dist/assistant/sources.d.ts

@@ -1,4 +1,4 @@
-import type { AssistantRefNote } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantQuote, AssistantRefNote } from '@columenlabs/lumen-ui-types/assistant';
 import { type ComponentType } from 'react';
 /** One thing a source holds: a row in the `@` list, sent with the message as `ref`. */
 export interface AssistantSourceItem {
@@ -35,6 +35,8 @@ export interface ComposeRequest {
     text?: string;
     refs?: AssistantRefNote[];
     tier?: string;
+    /** A piece of the chat to reply to: it shows above the box with an ×. */
+    quote?: AssistantQuote;
 }
 /**
  * Opens the assistant with `refs` as chips in its composer and `text` typed, focused for the person

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

@@ -192,6 +192,7 @@ export function useAssistantChat(client) {
                     at: Date.now(),
                     ...(extra?.context ? { context: extra.context.label } : {}),
                     ...(extra?.refs?.length ? { refs: extra.refs } : {}),
+                    ...(extra?.quote ? { quote: extra.quote } : {}),
                     ...(extra?.tier ? { tier: extra.tier } : {}),
                     ...(retried ? { retried: true } : {}),
                     ...(extra?.images?.length
@@ -311,6 +312,7 @@ export function useAssistantChat(client) {
         void run(user.text, {
             ...extra,
             ...(user.refs?.length ? { refs: user.refs } : {}),
+            ...(user.quote ? { quote: user.quote } : {}),
             ...(user.tier ? { tier: user.tier } : {}),
             ...(images.length ? { images } : {}),
         }, true);

package/dist/whats-new.d.ts

@@ -1,8 +1,13 @@
 import { type ReactNode } from 'react';
-export declare function WhatsNew({ api, apps, everyone, }: {
+export declare function WhatsNew({ api, apps, everyone, label, }: {
     api: string;
     /** Each app's chip label by id, in the order groups list them; left out: no app chips. */
     apps?: Record<string, ReactNode>;
     /** The chip of a takeaway about no one app. */
     everyone?: string;
+    /**
+     * Status-bar text that opens the notes (the app's version): no spark and no "What's new" words;
+     * the tooltip and aria-label still say What's new. Left out: the spark and those words.
+     */
+    label?: ReactNode;
 }): import("react").JSX.Element | null;

package/dist/whats-new.js

@@ -42,7 +42,7 @@ async function page(api, before) {
         throw new Error(`releases ${r.status}`);
     return (await r.json()).releases;
 }
-export function WhatsNew({ api, apps, everyone = 'Global', }) {
+export function WhatsNew({ api, apps, everyone = 'Global', label = null, }) {
     const [open, setOpen] = useState(false);
     const { timeZone } = usePrefs();
     const q = useInfiniteQuery({
@@ -53,13 +53,15 @@ export function WhatsNew({ api, apps, everyone = 'Global', }) {
         staleTime: 30 * 60_000,
         retry: false,
     });
-    // Hidden while loading, on an error, and when the host has no releases API (404).
-    if (!q.data || q.data.pages[0] === null)
+    // Hidden while loading, on an error, and when the host has no releases API (404). A label (the
+    // app's version) stays on the bar through that and opens the notes once they load.
+    const ready = !!q.data && q.data.pages[0] !== null;
+    if (!ready && label == null)
         return null;
-    const releases = q.data.pages.flatMap((p) => p ?? []);
+    const releases = ready ? (q.data?.pages.flatMap((p) => p ?? []) ?? []) : [];
     const latest = releases[0];
     const day = (at) => new Date(at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone });
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "h-6 gap-1 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: latest ? `What's new · ${latest.tag}` : "What's new", "aria-label": "What's new", children: [_jsx(SparklesIcon, { className: "size-3.5" }), _jsx("span", { className: "max-md:hidden", children: "What's new" })] }), _jsxs(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: releases.length ? `${releases.length} releases` : undefined, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: [!releases.length && (_jsx("p", { className: "py-2 text-muted-foreground text-sm", children: "No releases yet. Each release's key takeaways show here once it ships." })), releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag)))] })] }));
+    return (_jsxs(_Fragment, { children: [label != null ? (_jsx("button", { type: "button", className: "-mx-1 flex-none rounded px-1 tabular-nums hover:bg-muted hover:text-foreground", onClick: () => ready && setOpen(true), title: "What's new", "aria-label": "What's new", children: label })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-6 gap-1 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: latest ? `What's new · ${latest.tag}` : "What's new", "aria-label": "What's new", children: [_jsx(SparklesIcon, { className: "size-3.5" }), _jsx("span", { className: "max-md:hidden", children: "What's new" })] })), _jsxs(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: releases.length ? `${releases.length} releases` : undefined, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: [!releases.length && (_jsx("p", { className: "py-2 text-muted-foreground text-sm", children: "No releases yet. Each release's key takeaways show here once it ships." })), releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag)))] })] }));
 }
 /** One release's takeaways: a flat list, or one sub-section per app once one app has many. */
 function Notes({ takeaways, apps, everyone, }) {

package/package.json

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