@gram-ai/elements 1.33.2 → 1.35.0

package/src/lib/tool-mentions.ts

@@ -24,7 +24,10 @@ export function toolSetToMentionableTools(
     name,
     description:
       typeof tool === "object" && tool !== null && "description" in tool
-        ? String((tool as { description?: unknown }).description ?? "")
+        ? (() => {
+            const desc = (tool as { description?: unknown }).description;
+            return typeof desc === "string" ? desc : "";
+          })()
         : undefined,
   }));
 }
@@ -38,7 +41,7 @@ export function parseMentionedTools(text: string, tools: ToolRecord): string[] {
 
   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) =>

package/src/lib/tools.byte-cap.test.ts

@@ -114,7 +114,7 @@ describe("wrapToolsWithByteCap", () => {
       t: { description: "", inputSchema: { type: "object" }, execute } as never,
     };
     const wrapped = wrapToolsWithByteCap(tools, 256);
-    const wrappedExecute = wrapped.t.execute!;
+    const wrappedExecute = wrapped.t!.execute!;
     const out = (await wrappedExecute({}, { toolCallId: "id" } as never)) as {
       content: Array<{ text: string }>;
     };

package/src/lib/tools.test.ts

@@ -252,7 +252,7 @@ describe("frontend tool Skip flow (sendAutomaticallyWhen fix)", () => {
       0,
     );
     const toolResult = (
-      next?.content as Array<{ type: string; output?: { type?: string } }>
+      next!.content as Array<{ type: string; output?: { type?: string } }>
     )[0];
     expect(toolResult?.type).toBe("tool-result");
   });

package/src/lib/tools.ts

@@ -11,7 +11,9 @@ import z from "zod";
 /**
  * Converts from assistant-ui tool format to the AI SDK tool shape
  */
-export const toAISDKTools = (tools: Record<string, Tool>) => {
+export const toAISDKTools = (
+  tools: Record<string, Tool>,
+): Record<string, { description?: string; parameters: JSONSchema7 }> => {
   return Object.fromEntries(
     Object.entries(tools).map(([name, tool]) => [
       name,
@@ -28,7 +30,9 @@ export const toAISDKTools = (tools: Record<string, Tool>) => {
 /**
  * Returns only frontend tools that are enabled
  */
-export const getEnabledTools = (tools: Record<string, Tool>) => {
+export const getEnabledTools = (
+  tools: Record<string, Tool>,
+): Record<string, Tool> => {
   return Object.fromEntries(
     Object.entries(tools).filter(
       ([, tool]) => !tool.disabled && tool.type !== "backend",
@@ -38,10 +42,16 @@ export const getEnabledTools = (tools: Record<string, Tool>) => {
 
 /**
  * A frontend tool is a tool that is defined by the user and can be used in the chat.
+ *
+ * Shape mirrors assistant-ui's `AssistantTool`: an `FC` (rendered with no props
+ * at runtime to register the tool) plus an `unstable_tool` describing the tool
+ * itself. Keeping the FC unparameterised here matches the SDK and allows tools
+ * with different `TArgs`/`TResult` to coexist in a `Record<string, FrontendTool<...>>`.
  */
-export type FrontendTool<TArgs extends Record<string, unknown>, TResult> = FC<
-  AssistantToolProps<TArgs, TResult>
-> & {
+export type FrontendTool<
+  TArgs extends Record<string, unknown>,
+  TResult,
+> = FC & {
   unstable_tool: AssistantToolProps<TArgs, TResult>;
 };
 

package/src/lib/utils.ts

@@ -1,12 +1,12 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export function cn(...inputs: ClassValue[]) {
+export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs));
 }
 
 export function assertNever(value: unknown): never {
-  throw new Error(`Unexpected value: ${value}`);
+  throw new Error(`Unexpected value: ${String(value)}`);
 }
 
 export function assert(condition: unknown, message: string): asserts condition {
@@ -14,3 +14,23 @@ export function assert(condition: unknown, message: string): asserts condition {
     throw new Error(message);
   }
 }
+
+/** Sleep that respects AbortSignal for clean cancellation. */
+export function sleep(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new DOMException("Aborted", "AbortError"));
+      return;
+    }
+    const onAbort = () => {
+      clearTimeout(timeout);
+      signal?.removeEventListener("abort", onAbort);
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+    const timeout = setTimeout(() => {
+      signal?.removeEventListener("abort", onAbort);
+      resolve();
+    }, ms);
+    signal?.addEventListener("abort", onAbort, { once: true });
+  });
+}

package/src/lib.d.ts

@@ -1 +1,8 @@
-type FIXME<T, S extends string> = (T & S) | T;
+// Escape hatch type — flags any-cast call sites with a required reason message
+// so they're greppable and reviewable.
+//
+// Usage:
+//   const value = apiCall() as FIXME<"Need to fix upstream API types">;
+
+// oxlint-disable-next-line typescript/no-explicit-any
+type FIXME<M extends string> = any;

package/src/plugins/chart/chart.test.ts

@@ -1,10 +1,10 @@
 import { describe, it, expect } from "vitest";
-import { parse, View, Warn } from "vega";
+import { parse, View, Warn, type Spec } from "vega";
 import { expressionInterpreter } from "vega-interpreter";
 
 describe("ChartRenderer CSP compliance", () => {
   it("renders a chart using vega-interpreter without eval", async () => {
-    const spec = {
+    const spec: Spec = {
       $schema: "https://vega.github.io/schema/vega/v5.json",
       width: 400,
       height: 200,
@@ -46,8 +46,7 @@ describe("ChartRenderer CSP compliance", () => {
       ],
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const runtime = parse(spec as any, undefined, { ast: true });
+    const runtime = parse(spec, undefined, { ast: true });
 
     // This is the key - using expr: vegaInterpreter means no eval() is called
     const view = new View(runtime, {

package/src/plugins/chart/component.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 import { isJsonRenderTree, type JsonRenderNode } from "@/lib/generative-ui";
 import { SyntaxHighlighterProps } from "@assistant-ui/react-markdown";
 import { AlertCircleIcon } from "lucide-react";
-import { FC, useMemo } from "react";
+import { ElementType, FC, useMemo } from "react";
 import { MacOSWindowFrame } from "../components/MacOSWindowFrame";
 import { PluginLoadingState } from "../components/PluginLoadingState";
 
@@ -27,15 +27,16 @@ const loadingMessages = [
   "Processing data...",
 ];
 
-function getRandomLoadingMessage() {
-  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)];
+function getRandomLoadingMessage(): string {
+  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)]!;
 }
 
 /**
- * Chart components registry
+ * Chart components registry. Each entry accepts the chart-specific prop shape
+ * declared in `./ui`, but the registry erases those generics via `ElementType`
+ * so heterogeneous components can coexist under one key-indexed map.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const chartComponents: Record<string, FC<any>> = {
+const chartComponents: Record<string, ElementType> = {
   BarChart,
   LineChart,
   AreaChart,

package/src/plugins/chart/ui/area-chart.tsx

@@ -72,7 +72,7 @@ export const AreaChart: FC<AreaChartProps> = ({
   const seriesKeys = useMemo(() => {
     if (series && series.length > 0) return series;
     if (data.length === 0) return [];
-    const keys = Object.keys(data[0]).filter((k) => k !== "label");
+    const keys = Object.keys(data[0]!).filter((k) => k !== "label");
     return keys;
   }, [data, series]);
 

package/src/plugins/chart/ui/line-chart.tsx

@@ -74,7 +74,7 @@ export const LineChart: FC<LineChartProps> = ({
   const seriesKeys = useMemo(() => {
     if (series && series.length > 0) return series;
     if (data.length === 0) return [];
-    const keys = Object.keys(data[0]).filter((k) => k !== "label");
+    const keys = Object.keys(data[0]!).filter((k) => k !== "label");
     return keys;
   }, [data, series]);
 

package/src/plugins/generative-ui/ui/accordion-wrapper.tsx

@@ -19,7 +19,7 @@ export interface AccordionWrapperProps {
 export function AccordionWrapper({
   type = "single",
   children,
-}: AccordionWrapperProps) {
+}: AccordionWrapperProps): React.JSX.Element {
   // Type assertion needed because Radix types are complex
   const AccordionRoot = AccordionPrimitive as React.FC<{
     type: "single" | "multiple";
@@ -47,7 +47,7 @@ export function AccordionItemWrapper({
   value,
   title,
   children,
-}: AccordionItemWrapperProps) {
+}: AccordionItemWrapperProps): React.JSX.Element {
   return (
     <AccordionItemPrimitive value={value}>
       <AccordionTrigger>{title}</AccordionTrigger>

package/src/plugins/generative-ui/ui/accordion.tsx

@@ -8,14 +8,14 @@ import { cn } from "@/lib/utils";
 
 function Accordion({
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+}: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element {
   return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
 function AccordionItem({
   className,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+}: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element {
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
@@ -29,7 +29,7 @@ function AccordionTrigger({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element {
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
@@ -51,7 +51,7 @@ function AccordionContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+}: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element {
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"

package/src/plugins/generative-ui/ui/action-button.tsx

@@ -25,7 +25,7 @@ export function ActionButton({
   className,
   disabled,
   ...props
-}: ActionButtonProps) {
+}: ActionButtonProps): React.JSX.Element {
   const { executeTool, isToolAvailable } = useToolExecution();
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -56,7 +56,9 @@ export function ActionButton({
         variant={error ? "destructive" : variant}
         size={size}
         className={cn(className)}
-        onClick={handleClick}
+        onClick={() => {
+          void handleClick();
+        }}
         disabled={disabled || isLoading || !toolAvailable}
         {...props}
       >

package/src/plugins/generative-ui/ui/alert-wrapper.tsx

@@ -16,7 +16,7 @@ export function AlertWrapper({
   title,
   description,
   variant = "default",
-}: AlertWrapperProps) {
+}: AlertWrapperProps): React.JSX.Element {
   return (
     <Alert variant={variant}>
       <AlertTitle>{title}</AlertTitle>

package/src/plugins/generative-ui/ui/alert.tsx

@@ -23,7 +23,8 @@ function Alert({
   className,
   variant,
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof alertVariants>): React.JSX.Element {
   return (
     <div
       data-slot="alert"
@@ -34,7 +35,10 @@ function Alert({
   );
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+function AlertTitle({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="alert-title"
@@ -50,7 +54,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
 function AlertDescription({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="alert-description"

package/src/plugins/generative-ui/ui/avatar-wrapper.tsx

@@ -12,7 +12,11 @@ export interface AvatarWrapperProps {
 /**
  * Avatar wrapper that takes src, alt, and fallback as props.
  */
-export function AvatarWrapper({ src, alt, fallback }: AvatarWrapperProps) {
+export function AvatarWrapper({
+  src,
+  alt,
+  fallback,
+}: AvatarWrapperProps): React.JSX.Element {
   return (
     <Avatar>
       {src && <AvatarImage src={src} alt={alt} />}

package/src/plugins/generative-ui/ui/avatar.tsx

@@ -11,7 +11,7 @@ function Avatar({
   ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
   size?: "default" | "sm" | "lg";
-}) {
+}): React.JSX.Element {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
@@ -28,7 +28,7 @@ function Avatar({
 function AvatarImage({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
@@ -41,7 +41,7 @@ function AvatarImage({
 function AvatarFallback({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
@@ -54,7 +54,10 @@ function AvatarFallback({
   );
 }
 
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+function AvatarBadge({
+  className,
+  ...props
+}: React.ComponentProps<"span">): React.JSX.Element {
   return (
     <span
       data-slot="avatar-badge"
@@ -70,7 +73,10 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
   );
 }
 
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+function AvatarGroup({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="avatar-group"
@@ -86,7 +92,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
 function AvatarGroupCount({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="avatar-group-count"

package/src/plugins/generative-ui/ui/badge.tsx

@@ -46,7 +46,7 @@ function Badge({
   content,
   children,
   ...props
-}: BadgeProps) {
+}: BadgeProps): React.JSX.Element {
   const Comp = asChild ? Slot.Root : "span";
 
   return (

package/src/plugins/generative-ui/ui/button-wrapper.tsx

@@ -23,7 +23,7 @@ export function ButtonWrapper({
   variant = "default",
   size = "default",
   disabled = false,
-}: ButtonWrapperProps) {
+}: ButtonWrapperProps): React.JSX.Element {
   return (
     <Button variant={variant} size={size} disabled={disabled}>
       {label}

package/src/plugins/generative-ui/ui/button.tsx

@@ -47,7 +47,7 @@ function Button({
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-  }) {
+  }): React.JSX.Element {
   const Comp = asChild ? Slot.Root : "button";
 
   return (

package/src/plugins/generative-ui/ui/card-wrapper.tsx

@@ -15,7 +15,7 @@ export function CardWrapper({
   className,
   children,
   ...props
-}: CardWrapperProps) {
+}: CardWrapperProps): React.JSX.Element {
   return (
     <div
       data-slot="card-wrapper"

package/src/plugins/generative-ui/ui/card.tsx

@@ -2,7 +2,10 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card"
@@ -15,7 +18,10 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-header"
@@ -28,7 +34,10 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-title"
@@ -38,7 +47,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-description"
@@ -48,7 +60,10 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-action"
@@ -61,7 +76,10 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-content"
@@ -71,7 +89,10 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-footer"

package/src/plugins/generative-ui/ui/checkbox-wrapper.tsx

@@ -18,7 +18,7 @@ export function CheckboxWrapper({
   label,
   valuePath,
   defaultChecked,
-}: CheckboxWrapperProps) {
+}: CheckboxWrapperProps): React.JSX.Element {
   const id = React.useId();
 
   return (

package/src/plugins/generative-ui/ui/checkbox.tsx

@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 function Checkbox({
   className,
   ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"

package/src/plugins/generative-ui/ui/data-table.tsx

@@ -25,7 +25,7 @@ export function DataTable({
   rows,
   className,
   ...props
-}: DataTableProps) {
+}: DataTableProps): React.JSX.Element {
   return (
     <div className={cn(className)} {...props}>
       <Table>

package/src/plugins/generative-ui/ui/dialog.tsx

@@ -9,32 +9,32 @@ import { Button } from "@/components/ui/button";
 
 function Dialog({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+}: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+}: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+}: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element {
   return (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
@@ -54,7 +54,7 @@ function DialogContent({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
-}) {
+}): React.JSX.Element {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
@@ -81,7 +81,10 @@ function DialogContent({
   );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="dialog-header"
@@ -98,7 +101,7 @@ function DialogFooter({
   ...props
 }: React.ComponentProps<"div"> & {
   showCloseButton?: boolean;
-}) {
+}): React.JSX.Element {
   return (
     <div
       data-slot="dialog-footer"
@@ -121,7 +124,7 @@ function DialogFooter({
 function DialogTitle({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
@@ -134,7 +137,9 @@ function DialogTitle({
 function DialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: React.ComponentProps<
+  typeof DialogPrimitive.Description
+>): React.JSX.Element {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"