@hanzo/build 0.2.80 → 0.2.82

package/lib/prompt.js

@@ -17,8 +17,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * composer through `Chat` (its `composer` prop) and one that draws it directly
  * (`<Prompt>`) draw the same thing. The frame is as wide as the text above it
  * (`measure`).
+ *
+ * Its words are the reader's language (@hanzo/i18n): the components here ask
+ * `useI18n` themselves, and `prompt`, which is not a component, takes `t` from
+ * `useMention`'s state, English without one. Model names, a host's own words
+ * (its placeholder, a shelf's rows and links) and what a person typed are
+ * drawn as given.
  */
 import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { ArrowUp, AudioLines, Check, Square, X } from '@hanzogui/lucide-icons-2';
 import { Control } from '@hanzo/composer';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSearch, DropdownMenuTrigger, Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui';
@@ -31,6 +39,7 @@ import { MODES } from './gear.js';
 import { Dictation } from './mic.js';
 import { EFFORTS, grants, nameOf, reasons, ROUTER_IDS } from './mind.js';
 import { Plus } from './plus.js';
+import { english } from './say.js';
 /** The reading measure: @hanzo/design's prose width, which Width (appearance) retunes. */
 export const MEASURE = 'var(--container-prose, 48rem)';
 /** The space between turns, px: one rhythm for Chat and Dev. */
@@ -50,7 +59,7 @@ const QUIET = { bg: 'transparent', color: 'var(--foreground)', hoverStyle: { bg:
 /** The model rows the menu draws before anything is typed. */
 const SHOWN = 40;
 /** What every Composer placeholder says, unless a surface names who is listening. */
-export const ASK = 'Type / for skills';
+export const ASK = phrase('Type / for skills');
 /**
  * The frame as a pane of its own, floating on the pane it is drawn in: the
  * `--pane-*` cut on design's first paper rung.
@@ -71,9 +80,10 @@ export function useEar(t) {
 function Word({ children, dim = false, label, open }) {
     return (_jsx(XStack, { render: "button", "aria-label": label, "aria-expanded": open, items: "center", height: 24, px: 6, rounded: 6, cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { height: 44, px: 8 }, children: _jsx(SizableText, { fontSize: 14, fontWeight: dim ? '400' : '500', color: dim ? '$hint' : '$ink', numberOfLines: 1, children: children }) }));
 }
-/** A titled list of choices, each with a line saying what it does and a check on the one in force. */
+/** A titled list of choices, each with a line saying what it does and a check on the one in force. The items' words are marked (`phrase`); the title comes translated. */
 function Choices({ title, items, value, onPick, }) {
-    return (_jsxs(YStack, { role: "listbox", "aria-label": title, gap: 2, "data-slot": "choices", children: [_jsx(SizableText, { fontSize: 13, color: "$hint", px: 10, pt: 6, pb: 4, children: title }), items.map((c) => (_jsxs(XStack, { render: "button", role: "option", "aria-selected": c.id === value, "aria-disabled": c.off || undefined, onPress: () => !c.off && onPick(c.id), items: "flex-start", gap: 12, px: 10, py: 8, rounded: 8, width: "100%", cursor: c.off ? 'default' : 'pointer', opacity: c.off ? 0.5 : 1, hoverStyle: c.off ? undefined : { bg: '$hover' }, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", gap: 2, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", style: { textAlign: 'left' }, children: c.label }), _jsx(SizableText, { fontSize: 13, color: "$hint", style: { textAlign: 'left' }, children: c.note })] }), c.id === value ? _jsx(Check, { size: 16, color: "var(--primary)", mt: 2, "aria-hidden": true }) : null] }, c.id)))] }));
+    const { t } = useI18n();
+    return (_jsxs(YStack, { role: "listbox", "aria-label": title, gap: 2, "data-slot": "choices", children: [_jsx(SizableText, { fontSize: 13, color: "$hint", px: 10, pt: 6, pb: 4, children: title }), items.map((c) => (_jsxs(XStack, { render: "button", role: "option", "aria-selected": c.id === value, "aria-disabled": c.off || undefined, onPress: () => !c.off && onPick(c.id), items: "flex-start", gap: 12, px: 10, py: 8, rounded: 8, width: "100%", cursor: c.off ? 'default' : 'pointer', opacity: c.off ? 0.5 : 1, hoverStyle: c.off ? undefined : { bg: '$hover' }, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", gap: 2, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", text: "start", children: t(c.label) }), _jsx(SizableText, { fontSize: 13, color: "$hint", text: "start", children: t(c.note) })] }), c.id === value ? _jsx(Check, { size: 16, color: "var(--primary)", mt: 2, "aria-hidden": true }) : null] }, c.id)))] }));
 }
 /** A word in the row that opens a panel of choices. */
 function Opens({ label, word, dim, children }) {
@@ -82,6 +92,7 @@ function Opens({ label, word, dim, children }) {
 }
 /** The model's name, and the catalog behind it: Free's lane to pick from, the rest an upgrade. */
 function Model({ mind, onUpgrade, limits }) {
+    const { t } = useI18n();
     const [open, setOpen] = useState(false);
     const [q, setQ] = useState('');
     // The catalog is hundreds long, and drawing all of it is what made the menu slow
@@ -101,33 +112,39 @@ function Model({ mind, onUpgrade, limits }) {
         return { groups: cut, more: list.length - cut.reduce((n, g) => n + g.models.length, 0) };
     }, [mind.models, q]);
     const routed = mind.model === ENSO;
-    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, placement: "top-end", children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { "data-slot": "mind", children: _jsx(Word, { label: `Model: ${nameOf(mind.model, mind.models)}`, open: open, children: nameOf(mind.model, mind.models) }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 280, "data-slot": "model-menu", children: [_jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: "Search models" }), _jsxs(YStack, { maxH: "min(420px, 60vh)", overflowY: "auto", overflowX: "hidden", "data-slot": "model-rows", children: [!mind.free && !q.trim() ? (_jsx(DropdownMenuItem, { onSelect: () => mind.pick(ENSO), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsxs(YStack, { flex: 1, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", children: "Enso" }), _jsx(SizableText, { fontSize: 12, color: "$hint", children: "Picks the model for each message and step" })] }), routed ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) })) : null, groups.map((g) => (_jsxs(YStack, { role: "group", "aria-label": g.label, children: [_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, pt: 8, pb: 2, children: g.label }), g.models.map((m) => {
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, placement: "top-end", children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { "data-slot": "mind", children: _jsx(Word, { label: t('Model: {name}', { name: nameOf(mind.model, mind.models) }), open: open, children: nameOf(mind.model, mind.models) }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 280, "data-slot": "model-menu", children: [_jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: t('Search models') }), _jsxs(YStack, { maxH: "min(420px, 60vh)", overflowY: "auto", overflowX: "hidden", "data-slot": "model-rows", children: [!mind.free && !q.trim() ? (_jsx(DropdownMenuItem, { onSelect: () => mind.pick(ENSO), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsxs(YStack, { flex: 1, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", children: "Enso" }), _jsx(SizableText, { fontSize: 12, color: "$hint", children: t('Picks the model for each message and step') })] }), routed ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) })) : null, groups.map((g) => (_jsxs(YStack, { role: "group", "aria-label": g.label, children: [_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, pt: 8, pb: 2, children: g.label }), g.models.map((m) => {
                                         const ok = grants(mind.free, m.id, mind.models);
                                         // Paused by the plan's usage: still listed and still picked; the gateway answers from Enso.
                                         const paused = isPaused(m, limits);
-                                        return (_jsx(DropdownMenuItem, { "data-slot": "model-row", "data-model": m.id, "data-paused": paused ? 'true' : undefined, onSelect: () => (ok ? mind.pick(m.id) : onUpgrade?.(m.id)), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: ok ? '$ink' : '$hint', numberOfLines: 1, flex: 1, children: nameOf(m.id, mind.models) }), ok ? null : (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 6, py: 1, rounded: 6, borderWidth: 1, borderColor: "$borderColor", children: "Upgrade" })), ok && paused ? (_jsx(SizableText, { fontSize: 12, color: "$hint", children: "Paused" })) : null, m.id === mind.model ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, m.id));
-                                    })] }, g.key))), more > 0 ? (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, py: 8, children: `Type to search ${more} more models` })) : null] })] })] }));
+                                        return (_jsx(DropdownMenuItem, { "data-slot": "model-row", "data-model": m.id, "data-paused": paused ? 'true' : undefined, onSelect: () => (ok ? mind.pick(m.id) : onUpgrade?.(m.id)), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: ok ? '$ink' : '$hint', numberOfLines: 1, flex: 1, children: nameOf(m.id, mind.models) }), ok ? null : (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 6, py: 1, rounded: 6, borderWidth: 1, borderColor: "$borderColor", children: t('Upgrade') })), ok && paused ? (_jsx(SizableText, { fontSize: 12, color: "$hint", children: t('Paused') })) : null, m.id === mind.model ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, m.id));
+                                    })] }, g.key))), more > 0 ? (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, py: 8, children: t('Type to search {count} more models', { count: more }) })) : null] })] })] }));
 }
 /** The row under the frame: where (Dev), then the model, the effort and the mode. */
 export function Tune({ mind, mode, where, onUpgrade, limits }) {
+    const { t } = useI18n();
     const thinks = mind ? reasons(mind.model, mind.models) : false;
     const pace = mind ? EFFORTS.find((e) => e.id === mind.effort) : null;
-    return (_jsxs(XStack, { "data-slot": "tune", width: "100%", items: "center", gap: 2, flexWrap: "wrap", rowGap: 4, children: [where ? (_jsx(XStack, { items: "center", gap: 2, flexWrap: "wrap", minW: 0, "$max-sm": { width: '100%' }, children: where })) : null, _jsx(XStack, { flex: 1, "$max-sm": { display: 'none' } }), _jsxs(XStack, { items: "center", gap: 2, ml: "auto", shrink: 0, children: [mind ? _jsx(Model, { mind: mind, onUpgrade: onUpgrade, limits: limits }) : null, mind && thinks && pace ? (_jsx(Opens, { label: `Effort: ${pace.label}`, word: pace.label, dim: true, children: (close) => (_jsx(Choices, { title: "Effort", items: EFFORTS, value: mind.effort, onPick: (e) => {
+    const now = mode ? MODES.find((m) => m.id === mode.value) : undefined;
+    const way = now ? t(now.label) : '';
+    return (_jsxs(XStack, { "data-slot": "tune", width: "100%", items: "center", gap: 2, flexWrap: "wrap", rowGap: 4, children: [where ? (_jsx(XStack, { items: "center", gap: 2, flexWrap: "wrap", minW: 0, "$max-sm": { width: '100%' }, children: where })) : null, _jsx(XStack, { flex: 1, "$max-sm": { display: 'none' } }), _jsxs(XStack, { items: "center", gap: 2, marginInlineStart: "auto", shrink: 0, children: [mind ? _jsx(Model, { mind: mind, onUpgrade: onUpgrade, limits: limits }) : null, mind && thinks && pace ? (_jsx(Opens, { label: t('Effort: {level}', { level: t(pace.label) }), word: t(pace.label), dim: true, children: (close) => (_jsx(Choices, { title: t('Effort'), items: EFFORTS, value: mind.effort, onPick: (e) => {
                                 mind.pace(e);
                                 close();
-                            } })) })) : null, mode ? (_jsxs(Popover, { allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "data-slot": "mode", "aria-label": `Mode: ${MODES.find((m) => m.id === mode.value)?.label}`, items: "center", height: 24, px: 8, ml: 4, rounded: 6, bg: "$hover", cursor: "pointer", hoverStyle: { bg: '$raised' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { height: 44, px: 12 }, children: _jsx(SizableText, { fontSize: 14, color: "$ink", children: MODES.find((m) => m.id === mode.value)?.label }) }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: _jsx(Choices, { title: "Mode", items: mode.items ? MODES.filter((m) => mode.items.includes(m.id)) : MODES, value: mode.value, onPick: mode.set }) })] })) : null] })] }));
+                            } })) })) : null, mode ? (_jsxs(Popover, { allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "data-slot": "mode", "aria-label": t('Mode: {mode}', { mode: way }), items: "center", height: 24, px: 8, marginInlineStart: 4, rounded: 6, bg: "$hover", cursor: "pointer", hoverStyle: { bg: '$raised' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { height: 44, px: 12 }, children: _jsx(SizableText, { fontSize: 14, color: "$ink", children: way }) }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: _jsx(Choices, { title: t('Mode'), items: mode.items ? MODES.filter((m) => mode.items.includes(m.id)) : MODES, value: mode.value, onPick: mode.set }) })] })) : null] })] }));
 }
 /** The `/` or `@` the caret ends on, and the words typed after it. */
 export function trigger(value) {
     const m = /(^|\s)([/@])([^\s/@]*)$/.exec(value);
     return m ? { char: m[2], query: m[3].toLowerCase(), at: m.index + m[1].length } : null;
 }
-/** The list `/` or `@` opens above the frame. */
-function Mention({ shelf, rows, index, onPick, tag, name }) {
-    return (_jsxs(YStack, { role: "listbox", "aria-label": name, "data-slot": "mention", width: "100%", maxH: 240, overflowY: "auto", overflowX: "hidden", p: 6, rounded: CORNER, borderWidth: 1, borderColor: "$borderColor", bg: "$background", "$max-sm": { rounded: CORNER_PHONE }, children: [_jsx(SizableText, { fontSize: 13, color: "$hint", px: 8, pt: 4, pb: 6, children: shelf.search ?? `Type to search ${name.toLowerCase()}` }), rows.length ? (rows.map((r, i) => (_jsxs(XStack, { render: "button", role: "option", "aria-selected": i === index, onPress: () => onPick(r.id), items: "center", gap: 10, px: 8, height: 36, rounded: 8, bg: i === index ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", "$max-sm": { height: 46 }, children: [r.icon ? (_jsx(XStack, { width: 16, items: "center", justify: "center", "aria-hidden": true, children: r.icon })) : null, _jsx(SizableText, { fontSize: 15, color: "$ink", numberOfLines: 1, flex: 1, style: { textAlign: 'left' }, children: r.label }), _jsx(SizableText, { fontSize: 13, color: "$hint", children: r.on ? 'On' : tag })] }, r.id)))) : (_jsx(SizableText, { fontSize: 14, color: "$hint", px: 8, py: 8, children: shelf.loading ? 'Reading…' : 'Nothing matches' }))] }));
+/** The list `/` (the skills) or `@` (the plugins) opens above the frame. */
+function Mention({ shelf, rows, index, onPick, skills }) {
+    const { t } = useI18n();
+    const tag = t(skills ? 'Skill' : 'Plugin');
+    return (_jsxs(YStack, { role: "listbox", "aria-label": t(skills ? 'Skills' : 'Plugins'), "data-slot": "mention", width: "100%", maxH: 240, overflowY: "auto", overflowX: "hidden", p: 6, rounded: CORNER, borderWidth: 1, borderColor: "$borderColor", bg: "$background", "$max-sm": { rounded: CORNER_PHONE }, children: [_jsx(SizableText, { fontSize: 13, color: "$hint", px: 8, pt: 4, pb: 6, children: shelf.search ?? t(skills ? 'Type to search skills' : 'Type to search plugins') }), rows.length ? (rows.map((r, i) => (_jsxs(XStack, { render: "button", role: "option", "aria-selected": i === index, onPress: () => onPick(r.id), items: "center", gap: 10, px: 8, height: 36, rounded: 8, bg: i === index ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", "$max-sm": { height: 46 }, children: [r.icon ? (_jsx(XStack, { width: 16, items: "center", justify: "center", "aria-hidden": true, children: r.icon })) : null, _jsx(SizableText, { fontSize: 15, color: "$ink", numberOfLines: 1, flex: 1, text: "start", children: r.label }), _jsx(SizableText, { fontSize: 13, color: "$hint", children: r.on ? t('On') : tag })] }, r.id)))) : (_jsx(SizableText, { fontSize: 14, color: "$hint", px: 8, py: 8, children: t(shelf.loading ? 'Reading…' : 'Nothing matches') }))] }));
 }
 /** @hanzo/ui `Composer` props for the one composer. */
 export function prompt(o, state) {
+    const t = state?.t ?? english;
     const lit = o.ready ?? Boolean(o.value.trim());
     const busy = Boolean(o.busy);
     const disabled = Boolean(o.disabled);
@@ -144,10 +161,10 @@ export function prompt(o, state) {
         o.onChange(o.value.slice(0, typed.at).trimEnd() + (typed.at > 0 ? ' ' : ''));
         shelf.pick(id);
     };
-    const mention = listed && shelf && typed ? (_jsx(Mention, { shelf: shelf, rows: listed, index: index, onPick: choose, tag: typed.char === '/' ? 'Skill' : 'Plugin', name: typed.char === '/' ? 'Skills' : 'Plugins' })) : null;
+    const mention = listed && shelf && typed ? (_jsx(Mention, { shelf: shelf, rows: listed, index: index, onPick: choose, skills: typed.char === '/' })) : null;
     const head = o.head || o.note || mention || (narrow && o.below) ? (_jsxs(YStack, { ...measure, gap: "$1.5", "data-slot": "prompt-head", children: [narrow ? o.below : null, o.head, mention, o.note ? (_jsx(SizableText, { "data-slot": "prompt-note", fontSize: 12, color: "$soft", text: "center", self: "center", children: o.note })) : null] })) : undefined;
     const foot = o.mind || o.mode || o.where || (!narrow && o.below) ? (_jsxs(YStack, { ...measure, gap: 10, "data-slot": "prompt-foot", children: [_jsx(Tune, { mind: o.mind, mode: o.mode, where: o.where, onUpgrade: o.onUpgrade, limits: o.limits }), narrow ? null : o.below] })) : undefined;
-    const round = (_jsx(Control, { type: "button", size: narrow ? TAP : ROUND, fill: true, rounded: 999, "data-slot": "composer-send", "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
+    const round = (_jsx(Control, { type: "button", size: narrow ? TAP : ROUND, fill: true, rounded: 999, "data-slot": "composer-send", "aria-label": t(busy ? 'Stop' : 'Send'), "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
             if (!live)
                 return;
             if (busy)
@@ -166,7 +183,7 @@ export function prompt(o, state) {
         ...(o.onStop ? { onStop: o.onStop } : {}),
         busy,
         disabled,
-        placeholder: o.placeholder ?? ASK,
+        placeholder: o.placeholder ?? t(ASK),
         ...(o.label ? { label: o.label } : {}),
         // At rest two rows: one line of text, then the tools. It grows with the text to the kit's ceiling, then scrolls.
         rows: 1,
@@ -191,8 +208,8 @@ export function prompt(o, state) {
         bg: '$edge',
         '$max-sm': { rounded: CORNER_PHONE },
         ...(o.framed ? { boxShadow: 'var(--shadow-sheet-1)' } : null),
-        children: (_jsxs(XStack, { items: "center", gap: 4, "data-slot": "prompt-start", flex: 1, minW: 0, flexWrap: "wrap", children: [o.plus ? _jsx(Plus, { ...o.plus, disabled: disabled || o.plus.disabled }) : null, (o.on ?? []).map((c) => (_jsxs(XStack, { "data-slot": "prompt-chip", items: "center", gap: 6, pl: 8, pr: 4, height: 28, rounded: 8, bg: "$hover", maxW: 180, children: [c.icon ? _jsx(XStack, { "aria-hidden": true, children: c.icon }) : null, _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, shrink: 1, children: c.label }), _jsx(XStack, { render: "button", "aria-label": `Remove ${c.label}`, onPress: c.onRemove, width: 20, height: 20, rounded: 6, items: "center", justify: "center", hoverStyle: { bg: '$raised' }, cursor: "pointer", children: _jsx(X, { size: 12, color: "$hint" }) })] }, c.id)))] })),
-        send: (_jsxs(XStack, { items: "center", gap: 6, "data-slot": "prompt-end", shrink: 0, children: [o.voice ? _jsx(Dictation, { voice: o.voice, disabled: disabled, narrow: narrow, language: o.language ?? null, ...(o.onLanguage ? { onLanguage: o.onLanguage } : {}) }) : null, !busy && !lit && o.talk ? (_jsx(Control, { asChild: true, size: narrow ? TAP : ROUND, fill: narrow, rounded: 999, ...(narrow ? null : QUIET), children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Voice mode', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 16, color: narrow ? ON : 'var(--foreground)' }) }) })) : (round)] })),
+        children: (_jsxs(XStack, { items: "center", gap: 4, "data-slot": "prompt-start", flex: 1, minW: 0, flexWrap: "wrap", children: [o.plus ? _jsx(Plus, { ...o.plus, disabled: disabled || o.plus.disabled }) : null, (o.on ?? []).map((c) => (_jsxs(XStack, { "data-slot": "prompt-chip", items: "center", gap: 6, paddingInlineStart: 8, paddingInlineEnd: 4, height: 28, rounded: 8, bg: "$hover", maxW: 180, children: [c.icon ? _jsx(XStack, { "aria-hidden": true, children: c.icon }) : null, _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, shrink: 1, children: c.label }), _jsx(XStack, { render: "button", "aria-label": t('Remove {name}', { name: c.label }), onPress: c.onRemove, width: 20, height: 20, rounded: 6, items: "center", justify: "center", hoverStyle: { bg: '$raised' }, cursor: "pointer", children: _jsx(X, { size: 12, color: "$hint" }) })] }, c.id)))] })),
+        send: (_jsxs(XStack, { items: "center", gap: 6, "data-slot": "prompt-end", shrink: 0, children: [o.voice ? _jsx(Dictation, { voice: o.voice, disabled: disabled, narrow: narrow, language: o.language ?? null, ...(o.onLanguage ? { onLanguage: o.onLanguage } : {}) }) : null, !busy && !lit && o.talk ? (_jsx(Control, { asChild: true, size: narrow ? TAP : ROUND, fill: narrow, rounded: 999, ...(narrow ? null : QUIET), children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: t('Voice mode'), listening: t('In conversation — click to hang up'), speaking: t('Hanzo is speaking — talk to interrupt') }, children: () => _jsx(AudioLines, { size: 16, color: narrow ? ON : 'var(--foreground)' }) }) })) : (round)] })),
     };
 }
 /** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */
@@ -213,11 +230,12 @@ export function useUpload(upload) {
     }, [Boolean(upload)]); // eslint-disable-line react-hooks/exhaustive-deps
 }
 /**
- * The composer's own state — which row of a `/` or `@` list is lit — and the
- * keys that move it. A surface that hands `prompt` to `Chat` calls this and
- * passes its answer through; `<Prompt>` does it for itself.
+ * The composer's own state — which row of a `/` or `@` list is lit, and the
+ * reader's `t` — and the keys that move it. A surface that hands `prompt` to
+ * `Chat` calls this and passes its answer through; `<Prompt>` does it for itself.
  */
 export function useMention(o) {
+    const { t } = useI18n();
     const [index, setIndex] = useState(0);
     const [closed, setClosed] = useState(null);
     useUpload(o.plus?.upload);
@@ -245,7 +263,7 @@ export function useMention(o) {
                 o.field?.onKeyDown?.(e);
         },
     };
-    return { state: { index, closed }, field };
+    return { state: { index, closed, t }, field };
 }
 /** The composer drawn on its own. */
 export function Prompt(o) {

package/lib/publish.js

@@ -16,9 +16,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * project's address again.
  *
  * Every state shown is one the platform reported; a refusal shows the
- * platform's own sentence.
+ * platform's own sentence. The dialog's own words are the reader's language
+ * (@hanzo/i18n `t`).
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { ExternalLink } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogDescription, DialogTitle, Input } from '@hanzo/ui';
 import { useEffect, useRef, useState } from 'react';
@@ -26,8 +28,9 @@ import { builds, declare, label } from './api/platform.js';
 import { useHost, useTarget } from './host.js';
 import { Out } from './out.js';
 export function Publish({ source, onClose, onLive }) {
-    const t = useTarget();
+    const target = useTarget();
     const host = useHost();
+    const { t } = useI18n();
     const [project, setProject] = useState('');
     const [phase, setPhase] = useState('ask');
     const [out, setOut] = useState(null);
@@ -50,7 +53,7 @@ export function Publish({ source, onClose, onLive }) {
         let live = true;
         const tick = async () => {
             try {
-                const row = (await builds(t)).find((b) => b.id === id);
+                const row = (await builds(target)).find((b) => b.id === id);
                 if (live && row)
                     setStatus(row.status);
             }
@@ -64,7 +67,7 @@ export function Publish({ source, onClose, onLive }) {
             live = false;
             clearInterval(every);
         };
-    }, [t, out, phase]);
+    }, [target, out, phase]);
     const green = /^(succeeded|success|done|complete|completed|ok)$/i.test(status);
     // A site's build going green is the site going live, at the project's address.
     useEffect(() => {
@@ -77,7 +80,7 @@ export function Publish({ source, onClose, onLive }) {
         setPhase('sending');
         setError('');
         try {
-            const d = await declare(t, { repo: source.repo, ref: source.ref, name: source.name, project: project || source.name, mode: 'branch' });
+            const d = await declare(target, { repo: source.repo, ref: source.ref, name: source.name, project: project || source.name, mode: 'branch' });
             setOut(d);
             setStatus(d.build?.status ?? '');
             setPhase('declared');
@@ -94,7 +97,7 @@ export function Publish({ source, onClose, onLive }) {
         setPhase('shipping');
         setError('');
         try {
-            await declare(t, { repo: source.repo, ref: source.ref, name: source.name, project: project || source.name, mode: 'commit', tag: built });
+            await declare(target, { repo: source.repo, ref: source.ref, name: source.name, project: project || source.name, mode: 'commit', tag: built });
             setPhase('shipped');
         }
         catch (e) {
@@ -102,11 +105,13 @@ export function Publish({ source, onClose, onLive }) {
             setPhase('declared');
         }
     };
-    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && onClose(), children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Add to project" }), _jsx(DialogDescription, { children: out?.live
-                        ? `Build ${source.title} at ${source.ref} and publish it at its project’s address.`
-                        : `Build ${source.title} at ${source.ref} and declare it in a project. ${host.admin ? 'As an admin you can take a green build to main.' : 'It opens a review; merging it is what deploys.'}` }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(SizableText, { render: "label", size: "$2", color: "$soft", htmlFor: "publish-project", children: "Project" }), _jsx(Input, { id: "publish-project", value: project, onChangeText: (v) => setProject(v), disabled: phase !== 'ask' && phase !== 'failed', placeholder: label(source.name), "aria-label": "Project" }), _jsxs(SizableText, { size: "$1", color: "$soft", children: ["Saved as ", label(project || source.name)] })] }), out ? (_jsxs(YStack, { gap: "$2", role: "status", children: [out.notice ? (_jsx(SizableText, { size: "$2", color: "$soft", children: out.notice })) : null, _jsx(SizableText, { size: "$2", color: "$ink", children: phase === 'shipped'
-                                ? 'Declared on main — CD applies it on its next pass.'
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && onClose(), children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: t('Add to project') }), _jsx(DialogDescription, { children: out?.live
+                        ? t('Build {repo} at {ref} and publish it at its project’s address.', { repo: source.title, ref: source.ref })
+                        : `${t('Build {repo} at {ref} and declare it in a project.', { repo: source.title, ref: source.ref })} ${host.admin ? t('As an admin you can take a green build to main.') : t('It opens a review; merging it is what deploys.')}` }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(SizableText, { render: "label", size: "$2", color: "$soft", htmlFor: "publish-project", children: t('Project') }), _jsx(Input, { id: "publish-project", value: project, onChangeText: (v) => setProject(v), disabled: phase !== 'ask' && phase !== 'failed', placeholder: label(source.name), "aria-label": t('Project') }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Saved as {name}', { name: label(project || source.name) }) })] }), out ? (_jsxs(YStack, { gap: "$2", role: "status", children: [out.notice ? (_jsx(SizableText, { size: "$2", color: "$soft", children: out.notice })) : null, _jsx(SizableText, { size: "$2", color: "$ink", children: phase === 'shipped'
+                                ? t('Declared on main — CD applies it on its next pass.')
                                 : out.live && green
-                                    ? `Build ${built} succeeded — it is live at the project’s address.`
-                                    : `Build ${built}: ${status || 'building'}` }), out.review ? (_jsxs(Out, { href: out.review, children: [_jsx(SizableText, { size: "$2", color: "$ink", textDecorationLine: "underline", children: "Open the review" }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] })) : null] })) : null, error ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: error })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { variant: "outline", size: "sm", onPress: onClose, children: phase === 'shipped' || phase === 'declared' ? 'Done' : 'Cancel' }), phase === 'ask' || phase === 'failed' || phase === 'sending' ? (_jsx(Button, { size: "sm", disabled: phase === 'sending', onPress: () => void send(), children: phase === 'sending' ? 'Adding…' : 'Add to project' })) : host.admin && !out?.live && (phase === 'declared' || phase === 'shipping') ? (_jsx(Button, { size: "sm", disabled: !green || phase === 'shipping', onPress: () => void ship(), children: phase === 'shipping' ? 'Shipping…' : green ? 'Ship to main' : 'Waiting for the build' })) : null] })] }) }));
+                                    ? t('Build {id} succeeded — it is live at the project’s address.', { id: built })
+                                    : status
+                                        ? t('Build {id}: {status}', { id: built, status })
+                                        : t('Build {id}: building', { id: built }) }), out.review ? (_jsxs(Out, { href: out.review, children: [_jsx(SizableText, { size: "$2", color: "$ink", textDecorationLine: "underline", children: t('Open the review') }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] })) : null] })) : null, error ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: error })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { variant: "outline", size: "sm", onPress: onClose, children: phase === 'shipped' || phase === 'declared' ? t('Done') : t('Cancel') }), phase === 'ask' || phase === 'failed' || phase === 'sending' ? (_jsx(Button, { size: "sm", disabled: phase === 'sending', onPress: () => void send(), children: phase === 'sending' ? t('Adding…') : t('Add to project') })) : host.admin && !out?.live && (phase === 'declared' || phase === 'shipping') ? (_jsx(Button, { size: "sm", disabled: !green || phase === 'shipping', onPress: () => void ship(), children: phase === 'shipping' ? t('Shipping…') : green ? t('Ship to main') : t('Waiting for the build') })) : null] })] }) }));
 }

package/lib/reply.js

@@ -9,6 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * from its own bytes (`blob`).
  */
 import { SizableText, XStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Check, Copy, PanelRight, Square, Volume2 } from '@hanzogui/lucide-icons-2';
 import { mouth, speech } from '@hanzo/voice';
 import { useEffect, useRef, useState } from 'react';
@@ -97,6 +98,7 @@ function Act({ label, onPress, children, lit = false }) {
 }
 /** Copy, Listen and Open under an answer; `children` follow them. */
 export function Reply({ text, listen, onOpen, children }) {
+    const { t: say } = useI18n();
     const [took, setTook] = useState(false);
     const [speaking, setSpeaking] = useState(false);
     const stop = useRef(null);
@@ -107,7 +109,7 @@ export function Reply({ text, listen, onOpen, children }) {
         return () => clearTimeout(t);
     }, [took]);
     useEffect(() => () => stop.current?.(), []);
-    return (_jsxs(XStack, { "data-slot": "reply", ml: "$-1", items: "center", gap: "$1.5", flexWrap: "wrap", children: [_jsx(Act, { label: took ? 'Copied' : 'Copy this answer', lit: took, onPress: () => void navigator.clipboard?.writeText(text).then(() => setTook(true), () => { }), children: took ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }) }), listen ? (_jsxs(Act, { label: speaking ? 'Stop reading' : 'Listen to this answer', lit: speaking, onPress: () => {
+    return (_jsxs(XStack, { "data-slot": "reply", ml: "$-1", items: "center", gap: "$1.5", flexWrap: "wrap", children: [_jsx(Act, { label: took ? say('Copied') : say('Copy this answer'), lit: took, onPress: () => void navigator.clipboard?.writeText(text).then(() => setTook(true), () => { }), children: took ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }) }), listen ? (_jsxs(Act, { label: speaking ? say('Stop reading') : say('Listen to this answer'), lit: speaking, onPress: () => {
                     if (speaking) {
                         stop.current?.();
                         setSpeaking(false);
@@ -115,9 +117,10 @@ export function Reply({ text, listen, onOpen, children }) {
                     }
                     setSpeaking(true);
                     stop.current = listen(text, () => setSpeaking(false));
-                }, children: [speaking ? _jsx(Square, { size: 12 }) : _jsx(Volume2, { size: 13 }), _jsx(SizableText, { size: "$1", color: "$ink", children: speaking ? 'Stop' : 'Listen' })] })) : null, onOpen ? (_jsxs(Act, { label: "Open in the side panel", onPress: onOpen, children: [_jsx(PanelRight, { size: 13 }), _jsx(SizableText, { size: "$1", color: "$ink", children: "Open" })] })) : null, children] }));
+                }, children: [speaking ? _jsx(Square, { size: 12 }) : _jsx(Volume2, { size: 13 }), _jsx(SizableText, { size: "$1", color: "$ink", children: speaking ? say('Stop') : say('Listen') })] })) : null, onOpen ? (_jsxs(Act, { label: say('Open in the side panel'), onPress: onOpen, children: [_jsx(PanelRight, { size: 13 }), _jsx(SizableText, { size: "$1", color: "$ink", children: say('Open') })] })) : null, children] }));
 }
 /** Which model answered, where the gateway says it was not the one asked for or a router. */
 export function Served({ served, asked }) {
-    return (_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "served", children: `answered by ${served}${asked && asked !== served ? ` · ${asked} was unavailable` : ''}` }));
+    const { t } = useI18n();
+    return (_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "served", children: asked && asked !== served ? t('answered by {model} · {asked} was unavailable', { model: served, asked }) : t('answered by {model}', { model: served }) }));
 }