@gram-ai/elements 1.27.3 → 1.27.5

package/src/hooks/usePortalContainer.ts

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { useContext } from 'react'
-import { PortalContainerContext } from '@/contexts/portal-container-context'
+import { useContext } from "react";
+import { PortalContainerContext } from "@/contexts/portal-container-context";
 
 /**
  * Because we do not want Tailwind to leak from the Elements library, and
@@ -11,6 +11,6 @@ import { PortalContainerContext } from '@/contexts/portal-container-context'
  * scope so that they still inherit the Elements CSS
  */
 export function usePortalContainer(): HTMLElement | null {
-  const ref = useContext(PortalContainerContext)
-  return ref?.current ?? null
+  const ref = useContext(PortalContainerContext);
+  return ref?.current ?? null;
 }

package/src/hooks/useRadius.ts

@@ -1,42 +1,42 @@
-import { Radius } from '@/types'
-import { useElements } from './useElements'
+import { Radius } from "@/types";
+import { useElements } from "./useElements";
 
 /**
  * Radius class mappings for different UI elements
  */
 const radiusClasses: Record<Radius, Record<RadiusSize, string>> = {
   sharp: {
-    sm: 'rounded-sm',
-    md: 'rounded',
-    lg: 'rounded-md',
-    xl: 'rounded-lg',
-    full: 'rounded-lg',
+    sm: "rounded-sm",
+    md: "rounded",
+    lg: "rounded-md",
+    xl: "rounded-lg",
+    full: "rounded-lg",
   },
   soft: {
-    sm: 'rounded',
-    md: 'rounded-lg',
-    lg: 'rounded-xl',
-    xl: 'rounded-2xl',
-    full: 'rounded-full',
+    sm: "rounded",
+    md: "rounded-lg",
+    lg: "rounded-xl",
+    xl: "rounded-2xl",
+    full: "rounded-full",
   },
   round: {
-    sm: 'rounded-lg',
-    md: 'rounded-xl',
-    lg: 'rounded-2xl',
-    xl: 'rounded-3xl',
-    full: 'rounded-full',
+    sm: "rounded-lg",
+    md: "rounded-xl",
+    lg: "rounded-2xl",
+    xl: "rounded-3xl",
+    full: "rounded-full",
   },
-} as const
+} as const;
 
-type RadiusSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+type RadiusSize = "sm" | "md" | "lg" | "xl" | "full";
 
 /**
  * Hook to get radius classes based on theme config
  * Use: const r = useRadius(); then r('lg') returns the appropriate rounded class
  */
 export const useRadius = () => {
-  const { config } = useElements()
-  const radius = config.theme?.radius ?? 'soft'
+  const { config } = useElements();
+  const radius = config.theme?.radius ?? "soft";
 
-  return (size: RadiusSize) => radiusClasses[radius][size]
-}
+  return (size: RadiusSize) => radiusClasses[radius][size];
+};

package/src/hooks/useRecordCassette.ts

@@ -19,61 +19,61 @@
  * ```
  */
 
-import { useThreadRuntime } from '@assistant-ui/react'
-import { useCallback, useRef, useState, useSyncExternalStore } from 'react'
-import { recordCassette } from '@/lib/cassette'
+import { useThreadRuntime } from "@assistant-ui/react";
+import { useCallback, useRef, useState, useSyncExternalStore } from "react";
+import { recordCassette } from "@/lib/cassette";
 
 export function useRecordCassette(): {
   /** Whether recording is currently active. */
-  isRecording: boolean
+  isRecording: boolean;
   /** Current number of messages in the thread. */
-  messageCount: number
+  messageCount: number;
   /** Start recording from the current point in the conversation. */
-  startRecording: () => void
+  startRecording: () => void;
   /** Stop recording. */
-  stopRecording: () => void
+  stopRecording: () => void;
   /** Downloads the recorded conversation as a `.cassette.json` file. */
-  download: (filename?: string) => void
+  download: (filename?: string) => void;
 } {
-  const runtime = useThreadRuntime()
-  const [isRecording, setIsRecording] = useState(false)
-  const startIndexRef = useRef(0)
+  const runtime = useThreadRuntime();
+  const [isRecording, setIsRecording] = useState(false);
+  const startIndexRef = useRef(0);
 
   // Subscribe to runtime state to get reactive message count
   const messageCount = useSyncExternalStore(
     (cb) => runtime.subscribe(cb),
-    () => runtime.getState().messages.length
-  )
+    () => runtime.getState().messages.length,
+  );
 
   const startRecording = useCallback(() => {
-    startIndexRef.current = runtime.getState().messages.length
-    setIsRecording(true)
-  }, [runtime])
+    startIndexRef.current = runtime.getState().messages.length;
+    setIsRecording(true);
+  }, [runtime]);
 
   const stopRecording = useCallback(() => {
-    setIsRecording(false)
-  }, [])
+    setIsRecording(false);
+  }, []);
 
   const download = useCallback(
     (filename?: string) => {
-      const state = runtime.getState()
-      const messages = state.messages.slice(startIndexRef.current)
-      const cassette = recordCassette(messages)
+      const state = runtime.getState();
+      const messages = state.messages.slice(startIndexRef.current);
+      const cassette = recordCassette(messages);
 
-      const json = JSON.stringify(cassette, null, 2)
-      const blob = new Blob([json], { type: 'application/json' })
-      const url = URL.createObjectURL(blob)
+      const json = JSON.stringify(cassette, null, 2);
+      const blob = new Blob([json], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
 
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `${filename ?? 'cassette'}.cassette.json`
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename ?? "cassette"}.cassette.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
     },
-    [runtime]
-  )
+    [runtime],
+  );
 
-  return { isRecording, messageCount, startRecording, stopRecording, download }
+  return { isRecording, messageCount, startRecording, stopRecording, download };
 }

package/src/hooks/useSession.ts

@@ -1,8 +1,8 @@
-import { GetSessionFn } from '@/types'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { GetSessionFn } from "@/types";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 export function getChatSessionQueryKey(projectSlug: string) {
-  return ['chatSession', projectSlug] as const
+  return ["chatSession", projectSlug] as const;
 }
 
 /**
@@ -13,13 +13,13 @@ export const useSession = ({
   getSession,
   projectSlug,
 }: {
-  getSession: GetSessionFn | null
-  projectSlug: string
+  getSession: GetSessionFn | null;
+  projectSlug: string;
 }): string | null => {
-  const queryClient = useQueryClient()
-  const queryKey = getChatSessionQueryKey(projectSlug)
+  const queryClient = useQueryClient();
+  const queryKey = getChatSessionQueryKey(projectSlug);
 
-  const hasData = queryClient.getQueryState(queryKey)?.data !== undefined
+  const hasData = queryClient.getQueryState(queryKey)?.data !== undefined;
 
   const { data: fetchedSessionToken } = useQuery({
     queryKey,
@@ -27,7 +27,7 @@ export const useSession = ({
     enabled: !hasData && getSession !== null,
     staleTime: Infinity, // Session tokens don't need to be refetched
     gcTime: Infinity, // Keep in cache indefinitely
-  })
+  });
 
-  return fetchedSessionToken ?? null
-}
+  return fetchedSessionToken ?? null;
+};

package/src/hooks/useThemeProps.ts

@@ -1,24 +1,24 @@
-import { useMemo } from 'react'
-import { useElements } from './useElements'
+import { useMemo } from "react";
+import { useElements } from "./useElements";
 
 /**
  * Hook to get theme-related props including dark mode class
  */
 export const useThemeProps = () => {
-  const { config } = useElements()
-  const theme = config.theme ?? {}
+  const { config } = useElements();
+  const theme = config.theme ?? {};
 
   return useMemo(() => {
-    const { colorScheme = 'light' } = theme
+    const { colorScheme = "light" } = theme;
 
     const isDark =
-      colorScheme === 'dark' ||
-      (colorScheme === 'system' &&
-        typeof window !== 'undefined' &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches)
+      colorScheme === "dark" ||
+      (colorScheme === "system" &&
+        typeof window !== "undefined" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
 
     return {
-      className: isDark ? 'dark' : undefined,
-    } as const
-  }, [theme])
-}
+      className: isDark ? "dark" : undefined,
+    } as const;
+  }, [theme]);
+};

package/src/hooks/useThreadId.ts

@@ -1,4 +1,4 @@
-import { useAssistantState } from '@assistant-ui/react'
+import { useAssistantState } from "@assistant-ui/react";
 
 /**
  * Hook to access the current thread ID from the Elements chat.
@@ -23,8 +23,8 @@ import { useAssistantState } from '@assistant-ui/react'
  */
 export function useThreadId(): { threadId: string | null } {
   const threadId = useAssistantState(
-    ({ threadListItem }) => threadListItem.remoteId ?? null
-  )
+    ({ threadListItem }) => threadListItem.remoteId ?? null,
+  );
 
-  return { threadId }
+  return { threadId };
 }

package/src/hooks/useToolApproval.ts

@@ -1,16 +1,16 @@
-import { useContext } from 'react'
-import { ToolApprovalContext } from '@/contexts/contexts'
+import { useContext } from "react";
+import { ToolApprovalContext } from "@/contexts/contexts";
 
 /**
  * Hook to access the tool approval context for managing human-in-the-loop
  * tool execution approval.
  */
 export const useToolApproval = () => {
-  const context = useContext(ToolApprovalContext)
+  const context = useContext(ToolApprovalContext);
   if (!context) {
     throw new Error(
-      'useToolApproval must be used within a ToolApprovalProvider'
-    )
+      "useToolApproval must be used within a ToolApprovalProvider",
+    );
   }
-  return context
-}
+  return context;
+};

package/src/hooks/useToolMentions.ts

@@ -1,83 +1,83 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { useAssistantApi, useAssistantState } from '@assistant-ui/react'
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useAssistantApi, useAssistantState } from "@assistant-ui/react";
 import {
   MentionableTool,
   parseMentionedTools,
   removeToolMention,
   toolSetToMentionableTools,
-} from '@/lib/tool-mentions'
+} from "@/lib/tool-mentions";
 
 export interface UseToolMentionsOptions {
-  tools: Record<string, unknown> | undefined
-  enabled?: boolean
+  tools: Record<string, unknown> | undefined;
+  enabled?: boolean;
 }
 
 export interface UseToolMentionsReturn {
-  mentionableTools: MentionableTool[]
-  mentionedToolIds: string[]
-  value: string
-  cursorPosition: number
-  textareaRef: React.RefObject<HTMLTextAreaElement | null>
-  updateCursorPosition: () => void
-  handleAutocompleteChange: (value: string, cursorPosition: number) => void
-  removeMention: (toolId: string) => void
-  isActive: boolean
+  mentionableTools: MentionableTool[];
+  mentionedToolIds: string[];
+  value: string;
+  cursorPosition: number;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  updateCursorPosition: () => void;
+  handleAutocompleteChange: (value: string, cursorPosition: number) => void;
+  removeMention: (toolId: string) => void;
+  isActive: boolean;
 }
 
 export function useToolMentions({
   tools,
   enabled = true,
 }: UseToolMentionsOptions): UseToolMentionsReturn {
-  const [cursorPosition, setCursorPosition] = useState(0)
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-  const api = useAssistantApi()
-  const composerText = useAssistantState(({ composer }) => composer.text)
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const api = useAssistantApi();
+  const composerText = useAssistantState(({ composer }) => composer.text);
 
   const mentionableTools = useMemo(
     () => toolSetToMentionableTools(tools),
-    [tools]
-  )
+    [tools],
+  );
 
   const mentionedToolIds = useMemo(
     () => (enabled ? parseMentionedTools(composerText, tools) : []),
-    [composerText, tools, enabled]
-  )
+    [composerText, tools, enabled],
+  );
 
   const updateCursorPosition = useCallback(() => {
-    const textarea = textareaRef.current
+    const textarea = textareaRef.current;
     if (textarea) {
-      setCursorPosition(textarea.selectionStart)
+      setCursorPosition(textarea.selectionStart);
     }
-  }, [])
+  }, []);
 
   const handleAutocompleteChange = useCallback(
     (newValue: string, newCursorPosition: number) => {
-      api.composer().setText(newValue)
-      setCursorPosition(newCursorPosition)
+      api.composer().setText(newValue);
+      setCursorPosition(newCursorPosition);
 
       setTimeout(() => {
-        const textarea = textareaRef.current
+        const textarea = textareaRef.current;
         if (textarea) {
-          textarea.focus()
-          textarea.setSelectionRange(newCursorPosition, newCursorPosition)
+          textarea.focus();
+          textarea.setSelectionRange(newCursorPosition, newCursorPosition);
         }
-      }, 0)
+      }, 0);
     },
-    [api]
-  )
+    [api],
+  );
 
   const removeMention = useCallback(
     (toolId: string) => {
-      const tool = mentionableTools.find((t) => t.id === toolId)
+      const tool = mentionableTools.find((t) => t.id === toolId);
       if (tool) {
-        const newValue = removeToolMention(composerText, tool.name)
-        api.composer().setText(newValue)
+        const newValue = removeToolMention(composerText, tool.name);
+        api.composer().setText(newValue);
       }
     },
-    [composerText, mentionableTools, api]
-  )
+    [composerText, mentionableTools, api],
+  );
 
-  const isActive = enabled && mentionableTools.length > 0
+  const isActive = enabled && mentionableTools.length > 0;
 
   return {
     mentionableTools,
@@ -89,5 +89,5 @@ export function useToolMentions({
     handleAutocompleteChange,
     removeMention,
     isActive,
-  }
+  };
 }

package/src/index.ts

@@ -1,40 +1,40 @@
 // Polyfill React 18 APIs for older React versions — must be the first import
-import './compat'
+import "./compat";
 
 // Side-effect import to include CSS in build (consumers import via @gram-ai/elements/elements.css)
-import './global.css'
+import "./global.css";
 
 // Context Providers
-export { ElementsProvider as GramElementsProvider } from './contexts/ElementsProvider'
-export { ElementsProvider } from './contexts/ElementsProvider'
-export { useElements as useGramElements } from './hooks/useElements'
-export { useElements } from './hooks/useElements'
-export { useThreadId } from './hooks/useThreadId'
-export { useChatId } from './contexts/ChatIdContext'
+export { ElementsProvider as GramElementsProvider } from "./contexts/ElementsProvider";
+export { ElementsProvider } from "./contexts/ElementsProvider";
+export { useElements as useGramElements } from "./hooks/useElements";
+export { useElements } from "./hooks/useElements";
+export { useThreadId } from "./hooks/useThreadId";
+export { useChatId } from "./contexts/ChatIdContext";
 
 // Core Components
-export { Chat } from '@/components/Chat'
-export { ChatHistory } from '@/components/ChatHistory'
-export { ShareButton } from '@/components/ShareButton'
-export type { ShareButtonProps } from '@/components/ShareButton'
+export { Chat } from "@/components/Chat";
+export { ChatHistory } from "@/components/ChatHistory";
+export { ShareButton } from "@/components/ShareButton";
+export type { ShareButtonProps } from "@/components/ShareButton";
 
 // Replay
-export { Replay } from '@/components/Replay'
-export { useRecordCassette } from '@/hooks/useRecordCassette'
+export { Replay } from "@/components/Replay";
+export { useRecordCassette } from "@/hooks/useRecordCassette";
 export type {
   Cassette,
   CassetteMessage,
   CassettePart,
   ReplayOptions,
-} from '@/lib/cassette'
+} from "@/lib/cassette";
 
 // Frontend Tools
-export { defineFrontendTool } from './lib/tools'
-export type { FrontendTool } from './lib/tools'
+export { defineFrontendTool } from "./lib/tools";
+export type { FrontendTool } from "./lib/tools";
 
 // Error Tracking
-export { trackError } from './lib/errorTracking'
-export type { ErrorContext } from './lib/errorTracking'
+export { trackError } from "./lib/errorTracking";
+export type { ErrorContext } from "./lib/errorTracking";
 
 // Types
 export type {
@@ -68,23 +68,23 @@ export type {
   Variant,
   VARIANTS,
   WelcomeConfig,
-} from './types'
+} from "./types";
 
-export { MODELS } from './lib/models'
+export { MODELS } from "./lib/models";
 
-export type { Plugin } from './types/plugins'
+export type { Plugin } from "./types/plugins";
 
 // Time Range Picker
 export {
   TimeRangePicker,
   getPresetRange,
   PRESETS,
-} from '@/components/ui/time-range-picker'
+} from "@/components/ui/time-range-picker";
 export type {
   TimeRange,
   TimeRangePreset,
   TimeRangePickerProps,
   DateRangePreset,
-} from '@/components/ui/time-range-picker'
-export { Calendar } from '@/components/ui/calendar'
-export type { CalendarProps } from '@/components/ui/calendar'
+} from "@/components/ui/time-range-picker";
+export { Calendar } from "@/components/ui/calendar";
+export type { CalendarProps } from "@/components/ui/calendar";