update

inferablehq · Dec 29, 2024 · df11ba8 · df11ba8
1 parent 0eb6ef7
commit df11ba8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/sdk-react/demo/TestPage.tsx b/sdk-react/demo/TestPage.tsx
@@ -3,22 +3,34 @@ import { useRun } from "../src";
 import { useAgent } from "../src/hooks/useAgent";
 
 export function TestPage() {
-  const run = useRun({
+  const basicRun = useRun({
     clusterId: "01J7M4V93BBZP3YJYSKPDEGZ2T",
     baseUrl: "https://api.inferable.ai",
     authType: "custom",
     customAuthToken: "test",
   });
 
-  const { Trigger, Pane } = useAgent({
+  const BasicAgent = useAgent({
     prompt: "Ping the server, and return the system status at the time of the ping.",
-    run,
+    run: basicRun,
   });
 
   const [mode, setMode] = useState<"minimal" | "fixed" | "floating">("floating");
 
+  const [pingCount, setPingCount] = useState(1);
+
+  const FormAgent = useAgent({
+    prompt: `Ping the server, and return the system status at the time of the ping. ${JSON.stringify(
+      {
+        pingCount,
+      }
+    )}`,
+    run: basicRun,
+  });
+
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+      <h1>Basic useAgent</h1>
       <div style={{ display: "flex", gap: "10px" }}>
         {["minimal", "fixed", "floating"].map(s => (
           <button key={s} onClick={() => setMode(s as "minimal" | "fixed" | "floating")}>
@@ -27,8 +39,20 @@ export function TestPage() {
         ))}
       </div>
       <div>
-        <Trigger>Check system ({mode})</Trigger>
-        <Pane mode={mode} />
+        <BasicAgent.Trigger>Check system ({mode})</BasicAgent.Trigger>
+        <BasicAgent.Pane mode={mode} />
+      </div>
+      <h1>useAgent with form</h1>
+      <div style={{ display: "flex", flexDirection: "column", gap: "10px", maxWidth: "500px" }}>
+        <label htmlFor="pingCount">How many times should I ping the server?</label>
+        <input
+          type="number"
+          name="pingCount"
+          value={pingCount}
+          onChange={e => setPingCount(Number(e.target.value))}
+        />
+        <FormAgent.Trigger>Check system</FormAgent.Trigger>
+        <FormAgent.Pane mode={mode} />
       </div>
     </div>
   );

diff --git a/sdk-react/src/ui/message.tsx b/sdk-react/src/ui/message.tsx
@@ -94,7 +94,7 @@ export function Message({ message }: MessageProps) {
   const parsedMessage = messageSchema.safeParse(message);
 
   if (!parsedMessage.success) {
-    return <div className="message-error">Invalid message format</div>;
+    return <div className="message-error">Could not parse message: {JSON.stringify(message)}</div>;
   }
 
   const data = parsedMessage.data;