@theoremjs/react 0.3.4-next.421.g4bac1c7 → 0.3.4-next.425.gd676bc4

package/README.md

@@ -170,6 +170,7 @@ The profile, the keys, and the system prompt stay on the server. The browser rec
 | `conversation`, `conversationView`, `onConversationChange` | Resume a conversation that the server keeps, or open one you started. See below. |
 | `initialText` | The text that the composer starts with. The user can send it or change it. The component reads it once, when it mounts. |
 | `initialFiles` | The files that the composer starts with, staged to send. The component reads them once, when it mounts. |
+| `initialVoice` | The voice notes that the composer starts with, staged to send. The component reads them once, when it mounts. |
 | `initialPending` | The messages that the composer starts with set aside: queued, stashed, or steering, as `createComposerPendingMessage` from `@theoremjs/agents/interface` makes them. The component reads them once, when it mounts. |
 | `chatRef` | Sends a message from your code. See below. |
 | `composer` | `false` leaves the composer out. The chat is the transcript alone, and your own control sends through `chatRef`. Default: `true`. |

package/package.json

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

package/ui/ChatComposerBar.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 = {
@@ -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, ...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.d.ts

@@ -87,6 +87,8 @@ export type TheoremChatProps = {
     initialText?: string;
     /** The files the composer starts with, staged to send. Read once, when the chat mounts. */
     initialFiles?: readonly File[];
+    /** The voice notes the composer starts with, staged to send. Read once, when the chat mounts. */
+    initialVoice?: readonly File[];
     /**
      * The messages the composer starts with set aside: queued, stashed or steering, as
      * `createComposerPendingMessage` makes them. Read once, when the chat mounts.

package/ui/TheoremChat.js

@@ -53,7 +53,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, initialPending, onConversationChange, chatRef, composer: hasComposer = true, slots, onSlotsChange, 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, slots, onSlotsChange, context, pageTools, onTurnEvent, }) {
     const t = useLabels();
     const chat = useTheoremChat({
         transport,
@@ -62,6 +62,7 @@ function ChatBody({ transport, iface, placeholder, emptyState, density, maxWidth
         conversationView,
         initialText,
         initialFiles,
+        initialVoice,
         initialPending,
         onConversationChange,
         slots,