@gram-ai/elements 1.37.0 → 1.38.0

package/src/hooks/useGramThreadListAdapter.tsx

@@ -15,6 +15,10 @@ import {
   convertGramMessagesToUIMessages,
 } from "@/lib/messageConverter";
 import { sleep } from "@/lib/utils";
+import {
+  ThreadMetaContext,
+  type ThreadMeta,
+} from "@/contexts/ThreadMetaContext";
 import {
   useCallback,
   useEffect,
@@ -108,6 +112,18 @@ interface ListChatsResponse {
   chats: GramChatOverview[];
 }
 
+/**
+ * Reads a chat's creation timestamp from the `chat.list` payload. The wire
+ * format is snake_case (`created_at`) — the hand-written GramChatOverview type
+ * declares camelCase, which never matched the JSON — so check both and return
+ * an ISO string, or undefined when absent.
+ */
+function readChatCreatedAt(chat: GramChatOverview): string | undefined {
+  const raw = chat as unknown as Record<string, unknown>;
+  const value = raw["created_at"] ?? raw["createdAt"];
+  return typeof value === "string" ? value : undefined;
+}
+
 /**
  * Resolves request headers from the live adapter options: the async
  * `getHeaders` (which waits for auth to settle) when provided, otherwise the
@@ -119,6 +135,54 @@ async function resolveAdapterHeaders(
   return options.getHeaders ? options.getHeaders() : options.headers;
 }
 
+// chat.load paginates by seq keyset and returns only the newest page by default.
+// assistant-ui's history adapter is one-shot (it imports the whole thread at
+// once), so page backwards to the start and return the chat with every message
+// in ascending order. Without this a long thread would render only its newest
+// page with no way to reach the rest.
+const FULL_LOAD_PAGE_SIZE = 200;
+
+async function loadFullChat(
+  apiUrl: string,
+  chatId: string,
+  headers: Record<string, string>,
+): Promise<GramChat | null> {
+  let beforeSeq: number | undefined;
+  let all: GramChatMessage[] = [];
+  let base: GramChat | null = null;
+
+  for (;;) {
+    const cursor = beforeSeq !== undefined ? `&before_seq=${beforeSeq}` : "";
+    const response = await fetch(
+      `${apiUrl}/rpc/chat.load?id=${encodeURIComponent(chatId)}&limit=${FULL_LOAD_PAGE_SIZE}${cursor}`,
+      { headers },
+    );
+    if (!response.ok) {
+      // First page failed → nothing to show. A later page failing means we'd
+      // silently truncate the thread, so log loudly rather than passing partial
+      // history off as complete.
+      if (!base) {
+        console.error("Failed to load chat:", response.status);
+        return null;
+      }
+      console.error(
+        `Failed to load full chat history (status ${response.status}); ` +
+          `returning ${all.length} of ${base.numMessages ?? "?"} messages — transcript is truncated.`,
+      );
+      return { ...base, messages: all };
+    }
+    const page = (await response.json()) as GramChat;
+    if (!base) base = page;
+    // Each page is ascending; older pages prepend.
+    all = [...page.messages, ...all];
+    const oldest = page.messages[0];
+    if (!page.has_more_before || !oldest || oldest.seq === undefined) break;
+    beforeSeq = oldest.seq;
+  }
+
+  return base ? { ...base, messages: all } : null;
+}
+
 /**
  * Thread history adapter that loads messages from Gram API.
  * Note: We use `as ThreadHistoryAdapter` cast because the withFormat generic
@@ -172,17 +236,15 @@ class GramThreadHistoryAdapter {
     }
 
     try {
-      const response = await fetch(
-        `${this.apiUrl}/rpc/chat.load?id=${encodeURIComponent(remoteId)}`,
-        { headers: await this.getHeaders() },
+      const chat = await loadFullChat(
+        this.apiUrl,
+        remoteId,
+        await this.getHeaders(),
       );
-
-      if (!response.ok) {
-        console.error("Failed to load chat:", response.status);
+      if (!chat) {
+        console.error("Failed to load chat");
         return { messages: [], headId: null };
       }
-
-      const chat = (await response.json()) as GramChat;
       return convertGramMessagesToExported(this.applyTransform(chat.messages));
     } catch (error) {
       console.error("Error loading chat:", error);
@@ -206,17 +268,15 @@ class GramThreadHistoryAdapter {
           return { messages: [], headId: null };
         }
 
-        const response = await fetch(
-          `${this.apiUrl}/rpc/chat.load?id=${encodeURIComponent(remoteId)}`,
-          { headers: await this.getHeaders() },
+        const chat = await loadFullChat(
+          this.apiUrl,
+          remoteId,
+          await this.getHeaders(),
         );
-
-        if (!response.ok) {
-          console.error("Failed to load chat (withFormat):", response.status);
+        if (!chat) {
+          console.error("Failed to load chat (withFormat)");
           return { messages: [], headId: null };
         }
-
-        const chat = (await response.json()) as GramChat;
         return convertGramMessagesToUIMessages(
           this.applyTransform(chat.messages),
         );
@@ -293,6 +353,14 @@ export function useGramThreadListAdapter(
     optionsRef.current = options;
   }, [options]);
 
+  // Side channel for per-chat metadata (creation date) that assistant-ui's
+  // RemoteThreadMetadata can't carry. `list()` writes a fresh object into the
+  // ref and bumps the counter so the provider passes a new context value and
+  // ThreadListItem re-renders with the dates. A ref (not state) holds the data
+  // so the stable `list()` closure can write it without a re-created identity.
+  const metaRef = useRef<Record<string, ThreadMeta>>({});
+  const [, bumpMeta] = useState(0);
+
   // Create stable Provider component using useCallback
   const unstable_Provider = useCallback(function GramHistoryProvider({
     children,
@@ -300,9 +368,11 @@ export function useGramThreadListAdapter(
     const history = useGramThreadHistoryAdapter(optionsRef);
     const adapters = useMemo(() => ({ history }), [history]);
     return (
-      <RuntimeAdapterProvider adapters={adapters}>
-        {children}
-      </RuntimeAdapterProvider>
+      <ThreadMetaContext.Provider value={metaRef.current}>
+        <RuntimeAdapterProvider adapters={adapters}>
+          {children}
+        </RuntimeAdapterProvider>
+      </ThreadMetaContext.Provider>
     );
   }, []);
 
@@ -329,6 +399,15 @@ export function useGramThreadListAdapter(
           }
 
           const data = (await response.json()) as ListChatsResponse;
+          // Stash creation dates in the side channel before returning the
+          // assistant-ui metadata (which can't carry them) — keyed by chat id,
+          // the same value used for remoteId/externalId below.
+          const nextMeta: Record<string, ThreadMeta> = { ...metaRef.current };
+          for (const chat of data.chats) {
+            nextMeta[chat.id] = { createdAt: readChatCreatedAt(chat) };
+          }
+          metaRef.current = nextMeta;
+          bumpMeta((n) => n + 1);
           return {
             threads: data.chats.map((chat) => ({
               remoteId: chat.id,
@@ -474,8 +553,10 @@ export function useGramThreadListAdapter(
         }
 
         try {
+          // Only chat metadata (id/title) is needed here, so request the
+          // smallest page instead of a full message page.
           const response = await fetch(
-            `${optionsRef.current.apiUrl}/rpc/chat.load?id=${encodeURIComponent(threadId)}`,
+            `${optionsRef.current.apiUrl}/rpc/chat.load?id=${encodeURIComponent(threadId)}&limit=1`,
             {
               headers: await resolveAdapterHeaders(optionsRef.current),
             },

package/src/hooks/useMCPTools.ts

@@ -1,7 +1,7 @@
 import { assert } from "@/lib/utils";
 import type { MCPServerEntry } from "@/types";
 import { ToolsFilter } from "@/types";
-import { experimental_createMCPClient as createMCPClient } from "@ai-sdk/mcp";
+import { createMCPClient } from "@ai-sdk/mcp";
 import { useQuery, type UseQueryResult } from "@tanstack/react-query";
 import { useMemo, useRef } from "react";
 import { trackError } from "@/lib/errorTracking";

package/src/index.ts

@@ -20,6 +20,24 @@ export type { ShareButtonProps } from "@/components/ShareButton";
 export { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 export { MessageContent } from "@/components/MessageContent";
 export type { MessageContentProps } from "@/components/MessageContent";
+export { Markdown } from "@/components/Markdown";
+export type { MarkdownProps } from "@/components/Markdown";
+
+// Static presentation primitives — render with no ElementsProvider/runtime, so
+// the dashboard's chat detail panel can reuse the elements tool UI directly.
+export {
+  ToolUI,
+  ToolUISection,
+  SyntaxHighlightedCode,
+} from "@/components/ui/tool-ui";
+export type {
+  ToolUIProps,
+  ToolUISectionProps,
+  ToolStatus,
+  ContentItem,
+  SectionHighlight,
+  SectionMatch,
+} from "@/components/ui/tool-ui";
 
 // Replay
 export { Replay } from "@/components/Replay";

package/src/lib/messageConverter.ts

@@ -71,6 +71,8 @@ export type GramChatContent = string | GramChatContentPart[];
  */
 export interface GramChatMessage {
   id: string;
+  // Monotonic sequence number; used as the keyset cursor when paging chat.load.
+  seq?: number;
   model: string;
   created_at: Date | string;
   role: "system" | "developer" | "user" | "assistant" | "tool";
@@ -92,6 +94,9 @@ export interface GramChat {
   messages: GramChatMessage[];
   createdAt: Date | string;
   updatedAt: Date | string;
+  // chat.load paginates by seq keyset; true when older messages remain before
+  // the first message in `messages` (snake_case to match the wire payload).
+  has_more_before?: boolean;
 }
 
 /**

package/src/lib/tools.test.ts

@@ -11,12 +11,12 @@ import {
   type UIMessage,
   type UIMessagePart,
 } from "ai";
-import { MockLanguageModelV2 } from "ai/test";
+import { MockLanguageModelV3 } from "ai/test";
 
 type MockStream = Extract<
   NonNullable<
     NonNullable<
-      ConstructorParameters<typeof MockLanguageModelV2>[0]
+      ConstructorParameters<typeof MockLanguageModelV3>[0]
     >["doStream"]
   >,
   (...a: never[]) => PromiseLike<{ stream: ReadableStream<unknown> }>
@@ -70,8 +70,16 @@ function toolCallChunks(opts: {
     },
     {
       type: "finish",
-      finishReason: "tool-calls",
-      usage: { inputTokens: 1, outputTokens: 1, totalTokens: 2 },
+      finishReason: { unified: "tool-calls", raw: undefined },
+      usage: {
+        inputTokens: {
+          total: 1,
+          noCache: 1,
+          cacheRead: undefined,
+          cacheWrite: undefined,
+        },
+        outputTokens: { total: 1, text: 1, reasoning: undefined },
+      },
     },
   ];
 }
@@ -118,7 +126,7 @@ async function streamToolCallOnly(toolCallId: string): Promise<UIMessage[]> {
     },
   } as unknown as ToolSet;
 
-  const model = new MockLanguageModelV2({
+  const model = new MockLanguageModelV3({
     doStream: async () => ({
       stream: makeStream([
         ...toolCallChunks({
@@ -174,10 +182,13 @@ describe("frontend tool Skip flow (sendAutomaticallyWhen fix)", () => {
       false,
     );
 
-    // And the resulting model-message sequence contains a bogus `role: "tool"`
-    // with empty content — the provider will reject this as an invalid tool
-    // message, surfacing to the user as the "needs role: assistant" error.
-    const modelMsgs = convertToModelMessages(follow);
+    // The resulting model-message sequence has an assistant `tool-call` with no
+    // matching tool result. (In ai v5 `convertToModelMessages` fabricated a
+    // bogus empty `role: "tool"` message here; ai v6 instead drops the
+    // unresolved call entirely and the next turn is the follow-up user message.)
+    // Either way the sequence is invalid — a tool-call with no result — which is
+    // exactly the state the `sendAutomaticallyWhen` fix prevents.
+    const modelMsgs = await convertToModelMessages(follow);
     const assistantIdx = modelMsgs.findIndex(
       (m) =>
         m.role === "assistant" &&
@@ -187,8 +198,9 @@ describe("frontend tool Skip flow (sendAutomaticallyWhen fix)", () => {
         ),
     );
     expect(assistantIdx).toBeGreaterThanOrEqual(0);
-    expect(modelMsgs[assistantIdx + 1]?.role).toBe("tool");
-    expect(modelMsgs[assistantIdx + 1]?.content).toEqual([]);
+    // No valid tool result was produced for the unresolved tool-call.
+    expect(modelMsgs.some((m) => m.role === "tool")).toBe(false);
+    expect(modelMsgs[assistantIdx + 1]?.role).not.toBe("tool");
   });
 
   it("once the tool-result is patched onto the message, sendAutomaticallyWhen fires and the sequence is valid", async () => {
@@ -237,7 +249,7 @@ describe("frontend tool Skip flow (sendAutomaticallyWhen fix)", () => {
 
     // And the sequence handed to the model is well-formed (assistant
     // tool-call is followed by a real role:"tool" message with a result).
-    const modelMsgs = convertToModelMessages(patched);
+    const modelMsgs = await convertToModelMessages(patched);
     const assistantIdx = modelMsgs.findIndex(
       (m) =>
         m.role === "assistant" &&