@convex-dev/agent 0.2.8-alpha.2 → 0.2.8-alpha.4

package/src/react/useThreadMessages.ts

@@ -26,7 +26,7 @@ import type {
   MessageStatus,
   StreamArgs,
 } from "../validators.js";
-import type { StreamMessagesArgs, StreamQuery } from "./types.js";
+import type { StreamQueryArgs, StreamQuery } from "./types.js";
 import { useStreamingUIMessages } from "./useStreamingUIMessages.js";
 
 export type MessageDocLike = {
@@ -159,6 +159,8 @@ export function useThreadMessages<
     { startOrder },
   );
 
+  const threadId = args === "skip" ? undefined : args.threadId;
+
   const merged = useMemo(() => {
     const streamListMessages =
       streamMessages?.map((m) => ({
@@ -171,10 +173,13 @@ export function useThreadMessages<
         paginated.results
           .map((m) => ({ ...m, streaming: false }))
           // Note: this is intentionally after paginated results.
-          .concat(streamListMessages),
+          .concat(streamListMessages) as (MessageDocLike & {
+          streaming: boolean;
+          key: string;
+        })[],
       ).reduce(
-        (msgs, msg) => {
-          msg.key = `${msg.threadId}-${msg.order}-${msg.stepOrder}`;
+        (msgs, msg: MessageDocLike & { streaming: boolean; key: string }) => {
+          msg.key = `${threadId}-${msg.order}-${msg.stepOrder}`;
           const last = msgs.at(-1);
           if (!last) {
             return [msg];
@@ -193,10 +198,10 @@ export function useThreadMessages<
           // skip the new one if the previous one (listed) was finalized
           return msgs;
         },
-        [] as (ThreadMessagesResult<Query> & { streaming: boolean })[],
+        [] as (MessageDocLike & { streaming: boolean; key: string })[],
       ),
     };
-  }, [paginated, streamMessages]);
+  }, [paginated, streamMessages, threadId]);
 
   return merged as ThreadMessagesResult<Query> & {
     key: string;
@@ -223,7 +228,7 @@ export function useStreamingThreadMessages<
 >(
   query: Query,
   args:
-    | (StreamMessagesArgs<Query> & {
+    | (StreamQueryArgs<Query> & {
         /** @deprecated Pass startOrder to the next argument (third argument). */
         startOrder?: number;
       })
@@ -236,7 +241,7 @@ export function useStreamingThreadMessages<
   const queryArgs =
     args === "skip"
       ? args
-      : (omit(args, ["startOrder"]) as unknown as StreamMessagesArgs<Query>);
+      : (omit(args, ["startOrder"]) as unknown as StreamQueryArgs<Query>);
   const startOrder =
     args === "skip" ? undefined : (args.startOrder ?? undefined);
   const queryOptions = { startOrder, ...options };

package/src/react/useUIMessages.test.ts

@@ -0,0 +1,255 @@
+import { describe, it, expect } from "vitest";
+import { dedupeMessages } from "./useUIMessages.js";
+
+type TestMessage = {
+  order: number;
+  stepOrder: number;
+  status: "pending" | "success" | "failed" | "streaming";
+  id: string;
+};
+
+describe("dedupeMessages", () => {
+  it("should prefer messages from messages list when streaming messages are absent", () => {
+    const messages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "success", id: "msg1" },
+      { order: 2, stepOrder: 0, status: "success", id: "msg2" },
+    ];
+    const streamMessages: TestMessage[] = [];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(2);
+    expect(result).toEqual(messages);
+  });
+
+  it("should prefer streaming messages when messages list is empty", () => {
+    const messages: TestMessage[] = [];
+    const streamMessages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "streaming", id: "stream1" },
+      { order: 2, stepOrder: 0, status: "streaming", id: "stream2" },
+    ];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(2);
+    expect(result).toEqual(streamMessages);
+  });
+
+  it("should prefer non-pending messages over pending messages", () => {
+    const messages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "pending", id: "pending1" },
+      { order: 2, stepOrder: 0, status: "success", id: "success1" },
+    ];
+    const streamMessages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "success", id: "finalized1" },
+      { order: 2, stepOrder: 0, status: "streaming", id: "streaming1" },
+    ];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toEqual({
+      order: 1,
+      stepOrder: 0,
+      status: "success",
+      id: "finalized1",
+    });
+    expect(result[1]).toEqual({
+      order: 2,
+      stepOrder: 0,
+      status: "success",
+      id: "success1",
+    });
+  });
+
+  it("should prefer streaming over pending messages", () => {
+    const messages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "pending", id: "pending1" },
+    ];
+    const streamMessages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "streaming", id: "streaming1" },
+    ];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      order: 1,
+      stepOrder: 0,
+      status: "streaming",
+      id: "streaming1",
+    });
+  });
+
+  it("should prefer non-pending messages from messages list over streaming messages", () => {
+    const messages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "success", id: "success1" },
+    ];
+    const streamMessages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "streaming", id: "streaming1" },
+    ];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      order: 1,
+      stepOrder: 0,
+      status: "success",
+      id: "success1",
+    });
+  });
+
+  it("should handle complex scenarios with multiple duplicates", () => {
+    const messages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "pending", id: "pending1" },
+      { order: 2, stepOrder: 0, status: "success", id: "success2" },
+      { order: 3, stepOrder: 0, status: "failed", id: "failed3" },
+      { order: 4, stepOrder: 0, status: "success", id: "success4" },
+    ];
+    const streamMessages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "streaming", id: "streaming1" },
+      { order: 2, stepOrder: 0, status: "streaming", id: "streaming2" },
+      { order: 5, stepOrder: 0, status: "streaming", id: "streaming5" },
+    ];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(5);
+    // Order 1: streaming should replace pending
+    expect(result[0]).toEqual({
+      order: 1,
+      stepOrder: 0,
+      status: "streaming",
+      id: "streaming1",
+    });
+    // Order 2: success should be kept over streaming
+    expect(result[1]).toEqual({
+      order: 2,
+      stepOrder: 0,
+      status: "success",
+      id: "success2",
+    });
+    // Order 3: failed should be kept (no streaming equivalent)
+    expect(result[2]).toEqual({
+      order: 3,
+      stepOrder: 0,
+      status: "failed",
+      id: "failed3",
+    });
+    // Order 4: success should be kept (no streaming equivalent)
+    expect(result[3]).toEqual({
+      order: 4,
+      stepOrder: 0,
+      status: "success",
+      id: "success4",
+    });
+    // Order 5: streaming should be added (no messages equivalent)
+    expect(result[4]).toEqual({
+      order: 5,
+      stepOrder: 0,
+      status: "streaming",
+      id: "streaming5",
+    });
+  });
+
+  it("should handle different stepOrder values correctly", () => {
+    const messages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "pending", id: "pending1-0" },
+      { order: 1, stepOrder: 1, status: "success", id: "success1-1" },
+    ];
+    const streamMessages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "streaming", id: "streaming1-0" },
+      { order: 1, stepOrder: 2, status: "streaming", id: "streaming1-2" },
+    ];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(3);
+    // Order 1, stepOrder 0: streaming should replace pending
+    expect(result[0]).toEqual({
+      order: 1,
+      stepOrder: 0,
+      status: "streaming",
+      id: "streaming1-0",
+    });
+    // Order 1, stepOrder 1: success should be kept
+    expect(result[1]).toEqual({
+      order: 1,
+      stepOrder: 1,
+      status: "success",
+      id: "success1-1",
+    });
+    // Order 1, stepOrder 2: streaming should be added
+    expect(result[2]).toEqual({
+      order: 1,
+      stepOrder: 2,
+      status: "streaming",
+      id: "streaming1-2",
+    });
+  });
+
+  it("should maintain proper sorting by order and stepOrder", () => {
+    const messages: TestMessage[] = [
+      { order: 3, stepOrder: 0, status: "success", id: "msg3" },
+      { order: 1, stepOrder: 1, status: "success", id: "msg1-1" },
+      { order: 1, stepOrder: 0, status: "pending", id: "msg1-0" },
+    ];
+    const streamMessages: TestMessage[] = [
+      { order: 2, stepOrder: 0, status: "streaming", id: "stream2" },
+      { order: 1, stepOrder: 0, status: "streaming", id: "stream1-0" },
+    ];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(4);
+    // Should be sorted by order, then stepOrder
+    expect(result[0]).toEqual({
+      order: 1,
+      stepOrder: 0,
+      status: "streaming",
+      id: "stream1-0",
+    });
+    expect(result[1]).toEqual({
+      order: 1,
+      stepOrder: 1,
+      status: "success",
+      id: "msg1-1",
+    });
+    expect(result[2]).toEqual({
+      order: 2,
+      stepOrder: 0,
+      status: "streaming",
+      id: "stream2",
+    });
+    expect(result[3]).toEqual({
+      order: 3,
+      stepOrder: 0,
+      status: "success",
+      id: "msg3",
+    });
+  });
+
+  it("should handle empty arrays", () => {
+    const result = dedupeMessages([], []);
+    expect(result).toEqual([]);
+  });
+
+  it("should demonstrate order dependency when messages and streamMessages have same order/stepOrder", () => {
+    // This test shows that the current implementation doesn't guarantee
+    // which message wins when they have the same order/stepOrder and status
+    const messages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "success", id: "messages-success" },
+    ];
+    const streamMessages: TestMessage[] = [
+      { order: 1, stepOrder: 0, status: "success", id: "stream-success" },
+    ];
+
+    const result = dedupeMessages(messages, streamMessages);
+
+    expect(result).toHaveLength(1);
+    // The result depends on which array comes first in messages.concat(streamMessages)
+    // Since messages comes first, it should win when both have same status
+    expect(result[0].id).toBe("messages-success");
+  });
+});

package/src/react/useUIMessages.ts

@@ -19,14 +19,14 @@ import { useMemo } from "react";
 import type { SyncStreamsReturnValue } from "../client/types.js";
 import type { MessageStatus, StreamArgs } from "../validators.js";
 import type { StreamQuery } from "./types.js";
-import { type UIMessage } from "../UIMessages.js";
+import { type UIMessage, type UIStatus } from "../UIMessages.js";
 import { sorted } from "../shared.js";
 import { useStreamingUIMessages } from "./useStreamingUIMessages.js";
 
 export type UIMessageLike = {
   order: number;
   stepOrder: number;
-  status: MessageStatus | "streaming";
+  status: UIStatus;
   parts: UIMessage["parts"];
   role: UIMessage["role"];
 };
@@ -129,10 +129,9 @@ export function useUIMessages<
     stream?: Query extends StreamQuery
       ? boolean
       : ErrorMessage<"To enable streaming, your query must take in streamArgs: vStreamArgs and return a streams object returned from syncStreams. See docs.">;
+    skipStreamIds?: string[];
   },
-): UsePaginatedQueryResult<
-  UIMessagesQueryResult<Query> & { streaming: boolean }
-> {
+): UsePaginatedQueryResult<UIMessagesQueryResult<Query>> {
   // These are full messages
   const paginated = usePaginatedQuery(
     query,
@@ -140,15 +139,9 @@ export function useUIMessages<
     { initialNumItems: options.initialNumItems },
   );
 
-  let startOrder = paginated.results.at(-1)?.order ?? 0;
-  for (let i = paginated.results.length - 1; i >= 0; i--) {
-    const m = paginated.results[i];
-    if (!m.streaming && m.status === "pending") {
-      // round down to the nearest 10 for some cache benefits
-      startOrder = m.order - (m.order % 10);
-      break;
-    }
-  }
+  const startOrder = paginated.results.length
+    ? Math.min(...paginated.results.map((m) => m.order))
+    : 0;
   // These are streaming messages that will not include full messages.
   const streamMessages = useStreamingUIMessages(
     query as StreamQuery<UIMessagesQueryArgs<Query>>,
@@ -158,50 +151,43 @@ export function useUIMessages<
       ? "skip"
       : // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ({ ...args, paginationOpts: { cursor: null, numItems: 0 } } as any),
-    { startOrder },
+    { startOrder, skipStreamIds: options.skipStreamIds },
   );
 
   const merged = useMemo(() => {
-    const streamListMessages =
-      streamMessages?.map((m) => ({
-        ...m,
-        streaming: m.status === "streaming",
-      })) ?? [];
     return {
       ...paginated,
-      results: sorted(
-        paginated.results
-          .map((m) => ({ ...m, streaming: false }))
-          // Note: this is intentionally after paginated results.
-          .concat(streamListMessages),
-      ).reduce(
-        (msgs, msg) => {
-          const last = msgs.at(-1);
-          if (!last) {
-            return [msg];
-          }
-          if (last.order !== msg.order || last.stepOrder !== msg.stepOrder) {
-            return [...msgs, msg];
-          }
-          if (
-            last.status === "pending" &&
-            (msg.streaming || msg.status !== "pending")
-          ) {
-            // Let's prefer a streaming or finalized message over a pending
-            // one.
-            return [...msgs.slice(0, -1), msg];
-          }
-          // skip the new one if the previous one (listed) was finalized
-          return msgs;
-        },
-        [] as (UIMessagesQueryResult<Query> & {
-          streaming: boolean;
-        })[],
-      ),
+      results: dedupeMessages(paginated.results, streamMessages ?? []),
     };
   }, [paginated, streamMessages]);
 
-  return merged as UIMessagesQueryResult<Query> & {
-    streaming: boolean;
-  };
+  return merged as UIMessagesQueryResult<Query>;
+}
+
+export function dedupeMessages<
+  M extends {
+    order: number;
+    stepOrder: number;
+    status: UIStatus;
+  },
+>(messages: M[], streamMessages: M[]): M[] {
+  return sorted(messages.concat(streamMessages)).reduce((msgs, msg) => {
+    const last = msgs.at(-1);
+    if (!last) {
+      return [msg];
+    }
+    if (last.order !== msg.order || last.stepOrder !== msg.stepOrder) {
+      return [...msgs, msg];
+    }
+    if (
+      (last.status === "pending" || last.status === "streaming") &&
+      msg.status !== "pending"
+    ) {
+      // Let's prefer a streaming or finalized message over a pending
+      // one.
+      return [...msgs.slice(0, -1), msg];
+    }
+    // skip the new one if the previous one (listed) was finalized
+    return msgs;
+  }, [] as M[]);
 }

package/src/shared.ts

@@ -25,11 +25,13 @@ export function extractText(message: Message | ModelMessage) {
     case "assistant":
       if (typeof message.content === "string") {
         return message.content;
+      } else {
+        const textParts = message.content.filter((c) => c.type === "text");
+        if (!textParts.length) {
+          return undefined;
+        }
+        return textParts.map((c) => c.text).join("");
       }
-      return message.content
-        .filter((c) => c.type === "text")
-        .map((c) => c.text)
-        .join("");
     case "system":
       return message.content;
     // we don't extract text from tool messages

package/src/toUIMessages.test.ts

@@ -170,7 +170,7 @@ describe("toUIMessages", () => {
     const uiMessages = toUIMessages(messages);
     expect(uiMessages).toHaveLength(1);
     expect(uiMessages[0].role).toBe("assistant");
-    expect(uiMessages[0].text).toBe("Here's one idea. Here's another idea.");
+    expect(uiMessages[0].text).toBe("Here's one idea.Here's another idea.");
     expect(uiMessages[0].parts.filter((p) => p.type === "reasoning")).toEqual([
       {
         providerOptions: undefined,