@gram-ai/elements 1.27.4 → 1.27.6

package/src/lib/tools.ts

@@ -1,12 +1,12 @@
-import type { ToolsFilter } from '@/types'
+import type { ToolsFilter } from "@/types";
 import {
   AssistantToolProps,
   Tool,
   makeAssistantTool,
-} from '@assistant-ui/react'
-import { JSONSchema7, ToolSet, type ToolCallOptions } from 'ai'
-import { FC } from 'react'
-import z from 'zod'
+} from "@assistant-ui/react";
+import { JSONSchema7, ToolSet, type ToolCallOptions } from "ai";
+import { FC } from "react";
+import z from "zod";
 
 /**
  * Converts from assistant-ui tool format to the AI SDK tool shape
@@ -21,9 +21,9 @@ export const toAISDKTools = (tools: Record<string, Tool>) => {
           ? z.toJSONSchema(tool.parameters)
           : tool.parameters) as JSONSchema7,
       },
-    ])
-  )
-}
+    ]),
+  );
+};
 
 /**
  * Returns only frontend tools that are enabled
@@ -31,10 +31,10 @@ export const toAISDKTools = (tools: Record<string, Tool>) => {
 export const getEnabledTools = (tools: Record<string, Tool>) => {
   return Object.fromEntries(
     Object.entries(tools).filter(
-      ([, tool]) => !tool.disabled && tool.type !== 'backend'
-    )
-  )
-}
+      ([, tool]) => !tool.disabled && tool.type !== "backend",
+    ),
+  );
+};
 
 /**
  * A frontend tool is a tool that is defined by the user and can be used in the chat.
@@ -42,37 +42,37 @@ export const getEnabledTools = (tools: Record<string, Tool>) => {
 export type FrontendTool<TArgs extends Record<string, unknown>, TResult> = FC<
   AssistantToolProps<TArgs, TResult>
 > & {
-  unstable_tool: AssistantToolProps<TArgs, TResult>
-}
+  unstable_tool: AssistantToolProps<TArgs, TResult>;
+};
 
 /**
  * Module-level approval config that gets set by ElementsProvider at runtime.
  * This allows defineFrontendTool to check approval status during execute.
  */
 let approvalConfig: {
-  helpers: ApprovalHelpers
-  requiresApproval: (toolName: string) => boolean
-} | null = null
+  helpers: ApprovalHelpers;
+  requiresApproval: (toolName: string) => boolean;
+} | null = null;
 
 /**
  * Sets the approval configuration. Called by ElementsProvider.
  */
 export function setFrontendToolApprovalConfig(
   helpers: ApprovalHelpers,
-  toolsRequiringApproval: ToolsFilter
+  toolsRequiringApproval: ToolsFilter,
 ): void {
-  const requiresApproval = createRequiresApprovalFn(toolsRequiringApproval)
+  const requiresApproval = createRequiresApprovalFn(toolsRequiringApproval);
   approvalConfig = {
     helpers,
     requiresApproval,
-  }
+  };
 }
 
 /**
  * Clears the approval configuration. Called when ElementsProvider unmounts.
  */
 export function clearFrontendToolApprovalConfig(): void {
-  approvalConfig = null
+  approvalConfig = null;
 }
 
 /**
@@ -80,18 +80,18 @@ export function clearFrontendToolApprovalConfig(): void {
  * Handles both array and function-based configurations.
  */
 function createRequiresApprovalFn(
-  toolsRequiringApproval: ToolsFilter | undefined
+  toolsRequiringApproval: ToolsFilter | undefined,
 ): (toolName: string) => boolean {
   if (!toolsRequiringApproval) {
-    return () => false
+    return () => false;
   }
 
-  if (typeof toolsRequiringApproval === 'function') {
-    return (toolName: string) => toolsRequiringApproval({ toolName })
+  if (typeof toolsRequiringApproval === "function") {
+    return (toolName: string) => toolsRequiringApproval({ toolName });
   }
 
-  const approvalSet = new Set(toolsRequiringApproval)
-  return (toolName: string) => approvalSet.has(toolName)
+  const approvalSet = new Set(toolsRequiringApproval);
+  return (toolName: string) => approvalSet.has(toolName);
 }
 
 /**
@@ -102,42 +102,46 @@ export const defineFrontendTool = <
   TResult,
 >(
   tool: Tool,
-  name: string
+  name: string,
 ): FrontendTool<TArgs, TResult> => {
   type ToolExecutionContext = Parameters<
-    NonNullable<Tool<Record<string, unknown>, void>['execute']>
-  >[1]
+    NonNullable<Tool<Record<string, unknown>, void>["execute"]>
+  >[1];
   return makeAssistantTool({
     ...tool,
     execute: async (args: TArgs, context: ToolExecutionContext) => {
       // Check if this tool requires approval at runtime
       if (approvalConfig?.requiresApproval(name)) {
-        const { helpers } = approvalConfig
-        const toolCallId = context.toolCallId ?? ''
+        const { helpers } = approvalConfig;
+        const toolCallId = context.toolCallId ?? "";
 
         // Check if already approved (user chose "Approve always" previously)
         if (!helpers.isToolApproved(name)) {
-          const approved = await helpers.requestApproval(name, toolCallId, args)
+          const approved = await helpers.requestApproval(
+            name,
+            toolCallId,
+            args,
+          );
 
           if (!approved) {
             return {
               content: [
                 {
-                  type: 'text',
+                  type: "text",
                   text: `Tool "${name}" execution was denied by the user. Please acknowledge this and continue without using this tool's result.`,
                 },
               ],
               isError: true,
-            } as TResult
+            } as TResult;
           }
         }
       }
 
-      return tool.execute?.(args, context)
+      return tool.execute?.(args, context);
     },
     toolName: name,
-  } as AssistantToolProps<TArgs, TResult>)
-}
+  } as AssistantToolProps<TArgs, TResult>);
+};
 
 /**
  * Helpers for requesting and tracking tool approval state.
@@ -146,10 +150,10 @@ export interface ApprovalHelpers {
   requestApproval: (
     toolName: string,
     toolCallId: string,
-    args: unknown
-  ) => Promise<boolean>
-  isToolApproved: (toolName: string) => boolean
-  whitelistTool: (toolName: string) => void
+    args: unknown,
+  ) => Promise<boolean>;
+  isToolApproved: (toolName: string) => boolean;
+  whitelistTool: (toolName: string) => void;
 }
 
 /**
@@ -158,10 +162,10 @@ export interface ApprovalHelpers {
 export function wrapToolsWithApproval(
   tools: ToolSet,
   toolsRequiringApproval: ToolsFilter | undefined,
-  approvalHelpers: ApprovalHelpers
+  approvalHelpers: ApprovalHelpers,
 ): ToolSet {
   if (!toolsRequiringApproval) {
-    return tools
+    return tools;
   }
 
   // Handle empty array case
@@ -169,20 +173,20 @@ export function wrapToolsWithApproval(
     Array.isArray(toolsRequiringApproval) &&
     toolsRequiringApproval.length === 0
   ) {
-    return tools
+    return tools;
   }
 
-  const requiresApproval = createRequiresApprovalFn(toolsRequiringApproval)
+  const requiresApproval = createRequiresApprovalFn(toolsRequiringApproval);
 
   return Object.fromEntries(
     Object.entries(tools).map(([name, tool]) => {
       if (!requiresApproval(name)) {
-        return [name, tool]
+        return [name, tool];
       }
 
-      const originalExecute = tool.execute
+      const originalExecute = tool.execute;
       if (!originalExecute) {
-        return [name, tool]
+        return [name, tool];
       }
 
       return [
@@ -192,36 +196,36 @@ export function wrapToolsWithApproval(
           execute: async (args: unknown, options?: ToolCallOptions) => {
             const opts = (options ?? {}) as Parameters<
               typeof originalExecute
-            >[1]
+            >[1];
             // Extract toolCallId from options
             const toolCallId =
-              (opts as { toolCallId?: string }).toolCallId ?? ''
+              (opts as { toolCallId?: string }).toolCallId ?? "";
 
             // Check if already approved (user chose "Approve always" previously)
             if (approvalHelpers.isToolApproved(name)) {
               return originalExecute(
                 args,
-                opts as Parameters<typeof originalExecute>[1]
-              )
+                opts as Parameters<typeof originalExecute>[1],
+              );
             }
 
             // Request approval using the actual toolCallId from the stream
             const approved = await approvalHelpers.requestApproval(
               name,
               toolCallId,
-              args
-            )
+              args,
+            );
 
             if (!approved) {
               return {
                 content: [
                   {
-                    type: 'text',
+                    type: "text",
                     text: `Tool "${name}" execution was denied by the user. Please acknowledge this and continue without using this tool's result.`,
                   },
                 ],
                 isError: true,
-              }
+              };
             }
 
             // Note: Tool is marked as approved via the UI when user clicks "Approve always"
@@ -229,11 +233,11 @@ export function wrapToolsWithApproval(
 
             return originalExecute(
               args,
-              opts as Parameters<typeof originalExecute>[1]
-            )
+              opts as Parameters<typeof originalExecute>[1],
+            );
           },
         },
-      ]
-    })
-  ) as ToolSet
+      ];
+    }),
+  ) as ToolSet;
 }

package/src/lib/utils.ts

@@ -1,16 +1,16 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export function assertNever(value: unknown): never {
-  throw new Error(`Unexpected value: ${value}`)
+  throw new Error(`Unexpected value: ${value}`);
 }
 
 export function assert(condition: unknown, message: string): asserts condition {
   if (!condition) {
-    throw new Error(message)
+    throw new Error(message);
   }
 }

package/src/lib.d.ts

@@ -1 +1 @@
-type FIXME<T, S extends string> = (T & S) | T
+type FIXME<T, S extends string> = (T & S) | T;

package/src/plugins/README.md

@@ -19,19 +19,19 @@ A plugin is defined by the following TypeScript interface:
 ```typescript
 interface Plugin {
   // The language identifier for the code fence (e.g., "vega", "mermaid", "d3")
-  language: string
+  language: string;
 
   // Instructions for the LLM on how to use this plugin
-  prompt: string
+  prompt: string;
 
   // Your custom React component that renders the code block
-  SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>
+  SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
 
   // Optional: Custom header component for the code block
-  CodeHeader?: ComponentType<CodeHeaderProps> | null
+  CodeHeader?: ComponentType<CodeHeaderProps> | null;
 
   // Optional: Whether to override existing plugins with the same language
-  overrideExisting?: boolean
+  overrideExisting?: boolean;
 }
 ```
 

package/src/plugins/chart/catalog.ts

@@ -1,5 +1,5 @@
-import { createCatalog } from '@json-render/core'
-import { z } from 'zod'
+import { createCatalog } from "@json-render/core";
+import { z } from "zod";
 
 /**
  * Data point schema - common structure for all chart types
@@ -8,7 +8,7 @@ const dataPointSchema = z.object({
   label: z.string(),
   value: z.number(),
   color: z.string().optional(),
-})
+});
 
 /**
  * Multi-series data point for line/area charts
@@ -17,7 +17,7 @@ const seriesDataPointSchema = z
   .object({
     label: z.string(),
   })
-  .catchall(z.number())
+  .catchall(z.number());
 
 /**
  * Chart Catalog
@@ -26,19 +26,19 @@ const seriesDataPointSchema = z
  * Uses Recharts under the hood for rendering.
  */
 export const chartCatalog = createCatalog({
-  name: 'chart',
+  name: "chart",
   components: {
     BarChart: {
       props: z.object({
         title: z.string().optional(),
         data: z.array(dataPointSchema),
-        layout: z.enum(['vertical', 'horizontal']).optional(),
+        layout: z.enum(["vertical", "horizontal"]).optional(),
         showGrid: z.boolean().optional(),
         showLegend: z.boolean().optional(),
         className: z.string().optional(),
       }),
       description:
-        'Bar chart for comparing categorical data. Use vertical for few categories, horizontal for many or long labels.',
+        "Bar chart for comparing categorical data. Use vertical for few categories, horizontal for many or long labels.",
     },
 
     LineChart: {
@@ -53,7 +53,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Line chart for showing trends over time or continuous data. Supports multiple series.',
+        "Line chart for showing trends over time or continuous data. Supports multiple series.",
     },
 
     AreaChart: {
@@ -67,7 +67,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Area chart for showing volume/magnitude over time. Use stacked for part-to-whole relationships.',
+        "Area chart for showing volume/magnitude over time. Use stacked for part-to-whole relationships.",
     },
 
     PieChart: {
@@ -79,7 +79,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Pie chart for showing proportions of a whole. Best for 2-6 categories.',
+        "Pie chart for showing proportions of a whole. Best for 2-6 categories.",
     },
 
     DonutChart: {
@@ -93,7 +93,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Donut chart (pie with center hole). Good for showing a key metric in the center.',
+        "Donut chart (pie with center hole). Good for showing a key metric in the center.",
     },
 
     ScatterChart: {
@@ -106,7 +106,7 @@ export const chartCatalog = createCatalog({
             label: z.string().optional(),
             size: z.number().optional(),
             color: z.string().optional(),
-          })
+          }),
         ),
         xLabel: z.string().optional(),
         yLabel: z.string().optional(),
@@ -114,7 +114,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Scatter plot for showing correlation between two variables.',
+        "Scatter plot for showing correlation between two variables.",
     },
 
     RadarChart: {
@@ -125,17 +125,17 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Radar/spider chart for comparing multiple attributes. Best for 3-8 dimensions.',
+        "Radar/spider chart for comparing multiple attributes. Best for 3-8 dimensions.",
     },
   },
-})
+});
 
 export type ChartCatalogComponentProps = typeof chartCatalog extends {
-  components: infer C
+  components: infer C;
 }
   ? {
       [K in keyof C]: C[K] extends { props: infer P }
         ? z.infer<P extends z.ZodType ? P : never>
-        : never
+        : never;
     }
-  : never
+  : never;

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

@@ -1,66 +1,66 @@
-import { describe, it, expect } from 'vitest'
-import { parse, View, Warn } from 'vega'
-import { expressionInterpreter } from 'vega-interpreter'
+import { describe, it, expect } from "vitest";
+import { parse, View, Warn } from "vega";
+import { expressionInterpreter } from "vega-interpreter";
 
-describe('ChartRenderer CSP compliance', () => {
-  it('renders a chart using vega-interpreter without eval', async () => {
+describe("ChartRenderer CSP compliance", () => {
+  it("renders a chart using vega-interpreter without eval", async () => {
     const spec = {
-      $schema: 'https://vega.github.io/schema/vega/v5.json',
+      $schema: "https://vega.github.io/schema/vega/v5.json",
       width: 400,
       height: 200,
       data: [
         {
-          name: 'table',
+          name: "table",
           values: [
-            { category: 'A', amount: 28 },
-            { category: 'B', amount: 55 },
+            { category: "A", amount: 28 },
+            { category: "B", amount: 55 },
           ],
         },
       ],
       marks: [
         {
-          type: 'rect',
-          from: { data: 'table' },
+          type: "rect",
+          from: { data: "table" },
           encode: {
             enter: {
-              x: { scale: 'xscale', field: 'category' },
-              width: { scale: 'xscale', band: 1 },
-              y: { scale: 'yscale', field: 'amount' },
-              y2: { scale: 'yscale', value: 0 },
+              x: { scale: "xscale", field: "category" },
+              width: { scale: "xscale", band: 1 },
+              y: { scale: "yscale", field: "amount" },
+              y2: { scale: "yscale", value: 0 },
             },
           },
         },
       ],
       scales: [
         {
-          name: 'xscale',
-          type: 'band',
-          domain: { data: 'table', field: 'category' },
-          range: 'width',
+          name: "xscale",
+          type: "band",
+          domain: { data: "table", field: "category" },
+          range: "width",
         },
         {
-          name: 'yscale',
-          domain: { data: 'table', field: 'amount' },
-          range: 'height',
+          name: "yscale",
+          domain: { data: "table", field: "amount" },
+          range: "height",
         },
       ],
-    }
+    };
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const runtime = parse(spec as any, undefined, { ast: true })
+    const runtime = parse(spec as any, undefined, { ast: true });
 
     // This is the key - using expr: vegaInterpreter means no eval() is called
     const view = new View(runtime, {
-      renderer: 'none',
+      renderer: "none",
       logLevel: Warn,
       expr: expressionInterpreter,
-    })
+    });
 
-    await view.runAsync()
+    await view.runAsync();
 
     // If we get here without error, CSP compliance works
-    expect(view.data('table')).toHaveLength(2)
+    expect(view.data("table")).toHaveLength(2);
 
-    view.finalize()
-  })
-})
+    view.finalize();
+  });
+});