Merge pull request #138 from cloudflare/update-deps

update deps

Author: threepointone

package-lock.json

@@ -40,22 +40,22 @@
     "wrangler": "4.56.0"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.88",
-    "@ai-sdk/react": "^2.0.118",
+    "@ai-sdk/openai": "^3.0.0",
+    "@ai-sdk/react": "^3.0.1",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
-    "agents": "^0.2.35",
-    "ai": "^5.0.116",
+    "agents": "^0.3.0",
+    "ai": "^6.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "marked": "^17.0.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "streamdown": "^1.6.10",
     "tailwind-merge": "^3.4.0",
-    "workers-ai-provider": "^2.0.0"
+    "workers-ai-provider": "^3.0.0"
   }
 }

package.json

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/correctness/useUniqueElementIds: it's alright */
 import { useEffect, useState, useRef, useCallback, use } from "react";
 import { useAgent } from "agents/react";
-import { isToolUIPart } from "ai";
+import { isStaticToolUIPart } from "ai";
 import { useAgentChat } from "agents/ai-react";
 import type { UIMessage } from "@ai-sdk/react";
 import type { tools } from "./tools";
@@ -122,7 +122,7 @@ export default function Chat() {
   const pendingToolCallConfirmation = agentMessages.some((m: UIMessage) =>
     m.parts?.some(
       (part) =>
-        isToolUIPart(part) &&
+        isStaticToolUIPart(part) &&
         part.state === "input-available" &&
         // Manual check inside the component
         toolsRequiringConfirmation.includes(
@@ -136,7 +136,7 @@ export default function Chat() {
   };
 
   return (
-    <div className="h-[100vh] w-full p-4 flex justify-center items-center bg-fixed overflow-hidden">
+    <div className="h-screen w-full p-4 flex justify-center items-center bg-fixed overflow-hidden">
       <HasOpenAIKey />
       <div className="h-[calc(100vh-2rem)] w-full mx-auto max-w-lg flex flex-col shadow-xl rounded-md overflow-hidden relative border border-neutral-300 dark:border-neutral-800">
         <div className="px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 flex items-center gap-3 sticky top-0 z-10">
@@ -242,7 +242,7 @@ export default function Chat() {
                     }`}
                   >
                     {showAvatar && !isUser ? (
-                      <Avatar username={"AI"} className="flex-shrink-0" />
+                      <Avatar username={"AI"} className="shrink-0" />
                     ) : (
                       !isUser && <div className="w-8" />
                     )}
@@ -295,7 +295,10 @@ export default function Chat() {
                             );
                           }
 
-                          if (isToolUIPart(part) && m.role === "assistant") {
+                          if (
+                            isStaticToolUIPart(part) &&
+                            m.role === "assistant"
+                          ) {
                             const toolCallId = part.toolCallId;
                             const toolName = part.type.replace("tool-", "");
                             const needsConfirmation =
@@ -361,7 +364,7 @@ export default function Chat() {
                     ? "Please respond to the tool confirmation above..."
                     : "Send a message..."
                 }
-                className="flex w-full border border-neutral-200 dark:border-neutral-700 px-3 py-2  ring-offset-background placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-700 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-2xl !text-base pb-10 dark:bg-neutral-900"
+                className="flex w-full border border-neutral-200 dark:border-neutral-700 px-3 py-2  ring-offset-background placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-700 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-2xl text-base! pb-10 dark:bg-neutral-900"
                 value={agentInput}
                 onChange={(e) => {
                   handleAgentInputChange(e);

src/app.tsx

@@ -51,7 +51,7 @@ export function ToolInvocationCard({
         className="w-full flex items-center gap-2 cursor-pointer"
       >
         <div
-          className={`${needsConfirmation ? "bg-[#F48120]/10" : "bg-[#F48120]/5"} p-1.5 rounded-full flex-shrink-0`}
+          className={`${needsConfirmation ? "bg-[#F48120]/10" : "bg-[#F48120]/5"} p-1.5 rounded-full shrink-0`}
         >
           <RobotIcon size={16} className="text-[#F48120]" />
         </div>
@@ -78,7 +78,7 @@ export function ToolInvocationCard({
             <h5 className="text-xs font-medium mb-1 text-muted-foreground">
               Arguments:
             </h5>
-            <pre className="bg-background/80 p-2 rounded-md text-xs overflow-auto whitespace-pre-wrap break-words max-w-[450px]">
+            <pre className="bg-background/80 p-2 rounded-md text-xs overflow-auto whitespace-pre-wrap wrap-break-word max-w-[450px]">
               {JSON.stringify(toolUIPart.input, null, 2)}
             </pre>
           </div>
@@ -107,7 +107,7 @@ export function ToolInvocationCard({
               <h5 className="text-xs font-medium mb-1 text-muted-foreground">
                 Result:
               </h5>
-              <pre className="bg-background/80 p-2 rounded-md text-xs overflow-auto whitespace-pre-wrap break-words max-w-[450px]">
+              <pre className="bg-background/80 p-2 rounded-md text-xs overflow-auto whitespace-pre-wrap wrap-break-word max-w-[450px]">
                 {(() => {
                   const result = toolUIPart.output;
                   if (isToolResultWithContent(result)) {

src/components/tool-invocation-card/ToolInvocationCard.tsx

@@ -68,7 +68,7 @@ ${getSchedulePrompt({ date: new Date() })}
 If the user asks to schedule a task, use the schedule tool to schedule the task.
 `,
 
-          messages: convertToModelMessages(processedMessages),
+          messages: await convertToModelMessages(processedMessages),
           model,
           tools: allTools,
           // Type boundary: streamText expects specific tool types, but base class uses ToolSet

src/server.ts

@@ -6,7 +6,7 @@ import type {
   ToolSet,
   ToolCallOptions
 } from "ai";
-import { convertToModelMessages, isToolUIPart } from "ai";
+import { convertToModelMessages, isStaticToolUIPart } from "ai";
 import { APPROVAL } from "./shared";
 
 function isValidToolName<K extends PropertyKey, T extends object>(
@@ -41,8 +41,8 @@ export async function processToolCalls<Tools extends ToolSet>({
 
       const processedParts = await Promise.all(
         parts.map(async (part) => {
-          // Only process tool UI parts
-          if (!isToolUIPart(part)) return part;
+          // Only process static tool UI parts (dynamic tools handled separately)
+          if (!isStaticToolUIPart(part)) return part;
 
           const toolName = part.type.replace(
             "tool-",
@@ -64,7 +64,7 @@ export async function processToolCalls<Tools extends ToolSet>({
             const toolInstance = executions[toolName];
             if (toolInstance) {
               result = await toolInstance(part.input, {
-                messages: convertToModelMessages(messages),
+                messages: await convertToModelMessages(messages),
                 toolCallId: part.toolCallId
               });
             } else {
@@ -109,7 +109,7 @@ export function cleanupMessages(messages: UIMessage[]): UIMessage[] {
 
     // Filter out messages with incomplete tool calls
     const hasIncompleteToolCall = message.parts.some((part) => {
-      if (!isToolUIPart(part)) return false;
+      if (!isStaticToolUIPart(part)) return false;
       // Remove tool calls that are still streaming or awaiting input without results
       return (
         part.state === "input-streaming" ||