@hanzo/build 0.2.83 → 0.2.84

package/lib/prompt.js

@@ -1,272 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The composer, once, for Chat and Dev. A frame: the field on top ("Type / for
- * skills"), and under it one row — `+` at the start, what the conversation
- * carries as small chips, then at the end dictation (the mic and its menu) and
- * one round button that is voice mode while the draft is empty, send once it
- * has words, and stop while a turn runs. Nothing else is in the frame.
- *
- * Under the frame, at its end, one quiet row: the model (only where the host
- * shows it), the effort (dim) and the mode as a pill, each opening its choices;
- * Dev puts where the run goes and its repository at the row's start (`where`).
- * Under that, the person's suggestions (`below`; above the frame on a phone).
- *
- * `/` opens the skills and `@` the plugins, in a list just above the frame.
- *
- * `prompt` builds @hanzo/ui's `Composer` props, so a surface that draws the
- * 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';
-import { Composer } from '@hanzo/ui/chat';
-import { groupModels, isPaused, matchesModel } from '@hanzo/ui/models';
-import { speech, Voice } from '@hanzo/voice';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { ENSO } from './api/models.js';
-import { MODES } from './gear.js';
-import { Dictation } from './mic.js';
-import { EFFORTS, grants, nameOf, 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. */
-export const GAP = 20;
-/** The composer's width: the measure less the thread column's 0.75rem gutters, centred, so its edges are the text's. */
-export const measure = { width: 'calc(100% - 1.5rem)', maxW: `calc(${MEASURE} - 1.5rem)`, mx: 'auto' };
-/** The round controls' box, px, and a phone's, a finger's width. */
-export const ROUND = 32;
-const TAP = 44;
-/** The frame's corner, px: 12 on a laptop, 22 on a phone. */
-const CORNER = 12;
-const CORNER_PHONE = 22;
-/** The ink on a filled round: the accent's own foreground (gui's icons default to the theme's text). */
-const ON = 'var(--primary-foreground)';
-/** A round control with no ground of its own until it is pointed at. */
-const QUIET = { bg: 'transparent', color: 'var(--foreground)', hoverStyle: { bg: '$hover' } };
-/** 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 = 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.
- */
-export const cut = {
-    bg: 'var(--pane-fill, var(--sheet-1))',
-    rounded: 'var(--pane-round, var(--radius-xl))',
-    borderWidth: 1,
-    borderColor: 'var(--pane-edge, var(--white-08))',
-    backdropFilter: 'var(--pane-blur, blur(20px) saturate(1.8))',
-    boxShadow: 'var(--shadow-sheet-1)',
-};
-/** The platform's ear and voice for a target: dictation, talk and Listen all hear through it. */
-export function useEar(t) {
-    return useMemo(() => speech({ baseUrl: t.api, token: t.token, ...(t.org ? { org: t.org } : {}) }), [t]);
-}
-/** A text button in the row under the frame. */
-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. The items' words are marked (`phrase`); the title comes translated. */
-function Choices({ title, items, value, onPick, }) {
-    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 }) {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { children: _jsx(Word, { label: label, dim: dim, open: open, children: word }) }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: children(() => setOpen(false)) })] }));
-}
-/** 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
-    // to open: until something is typed, the first `SHOWN` rows, Hanzo's families
-    // first, and a line saying the search reaches the rest.
-    const { groups, more } = useMemo(() => {
-        const list = mind.models.filter((m) => !ROUTER_IDS.has(m.id) && (m.outputs?.includes('text') ?? true) && (!q.trim() || matchesModel(m, q)));
-        const all = groupModels(list);
-        let room = q.trim() ? Infinity : SHOWN;
-        const cut = all
-            .map((g) => {
-            const models = g.models.slice(0, Math.max(0, room));
-            room -= models.length;
-            return { ...g, models };
-        })
-            .filter((g) => g.models.length);
-        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: 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: 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 where the host shows it, the effort and the mode. */
-export function Tune({ model, effort, mode, where, onUpgrade, limits, }) {
-    const { t } = useI18n();
-    const pace = effort ? EFFORTS.find((e) => e.id === effort.effort) : null;
-    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: [model ? _jsx(Model, { mind: model, onUpgrade: onUpgrade, limits: limits }) : null, effort && 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: effort.effort, onPick: (e) => {
-                                effort.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": 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 `/` (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);
-    const live = busy ? Boolean(o.onStop) : lit && !disabled;
-    const narrow = Boolean(o.narrow);
-    // `/` and `@`: the shelf the caret's word opens, filtered by what follows it.
-    const typed = trigger(o.value);
-    const shelf = typed ? (typed.char === '/' ? o.slash : o.at) : undefined;
-    const listed = shelf && typed && state?.closed !== o.value ? shelf.rows.filter((r) => r.label.toLowerCase().includes(typed.query)).slice(0, 8) : null;
-    const index = Math.min(state?.index ?? 0, Math.max(0, (listed?.length ?? 1) - 1));
-    const choose = (id) => {
-        if (!typed || !shelf)
-            return;
-        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, 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.model || o.effort || o.mode || o.where || (!narrow && o.below) ? (_jsxs(YStack, { ...measure, gap: 10, "data-slot": "prompt-foot", children: [_jsx(Tune, { model: o.model, effort: o.effort, 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": t(busy ? 'Stop' : 'Send'), "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
-            if (!live)
-                return;
-            if (busy)
-                o.onStop?.();
-            else
-                o.onSend();
-        }, children: busy ? _jsx(Square, { size: 13, color: ON, fill: ON }) : _jsx(ArrowUp, { size: 16, strokeWidth: 2.5, color: ON }) }));
-    return {
-        value: o.value,
-        onChange: o.onChange,
-        onSend: () => {
-            if (listed?.length)
-                return choose(listed[index].id);
-            o.onSend();
-        },
-        ...(o.onStop ? { onStop: o.onStop } : {}),
-        busy,
-        disabled,
-        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,
-        field: {
-            ...o.field,
-            fontSize: 16,
-            lineHeight: 24,
-            px: 8,
-            pt: 2,
-            pb: 0,
-            minH: 26,
-            bg: 'transparent',
-        },
-        head,
-        foot,
-        ...measure,
-        rounded: CORNER,
-        p: 8,
-        pt: 12,
-        gap: 6,
-        borderColor: '$borderColor',
-        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, 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. */
-export function useUpload(upload) {
-    const now = useRef(upload);
-    now.current = upload;
-    useEffect(() => {
-        if (!upload)
-            return;
-        const key = (e) => {
-            if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'u') {
-                e.preventDefault();
-                now.current?.();
-            }
-        };
-        window.addEventListener('keydown', key);
-        return () => window.removeEventListener('keydown', key);
-    }, [Boolean(upload)]); // eslint-disable-line react-hooks/exhaustive-deps
-}
-/**
- * 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);
-    const typed = trigger(o.value);
-    const shelf = typed ? (typed.char === '/' ? o.slash : o.at) : undefined;
-    const open = Boolean(shelf && closed !== o.value);
-    useEffect(() => setIndex(0), [typed?.char, typed?.query]);
-    const field = {
-        ...o.field,
-        onKeyDown: (e) => {
-            const key = e.key ?? e.nativeEvent?.key;
-            if (open && key === 'ArrowDown') {
-                e.preventDefault?.();
-                setIndex((i) => i + 1);
-            }
-            else if (open && key === 'ArrowUp') {
-                e.preventDefault?.();
-                setIndex((i) => Math.max(0, i - 1));
-            }
-            else if (open && key === 'Escape') {
-                e.preventDefault?.();
-                setClosed(o.value);
-            }
-            else
-                o.field?.onKeyDown?.(e);
-        },
-    };
-    return { state: { index, closed, t }, field };
-}
-/** The composer drawn on its own. */
-export function Prompt(o) {
-    const media = useMedia();
-    const { state, field } = useMention(o);
-    return _jsx(Composer, { ...prompt({ ...o, field, narrow: o.narrow ?? !media.sm }, state) });
-}