@theoremjs/react 0.3.4-next.425.gd676bc4 → 0.3.4-next.427.g3ab5770

package/README.md

@@ -431,6 +431,8 @@ function MyChat() {
 
 `chat.phase` is `'idle'`, `'streaming'`, or `'gated'`. The actions are `handleSubmit`, `handleStop`, `handleSendNow`, and `handleToolDecision`.
 
+`handlePendingMove(id, direction)` moves a pending message among those of its kind. `ChatComposerBar` draws a move only when `composerPendingMoves` from `@theoremjs/agents/interface` says the message can go that way: a message alone in its kind has none.
+
 To show the transcript and the composer, use `ChatTranscript` and `ChatComposerBar` from `/ui`. You can also draw your own from `chat.blocks`.
 
 The hooks and the client write no English text. They return kinds, codes, and states. You write the words.

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

@@ -24,6 +24,7 @@ export declare function useTheoremChat(options: UseTheoremChatOptions): {
     handleStop: () => void;
     handleMenuAction: (action: import("../../../src/interface/composer-actions").ComposerMenuAction) => void;
     handlePendingQueue: (id: string) => void;
+    handlePendingMove: (id: string, direction: "up" | "down") => void;
     handlePendingRestore: (id: string) => Promise<void>;
     handleSendNow: (source?: import("../../../src/interface/pending").ComposerPendingMessage) => Promise<void>;
     handleToolDecision: (_index: number, action: ToolDecisionAction) => Promise<void>;

package/hooks/use-theorem-chat.js

@@ -30,6 +30,7 @@ export function useTheoremChat(options) {
         handleStop: chat.stop,
         handleMenuAction: chat.menuAction,
         handlePendingQueue: chat.queuePending,
+        handlePendingMove: chat.movePending,
         handlePendingRestore: chat.restorePending,
         handleSendNow: chat.sendNow,
         handleToolDecision,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.425.gd676bc4",
+  "version": "0.3.4-next.427.g3ab5770",
   "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.425.gd676bc4",
-    "@theoremjs/web": "^0.3.4-next.425.gd676bc4"
+    "@theoremjs/agents": "^0.3.4-next.427.g3ab5770",
+    "@theoremjs/web": "^0.3.4-next.427.g3ab5770"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ChatComposerBar.js

@@ -14,7 +14,7 @@ import { Tooltip as HoverTip } from '@astryxdesign/core/Tooltip';
 import { VStack } from '@astryxdesign/core/VStack';
 import { IconAdjustmentsHorizontal, IconArchive, IconArrowBigRightLines, IconArrowDown, IconArrowUp, IconBrain, IconCornerDownLeft, IconInputAi, IconListNumbers, IconMicrophone, IconPaperclip, IconPencil, IconPlayerRecordFilled, IconSend, IconStack2, IconSteeringWheel, IconX, } from '@tabler/icons-react';
 import { attachmentIssueText, labelText } from '@theoremjs/agents';
-import { composerPendingPreview, effortSelectEnabled, interfaceEffortOptions, interfaceModelOptions, modelSelectEnabled, } from '@theoremjs/agents/interface';
+import { composerPendingMoves, composerPendingPreview, effortSelectEnabled, interfaceEffortOptions, interfaceModelOptions, modelSelectEnabled, } from '@theoremjs/agents/interface';
 import { composerActionState, composerDrawerSummary, isStashShortcut, resolveComposerHint, STASH_SHORTCUT, } from '@theoremjs/web/client';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { stageComposerFiles } from "../client/composer-attachments.js";
@@ -65,7 +65,7 @@ function PendingRow(props) {
     const moveDown = t('@theorem.composer.pending.move_down');
     const remove = t('@theorem.composer.pending.remove');
     const Kind = SEND_ICON[message.kind];
-    return (_jsxs(HStack, { gap: 1, align: "center", width: "100%", children: [_jsx(HoverTip, { content: t(`@theorem.composer.pending.${message.kind}.description`), children: _jsx(Token, { label: t(`@theorem.composer.pending.${message.kind}`), isLabelHidden: true, color: message.kind === 'steer' ? 'blue' : 'default', icon: _jsx(Kind, { size: 14 }) }) }), _jsx(StackItem, { size: "fill", style: { width: 0 }, children: _jsx(Text, { size: "sm", maxLines: 1, hasTruncateTooltip: true, children: composerPendingPreview(message) }) }), _jsxs(HStack, { gap: 0.5, children: [_jsx(IconButton, { label: edit, tooltip: edit, size: "sm", variant: "ghost", icon: icon(IconPencil), onClick: () => props.onRestore(message.id) }), message.kind === 'stash' ? (_jsx(IconButton, { label: queue, tooltip: queue, size: "sm", variant: "ghost", icon: icon(IconCornerDownLeft), onClick: () => props.onQueue(message.id) })) : null, _jsx(IconButton, { label: sendNow, tooltip: sendNow, size: "sm", variant: "ghost", icon: icon(IconSend), onClick: () => props.onSendNow(message.id) }), _jsx(IconButton, { label: moveUp, tooltip: moveUp, size: "sm", variant: "ghost", icon: icon(IconArrowUp), onClick: () => props.onMove(message.id, 'up') }), _jsx(IconButton, { label: moveDown, tooltip: moveDown, size: "sm", variant: "ghost", icon: icon(IconArrowDown), onClick: () => props.onMove(message.id, 'down') }), _jsx(IconButton, { label: remove, tooltip: remove, size: "sm", variant: "ghost", icon: icon(IconX), onClick: () => props.onRemove(message.id) })] })] }));
+    return (_jsxs(HStack, { gap: 1, align: "center", width: "100%", children: [_jsx(HoverTip, { content: t(`@theorem.composer.pending.${message.kind}.description`), children: _jsx(Token, { label: t(`@theorem.composer.pending.${message.kind}`), isLabelHidden: true, color: message.kind === 'steer' ? 'blue' : 'default', icon: _jsx(Kind, { size: 14 }) }) }), _jsx(StackItem, { size: "fill", style: { width: 0 }, children: _jsx(Text, { size: "sm", maxLines: 1, hasTruncateTooltip: true, children: composerPendingPreview(message) }) }), _jsxs(HStack, { gap: 0.5, children: [_jsx(IconButton, { label: edit, tooltip: edit, size: "sm", variant: "ghost", icon: icon(IconPencil), onClick: () => props.onRestore(message.id) }), message.kind === 'stash' ? (_jsx(IconButton, { label: queue, tooltip: queue, size: "sm", variant: "ghost", icon: icon(IconCornerDownLeft), onClick: () => props.onQueue(message.id) })) : null, _jsx(IconButton, { label: sendNow, tooltip: sendNow, size: "sm", variant: "ghost", icon: icon(IconSend), onClick: () => props.onSendNow(message.id) }), props.moves.up ? (_jsx(IconButton, { label: moveUp, tooltip: moveUp, size: "sm", variant: "ghost", icon: icon(IconArrowUp), onClick: () => props.onMove(message.id, 'up') })) : null, props.moves.down ? (_jsx(IconButton, { label: moveDown, tooltip: moveDown, size: "sm", variant: "ghost", icon: icon(IconArrowDown), onClick: () => props.onMove(message.id, 'down') })) : null, _jsx(IconButton, { label: remove, tooltip: remove, size: "sm", variant: "ghost", icon: icon(IconX), onClick: () => props.onRemove(message.id) })] })] }));
 }
 /** The model and effort choices this profile offers; efforts only for a chosen model. */
 function generationOptions(iface, selectedModel) {
@@ -119,7 +119,7 @@ function composerStatus(args) {
 /** Pending messages, then two uniform rows: 64px tiles (images, voice notes), then file tokens. */
 function PendingDrawer(props) {
     const t = useLabels();
-    return (_jsx(ChatComposerDrawer, { count: props.summary.count, label: composerDrawerLabel(t, props.summary), children: _jsxs(VStack, { gap: 2, width: "100%", children: [props.messages.map((message) => (_jsx(PendingRow, { message: message, ...props.pendingActions }, message.id))), props.imageFiles.length + props.voiceFiles.length > 0 ? (_jsxs(HStack, { gap: 2, wrap: "wrap", vAlign: "center", children: [props.imageFiles.map(({ file, index, preview }) => (_jsx(Thumbnail, { src: preview, alt: file.name, label: file.name, onRemove: () => props.onAttachmentRemove(index) }, `${file.name}:${String(index)}`))), props.voiceFiles.map((file, index) => {
+    return (_jsx(ChatComposerDrawer, { count: props.summary.count, label: composerDrawerLabel(t, props.summary), children: _jsxs(VStack, { gap: 2, width: "100%", children: [props.messages.map((message) => (_jsx(PendingRow, { message: message, moves: composerPendingMoves(props.messages, message.id), ...props.pendingActions }, message.id))), props.imageFiles.length + props.voiceFiles.length > 0 ? (_jsxs(HStack, { gap: 2, wrap: "wrap", vAlign: "center", children: [props.imageFiles.map(({ file, index, preview }) => (_jsx(Thumbnail, { src: preview, alt: file.name, label: file.name, onRemove: () => props.onAttachmentRemove(index) }, `${file.name}:${String(index)}`))), props.voiceFiles.map((file, index) => {
                             const src = props.voiceUrls[index];
                             // why: An empty src makes the browser fetch the page again; a note draws once it has its URL.
                             return src === undefined ? null : (_jsx(VoiceNote, { src: src, mimeType: file.type || undefined, onRemove: props.onVoiceRemove }, `voice:${file.name}`));

package/ui/TheoremChat.js

@@ -5,7 +5,7 @@ import { ChatLayout } from '@astryxdesign/core/Chat';
 import { Layout, LayoutContent } from '@astryxdesign/core/Layout';
 import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
-import { moveComposerPendingWithinKind, removeComposerPendingMessage, } from '@theoremjs/agents/interface';
+import { removeComposerPendingMessage, } from '@theoremjs/agents/interface';
 import { createHttpTransport, } from '@theoremjs/web/client';
 import { useImperativeHandle, useMemo, useRef, } from 'react';
 import { parseAspectRatio } from "../client/image-output.js";
@@ -41,9 +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: (id, direction) => {
-            chat.setPendingMessages((prev) => moveComposerPendingWithinKind(prev, id, direction));
-        }, onPendingRemove: (id) => {
+        }, onStop: chat.handleStop, onMenuAction: chat.handleMenuAction, onGenerationChange: chat.handleGenerationChange, slotChoices: chat.slotChoices, onPendingMove: chat.handlePendingMove, onPendingRemove: (id) => {
             chat.setPendingMessages((prev) => removeComposerPendingMessage(prev, id));
         }, onPendingQueue: chat.handlePendingQueue, onPendingRestore: (id) => {
             void chat.handlePendingRestore(id);