@adecore/agents-react 0.41.1 → 0.42.0

package/src/chat/ui/ImageView.tsx

@@ -1,90 +1,226 @@
-import { useRef, useState, type ReactNode } from 'react';
+import { createContext, useContext, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, type KeyboardEvent, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
 import type { ResourceUrl } from '../../host';
 import { ButtonGroup, CloseButton, Dialog, Icon, IconButton, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { BUTTON_STEP, clamped, MAX_SCALE, MIN_SCALE, START, stepped, wheeled, zoomed, type Bounds, type Point, type View } from '../logic/lightbox';
 import { DisplayImage } from './DisplayImage';
 
-const MIN_SCALE = 1;
-const MAX_SCALE = 8;
-// One wheel notch, small enough that a trackpad flick does not jump past the detail it aimed at.
-const WHEEL_STEP = 1.0015;
-const BUTTON_STEP = 1.5;
+interface LightboxImage {
+    readonly key: string;
+    readonly src: string;
+    readonly alt: string;
+    readonly element: HTMLElement | null;
+}
 
-interface View {
-    scale: number;
-    x: number;
-    y: number;
+interface ImageGroupStore {
+    set(image: LightboxImage): void;
+    remove(key: string): void;
+    subscribe(listener: () => void): () => void;
+    snapshot(): readonly LightboxImage[];
 }
 
-const START: View = { scale: 1, x: 0, y: 0 };
+/* The pictures of one group in the order they stand on the page, which is the order the arrows walk. */
+function createImageGroupStore(): ImageGroupStore {
+    const images = new Map<string, LightboxImage>();
+    const listeners = new Set<() => void>();
+    let snapshot: readonly LightboxImage[] = [];
+
+    const changed = (): void => {
+        snapshot = [...images.values()].sort((a, b) => {
+            if (a.element === null || b.element === null) {
+                return 0;
+            }
+
+            return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        });
+
+        for (const listener of listeners) {
+            listener();
+        }
+    };
+
+    return {
+        set(image) {
+            const current = images.get(image.key);
+
+            if (current?.src === image.src && current.alt === image.alt && current.element === image.element) {
+                return;
+            }
+
+            images.set(image.key, image);
+            changed();
+        },
+        remove(key) {
+            if (images.delete(key)) {
+                changed();
+            }
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        snapshot: () => snapshot
+    };
+}
+
+interface ImageGroupValue {
+    readonly store: ImageGroupStore;
+    open(key: string): void;
+}
+
+const ImageGroupContext = createContext<ImageGroupValue | null>(null);
 
 /*
- * Zooms around a point, which is what makes a wheel over a detail feel like a magnifier instead of
- * a slider. The pixel under the pointer stays where it is while everything else moves away from it.
- * `x` and `y` are offsets from the middle of the frame, so a scale of 1 is always centered.
+ * Thumbnails inside open one lightbox together, where the arrow keys walk from one to the next.
+ * A thumbnail with actions of its own, or one its caller opens from a control, stays on its own.
  */
-function zoomed(view: View, factor: number, pointX: number, pointY: number): View {
-    const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, view.scale * factor));
+export function ImageGroup({ children }: { children: ReactNode }) {
+    const [store] = useState(createImageGroupStore);
+    const images = useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
+    // The key stays after closing, so the picture that fades out is the one that was open.
+    const [shown, setShown] = useState<{ key: string | null; open: boolean }>({ key: null, open: false });
+    const index = images.findIndex((image) => image.key === shown.key);
 
-    if (scale === MIN_SCALE) {
-        return START;
-    }
+    return (
+        <ImageGroupContext value={{ store, open: (key) => setShown({ key, open: true }) }}>
+            {children}
+            {index !== -1 && (
+                <Lightbox
+                    images={images}
+                    index={index}
+                    open={shown.open}
+                    onOpenChange={(open) => setShown((current) => ({ ...current, open }))}
+                    onIndexChange={(next) => setShown({ key: images[next]?.key ?? null, open: true })}
+                />
+            )}
+        </ImageGroupContext>
+    );
+}
 
-    const ratio = scale / view.scale;
+/* A press on an arrow or a zoom button is the button's, never the start of a pan or a zoom of the stage. */
+function onControl(target: EventTarget): boolean {
+    return target instanceof Element && target.closest('button') !== null;
+}
 
-    return { scale, x: pointX - (pointX - view.x) * ratio, y: pointY - (pointY - view.y) * ratio };
+/* Where the pointer sits against the middle of the stage, which is what the transform counts from. */
+function pointIn(stage: HTMLElement, event: { clientX: number; clientY: number }): Point {
+    const rect = stage.getBoundingClientRect();
+
+    return { x: event.clientX - rect.left - rect.width / 2, y: event.clientY - rect.top - rect.height / 2 };
 }
 
-/* An image on its own, large: the wheel and the buttons zoom, dragging pans, Escape closes. */
+function boundsOf(stage: HTMLElement): Bounds {
+    const picture = stage.querySelector('img');
+
+    return {
+        image: { width: picture?.offsetWidth ?? 0, height: picture?.offsetHeight ?? 0 },
+        frame: { width: stage.clientWidth, height: stage.clientHeight }
+    };
+}
+
+/* Pictures large and on their own: a pinch zooms, two fingers pan, the arrow keys walk the group, Escape closes. */
 function Lightbox({
-    src,
-    alt,
+    images,
+    index,
     open,
     onOpenChange,
+    onIndexChange,
     actions
 }: {
-    src: string;
-    alt: string;
+    images: readonly LightboxImage[];
+    index: number;
     open: boolean;
     onOpenChange(open: boolean): void;
+    onIndexChange?(index: number): void;
     actions?: ReactNode;
 }) {
     const { t } = useTranslation('agent-chat');
     const [view, setView] = useState<View>(START);
-    // The alt of an image an agent read is its path; the header shows the file and keeps the path on a tooltip.
-    const name = alt.slice(alt.lastIndexOf('/') + 1);
-    const title = <span className="min-w-0 truncate text-xs text-text">{name}</span>;
-    const frameRef = useRef<HTMLDivElement>(null);
+    const [viewed, setViewed] = useState(index);
+    const stageElementRef = useRef<HTMLDivElement | null>(null);
     const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);
+    const movedRef = useRef(false);
+    const image = images[index];
+    const previous = stepped(index, images.length, -1);
+    const next = stepped(index, images.length, 1);
+
+    if (viewed !== index) {
+        setViewed(index);
+        setView(START);
+    }
 
     if (!open && view !== START) {
         setView(START);
     }
 
-    /* Where the pointer sits against the middle of the frame, which is what the transform counts from. */
-    const pointIn = (event: { clientX: number; clientY: number }): { x: number; y: number } => {
-        const rect = frameRef.current?.getBoundingClientRect();
+    if (image === undefined) {
+        return null;
+    }
+
+    // The alt of an image an agent read is its path; the caption shows the file and keeps the path on a tooltip.
+    const name = image.alt.slice(image.alt.lastIndexOf('/') + 1);
+    const title = <span className="min-w-0 truncate text-xs text-text">{name}</span>;
+
+    // React listens to the wheel passively, and only an active listener keeps a pinch from zooming the whole page.
+    const stageRef = (stage: HTMLDivElement | null) => {
+        stageElementRef.current = stage;
 
-        if (!rect) {
-            return { x: 0, y: 0 };
+        if (stage === null) {
+            return;
         }
 
-        return { x: event.clientX - rect.left - rect.width / 2, y: event.clientY - rect.top - rect.height / 2 };
+        const onWheel = (event: WheelEvent): void => {
+            event.preventDefault();
+            const point = pointIn(stage, event);
+            const bounds = boundsOf(stage);
+            setView((current) => wheeled(current, event, point, bounds));
+        };
+
+        stage.addEventListener('wheel', onWheel, { passive: false });
+
+        return () => stage.removeEventListener('wheel', onWheel);
     };
 
-    const zoomButton = (factor: number): void => setView((current) => zoomed(current, factor, 0, 0));
+    const zoomButton = (factor: number): void => {
+        const stage = stageElementRef.current;
+
+        if (stage !== null) {
+            const bounds = boundsOf(stage);
+            setView((current) => zoomed(current, factor, { x: 0, y: 0 }, bounds));
+        }
+    };
+
+    const step = (to: number | null): void => {
+        if (to !== null) {
+            onIndexChange?.(to);
+        }
+    };
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+            return;
+        }
+
+        const to = event.key === 'ArrowLeft' ? previous : event.key === 'ArrowRight' ? next : null;
+
+        if (to !== null) {
+            event.preventDefault();
+            step(to);
+        }
+    };
 
     return (
         <Dialog.Root open={open} onOpenChange={onOpenChange}>
-            {/* Nothing here sets a size. The picture takes the room `.lightbox-frame` allows it, and the popup follows. */}
-            <Dialog.Popup backdropClassName="lightbox-backdrop" className="flex min-w-72 flex-col">
-                <Dialog.Title className="sr-only">{alt}</Dialog.Title>
-                <div className="flex h-11 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3">
-                    {name === alt ? title : <Tooltip label={alt}>{title}</Tooltip>}
-                    <span className="grow" />
-                    <span className="tabular-nums text-xs text-text-faint">{Math.round(view.scale * 100)}%</span>
+            <Dialog.Popup backdropClassName="lightbox-backdrop" className="lightbox" onKeyDown={onKeyDown}>
+                <Dialog.Title className="sr-only">{image.alt}</Dialog.Title>
+                <div className="lightbox-bar flex h-12 shrink-0 items-center justify-end gap-2 pl-3">
+                    <span className="tabular-nums text-xs text-text-faint">{formatNumber(view.scale * 100)}%</span>
                     <ButtonGroup render={<span />}>
                         <IconButton
                             icon={Minus}
@@ -106,18 +242,21 @@ function Lightbox({
                     <CloseButton label={t('common.action.close')} kbd="esc" className="ml-1" dialog />
                 </div>
                 <div
-                    ref={frameRef}
-                    className={clsx('lightbox-frame grid place-items-center overflow-hidden bg-surface-sunken', view.scale > MIN_SCALE && 'cursor-grab')}
-                    onWheel={(e) => {
-                        const point = pointIn(e);
-                        setView((current) => zoomed(current, WHEEL_STEP ** -e.deltaY, point.x, point.y));
-                    }}
+                    ref={stageRef}
+                    className={clsx('lightbox-stage relative grid min-h-0 grow place-items-center overflow-hidden', view.scale > MIN_SCALE && 'cursor-grab')}
                     onDoubleClick={(e) => {
-                        const point = pointIn(e);
-                        setView((current) => (current.scale > MIN_SCALE ? START : zoomed(current, 2, point.x, point.y)));
+                        if (onControl(e.target)) {
+                            return;
+                        }
+
+                        const point = pointIn(e.currentTarget, e);
+                        const bounds = boundsOf(e.currentTarget);
+                        setView((current) => (current.scale > MIN_SCALE ? START : zoomed(current, 2, point, bounds)));
                     }}
                     onPointerDown={(e) => {
-                        if (view.scale <= MIN_SCALE) {
+                        movedRef.current = false;
+
+                        if (view.scale <= MIN_SCALE || onControl(e.target)) {
                             return;
                         }
 
@@ -127,9 +266,13 @@ function Lightbox({
                     onPointerMove={(e) => {
                         const drag = dragRef.current;
 
-                        if (drag?.pointerId === e.pointerId) {
-                            setView((current) => ({ ...current, x: e.clientX - drag.x, y: e.clientY - drag.y }));
+                        if (drag?.pointerId !== e.pointerId) {
+                            return;
                         }
+
+                        movedRef.current = true;
+                        const bounds = boundsOf(e.currentTarget);
+                        setView((current) => clamped({ ...current, x: e.clientX - drag.x, y: e.clientY - drag.y }, bounds));
                     }}
                     onPointerUp={() => {
                         dragRef.current = null;
@@ -137,14 +280,49 @@ function Lightbox({
                     onPointerCancel={() => {
                         dragRef.current = null;
                     }}
+                    onClick={(e) => {
+                        // The room around the picture is the backdrop a dialog would have, unless the press panned.
+                        if (e.target === e.currentTarget && !movedRef.current) {
+                            onOpenChange(false);
+                        }
+                    }}
                 >
                     <DisplayImage
-                        src={src}
-                        alt={alt}
+                        key={image.key}
+                        src={image.src}
+                        alt={image.alt}
                         draggable={false}
                         className="select-none"
                         style={{ transform: `translate(${Math.round(view.x)}px, ${Math.round(view.y)}px) scale(${view.scale})` }}
                     />
+                    {images.length > 1 && (
+                        <>
+                            <IconButton
+                                icon={ChevronLeft}
+                                label={t('image.previous')}
+                                kbd="←"
+                                disabled={previous === null}
+                                className="absolute top-1/2 left-4 -translate-y-1/2"
+                                onClick={() => step(previous)}
+                            />
+                            <IconButton
+                                icon={ChevronRight}
+                                label={t('image.next')}
+                                kbd="→"
+                                disabled={next === null}
+                                className="absolute top-1/2 right-4 -translate-y-1/2"
+                                onClick={() => step(next)}
+                            />
+                        </>
+                    )}
+                </div>
+                <div className="flex h-12 shrink-0 items-center justify-center gap-3 px-3">
+                    {name === image.alt ? title : <Tooltip label={image.alt}>{title}</Tooltip>}
+                    {images.length > 1 && (
+                        <span className="shrink-0 tabular-nums text-xs text-text-faint">
+                            {t('image.position', { index: formatNumber(index + 1), count: formatNumber(images.length) })}
+                        </span>
+                    )}
                 </div>
             </Dialog.Popup>
         </Dialog.Root>
@@ -169,17 +347,30 @@ export interface ImageThumbProps {
  * The image is bytes where the host keeps them; until they are here a quiet square stands in for it.
  */
 export function ImageThumb({ source, alt, className, aspect, actions, open: openProp, onOpenChange }: ImageThumbProps) {
+    const key = useId();
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const context = useContext(ImageGroupContext);
+    const group = actions === undefined && openProp === undefined ? context : null;
     const [ownOpen, setOwnOpen] = useState(false);
     const open = openProp ?? ownOpen;
+    const { url: src, failure } = source;
+    const ratio = aspect === undefined ? undefined : { aspectRatio: aspect };
+
+    useLayoutEffect(() => {
+        if (group === null || src === null) {
+            return;
+        }
+
+        group.store.set({ key, src, alt, element: buttonRef.current });
+
+        return () => group.store.remove(key);
+    }, [group, key, src, alt]);
 
     const setOpen = (next: boolean): void => {
         setOwnOpen(next);
         onOpenChange?.(next);
     };
 
-    const { url: src, failure } = source;
-    const ratio = aspect === undefined ? undefined : { aspectRatio: aspect };
-
     if (src === null) {
         return (
             <span
@@ -201,14 +392,15 @@ export function ImageThumb({ source, alt, className, aspect, actions, open: open
     return (
         <>
             <button
+                ref={buttonRef}
                 type="button"
                 className={clsx('block overflow-hidden rounded-lg border border-border', aspect !== undefined && 'w-full')}
                 style={ratio}
-                onClick={() => setOpen(true)}
+                onClick={() => (group === null ? setOpen(true) : group.open(key))}
             >
                 <DisplayImage src={src} alt={alt} className={clsx(aspect !== undefined && 'size-full object-contain', className)} />
             </button>
-            <Lightbox src={src} alt={alt} open={open} onOpenChange={setOpen} actions={actions} />
+            {group === null && <Lightbox images={[{ key, src, alt, element: null }]} index={0} open={open} onOpenChange={setOpen} actions={actions} />}
         </>
     );
 }

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -8,7 +8,7 @@ import { formatNumber } from '@adecore/ui/format';
 import { useChatHost } from '../../../../host';
 import { CodeBlock } from '../../CodeBlock';
 import { CodeStreamingContext } from '../../code-streaming';
-import { ImageThumb } from '../../ImageView';
+import { ImageGroup, ImageThumb } from '../../ImageView';
 import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text';
 import type { UiRendererProps } from '../render-context';
 import { useTruncated } from '../use-truncated';
@@ -105,7 +105,9 @@ export function GalleryRenderer({ node, children }: UiRendererProps<UiProps<'Gal
     return (
         <GalleryContext value>
             <div role="group" aria-label={t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length })} className="@container">
-                <div className="chat-ui-nodes grid grid-cols-2 gap-2 @min-[420px]:grid-cols-3">{children}</div>
+                <div className="chat-ui-nodes grid grid-cols-2 gap-2 @min-[420px]:grid-cols-3">
+                    <ImageGroup>{children}</ImageGroup>
+                </div>
             </div>
         </GalleryContext>
     );

package/src/chat/ui/rows/MessageRows.tsx

@@ -22,7 +22,7 @@ import { referenceTokens } from '../../chat-references';
 import { presentReferences } from '../../mentions';
 import { ReferenceChip } from '../ReferenceChip';
 import { ReferenceLookupContext } from '../reference-lookup';
-import { ImageThumb } from '../ImageView';
+import { ImageGroup, ImageThumb } from '../ImageView';
 import { Markdown, MessageMarkdown, ReplyMarkdown } from '../Markdown';
 import { FadingWords } from '../FadingWords';
 import { settledBlocksText } from '../markdown-blocks';
@@ -123,13 +123,15 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
                 <MessageHeading>{t('rows.user.heading')}</MessageHeading>
                 {attachments.length > 0 && (
                     <div className="mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5">
-                        {attachments.map((attachment) =>
-                            isImageAttachment(attachment.mime) ? (
-                                <AttachmentThumb key={attachment.id} chatId={chatId} attachment={attachment} />
-                            ) : (
-                                <AttachmentLink key={attachment.id} chatId={chatId} attachment={attachment} />
-                            )
-                        )}
+                        <ImageGroup>
+                            {attachments.map((attachment) =>
+                                isImageAttachment(attachment.mime) ? (
+                                    <AttachmentThumb key={attachment.id} chatId={chatId} attachment={attachment} />
+                                ) : (
+                                    <AttachmentLink key={attachment.id} chatId={chatId} attachment={attachment} />
+                                )
+                            )}
+                        </ImageGroup>
                     </div>
                 )}
                 {beside.length > 0 && (

package/src/chat/ui/rows/Rows.tsx

@@ -83,7 +83,15 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
             return <ForksRow chatId={chatId} turnId={row.turnId} />;
         case 'changed-files':
             return (
-                <ChangedFilesRow chatId={chatId} turnId={row.turnId} tools={row.tools} diff={row.diff} checkpoint={row.checkpoint} baseMoved={row.baseMoved} />
+                <ChangedFilesRow
+                    chatId={chatId}
+                    turnId={row.turnId}
+                    tools={row.tools}
+                    diff={row.diff}
+                    checkpoint={row.checkpoint}
+                    baseMoved={row.baseMoved}
+                    heldBack={row.heldBack === true}
+                />
             );
         case 'approval':
             return <ApprovalHistoryRow item={row.item} />;