@convex-dev/agent 0.1.2-alpha.0 → 0.1.2

package/src/react/index.ts

@@ -1,6 +1,7 @@
 import type { TextPart, ToolCallPart, ToolResultPart } from "ai";
 import type { BetterOmit, ErrorMessage, Expand } from "convex-helpers";
 import {
+  insertAtTop,
   type PaginatedQueryArgs,
   usePaginatedQuery,
   type UsePaginatedQueryResult,
@@ -12,7 +13,7 @@ import type {
   PaginationOptions,
   PaginationResult,
 } from "convex/server";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { MessageDoc } from "../client";
 import type { SyncStreamsReturnValue } from "../client/types";
 import type {
@@ -21,10 +22,12 @@ import type {
   StreamMessage,
   TextStreamPart,
 } from "../validators";
-import type { UIMessageOrdered } from "./toUIMessages";
+import type { UIMessage } from "./toUIMessages";
 import { toUIMessages } from "./toUIMessages";
+import { OptimisticLocalStore } from "convex/browser";
+import { api } from "../component/_generated/api";
 
-export { toUIMessages, type UIMessageOrdered };
+export { toUIMessages, type UIMessage };
 
 /**
  * A hook that fetches messages from a thread.
@@ -220,6 +223,102 @@ export function useStreamingThreadMessages<
   return messages as ThreadMessagesResult<Query>[] | undefined;
 }
 
+/**
+ * A hook that smoothly displays text as it is streamed.
+ *
+ * @param text The text to display. Pass in the full text each time.
+ * @param charsPerSec The number of characters to display per second.
+ * @returns A tuple of the visible text and the state of the smooth text,
+ * including the current cursor position and whether it's still streaming.
+ * This allows you to decide if it's too far behind and you want to adjust
+ * the charsPerSec or just prefer the full text.
+ */
+export function useSmoothText(
+  text: string,
+  {
+    charsPerSec = 512,
+  }: {
+    /**
+     * The number of characters to display per second.
+     */
+    charsPerSec?: number;
+  } = {}
+): [string, { cursor: number; isStreaming: boolean }] {
+  const [visibleText, setVisibleText] = useState(text);
+  const smoothState = useRef({ lastUpdated: Date.now(), cursor: text.length });
+
+  const isStreaming = smoothState.current.cursor < text.length;
+
+  useEffect(() => {
+    if (!isStreaming) {
+      return;
+    }
+    function update() {
+      if (smoothState.current.cursor >= text.length) {
+        return;
+      }
+      const now = Date.now();
+      const timeSinceLastUpdate = now - smoothState.current.lastUpdated;
+      const chars = Math.floor((timeSinceLastUpdate * charsPerSec) / 1000);
+      smoothState.current.cursor = Math.min(
+        smoothState.current.cursor + chars,
+        text.length
+      );
+      smoothState.current.lastUpdated = now;
+      setVisibleText(text.slice(0, smoothState.current.cursor));
+    }
+    update();
+    const interval = setInterval(() => {
+      update();
+    }, 1000 / 60);
+    return () => clearInterval(interval);
+  }, [text, isStreaming, charsPerSec]);
+
+  return [visibleText, { cursor: smoothState.current.cursor, isStreaming }];
+}
+
+export function optimisticallySendMessage(
+  query: ThreadQuery<unknown, MessageDoc>
+): (
+  store: OptimisticLocalStore,
+  args: { threadId: string; prompt: string }
+) => void {
+  return (store, args) => {
+    const queries = store.getAllQueries(query);
+    let maxOrder = 0;
+    let maxStepOrder = 0;
+    for (const q of queries) {
+      if (q.args?.threadId !== args.threadId) continue;
+      if (q.args.streamArgs) continue;
+      for (const m of q.value?.page ?? []) {
+        maxOrder = Math.max(maxOrder, m.order);
+        maxStepOrder = Math.max(maxStepOrder, m.stepOrder);
+      }
+    }
+    const order = maxOrder + 1;
+    const stepOrder = 0;
+    insertAtTop({
+      paginatedQuery: query,
+      argsToMatch: { threadId: args.threadId, streamArgs: undefined },
+      item: {
+        _creationTime: Date.now(),
+        _id: crypto.randomUUID(),
+        order,
+        stepOrder,
+        status: "pending",
+        threadId: args.threadId,
+        tool: false,
+        message: {
+          role: "user",
+          content: args.prompt,
+        },
+        text: args.prompt,
+      },
+      localQueryStore: store,
+    });
+  };
+}
+
 function mergeDeltas(
   threadId: string,
   streamMessages: StreamMessage[],

package/src/react/toUIMessages.ts

@@ -1,16 +1,21 @@
-import { UIMessage } from "ai";
+import { UIMessage as AIUIMessage } from "ai";
 import type { ToolInvocationUIPart } from "@ai-sdk/ui-utils";
 import { MessageDoc } from "../client";
 import { deserializeMessage, toUIFilePart } from "../mapping";
+import { MessageStatus } from "../validators";
 
-export type UIMessageOrdered = UIMessage & {
+export type UIMessage = AIUIMessage & {
+  key: string;
   order: number;
   stepOrder: number;
+  status: "streaming" | MessageStatus;
 };
 
-export function toUIMessages(messages: MessageDoc[]): UIMessageOrdered[] {
-  const uiMessages: UIMessageOrdered[] = [];
-  let assistantMessage: UIMessageOrdered | undefined;
+export function toUIMessages(
+  messages: (MessageDoc & { streaming?: boolean })[]
+): UIMessage[] {
+  const uiMessages: UIMessage[] = [];
+  let assistantMessage: UIMessage | undefined;
   for (const message of messages) {
     const coreMessage = message.message && deserializeMessage(message.message);
     const text = message.text ?? "";
@@ -18,15 +23,20 @@ export function toUIMessages(messages: MessageDoc[]): UIMessageOrdered[] {
     const nonStringContent =
       content && typeof content !== "string" ? content : [];
     if (!coreMessage) continue;
+    const common = {
+      id: message.id ?? message._id,
+      createdAt: new Date(message._creationTime),
+      order: message.order,
+      stepOrder: message.stepOrder,
+      status: message.streaming ? ("streaming" as const) : message.status,
+      key: `${message.threadId}-${message.order}-${message.stepOrder}`,
+    };
     if (coreMessage.role === "system") {
       uiMessages.push({
-        id: message.id ?? message._id,
-        createdAt: new Date(message._creationTime),
+        ...common,
         role: "system",
         content: text,
         parts: [{ type: "text", text }],
-        order: message.order,
-        stepOrder: message.stepOrder,
       });
     } else if (coreMessage.role === "user") {
       const parts: UIMessage["parts"] = [];
@@ -37,13 +47,10 @@ export function toUIMessages(messages: MessageDoc[]): UIMessageOrdered[] {
         parts.push(...message.files.map(toUIFilePart));
       }
       uiMessages.push({
-        id: message.id ?? message._id,
-        createdAt: new Date(message._creationTime),
+        ...common,
         role: "user",
         content: message.text ?? "",
         parts,
-        order: message.order,
-        stepOrder: message.stepOrder,
       });
     } else {
       if (coreMessage.role === "tool" && !assistantMessage) {
@@ -55,15 +62,16 @@ export function toUIMessages(messages: MessageDoc[]): UIMessageOrdered[] {
       }
       if (!assistantMessage) {
         assistantMessage = {
-          id: message.id ?? message._id,
-          createdAt: new Date(message._creationTime),
+          ...common,
           role: "assistant",
           content: message.text ?? "",
           parts: [],
-          order: message.order,
-          stepOrder: message.stepOrder,
         };
         uiMessages.push(assistantMessage);
+      } else {
+        assistantMessage.status = message.streaming
+          ? "streaming"
+          : message.status;
       }
       // update it to the last message's id
       assistantMessage.id = message.id ?? message._id;