@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/features/activity-doc/ActivityDoc.tsx

@@ -1,11 +1,13 @@
-import { ActivityDefinition, ActivityPropertyDefinition, ActivityTypeDefinition } from "@vertesia/common";
-import clsx from "clsx";
-import { AnimatePresence, motion } from "motion/react";
-import React, { useMemo, useState } from "react";
+import type { ActivityDefinition, ActivityPropertyDefinition, ActivityTypeDefinition } from '@vertesia/common';
+import { Button } from '@vertesia/ui/core';
+import clsx from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
+import type React from 'react';
+import { useMemo, useState } from 'react';
 
-function Badge({ children, secondary = false }: { children: React.ReactNode, secondary?: boolean }) {
-    const className = secondary ? "bg-secondary text-primary" : "text-foreground bg-muted";
-    return <span className={className}>{children}</span>
+function Badge({ children, secondary = false }: { children: React.ReactNode; secondary?: boolean }) {
+    const className = secondary ? 'bg-secondary text-primary' : 'text-foreground bg-muted';
+    return <span className={className}>{children}</span>;
 }
 
 /**
@@ -15,7 +17,7 @@ function Badge({ children, secondary = false }: { children: React.ReactNode, sec
 function resolveInnerType(innerType: ActivityTypeDefinition | undefined) {
     if (!innerType) {
         return undefined;
-    } else if (innerType.name === "array") {
+    } else if (innerType.name === 'array') {
         return resolveInnerType(innerType.innerType);
     } else {
         return innerType;
@@ -32,17 +34,19 @@ function PropertySignature({ property }: PropertySignatureProps) {
             {property.optional && <Badge>optional</Badge>}
             <Badge>{property.type.value}</Badge>
         </div>
-    )
+    );
 }
 interface ActivitiesDocProps {
     activities: ActivityDefinition[];
 }
 export function ActivitiesDoc({ activities }: ActivitiesDocProps) {
     return (
-        <div className='flex flex-col gap-y-4 divide-y divide-gray-200'>
-            {activities.map(activity => <ActivityDoc key={activity.name} activity={activity} />)}
+        <div className="flex flex-col gap-y-4 divide-y divide-gray-200">
+            {activities.map((activity) => (
+                <ActivityDoc key={activity.name} activity={activity} />
+            ))}
         </div>
-    )
+    );
 }
 
 interface ActivitySectionTitleProps {
@@ -52,10 +56,14 @@ interface ActivitySectionTitleProps {
 function ActivitySectionTitle({ code, children }: ActivitySectionTitleProps) {
     return (
         <div className="flex gap-2 items-center border-b border-b-gray-200 mb-2">
-            <div className='text-lg font-medium text-gray-900 py-2 '>{children}</div>
-            {code && <div><Badge>{code}</Badge></div>}
+            <div className="text-lg font-medium text-gray-900 py-2 ">{children}</div>
+            {code && (
+                <div>
+                    <Badge>{code}</Badge>
+                </div>
+            )}
         </div>
-    )
+    );
 }
 interface ActivityDocProps {
     activity: ActivityDefinition;
@@ -66,86 +74,85 @@ export function ActivityDoc({ activity, headingClass, headingRef }: ActivityDocP
     return (
         <div className={headingClass} id={activity.name} ref={headingRef}>
             <div className="text-xl font-semibold pt-8">{activity.title}</div>
-            <div className="pb-4"><Badge>{activity.name}</Badge></div>
-            {
-                activity.doc &&
-                <div className="text-gray-700 pb-2">{activity.doc}</div>
-            }
+            <div className="pb-4">
+                <Badge>{activity.name}</Badge>
+            </div>
+            {activity.doc && <div className="text-gray-700 pb-2">{activity.doc}</div>}
 
             <div className="pb-4">
                 <ActivitySectionTitle code={activity.paramsType}>Parameters</ActivitySectionTitle>
                 <div className="divide-y divide-gray-100">
-                    {activity.params.map(prop =>
+                    {activity.params.map((prop) => (
                         <PropertyDetails key={prop.name} property={prop} />
-                    )}
+                    ))}
                 </div>
             </div>
             <div className="pb-4">
                 <ActivitySectionTitle>Returns</ActivitySectionTitle>
-                <div>{activity.returnType ? activity.returnType.value : "void"}</div>
+                <div>{activity.returnType ? activity.returnType.value : 'void'}</div>
             </div>
-
         </div>
-    )
+    );
 }
 
-function PropertyDetails({ property, className }: { className?: string, property: ActivityPropertyDefinition }) {
+function PropertyDetails({ property, className }: { className?: string; property: ActivityPropertyDefinition }) {
     const expandable = useMemo(() => {
         const type = resolveInnerType(property.type.innerType) ?? property.type;
-        if (type.name === "object" && type.members) {
-            return <ObjectMembersPanel members={type.members} />
+        if (type.name === 'object' && type.members) {
+            return <ObjectMembersPanel members={type.members} />;
         } else if (type.name === 'enum' && type.enum) {
-            return <EnumValuesPanel values={type.enum} />
+            return <EnumValuesPanel values={type.enum} />;
         } else {
             return null;
         }
-    }, [property.type.innerType]);
+    }, [property.type]);
     return (
-        <div className={clsx("py-2", className)}>
+        <div className={clsx('py-2', className)}>
             <PropertySignature property={property} />
-            {property.doc && <div className="text-gray-700 text-sm pt-2">
-                {property.doc}
-            </div>}
-            {expandable && <div className="my-2 overflow-hidden">
-                {expandable}
-            </div>
-            }
+            {property.doc && <div className="text-gray-700 text-sm pt-2">{property.doc}</div>}
+            {expandable && <div className="my-2 overflow-hidden">{expandable}</div>}
         </div>
-    )
+    );
 }
 
 interface EnumValuesPanelProps {
     values: string[] | number[];
 }
 function EnumValuesPanel({ values }: EnumValuesPanelProps) {
-    return <div className="flex flex-wrap items-center gap-2">{
-        values.map((v, i) => <Badge secondary key={i}>{v}</Badge>)
-    }</div>
+    return (
+        <div className="flex flex-wrap items-center gap-2">
+            {values.map((v) => (
+                <Badge secondary key={v}>
+                    {v}
+                </Badge>
+            ))}
+        </div>
+    );
 }
 
 function ObjectMembersPanel({ members }: { members: ActivityPropertyDefinition[] }) {
-    return <ExpandablePanel
-        className='rounded-md border border-gray-200'
-        button={(isOn) => (
-            <div className="px-4 py-2 flex items-center gap-x-2 text-sm font-medium hover:text-blue-600">
-                <ExpandIcon isOpen={isOn} />
-                {
-                    isOn ?
-                        <div>Hide child properties</div>
-                        :
-                        <div>Show child properties</div>
-                }
-            </div>
-        )}
-        body={<NestedPropertiesDetails properties={members} />} />
+    return (
+        <ExpandablePanel
+            className="rounded-md border border-gray-200"
+            button={(isOn) => (
+                <div className="px-4 py-2 flex items-center gap-x-2 text-sm font-medium hover:text-blue-600">
+                    <ExpandIcon isOpen={isOn} />
+                    {isOn ? <div>Hide child properties</div> : <div>Show child properties</div>}
+                </div>
+            )}
+            body={<NestedPropertiesDetails properties={members} />}
+        />
+    );
 }
 
 function NestedPropertiesDetails({ properties }: { properties: ActivityPropertyDefinition[] }) {
     return (
-        <div className='border-l-2 border-l-blue-200 flex flex-col divide-y divide-gray-100 border-t border-t-gray-200'>
-            {properties.map(prop => <PropertyDetails key={prop.name} property={prop} className="px-4 py-2" />)}
+        <div className="border-s-2 border-s-blue-200 flex flex-col divide-y divide-gray-100 border-t border-t-gray-200">
+            {properties.map((prop) => (
+                <PropertyDetails key={prop.name} property={prop} className="px-4 py-2" />
+            ))}
         </div>
-    )
+    );
 }
 
 interface ExpandablePanelProps {
@@ -157,15 +164,14 @@ interface ExpandablePanelProps {
 function ExpandablePanel({ button, body, className, isInitiallyOpen }: ExpandablePanelProps) {
     const [isExpanded, setExpanded] = useState(isInitiallyOpen || false);
     return (
-        <div className={clsx(isExpanded ? "block" : "inline-block", className)}>
-            <button className='p-0 m-0 bg-transparent' onClick={() => setExpanded(!isExpanded)}>
-                <AnimatePresence>
-                    {button(isExpanded)}
-                </AnimatePresence>
-            </button>
+        <div className={clsx(isExpanded ? 'block' : 'inline-block', className)}>
+            <Button variant="unstyled" className="p-0 m-0 bg-transparent" onClick={() => setExpanded(!isExpanded)}>
+                <AnimatePresence>{button(isExpanded)}</AnimatePresence>
+            </Button>
             <AnimatePresence>
-                {
-                    isExpanded && <motion.div className='overflow-hidden'
+                {isExpanded && (
+                    <motion.div
+                        className="overflow-hidden"
                         initial={{ height: 0, opacity: 0 }}
                         animate={{ height: 'auto', opacity: 1 }}
                         exit={{ height: 0, opacity: 0 }}
@@ -173,10 +179,10 @@ function ExpandablePanel({ button, body, className, isInitiallyOpen }: Expandabl
                     >
                         {body}
                     </motion.div>
-                }
+                )}
             </AnimatePresence>
         </div>
-    )
+    );
 }
 
 interface ExpandIconProps {
@@ -195,5 +201,5 @@ function ExpandIcon({ isOpen }: ExpandIconProps) {
                 +
             </motion.div>
         </AnimatePresence>
-    )
-}
+    );
+}

package/src/features/activity-doc/index.ts

@@ -1 +1 @@
-export * from "./ActivityDoc";
+export * from './ActivityDoc';

package/src/features/agent/PayloadBuilder.tsx

@@ -1,12 +1,23 @@
-import { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
-import { AgentSearchScope, ConversationVisibility, ExecutionEnvironmentRef, InCodeInteraction, JSONSchema, mergeInCodePromptSchemas, supportsToolUse, UserChannel, WorkflowInteractionVars } from "@vertesia/common";
-import { JSONObject } from "@vertesia/json";
-import { useUserSession } from "@vertesia/ui/session";
-import Ajv, { ValidateFunction } from "ajv";
-import React, { createContext, useContext, useState, useSyncExternalStore } from "react";
+import type { AsyncExecutionResult, VertesiaClient } from '@vertesia/client';
+import {
+    AgentSearchScope,
+    type ConversationVisibility,
+    type ExecutionEnvironmentRef,
+    type InCodeInteraction,
+    type JSONSchema,
+    mergeInCodePromptSchemas,
+    supportsToolUse,
+    type UserChannel,
+    type WorkflowInteractionVars,
+} from '@vertesia/common';
+import type { JSONObject } from '@vertesia/json';
+import { useUserSession } from '@vertesia/ui/session';
+import Ajv, { type ValidateFunction } from 'ajv';
+import type React from 'react';
+import { createContext, useContext, useState, useSyncExternalStore } from 'react';
 
 export type WorkflowMode = 'start' | 'schedule';
-type ModelOptions = NonNullable<WorkflowInteractionVars["config"]["model_options"]>;
+type ModelOptions = NonNullable<WorkflowInteractionVars['config']['model_options']>;
 
 export interface ScheduledWorkflowConfig {
     name: string;
@@ -25,13 +36,17 @@ export class PayloadBuilderStore {
 
     subscribe = (listener: () => void) => {
         this._listeners.add(listener);
-        return () => { this._listeners.delete(listener); };
+        return () => {
+            this._listeners.delete(listener);
+        };
     };
 
     getSnapshot = () => this.snapshot;
 
     notify() {
-        this._listeners.forEach(listener => listener());
+        this._listeners.forEach((listener) => {
+            listener();
+        });
     }
 }
 
@@ -48,7 +63,7 @@ export class PayloadBuilder {
     _interaction: InCodeInteraction | undefined;
     _environment: ExecutionEnvironmentRef | undefined;
     _model: string = '';
-    _model_options: ModelOptions | undefined;
+    _model_options: InCodeInteraction['model_options'] | undefined;
     _tool_names: string[] = [];
     _data: JSONObject | undefined;
     _mode: WorkflowMode = 'start';
@@ -63,7 +78,10 @@ export class PayloadBuilder {
 
     private _store: PayloadBuilderStore;
 
-    constructor(public vertesia: VertesiaClient, store: PayloadBuilderStore) {
+    constructor(
+        public vertesia: VertesiaClient,
+        store: PayloadBuilderStore,
+    ) {
         this._store = store;
     }
 
@@ -81,7 +99,7 @@ export class PayloadBuilder {
         builder._data = this._data;
         builder._environment = this._environment;
         builder._model = this._model;
-        builder._model_options = this._model_options ? { ...this._model_options } as ModelOptions : undefined;
+        builder._model_options = this._model_options ? ({ ...this._model_options } as ModelOptions) : undefined;
         builder._tool_names = [...this._tool_names];
         builder._interactive = this._interactive;
         builder._debug_mode = this._debug_mode;
@@ -106,7 +124,7 @@ export class PayloadBuilder {
                     name: '',
                     description: '',
                     cron_expression: '0 9 * * *',
-                    timezone: 'UTC'
+                    timezone: 'UTC',
                 } as ScheduledWorkflowConfig;
             }
             this.onStateChanged();
@@ -129,7 +147,7 @@ export class PayloadBuilder {
     updateScheduledWorkflowConfig(patch: Partial<ScheduledWorkflowConfig>) {
         this._scheduledWorkflowConfig = {
             ...this._scheduledWorkflowConfig,
-            ...patch
+            ...patch,
         } as ScheduledWorkflowConfig;
         this.onStateChanged();
     }
@@ -214,7 +232,6 @@ export class PayloadBuilder {
     }
 
     async restoreConversation(context: WorkflowInteractionVars) {
-        
         // Handle version-specific interaction resolution
         let interactionRef = context.interaction;
         if (context.version) {
@@ -224,16 +241,13 @@ export class PayloadBuilder {
                 interactionRef = `${interactionRef}@${context.version}`;
             }
         }
-        
+
         const inter = await this.vertesia.interactions.catalog.resolve(interactionRef);
         const envId = inter.runtime?.environment || context.config?.environment;
         const model = context.config?.model;
-        const env = await (envId ?
-            this.vertesia.environments.retrieve(envId).catch(() => undefined)
-            :
-            Promise.resolve(undefined)
-        );
-
+        const env = await (envId
+            ? this.vertesia.environments.retrieve(envId).catch(() => undefined)
+            : Promise.resolve(undefined));
 
         // Set data BEFORE the interaction setter so that initializeBooleanDefaults (called
         // inside the interactionParamsSchema setter) uses the real run values as its base
@@ -256,6 +270,7 @@ export class PayloadBuilder {
         this._user_channels = context.user_channels;
         this._model_options = context.config?.model_options as ModelOptions | undefined;
         this.collection = context.collection_id ?? undefined;
+        this._model_options = context.config?.model_options as InCodeInteraction['model_options'] | undefined;
 
         // we need to trigger the setter to deal with default models
         this.environment = env;
@@ -280,7 +295,7 @@ export class PayloadBuilder {
                 this._model_options = interaction.model_options as ModelOptions | undefined;
                 if (interaction.runtime?.environment) {
                     const envId = interaction.runtime.environment;
-                    this.vertesia.environments.retrieve(envId).then((environment) => this.environment = environment);
+                    this.vertesia.environments.retrieve(envId).then((environment) => (this.environment = environment));
                 }
             }
             this.onStateChanged();
@@ -299,8 +314,10 @@ export class PayloadBuilder {
                 if (interactionModel && environment && supportsToolUse(interactionModel, environment.provider)) {
                     this._model = interactionModel;
                 } else {
-                    this._model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
-                        ? environment.default_model : '';
+                    this._model =
+                        environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
+                            ? environment.default_model
+                            : '';
                 }
             }
 
@@ -318,13 +335,15 @@ export class PayloadBuilder {
         }
     }
 
-    get model_options() {
+    get model_options(): InCodeInteraction['model_options'] | undefined {
         return this._model_options;
     }
 
-    set model_options(modelOptions: ModelOptions | undefined) {
-        this._model_options = modelOptions;
-        this.onStateChanged();
+    set model_options(modelOptions: InCodeInteraction['model_options'] | undefined) {
+        if (JSON.stringify(modelOptions) !== JSON.stringify(this._model_options)) {
+            this._model_options = modelOptions;
+            this.onStateChanged();
+        }
     }
 
     get tool_names() {
@@ -344,7 +363,7 @@ export class PayloadBuilder {
     }
 
     set run(run: AsyncExecutionResult | { workflow_id: string; run_id: string }) {
-        console.log("run", run);
+        console.log('run', run);
         this.onStateChanged();
     }
 
@@ -360,20 +379,48 @@ export class PayloadBuilder {
     }
 
     // Method-style setters for use in React components (avoids react-hooks/immutability lint errors)
-    setMode(mode: 'start' | 'schedule') { this.mode = mode; }
-    setInteraction(interaction: InCodeInteraction | undefined) { this.interaction = interaction; }
-    setEnvironment(environment: ExecutionEnvironmentRef | undefined) { this.environment = environment; }
-    setModel(model: string | undefined) { this.model = model; }
-    setModelOptions(modelOptions: ModelOptions | undefined) { this.model_options = modelOptions; }
-    setToolNames(tools: string[]) { this.tool_names = tools; }
-    setCollection(collection: string | undefined) { this.collection = collection; }
-    setInteractive(interactive: boolean) { this.interactive = interactive; }
-    setDebugMode(debug_mode: boolean) { this.debug_mode = debug_mode; }
-    setUserChannels(channels: UserChannel[] | undefined) { this.user_channels = channels; }
-    setCheckpointTokens(value: number | undefined) { this.checkpoint_tokens = value; }
-    setVisibility(value: ConversationVisibility | undefined) { this.visibility = value; }
-    setData(data: JSONObject) { this.data = data; }
-    setPreserveRunValues(value: boolean) { this.preserveRunValues = value; }
+    setMode(mode: 'start' | 'schedule') {
+        this.mode = mode;
+    }
+    setInteraction(interaction: InCodeInteraction | undefined) {
+        this.interaction = interaction;
+    }
+    setEnvironment(environment: ExecutionEnvironmentRef | undefined) {
+        this.environment = environment;
+    }
+    setModel(model: string | undefined) {
+        this.model = model;
+    }
+    setModelOptions(modelOptions: InCodeInteraction['model_options'] | undefined) {
+        this.model_options = modelOptions;
+    }
+    setToolNames(tools: string[]) {
+        this.tool_names = tools;
+    }
+    setCollection(collection: string | undefined) {
+        this.collection = collection;
+    }
+    setInteractive(interactive: boolean) {
+        this.interactive = interactive;
+    }
+    setDebugMode(debug_mode: boolean) {
+        this.debug_mode = debug_mode;
+    }
+    setUserChannels(channels: UserChannel[] | undefined) {
+        this.user_channels = channels;
+    }
+    setCheckpointTokens(value: number | undefined) {
+        this.checkpoint_tokens = value;
+    }
+    setVisibility(value: ConversationVisibility | undefined) {
+        this.visibility = value;
+    }
+    setData(data: JSONObject) {
+        this.data = data;
+    }
+    setPreserveRunValues(value: boolean) {
+        this.preserveRunValues = value;
+    }
 
     get start(): boolean {
         return this._start;
@@ -417,14 +464,11 @@ export class PayloadBuilder {
         for (const [name, propSchema] of Object.entries(schema.properties)) {
             const prop = propSchema;
             // Initialize boolean fields to false if not already set
-            if (prop.type === "boolean" && result[name] === undefined) {
+            if (prop.type === 'boolean' && result[name] === undefined) {
                 result[name] = false;
-            } else if (prop.type === "object" && prop.properties) {
+            } else if (prop.type === 'object' && prop.properties) {
                 // Recursively initialize nested object booleans
-                result[name] = this.initializeBooleanDefaults(
-                    (result[name] as JSONObject) || {},
-                    prop
-                );
+                result[name] = this.initializeBooleanDefaults((result[name] as JSONObject) || {}, prop);
             }
         }
 
@@ -456,7 +500,8 @@ export class PayloadBuilder {
 
         if (location.hash) {
             const urlWithoutHash = window.location.origin + window.location.pathname + window.location.search;
-            history.replaceState(null, '', urlWithoutHash); location.hash = '';
+            history.replaceState(null, '', urlWithoutHash);
+            location.hash = '';
         }
     }
 
@@ -470,7 +515,7 @@ export class PayloadBuilder {
             const ajv = new Ajv({ strict: false });
             this._inputValidator = {
                 validate: ajv.compile(this._interactionParamsSchema),
-                schema: this._interactionParamsSchema
+                schema: this._interactionParamsSchema,
             };
         }
 
@@ -497,9 +542,7 @@ export function PayloadBuilderProvider({ children }: PayloadProviderProps) {
     const { client } = useUserSession();
     const [store] = useState(() => new PayloadBuilderStore(client));
     const builder = useSyncExternalStore(store.subscribe, store.getSnapshot);
-    return (
-        <PayloadContext.Provider value={builder}>{children}</PayloadContext.Provider >
-    )
+    return <PayloadContext.Provider value={builder}>{children}</PayloadContext.Provider>;
 }
 
 export function usePayloadBuilder() {

package/src/features/agent/chat/AgentChart.tsx

@@ -4,67 +4,75 @@ import { VegaLiteChart } from './VegaLiteChart';
 // Legacy Recharts chart specification.
 // Recharts rendering has been retired; this type is kept for backward-compatibility.
 export type RechartsChartSpec = {
-  version?: '1.0';
-  library?: 'recharts';
-  [key: string]: unknown;
+    version?: '1.0';
+    library?: 'recharts';
+    [key: string]: unknown;
 };
 
 // Vega-Lite chart specification for supported visualizations.
 export type VegaLiteChartSpec = {
-  version?: '1.0';
-  library: 'vega-lite';
-  title?: string;
-  description?: string;
-  spec: Record<string, unknown>;
-  options?: {
-    collapsible?: boolean;
-    collapseInitially?: boolean;
-    theme?: 'default' | 'dark';
-    renderer?: 'canvas' | 'svg';
-    mode?: 'chart' | 'dashboard';
-    height?: number;
-    enableFullscreen?: boolean;
-    enableTooltips?: boolean;
-    enableSignalListeners?: boolean;
-    parameterValues?: Record<string, unknown>;
-  };
+    version?: '1.0';
+    library: 'vega-lite';
+    title?: string;
+    description?: string;
+    spec: Record<string, unknown>;
+    options?: {
+        collapsible?: boolean;
+        collapseInitially?: boolean;
+        theme?: 'default' | 'dark';
+        renderer?: 'canvas' | 'svg';
+        mode?: 'chart' | 'dashboard';
+        height?: number;
+        enableFullscreen?: boolean;
+        enableTooltips?: boolean;
+        enableSignalListeners?: boolean;
+        parameterValues?: Record<string, unknown>;
+    };
 };
 
 export type AgentChartSpec = RechartsChartSpec | VegaLiteChartSpec;
 
 export function isVegaLiteSpec(spec: AgentChartSpec): spec is VegaLiteChartSpec {
-  return spec.library === 'vega-lite' && typeof (spec as VegaLiteChartSpec).spec === 'object';
+    return spec.library === 'vega-lite' && typeof (spec as VegaLiteChartSpec).spec === 'object';
 }
 
 export function isRechartsSpec(spec: AgentChartSpec): spec is RechartsChartSpec {
-  return spec.library === 'recharts' || spec.library === undefined;
+    return spec.library === 'recharts' || spec.library === undefined;
 }
 
 type AgentChartProps = {
-  spec: AgentChartSpec;
-  artifactRunId?: string;
+    spec: AgentChartSpec;
+    artifactRunId?: string;
 };
 
 function isNativeVegaLiteSpec(spec: AgentChartSpec): spec is Record<string, unknown> {
-  return typeof (spec as Record<string, unknown>).$schema === 'string' &&
-    ((spec as Record<string, unknown>).$schema as string).includes('vega');
+    return (
+        typeof (spec as Record<string, unknown>).$schema === 'string' &&
+        ((spec as Record<string, unknown>).$schema as string).includes('vega')
+    );
 }
 
-export const AgentChart = memo(function AgentChart({ spec, artifactRunId }: AgentChartProps) {
-  if (isVegaLiteSpec(spec)) {
-    return <VegaLiteChart spec={spec} artifactRunId={artifactRunId} />;
-  }
+export const AgentChart = memo(
+    function AgentChart({ spec, artifactRunId }: AgentChartProps) {
+        if (isVegaLiteSpec(spec)) {
+            return <VegaLiteChart spec={spec} artifactRunId={artifactRunId} />;
+        }
 
-  if (isNativeVegaLiteSpec(spec)) {
-    return <VegaLiteChart spec={{ library: 'vega-lite', spec }} artifactRunId={artifactRunId} />;
-  }
+        if (isNativeVegaLiteSpec(spec)) {
+            return <VegaLiteChart spec={{ library: 'vega-lite', spec }} artifactRunId={artifactRunId} />;
+        }
 
-  return (
-    <div className="my-5 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
-      Recharts chart rendering has been retired. Use a Vega-Lite chart spec (<code>library: &quot;vega-lite&quot;</code> with <code>spec</code>).
-    </div>
-  );
-}, (prevProps, nextProps) => {
-  return JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec)
-    && prevProps.artifactRunId === nextProps.artifactRunId;
-});
+        return (
+            <div className="my-5 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
+                Recharts chart rendering has been retired. Use a Vega-Lite chart spec (
+                <code>library: &quot;vega-lite&quot;</code> with <code>spec</code>).
+            </div>
+        );
+    },
+    (prevProps, nextProps) => {
+        return (
+            JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec) &&
+            prevProps.artifactRunId === nextProps.artifactRunId
+        );
+    },
+);