@theoremjs/react 0.3.4-next.755.g88665bd → 0.3.4-next.759.g46e0e27

package/README.md

@@ -365,11 +365,11 @@ Three more props give the call values from the page. The profile declares each o
 
 | Prop | The profile declares | What the page gives |
 | --- | --- | --- |
-| `slots` | `inputs.slots` | The value chosen for each slot. It is read when the call starts. A value that changes during a call takes the call up again with it when the profile has resumption on; otherwise the next call has it. |
+| `options` | `inputs.options` | The value chosen for each option. It is read when the call starts. A value that changes during a call takes the call up again with it when the profile has resumption on; otherwise the next call has it. |
 | `context` | `inputs.context` with `from: ['client']` | Any JSON the agent should know, such as the page the person is on. |
 | `pageTools` | A function tool with `answeredBy: 'page'` | A function for each page tool, by name. It returns `{ output }`. |
 
-`stated` is a fourth prop, for a page you trust as yourself. It says the `path` and `conditions` that choose the call's prompt lines, and the server reads it only with `pageStatesTurn` set. A change during a call takes the call up again, as a slot does. `TheoremChat` takes the same prop, on each turn.
+`stated` is a fourth prop, for a page you trust as yourself. It says the `path` and the `options` from `identity.options` that choose the call's prompt lines, and the server reads it only with `pageStatesTurn` set. A change during a call takes the call up again, as an option does. `TheoremChat` takes the same prop, on each turn.
 
 `model` and `effort` pick the call's model when the profile sets `allowModelSelect`. They are read when the call starts.
 
@@ -377,7 +377,7 @@ Three more props give the call values from the page. The profile declares each o
 <LiveRunner
   iface={iface}
   connection={() => ({ profile: 'support.voice' })}
-  slots={{ language: 'fr' }}
+  options={{ language: 'fr' }}
   context={{ page: '/pricing', cart }}
   pageTools={{
     highlight: (args) => ({ output: { success: highlight(String(args.target)) } }),
@@ -417,7 +417,7 @@ A failed call does not reconnect. Without `live.sessionResumption`, a provider-e
 
 The relay is server code. To authenticate the conversation and resume a call in your relay, see [Your relay](https://github.com/masudl-hub/theoremai/blob/main/web/README.md#your-relay).
 
-To build your own call view, use `useLiveRunnerModel(iface, connection, { slots, context, pageTools })` from `@theoremjs/react/ui`. It returns the state of the call, its captions, and its controls. `LiveCaptionsPanel` draws the captions.
+To build your own call view, use `useLiveRunnerModel(iface, connection, { options, context, pageTools })` from `@theoremjs/react/ui`. It returns the state of the call, its captions, and its controls. `LiveCaptionsPanel` draws the captions.
 
 ### A custom browser transport
 

package/components/live/use-live-runner-model.d.ts

@@ -5,7 +5,7 @@ import { type LiveCaptionState, type LiveCaptionTurn } from '../../client/live/l
  * Owns LiveRunner state, session client, and stage callbacks.
  * `connection` resolves what the call opens: a host with a fixed profile returns
  * its id; the studio returns its draft as the relay's open message. `options`
- * are the host's part in the call: its slots, its stated turn, the page's context, and its page tools.
+ * are the host's part in the call: its options, its stated turn, the page's context, and its page tools.
  */
 export declare function useLiveRunnerModel(iface: LiveProfileInterface, connection: () => LiveConnection | Promise<LiveConnection>, options?: LiveCallOptions): {
     handle: string;

package/components/live/use-live-runner-model.js

@@ -53,7 +53,7 @@ function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailab
  * Owns LiveRunner state, session client, and stage callbacks.
  * `connection` resolves what the call opens: a host with a fixed profile returns
  * its id; the studio returns its draft as the relay's open message. `options`
- * are the host's part in the call: its slots, its stated turn, the page's context, and its page tools.
+ * are the host's part in the call: its options, its stated turn, the page's context, and its page tools.
  */
 export function useLiveRunnerModel(iface, connection, options = {}) {
     const ui = useLiveRunnerUiState(iface.labels);
@@ -77,7 +77,7 @@ export function useLiveRunnerModel(iface, connection, options = {}) {
     // why: One feed per runner: every session it opens adds its records.
     const traces = useMemo(createTraceFeed, []);
     const { clientRef, ensureClient, clearClient } = useLiveSessionClient({
-        slots: options.slots,
+        options: options.options,
         stated: options.stated,
         model: options.model,
         effort: options.effort,
@@ -146,12 +146,12 @@ export function useLiveRunnerModel(iface, connection, options = {}) {
     useEffect(() => {
         clientRef.current?.setContext(contextJson === undefined ? undefined : JSON.parse(contextJson));
     }, [clientRef, contextJson]);
-    // why: Slots are compared by value too; a changed value takes an open call up again with it.
-    const slotsJson = JSON.stringify(options.slots);
+    // why: Options are compared by value too; a changed value takes an open call up again with it.
+    const optionsJson = JSON.stringify(options.options);
     useEffect(() => {
-        clientRef.current?.setSlots(slotsJson === undefined ? undefined : JSON.parse(slotsJson));
-    }, [clientRef, slotsJson]);
-    // why: As slots: a changed pick takes an open call up again with the lines it chooses.
+        clientRef.current?.setOptions(optionsJson === undefined ? undefined : JSON.parse(optionsJson));
+    }, [clientRef, optionsJson]);
+    // why: As options: a changed pick takes an open call up again with the lines it chooses.
     const statedJson = JSON.stringify(options.stated);
     useEffect(() => {
         clientRef.current?.setStated(statedJson === undefined ? undefined : JSON.parse(statedJson));

package/components/live/use-live-session-client.js

@@ -52,7 +52,7 @@ export function useLiveSessionClient(bindings) {
         const b = bindingsRef.current;
         const client = new LiveSessionClient({
             ...connection,
-            slots: b.slots,
+            options: b.options,
             stated: b.stated,
             model: b.model,
             effort: b.effort,

package/hooks/use-theorem-chat.d.ts

@@ -8,9 +8,9 @@ export type UseTheoremChatOptions = ChatOptions;
  * `@theoremjs/web/client`, which works with no framework.
  */
 export declare function useTheoremChat(options: UseTheoremChatOptions): {
-    slotChoices: {
+    optionChoices: {
         onChange: (name: string, value: string) => void;
-        declared: Record<string, import("@theoremjs/web/client").ChatSlotDecl>;
+        declared: import("../../../mod").ProfileOptions;
         values: Record<string, string>;
     } | undefined;
     setDraftText: (value: import("@theoremjs/web/client").ChatUpdate<string>) => void;
@@ -50,5 +50,5 @@ export declare function useTheoremChat(options: UseTheoremChatOptions): {
     session: import("../../../src/interface/session").InterfaceTurnSession;
     delivery: import("@theoremjs/web/client").MessageDelivery | null;
     streaming: boolean;
-    slots: import("@theoremjs/web/client").ChatSlots | undefined;
+    options: import("@theoremjs/web/client").ChatOptionPicks | undefined;
 };

package/hooks/use-theorem-chat.js

@@ -12,13 +12,13 @@ export function useTheoremChat(options) {
     const [chat] = useState(() => createChatController(options));
     useOptionsEffect(() => chat.update(options));
     const state = useSyncExternalStore(chat.subscribe, chat.getState, chat.getState);
-    const slotChoices = useMemo(() => (state.slots ? { ...state.slots, onChange: chat.pickSlot } : undefined), [chat, state.slots]);
+    const optionChoices = useMemo(() => (state.options ? { ...state.options, onChange: chat.pickOption } : undefined), [chat, state.options]);
     // why: The transcript draws each gate by its index; the chat answers the one gate that waits.
     const handleAuthenticated = useCallback((_index, secret) => chat.authenticate(secret), [chat]);
     const handleToolDecision = useCallback((_index, action) => chat.decide(action), [chat]);
     return {
         ...state,
-        slotChoices,
+        optionChoices,
         setDraftText: chat.setDraftText,
         setPendingFiles: chat.setPendingFiles,
         setPendingVoice: chat.setPendingVoice,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.755.g88665bd",
+  "version": "0.3.4-next.759.g46e0e27",
   "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.755.g88665bd",
-    "@theoremjs/web": "^0.3.4-next.755.g88665bd"
+    "@theoremjs/agents": "^0.3.4-next.759.g46e0e27",
+    "@theoremjs/web": "^0.3.4-next.759.g46e0e27"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ChatComposerBar.d.ts

@@ -2,19 +2,19 @@ import { type ChatComposerInputHandle } from '@astryxdesign/core/Chat';
 import { type AttachmentValidationIssue, type ComposerMenuAction, type ComposerPendingMessage, type ComposerProfileInterface, type ComposerRunPhase, type LiveProfileInterface } from '@theoremjs/agents/interface';
 import type { ClientFailure } from '@theoremjs/web/client';
 import { type ReactNode } from 'react';
-/** A slot the profile declares: its allowed values, the one chosen, and how to choose another. */
+/** An option the profile declares: its allowed values, the one chosen, and how to choose another. */
 /** The effort selector's icon. The studio's Agents list shows the same one. */
 export declare const EFFORT_ICON: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
-export type SlotChoiceOption = {
+export type OptionChoiceView = {
     value: string;
     description?: string;
 };
-export type SlotDeclView = {
+export type OptionDeclView = {
     label?: string;
-    choices: readonly SlotChoiceOption[];
+    choices: readonly OptionChoiceView[];
 };
-export type SlotChoices = {
-    declared: Readonly<Record<string, SlotDeclView>>;
+export type OptionChoices = {
+    declared: Readonly<Record<string, OptionDeclView>>;
     values: Readonly<Record<string, string>>;
     onChange: (name: string, value: string) => void;
 };
@@ -47,8 +47,8 @@ export type ChatComposerBarProps = {
     }) => void;
     /** Stands in for the model and effort selectors, for a bar whose choices are not one chat's. */
     generationSelect?: ReactNode;
-    /** The profile's `inputs.slots` with the value chosen for each; one selector per slot, beside the model's. */
-    slotChoices?: SlotChoices;
+    /** The profile's `inputs.options` with the value chosen for each; one selector per option, beside the model's. */
+    optionChoices?: OptionChoices;
     onPendingMove: (id: string, direction: 'up' | 'down') => void;
     onPendingRemove: (id: string) => void;
     onPendingQueue: (id: string) => void;

package/ui/ChatComposerBar.js

@@ -24,7 +24,7 @@ import { composerDrawerLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 import { VoiceNote } from "./VoiceNote.js";
 const NO_FOCUS_RING = { '--focus-outline-width': '0px' };
-/** A slot the profile declares: its allowed values, the one chosen, and how to choose another. */
+/** An option the profile declares: its allowed values, the one chosen, and how to choose another. */
 /** The effort selector's icon. The studio's Agents list shows the same one. */
 export const EFFORT_ICON = IconBrain;
 const isImage = (file) => file.type.startsWith('image/');
@@ -89,7 +89,7 @@ function EffortSelector(props) {
         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 }));
 }
-function SlotSelectors(props) {
+function OptionSelectors(props) {
     if (!props.choices)
         return null;
     const { declared, values, onChange } = props.choices;
@@ -108,15 +108,15 @@ function SlotSelectors(props) {
 }
 function GenerationSelect(props) {
     const { models, efforts } = generationOptions(props.iface, props.selectedModel);
-    const slotCount = Object.keys(props.slotChoices?.declared ?? {}).length;
+    const optionCount = Object.keys(props.optionChoices?.declared ?? {}).length;
     if (props.control)
-        return (_jsxs(HStack, { gap: 1, children: [props.control, _jsx(SlotSelectors, { choices: props.slotChoices, isDisabled: props.isDisabled })] }));
-    if (models.length + efforts.length + slotCount === 0)
+        return (_jsxs(HStack, { gap: 1, 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) => {
                     if (props.selectedModel)
                         props.onChange?.({ modelId: props.selectedModel, effort });
-                } }), _jsx(SlotSelectors, { choices: props.slotChoices, isDisabled: props.isDisabled })] }));
+                } }), _jsx(OptionSelectors, { choices: props.optionChoices, isDisabled: props.isDisabled })] }));
 }
 function composerStatus(args) {
     if (args.failure)
@@ -330,7 +330,7 @@ function ChatComposerBarBody(props) {
             : (props.placeholder ??
                 t('@theorem.composer.placeholder', { handle: iface.identity.handle })), 
         // why: A profile that takes no text has no text field (false, not null: null gets Astryx's default one).
-        input: inputs.text && (_jsx(ComposerTextInput, { editorRef: editorRef, handleRef: props.inputRef, onStash: canStash ? () => props.onMenuAction('stash') : undefined })), drawer: composerDrawer(props, stagedFiles, () => voice.discardRecordingOrVoice()), headerActions: inputs.attachments ? (_jsx(AttachFilesButton, { accept: inputs.attachments.acceptAttr, onFiles: stageFiles })) : undefined, headerContext: hint ? _jsx(ComposerHint, { hint: hint, onAction: () => props.onMenuAction('stash') }) : undefined, footerActions: _jsx(GenerationSelect, { iface: iface, slotChoices: props.slotChoices, selectedModel: props.selectedModel, selectedEffort: props.selectedEffort, isDisabled: phase === 'streaming', onChange: props.onGenerationChange, control: props.generationSelect }), 
+        input: inputs.text && (_jsx(ComposerTextInput, { editorRef: editorRef, handleRef: props.inputRef, onStash: canStash ? () => props.onMenuAction('stash') : undefined })), drawer: composerDrawer(props, stagedFiles, () => voice.discardRecordingOrVoice()), headerActions: inputs.attachments ? (_jsx(AttachFilesButton, { accept: inputs.attachments.acceptAttr, onFiles: stageFiles })) : undefined, headerContext: hint ? _jsx(ComposerHint, { hint: hint, onAction: () => props.onMenuAction('stash') }) : undefined, footerActions: _jsx(GenerationSelect, { iface: iface, optionChoices: props.optionChoices, selectedModel: props.selectedModel, selectedEffort: props.selectedEffort, isDisabled: phase === 'streaming', onChange: props.onGenerationChange, control: props.generationSelect }), 
         // why: Astryx: sendActions render to the left of the send button, at size="md".
         sendActions: _jsxs(_Fragment, { children: [_jsx(SendMenu, { actions: menuActions, onAction: props.onMenuAction }), _jsx(ComposerRecordButton, { hasVoice: Boolean(inputs.voice), voice: voice })] }), sendButton: _jsx(ChatSendButton, { isStopShown: primary === 'stop', isDisabled: primaryDisabled, onSend: runPrimary, onStop: props.onStop }), status: composerStatus({
             failure: props.failure,

package/ui/TheoremChat.d.ts

@@ -28,13 +28,13 @@ export type TheoremChatProps = {
      */
     detectCodeLanguage?: boolean;
     /**
-     * The value chosen for each of the profile's `inputs.slots`, sent with every turn. A slot you
+     * The value chosen for each of the profile's `inputs.options`, sent with every turn. An option you
      * name is fixed to that value; one you leave out gets a selector in the composer bar, beside
      * the model's, starting at its first allowed value.
      */
-    slots?: Record<string, string>;
-    /** Told each time the visitor chooses a slot in the composer, with every slot's value. */
-    onSlotsChange?: (slots: Record<string, string>) => void;
+    options?: Record<string, string>;
+    /** Told each time the visitor chooses an option in the composer, with every option's value. */
+    onOptionsChange?: (options: Record<string, string>) => void;
     /** Which prompt lines each turn gets, for a host that lets its page choose (`pageStatesTurn`). */
     stated?: StatedTurn;
     /**

package/ui/TheoremChat.js

@@ -41,7 +41,7 @@ function ChatComposerForChat({ chat, iface, placeholder, inputRef, }) {
             chat.setIssues([]);
         }, onVoiceClear: () => chat.setPendingVoice([]), onSubmit: () => {
             void chat.handleSubmit();
-        }, onStop: chat.handleStop, onMenuAction: chat.handleMenuAction, onGenerationChange: chat.handleGenerationChange, slotChoices: chat.slotChoices, onPendingMove: chat.handlePendingMove, onPendingRemove: (id) => {
+        }, onStop: chat.handleStop, onMenuAction: chat.handleMenuAction, onGenerationChange: chat.handleGenerationChange, optionChoices: chat.optionChoices, onPendingMove: chat.handlePendingMove, onPendingRemove: (id) => {
             chat.setPendingMessages((prev) => removeComposerPendingMessage(prev, id));
         }, onPendingQueue: chat.handlePendingQueue, onPendingRestore: (id) => {
             void chat.handlePendingRestore(id);
@@ -51,7 +51,7 @@ function ChatComposerForChat({ chat, iface, placeholder, inputRef, }) {
                 void chat.handleSendNow(message);
         } }));
 }
-function ChatBody({ transport, iface, placeholder, emptyState, density, maxWidth = DEFAULT_CHAT_MAX_WIDTH, scrollRef, trace, usage, className, style, conversation, conversationView, initialText, initialFiles, initialVoice, initialPending, onConversationChange, chatRef, composer: hasComposer = true, slots, onSlotsChange, stated, context, pageTools, onTurnEvent, }) {
+function ChatBody({ transport, iface, placeholder, emptyState, density, maxWidth = DEFAULT_CHAT_MAX_WIDTH, scrollRef, trace, usage, className, style, conversation, conversationView, initialText, initialFiles, initialVoice, initialPending, onConversationChange, chatRef, composer: hasComposer = true, options, onOptionsChange, stated, context, pageTools, onTurnEvent, }) {
     const t = useLabels();
     const chat = useTheoremChat({
         transport,
@@ -63,8 +63,8 @@ function ChatBody({ transport, iface, placeholder, emptyState, density, maxWidth
         initialVoice,
         initialPending,
         onConversationChange,
-        slots,
-        onSlotsChange,
+        options,
+        onOptionsChange,
         stated,
         context,
         pageTools,