@vertesia/ui 0.24.0-dev.202601221707

package/src/features/agent/chat/WaitingMessages.ts

@@ -0,0 +1,66 @@
+export const ThinkingMessages = [
+    // Original messages
+    "Brewing some code magic...",
+    "Doing the robot dance...",
+    "Cooking up something good...",
+    "Working my gears...",
+
+    // Tech-inspired messages
+    "Parsing the possibilities...",
+    "Crunching the numbers...",
+    "Connecting the digital dots...",
+    "Processing at maximum capacity...",
+    "Searching through my circuits...",
+    "Running advanced algorithms...",
+    "Computing optimal solutions...",
+    "Loading brilliance.exe...",
+    "Scanning the knowledge base...",
+    "Optimizing response protocols...",
+
+    // Playful messages
+    "Having a quick brainstorm...",
+    "Thinking cap firmly on...",
+    "Pondering the digital universe...",
+    "Consulting my silicon wisdom...",
+    "Untangling the logic knots...",
+    "Assembling clever responses...",
+    "Mixing thoughtful ingredients...",
+    "Polishing the perfect answer...",
+    "Taking a momentary mind sprint...",
+    "Connecting virtual synapses...",
+
+    // Food-themed messages
+    "Baking fresh ideas...",
+    "Stirring the thought pot...",
+    "Simmering solutions slowly...",
+    "Whipping up a smart response...",
+    "Adding a dash of intelligence...",
+    "Preparing a gourmet answer...",
+
+    // Nature-themed messages
+    "Growing brilliant ideas...",
+    "Cultivating the perfect response...",
+    "Gathering digital nectar...",
+    "Planting seeds of solutions...",
+
+    // Journey-themed messages
+    "Exploring the data landscape...",
+    "Mapping the solution path...",
+    "Navigating through possibilities...",
+    "Charting the course to answers...",
+    "Embarking on a thought expedition...",
+
+    // Creative-themed messages
+    "Sketching out concepts...",
+    "Painting with digital brushstrokes...",
+    "Composing my response symphony...",
+    "Crafting precision answers...",
+    "Weaving threads of information...",
+
+    // Time-themed messages
+    "Just a moment of processing...",
+    "Taking a quick thinking break...",
+    "Almost there, final touches...",
+    "Putting the pieces together...",
+    "Making progress, hold tight...",
+];

package/src/features/agent/chat/applyParameterValues.test.ts

@@ -0,0 +1,258 @@
+import { describe, it, expect } from 'vitest';
+import { applyParameterValues } from './VegaLiteChart';
+
+describe('applyParameterValues', () => {
+    it('should return spec unchanged when no parameterValues provided', () => {
+        const spec = {
+            params: [{ name: 'threshold', value: 50 }],
+            mark: 'bar'
+        };
+
+        const result = applyParameterValues(spec, {});
+
+        expect(result).toEqual(spec);
+    });
+
+    it('should return spec unchanged when parameterValues is empty object', () => {
+        const spec = {
+            params: [{ name: 'threshold', value: 50 }],
+            mark: 'bar'
+        };
+
+        const result = applyParameterValues(spec, {});
+
+        expect(result.params[0].value).toBe(50);
+    });
+
+    it('should update root-level param value', () => {
+        const spec = {
+            params: [
+                { name: 'threshold', value: 50, bind: { input: 'range' } }
+            ],
+            mark: 'bar',
+            data: { values: [] }
+        };
+
+        const result = applyParameterValues(spec, { threshold: 75 });
+
+        expect(result.params[0].value).toBe(75);
+        expect(result.params[0].name).toBe('threshold');
+        expect(result.params[0].bind).toEqual({ input: 'range' });
+    });
+
+    it('should update multiple root-level params', () => {
+        const spec = {
+            params: [
+                { name: 'threshold', value: 50 },
+                { name: 'colorScheme', value: 'category10' },
+                { name: 'showLabels', value: true }
+            ],
+            mark: 'bar'
+        };
+
+        const result = applyParameterValues(spec, {
+            threshold: 100,
+            colorScheme: 'tableau10'
+        });
+
+        expect(result.params[0].value).toBe(100);
+        expect(result.params[1].value).toBe('tableau10');
+        expect(result.params[2].value).toBe(true); // unchanged
+    });
+
+    it('should not modify original spec (immutability)', () => {
+        const spec = {
+            params: [{ name: 'threshold', value: 50 }],
+            mark: 'bar'
+        };
+
+        applyParameterValues(spec, { threshold: 75 });
+
+        expect(spec.params[0].value).toBe(50); // original unchanged
+    });
+
+    it('should handle spec without params array', () => {
+        const spec = {
+            mark: 'bar',
+            data: { values: [] }
+        };
+
+        const result = applyParameterValues(spec, { threshold: 75 });
+
+        expect(result).toEqual(spec);
+    });
+
+    it('should update params in vconcat views', () => {
+        const spec = {
+            data: { values: [] },
+            vconcat: [
+                {
+                    params: [{ name: 'brushX', value: null }],
+                    mark: 'bar'
+                },
+                {
+                    params: [{ name: 'filterY', value: 'all' }],
+                    mark: 'line'
+                }
+            ]
+        };
+
+        const result = applyParameterValues(spec, {
+            brushX: [0, 100],
+            filterY: 'category_a'
+        });
+
+        expect(result.vconcat[0].params[0].value).toEqual([0, 100]);
+        expect(result.vconcat[1].params[0].value).toBe('category_a');
+    });
+
+    it('should update params in hconcat views', () => {
+        const spec = {
+            hconcat: [
+                {
+                    params: [{ name: 'leftParam', value: 1 }],
+                    mark: 'point'
+                },
+                {
+                    params: [{ name: 'rightParam', value: 2 }],
+                    mark: 'bar'
+                }
+            ]
+        };
+
+        const result = applyParameterValues(spec, {
+            leftParam: 10,
+            rightParam: 20
+        });
+
+        expect(result.hconcat[0].params[0].value).toBe(10);
+        expect(result.hconcat[1].params[0].value).toBe(20);
+    });
+
+    it('should update params in concat views', () => {
+        const spec = {
+            concat: [
+                { params: [{ name: 'p1', value: 'a' }], mark: 'bar' },
+                { params: [{ name: 'p2', value: 'b' }], mark: 'line' }
+            ],
+            columns: 2
+        };
+
+        const result = applyParameterValues(spec, { p1: 'x', p2: 'y' });
+
+        expect(result.concat[0].params[0].value).toBe('x');
+        expect(result.concat[1].params[0].value).toBe('y');
+    });
+
+    it('should update params in nested layer views', () => {
+        const spec = {
+            layer: [
+                {
+                    params: [{ name: 'layerParam', value: 'default' }],
+                    mark: 'point'
+                },
+                {
+                    mark: 'line'
+                }
+            ]
+        };
+
+        const result = applyParameterValues(spec, { layerParam: 'updated' });
+
+        expect(result.layer[0].params[0].value).toBe('updated');
+    });
+
+    it('should update params in deeply nested vconcat > layer', () => {
+        const spec = {
+            vconcat: [
+                {
+                    layer: [
+                        {
+                            params: [{ name: 'deepParam', value: 0 }],
+                            mark: 'point'
+                        }
+                    ]
+                }
+            ]
+        };
+
+        const result = applyParameterValues(spec, { deepParam: 999 });
+
+        expect(result.vconcat[0].layer[0].params[0].value).toBe(999);
+    });
+
+    it('should handle both root and nested params', () => {
+        const spec = {
+            params: [{ name: 'rootParam', value: 'root' }],
+            vconcat: [
+                {
+                    params: [{ name: 'nestedParam', value: 'nested' }],
+                    mark: 'bar'
+                }
+            ]
+        };
+
+        const result = applyParameterValues(spec, {
+            rootParam: 'updated_root',
+            nestedParam: 'updated_nested'
+        });
+
+        expect(result.params[0].value).toBe('updated_root');
+        expect(result.vconcat[0].params[0].value).toBe('updated_nested');
+    });
+
+    it('should apply only matching parameterValues (non-matching are ignored by applyParameterValues)', () => {
+        // Note: Validation of non-matching params should be done before calling applyParameterValues
+        // The applyParameterValues function just applies values, validation is separate
+        const spec = {
+            params: [{ name: 'existing', value: 10 }],
+            mark: 'bar'
+        };
+
+        const result = applyParameterValues(spec, {
+            nonexistent: 999,
+            existing: 20
+        });
+
+        expect(result.params[0].value).toBe(20);
+        expect(result.params.length).toBe(1);
+    });
+
+    it('should handle selection params (point/interval)', () => {
+        const spec = {
+            params: [
+                {
+                    name: 'brush',
+                    select: { type: 'interval', encodings: ['x'] },
+                    value: null
+                }
+            ],
+            mark: 'area'
+        };
+
+        const result = applyParameterValues(spec, {
+            brush: { x: [10, 50] }
+        });
+
+        expect(result.params[0].value).toEqual({ x: [10, 50] });
+    });
+
+    it('should handle recursive vconcat > vconcat', () => {
+        const spec = {
+            vconcat: [
+                {
+                    vconcat: [
+                        {
+                            params: [{ name: 'deeplyNested', value: 'original' }],
+                            mark: 'bar'
+                        }
+                    ]
+                }
+            ]
+        };
+
+        const result = applyParameterValues(spec, { deeplyNested: 'changed' });
+
+        expect(result.vconcat[0].vconcat[0].params[0].value).toBe('changed');
+    });
+});

package/src/features/agent/chat/index.ts

@@ -0,0 +1,35 @@
+export * from "./JumpingDots";
+export { ModernAgentConversation } from "./ModernAgentConversation";
+export * from "./WaitingMessages";
+export * from "./AnimatedThinkingDots";
+export {
+    AgentChart,
+    type AgentChartSpec,
+    type RechartsChartSpec,
+    type VegaLiteChartSpec,
+    isVegaLiteSpec,
+    isRechartsSpec,
+} from "./AgentChart";
+export { VegaLiteChart } from "./VegaLiteChart";
+// MessageInput types for external use
+export type { UploadedFile, SelectedDocument } from "./ModernAgentOutput/MessageInput";
+// AskUser widget for displaying agent prompts/questions
+export {
+    AskUserWidget,
+    ConfirmationWidget,
+    type AskUserWidgetProps,
+    type AskUserOption,
+    type ConfirmationWidgetProps,
+} from "./AskUserWidget";
+// MessageItem widget and types for external use
+export { default as MessageItem } from "./ModernAgentOutput/MessageItem";
+export type { MessageItemProps } from "./ModernAgentOutput/MessageItem";
+// MessagesContainer widget and types for external use
+export { default as MessagesContainer } from "./ModernAgentOutput/MessagesContainer";
+export type { MessagesContainerProps } from "./ModernAgentOutput/MessagesContainer";
+// Header widget and types for external use
+export { default as Header } from "./ModernAgentOutput/Header";
+export type { HeaderProps } from "./ModernAgentOutput/Header";
+// StreamingMessage widget and types for external use
+export { default as StreamingMessage } from "./ModernAgentOutput/StreamingMessage";
+export type { StreamingMessageProps } from "./ModernAgentOutput/StreamingMessage";

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

@@ -0,0 +1,92 @@
+import React, { createContext, useContext, useCallback, useRef } from "react";
+
+interface ArtifactUrlCacheContextValue {
+    getUrl: (key: string) => string | undefined;
+    setUrl: (key: string, url: string) => void;
+    getOrFetch: (
+        key: string,
+        fetcher: () => Promise<string>
+    ) => Promise<string>;
+}
+
+const ArtifactUrlCacheContext = createContext<ArtifactUrlCacheContextValue | null>(null);
+
+/**
+ * Provider component that maintains a cache of resolved artifact URLs.
+ * This prevents re-fetching the same artifact URL multiple times during re-renders.
+ */
+export function ArtifactUrlCacheProvider({ children }: { children: React.ReactNode }) {
+    const cacheRef = useRef<Map<string, string>>(new Map());
+    const pendingRef = useRef<Map<string, Promise<string>>>(new Map());
+
+    const getUrl = useCallback((key: string): string | undefined => {
+        return cacheRef.current.get(key);
+    }, []);
+
+    const setUrl = useCallback((key: string, url: string): void => {
+        cacheRef.current.set(key, url);
+    }, []);
+
+    const getOrFetch = useCallback(async (
+        key: string,
+        fetcher: () => Promise<string>
+    ): Promise<string> => {
+        // Return cached URL if available
+        const cached = cacheRef.current.get(key);
+        if (cached) {
+            return cached;
+        }
+
+        // Return pending promise if a fetch is already in progress
+        const pending = pendingRef.current.get(key);
+        if (pending) {
+            return pending;
+        }
+
+        // Start new fetch and cache the promise
+        const promise = fetcher().then((url) => {
+            cacheRef.current.set(key, url);
+            pendingRef.current.delete(key);
+            return url;
+        }).catch((err) => {
+            pendingRef.current.delete(key);
+            throw err;
+        });
+
+        pendingRef.current.set(key, promise);
+        return promise;
+    }, []);
+
+    const value = React.useMemo(
+        () => ({ getUrl, setUrl, getOrFetch }),
+        [getUrl, setUrl, getOrFetch]
+    );
+
+    return (
+        <ArtifactUrlCacheContext.Provider value={value}>
+            {children}
+        </ArtifactUrlCacheContext.Provider>
+    );
+}
+
+/**
+ * Hook to access the artifact URL cache.
+ * Returns null if used outside of ArtifactUrlCacheProvider.
+ */
+export function useArtifactUrlCache(): ArtifactUrlCacheContextValue | null {
+    return useContext(ArtifactUrlCacheContext);
+}
+
+/**
+ * Generate a cache key for an artifact URL.
+ */
+export function getArtifactCacheKey(runId: string, path: string, disposition: string = "inline"): string {
+    return `artifact:${runId}:${path}:${disposition}`;
+}
+
+/**
+ * Generate a cache key for a file URL.
+ */
+export function getFileCacheKey(path: string): string {
+    return `file:${path}`;
+}