@gram-ai/elements 1.27.4 → 1.27.6

package/src/contexts/ReplayContext.ts

@@ -1,7 +1,7 @@
-import { createContext, useContext } from 'react'
+import { createContext, useContext } from "react";
 
-export const ReplayContext = createContext<{ isReplay: boolean } | null>(null)
+export const ReplayContext = createContext<{ isReplay: boolean } | null>(null);
 
 export function useReplayContext() {
-  return useContext(ReplayContext)
+  return useContext(ReplayContext);
 }

package/src/contexts/ToolApprovalContext.tsx

@@ -1,36 +1,36 @@
-import { useState, useCallback, type ReactNode } from 'react'
-import { ToolApprovalContext } from './contexts'
+import { useState, useCallback, type ReactNode } from "react";
+import { ToolApprovalContext } from "./contexts";
 
 interface PendingApproval {
-  toolCallId: string
-  toolName: string
-  args: unknown
-  resolve: (approved: boolean) => void
+  toolCallId: string;
+  toolName: string;
+  args: unknown;
+  resolve: (approved: boolean) => void;
 }
 
 interface ToolApprovalContextType {
-  pendingApprovals: Map<string, PendingApproval>
-  approvedTools: Set<string>
+  pendingApprovals: Map<string, PendingApproval>;
+  approvedTools: Set<string>;
   requestApproval: (
     toolName: string,
     toolCallId: string,
-    args: unknown
-  ) => Promise<boolean>
+    args: unknown,
+  ) => Promise<boolean>;
   /** Whitelist a tool name so all future calls are auto-approved */
-  whitelistTool: (toolName: string) => void
+  whitelistTool: (toolName: string) => void;
   /** Confirm a specific pending tool call approval */
-  confirmPendingApproval: (toolCallId: string) => void
+  confirmPendingApproval: (toolCallId: string) => void;
   /** Reject a specific pending tool call approval */
-  rejectPendingApproval: (toolCallId: string) => void
-  isToolApproved: (toolName: string) => boolean
-  getPendingApproval: (toolCallId: string) => PendingApproval | undefined
+  rejectPendingApproval: (toolCallId: string) => void;
+  isToolApproved: (toolName: string) => boolean;
+  getPendingApproval: (toolCallId: string) => PendingApproval | undefined;
 }
 
 export function ToolApprovalProvider({ children }: { children: ReactNode }) {
   const [pendingApprovals, setPendingApprovals] = useState<
     Map<string, PendingApproval>
-  >(new Map())
-  const [approvedTools, setApprovedTools] = useState<Set<string>>(new Set())
+  >(new Map());
+  const [approvedTools, setApprovedTools] = useState<Set<string>>(new Set());
 
   const requestApproval = useCallback(
     (toolName: string, toolCallId: string, args: unknown): Promise<boolean> => {
@@ -40,64 +40,64 @@ export function ToolApprovalProvider({ children }: { children: ReactNode }) {
           toolName,
           args,
           resolve,
-        }
+        };
 
         setPendingApprovals((prev) => {
-          const next = new Map(prev)
-          next.set(toolCallId, pending)
-          return next
-        })
-      })
+          const next = new Map(prev);
+          next.set(toolCallId, pending);
+          return next;
+        });
+      });
     },
-    []
-  )
+    [],
+  );
   const whitelistTool = useCallback((toolName: string) => {
     setApprovedTools((prev) => {
-      const next = new Set(prev)
-      next.add(toolName)
-      return next
-    })
-  }, [])
+      const next = new Set(prev);
+      next.add(toolName);
+      return next;
+    });
+  }, []);
 
   const confirmPendingApproval = useCallback((toolCallId: string) => {
     setPendingApprovals((prev) => {
-      const pending = prev.get(toolCallId)
+      const pending = prev.get(toolCallId);
       if (pending) {
-        pending.resolve(true)
-        const next = new Map(prev)
-        next.delete(toolCallId)
-        return next
+        pending.resolve(true);
+        const next = new Map(prev);
+        next.delete(toolCallId);
+        return next;
       }
-      return prev
-    })
-  }, [])
+      return prev;
+    });
+  }, []);
 
   const rejectPendingApproval = useCallback((toolCallId: string) => {
     setPendingApprovals((prev) => {
-      const pending = prev.get(toolCallId)
+      const pending = prev.get(toolCallId);
       if (pending) {
-        pending.resolve(false)
-        const next = new Map(prev)
-        next.delete(toolCallId)
-        return next
+        pending.resolve(false);
+        const next = new Map(prev);
+        next.delete(toolCallId);
+        return next;
       }
-      return prev
-    })
-  }, [])
+      return prev;
+    });
+  }, []);
 
   const isToolApproved = useCallback(
     (toolName: string) => {
-      return approvedTools.has(toolName)
+      return approvedTools.has(toolName);
     },
-    [approvedTools]
-  )
+    [approvedTools],
+  );
 
   const getPendingApproval = useCallback(
     (toolCallId: string) => {
-      return pendingApprovals.get(toolCallId)
+      return pendingApprovals.get(toolCallId);
     },
-    [pendingApprovals]
-  )
+    [pendingApprovals],
+  );
 
   return (
     <ToolApprovalContext.Provider
@@ -114,7 +114,7 @@ export function ToolApprovalProvider({ children }: { children: ReactNode }) {
     >
       {children}
     </ToolApprovalContext.Provider>
-  )
+  );
 }
 
-export type { ToolApprovalContextType }
+export type { ToolApprovalContextType };

package/src/contexts/ToolExecutionContext.tsx

@@ -1,36 +1,36 @@
-'use client'
+"use client";
 
-import { createContext, useContext, useCallback, ReactNode } from 'react'
+import { createContext, useContext, useCallback, ReactNode } from "react";
 
 // Define a minimal tool type for direct execution
 // This avoids strict AI SDK type requirements while still being type-safe
 interface ExecutableTool {
-  execute?: (args: unknown, options?: unknown) => Promise<unknown>
+  execute?: (args: unknown, options?: unknown) => Promise<unknown>;
 }
 
-type ExecutableToolSet = Record<string, ExecutableTool | undefined>
+type ExecutableToolSet = Record<string, ExecutableTool | undefined>;
 
 export interface ToolExecutionResult {
-  success: boolean
-  result?: unknown
-  error?: string
+  success: boolean;
+  result?: unknown;
+  error?: string;
 }
 
 interface ToolExecutionContextValue {
   executeTool: (
     toolName: string,
-    args: Record<string, unknown>
-  ) => Promise<ToolExecutionResult>
-  isToolAvailable: (toolName: string) => boolean
+    args: Record<string, unknown>,
+  ) => Promise<ToolExecutionResult>;
+  isToolAvailable: (toolName: string) => boolean;
 }
 
 const ToolExecutionContext = createContext<ToolExecutionContextValue | null>(
-  null
-)
+  null,
+);
 
 interface ToolExecutionProviderProps {
-  children: ReactNode
-  tools: ExecutableToolSet | undefined
+  children: ReactNode;
+  tools: ExecutableToolSet | undefined;
 }
 
 export function ToolExecutionProvider({
@@ -40,62 +40,62 @@ export function ToolExecutionProvider({
   const executeTool = useCallback(
     async (
       toolName: string,
-      args: Record<string, unknown>
+      args: Record<string, unknown>,
     ): Promise<ToolExecutionResult> => {
       if (!tools) {
-        return { success: false, error: 'Tools not available' }
+        return { success: false, error: "Tools not available" };
       }
 
-      const tool = tools[toolName]
+      const tool = tools[toolName];
       if (!tool) {
-        return { success: false, error: `Tool "${toolName}" not found` }
+        return { success: false, error: `Tool "${toolName}" not found` };
       }
 
       if (!tool.execute) {
         return {
           success: false,
           error: `Tool "${toolName}" has no execute function`,
-        }
+        };
       }
 
       try {
         // Generate a unique toolCallId for this execution
-        const toolCallId = `action-${Date.now()}-${Math.random().toString(36).slice(2)}`
-        const result = await tool.execute(args, { toolCallId, messages: [] })
-        return { success: true, result }
+        const toolCallId = `action-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        const result = await tool.execute(args, { toolCallId, messages: [] });
+        return { success: true, result };
       } catch (err) {
         const errorMessage =
-          err instanceof Error ? err.message : 'Unknown error'
-        return { success: false, error: errorMessage }
+          err instanceof Error ? err.message : "Unknown error";
+        return { success: false, error: errorMessage };
       }
     },
-    [tools]
-  )
+    [tools],
+  );
 
   const isToolAvailable = useCallback(
     (toolName: string): boolean => {
-      return !!tools?.[toolName]?.execute
+      return !!tools?.[toolName]?.execute;
     },
-    [tools]
-  )
+    [tools],
+  );
 
   return (
     <ToolExecutionContext.Provider value={{ executeTool, isToolAvailable }}>
       {children}
     </ToolExecutionContext.Provider>
-  )
+  );
 }
 
 export function useToolExecution(): ToolExecutionContextValue {
-  const context = useContext(ToolExecutionContext)
+  const context = useContext(ToolExecutionContext);
   if (!context) {
     return {
       executeTool: async (): Promise<ToolExecutionResult> => ({
         success: false,
-        error: 'ToolExecutionProvider not found',
+        error: "ToolExecutionProvider not found",
       }),
       isToolAvailable: () => false,
-    }
+    };
   }
-  return context
+  return context;
 }

package/src/contexts/contexts.ts

@@ -1,12 +1,12 @@
-import { createContext } from 'react'
-import type { ElementsContextType } from '@/types'
-import { ToolApprovalContextType } from './ToolApprovalContext'
+import { createContext } from "react";
+import type { ElementsContextType } from "@/types";
+import { ToolApprovalContextType } from "./ToolApprovalContext";
 
 export const ElementsContext = createContext<ElementsContextType | undefined>(
-  undefined
-)
+  undefined,
+);
 
 export const ToolApprovalContext =
-  createContext<ToolApprovalContextType | null>(null)
+  createContext<ToolApprovalContextType | null>(null);
 
-export { useChatId } from './ChatIdContext'
+export { useChatId } from "./ChatIdContext";

package/src/contexts/portal-container-context.ts

@@ -1,4 +1,4 @@
-import { createContext, type RefObject } from 'react'
+import { createContext, type RefObject } from "react";
 
 export const PortalContainerContext =
-  createContext<RefObject<HTMLElement | null> | null>(null)
+  createContext<RefObject<HTMLElement | null> | null>(null);

package/src/contexts/portal-container.tsx

@@ -1,20 +1,20 @@
-'use client'
+"use client";
 
-import { type RefObject } from 'react'
-import { PortalContainerContext } from './portal-container-context'
+import { type RefObject } from "react";
+import { PortalContainerContext } from "./portal-container-context";
 
-export { PortalContainerContext }
+export { PortalContainerContext };
 
 export function PortalContainerProvider({
   containerRef,
   children,
 }: {
-  containerRef: RefObject<HTMLElement | null>
-  children: React.ReactNode
+  containerRef: RefObject<HTMLElement | null>;
+  children: React.ReactNode;
 }) {
   return (
     <PortalContainerContext.Provider value={containerRef}>
       {children}
     </PortalContainerContext.Provider>
-  )
+  );
 }

package/src/embedded.ts

@@ -1,3 +1,3 @@
 // Side-effect import to include embedded CSS in build
 // Use this CSS for embedding elements in apps that already have Tailwind CSS
-import './global-embedded.css'
+import "./global-embedded.css";

package/src/global.css

@@ -1,7 +1,7 @@
-@import 'tw-animate-css';
-@import 'tw-shimmer';
+@import "tw-animate-css";
+@import "tw-shimmer";
 @layer theme, base, components, utilities;
-@import 'tailwindcss/theme.css' layer(theme);
+@import "tailwindcss/theme.css" layer(theme);
 
 @custom-variant dark (&:is(.dark *));
 
@@ -55,8 +55,8 @@
 
   /* Scoped preflight/base styles */
   font-family:
-    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   font-feature-settings: normal;
   font-variation-settings: normal;
   -webkit-font-smoothing: antialiased;
@@ -215,9 +215,9 @@
     }
 
     button,
-    input:where([type='button']),
-    input:where([type='reset']),
-    input:where([type='submit']) {
+    input:where([type="button"]),
+    input:where([type="reset"]),
+    input:where([type="submit"]) {
       appearance: button;
       -webkit-appearance: button;
       background-color: transparent;
@@ -239,20 +239,20 @@
 }
 
 /* Theme: Radius variants via data attribute - scoped */
-.gram-elements[data-radius='sharp'],
-[data-radius='sharp'] .gram-elements {
+.gram-elements[data-radius="sharp"],
+[data-radius="sharp"] .gram-elements {
   --radius: 0.25rem;
 }
-.gram-elements[data-radius='soft'],
-[data-radius='soft'] .gram-elements {
+.gram-elements[data-radius="soft"],
+[data-radius="soft"] .gram-elements {
   --radius: 0.625rem;
 }
-.gram-elements[data-radius='round'],
-[data-radius='round'] .gram-elements {
+.gram-elements[data-radius="round"],
+[data-radius="round"] .gram-elements {
   --radius: 1rem;
 }
-.gram-elements[data-radius='pill'],
-[data-radius='pill'] .gram-elements {
+.gram-elements[data-radius="pill"],
+[data-radius="pill"] .gram-elements {
   --radius: 9999px;
 }
 
@@ -263,26 +263,26 @@
   }
 }
 
-.gram-elements :where(.aui-md[data-status='running']):empty::after,
+.gram-elements :where(.aui-md[data-status="running"]):empty::after,
 .gram-elements
-  :where(.aui-md[data-status='running'])
+  :where(.aui-md[data-status="running"])
   > :where(:not(ol):not(ul):not(pre)):last-child::after,
 .gram-elements
-  :where(.aui-md[data-status='running'])
+  :where(.aui-md[data-status="running"])
   > pre:last-child
   code::after,
 .gram-elements
-  :where(.aui-md[data-status='running'])
+  :where(.aui-md[data-status="running"])
   > :where(:is(ol, ul):last-child)
   > :where(li:last-child:not(:has(* > li)))::after,
 .gram-elements
-  :where(.aui-md[data-status='running'])
+  :where(.aui-md[data-status="running"])
   > :where(:is(ol, ul):last-child)
   > :where(li:last-child)
   > :where(:is(ol, ul):last-child)
   > :where(li:last-child:not(:has(* > li)))::after,
 .gram-elements
-  :where(.aui-md[data-status='running'])
+  :where(.aui-md[data-status="running"])
   > :where(:is(ol, ul):last-child)
   > :where(li:last-child)
   > :where(:is(ol, ul):last-child)
@@ -291,9 +291,9 @@
   > :where(li:last-child)::after {
   animation: aui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   font-family:
-    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-  --aui-content: '\25cf';
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --aui-content: "\25cf";
   content: var(--aui-content);
   margin-left: 0.25rem;
   margin-right: 0.25rem;