@gram-ai/elements 1.22.3 → 1.22.4

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

@@ -0,0 +1,66 @@
+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 () => {
+    const spec = {
+      $schema: 'https://vega.github.io/schema/vega/v5.json',
+      width: 400,
+      height: 200,
+      data: [
+        {
+          name: 'table',
+          values: [
+            { category: 'A', amount: 28 },
+            { category: 'B', amount: 55 },
+          ],
+        },
+      ],
+      marks: [
+        {
+          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 },
+            },
+          },
+        },
+      ],
+      scales: [
+        {
+          name: 'xscale',
+          type: 'band',
+          domain: { data: 'table', field: 'category' },
+          range: 'width',
+        },
+        {
+          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 })
+
+    // This is the key - using expr: vegaInterpreter means no eval() is called
+    const view = new View(runtime, {
+      renderer: 'none',
+      logLevel: Warn,
+      expr: expressionInterpreter,
+    })
+
+    await view.runAsync()
+
+    // If we get here without error, CSP compliance works
+    expect(view.data('table')).toHaveLength(2)
+
+    view.finalize()
+  })
+})

package/src/plugins/chart/component.tsx

@@ -7,6 +7,7 @@ import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown'
 import { AlertCircleIcon } from 'lucide-react'
 import { FC, useEffect, useMemo, useRef, useState } from 'react'
 import { parse, View, Warn } from 'vega'
+import { expressionInterpreter } from 'vega-interpreter'
 
 export const ChartRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -56,12 +57,13 @@ export const ChartRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
           viewRef.current = null
         }
 
-        const chart = parse(parsedSpec)
+        const chart = parse(parsedSpec, undefined, { ast: true })
         const view = new View(chart, {
           container: containerRef.current ?? undefined,
           renderer: 'svg',
           hover: true,
           logLevel: Warn,
+          expr: expressionInterpreter,
         })
         viewRef.current = view
 

package/src/types/index.ts

@@ -336,6 +336,18 @@ export type BaseApiConfig = {
    * }
    */
   url?: string
+
+  /**
+   * Additional headers to send with the API request.
+   *
+   * @example
+   * const config: ElementsConfig = {
+   *   api: {
+   *     headers: { 'X-My-Header': 'my-value' },
+   *   },
+   * }
+   */
+  headers?: Record<string, string>
 }
 
 export type SessionAuthConfig = {