feat: New react hooks: useInferable, useRun, and useMessages (#460)

* WIP: Stashed changes for 52f41f4d

* chore: Refactor sdk-react hooks for improved structure and functionality

* feat: Add tests and enhance documentation for useInferable and useMessages hooks

* chore: Update README and demo for improved SDK usage examples

* feat: Add demo video and create run button in React SDK

* update

* update

* update

* update

* update

Author: nadeesha

app/components/chat/template-message.tsx

@@ -0,0 +1,51 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { formatRelative } from "date-fns";
+import { startCase } from "lodash";
+import { ChevronDown } from "lucide-react";
+import { MessageContainerProps } from "./workflow-event";
+import { z } from "zod";
+
+export function TemplateMessage({
+  createdAt,
+  displayableContext,
+  data,
+}: MessageContainerProps<"template"> & { runId: string }) {
+  return (
+    <Card>
+      <div className="flex items-center justify-between p-4 border-b">
+        <div className="flex items-center gap-2">
+          <div className="text-sm text-muted-foreground">
+            {createdAt ? formatRelative(new Date(createdAt), new Date()) : "unknown"}
+          </div>
+        </div>
+      </div>
+      {Object.entries({ ...data, ...displayableContext }).map(([key, value]) => (
+        <CardContent className="flex flex-col" key={key}>
+          {key === "message" ? (
+            <Collapsible>
+              <CollapsibleTrigger className="flex items-center cursor-pointer">
+                <p className="text-sm text-muted-foreground mr-2">{startCase(key)}</p>
+                <ChevronDown className="w-4 h-4" />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <p className="text-sm whitespace-pre-wrap mt-2">{value as string}</p>
+              </CollapsibleContent>
+            </Collapsible>
+          ) : (
+            <>
+              <p className="text-sm text-muted-foreground">{startCase(key)}</p>
+              {typeof value === "object" ? (
+                <pre className="text-sm whitespace-pre-wrap bg-muted p-2 rounded-md">
+                  {JSON.stringify(value, null, 2)}
+                </pre>
+              ) : (
+                <p className="text-sm whitespace-pre-wrap">{value as string}</p>
+              )}
+            </>
+          )}
+        </CardContent>
+      ))}
+    </Card>
+  );
+}

control-plane/src/modules/contract.ts

@@ -663,6 +663,10 @@ export const definition = {
     headers: z.object({
       authorization: z.string(),
     }),
+    query: z.object({
+      after: z.string().default("0"),
+      last: z.coerce.number().min(10).max(50).default(50),
+    }),
     responses: {
       200: z.array(unifiedMessageDataSchema),
       401: z.undefined(),

control-plane/src/modules/router.ts

@@ -12,6 +12,7 @@ import {
   assertMessageOfType,
   editHumanMessage,
   getRunMessagesForDisplay,
+  getRunMessagesForDisplayWithPolling,
 } from "./workflows/workflow-messages";
 import { addMessageAndResume, assertRunReady } from "./workflows/workflows";
 import { runsRouter } from "./workflows/router";
@@ -281,9 +282,11 @@ export const router = initServer().router(contract, {
     const auth = request.request.getAuth();
     await auth.canAccess({ run: { clusterId, runId } });
 
-    const messages = await getRunMessagesForDisplay({
+    const messages = await getRunMessagesForDisplayWithPolling({
       clusterId,
       runId,
+      after: request.query.after,
+      last: request.query.last,
     });
 
     return {

control-plane/src/modules/workflows/workflow-messages.ts

@@ -184,6 +184,37 @@ export const getRunMessagesForDisplay = async ({
     });
 };
 
+export const getRunMessagesForDisplayWithPolling = async ({
+  clusterId,
+  runId,
+  last = 100,
+  after = "0",
+}: {
+  clusterId: string;
+  runId: string;
+  last?: number;
+  after?: string;
+}): Promise<UnifiedMessage[]> => {
+  let rowsCount = 0;
+  const delay = 200;
+  const timeout = 20_000;
+  const startTime = Date.now();
+
+  do {
+    const messages = await getRunMessagesForDisplay({ clusterId, runId, last, after });
+    rowsCount = messages.length;
+
+    if (rowsCount > 0) {
+      return messages;
+    }
+
+    await new Promise(resolve => setTimeout(resolve, delay));
+  } while (Date.now() - startTime < timeout);
+
+  // Return empty array if no messages found after timeout
+  return [];
+};
+
 export const getWorkflowMessages = async ({
   clusterId,
   runId,