@gram-ai/elements 1.27.4 → 1.27.5

package/src/components/Replay.tsx

@@ -19,24 +19,27 @@
  * ```
  */
 
-import { ROOT_SELECTOR } from '@/constants/tailwind'
-import { ChatIdContext } from '@/contexts/ChatIdContext'
-import { ElementsContext } from '@/contexts/contexts'
-import { ReplayContext } from '@/contexts/ReplayContext'
-import { ToolApprovalProvider } from '@/contexts/ToolApprovalContext'
+import { ROOT_SELECTOR } from "@/constants/tailwind";
+import { ChatIdContext } from "@/contexts/ChatIdContext";
+import { ElementsContext } from "@/contexts/contexts";
+import { ReplayContext } from "@/contexts/ReplayContext";
+import { ToolApprovalProvider } from "@/contexts/ToolApprovalContext";
 import {
   createReplayTransport,
   type Cassette,
   type ReplayOptions,
-} from '@/lib/cassette'
-import { MODELS } from '@/lib/models'
-import { cn } from '@/lib/utils'
-import { recommended } from '@/plugins'
-import type { ElementsConfig } from '@/types'
-import { AssistantRuntimeProvider, useThreadRuntime } from '@assistant-ui/react'
-import { useChatRuntime } from '@assistant-ui/react-ai-sdk'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactNode, useEffect, useMemo, useRef } from 'react'
+} from "@/lib/cassette";
+import { MODELS } from "@/lib/models";
+import { cn } from "@/lib/utils";
+import { recommended } from "@/plugins";
+import type { ElementsConfig } from "@/types";
+import {
+  AssistantRuntimeProvider,
+  useThreadRuntime,
+} from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode, useEffect, useMemo, useRef } from "react";
 
 // ---------------------------------------------------------------------------
 // Replay component
@@ -44,13 +47,13 @@ import { ReactNode, useEffect, useMemo, useRef } from 'react'
 
 export interface ReplayProps extends ReplayOptions {
   /** The recorded cassette to replay. */
-  cassette: Cassette
-  children: ReactNode
+  cassette: Cassette;
+  children: ReactNode;
   /** Optional ElementsConfig for visual customization (theme, variant, etc.) */
-  config?: Partial<ElementsConfig>
+  config?: Partial<ElementsConfig>;
 }
 
-const replayQueryClient = new QueryClient()
+const replayQueryClient = new QueryClient();
 
 export const Replay = ({
   cassette,
@@ -66,21 +69,21 @@ export const Replay = ({
     userMessageDelay,
     assistantStartDelay,
     onComplete,
-  }
+  };
 
   const transport = useMemo(
     () => createReplayTransport(cassette, replayOptions),
-    [cassette, typingSpeed, userMessageDelay, assistantStartDelay, onComplete]
-  )
+    [cassette, typingSpeed, userMessageDelay, assistantStartDelay, onComplete],
+  );
 
-  const runtime = useChatRuntime({ transport })
+  const runtime = useChatRuntime({ transport });
 
-  const plugins = partialConfig?.plugins ?? recommended
+  const plugins = partialConfig?.plugins ?? recommended;
 
   // Build a minimal ElementsConfig for child components
   const config: ElementsConfig = useMemo(
     () => ({
-      projectSlug: partialConfig?.projectSlug ?? 'replay',
+      projectSlug: partialConfig?.projectSlug ?? "replay",
       variant: partialConfig?.variant,
       theme: partialConfig?.theme,
       welcome: partialConfig?.welcome,
@@ -91,8 +94,8 @@ export const Replay = ({
       modal: partialConfig?.modal,
       sidecar: partialConfig?.sidecar,
     }),
-    [partialConfig, plugins]
-  )
+    [partialConfig, plugins],
+  );
 
   const contextValue = useMemo(
     () => ({
@@ -106,12 +109,12 @@ export const Replay = ({
       plugins,
       mcpTools: undefined,
     }),
-    [config, plugins]
-  )
+    [config, plugins],
+  );
 
-  const replayCtx = useMemo(() => ({ isReplay: true }), [])
+  const replayCtx = useMemo(() => ({ isReplay: true }), []);
 
-  const chatIdValue = useMemo(() => ({ chatId: 'replay' }), [])
+  const chatIdValue = useMemo(() => ({ chatId: "replay" }), []);
 
   return (
     <QueryClientProvider client={replayQueryClient}>
@@ -123,9 +126,9 @@ export const Replay = ({
                 <div
                   className={cn(
                     ROOT_SELECTOR,
-                    (config.variant === 'standalone' ||
-                      config.variant === 'sidecar') &&
-                      'h-full min-h-0 flex-1'
+                    (config.variant === "standalone" ||
+                      config.variant === "sidecar") &&
+                      "h-full min-h-0 flex-1",
                   )}
                 >
                   {children}
@@ -137,15 +140,15 @@ export const Replay = ({
         </ReplayContext.Provider>
       </AssistantRuntimeProvider>
     </QueryClientProvider>
-  )
-}
+  );
+};
 
 // ---------------------------------------------------------------------------
 // ReplayController - auto-submits user messages to drive the replay
 // ---------------------------------------------------------------------------
 
 function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms))
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 /**
@@ -155,23 +158,23 @@ function sleep(ms: number): Promise<void> {
  * it to return to false — otherwise we resolve before the run begins.
  */
 async function waitForRunComplete(
-  runtime: NonNullable<ReturnType<typeof useThreadRuntime>>
+  runtime: NonNullable<ReturnType<typeof useThreadRuntime>>,
 ): Promise<void> {
   // Phase 1: wait for the runtime to start running
   if (!runtime.getState().isRunning) {
     await new Promise<void>((resolve) => {
       const unsub = runtime.subscribe(() => {
         if (runtime.getState().isRunning) {
-          unsub()
-          resolve()
+          unsub();
+          resolve();
         }
-      })
+      });
       // Re-check in case it started between getState and subscribe
       if (runtime.getState().isRunning) {
-        unsub()
-        resolve()
+        unsub();
+        resolve();
       }
-    })
+    });
   }
 
   // Phase 2: wait for the runtime to stop running
@@ -179,68 +182,68 @@ async function waitForRunComplete(
     await new Promise<void>((resolve) => {
       const unsub = runtime.subscribe(() => {
         if (!runtime.getState().isRunning) {
-          unsub()
-          resolve()
+          unsub();
+          resolve();
         }
-      })
+      });
       // Re-check in case it stopped between getState and subscribe
       if (!runtime.getState().isRunning) {
-        unsub()
-        resolve()
+        unsub();
+        resolve();
       }
-    })
+    });
   }
 }
 
 interface ReplayControllerProps {
-  cassette: Cassette
-  options: ReplayOptions
+  cassette: Cassette;
+  options: ReplayOptions;
 }
 
 const ReplayController = ({ cassette, options }: ReplayControllerProps) => {
-  const runtime = useThreadRuntime()
-  const hasStarted = useRef(false)
+  const runtime = useThreadRuntime();
+  const hasStarted = useRef(false);
 
   useEffect(() => {
-    if (hasStarted.current) return
-    hasStarted.current = true
+    if (hasStarted.current) return;
+    hasStarted.current = true;
 
-    const userMessageDelay = options.userMessageDelay ?? 800
-    let cancelled = false
+    const userMessageDelay = options.userMessageDelay ?? 800;
+    let cancelled = false;
 
     const runReplay = async () => {
       for (const msg of cassette.messages) {
-        if (cancelled) return
+        if (cancelled) return;
 
-        if (msg.role === 'user') {
-          await sleep(userMessageDelay)
-          if (cancelled) return
+        if (msg.role === "user") {
+          await sleep(userMessageDelay);
+          if (cancelled) return;
 
           // Extract text from user content parts
           const text = msg.content
-            .filter((p) => p.type === 'text')
+            .filter((p) => p.type === "text")
             .map((p) => p.text)
-            .join('\n')
+            .join("\n");
 
           // Append the user message — triggers transport.sendMessages
-          runtime.append(text)
+          runtime.append(text);
 
           // Wait for the assistant response to finish streaming
-          await waitForRunComplete(runtime)
+          await waitForRunComplete(runtime);
         }
         // Assistant messages are handled by the transport's sendMessages,
         // so we skip them here.
       }
 
-      options.onComplete?.()
-    }
+      options.onComplete?.();
+    };
 
-    runReplay()
+    runReplay();
 
     return () => {
-      cancelled = true
-    }
-  }, [])
+      cancelled = true;
+    };
+  }, []);
 
-  return null
-}
+  return null;
+};

package/src/components/ShadowRoot.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import {
   useEffect,
@@ -7,19 +7,19 @@ import {
   useState,
   type CSSProperties,
   type ReactNode,
-} from 'react'
-import { createPortal } from 'react-dom'
-import { PortalContainerProvider } from '@/contexts/portal-container'
-import { useElements } from '@/hooks/useElements'
-import { useThemeProps } from '@/hooks/useThemeProps'
-import { cn } from '@/lib/utils'
-import { ROOT_SELECTOR } from '@/constants/tailwind'
-import elementsStyles from '@/global.css?inline'
+} from "react";
+import { createPortal } from "react-dom";
+import { PortalContainerProvider } from "@/contexts/portal-container";
+import { useElements } from "@/hooks/useElements";
+import { useThemeProps } from "@/hooks/useThemeProps";
+import { cn } from "@/lib/utils";
+import { ROOT_SELECTOR } from "@/constants/tailwind";
+import elementsStyles from "@/global.css?inline";
 
 interface ShadowRootProps {
-  children: ReactNode
-  hostClassName?: string
-  hostStyle?: CSSProperties
+  children: ReactNode;
+  hostClassName?: string;
+  hostStyle?: CSSProperties;
 }
 
 export const ShadowRoot = ({
@@ -27,52 +27,52 @@ export const ShadowRoot = ({
   hostClassName,
   hostStyle,
 }: ShadowRootProps) => {
-  const hostRef = useRef<HTMLDivElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null)
-  const { config } = useElements()
-  const themeProps = useThemeProps()
+  const hostRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+  const { config } = useElements();
+  const themeProps = useThemeProps();
 
   const rootClassName = useMemo(
     () => cn(ROOT_SELECTOR, themeProps.className),
-    [themeProps.className]
-  )
+    [themeProps.className],
+  );
 
   useEffect(() => {
-    const host = hostRef.current
+    const host = hostRef.current;
     if (!host) {
-      return
+      return;
     }
 
-    const root = host.shadowRoot ?? host.attachShadow({ mode: 'open' })
-    setShadowRoot(root)
-  }, [])
+    const root = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+    setShadowRoot(root);
+  }, []);
 
   useEffect(() => {
     if (!shadowRoot) {
-      return
+      return;
     }
 
     const existingStyle = shadowRoot.querySelector<HTMLStyleElement>(
-      'style[data-gram-elements]'
-    )
+      "style[data-gram-elements]",
+    );
 
     if (existingStyle) {
-      existingStyle.textContent = elementsStyles
-      return
+      existingStyle.textContent = elementsStyles;
+      return;
     }
 
-    const styleElement = document.createElement('style')
-    styleElement.setAttribute('data-gram-elements', 'true')
-    styleElement.textContent = elementsStyles
-    shadowRoot.prepend(styleElement)
-  }, [shadowRoot, elementsStyles])
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-gram-elements", "true");
+    styleElement.textContent = elementsStyles;
+    shadowRoot.prepend(styleElement);
+  }, [shadowRoot, elementsStyles]);
 
   return (
     <div
       ref={hostRef}
       className={hostClassName}
-      style={{ isolation: 'isolate', ...hostStyle }}
+      style={{ isolation: "isolate", ...hostStyle }}
     >
       {shadowRoot
         ? createPortal(
@@ -81,8 +81,8 @@ export const ShadowRoot = ({
               className={rootClassName}
               data-radius={config.theme?.radius}
               style={
-                config.variant === 'standalone'
-                  ? { height: '100%', width: '100%' }
+                config.variant === "standalone"
+                  ? { height: "100%", width: "100%" }
                   : undefined
               }
             >
@@ -90,9 +90,9 @@ export const ShadowRoot = ({
                 {children}
               </PortalContainerProvider>
             </div>,
-            shadowRoot
+            shadowRoot,
           )
         : null}
     </div>
-  )
-}
+  );
+};

package/src/components/ShareButton/index.tsx

@@ -1,16 +1,16 @@
-'use client'
+"use client";
 
-import { Link } from 'lucide-react'
-import { useCallback } from 'react'
+import { Link } from "lucide-react";
+import { useCallback } from "react";
 
-import { Button } from '@/components/ui/button'
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { useThreadId } from '@/hooks/useThreadId'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/tooltip";
+import { useThreadId } from "@/hooks/useThreadId";
+import { cn } from "@/lib/utils";
 
 export interface ShareButtonProps {
   /**
@@ -18,35 +18,35 @@ export interface ShareButtonProps {
    * Receives the share URL on success, or an Error on failure.
    * Use this to show toast notifications or track analytics.
    */
-  onShare?: (result: { url: string } | { error: Error }) => void
+  onShare?: (result: { url: string } | { error: Error }) => void;
 
   /**
    * Custom URL builder. By default, appends `?threadId={id}` to current URL.
    * Return the full share URL.
    */
-  buildShareUrl?: (threadId: string) => string
+  buildShareUrl?: (threadId: string) => string;
 
   /**
    * Button variant
    * @default "ghost"
    */
-  variant?: 'ghost' | 'outline' | 'default'
+  variant?: "ghost" | "outline" | "default";
 
   /**
    * Button size
    * @default "sm"
    */
-  size?: 'sm' | 'default' | 'lg' | 'icon'
+  size?: "sm" | "default" | "lg" | "icon";
 
   /**
    * Additional CSS classes
    */
-  className?: string
+  className?: string;
 
   /**
    * Custom button content. If not provided, shows icon + "Share chat"
    */
-  children?: React.ReactNode
+  children?: React.ReactNode;
 }
 
 /**
@@ -76,19 +76,19 @@ export interface ShareButtonProps {
 export function ShareButton({
   onShare,
   buildShareUrl,
-  variant = 'ghost',
-  size = 'sm',
+  variant = "ghost",
+  size = "sm",
   className,
   children,
 }: ShareButtonProps) {
-  const { threadId } = useThreadId()
+  const { threadId } = useThreadId();
 
   const handleShare = useCallback(async () => {
     if (!threadId) {
       onShare?.({
-        error: new Error('No chat to share yet. Send a message first.'),
-      })
-      return
+        error: new Error("No chat to share yet. Send a message first."),
+      });
+      return;
     }
 
     try {
@@ -96,21 +96,21 @@ export function ShareButton({
       const shareUrl = buildShareUrl
         ? buildShareUrl(threadId)
         : (() => {
-            const url = new URL(window.location.href)
-            url.searchParams.set('threadId', threadId)
-            return url.toString()
-          })()
+            const url = new URL(window.location.href);
+            url.searchParams.set("threadId", threadId);
+            return url.toString();
+          })();
 
       // Copy to clipboard
-      await navigator.clipboard.writeText(shareUrl)
-      onShare?.({ url: shareUrl })
+      await navigator.clipboard.writeText(shareUrl);
+      onShare?.({ url: shareUrl });
     } catch (error) {
       onShare?.({
         error:
-          error instanceof Error ? error : new Error('Failed to copy link'),
-      })
+          error instanceof Error ? error : new Error("Failed to copy link"),
+      });
     }
-  }, [threadId, buildShareUrl, onShare])
+  }, [threadId, buildShareUrl, onShare]);
 
   return (
     <Tooltip>
@@ -120,7 +120,7 @@ export function ShareButton({
           size={size}
           onClick={handleShare}
           disabled={!threadId}
-          className={cn('aui-share-button', className)}
+          className={cn("aui-share-button", className)}
           aria-label="Share chat"
         >
           {children ?? (
@@ -133,9 +133,9 @@ export function ShareButton({
       </TooltipTrigger>
       <TooltipContent>
         {threadId
-          ? 'Copy chat link to clipboard'
-          : 'Send a message first to share'}
+          ? "Copy chat link to clipboard"
+          : "Send a message first to share"}
       </TooltipContent>
     </Tooltip>
-  )
+  );
 }