@hanzo/rooms 0.1.33 → 0.1.34

package/dist/Chat.js

@@ -34,8 +34,8 @@ import { useAgent, useAi, useChat, useModels, } from "@hanzo/ai/react";
 import { freeCopy, grantConsent, hasConsent, isFree, } from "@hanzo/ai";
 import { ASK, Chat as ChatSurface, Code, Failure, Parts, words } from "@hanzo/ui/chat";
 import { carriedIn, compose, partsOf, said as told, weigh } from "./lib/attach.js";
-import { dropped, pct, readable, refOf, retrieve } from "./lib/files.js";
-import { channel, drop, hold, landed, spend, take, usePane, useWorkFile } from "./pane.js";
+import { download, dropped, fileOf, pct, readable, refOf, retrieve } from "./lib/files.js";
+import { channel, drop, hold, landed, localOf, spend, take, usePane, useWorkFile } from "./pane.js";
 import { Face, brief as roomBrief, join, roleOf, roomTurn, roster as rosterLine, rosterOf, speakers, speaksOf, voiceOf } from "./cast.js";
 import { SpeakButton, cleanForSpeech } from "./speech.js";
 import { Crew, HOUSE, useCrew } from "./crew.js";
@@ -52,12 +52,13 @@ import { useHydrated } from "./lib/hydrated.js";
 import { base, served } from "./lib/ai.js";
 import { onServed } from "./lib/served.js";
 import { refused as worded, speech, useDictation, useTalk, useVoice, Voice } from "@hanzo/voice";
-import { ArrowUp, AudioLines, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
+import { ArrowUp, AudioLines, FileText, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
 import { ENSO, FREE } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
 import { pane } from "./ground.js";
-import { RightPane, usePinned } from "./RightPane.js";
+import { RightPane, addressOf, look, usePinned } from "./RightPane.js";
+import { useMedia } from "@hanzo/gui";
 import { Take } from "./copy.js";
 import { Share } from "./Share.js";
 import { useStarred } from "./stars.js";
@@ -351,27 +352,113 @@ const STAGE = {
     graph: "linking",
     embed: "vectors",
 };
-/** One chip: the file's glyph, its name, and how far it has got. */
-function Chip({ name, type, state, sent, file, onRemove, }) {
+/** How a file is drawn: a picture, a PDF's tile, or a chip. Read off its type, else its name, since a store may answer with neither. */
+function kindOf(name, type) {
+    if (type.startsWith("image/") || /\.(png|jpe?g|gif|webp|avif|svg)$/i.test(name))
+        return "image";
+    if (type === "application/pdf" || /\.pdf$/i.test(name))
+        return "pdf";
+    return "file";
+}
+// SIGNED ADDRESSES FOR PICTURES, by workspace file: a list of turns mounts and
+// remounts its chips, and asking the store each time would be a request per
+// picture per redraw. Kept for less than a signature lives (the store's are
+// five minutes), so a chip mounted later reads a fresh one; a picture already
+// drawn keeps its pixels whatever becomes of its address.
+const signed = new Map();
+const SIGNED_FOR = 4 * 60_000;
+function signedOf(api, id, file) {
+    const kept = signed.get(id);
+    if (kept && Date.now() - kept.at < SIGNED_FOR)
+        return kept.got;
+    const got = (file?.bucket && file.key ? Promise.resolve(file) : fileOf(api, id)).then((f) => download(api, f.bucket, f.key));
+    signed.set(id, { at: Date.now(), got });
+    got.catch(() => signed.delete(id));
+    return got;
+}
+/**
+ * Where a picture's thumbnail reads from: the bytes on this machine where this
+ * document holds them (the held file's object URL, which outlives its send),
+ * else a signed address for the workspace's copy — a file taken from Drive, or
+ * a turn read back after a reload. '' until there is one.
+ */
+function usePicture(on, href, id, file) {
+    const api = useAi();
+    const near = on ? href || (id ? localOf(id) : "") : "";
+    const [far, setFar] = useState("");
+    const bucket = file?.bucket;
+    useEffect(() => {
+        if (!on || near || !id)
+            return;
+        let live = true;
+        signedOf(api, id, file).then((url) => live && setFar(url), () => { });
+        return () => {
+            live = false;
+        };
+        // The file's record moves with every stage of its ingest; its address does not.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [on, near, id, bucket, api]);
+    return near || far;
+}
+/** Edge of a picture's or a PDF's thumbnail, in px. */
+const THUMB = 48;
+/**
+ * One file put into a message.
+ *
+ * A PICTURE SHOWS ITSELF and a PDF shows a tile, each with its name and size
+ * beside it; any other kind is a chip of its name. Nothing is filled behind
+ * them: a hairline on whatever they sit on, so a file reads alike over the
+ * composer and inside a turn's bubble, in a light room and a dark one. A second
+ * fill on the bubble's was the darker grey that read as a stain. The word for
+ * how far a file has got shows only while it is getting there — a picture of
+ * the file already says it is attached — and `data-state` keeps the index's own
+ * word for whoever reads it.
+ *
+ * Pressing one opens it beside the conversation (`onOpen`).
+ */
+function Chip({ name, type, size, state, sent, file, picture, onOpen, onRemove, }) {
+    const kind = kindOf(name, type);
     const bad = state === "failed";
     const why = state === "failed" || state === "stored" ? file?.error : file?.note;
-    return (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$2.5", pr: onRemove ? "$1" : "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", bg: "$hover", maxW: 320, "data-slot": "file-chip", "data-state": state, "data-stage": file?.stage ?? "", ...(why ? { title: why } : null), children: [type.startsWith("image/") ? (_jsx(ImageMark, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })) : (_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: name }), _jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, shrink: 0, children: progress(state, sent, file) }), onRemove ? (_jsx(Box, { render: "button", "aria-label": `Remove ${name}`, onClick: onRemove, p: "$1", rounded: "$10", hoverStyle: { bg: "$raised" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })) : null] }));
+    // A picture the browser cannot draw (HEIC, a lapsed signature) falls back to its glyph.
+    const [broken, setBroken] = useState("");
+    const word = state === "ready" ? (file?.clipped ? "in part" : "") : progress(state, sent, file);
+    const meta = [kind === "pdf" ? "PDF" : "", size > 0 ? weigh(size) : "", word].filter(Boolean).join(" \u00b7 ");
+    const remove = onRemove ? (_jsx(Box, { render: "button", "aria-label": `Remove ${name}`, onClick: onRemove, p: "$1", rounded: "$10", shrink: 0, hoverStyle: { bg: "$hover" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })) : null;
+    const marks = {
+        role: "listitem",
+        "data-slot": "file-chip",
+        "data-state": state,
+        "data-kind": kind,
+        "data-stage": file?.stage ?? "",
+        ...(why ? { title: why } : null),
+    };
+    if (kind === "file")
+        return (_jsxs(XStack, { ...marks, self: "center", items: "center", gap: "$1", pr: onRemove ? "$1" : "$2.5", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", maxW: 320, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${name}`, onClick: onOpen, items: "center", gap: "$1.5", pl: "$2.5", py: "$1", minW: 0, cursor: "pointer", children: [_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" }), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: name }), meta ? (_jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, shrink: 0, children: meta })) : null] }), remove] }));
+    const drawn = kind === "image" && picture && broken !== picture;
+    const Glyph = kind === "pdf" ? FileText : ImageMark;
+    return (_jsxs(XStack, { ...marks, items: "center", gap: "$1", p: "$1", pr: onRemove ? "$1" : "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", maxW: 280, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${name}`, onClick: onOpen, items: "center", gap: "$2", minW: 0, cursor: "pointer", children: [_jsx(YStack, { "data-slot": "file-thumb", width: THUMB, height: THUMB, shrink: 0, rounded: "$3", overflow: "hidden", items: "center", justify: "center", gap: "$0.5", borderWidth: drawn ? 0 : 1, borderColor: "$borderColor", children: drawn ? (_jsx(View, { render: _jsx("img", { src: picture, alt: "", loading: "lazy", decoding: "async", onError: () => setBroken(picture) }), width: "100%", height: "100%", objectFit: "cover", display: "block" })) : (_jsxs(_Fragment, { children: [_jsx(Glyph, { size: 18, "aria-hidden": true, color: "var(--muted-foreground)" }), kind === "pdf" ? (_jsx(Text, { fontSize: 9, fontWeight: "600", letterSpacing: 0.5, color: "$soft", children: "PDF" })) : null] })) }), _jsxs(YStack, { minW: 0, gap: "$0.5", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, text: "left", children: name }), meta ? (_jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, text: "left", children: meta })) : null] })] }), remove] }));
 }
 /** A file held for the next message: uploading, then indexing, then ready. */
-function HeldChip({ one, onRemove }) {
+function HeldChip({ one, onOpen, onRemove }) {
     const live = useWorkFile(one.file?.id);
     const file = live ?? one.file;
     const state = one.state === "uploading" ? one.state : (file?.status ?? one.state);
-    return _jsx(Chip, { name: one.name, type: one.type, state: state, sent: one.sent, file: file ?? (one.error ? { error: one.error } : undefined), onRemove: onRemove });
+    const picture = usePicture(kindOf(one.name, one.type) === "image", one.href, file?.id, file);
+    // The mark the column's Sources row opens for the same file, so both open it alike.
+    const mark = { id: one.id, name: one.name, kind: kindOf(one.name, one.type) === "image" ? "image" : "file", href: one.href || undefined, file: file?.id, mime: one.type };
+    return (_jsx(Chip, { name: one.name, type: one.type, size: one.size, state: state, sent: one.sent, file: file ?? (one.error ? { error: one.error } : undefined), picture: picture, onOpen: () => onOpen(mark), onRemove: onRemove }));
 }
 /** A file a sent turn carried, as the index says of it now. */
-function TurnChip({ f }) {
+function TurnChip({ f, onOpen }) {
     const live = useWorkFile(f.id);
-    return _jsx(Chip, { name: f.name, type: f.type, state: live?.status ?? "ready", sent: 1, file: live });
+    const picture = usePicture(kindOf(f.name, f.type) === "image", "", f.id, live);
+    const mark = { id: f.id, name: f.name, kind: kindOf(f.name, f.type) === "image" ? "image" : "file", file: f.id, mime: f.type };
+    return _jsx(Chip, { name: f.name, type: f.type, size: f.size, state: live?.status ?? "ready", sent: 1, file: live, picture: picture, onOpen: () => onOpen(mark) });
 }
 /** A question that carried files: its words, the files put into it, and those read again. */
-function Carried({ text, attached, reused }) {
-    return (_jsxs(YStack, { gap: "$1.5", "data-slot": "turn-files", children: [text ? _jsx(Prose, { text: text }) : null, attached.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Files in this message", children: attached.map((f) => (_jsx(TurnChip, { f: f }, f.id))) })) : null, reused.length ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read again: ", reused.map((f) => `${f.name} (${weigh(f.size)})`).join(", ")] })) : null] }));
+function Carried({ text, attached, reused, onOpen }) {
+    return (_jsxs(YStack, { gap: "$2", "data-slot": "turn-files", children: [text ? _jsx(Prose, { text: text }) : null, attached.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Files in this message", children: attached.map((f) => (_jsx(TurnChip, { f: f, onOpen: onOpen }, f.id))) })) : null, reused.length ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read again: ", reused.map((f) => `${f.name} (${weigh(f.size)})`).join(", ")] })) : null] }));
 }
 /**
  * The conversation. One component for a visitor and for an account.
@@ -420,6 +507,29 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // switch for it. Kept per conversation by `pane.ts`, so the header's control
     // reflects THIS room rather than the last one that was open.
     const [pinned, flipPin] = usePinned();
+    // The frame draws the column only from `$lg` (Shell.tsx `Paned`).
+    const wide = useMedia().lg;
+    /**
+     * OPENS A FILE A MESSAGE CARRIES, by the road the column's Sources row takes
+     * (`look`): a tab in the browser beside the conversation, the column opened
+     * first when it is shut. A phone has no column — the frame spends the width
+     * on the room — so there the file opens in a tab of the browser's own, minted
+     * before the signed address is asked for, since a window opened after an
+     * await is a popup the browser blocks.
+     */
+    const openFile = useCallback((m) => {
+        if (wide) {
+            if (aside === null)
+                showAside("tasks");
+            void look(at, m, ai);
+            return;
+        }
+        const tab = window.open("", "_blank");
+        if (!tab)
+            return;
+        tab.opener = null;
+        void addressOf(m, ai).then((href) => (href ? tab.location.replace(href) : tab.close()));
+    }, [wide, aside, showAside, at, ai]);
     /**
      * WHO YOU ARE TALKING TO, when it is somebody rather than the plain model.
      *
@@ -1132,7 +1242,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     if (turn.role === "user" && said) {
                         const read = told(said);
                         if (read.carried)
-                            return _jsx(Carried, { text: read.text, attached: read.carried.attached, reused: read.carried.reused });
+                            return _jsx(Carried, { text: read.text, attached: read.carried.attached, reused: read.carried.reused, onOpen: openFile });
                     }
                     // WHILE THE ANSWER HAS NO WORDS YET: who is answering (the agents the
                     // question addresses, or the whole room when it names nobody), and the
@@ -1238,7 +1348,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     },
                     // WHAT GOES WITH THE MESSAGE, above the frame: one chip a file, each
                     // with its own remove, and the reason any file was refused.
-                    head: files.length || turnedAway || preparing || talk.open || talk.refusal || pause ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 1.5rem)`, mx: "auto", gap: "$1.5", children: [pause ? (_jsx(LimitedBanner, { message: pause.message, actions: pause.actions, onAction: act, onUsage: () => showSettings("usage") })) : null, actWrong ? (_jsx(Text, { role: "alert", "data-slot": "limited-banner-wrong", fontSize: "$2", color: BAD, children: actWrong })) : null, files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsx(HeldChip, { one: one, onRemove: () => drop(at, one.id) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null, talk.open || talk.refusal ? (_jsx(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-talk-reply", fontSize: "$2", color: talk.refusal ? BAD : "$soft", children: talk.refusal
+                    head: files.length || turnedAway || preparing || talk.open || talk.refusal || pause ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 1.5rem)`, mx: "auto", gap: "$1.5", children: [pause ? (_jsx(LimitedBanner, { message: pause.message, actions: pause.actions, onAction: act, onUsage: () => showSettings("usage") })) : null, actWrong ? (_jsx(Text, { role: "alert", "data-slot": "limited-banner-wrong", fontSize: "$2", color: BAD, children: actWrong })) : null, files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsx(HeldChip, { one: one, onOpen: openFile, onRemove: () => drop(at, one.id) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null, talk.open || talk.refusal ? (_jsx(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-talk-reply", fontSize: "$2", color: talk.refusal ? BAD : "$soft", children: talk.refusal
                                     ? worded(talk.refusal)
                                     : talk.reply
                                         ? `Hanzo: ${talk.reply}`

package/dist/RightPane.d.ts

@@ -1,4 +1,23 @@
 import { type ChatMessage } from '@hanzo/ai/react';
+import { type Api } from './lib/files.js';
+/**
+ * One thing the conversation carries.
+ *
+ * `href` is where it can be opened and `body` is the text of something that was
+ * never a file — a fenced block exists only in the transcript until somebody
+ * asks to look at it, at which point `body` becomes a blob and gets an address.
+ */
+export interface Mark {
+    id: string;
+    name: string;
+    kind: 'image' | 'code' | 'file';
+    href?: string;
+    body?: string;
+    /** The type a blob should carry, so a browser renders it rather than downloads it. */
+    mime?: string;
+    /** A workspace file's id: it opens through a signed address minted when it is looked at. */
+    file?: string;
+}
 /**
  * The column. `said` is the conversation it stands beside; without one it draws
  * the same shape with nothing in it, which is what a room nobody has spoken in
@@ -8,6 +27,22 @@ export declare function RightPane({ said, onClose, }: {
     said?: ChatMessage[];
     onClose?: () => void;
 }): import("react").JSX.Element;
+/**
+ * Opens a mark in this conversation's browser.
+ *
+ * A BLOCK BECOMES A FILE THE MOMENT SOMEBODY LOOKS AT IT. It has no address
+ * until then — it is text inside a turn — so one is minted here from its own
+ * bytes, carrying the type its fence declared. That is what makes an answer's
+ * `index.html` something you can actually see rather than something you can
+ * only read the source of.
+ */
+export declare function look(at: string, m: Mark, api: Api): Promise<void>;
+/**
+ * Where a mark can be opened: its own address, a signed one minted for its
+ * workspace file, or one minted from its text. Null when there is none — a file
+ * forgotten or a store unreachable opens nothing, and the row stays.
+ */
+export declare function addressOf(m: Mark, api: Api): Promise<string | null>;
 /** Shows or hides the summary above this conversation's browser. Exported for
  *  the conversation header, which is where the control belongs. */
 export declare function usePinned(): [boolean, () => void];

package/dist/RightPane.js

@@ -210,21 +210,27 @@ function Marks({ at, kind, title, icon, marks, children, }) {
  * `index.html` something you can actually see rather than something you can
  * only read the source of.
  */
-async function look(at, m, api) {
+export async function look(at, m, api) {
+    const href = await addressOf(m, api);
+    if (href)
+        openTab(at, href, m.name);
+}
+/**
+ * Where a mark can be opened: its own address, a signed one minted for its
+ * workspace file, or one minted from its text. Null when there is none — a file
+ * forgotten or a store unreachable opens nothing, and the row stays.
+ */
+export async function addressOf(m, api) {
     if (!m.href && m.file) {
         try {
             const f = await fileOf(api, m.file);
-            openTab(at, await download(api, f.bucket, f.key), m.name);
+            return await download(api, f.bucket, f.key);
         }
         catch {
-            // A file forgotten or a store unreachable opens nothing; the row stays.
+            return null;
         }
-        return;
     }
-    const href = m.href ?? (m.body === undefined ? null : URL.createObjectURL(new Blob([m.body], { type: m.mime })));
-    if (!href)
-        return;
-    openTab(at, href, m.name);
+    return m.href ?? (m.body === undefined ? null : URL.createObjectURL(new Blob([m.body], { type: m.mime })));
 }
 /**
  * A menu row's words.

package/dist/pane.d.ts

@@ -103,6 +103,8 @@ export declare function shutTab(key: string, id: string): void;
 export declare function pin(key: string, on: boolean): void;
 /** The workspace file `id` as the index last said, or undefined until it has. */
 export declare function useWorkFile(id: string | undefined): WorkFile | undefined;
+/** The object URL over workspace file `id`'s bytes on this machine, or '' where this document never held them. */
+export declare const localOf: (id: string) => string;
 /**
  * Takes files into this conversation: each goes straight to the org's
  * workspace — in parts when it is large, several at once — is registered with

package/dist/pane.js

@@ -229,6 +229,13 @@ export function useWorkFile(id) {
         };
     }, () => (id ? files.get(id) : undefined), () => undefined);
 }
+// THE BYTES ON THIS MACHINE, by the workspace file they became. `spend` leaves a
+// held file's object URL standing, so a turn that carried a picture draws it
+// from here with no request, for as long as this document lives. A reload ends
+// it, and the turn reads the workspace's copy instead.
+const local = new Map();
+/** The object URL over workspace file `id`'s bytes on this machine, or '' where this document never held them. */
+export const localOf = (id) => local.get(id) ?? '';
 // Each held file's upload, by held id: what stops it, and what it settles to.
 const carrying = new Map();
 /** How many files go up at once; each large one also sends several parts at once. */
@@ -294,6 +301,7 @@ export async function hold(key, list, via) {
             const objectKey = chatKey(file);
             await upload(via.api, bucket, objectKey, file, (sent) => patch(key, h.id, { sent }), stop.signal);
             const got = await register(via.api, bucket, objectKey);
+            local.set(got.id, h.href);
             patch(key, h.id, fromFile(got));
             watch(via.api, got, key, h.id);
             land(got);
@@ -363,8 +371,11 @@ export function drop(key, id) {
             return was;
         carrying.get(id)?.stop.abort();
         carrying.delete(id);
-        if (going.href)
+        if (going.href) {
+            if (going.file)
+                local.delete(going.file.id);
             URL.revokeObjectURL(going.href);
+        }
         return { ...was, held: was.held.filter((h) => h.id !== id) };
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "The workspace rooms — Home, Chat, Inbox, Contacts, Meet, Cal, Drive, Board, Work, Bots — and the frame that holds them, once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",