@theoremjs/react 0.3.4-next.423.g9c79ac8 → 0.3.4-next.425.gd676bc4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.423.g9c79ac8",
+  "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.423.g9c79ac8",
-    "@theoremjs/web": "^0.3.4-next.423.g9c79ac8"
+    "@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,
     };
 }