@hanzo/rooms 0.1.79 → 0.1.81

package/dist/Chat.js

@@ -63,7 +63,7 @@ import { Share } from "./Share.js";
 import { ConversationMenu, ThreadMore, useThreadList } from "./thread.js";
 import { Schedule } from "./Schedule.js";
 import { keepFile, useAttach, useKeep } from "./keep.js";
-import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, Summary, useDeck, useKey, Suggestions, useCarry, useLanguage, useMind, useSuggestions, usePanel, frames, name as tabName, } from "@hanzo/build";
+import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, Summary, useDeck, useKey, Suggestions, useCarry, useLanguage, useMention, useMind, useSuggestions, usePanel, frames, name as tabName, } from "@hanzo/build";
 import { checkoutUrl } from './lib/pay.js';
 import { Upgrade, useFree } from './Upgrade.js';
 import { enter, LOGIN } from './lib/destination.js';
@@ -1348,6 +1348,79 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
             window.location.assign(dev(slug));
         },
     };
+    // THE COMPOSER'S OPTIONS, held apart so its keys (the `/` and `@` lists' arrows,
+    // Ctrl+U) hook in through `useMention` before the frame is drawn.
+    const composing = {
+        value: draft,
+        onChange: setDraft,
+        onSend: submit,
+        onStop: chat.stop,
+        busy: chat.streaming,
+        // Files alone are a message: what is held goes with an empty draft too.
+        ready: Boolean(draft.trim() || files.length),
+        // `label` keeps the accessible name constant; the placeholder is the composer's own.
+        label: ASK,
+        note: caution(),
+        // A phone's pill is the tall one: the field across the top, the controls under it.
+        narrow: !media.sm,
+        // In the app's frame the composer floats on the pane as a pane of its own.
+        framed,
+        // A file or an image pasted into the field is held like a picked one;
+        // words paste as words.
+        field: {
+            onPaste: (e) => {
+                if (!e.clipboardData?.files?.length)
+                    return;
+                e.preventDefault();
+                void hold(at, Array.from(e.clipboardData.files), via);
+            },
+        },
+        // WHAT GOES WITH THE MESSAGE, above the frame and at its width: the
+        // pause and its ways past, one chip a file, and talk mode's words.
+        head: files.length || turnedAway || prepWrong || preparing || talk.open || talk.refusal || pause ? (_jsxs(_Fragment, { children: [banner ? (_jsx(LimitedBanner, { message: banner.message, actions: banner.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), onSave: anonymous ? undefined : (url, id) => keepOne(url, id, one.name, one.type) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway || prepWrong ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway || prepWrong })) : 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}`
+                            : talk.state === "listening"
+                                ? "Listening — speak, and Hanzo answers aloud."
+                                : "Connecting…" })) : null] })) : undefined,
+        // THE `+`: files (the Sources tab's "Attach files", one press closer),
+        // who is in the conversation, the skills, and the two switches.
+        plus: anonymous
+            ? { upload: () => take(at, via) }
+            : {
+                upload: () => take(at, via),
+                agents: agentShelf,
+                skills: carry.skills,
+                plugins: carry.plugins,
+                research: { on: carry.gear.gear.research, set: (on) => carry.gear.set({ research: on }) },
+                memory: { on: carry.gear.gear.memory, set: (on) => carry.gear.set({ memory: on }) },
+            },
+        // Who is in the room, then what the conversation carries, as chips after `+`.
+        on: [
+            ...room.map((name) => ({
+                id: `agent:${name}`,
+                label: name,
+                icon: _jsx(Face, { src: faces[name]?.avatar, emoji: faces[name]?.emoji, name: name, size: 16 }),
+                onRemove: () => seat(room.filter((one) => one !== name)),
+            })),
+            ...(anonymous ? [] : carry.on),
+        ],
+        slash: anonymous ? undefined : carry.skills,
+        at: anonymous ? undefined : carry.plugins,
+        mode: anonymous ? null : { value: carry.gear.gear.mode, set: (m) => carry.gear.set({ mode: m }) },
+        // The model, the effort and the mode under the frame (@hanzo/build).
+        mind,
+        limits,
+        onUpgrade: (id) => setAsk({ model: nameOf(id, listed) }),
+        voice,
+        language: spoken,
+        onLanguage: speakIn,
+        talk,
+        // While nothing has been said: what is worth doing next.
+        below: said.length === 0 && !anonymous ? _jsx(Suggestions, { rows: hints.rows, onPick: setDraft, onDismiss: hints.dismiss }) : undefined,
+    };
+    const mention = useMention(composing);
     return (_jsxs(YStack, { flex: 1, minH: 0, width: "100%", position: "relative", "data-slot": "chat-room", 
         // A LINK IN AN ANSWER OPENS IN A TAB beside the conversation when the tab
         // can show it — a site or preview we host — and in a browser tab of its
@@ -1457,76 +1530,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                 empty: heading === null ? undefined : (_jsxs(YStack, { "data-slot": "opening", items: "center", width: "100%", py: "$6", ...(media.sm ? null : { flex: 1, justify: "center" }), children: [room.length > 1 ? (_jsx(XStack, { items: "center", justify: "center", mb: "$4", children: room.map((name, i) => (_jsx(Box, { ml: i ? -16 : 0, rounded: 40, borderWidth: 2, borderColor: "$background", z: room.length - i, children: _jsx(Face, { src: faces[name]?.avatar, emoji: faces[name]?.emoji, name: name, size: 72 }) }, name))) })) : portrait ? (_jsx(Box, { width: 160, height: 160, rounded: 24, overflow: "hidden", borderWidth: 2, borderColor: "var(--white-15)", boxShadow: "0 10px 24px color-mix(in srgb, var(--pure-black) 70%, transparent)", mb: "$4", bg: "var(--neutral-900)", children: _jsx(View, { render: _jsx("img", { src: portrait, alt: withWhom }), width: "100%", height: "100%", objectFit: "cover" }) })) : null, room.length === 1 && !portrait ? (_jsx(Box, { mb: "$3", children: _jsx(Face, { emoji: mate?.emoji ?? persona?.emoji, name: withWhom, size: 72 }) })) : null, _jsx(Text, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", text: "center", mb: "$1", children: join(room) || heading || "What can I help with?" }), room.length === 1 && (mate?.description ?? persona?.description) ? (_jsx(Text, { fontSize: "$3", color: "$soft", text: "center", maxW: 500, mb: "$4", lineHeight: "$4", children: mate?.description ?? persona?.description })) : null] })), 
                 // The transcript reads at the same measure. `Thread` defaults to 768
                 // itself; handing it the column here is what lets Width reach it.
-                column: { maxW: MEASURE }, composer: prompt({
-                    value: draft,
-                    onChange: setDraft,
-                    onSend: submit,
-                    onStop: chat.stop,
-                    busy: chat.streaming,
-                    // Files alone are a message: what is held goes with an empty draft too.
-                    ready: Boolean(draft.trim() || files.length),
-                    // `label` keeps the accessible name constant; the placeholder is the composer's own.
-                    label: ASK,
-                    note: caution(),
-                    // A phone's pill is the tall one: the field across the top, the controls under it.
-                    narrow: !media.sm,
-                    // In the app's frame the composer floats on the pane as a pane of its own.
-                    framed,
-                    // A file or an image pasted into the field is held like a picked one;
-                    // words paste as words.
-                    field: {
-                        onPaste: (e) => {
-                            if (!e.clipboardData?.files?.length)
-                                return;
-                            e.preventDefault();
-                            void hold(at, Array.from(e.clipboardData.files), via);
-                        },
-                    },
-                    // WHAT GOES WITH THE MESSAGE, above the frame and at its width: the
-                    // pause and its ways past, one chip a file, and talk mode's words.
-                    head: files.length || turnedAway || prepWrong || preparing || talk.open || talk.refusal || pause ? (_jsxs(_Fragment, { children: [banner ? (_jsx(LimitedBanner, { message: banner.message, actions: banner.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), onSave: anonymous ? undefined : (url, id) => keepOne(url, id, one.name, one.type) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway || prepWrong ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway || prepWrong })) : 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}`
-                                        : talk.state === "listening"
-                                            ? "Listening — speak, and Hanzo answers aloud."
-                                            : "Connecting…" })) : null] })) : undefined,
-                    // THE `+`: files (the Sources tab's "Attach files", one press closer),
-                    // who is in the conversation, the skills, and the two switches.
-                    plus: anonymous
-                        ? { upload: () => take(at, via) }
-                        : {
-                            upload: () => take(at, via),
-                            agents: agentShelf,
-                            skills: carry.skills,
-                            plugins: carry.plugins,
-                            research: { on: carry.gear.gear.research, set: (on) => carry.gear.set({ research: on }) },
-                            memory: { on: carry.gear.gear.memory, set: (on) => carry.gear.set({ memory: on }) },
-                        },
-                    // Who is in the room, then what the conversation carries, as chips after `+`.
-                    on: [
-                        ...room.map((name) => ({
-                            id: `agent:${name}`,
-                            label: name,
-                            icon: _jsx(Face, { src: faces[name]?.avatar, emoji: faces[name]?.emoji, name: name, size: 16 }),
-                            onRemove: () => seat(room.filter((one) => one !== name)),
-                        })),
-                        ...(anonymous ? [] : carry.on),
-                    ],
-                    slash: anonymous ? undefined : carry.skills,
-                    at: anonymous ? undefined : carry.plugins,
-                    mode: anonymous ? null : { value: carry.gear.gear.mode, set: (m) => carry.gear.set({ mode: m }) },
-                    // The model, the effort and the mode under the frame (@hanzo/build).
-                    mind,
-                    limits,
-                    onUpgrade: (id) => setAsk({ model: nameOf(id, listed) }),
-                    voice,
-                    language: spoken,
-                    onLanguage: speakIn,
-                    talk,
-                    // While nothing has been said: what is worth doing next.
-                    below: said.length === 0 && !anonymous ? _jsx(Suggestions, { rows: hints.rows, onPick: setDraft, onDismiss: hints.dismiss }) : undefined,
-                }) }), _jsx(AgentMaker, {}), carry.dialog, isFree(model) ? (_jsx(XStack, { items: "center", justify: "center", py: "$1", px: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", children: _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Free chat is data-shared to train models. ", _jsx(Anchor, { href: site("/privacy"), fontSize: "$1", color: "$ink", children: "Privacy" })] }) })) : null, consent, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
+                column: { maxW: MEASURE }, composer: prompt({ ...composing, field: mention.field }, mention.state) }), _jsx(AgentMaker, {}), carry.dialog, isFree(model) ? (_jsx(XStack, { items: "center", justify: "center", py: "$1", px: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", children: _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Free chat is data-shared to train models. ", _jsx(Anchor, { href: site("/privacy"), fontSize: "$1", color: "$ink", children: "Privacy" })] }) })) : null, consent, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
 }
 /** The agreement free asks for, in @hanzo/ai's words so every surface says one thing. */
 function Consent({ question, onAgree, onCancel, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.79",
+  "version": "0.1.81",
   "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",
@@ -49,7 +49,7 @@
   "peerDependencies": {
     "@hanzo/ai": ">=0.6.23",
     "@hanzo/appearance": ">=0.2.6",
-    "@hanzo/build": ">=0.2.66",
+    "@hanzo/build": ">=0.2.68",
     "@hanzo/composer": ">=0.2.0",
     "@hanzo/event": ">=0.3.56",
     "@hanzo/gui": "^8.3.5",
@@ -67,7 +67,7 @@
   "devDependencies": {
     "@hanzo/ai": "0.6.23",
     "@hanzo/appearance": "0.2.8",
-    "@hanzo/build": "0.2.66",
+    "@hanzo/build": "0.2.68",
     "@hanzo/composer": "0.2.0",
     "@hanzo/design": "0.5.34",
     "@hanzo/event": "0.3.56",