@theoremjs/react 0.3.4-next.851.g9ebce61 → 0.3.4-next.853.gebc3c60

package/README.md

@@ -479,6 +479,8 @@ function MyChat() {
 
 To show the transcript and the composer, use `ChatTranscript` and `ChatComposerBar` from `/ui`. You can also draw your own from `chat.blocks`.
 
+The composer bar has a selector for the model, its effort, and each option. When their values do not fit the bar, each selector shows only its icon, and a tooltip gives its name and value. When the icons do not fit either, the row scrolls inside the composer. A control you pass as `generationSelect` keeps its own look and scrolls with the row.
+
 `ChatTranscript` places `citation` blocks after the answer text by default (the Sources strip under the prose). Pass `bodyKindPlacement={{}}` when citations must stay in stream order between text segments (inline citations).
 
 The hooks and the client write no English text. They return kinds, codes, and states. You write the words.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.851.g9ebce61",
+  "version": "0.3.4-next.853.gebc3c60",
   "description": "React bindings for Theorem: headless hooks + transport, an Astryx chat UI, and a Web-standard server handler.",
   "license": "MIT",
   "type": "module",
@@ -60,8 +60,8 @@
     "@stylexjs/stylex": "0.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@theoremjs/agents": "^0.3.4-next.851.g9ebce61",
-    "@theoremjs/web": "^0.3.4-next.851.g9ebce61"
+    "@theoremjs/agents": "^0.3.4-next.853.gebc3c60",
+    "@theoremjs/web": "^0.3.4-next.853.gebc3c60"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ChatComposerBar.js

@@ -5,7 +5,6 @@ import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
 import { HStack } from '@astryxdesign/core/HStack';
 import { IconButton } from '@astryxdesign/core/IconButton';
 import { Kbd } from '@astryxdesign/core/Kbd';
-import { Selector } from '@astryxdesign/core/Selector';
 import { StackItem } from '@astryxdesign/core/Stack';
 import { Text } from '@astryxdesign/core/Text';
 import { Thumbnail } from '@astryxdesign/core/Thumbnail';
@@ -20,6 +19,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { stageComposerFiles } from "../client/composer-attachments.js";
 import { useComposerVoice } from "../components/use-composer-voice.js";
 import { useEditorSelection } from "../components/use-editor-selection.js";
+import { ComposerControls, ComposerSelector } from "./ComposerControls.js";
 import { composerDrawerLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 import { VoiceNote } from "./VoiceNote.js";
@@ -78,7 +78,7 @@ export function generationOptions(iface, selectedModel) {
 function ModelSelector(props) {
     if (props.models.length === 0)
         return null;
-    return (_jsx(Selector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconInputAi, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.models.map((m) => ({
+    return (_jsx(ComposerSelector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconInputAi, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.models.map((m) => ({
             value: m.id,
             label: m.id,
             description: m.label !== m.id ? m.label : undefined,
@@ -87,7 +87,7 @@ function ModelSelector(props) {
 function EffortSelector(props) {
     if (props.efforts.length === 0)
         return null;
-    return (_jsx(Selector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(EFFORT_ICON, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.efforts.map((e) => ({ value: e.alias, label: e.alias, description: e.level })), onChange: props.onChange }));
+    return (_jsx(ComposerSelector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(EFFORT_ICON, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.efforts.map((e) => ({ value: e.alias, label: e.alias, description: e.level })), onChange: props.onChange }));
 }
 function OptionSelectors(props) {
     if (!props.choices)
@@ -103,17 +103,25 @@ function OptionSelectors(props) {
             label: choice.value,
             description: choice.description,
         }));
-        return (_jsx(Selector, { label: title, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconAdjustmentsHorizontal, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: values[name] ?? '', options: [{ type: 'section', title, options: choices }], onChange: (value) => onChange(name, value) }, name));
+        return (_jsx(ComposerSelector, { label: title, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconAdjustmentsHorizontal, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: values[name] ?? '', options: [{ type: 'section', title, options: choices }], onChange: (value) => onChange(name, value) }, name));
     });
 }
 function GenerationSelect(props) {
     const { models, efforts } = generationOptions(props.iface, props.selectedModel);
     const optionCount = Object.keys(props.optionChoices?.declared ?? {}).length;
+    // invariant: What the controls show; when it changes they unfold and measure again.
+    const fit = JSON.stringify([
+        props.control
+            ? null
+            : [models.length, efforts.length, props.selectedModel, props.selectedEffort],
+        props.optionChoices?.values,
+        optionCount,
+    ]);
     if (props.control)
-        return (_jsxs(HStack, { gap: 1, children: [props.control, _jsx(OptionSelectors, { choices: props.optionChoices, isDisabled: props.isDisabled })] }));
+        return (_jsxs(ComposerControls, { fit: fit, children: [props.control, _jsx(OptionSelectors, { choices: props.optionChoices, isDisabled: props.isDisabled })] }));
     if (models.length + efforts.length + optionCount === 0)
         return null;
-    return (_jsxs(HStack, { gap: 1, children: [_jsx(ModelSelector, { label: labelText('composer.model', {}, props.iface.labels), models: models, value: props.selectedModel, isDisabled: props.isDisabled, onChange: (modelId) => props.onChange?.({ modelId }) }), _jsx(EffortSelector, { label: labelText('composer.effort', {}, props.iface.labels), efforts: efforts, value: props.selectedEffort, isDisabled: props.isDisabled, onChange: (effort) => {
+    return (_jsxs(ComposerControls, { fit: fit, children: [_jsx(ModelSelector, { label: labelText('composer.model', {}, props.iface.labels), models: models, value: props.selectedModel, isDisabled: props.isDisabled, onChange: (modelId) => props.onChange?.({ modelId }) }), _jsx(EffortSelector, { label: labelText('composer.effort', {}, props.iface.labels), efforts: efforts, value: props.selectedEffort, isDisabled: props.isDisabled, onChange: (effort) => {
                     if (props.selectedModel)
                         props.onChange?.({ modelId: props.selectedModel, effort });
                 } }), _jsx(OptionSelectors, { choices: props.optionChoices, isDisabled: props.isDisabled })] }));

package/ui/ComposerControls.d.ts

@@ -0,0 +1,16 @@
+import { type SelectorProps } from '@astryxdesign/core/Selector';
+import { type ReactNode } from 'react';
+/**
+ * The composer's footer controls. Their labels fold to icons, each with its name and value in a
+ * tooltip, when the labels do not fit the row; if the icons do not fit either, the row scrolls.
+ * `fit` names what the controls show: when it changes they unfold and measure again.
+ */
+export declare function ComposerControls(props: {
+    fit: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A footer selector. Folded, it shows only its icon, and a tooltip gives its name and value; the
+ * name stays its accessible label either way.
+ */
+export declare function ComposerSelector(selector: SelectorProps): import("react").JSX.Element;

package/ui/ComposerControls.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HStack } from '@astryxdesign/core/HStack';
+import { Selector } from '@astryxdesign/core/Selector';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
+import { createContext, useContext, useLayoutEffect, useReducer, useRef, useState, } from 'react';
+const CompactContext = createContext(false);
+/** The footer's controls scroll inside their room when even their icons do not fit. */
+const ROW_SCROLL = { minWidth: 0, overflowX: 'auto', scrollbarWidth: 'thin' };
+/**
+ * The room the composer's footer row leaves its controls: the row's content box, less the send
+ * cluster beside them and the gap between.
+ * why: Astryx wraps `footerActions` in a box that cannot shrink below its content, so the
+ * controls take a measured `max-width`, which also caps what they ask of that box.
+ */
+function footerRoom(controls) {
+    const row = controls.parentElement?.parentElement;
+    const send = row?.lastElementChild;
+    if (!row || !(send instanceof HTMLElement) || send === controls.parentElement)
+        return null;
+    const style = getComputedStyle(row);
+    const inner = row.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
+    return Math.max(0, inner - send.offsetWidth - (Number.parseFloat(style.columnGap) || 0));
+}
+/**
+ * The composer's footer controls. Their labels fold to icons, each with its name and value in a
+ * tooltip, when the labels do not fit the row; if the icons do not fit either, the row scrolls.
+ * `fit` names what the controls show: when it changes they unfold and measure again.
+ */
+export function ComposerControls(props) {
+    const ref = useRef(null);
+    const [room, setRoom] = useState(null);
+    // invariant: The width the labels need, measured when they last overflowed; null while they fit.
+    const [needed, setNeeded] = useState(null);
+    const [, remeasure] = useReducer((n) => n + 1, 0);
+    const compact = needed !== null && needed.fit === props.fit && (room ?? 0) < needed.width;
+    useLayoutEffect(() => {
+        const el = ref.current;
+        const row = el?.parentElement?.parentElement;
+        if (!el || !row)
+            return;
+        const observer = new ResizeObserver(remeasure);
+        observer.observe(row);
+        return () => observer.disconnect();
+    }, []);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const next = footerRoom(el);
+        if (next !== room) {
+            setRoom(next);
+            return;
+        }
+        if (!compact && el.scrollWidth > el.clientWidth) {
+            setNeeded({ fit: props.fit, width: el.scrollWidth });
+        }
+    });
+    return (_jsx(CompactContext.Provider, { value: compact, children: _jsx(HStack, { ref: ref, gap: 1, style: room === null ? ROW_SCROLL : { ...ROW_SCROLL, maxWidth: room }, children: props.children }) }));
+}
+const NO_VALUE = () => null;
+/**
+ * A footer selector. Folded, it shows only its icon, and a tooltip gives its name and value; the
+ * name stays its accessible label either way.
+ */
+export function ComposerSelector(selector) {
+    const compact = useContext(CompactContext);
+    const value = selector.value;
+    return (_jsx(StackItem, { size: "static", children: _jsx(Tooltip, { isEnabled: compact, content: value ? `${selector.label}: ${value}` : selector.label, hasHoverIndication: false, children: _jsx(Selector, { ...selector, renderValue: compact ? NO_VALUE : selector.renderValue }) }) }));
+}