@hanzo/rooms 0.1.35 → 0.1.37

package/dist/thread.js

@@ -0,0 +1,408 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A conversation's own actions, kept where the conversation is: PATCH and DELETE
+// /v1/agents/chat/conversations/{id} (hanzoai/agent v1.0.12), the member's own
+// only — and the ones that need nothing of the store: its link, a new tab, the
+// Share panel.
+//
+// ONE MENU A LIST. `ConversationMenu` wraps a list of rows and mounts, once for
+// all of them, gui's ContextMenu (a right-click at the cursor, a long-press on
+// touch), gui's Menu hung from whichever row's ⋯ was pressed (a gui Menu takes
+// many triggers and anchors to the one pressed), and the Rename, Delete and
+// Share dialogs. A row (`ThreadRow`) is its markup and a trigger. The column's
+// Recents and the shell's /chat list both wrap theirs in it. Not
+// @hanzo/ui/product/menu's ContextMenu: it portals its panel under gui's
+// `pointer-events: none` host, so it drew and took no click (measured: every
+// ancestor of its panel reads `none`).
+//
+// A CHANGE SHOWS AT ONCE, everywhere, and is taken back with a toast if the
+// store refuses it (pending.ts): every list on the page draws the changes in
+// flight over what it last read, and reads the store again once it answers.
+// A pin is the server's, never this browser's: it follows the person to every
+// device they sign in on.
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { useAi } from '@hanzo/ai/react';
+import { Archive, ArchiveRestore, ExternalLink, Link2, MoreHorizontal, Pencil, Pin, PinOff, Share2, Trash2 } from 'lucide-react';
+import { Button, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, Dialog, DialogContent, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, Input, SizableText, Text, XStack, YStack, toast, } from '@hanzo/ui';
+import { empty } from './open.js';
+import { say } from './lib/org.js';
+import { talk } from './lib/host.js';
+import { BAD } from './lib/mix.js';
+import { site } from './where.js';
+import { attempt, bind, enlist, reread, snapshot, subscribe, sweep, tick, view } from './pending.js';
+import { chord, named, said } from './chord.js';
+import { carry } from './stars.js';
+import { ShareDialog } from './Share.js';
+/**
+ * The member's conversations: pinned first, then most recently spoken in, the
+ * archived ones left out — or, with `archived`, those alone — with every change
+ * in flight drawn over them. It reads again whenever a conversation changes
+ * here, and once for `seek` when it does not hold it: a conversation it has not
+ * seen is one just begun.
+ */
+export function useThreadList(archived = false, seek = null) {
+    const ai = useAi();
+    // What was read, when, and from which shelf: the other shelf's rows are never drawn as this one's.
+    const [read, setRead] = useState({ threads: [], at: 0, archived });
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [asks, ask] = useState(0);
+    const reload = useCallback(() => ask((n) => n + 1), []);
+    const me = useRef({ at: 0, reload });
+    useEffect(() => enlist(me.current), []);
+    useEffect(() => bind(ai), [ai]);
+    useEffect(() => {
+        const control = new AbortController();
+        const at = tick();
+        setLoading(true);
+        ai.threads.list({ archived, signal: control.signal }).then((threads) => {
+            if (control.signal.aborted)
+                return;
+            me.current.at = at;
+            setRead({ threads, at, archived });
+            setError(null);
+            setLoading(false);
+            sweep();
+            // A read that answers is a client the store takes: the browser's old stars can become pins.
+            stars(ai);
+        }, (e) => {
+            if (control.signal.aborted)
+                return;
+            setError(e instanceof Error ? e : new Error(String(e)));
+            setLoading(false);
+        });
+        return () => control.abort();
+    }, [ai, archived, asks]);
+    const changes = useSyncExternalStore(subscribe, snapshot, snapshot);
+    const threads = useMemo(() => (read.archived === archived ? view(read.threads, read.at, archived) : view([], 0, archived)), [read, archived, changes]);
+    const asked = useRef(new Set());
+    useEffect(() => {
+        if (archived || !seek || loading || asked.current.has(seek) || threads.some((t) => t.id === seek))
+            return;
+        asked.current.add(seek);
+        reload();
+    }, [archived, seek, loading, threads, reload]);
+    return { threads, loading, error, reload };
+}
+/** How long a change waits for the store before it is taken back. */
+const WAIT = 15_000;
+/** A refusal in the store's words, or that the store did not answer at all. */
+const refused = (e) => e instanceof DOMException && e.name === 'TimeoutError' ? 'The conversation store did not answer. Try again.' : say(e);
+let carried = false;
+/** The browser's stars from before pins were the server's, made pins once a page (stars.ts `carry`). */
+function stars(ai) {
+    if (carried)
+        return;
+    carried = true;
+    void carry((id) => ai.threads.update(id, { pinned: true }, { signal: AbortSignal.timeout(WAIT) })).then((done) => {
+        if (done)
+            reread();
+    });
+}
+/** What a conversation can be asked to do. Each shows at once; a refusal takes it back and says so in a toast. */
+export function useThreadActions() {
+    const ai = useAi();
+    return useMemo(() => {
+        const run = async (t, change, send) => {
+            try {
+                // The clock starts when the change is asked, after the ones before it are answered.
+                await attempt(t, change, () => send(AbortSignal.timeout(WAIT)));
+                return true;
+            }
+            catch (e) {
+                toast.error(refused(e));
+                return false;
+            }
+        };
+        const change = (t, to) => run(t, to, (signal) => ai.threads.update(t.id, to, { signal }));
+        return {
+            pin: (t) => change(t, { pinned: !t.pinned }),
+            archive: (t) => change(t, { archived: !t.archived }),
+            rename: (t, title) => change(t, { title }),
+            remove: (t) => run(t, null, (signal) => ai.threads.remove(t.id, { signal })),
+        };
+    }, [ai]);
+}
+const titleOf = (t) => t.title || 'Untitled';
+/** A conversation's own address, whole: the app at `/?chat=<id>` (lib/host `talk`), wherever the rooms are drawn. */
+export const href = (id) => new URL(site(talk(id)), window.location.href).href;
+/** Opens a conversation in a tab of its own. */
+const away = (id) => {
+    window.open(href(id), '_blank', 'noopener');
+};
+/** Puts a conversation's address on the clipboard. */
+async function copy(id) {
+    try {
+        await navigator.clipboard.writeText(href(id));
+        toast.success('Link copied');
+    }
+    catch {
+        toast.error('The browser would not copy the link.');
+    }
+}
+/** The one colour in the menu: Delete's — design's destructive mixed toward the theme's ink, 4.5:1 on either theme's panel. */
+const DANGER = BAD;
+const mac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+const Rows = createContext(null);
+const keyed = new Set();
+/**
+ * A keydown anywhere on the page, before anything inside it handles it (an
+ * open menu takes its keys): the list whose menu is open, or else the first
+ * that holds the open conversation, acts.
+ */
+function hear(e) {
+    const act = chord(e);
+    if (!act)
+        return;
+    const all = [...keyed].map((one) => one.current).filter((one) => one !== null);
+    if (all.some((one) => one.held))
+        return;
+    const list = all.find((one) => one.open) ?? all.find((one) => one.target() !== null);
+    const t = list?.target();
+    if (!list || !t)
+        return;
+    e.preventDefault();
+    list.act(act, t);
+}
+function listen(keys) {
+    if (!keyed.size)
+        window.addEventListener('keydown', hear, true);
+    keyed.add(keys);
+    return () => {
+        keyed.delete(keys);
+        if (!keyed.size)
+            window.removeEventListener('keydown', hear, true);
+    };
+}
+/** The element of a row that takes focus: the row itself, a button. */
+const own = (row) => row?.querySelector('[data-slot="sidebar-item"], [role="button"]') ?? null;
+/**
+ * A list of conversations with their menu: a right-click on a row or a
+ * long-press opens it at the point, a row's ⋯ hangs it from itself. Its one
+ * child holds the rows (`ThreadRow`). `threads` are the list's conversations by
+ * id, `active` the one the pane holds (what the keys act on with no menu open),
+ * and `onGone` runs after that one is deleted — the room moves to a new chat —
+ * defaulting to emptying the room.
+ */
+export function ConversationMenu({ threads, active = null, onGone = empty, children, }) {
+    const act = useThreadActions();
+    // The conversation the pane holds NOW: a delete answered after the reader moved on leaves the room they moved to.
+    const holds = useRef(active);
+    holds.current = active;
+    // The list's own element, for the row after one deleted.
+    const list = useId();
+    const [menu, setMenu] = useState(null);
+    const [dialogue, setDialogue] = useState(null);
+    // The conversation the menu or a dialog acts on, by id, read from the list so
+    // it is current; the last one read stands in once the list lets it go (a
+    // closing Delete dialog still names it).
+    const [aimed, setAimed] = useState(null);
+    const last = useRef(null);
+    const listed = aimed ? (threads.get(aimed) ?? null) : null;
+    if (listed)
+        last.current = listed;
+    const subject = aimed ? (listed ?? (last.current?.id === aimed ? last.current : null)) : null;
+    // Where focus goes back to: the ⋯ pressed, or the row right-clicked.
+    const from = useRef(null);
+    // What a right-click or a long-press landed on, before the menu decides to open.
+    const pointed = useRef(null);
+    const ask = useCallback((d, t) => {
+        setAimed(t.id);
+        setMenu(null);
+        setDialogue(d);
+    }, []);
+    const aim = useCallback((t, el) => {
+        from.current = el;
+        setAimed(t.id);
+    }, []);
+    const point = (e) => {
+        const row = e.target?.closest?.('[data-thread]') ?? null;
+        pointed.current = row ? (threads.get(row.getAttribute('data-thread') ?? '') ?? null) : null;
+        if (pointed.current)
+            from.current = own(row);
+    };
+    // A menu shut by Escape, a choice or a press outside gives focus back where it
+    // was opened from — unless what was chosen opened a dialog, which takes it.
+    const back = (e) => {
+        e.preventDefault();
+        requestAnimationFrame(() => {
+            const now = document.activeElement;
+            if (!now || now === document.body)
+                from.current?.focus();
+        });
+    };
+    const shut = (open) => {
+        if (!open)
+            setDialogue(null);
+    };
+    const after = (e) => {
+        e.preventDefault();
+        if (from.current?.isConnected)
+            from.current.focus();
+    };
+    const keys = useRef(null);
+    keys.current = {
+        open: menu !== null,
+        held: dialogue !== null,
+        target: () => (menu !== null ? subject : active ? (threads.get(active) ?? null) : null),
+        act: (a, t) => {
+            // With no menu open, focus goes back to wherever the keys were pressed.
+            if (menu === null && document.activeElement instanceof HTMLElement)
+                from.current = document.activeElement;
+            if (a === 'rename')
+                return ask('rename', t);
+            setMenu(null);
+            void act.pin(t);
+        },
+    };
+    useEffect(() => listen(keys), []);
+    const rows = useMemo(() => ({ aim, open: menu ? aimed : null }), [aim, menu, aimed]);
+    // The menu is named by its conversation: gui would name it by its trigger, the
+    // list itself for a right-click, and the ⋯ for the other.
+    const title = subject ? titleOf(subject) : undefined;
+    const apple = mac();
+    const entries = subject
+        ? [
+            {
+                key: 'rename',
+                label: 'Rename',
+                icon: _jsx(Pencil, { size: 16, "aria-hidden": true }),
+                shortcut: said('rename', apple),
+                keys: named('rename'),
+                run: () => ask('rename', subject),
+            },
+            {
+                key: 'pin',
+                label: subject.pinned ? 'Unpin' : 'Pin',
+                icon: subject.pinned ? _jsx(PinOff, { size: 16, "aria-hidden": true }) : _jsx(Pin, { size: 16, "aria-hidden": true }),
+                shortcut: said('pin', apple),
+                keys: named('pin'),
+                run: () => void act.pin(subject),
+            },
+            { key: 'share', label: 'Share…', icon: _jsx(Share2, { size: 16, "aria-hidden": true }), run: () => ask('share', subject) },
+            { key: 'copy', label: 'Copy link', icon: _jsx(Link2, { size: 16, "aria-hidden": true }), run: () => void copy(subject.id) },
+            { key: 'tab', label: 'Open in new tab', icon: _jsx(ExternalLink, { size: 16, "aria-hidden": true }), run: () => away(subject.id) },
+            {
+                key: 'archive',
+                label: subject.archived ? 'Unarchive' : 'Archive',
+                icon: subject.archived ? _jsx(ArchiveRestore, { size: 16, "aria-hidden": true }) : _jsx(Archive, { size: 16, "aria-hidden": true }),
+                run: () => void act.archive(subject),
+            },
+            { key: 'gone', line: true },
+            { key: 'delete', label: 'Delete', icon: _jsx(Trash2, { size: 16, color: DANGER, "aria-hidden": true }), destructive: true, run: () => ask('delete', subject) },
+        ]
+        : [];
+    return (_jsxs(Rows.Provider, { value: rows, children: [_jsxs(DropdownMenu, { open: menu === 'dots', onOpenChange: (open) => setMenu(open ? 'dots' : null), children: [_jsxs(ContextMenu
+                    // Held here as well as inside gui's ContextMenu, so the keys can shut it.
+                    , { 
+                        // Held here as well as inside gui's ContextMenu, so the keys can shut it.
+                        open: menu === 'point', onOpenChange: (open, e) => {
+                            if (!open)
+                                return setMenu((m) => (m === 'point' ? null : m));
+                            // Not on a conversation: the browser's own menu answers.
+                            if (!pointed.current)
+                                return e?.preventDefault();
+                            setAimed(pointed.current.id);
+                            setMenu('point');
+                        }, children: [_jsx(ContextMenuTrigger, { asChild: true, "data-menu": list, onContextMenu: point, onPointerDown: (e) => {
+                                    if (e.pointerType !== 'mouse')
+                                        point(e);
+                                }, children: children }), _jsx(ContextMenuContent, { minW: 220, onCloseAutoFocus: back, "aria-labelledby": undefined, "aria-label": title, children: entries.map((one) => 'line' in one ? (_jsx(ContextMenuSeparator, {}, one.key)) : (_jsx(ContextMenuItem, { variant: one.destructive ? 'destructive' : 'default', "aria-keyshortcuts": one.keys, onSelect: one.run, children: _jsx(Face, { entry: one, Shortcut: ContextMenuShortcut }) }, one.key))) })] }), _jsx(DropdownMenuContent, { align: "end", minW: 220, onCloseAutoFocus: back, "aria-labelledby": undefined, "aria-label": title, children: entries.map((one) => 'line' in one ? (_jsx(DropdownMenuSeparator, {}, one.key)) : (_jsx(DropdownMenuItem, { variant: one.destructive ? 'destructive' : 'default', "aria-keyshortcuts": one.keys, onSelect: one.run, children: _jsx(Face, { entry: one, Shortcut: DropdownMenuShortcut }) }, one.key))) })] }), _jsx(Rename, { t: subject, open: dialogue === 'rename', onOpenChange: shut, onCloseAutoFocus: after, save: (t, words) => {
+                    if (words !== titleOf(t))
+                        void act.rename(t, words);
+                } }), _jsx(Delete, { t: subject, open: dialogue === 'delete', onOpenChange: shut, onCloseAutoFocus: after, remove: (t) => {
+                    // Focus goes on to the row after it, or the one before, not to the page.
+                    const rows = [...(document.querySelector(`[data-menu="${list}"]`)?.querySelectorAll('[data-thread]') ?? [])];
+                    const at = rows.findIndex((row) => row.getAttribute('data-thread') === t.id);
+                    if (at >= 0)
+                        from.current = own(rows[at + 1] ?? rows[at - 1] ?? null);
+                    void act.remove(t).then((ok) => {
+                        if (ok && holds.current === t.id)
+                            onGone();
+                    });
+                } }), _jsx(ShareDialog, { thread: subject?.id ?? null, open: dialogue === 'share', onOpenChange: shut, onCloseAutoFocus: after })] }));
+}
+/** One entry's line: its icon in a 16px well, its name, and its keys at the end. */
+function Face({ entry, Shortcut, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, children: entry.icon }), _jsx(Text, { flex: 1, minW: 0, fontSize: "$2", color: entry.destructive ? DANGER : '$ink', numberOfLines: 1, children: entry.label }), entry.shortcut ? _jsx(Shortcut, { "aria-hidden": true, children: entry.shortcut }) : null] }));
+}
+/**
+ * One conversation's row, inside a `ConversationMenu`: its menu opens by a
+ * right-click anywhere on it, a long-press, or its ⋯; a middle-click or a
+ * ⌘/Ctrl-click opens it in a new tab.
+ *
+ * The ⋯ stands where `aside` (the row's age) stands, and takes its place while
+ * the row is hovered, focused, open in the pane or has its menu open, and
+ * always on a touch screen, which has no hover to find it by; the rest of the
+ * time the age reads there.
+ */
+export function ThreadRow({ t, active = false, aside, listed = true, children, }) {
+    const menus = useContext(Rows);
+    if (!menus)
+        throw new Error('ThreadRow is drawn inside a ConversationMenu, which holds its menu.');
+    const [focused, setFocused] = useState(false);
+    // Its own id: gui gives every trigger of one menu the menu's one id.
+    const id = useId();
+    // What the ⋯ is for, said after its name: the row's title.
+    const about = useId();
+    // The ⋯ and the age share one place: whichever shows, the other gives way.
+    const shown = active || menus.open === t.id || focused;
+    // gui types these handlers by React Native's event; on the web they carry the DOM's.
+    const aim = (e) => menus.aim(t, e.currentTarget);
+    // A new tab for the row itself, never for its ⋯.
+    const onDots = (target) => Boolean(target?.closest?.('[data-slot="thread-options"]'));
+    return (_jsxs(YStack, { ...(listed ? { role: 'listitem' } : null), position: "relative", group: true, "data-thread": t.id, "data-pinned": t.pinned ? '' : undefined, onClickCapture: (press) => {
+            const e = press;
+            if (!(e.metaKey || e.ctrlKey) || onDots(e.target))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            away(t.id);
+        }, onMouseDown: (e) => {
+            // The middle button's own autoscroll would start here.
+            if (e.button === 1)
+                e.preventDefault();
+        }, onMouseUp: (e) => {
+            if (e.button !== 1 || onDots(e.target))
+                return;
+            e.preventDefault();
+            away(t.id);
+        }, children: [children, _jsx(Text, { id: about, display: "none", children: titleOf(t) }), aside ? (_jsx(XStack, { position: "absolute", r: "$2", t: 0, b: 0, items: "center", pointerEvents: "none", opacity: shown ? 0 : 1, "$group-hover": { opacity: 0 }, $touchable: { opacity: 0 }, children: aside })) : null, _jsx(XStack, { position: "absolute", r: "$1", t: 0, b: 0, items: "center", children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "aria-label": "Chat options", "aria-describedby": about, id: id, "data-slot": "thread-options", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", bg: "transparent", opacity: shown ? 1 : 0, "$group-hover": { opacity: 1 }, 
+                        // A thumb's 44px on a touch screen (lib/tap.ts), centred on the row and over its edges.
+                        $touchable: { opacity: 1, minW: 44, minH: 44 }, hoverStyle: { bg: '$hover' }, 
+                        // Before gui's own press handler, which opens the menu and stops there.
+                        onPointerDownCapture: aim, onKeyDownCapture: aim, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: _jsx(MoreHorizontal, { size: 15, "aria-hidden": true }) }) }) })] }));
+}
+/** A conversation's title, written again: one line, never empty. */
+function Rename({ t, open, onOpenChange, onCloseAutoFocus, save, }) {
+    const [words, setWords] = useState('');
+    // The title as it stood when the dialog opened; a list read again meanwhile does not overwrite the typing.
+    const id = t?.id;
+    useEffect(() => {
+        if (open && t)
+            setWords(titleOf(t));
+    }, [open, id]);
+    const submit = () => {
+        const title = words.trim();
+        // Once: a second Enter while the dialog closes asks nothing.
+        if (!open || !title || !t)
+            return;
+        onOpenChange(false);
+        save(t, title);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", onCloseAutoFocus: onCloseAutoFocus, children: [_jsx(DialogTitle, { children: "Rename chat" }), _jsx(Input, { autoFocus: true, value: words, onChangeText: setWords, "aria-label": "Chat title", maxLength: 80, onKeyDown: (e) => {
+                        // An Enter that ends an IME composition writes the word; it does not save.
+                        if (e.key === 'Enter' && !e.nativeEvent?.isComposing && e.keyCode !== 229)
+                            submit();
+                    } }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", rounded: 999, disabled: !words.trim(), onPress: submit, children: "Save" })] })] }) }));
+}
+/** Deleting asks first, and says what goes with it: every turn, and every link it was shared by. */
+function Delete({ t, open, onOpenChange, onCloseAutoFocus, remove, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", onCloseAutoFocus: onCloseAutoFocus, children: [_jsx(DialogTitle, { children: "Delete chat?" }), _jsx(SizableText, { size: "$2", color: "$soft", children: `“${t ? titleOf(t) : ''}” is deleted for good, with every link it was shared by. To keep it out of the list instead, archive it.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", variant: "destructive", rounded: 999, disabled: !t, onPress: () => {
+                                // Once: a second press while the dialog closes would ask the store to delete it again.
+                                if (!open || !t)
+                                    return;
+                                onOpenChange(false);
+                                remove(t);
+                            }, children: "Delete" })] })] }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "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",
@@ -47,7 +47,7 @@
     "simple-icons": "16.30.0"
   },
   "peerDependencies": {
-    "@hanzo/ai": ">=0.6.20",
+    "@hanzo/ai": ">=0.6.23",
     "@hanzo/appearance": ">=0.2.6",
     "@hanzo/build": ">=0.2.34",
     "@hanzo/composer": ">=0.2.0",
@@ -65,7 +65,7 @@
     "react-dom": ">=19.2.8"
   },
   "devDependencies": {
-    "@hanzo/ai": "0.6.20",
+    "@hanzo/ai": "0.6.23",
     "@hanzo/appearance": "0.2.8",
     "@hanzo/build": "0.2.34",
     "@hanzo/composer": "0.2.0",