@convex-dev/agent 0.1.18 → 0.2.0

package/src/react/toUIMessages.test.ts

@@ -31,7 +31,7 @@ describe("toUIMessages", () => {
     const uiMessages = toUIMessages(messages);
     expect(uiMessages).toHaveLength(1);
     expect(uiMessages[0].role).toBe("user");
-    expect(uiMessages[0].content).toBe("Hello!");
+    expect(uiMessages[0].text).toBe("Hello!");
     expect(uiMessages[0].parts[0]).toEqual({ type: "text", text: "Hello!" });
   });
 
@@ -48,10 +48,11 @@ describe("toUIMessages", () => {
     const uiMessages = toUIMessages(messages);
     expect(uiMessages).toHaveLength(1);
     expect(uiMessages[0].role).toBe("assistant");
-    expect(uiMessages[0].content).toBe("Hi, how can I help?");
+    expect(uiMessages[0].text).toBe("Hi, how can I help?");
     expect(uiMessages[0].parts[0]).toEqual({
       type: "text",
       text: "Hi, how can I help?",
+      state: "done",
     });
   });
 
@@ -83,13 +84,13 @@ describe("toUIMessages", () => {
             {
               type: "file",
               mimeType: "text/plain",
-              data: "asdfasdfasdf",
+              data: "https://example.com/file.txt",
             },
             {
               type: "tool-call",
               toolName: "myTool",
               toolCallId: "call1",
-              args: "",
+              args: "an arg",
             },
           ],
         },
@@ -109,7 +110,6 @@ describe("toUIMessages", () => {
             },
           ],
         },
-        text: "42",
         tool: true,
       }),
     ];
@@ -121,18 +121,15 @@ describe("toUIMessages", () => {
     );
     expect(uiMessages[1].role).toBe("assistant");
     expect(
-      uiMessages[1].parts.filter((p) => p.type === "tool-invocation"),
+      uiMessages[1].parts.filter((p) => p.type === "tool-myTool"),
     ).toHaveLength(1);
     expect(
-      uiMessages[1].parts.filter((p) => p.type === "tool-invocation")[0]
-        .toolInvocation,
-    ).toEqual({
-      toolName: "myTool",
+      uiMessages[1].parts.filter((p) => p.type === "tool-myTool")[0],
+    ).toMatchObject({
+      type: "tool-myTool",
       toolCallId: "call1",
-      args: "",
-      state: "result",
-      result: "42",
-      step: 0,
+      state: "output-available",
+      output: "42",
     });
   });
 
@@ -167,21 +164,39 @@ describe("toUIMessages", () => {
     const uiMessages = toUIMessages(messages);
     expect(uiMessages).toHaveLength(1);
     expect(uiMessages[0].role).toBe("assistant");
-    expect(uiMessages[0].content).toBe("Here's one idea. Here's another idea.");
-    expect(
-      uiMessages[0].parts.filter((p) => p.type === "reasoning"),
-    ).toHaveLength(1);
+    expect(uiMessages[0].text).toBe("Here's one idea. Here's another idea.");
+    expect(uiMessages[0].parts.filter((p) => p.type === "reasoning")).toEqual([
+      {
+        providerMetadata: undefined,
+        state: undefined,
+        text: "I'm thinking...",
+        type: "reasoning",
+      },
+      {
+        providerMetadata: undefined,
+        state: undefined,
+        text: "I'm thinking...",
+        type: "reasoning",
+      },
+    ]);
     expect(uiMessages[0].parts[0].type).toBe("reasoning");
     assert(uiMessages[0].parts[0].type === "reasoning");
-    expect(uiMessages[0].parts[0].reasoning).toBe(
-      "I'm thinking...I'm thinking...",
-    );
+    expect(uiMessages[0].parts[0].text).toBe("I'm thinking...");
+    expect(uiMessages[0].parts[1].type).toBe("text");
+    assert(uiMessages[0].parts[1].type === "text");
+    expect(uiMessages[0].parts[1].text).toBe("Here's one idea.");
+    expect(uiMessages[0].parts[2].type).toBe("reasoning");
+    assert(uiMessages[0].parts[2].type === "reasoning");
+    expect(uiMessages[0].parts[2].text).toBe("I'm thinking...");
 
     expect(uiMessages[0].parts.filter((p) => p.type === "text")).toHaveLength(
-      1,
+      2,
     );
     expect(uiMessages[0].parts.filter((p) => p.type === "text")[0].text).toBe(
-      "Here's one idea. Here's another idea.",
+      "Here's one idea.",
+    );
+    expect(uiMessages[0].parts.filter((p) => p.type === "text")[1].text).toBe(
+      "Here's another idea.",
     );
   });
 
@@ -198,10 +213,58 @@ describe("toUIMessages", () => {
     const uiMessages = toUIMessages(messages);
     expect(uiMessages).toHaveLength(1);
     expect(uiMessages[0].role).toBe("system");
-    expect(uiMessages[0].content).toBe("System message here");
+    expect(uiMessages[0].text).toBe("System message here");
     expect(uiMessages[0].parts[0]).toEqual({
       type: "text",
       text: "System message here",
+      state: "done",
+      providerMetadata: undefined,
+    });
+  });
+
+  it("handles wrapped JSON tool output", () => {
+    const messages = [
+      baseMessageDoc({
+        message: {
+          role: "assistant",
+          content: [
+            {
+              type: "tool-call",
+              toolName: "myTool",
+              toolCallId: "call1",
+              args: { query: "test" },
+            },
+          ],
+        },
+        tool: true,
+      }),
+      baseMessageDoc({
+        message: {
+          role: "tool",
+          content: [
+            {
+              type: "tool-result",
+              toolName: "myTool",
+              toolCallId: "call1",
+              result: {
+                type: "json",
+                value: { data: "wrapped result", success: true },
+              },
+            },
+          ],
+        },
+        tool: true,
+      }),
+    ];
+    const uiMessages = toUIMessages(messages);
+    expect(uiMessages).toHaveLength(1);
+    const toolPart = uiMessages[0].parts.find((p) => p.type === "tool-myTool");
+    expect(toolPart).toMatchObject({
+      type: "tool-myTool",
+      toolCallId: "call1",
+      state: "output-available",
+      input: { query: "test" },
+      output: { data: "wrapped result", success: true }, // Should be unwrapped
     });
   });
 
@@ -215,7 +278,7 @@ describe("toUIMessages", () => {
               type: "tool-call",
               toolName: "myTool",
               toolCallId: "call1",
-              args: "",
+              args: "hi",
             },
           ],
         },
@@ -226,17 +289,12 @@ describe("toUIMessages", () => {
     expect(uiMessages).toHaveLength(1);
     expect(uiMessages[0].role).toBe("assistant");
     expect(
-      uiMessages[0].parts.filter((p) => p.type === "tool-invocation"),
-    ).toHaveLength(1);
-    expect(
-      uiMessages[0].parts.filter((p) => p.type === "tool-invocation")[0]
-        .toolInvocation,
-    ).toEqual({
-      toolName: "myTool",
+      uiMessages[0].parts.filter((p) => p.type === "tool-myTool")[0],
+    ).toMatchObject({
+      type: "tool-myTool",
       toolCallId: "call1",
-      args: "",
-      state: "call",
-      step: 0,
+      input: "hi",
+      state: "input-available",
     });
   });
 
@@ -276,7 +334,7 @@ describe("toUIMessages", () => {
     expect(uiMessages).toHaveLength(1);
     expect(uiMessages[0].role).toBe("assistant");
     // Should have a tool-invocation part
-    expect(uiMessages[0].parts.some((p) => p.type === "tool-invocation")).toBe(
+    expect(uiMessages[0].parts.some((p) => p.type === "tool-myTool")).toBe(
       true,
     );
   });
@@ -299,4 +357,64 @@ describe("toUIMessages", () => {
   });
 
   // Add more tests for array content, tool calls, etc. as needed
+
+  it("should update tool call state from input-available to output-available", () => {
+    const messages = [
+      baseMessageDoc({
+        message: {
+          role: "assistant",
+          content: [
+            {
+              type: "tool-call",
+              toolName: "calculator",
+              toolCallId: "call1",
+              args: { operation: "add", a: 1, b: 2 },
+            },
+          ],
+        },
+        tool: true,
+      }),
+      baseMessageDoc({
+        message: {
+          role: "tool",
+          content: [
+            {
+              type: "tool-result",
+              toolCallId: "call1",
+              toolName: "calculator",
+              result: { sum: 3 },
+            },
+          ],
+        },
+        tool: true,
+      }),
+    ];
+
+    const uiMessages = toUIMessages(messages);
+
+    // Should have one assistant message
+    expect(uiMessages).toHaveLength(1);
+    expect(uiMessages[0].role).toBe("assistant");
+
+    // Should have a single tool-calculator part (not separate tool-call and tool-result parts)
+    const toolParts = uiMessages[0].parts.filter(
+      (p) => p.type === "tool-calculator",
+    );
+    expect(toolParts).toHaveLength(1);
+
+    const toolPart = toolParts[0];
+    expect(toolPart).toMatchObject({
+      type: "tool-calculator",
+      toolCallId: "call1",
+      state: "output-available",
+      input: { operation: "add", a: 1, b: 2 },
+      output: { sum: 3 },
+    });
+
+    // Should NOT have a tool-call part (which is what currently happens)
+    const toolCallParts = uiMessages[0].parts.filter(
+      (p) => p.type === "tool-call",
+    );
+    expect(toolCallParts).toHaveLength(0);
+  });
 });

package/src/react/toUIMessages.ts

@@ -1,22 +1,41 @@
-import type { ToolInvocationUIPart } from "@ai-sdk/ui-utils";
-import type { UIMessage as AIUIMessage } from "ai";
+import type {
+  UIMessage as AIUIMessage,
+  DeepPartial,
+  ReasoningUIPart,
+  SourceDocumentUIPart,
+  SourceUrlUIPart,
+  StepStartUIPart,
+  TextUIPart,
+  ToolUIPart,
+  UIDataTypes,
+  UITools,
+} from "ai";
 import type { MessageDoc } from "../client/index.js";
 import { deserializeMessage, toUIFilePart } from "../mapping.js";
 import type { MessageStatus } from "../validators.js";
 
-export type UIMessage = AIUIMessage & {
+export type UIMessage<
+  METADATA = unknown,
+  DATA_PARTS extends UIDataTypes = UIDataTypes,
+  TOOLS extends UITools = UITools,
+> = AIUIMessage<METADATA, DATA_PARTS, TOOLS> & {
   key: string;
   order: number;
   stepOrder: number;
   status: "streaming" | MessageStatus;
   agentName?: string;
+  text: string;
 };
 
-export function toUIMessages(
+export function toUIMessages<
+  METADATA = unknown,
+  DATA_PARTS extends UIDataTypes = UIDataTypes,
+  TOOLS extends UITools = UITools,
+>(
   messages: (MessageDoc & { streaming?: boolean })[],
-): UIMessage[] {
-  const uiMessages: UIMessage[] = [];
-  let assistantMessage: UIMessage | undefined;
+): UIMessage<METADATA, DATA_PARTS, TOOLS>[] {
+  const uiMessages: UIMessage<METADATA, DATA_PARTS, TOOLS>[] = [];
+  let assistantMessage: UIMessage<METADATA, DATA_PARTS, TOOLS> | undefined;
   for (const message of messages) {
     const coreMessage = message.message && deserializeMessage(message.message);
     const text = message.text ?? "";
@@ -31,17 +50,23 @@ export function toUIMessages(
       stepOrder: message.stepOrder,
       status: message.streaming ? ("streaming" as const) : message.status,
       key: `${message.threadId}-${message.order}-${message.stepOrder}`,
+      text,
+    };
+    const partCommon = {
+      state: message.streaming ? ("streaming" as const) : ("done" as const),
+      ...(message.providerMetadata
+        ? { providerMetadata: message.providerMetadata }
+        : {}),
     };
     if (coreMessage.role === "system") {
       uiMessages.push({
         ...common,
         role: "system",
-        content: text,
         agentName: message.agentName,
-        parts: [{ type: "text", text }],
+        parts: [{ type: "text", text, ...partCommon } satisfies TextUIPart],
       });
     } else if (coreMessage.role === "user") {
-      const parts: UIMessage["parts"] = [];
+      const parts: UIMessage<METADATA, DATA_PARTS, TOOLS>["parts"] = [];
       if (text) {
         parts.push({ type: "text", text });
       }
@@ -56,7 +81,6 @@ export function toUIMessages(
       uiMessages.push({
         ...common,
         role: "user",
-        content: message.text ?? "",
         parts,
       });
     } else {
@@ -72,7 +96,6 @@ export function toUIMessages(
           ...common,
           role: "assistant",
           agentName: message.agentName,
-          content: "",
           parts: [],
         };
         uiMessages.push(assistantMessage);
@@ -83,78 +106,134 @@ export function toUIMessages(
       }
       // update it to the last message's id
       assistantMessage.id = message._id;
-      if (message.reasoning) {
+      if (
+        message.reasoning &&
+        !nonStringContent.some((c) => c.type === "reasoning")
+      ) {
         assistantMessage.parts.push({
           type: "reasoning",
-          reasoning: message.reasoning,
-          details: message.reasoningDetails ?? [],
-        });
+          text: message.reasoning,
+          ...partCommon,
+        } satisfies ReasoningUIPart);
       }
-      if (message.text) {
+      if (message.text && !nonStringContent.length) {
         assistantMessage.parts.push({
           type: "text",
           text: message.text,
-        });
-        assistantMessage.content += message.text;
+          ...partCommon,
+        } satisfies TextUIPart);
       }
       for (const source of message.sources ?? []) {
-        assistantMessage.parts.push({
-          type: "source",
-          source,
-        });
+        if (source.sourceType === "url") {
+          assistantMessage.parts.push({
+            type: "source-url",
+            url: source.url!,
+            sourceId: source.id,
+            providerMetadata: message.providerMetadata,
+            title: source.title,
+          } satisfies SourceUrlUIPart);
+        } else {
+          assistantMessage.parts.push({
+            type: "source-document",
+            mediaType: source.mediaType,
+            sourceId: source.id,
+            title: source.title,
+            filename: source.filename,
+            providerMetadata: message.providerMetadata,
+          } satisfies SourceDocumentUIPart);
+        }
       }
       for (const contentPart of nonStringContent) {
         switch (contentPart.type) {
+          case "text":
+            assistantMessage.parts.push({
+              ...partCommon,
+              ...contentPart,
+            } satisfies TextUIPart);
+            break;
+          case "reasoning":
+            assistantMessage.parts.push({
+              ...partCommon,
+              ...contentPart,
+            } satisfies ReasoningUIPart);
+            break;
           case "file":
           case "image":
             assistantMessage.parts.push(toUIFilePart(contentPart));
             break;
-          case "tool-call":
+          case "tool-call": {
             assistantMessage.parts.push({
               type: "step-start",
-            });
-            assistantMessage.parts.push({
-              type: "tool-invocation",
-              toolInvocation: {
-                state: "call",
-                step: assistantMessage.parts.filter(
-                  (part) => part.type === "tool-invocation",
-                ).length,
-                toolCallId: contentPart.toolCallId,
-                toolName: contentPart.toolName,
-                args: contentPart.args,
-              },
-            });
+            } satisfies StepStartUIPart);
+            const toolPart: ToolUIPart<TOOLS> = {
+              type: `tool-${contentPart.toolName as keyof TOOLS & string}`,
+              toolCallId: contentPart.toolCallId,
+              input: contentPart.input as DeepPartial<
+                TOOLS[keyof TOOLS & string]["input"]
+              >,
+              providerExecuted: contentPart.providerExecuted,
+              ...(message.streaming
+                ? { state: "input-streaming" }
+                : {
+                    state: "input-available",
+                    callProviderMetadata: message.providerMetadata,
+                  }),
+            };
+            assistantMessage.parts.push(toolPart);
             break;
+          }
           case "tool-result": {
             const call = assistantMessage.parts.find(
               (part) =>
-                part.type === "tool-invocation" &&
-                part.toolInvocation.toolCallId === contentPart.toolCallId,
-            ) as ToolInvocationUIPart | undefined;
-            const toolInvocation: ToolInvocationUIPart["toolInvocation"] = {
-              state: "result",
-              toolCallId: contentPart.toolCallId,
-              toolName: contentPart.toolName,
-              args: call?.toolInvocation.args,
-              result: contentPart.result,
-              step:
-                call?.toolInvocation.step ??
-                assistantMessage.parts.filter(
-                  (part) => part.type === "tool-invocation",
-                ).length,
-            };
+                part.type === `tool-${contentPart.toolName}` &&
+                "toolCallId" in part &&
+                part.toolCallId === contentPart.toolCallId,
+            ) as ToolUIPart | undefined;
             if (call) {
-              (call as ToolInvocationUIPart).toolInvocation = toolInvocation;
+              if (message.error) {
+                call.state = "output-error";
+                call.errorText = message.error;
+                call.output = contentPart.output;
+              } else {
+                call.state = "output-available";
+                call.output =
+                  contentPart.output?.type === "json"
+                    ? contentPart.output.value
+                    : contentPart.output;
+                // Technically we could pull this from the doc.message
+                // but the ModelMessage doesn't have it
+                // call.providerExecuted = contentPart.providerExecuted;
+              }
             } else {
               console.warn(
                 "Tool result without preceding tool call.. adding anyways",
                 contentPart,
               );
-              assistantMessage.parts.push({
-                type: "tool-invocation",
-                toolInvocation,
-              });
+              if (message.error) {
+                assistantMessage.parts.push({
+                  type: `tool-${contentPart.toolName}`,
+                  toolCallId: contentPart.toolCallId,
+                  state: "output-error",
+                  input: undefined,
+                  errorText: message.error,
+                  // Technically we could pull this from the doc.message
+                  // but the ModelMessage doesn't have it
+                  // providerExecuted: contentPart.providerExecuted,
+                  callProviderMetadata: message.providerMetadata,
+                } satisfies ToolUIPart<TOOLS>);
+              } else {
+                assistantMessage.parts.push({
+                  type: `tool-${contentPart.toolName}`,
+                  toolCallId: contentPart.toolCallId,
+                  state: "output-available",
+                  input: undefined,
+                  output:
+                    contentPart.output?.type === "json"
+                      ? contentPart.output.value
+                      : contentPart.output,
+                  callProviderMetadata: message.providerMetadata,
+                } satisfies ToolUIPart<TOOLS>);
+              }
             }
             break;
           }

package/src/react/useSmoothText.ts

@@ -3,6 +3,19 @@ import { useEffect, useRef, useState } from "react";
 const FPS = 20;
 const MS_PER_FRAME = 1000 / FPS;
 const MAX_TIME_JUMP_MS = 250;
+
+export type SmoothTextOptions = {
+  /**
+   * The number of characters to display per second.
+   */
+  charsPerSec?: number;
+  /**
+   * Whether to initially start streaming.
+   * If this later turns to false, it'll continue streaming.
+   * This will start streaming the first value it sees.
+   */
+  startStreaming?: boolean;
+};
 /**
  * A hook that smoothly displays text as it is streamed.
  *
@@ -15,21 +28,7 @@ const MAX_TIME_JUMP_MS = 250;
  */
 export function useSmoothText(
   text: string,
-  {
-    charsPerSec = 256,
-    startStreaming = false,
-  }: {
-    /**
-     * The number of characters to display per second.
-     */
-    charsPerSec?: number;
-    /**
-     * Whether to initially start streaming.
-     * If this later turns to false, it'll continue streaming.
-     * This will start streaming the first value it sees.
-     */
-    startStreaming?: boolean;
-  } = {},
+  { charsPerSec = 256, startStreaming = false }: SmoothTextOptions = {},
 ): [string, { cursor: number; isStreaming: boolean }] {
   const [visibleText, setVisibleText] = useState(startStreaming ? "" : text);
   const smoothState = useRef({