@gram-ai/elements 1.34.0 → 1.36.0

package/src/compat-shims.ts

@@ -39,6 +39,7 @@ function createUseSyncExternalStoreShim(R: ReactLike) {
       inst.value = value;
       inst.getSnapshot = getSnapshot;
       if (snapshotChanged(inst)) forceUpdate({ inst });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [subscribe, value, getSnapshot]);
 
     R.useEffect(() => {
@@ -46,6 +47,7 @@ function createUseSyncExternalStoreShim(R: ReactLike) {
       return subscribe(() => {
         if (snapshotChanged(inst)) forceUpdate({ inst });
       });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [subscribe]);
 
     return value;
@@ -61,14 +63,26 @@ function createUseIdShim(R: ReactLike) {
   };
 }
 
+export interface ReactShims {
+  useSyncExternalStore: <T>(
+    subscribe: (cb: () => void) => () => void,
+    getSnapshot: () => T,
+  ) => T;
+  useId: () => string;
+  useInsertionEffect: typeof import("react").useLayoutEffect;
+  startTransition: (cb: () => void) => void;
+  useTransition: () => [boolean, (cb: () => void) => void];
+  useDeferredValue: <T>(value: T) => T;
+}
+
 /** Build polyfills for a React instance. Native APIs take precedence via ??. */
-export function createShims(R: ReactLike) {
+export function createShims(R: ReactLike): ReactShims {
   return {
     useSyncExternalStore:
       R.useSyncExternalStore ?? createUseSyncExternalStoreShim(R),
     useId: R.useId ?? createUseIdShim(R),
     useInsertionEffect: R.useInsertionEffect ?? R.useLayoutEffect,
-    startTransition: R.startTransition ?? ((cb: () => void) => cb()),
+    startTransition: R.startTransition ?? ((cb: () => void): void => cb()),
     useTransition:
       R.useTransition ??
       ((): [boolean, (cb: () => void) => void] => [false, (cb) => cb()]),

package/src/components/Chat/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import * as React from "react";
 import { useElements } from "@/hooks/useElements";
 import { AssistantModal } from "../assistant-ui/assistant-modal";
 import { AssistantSidecar } from "../assistant-ui/assistant-sidecar";
@@ -11,7 +12,7 @@ interface ChatProps {
   className?: string;
 }
 
-export const Chat = ({ className }: ChatProps) => {
+export const Chat = ({ className }: ChatProps): React.JSX.Element => {
   const { config } = useElements();
 
   switch (config.variant) {
@@ -34,6 +35,8 @@ export const Chat = ({ className }: ChatProps) => {
 
     // If no variant is provided then fallback to the modal
     // Modal has its own internal ErrorBoundary around Thread
+    case "widget":
+    case undefined:
     default:
       return (
         <ShadowRoot>

package/src/components/Chat/stories/FrontendTools.stories.tsx

@@ -29,7 +29,7 @@ const FetchTool = defineFrontendTool<{ url: string }, string>(
         const text = await response.text();
         return text;
       } catch (error) {
-        return `Error fetching ${url}: ${error instanceof Error ? error.message : "Unknown error"}. Note: URL must support CORS for browser requests.`;
+        return `Error fetching ${String(url)}: ${error instanceof Error ? error.message : "Unknown error"}. Note: URL must support CORS for browser requests.`;
       }
     },
   },

package/src/components/Chat/stories/ToolApproval.stories.tsx

@@ -93,8 +93,8 @@ const deleteFile = defineFrontendTool<{ fileId: string }, string>(
       fileId: z.string().describe("The ID of the file to delete"),
     }),
     execute: async ({ fileId }) => {
-      alert(`File ${fileId} deleted`);
-      return `File ${fileId} deleted`;
+      alert(`File ${String(fileId)} deleted`);
+      return `File ${String(fileId)} deleted`;
     },
   },
   "deleteFile",

package/src/components/Chat/stories/Tools.stories.tsx

@@ -139,7 +139,9 @@ const ProductCardComponent = ({ result }: ToolCallMessagePartProps) => {
               ${product.price?.toFixed(2)}
             </span>
             <button
-              onClick={handleAddToCart}
+              onClick={() => {
+                void handleAddToCart();
+              }}
               disabled={
                 isLoading || addedToCart || !canAddToCart || !product.inStock
               }
@@ -242,8 +244,10 @@ const ApproveRequestTool = defineFrontendTool<{ id: number }, string>(
     }),
     execute: async ({ id }) => {
       // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      return `Request #${id} has been approved successfully.`;
+      await new Promise((resolve) => {
+        setTimeout(resolve, 500);
+      });
+      return `Request #${String(id)} has been approved successfully.`;
     },
   },
   "approve_request",
@@ -260,8 +264,12 @@ const RejectRequestTool = defineFrontendTool<
       reason: z.string().optional().describe("Reason for rejection"),
     }),
     execute: async ({ id, reason }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      return `Request #${id} has been rejected.${reason ? ` Reason: ${reason}` : ""}`;
+      await new Promise((resolve) => {
+        setTimeout(resolve, 500);
+      });
+      return `Request #${String(id)} has been rejected.${
+        reason ? ` Reason: ${JSON.stringify(reason)}` : ""
+      }`;
     },
   },
   "reject_request",

package/src/components/ChatHistory.tsx

@@ -7,7 +7,9 @@ interface ChatHistoryProps {
   className?: string;
 }
 
-export const ChatHistory = ({ className }: ChatHistoryProps) => {
+export const ChatHistory = ({
+  className,
+}: ChatHistoryProps): React.JSX.Element => {
   return (
     <ShadowRoot hostStyle={{ height: "inherit", width: "inherit" }}>
       <ThreadList className={className} />

package/src/components/FrontendTools/index.tsx

@@ -5,7 +5,7 @@ export function FrontendTools({
   tools: frontendTools,
 }: {
   tools: FrontendTools;
-}) {
+}): React.JSX.Element {
   return (
     <>
       {Object.entries(frontendTools).map(([, tool]) =>

package/src/components/MessageContent.tsx

@@ -26,6 +26,7 @@ const STUB_CONTEXT: ElementsContextType = {
   setIsOpen: () => {},
   plugins: recommended,
   mcpTools: undefined,
+  mcpToolsLoading: false,
 };
 
 export interface MessageContentProps {

package/src/components/Replay.stories.tsx

@@ -1,10 +1,9 @@
-import type { StoryFn } from "@storybook/react-vite";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Chat } from "@/components/Chat";
 import { Replay } from "@/components/Replay";
 import type { Cassette } from "@/lib/cassette";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const meta: any = {
+const meta: Meta<typeof Replay> = {
   title: "Misc/Replay",
   component: Replay,
   parameters: {

package/src/components/Replay.tsx

@@ -63,17 +63,20 @@ export const Replay = ({
   userMessageDelay,
   assistantStartDelay,
   onComplete,
-}: ReplayProps) => {
-  const replayOptions: ReplayOptions = {
-    typingSpeed,
-    userMessageDelay,
-    assistantStartDelay,
-    onComplete,
-  };
+}: ReplayProps): React.JSX.Element => {
+  const replayOptions = useMemo<ReplayOptions>(
+    () => ({
+      typingSpeed,
+      userMessageDelay,
+      assistantStartDelay,
+      onComplete,
+    }),
+    [typingSpeed, userMessageDelay, assistantStartDelay, onComplete],
+  );
 
   const transport = useMemo(
     () => createReplayTransport(cassette, replayOptions),
-    [cassette, typingSpeed, userMessageDelay, assistantStartDelay, onComplete],
+    [cassette, replayOptions],
   );
 
   const runtime = useChatRuntime({ transport });
@@ -108,6 +111,7 @@ export const Replay = ({
       setIsOpen: () => {},
       plugins,
       mcpTools: undefined,
+      mcpToolsLoading: false,
     }),
     [config, plugins],
   );
@@ -148,7 +152,9 @@ export const Replay = ({
 // ---------------------------------------------------------------------------
 
 function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
 }
 
 /**
@@ -238,11 +244,12 @@ const ReplayController = ({ cassette, options }: ReplayControllerProps) => {
       options.onComplete?.();
     };
 
-    runReplay();
+    void runReplay();
 
     return () => {
       cancelled = true;
     };
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- run-once driver, see hasStarted ref
   }, []);
 
   return null;

package/src/components/ShadowRoot.tsx

@@ -26,7 +26,7 @@ export const ShadowRoot = ({
   children,
   hostClassName,
   hostStyle,
-}: ShadowRootProps) => {
+}: ShadowRootProps): React.JSX.Element => {
   const hostRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
@@ -66,7 +66,7 @@ export const ShadowRoot = ({
     styleElement.setAttribute("data-gram-elements", "true");
     styleElement.textContent = elementsStyles;
     shadowRoot.prepend(styleElement);
-  }, [shadowRoot, elementsStyles]);
+  }, [shadowRoot]);
 
   return (
     <div

package/src/components/ShareButton/index.tsx

@@ -80,7 +80,7 @@ export function ShareButton({
   size = "sm",
   className,
   children,
-}: ShareButtonProps) {
+}: ShareButtonProps): React.JSX.Element {
   const { threadId } = useThreadId();
 
   const handleShare = useCallback(async () => {
@@ -118,7 +118,9 @@ export function ShareButton({
         <Button
           variant={variant}
           size={size}
-          onClick={handleShare}
+          onClick={() => {
+            void handleShare();
+          }}
           disabled={!threadId}
           className={cn("aui-share-button", className)}
           aria-label="Share chat"

package/src/components/assistant-ui/assistant-modal.tsx

@@ -36,9 +36,9 @@ const LAYOUT_TRANSITION = {
 } as const;
 
 type Dimensions = {
-  width?: string | number | `${number}%`;
-  height?: string | number | `${number}%`;
-  maxHeight?: string | number | `${number}%`;
+  width?: string | number;
+  height?: string | number;
+  maxHeight?: string | number;
 };
 
 interface AssistantModalProps {
@@ -277,6 +277,8 @@ function positionClassname(
       return "left-4 top-4";
     case "bottom-right":
       return "right-4 bottom-4";
+    case undefined:
+      return "right-4 bottom-4";
     default:
       assertNever(position);
   }

package/src/components/assistant-ui/attachment.tsx

@@ -140,7 +140,7 @@ const AttachmentUI: FC = () => {
         return "File";
       default: {
         const _exhaustiveCheck: never = type;
-        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+        throw new Error(`Unknown attachment type: ${String(_exhaustiveCheck)}`);
       }
     }
   });

package/src/components/assistant-ui/error-boundary.tsx

@@ -90,7 +90,7 @@ export class ErrorBoundary extends Component<
     this.props.onError?.(error, errorInfo);
   }
 
-  handleRetry = () => {
+  handleRetry = (): void => {
     // Increment resetKey to force remount of children, reinitializing the chat
     this.setState((state) => ({
       hasError: false,

package/src/components/assistant-ui/markdown-text.tsx

@@ -66,7 +66,7 @@ const useCopyToClipboard = ({
   const copyToClipboard = (value: string) => {
     if (!value) return;
 
-    navigator.clipboard.writeText(value).then(() => {
+    void navigator.clipboard.writeText(value).then(() => {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), copiedDuration);
     });

package/src/components/assistant-ui/thinking-indicator.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useAssistantState } from "@assistant-ui/react";
+import { type FC, useEffect, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Whimsical verbs cycled while the assistant is "thinking" — i.e. the message
+ * is running but no answer text has streamed in yet (or it is waiting on a tool
+ * call / reasoning). The word shown is cosmetic and NOT tied to the actual work
+ * being done, mirroring the playful verbs Claude shows while it works. To make
+ * them reflect the real action instead, map from the streamed tool name in
+ * `ThinkingIndicator` below.
+ */
+const THINKING_VERBS = [
+  "Thinking",
+  "Reasoning",
+  "Pondering",
+  "Synthesizing",
+  "Connecting",
+  "Analyzing",
+  "Inspecting",
+  "Correlating",
+  "Digging",
+  "Untangling",
+  "Assembling",
+  "Sketching",
+  "Reticulating",
+  "Wrangling",
+  "Distilling",
+  "Surveying",
+  "Mapping",
+  "Cross-referencing",
+  "Investigating",
+  "Considering",
+  "Formulating",
+  "Piecing",
+  "Tracing",
+  "Computing",
+  "Noodling",
+  "Percolating",
+  "Marshalling",
+  "Crunching",
+  "Orchestrating",
+  "Composing",
+] as const;
+
+// Cadence: hold each verb, then crossfade to the next.
+const HOLD_MS = 2000;
+const FADE_MS = 350;
+
+function shuffled<T>(items: readonly T[]): T[] {
+  const copy = [...items];
+  for (let i = copy.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [copy[i], copy[j]] = [copy[j]!, copy[i]!];
+  }
+  return copy;
+}
+
+/** Tracks the user's `prefers-reduced-motion` setting, updating if it changes. */
+function usePrefersReducedMotion(): boolean {
+  const query = "(prefers-reduced-motion: reduce)";
+  const [reduced, setReduced] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia(query).matches,
+  );
+
+  useEffect(() => {
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    )
+      return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setReduced(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return reduced;
+}
+
+/**
+ * Cycles through a shuffled copy of {@link THINKING_VERBS} while `active`, with
+ * a brief opacity dip between words so they crossfade rather than snap. When the
+ * user prefers reduced motion, a single verb is shown statically — no timer, no
+ * fade — so motion-sensitive users don't get text changing under them.
+ */
+function useThinkingVerb(
+  active: boolean,
+  reduced: boolean,
+): { verb: string; visible: boolean } {
+  const order = useMemo(() => shuffled(THINKING_VERBS), []);
+  const [index, setIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    // Restore visibility on every (de)activation and motion-preference change —
+    // only the cycling path below dims it. This runs before the early return so
+    // that flipping reduced-motion on (or deactivating) during a fade-out can't
+    // latch the verb at opacity-0 forever.
+    setVisible(true);
+
+    if (!active || reduced) return;
+
+    let outTimer: ReturnType<typeof setTimeout>;
+    let inTimer: ReturnType<typeof setTimeout>;
+
+    const tick = () => {
+      setVisible(false);
+      outTimer = setTimeout(() => {
+        setIndex((i) => (i + 1) % order.length);
+        setVisible(true);
+        inTimer = setTimeout(tick, HOLD_MS);
+      }, FADE_MS);
+    };
+
+    inTimer = setTimeout(tick, HOLD_MS);
+    return () => {
+      clearTimeout(outTimer);
+      clearTimeout(inTimer);
+    };
+  }, [active, reduced, order.length]);
+
+  return { verb: order[index]!, visible };
+}
+
+/**
+ * Shows a rainbow spinner alongside a cycling "thinking" verb whenever the
+ * assistant is running but has not yet produced visible answer text. Once text
+ * starts streaming, this hides and the inline trailing dot (see the
+ * `aui-md[data-status="running"]` rules in global.css) takes over.
+ */
+export const ThinkingIndicator: FC = () => {
+  const active = useAssistantState(({ message }) => {
+    if (message.status?.type !== "running") return false;
+    const parts = message.parts;
+    if (parts.length === 0) return true;
+    const last = parts[parts.length - 1];
+    if (!last) return true;
+    if (last.type === "tool-call" || last.type === "reasoning") return true;
+    if (last.type === "text") return last.text.trim().length === 0;
+    return false;
+  });
+
+  const reducedMotion = usePrefersReducedMotion();
+  const { verb, visible } = useThinkingVerb(active, reducedMotion);
+
+  if (!active) return null;
+
+  return (
+    <div
+      className="aui-thinking mt-2 flex items-center gap-2 text-sm text-muted-foreground"
+      role="status"
+    >
+      {/* Stable label for assistive tech — the rotating verb below is purely
+          decorative, so announcing each word would just be noise. */}
+      <span className="sr-only">Assistant is working…</span>
+      <span className="aui-thinking-dot" aria-hidden="true" />
+      <span
+        aria-hidden="true"
+        className={cn(
+          "aui-thinking-label transition-opacity duration-300 ease-out motion-reduce:transition-none",
+          visible ? "opacity-100" : "opacity-0",
+        )}
+      >
+        {verb}…
+      </span>
+    </div>
+  );
+};