@theoremjs/react 0.3.4-next.423.g9c79ac8 → 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.423.g9c79ac8",
+  "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.423.g9c79ac8",
-    "@theoremjs/web": "^0.3.4-next.423.g9c79ac8"
+    "@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";
@@ -29,15 +29,23 @@ const NO_FOCUS_RING = { '--focus-outline-width': '0px' };
 export const EFFORT_ICON = IconBrain;
 const isImage = (file) => file.type.startsWith('image/');
 const anyFile = () => true;
-/** Object URLs for the files `keep` (a module-level predicate) accepts, revoked when the files change. */
+/**
+ * Object URLs for the files `keep` (a module-level predicate) accepts, revoked when the files change.
+ * why: Each URL is made in the effect that revokes it, so a remount (strict mode, a moved subtree)
+ * makes fresh ones instead of keeping revoked ones; until the effect runs the files have none.
+ */
 function useObjectUrls(files, keep) {
-    const urls = useMemo(() => files.map((file) => (keep(file) ? URL.createObjectURL(file) : undefined)), [files, keep]);
-    useEffect(() => () => {
-        for (const url of urls)
-            if (url)
-                URL.revokeObjectURL(url);
-    }, [urls]);
-    return urls;
+    const [made, setMade] = useState();
+    useEffect(() => {
+        const urls = files.map((file) => (keep(file) ? URL.createObjectURL(file) : undefined));
+        setMade({ files, urls });
+        return () => {
+            for (const url of urls)
+                if (url)
+                    URL.revokeObjectURL(url);
+        };
+    }, [files, keep]);
+    return made?.files === files ? made.urls : [];
 }
 /** Each way to send, by the same icon in the send menu and on a waiting message. */
 const SEND_ICON = {
@@ -57,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) {
@@ -111,7 +119,11 @@ 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) => (_jsx(VoiceNote, { src: props.voiceUrls[index] ?? '', mimeType: file.type || undefined, onRemove: props.onVoiceRemove }, `voice:${file.name}`)))] })) : null, props.otherFiles.length > 0 ? (_jsx(HStack, { gap: 2, wrap: "wrap", children: props.otherFiles.map(({ file, index }) => (_jsx(Token, { label: file.name, onRemove: () => props.onAttachmentRemove(index) }, `${file.name}:${String(index)}`))) })) : null] }) }));
+    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}`));
+                        })] })) : null, props.otherFiles.length > 0 ? (_jsx(HStack, { gap: 2, wrap: "wrap", children: props.otherFiles.map(({ file, index }) => (_jsx(Token, { label: file.name, onRemove: () => props.onAttachmentRemove(index) }, `${file.name}:${String(index)}`))) })) : null] }) }));
 }
 /** A hidden file input behind the paperclip button. */
 function AttachFilesButton({ accept, onFiles, }) {
@@ -168,8 +180,8 @@ function useStagedFiles(pendingFiles, pendingVoice) {
         preview: previews[index],
     }));
     return {
-        imageFiles: staged.filter((entry) => entry.preview !== undefined),
-        otherFiles: staged.filter((entry) => entry.preview === undefined),
+        imageFiles: staged.filter((entry) => isImage(entry.file)),
+        otherFiles: staged.filter((entry) => !isImage(entry.file)),
         voiceUrls,
     };
 }

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);