@gram-ai/elements 1.27.3 → 1.27.5

package/src/lib/models.ts

@@ -1,23 +1,24 @@
 // List of openrouter models available to the user
 // This list should be updated to match the model whitelist on the backend side.
 export const MODELS = [
-  'anthropic/claude-opus-4.6',
-  'anthropic/claude-sonnet-4.5',
-  'anthropic/claude-haiku-4.5',
-  'anthropic/claude-sonnet-4',
-  'anthropic/claude-opus-4.5',
-  'openai/gpt-4o',
-  'openai/gpt-4o-mini',
-  'openai/gpt-5.1-codex',
-  'openai/gpt-5',
-  'openai/gpt-5.1',
-  'openai/gpt-4.1',
-  'anthropic/claude-3.7-sonnet',
-  'anthropic/claude-opus-4',
-  'google/gemini-2.5-pro-preview',
-  'google/gemini-3-pro-preview',
-  'moonshotai/kimi-k2',
-  'mistralai/mistral-medium-3',
-  'mistralai/mistral-medium-3.1',
-  'mistralai/codestral-2501',
-] as const
+  "anthropic/claude-opus-4.6",
+  "anthropic/claude-sonnet-4.5",
+  "anthropic/claude-haiku-4.5",
+  "anthropic/claude-sonnet-4",
+  "anthropic/claude-opus-4.5",
+  "openai/gpt-5.4",
+  "openai/gpt-4o",
+  "openai/gpt-4o-mini",
+  "openai/gpt-5.1-codex",
+  "openai/gpt-5",
+  "openai/gpt-5.1",
+  "openai/gpt-4.1",
+  "anthropic/claude-3.7-sonnet",
+  "anthropic/claude-opus-4",
+  "google/gemini-2.5-pro-preview",
+  "google/gemini-3-pro-preview",
+  "moonshotai/kimi-k2",
+  "mistralai/mistral-medium-3",
+  "mistralai/mistral-medium-3.1",
+  "mistralai/codestral-2501",
+] as const;

package/src/lib/token.test.ts

@@ -1,79 +1,79 @@
-import { describe, expect, it } from 'vitest'
-import { getTokenExpiry, isTokenExpired } from './token'
+import { describe, expect, it } from "vitest";
+import { getTokenExpiry, isTokenExpired } from "./token";
 
 /** Helper: build a JWT with a given payload (no signature verification needed). */
 function makeJwt(payload: Record<string, unknown>): string {
-  const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }))
-  const body = btoa(JSON.stringify(payload))
-  return `${header}.${body}.fake-signature`
+  const header = btoa(JSON.stringify({ alg: "HS256", typ: "JWT" }));
+  const body = btoa(JSON.stringify(payload));
+  return `${header}.${body}.fake-signature`;
 }
 
-describe('getTokenExpiry', () => {
-  it('returns exp for a valid JWT', () => {
-    const exp = 1700000000
-    expect(getTokenExpiry(makeJwt({ exp }))).toBe(exp)
-  })
+describe("getTokenExpiry", () => {
+  it("returns exp for a valid JWT", () => {
+    const exp = 1700000000;
+    expect(getTokenExpiry(makeJwt({ exp }))).toBe(exp);
+  });
 
-  it('returns null when exp is missing', () => {
-    expect(getTokenExpiry(makeJwt({ sub: 'user' }))).toBeNull()
-  })
+  it("returns null when exp is missing", () => {
+    expect(getTokenExpiry(makeJwt({ sub: "user" }))).toBeNull();
+  });
 
-  it('returns null for a non-JWT string', () => {
-    expect(getTokenExpiry('not-a-jwt')).toBeNull()
-  })
+  it("returns null for a non-JWT string", () => {
+    expect(getTokenExpiry("not-a-jwt")).toBeNull();
+  });
 
-  it('returns null for an empty string', () => {
-    expect(getTokenExpiry('')).toBeNull()
-  })
+  it("returns null for an empty string", () => {
+    expect(getTokenExpiry("")).toBeNull();
+  });
 
-  it('returns null when payload is not valid JSON', () => {
+  it("returns null when payload is not valid JSON", () => {
     // Two dots but the middle segment is not valid base64 JSON
-    expect(getTokenExpiry('a.!!!.b')).toBeNull()
-  })
+    expect(getTokenExpiry("a.!!!.b")).toBeNull();
+  });
 
-  it('handles base64url characters (- and _)', () => {
+  it("handles base64url characters (- and _)", () => {
     // Manually craft a payload with base64url-specific chars
-    const payload = { exp: 1700000000 }
-    const json = JSON.stringify(payload)
+    const payload = { exp: 1700000000 };
+    const json = JSON.stringify(payload);
     const b64 = btoa(json)
-      .replace(/\+/g, '-')
-      .replace(/\//g, '_')
-      .replace(/=+$/, '')
-    const token = `header.${b64}.sig`
-    expect(getTokenExpiry(token)).toBe(1700000000)
-  })
-})
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/=+$/, "");
+    const token = `header.${b64}.sig`;
+    expect(getTokenExpiry(token)).toBe(1700000000);
+  });
+});
 
-describe('isTokenExpired', () => {
-  it('returns true for an expired token', () => {
+describe("isTokenExpired", () => {
+  it("returns true for an expired token", () => {
     // exp = 1 second ago
-    const exp = Math.floor(Date.now() / 1000) - 1
-    expect(isTokenExpired(makeJwt({ exp }))).toBe(true)
-  })
+    const exp = Math.floor(Date.now() / 1000) - 1;
+    expect(isTokenExpired(makeJwt({ exp }))).toBe(true);
+  });
 
-  it('returns true when token is within the buffer window', () => {
+  it("returns true when token is within the buffer window", () => {
     // exp = 20 seconds from now (within 30s default buffer)
-    const exp = Math.floor(Date.now() / 1000) + 20
-    expect(isTokenExpired(makeJwt({ exp }))).toBe(true)
-  })
+    const exp = Math.floor(Date.now() / 1000) + 20;
+    expect(isTokenExpired(makeJwt({ exp }))).toBe(true);
+  });
 
-  it('returns false when token is well outside the buffer', () => {
+  it("returns false when token is well outside the buffer", () => {
     // exp = 5 minutes from now
-    const exp = Math.floor(Date.now() / 1000) + 300
-    expect(isTokenExpired(makeJwt({ exp }))).toBe(false)
-  })
+    const exp = Math.floor(Date.now() / 1000) + 300;
+    expect(isTokenExpired(makeJwt({ exp }))).toBe(false);
+  });
 
-  it('respects a custom buffer', () => {
+  it("respects a custom buffer", () => {
     // exp = 20 seconds from now, buffer = 10s → should NOT be expired
-    const exp = Math.floor(Date.now() / 1000) + 20
-    expect(isTokenExpired(makeJwt({ exp }), 10_000)).toBe(false)
-  })
+    const exp = Math.floor(Date.now() / 1000) + 20;
+    expect(isTokenExpired(makeJwt({ exp }), 10_000)).toBe(false);
+  });
 
-  it('returns false (fail-open) for a non-JWT string', () => {
-    expect(isTokenExpired('opaque-session-token')).toBe(false)
-  })
+  it("returns false (fail-open) for a non-JWT string", () => {
+    expect(isTokenExpired("opaque-session-token")).toBe(false);
+  });
 
-  it('returns false (fail-open) for an empty string', () => {
-    expect(isTokenExpired('')).toBe(false)
-  })
-})
+  it("returns false (fail-open) for an empty string", () => {
+    expect(isTokenExpired("")).toBe(false);
+  });
+});

package/src/lib/token.ts

@@ -5,22 +5,22 @@
  */
 export function getTokenExpiry(token: string): number | null {
   try {
-    const parts = token.split('.')
-    if (parts.length !== 3) return null
+    const parts = token.split(".");
+    if (parts.length !== 3) return null;
 
     // base64url → base64 → decode
-    let payload = parts[1].replace(/-/g, '+').replace(/_/g, '/')
-    while (payload.length % 4) payload += '='
+    let payload = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+    while (payload.length % 4) payload += "=";
 
-    const json = atob(payload)
-    const parsed = JSON.parse(json)
+    const json = atob(payload);
+    const parsed = JSON.parse(json);
 
-    if (typeof parsed.exp === 'number') {
-      return parsed.exp
+    if (typeof parsed.exp === "number") {
+      return parsed.exp;
     }
-    return null
+    return null;
   } catch {
-    return null
+    return null;
   }
 }
 
@@ -31,9 +31,9 @@ export function getTokenExpiry(token: string): number | null {
  */
 export function isTokenExpired(
   token: string,
-  bufferMs: number = 30_000
+  bufferMs: number = 30_000,
 ): boolean {
-  const exp = getTokenExpiry(token)
-  if (exp === null) return false // fail-open for non-JWT tokens
-  return Date.now() >= exp * 1000 - bufferMs
+  const exp = getTokenExpiry(token);
+  if (exp === null) return false; // fail-open for non-JWT tokens
+  return Date.now() >= exp * 1000 - bufferMs;
 }

package/src/lib/tool-mentions.ts

@@ -1,106 +1,106 @@
-export type ToolRecord = Record<string, unknown> | undefined
+export type ToolRecord = Record<string, unknown> | undefined;
 
 export interface MentionableTool {
-  id: string
-  name: string
-  description?: string
+  id: string;
+  name: string;
+  description?: string;
 }
 
 export interface MentionContext {
-  isInMention: boolean
-  query: string
-  atPosition: number
+  isInMention: boolean;
+  query: string;
+  atPosition: number;
 }
 
-const MENTION_PATTERN = /@(\w+)/g
+const MENTION_PATTERN = /@(\w+)/g;
 
 export function toolSetToMentionableTools(
-  tools: ToolRecord
+  tools: ToolRecord,
 ): MentionableTool[] {
-  if (!tools) return []
+  if (!tools) return [];
 
   return Object.entries(tools).map(([name, tool]) => ({
     id: name,
     name,
     description:
-      typeof tool === 'object' && tool !== null && 'description' in tool
-        ? String((tool as { description?: unknown }).description ?? '')
+      typeof tool === "object" && tool !== null && "description" in tool
+        ? String((tool as { description?: unknown }).description ?? "")
         : undefined,
-  }))
+  }));
 }
 
 export function parseMentionedTools(text: string, tools: ToolRecord): string[] {
-  if (!tools || !text) return []
+  if (!tools || !text) return [];
 
-  const toolNames = Object.keys(tools)
-  const mentions: string[] = []
-  let match: RegExpExecArray | null
+  const toolNames = Object.keys(tools);
+  const mentions: string[] = [];
+  let match: RegExpExecArray | null;
 
-  MENTION_PATTERN.lastIndex = 0
+  MENTION_PATTERN.lastIndex = 0;
   while ((match = MENTION_PATTERN.exec(text)) !== null) {
-    mentions.push(match[1].toLowerCase())
+    mentions.push(match[1].toLowerCase());
   }
 
   const matchedToolIds = toolNames.filter((name) =>
-    mentions.includes(name.toLowerCase())
-  )
+    mentions.includes(name.toLowerCase()),
+  );
 
-  return [...new Set(matchedToolIds)]
+  return [...new Set(matchedToolIds)];
 }
 
 export function detectMentionContext(
   text: string,
-  cursorPosition: number
+  cursorPosition: number,
 ): MentionContext {
-  const textBeforeCursor = text.slice(0, cursorPosition)
-  const lastAtSymbol = textBeforeCursor.lastIndexOf('@')
+  const textBeforeCursor = text.slice(0, cursorPosition);
+  const lastAtSymbol = textBeforeCursor.lastIndexOf("@");
 
   if (lastAtSymbol === -1) {
-    return { isInMention: false, query: '', atPosition: -1 }
+    return { isInMention: false, query: "", atPosition: -1 };
   }
 
-  const textAfterAt = textBeforeCursor.slice(lastAtSymbol + 1)
+  const textAfterAt = textBeforeCursor.slice(lastAtSymbol + 1);
 
-  if (textAfterAt.includes(' ') || textAfterAt.includes('\n')) {
-    return { isInMention: false, query: '', atPosition: -1 }
+  if (textAfterAt.includes(" ") || textAfterAt.includes("\n")) {
+    return { isInMention: false, query: "", atPosition: -1 };
   }
 
   return {
     isInMention: true,
     query: textAfterAt.toLowerCase(),
     atPosition: lastAtSymbol,
-  }
+  };
 }
 
 export function filterToolsByQuery(
   tools: MentionableTool[],
-  query: string
+  query: string,
 ): MentionableTool[] {
-  if (!query) return tools
+  if (!query) return tools;
 
-  const queryLower = query.toLowerCase()
+  const queryLower = query.toLowerCase();
 
   return tools.filter((tool) => {
-    const nameMatch = tool.name.toLowerCase().includes(queryLower)
-    const descMatch = tool.description?.toLowerCase().includes(queryLower)
-    return nameMatch || descMatch
-  })
+    const nameMatch = tool.name.toLowerCase().includes(queryLower);
+    const descMatch = tool.description?.toLowerCase().includes(queryLower);
+    return nameMatch || descMatch;
+  });
 }
 
 export function insertToolMention(
   text: string,
   toolName: string,
   atPosition: number,
-  cursorPosition: number
+  cursorPosition: number,
 ): { text: string; cursorPosition: number } {
-  const beforeMention = text.slice(0, atPosition)
-  const afterCursor = text.slice(cursorPosition)
-  const newText = `${beforeMention}@${toolName} ${afterCursor}`
-  const newCursorPosition = atPosition + toolName.length + 2
-  return { text: newText, cursorPosition: newCursorPosition }
+  const beforeMention = text.slice(0, atPosition);
+  const afterCursor = text.slice(cursorPosition);
+  const newText = `${beforeMention}@${toolName} ${afterCursor}`;
+  const newCursorPosition = atPosition + toolName.length + 2;
+  return { text: newText, cursorPosition: newCursorPosition };
 }
 
 export function removeToolMention(text: string, toolName: string): string {
-  const pattern = new RegExp(`@${toolName}\\s?`, 'gi')
-  return text.replace(pattern, '')
+  const pattern = new RegExp(`@${toolName}\\s?`, "gi");
+  return text.replace(pattern, "");
 }

package/src/lib/tools.ts

@@ -1,12 +1,12 @@
-import type { ToolsFilter } from '@/types'
+import type { ToolsFilter } from "@/types";
 import {
   AssistantToolProps,
   Tool,
   makeAssistantTool,
-} from '@assistant-ui/react'
-import { JSONSchema7, ToolSet, type ToolCallOptions } from 'ai'
-import { FC } from 'react'
-import z from 'zod'
+} from "@assistant-ui/react";
+import { JSONSchema7, ToolSet, type ToolCallOptions } from "ai";
+import { FC } from "react";
+import z from "zod";
 
 /**
  * Converts from assistant-ui tool format to the AI SDK tool shape
@@ -21,9 +21,9 @@ export const toAISDKTools = (tools: Record<string, Tool>) => {
           ? z.toJSONSchema(tool.parameters)
           : tool.parameters) as JSONSchema7,
       },
-    ])
-  )
-}
+    ]),
+  );
+};
 
 /**
  * Returns only frontend tools that are enabled
@@ -31,10 +31,10 @@ export const toAISDKTools = (tools: Record<string, Tool>) => {
 export const getEnabledTools = (tools: Record<string, Tool>) => {
   return Object.fromEntries(
     Object.entries(tools).filter(
-      ([, tool]) => !tool.disabled && tool.type !== 'backend'
-    )
-  )
-}
+      ([, tool]) => !tool.disabled && tool.type !== "backend",
+    ),
+  );
+};
 
 /**
  * A frontend tool is a tool that is defined by the user and can be used in the chat.
@@ -42,37 +42,37 @@ export const getEnabledTools = (tools: Record<string, Tool>) => {
 export type FrontendTool<TArgs extends Record<string, unknown>, TResult> = FC<
   AssistantToolProps<TArgs, TResult>
 > & {
-  unstable_tool: AssistantToolProps<TArgs, TResult>
-}
+  unstable_tool: AssistantToolProps<TArgs, TResult>;
+};
 
 /**
  * Module-level approval config that gets set by ElementsProvider at runtime.
  * This allows defineFrontendTool to check approval status during execute.
  */
 let approvalConfig: {
-  helpers: ApprovalHelpers
-  requiresApproval: (toolName: string) => boolean
-} | null = null
+  helpers: ApprovalHelpers;
+  requiresApproval: (toolName: string) => boolean;
+} | null = null;
 
 /**
  * Sets the approval configuration. Called by ElementsProvider.
  */
 export function setFrontendToolApprovalConfig(
   helpers: ApprovalHelpers,
-  toolsRequiringApproval: ToolsFilter
+  toolsRequiringApproval: ToolsFilter,
 ): void {
-  const requiresApproval = createRequiresApprovalFn(toolsRequiringApproval)
+  const requiresApproval = createRequiresApprovalFn(toolsRequiringApproval);
   approvalConfig = {
     helpers,
     requiresApproval,
-  }
+  };
 }
 
 /**
  * Clears the approval configuration. Called when ElementsProvider unmounts.
  */
 export function clearFrontendToolApprovalConfig(): void {
-  approvalConfig = null
+  approvalConfig = null;
 }
 
 /**
@@ -80,18 +80,18 @@ export function clearFrontendToolApprovalConfig(): void {
  * Handles both array and function-based configurations.
  */
 function createRequiresApprovalFn(
-  toolsRequiringApproval: ToolsFilter | undefined
+  toolsRequiringApproval: ToolsFilter | undefined,
 ): (toolName: string) => boolean {
   if (!toolsRequiringApproval) {
-    return () => false
+    return () => false;
   }
 
-  if (typeof toolsRequiringApproval === 'function') {
-    return (toolName: string) => toolsRequiringApproval({ toolName })
+  if (typeof toolsRequiringApproval === "function") {
+    return (toolName: string) => toolsRequiringApproval({ toolName });
   }
 
-  const approvalSet = new Set(toolsRequiringApproval)
-  return (toolName: string) => approvalSet.has(toolName)
+  const approvalSet = new Set(toolsRequiringApproval);
+  return (toolName: string) => approvalSet.has(toolName);
 }
 
 /**
@@ -102,42 +102,46 @@ export const defineFrontendTool = <
   TResult,
 >(
   tool: Tool,
-  name: string
+  name: string,
 ): FrontendTool<TArgs, TResult> => {
   type ToolExecutionContext = Parameters<
-    NonNullable<Tool<Record<string, unknown>, void>['execute']>
-  >[1]
+    NonNullable<Tool<Record<string, unknown>, void>["execute"]>
+  >[1];
   return makeAssistantTool({
     ...tool,
     execute: async (args: TArgs, context: ToolExecutionContext) => {
       // Check if this tool requires approval at runtime
       if (approvalConfig?.requiresApproval(name)) {
-        const { helpers } = approvalConfig
-        const toolCallId = context.toolCallId ?? ''
+        const { helpers } = approvalConfig;
+        const toolCallId = context.toolCallId ?? "";
 
         // Check if already approved (user chose "Approve always" previously)
         if (!helpers.isToolApproved(name)) {
-          const approved = await helpers.requestApproval(name, toolCallId, args)
+          const approved = await helpers.requestApproval(
+            name,
+            toolCallId,
+            args,
+          );
 
           if (!approved) {
             return {
               content: [
                 {
-                  type: 'text',
+                  type: "text",
                   text: `Tool "${name}" execution was denied by the user. Please acknowledge this and continue without using this tool's result.`,
                 },
               ],
               isError: true,
-            } as TResult
+            } as TResult;
           }
         }
       }
 
-      return tool.execute?.(args, context)
+      return tool.execute?.(args, context);
     },
     toolName: name,
-  } as AssistantToolProps<TArgs, TResult>)
-}
+  } as AssistantToolProps<TArgs, TResult>);
+};
 
 /**
  * Helpers for requesting and tracking tool approval state.
@@ -146,10 +150,10 @@ export interface ApprovalHelpers {
   requestApproval: (
     toolName: string,
     toolCallId: string,
-    args: unknown
-  ) => Promise<boolean>
-  isToolApproved: (toolName: string) => boolean
-  whitelistTool: (toolName: string) => void
+    args: unknown,
+  ) => Promise<boolean>;
+  isToolApproved: (toolName: string) => boolean;
+  whitelistTool: (toolName: string) => void;
 }
 
 /**
@@ -158,10 +162,10 @@ export interface ApprovalHelpers {
 export function wrapToolsWithApproval(
   tools: ToolSet,
   toolsRequiringApproval: ToolsFilter | undefined,
-  approvalHelpers: ApprovalHelpers
+  approvalHelpers: ApprovalHelpers,
 ): ToolSet {
   if (!toolsRequiringApproval) {
-    return tools
+    return tools;
   }
 
   // Handle empty array case
@@ -169,20 +173,20 @@ export function wrapToolsWithApproval(
     Array.isArray(toolsRequiringApproval) &&
     toolsRequiringApproval.length === 0
   ) {
-    return tools
+    return tools;
   }
 
-  const requiresApproval = createRequiresApprovalFn(toolsRequiringApproval)
+  const requiresApproval = createRequiresApprovalFn(toolsRequiringApproval);
 
   return Object.fromEntries(
     Object.entries(tools).map(([name, tool]) => {
       if (!requiresApproval(name)) {
-        return [name, tool]
+        return [name, tool];
       }
 
-      const originalExecute = tool.execute
+      const originalExecute = tool.execute;
       if (!originalExecute) {
-        return [name, tool]
+        return [name, tool];
       }
 
       return [
@@ -192,36 +196,36 @@ export function wrapToolsWithApproval(
           execute: async (args: unknown, options?: ToolCallOptions) => {
             const opts = (options ?? {}) as Parameters<
               typeof originalExecute
-            >[1]
+            >[1];
             // Extract toolCallId from options
             const toolCallId =
-              (opts as { toolCallId?: string }).toolCallId ?? ''
+              (opts as { toolCallId?: string }).toolCallId ?? "";
 
             // Check if already approved (user chose "Approve always" previously)
             if (approvalHelpers.isToolApproved(name)) {
               return originalExecute(
                 args,
-                opts as Parameters<typeof originalExecute>[1]
-              )
+                opts as Parameters<typeof originalExecute>[1],
+              );
             }
 
             // Request approval using the actual toolCallId from the stream
             const approved = await approvalHelpers.requestApproval(
               name,
               toolCallId,
-              args
-            )
+              args,
+            );
 
             if (!approved) {
               return {
                 content: [
                   {
-                    type: 'text',
+                    type: "text",
                     text: `Tool "${name}" execution was denied by the user. Please acknowledge this and continue without using this tool's result.`,
                   },
                 ],
                 isError: true,
-              }
+              };
             }
 
             // Note: Tool is marked as approved via the UI when user clicks "Approve always"
@@ -229,11 +233,11 @@ export function wrapToolsWithApproval(
 
             return originalExecute(
               args,
-              opts as Parameters<typeof originalExecute>[1]
-            )
+              opts as Parameters<typeof originalExecute>[1],
+            );
           },
         },
-      ]
-    })
-  ) as ToolSet
+      ];
+    }),
+  ) as ToolSet;
 }