Fix type errors in use-client-transport demo

Fix parent type from string | null to optional string to match
the transport's newTurn signature. Fix disableApprovalForApprovedTools
return type to typeof tools so streamText accepts it as ToolSet.

Author: zknill

demo/vercel/react/use-client-transport/src/app/api/chat/route.ts

@@ -39,7 +39,7 @@ interface ChatRequestBody {
   events?: EventsNode<UIMessageChunk>[];
   id: string;
   forkOf?: string;
-  parent?: string | null;
+  parent?: string;
   toolApprovals?: ToolApproval[];
 }
 
@@ -116,7 +116,6 @@ function patchToolApprovals(
       break;
     }
   }
-
 }
 
 /**
@@ -140,7 +139,7 @@ function removeTrailingUserMessage(
  * that was just approved. Prevents an infinite approval loop when the LLM
  * calls the same tool again in multi-step mode.
  */
-function disableApprovalForApprovedTools(approvals: ToolApproval[] | undefined): Record<string, unknown> {
+function disableApprovalForApprovedTools(approvals: ToolApproval[] | undefined): typeof tools {
   const approvedNames = new Set((approvals ?? []).filter((a) => a.approved).map((a) => a.toolName));
   if (approvedNames.size === 0) return tools;
   return Object.fromEntries(
@@ -206,10 +205,7 @@ export async function POST(req: Request) {
     patchToolApprovals(pendingPublish, allMessages, toolApprovals);
   }
 
-  const modelMessages = removeTrailingUserMessage(
-    await convertToModelMessages(allMessages),
-    toolApprovals,
-  );
+  const modelMessages = removeTrailingUserMessage(await convertToModelMessages(allMessages), toolApprovals);
 
   const effectiveTools = disableApprovalForApprovedTools(toolApprovals);
 
@@ -231,11 +227,13 @@ export async function POST(req: Request) {
     for (const [toolCallId, targetMsgId] of pendingPublish) {
       const output = capturedOutputs.get(toolCallId);
       if (output !== undefined) {
-        await turn.addEvents([{
-          kind: 'event',
-          msgId: targetMsgId,
-          events: [{ type: 'tool-output-available', toolCallId, output, dynamic: true } as UIMessageChunk],
-        }]);
+        await turn.addEvents([
+          {
+            kind: 'event',
+            msgId: targetMsgId,
+            events: [{ type: 'tool-output-available', toolCallId, output, dynamic: true } as UIMessageChunk],
+          },
+        ]);
       }
     }
 

demo/vercel/react/use-client-transport/src/app/components/message-bubble.tsx

@@ -217,12 +217,24 @@ export function MessageBubble({
                       part={toolPart}
                       onApprove={
                         toolPart.state === 'approval-requested' && onToolApprove && headers?.['x-ably-msg-id']
-                          ? () => onToolApprove(headers['x-ably-msg-id'], toolPart.toolCallId, toolPart.toolName, toolPart.input)
+                          ? () =>
+                              onToolApprove(
+                                headers['x-ably-msg-id'],
+                                toolPart.toolCallId,
+                                toolPart.toolName,
+                                toolPart.input,
+                              )
                           : undefined
                       }
                       onDeny={
                         toolPart.state === 'approval-requested' && onToolDeny && headers?.['x-ably-msg-id']
-                          ? () => onToolDeny(headers['x-ably-msg-id'], toolPart.toolCallId, toolPart.toolName, toolPart.input)
+                          ? () =>
+                              onToolDeny(
+                                headers['x-ably-msg-id'],
+                                toolPart.toolCallId,
+                                toolPart.toolName,
+                                toolPart.input,
+                              )
                           : undefined
                       }
                     />

demo/vercel/react/use-client-transport/src/app/components/tool-invocation.tsx

@@ -75,12 +75,17 @@ function ForecastCard({ data }: { data: ForecastData }) {
           const highC = Math.round(((day.high - 32) * 5) / 9);
           const lowC = Math.round(((day.low - 32) * 5) / 9);
           return (
-            <div key={day.day} className="flex items-center justify-between text-xs">
+            <div
+              key={day.day}
+              className="flex items-center justify-between text-xs"
+            >
               <span className="text-zinc-300 w-8">{day.day}</span>
               <span className="text-base">{icon}</span>
               <span className="text-zinc-400 w-24 text-right">
                 {day.high}&deg;/{day.low}&deg;F
-                <span className="text-zinc-600 ml-1">({highC}&deg;/{lowC}&deg;C)</span>
+                <span className="text-zinc-600 ml-1">
+                  ({highC}&deg;/{lowC}&deg;C)
+                </span>
               </span>
             </div>
           );