@gram-ai/elements 1.34.0 → 1.35.0

package/src/hooks/useRadius.ts

@@ -34,7 +34,7 @@ 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 = () => {
+export const useRadius = (): ((size: RadiusSize) => string) => {
   const { config } = useElements();
   const radius = config.theme?.radius ?? "soft";
 

package/src/hooks/useSession.ts

@@ -1,7 +1,9 @@
 import { GetSessionFn } from "@/types";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-export function getChatSessionQueryKey(projectSlug: string) {
+export function getChatSessionQueryKey(
+  projectSlug: string,
+): readonly ["chatSession", string] {
   return ["chatSession", projectSlug] as const;
 }
 

package/src/hooks/useThemeProps.ts

@@ -4,13 +4,13 @@ import { useElements } from "./useElements";
 /**
  * Hook to get theme-related props including dark mode class
  */
-export const useThemeProps = () => {
+export const useThemeProps = (): {
+  readonly className: string | undefined;
+} => {
   const { config } = useElements();
-  const theme = config.theme ?? {};
+  const colorScheme = config.theme?.colorScheme ?? "light";
 
   return useMemo(() => {
-    const { colorScheme = "light" } = theme;
-
     const isDark =
       colorScheme === "dark" ||
       (colorScheme === "system" &&
@@ -20,5 +20,5 @@ export const useThemeProps = () => {
     return {
       className: isDark ? "dark" : undefined,
     } as const;
-  }, [theme]);
+  }, [colorScheme]);
 };

package/src/hooks/useToolApproval.ts

@@ -1,11 +1,12 @@
 import { useContext } from "react";
 import { ToolApprovalContext } from "@/contexts/contexts";
+import type { ToolApprovalContextType } from "@/contexts/ToolApprovalContext";
 
 /**
  * Hook to access the tool approval context for managing human-in-the-loop
  * tool execution approval.
  */
-export const useToolApproval = () => {
+export const useToolApproval = (): ToolApprovalContextType => {
   const context = useContext(ToolApprovalContext);
   if (!context) {
     throw new Error(

package/src/lib/cassette.ts

@@ -10,7 +10,12 @@
  * 3. Pass it to `<Replay cassette={...}>` to play it back
  */
 
-import { createUIMessageStream, type ChatTransport, type UIMessage } from "ai";
+import {
+  createUIMessageStream,
+  type ChatTransport,
+  type UIMessage,
+  type UIMessageStreamWriter,
+} from "ai";
 import type { ThreadMessage } from "@assistant-ui/react";
 import { sleep } from "@/lib/utils";
 
@@ -95,6 +100,12 @@ export function recordCassette(messages: readonly ThreadMessage[]): Cassette {
           });
           break;
         // Skip image, file, audio, source, data parts for now
+        case "image":
+        case "file":
+        case "audio":
+        case "source":
+        case "data":
+          break;
       }
     }
 
@@ -135,7 +146,7 @@ export function createReplayTransport(
       // Advance cursor past it (it should be pointing at a user message).
       if (
         cursor < cassette.messages.length &&
-        cassette.messages[cursor].role === "user"
+        cassette.messages[cursor]?.role === "user"
       ) {
         cursor++;
       }
@@ -145,9 +156,10 @@ export function createReplayTransport(
       const assistantMessages: CassetteMessage[] = [];
       while (
         cursor < cassette.messages.length &&
-        cassette.messages[cursor].role === "assistant"
+        cassette.messages[cursor]?.role === "assistant"
       ) {
-        assistantMessages.push(cassette.messages[cursor]);
+        const m = cassette.messages[cursor];
+        if (m) assistantMessages.push(m);
         cursor++;
       }
 
@@ -186,10 +198,10 @@ export function createReplayTransport(
 // Stream writing helpers
 // ---------------------------------------------------------------------------
 
-interface StreamWriter {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  write(part: any): void;
-}
+// Match the `write` shape of `UIMessageStreamWriter<UIMessage>` so callers can
+// pass the writer they receive from `createUIMessageStream` directly. We only
+// rely on `write` here, so this stays narrow on purpose.
+type StreamWriter = Pick<UIMessageStreamWriter<UIMessage>, "write">;
 
 async function writeReplayPart(
   writer: StreamWriter,

package/src/lib/errorTracking.ts

@@ -75,10 +75,7 @@ export function initErrorTracking(config: ErrorTrackingConfig = {}): void {
  * Track an error to Datadog RUM.
  * Includes context about where the error originated.
  */
-export function trackError(
-  error: Error | unknown,
-  context: ErrorContext,
-): void {
+export function trackError(error: unknown, context: ErrorContext): void {
   if (!enabled || !initialized) {
     return;
   }

package/src/lib/messageConverter.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { describe, expect, it } from "vitest";
 import {
   convertGramMessagesToExported,
@@ -6,6 +5,7 @@ import {
   convertGramMessagePartsToUIMessageParts,
   type GramChatMessage,
 } from "./messageConverter";
+import type { ToolCallMessagePart } from "@assistant-ui/react";
 
 /**
  * Helper to create a minimal GramChatMessage for testing.
@@ -41,10 +41,7 @@ describe("convertGramMessagePartsToUIMessageParts", () => {
       tool_calls: makeToolCallsJSON([{ id: "tc_1", name: "search_deals" }]),
     } as Partial<GramChatMessage> & { role: string });
 
-    const parts = convertGramMessagePartsToUIMessageParts(
-      msg as any,
-      new Map(),
-    );
+    const parts = convertGramMessagePartsToUIMessageParts(msg, new Map());
 
     const toolParts = parts.filter((p) => p.type === "dynamic-tool");
     expect(toolParts).toHaveLength(1);
@@ -66,11 +63,7 @@ describe("convertGramMessagePartsToUIMessageParts", () => {
       ]),
     } as Partial<GramChatMessage> & { role: string });
 
-    const parts = convertGramMessagePartsToUIMessageParts(
-      msg as any,
-      new Map(),
-      seen,
-    );
+    const parts = convertGramMessagePartsToUIMessageParts(msg, new Map(), seen);
 
     const toolParts = parts.filter((p) => p.type === "dynamic-tool");
     expect(toolParts).toHaveLength(1);
@@ -230,10 +223,15 @@ describe("convertGramMessagesToExported - string content with tool calls", () =>
 
     const result = convertGramMessagesToExported(messages);
     const assistantEntry = result.messages.find(
-      (m) => m.message.role === "assistant",
+      (m): m is typeof m & { message: { role: "assistant" } } =>
+        m.message.role === "assistant",
     )!;
-    const toolCallParts = (assistantEntry.message as any).content.filter(
-      (p: any) => p.type === "tool-call",
+    const assistantMessage = assistantEntry.message;
+    if (assistantMessage.role !== "assistant") {
+      throw new Error("expected assistant message");
+    }
+    const toolCallParts = assistantMessage.content.filter(
+      (p): p is ToolCallMessagePart => p.type === "tool-call",
     );
     expect(toolCallParts).toHaveLength(1);
     expect(toolCallParts[0]).toMatchObject({

package/src/lib/messageConverter.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 /**
  * Message format converter for Gram API <-> assistant-ui.
  *
@@ -195,7 +193,18 @@ function buildAssistantContentParts(
     });
   }
 
-  let toolCalls = tryParseJSON(msg.tool_calls || "[]");
+  // Accept both the OpenAI/OpenRouter shape (`{ id, function: { name, arguments } }`)
+  // and the assistant-ui shape (`{ toolCallId, toolName, args }`). Tool calls
+  // arrive as JSON the server stored opaquely, so we model the union here.
+  type WireToolCall = {
+    id?: string;
+    toolCallId?: string;
+    function?: { name?: string; arguments?: string | Record<string, unknown> };
+    toolName?: string;
+    args?: string | Record<string, unknown>;
+  };
+
+  let toolCalls = tryParseJSON<WireToolCall[]>(msg.tool_calls || "[]");
   if (!Array.isArray(toolCalls)) {
     console.warn("Invalid tool_calls format, expected an array.");
     toolCalls = [];
@@ -564,7 +573,7 @@ function mediaTypeFromURL(url: string): string {
   return match?.[1] || unspecified;
 }
 
-function tryParseJSON<T = any>(str: string): T | null {
+function tryParseJSON<T = unknown>(str: string): T | null {
   try {
     return JSON.parse(str) as T;
   } catch {

package/src/lib/token.ts

@@ -9,7 +9,7 @@ export function getTokenExpiry(token: string): number | null {
     if (parts.length !== 3) return null;
 
     // base64url → base64 → decode
-    let payload = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+    let payload = parts[1]!.replace(/-/g, "+").replace(/_/g, "/");
     while (payload.length % 4) payload += "=";
 
     const json = atob(payload);
@@ -29,10 +29,7 @@ export function getTokenExpiry(token: string): number | null {
  * of expiry. Fails open (returns false) for non-JWT tokens or tokens
  * without an `exp` claim so they pass through unchanged.
  */
-export function isTokenExpired(
-  token: string,
-  bufferMs: number = 30_000,
-): boolean {
+export function isTokenExpired(token: string, bufferMs = 30_000): boolean {
   const exp = getTokenExpiry(token);
   if (exp === null) return false; // fail-open for non-JWT tokens
   return Date.now() >= exp * 1000 - bufferMs;

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 {

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 (