@theoremjs/react 0.3.4-next.641.g6835640 → 0.3.4-next.645.gf4efc36

package/README.md

@@ -172,7 +172,7 @@ The profile, the keys, and the system prompt stay on the server. The browser rec
 | `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. |
+| `chatRef` | Sends a message, stops a reply, or focuses the composer 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`. |
 
 ### Resume a conversation
@@ -204,7 +204,7 @@ A profile whose `providerContinuation.history` is `'stateless'` keeps no convers
 ### Send a message from your code
 
 `chatRef` gives you `send(text, files?)`. It sends the text and optional array of browser files as the user. Files use the same profile validation and encoding as composer attachments. When the reply is complete, it returns the blocks that the turn added. It returns `null` if the chat cannot accept a message now. This happens while a reply streams or waits for a gate.
-`chatRef` also gives you `stop()`. It stops the reply that streams, as the composer's stop button does.
+`chatRef` also gives you `stop()`. It stops the reply that streams, as the composer's stop button does. And it gives you `focus()`, which puts the keyboard in the composer, for example after your own control clears the chat.
 
 ```tsx
 const chat = useRef<TheoremChatHandle>(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.641.g6835640",
+  "version": "0.3.4-next.645.gf4efc36",
   "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.641.g6835640",
-    "@theoremjs/web": "^0.3.4-next.641.g6835640"
+    "@theoremjs/agents": "^0.3.4-next.645.gf4efc36",
+    "@theoremjs/web": "^0.3.4-next.645.gf4efc36"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/TheoremChat.d.ts

@@ -101,7 +101,7 @@ export type TheoremChatProps = {
      * forget it.
      */
     onConversationChange?: (ref: string | undefined) => void;
-    /** Lets the host send a message as the composer would; see {@link TheoremChatHandle}. */
+    /** Lets the host send a message as the composer would, stop a reply, or focus the composer; see {@link TheoremChatHandle}. */
     chatRef?: Ref<TheoremChatHandle>;
     /**
      * `false` leaves the composer out: the chat is the transcript alone, and your own control sends
@@ -118,6 +118,8 @@ export type TheoremChatHandle = {
     send: (text: string, files?: readonly File[]) => Promise<SentTurn | null>;
     /** Stops the reply that is streaming, as the composer's stop button does. */
     stop: () => void;
+    /** Puts the keyboard in the composer. */
+    focus: () => void;
 };
 /**
  * 50% of the chat's width, but never narrower than 640px (or the full width,

package/ui/TheoremChat.js

@@ -70,14 +70,17 @@ function ChatBody({ transport, iface, placeholder, emptyState, density, maxWidth
         onTurnEvent,
     });
     const { sendText, handleStop } = chat;
-    useImperativeHandle(chatRef, () => ({ send: sendText, stop: handleStop }), [
-        sendText,
-        handleStop,
-    ]);
     const blocks = useMemo(() => [...chat.blocks, ...chat.streamBlocks], [chat.blocks, chat.streamBlocks]);
     const handle = t('@theorem.agent.handle', { handle: iface.identity.handle });
     const landing = blocks.length === 0;
     const inputRef = useRef(null);
+    useImperativeHandle(chatRef, () => ({
+        send: sendText,
+        stop: handleStop,
+        focus: () => {
+            inputRef.current?.focus();
+        },
+    }), [sendText, handleStop]);
     const composerRef = useGlide(landing, () => inputRef.current?.focus());
     const inspector = useTraceInspector(iface, transport.traces, trace);
     const header = _jsx(SidePanelHeader, { floating: true, children: inspector.toggle });