@thoughtspot/visual-embed-sdk 1.48.0 → 1.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.48.0",
+    "version": "1.49.0",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",

package/src/css-variables.ts

@@ -991,4 +991,178 @@ export interface CustomCssVariables {
      * Background color of the color palette in the Liveboard styling panel.
      */
     '--ts-var-liveboard-styling-color-palette-background'?: string;
-  }
+
+    /**
+     * Main panel background of the SpotterViz.
+     */
+    '--ts-var-spotterviz-panel-background'?: string;
+
+    /**
+     * Background color of the chat input field in SpotterViz.
+     */
+    '--ts-var-spotterviz-input-background'?: string;
+
+    /**
+     * Placeholder text color of the chat input field in SpotterViz.
+     */
+    '--ts-var-spotterviz-input-placeholder-color'?: string;
+
+    /**
+     * CTA color of the chat input field in SpotterViz.
+     */
+    '--ts-var-spotterviz-input-cta-color'?: string;
+
+    /**
+     * CTA hover color of the chat input field in SpotterViz.
+     */
+    '--ts-var-spotterviz-input-cta-hover-color'?: string;
+
+    /**
+     * Text color for the SpotterViz label in the empty state, displayed below
+     * the SpotterViz icon.
+     */
+    '--ts-var-spotterviz-emptystate-spotterviz-color'?: string;
+
+    /**
+     * Background color of the starter prompt cards in SpotterViz.
+     */
+    '--ts-var-spotterviz-prompt-card-background'?: string;
+
+    /**
+     * Background hover color of the starter prompt cards in SpotterViz.
+     */
+    '--ts-var-spotterviz-prompt-card-hover-background'?: string;
+
+    /**
+     * Primary text color in SpotterViz, also used for tool response text,
+     * upvote/downvote buttons, and other primary content.
+     */
+    '--ts-var-spotterviz-text-primary'?: string;
+
+    /**
+     * Secondary text color in SpotterViz.
+     */
+    '--ts-var-spotterviz-text-secondary'?: string;
+
+    /**
+     * Background color of the user chat message bubble in SpotterViz.
+     */
+    '--ts-var-spotterviz-message-background'?: string;
+
+    /**
+     * Hover color for the user chat message expand button in SpotterViz.
+     */
+    '--ts-var-spotterviz-usermessage-icon-hover'?: string;
+
+    /**
+     * Background color of the user chat message expand button in SpotterViz.
+     */
+    '--ts-var-spotterviz-usermessage-icon-background'?: string;
+
+    /**
+     * Color of the thinking step header when in progress in SpotterViz.
+     */
+    '--ts-var-spotterviz-thinking-inprogress-header-color'?: string;
+
+    /**
+     * Color of the thinking step header when completed in SpotterViz.
+     */
+    '--ts-var-spotterviz-thinking-completed-header-color'?: string;
+
+    /**
+     * Color of the final completion indicator icon shown when all work is done.
+     * The last green dot which is shown when work is done.
+     */
+    '--ts-var-spotterviz-thinking-work-done-icon-color'?: string;
+
+    /**
+     * Hover background color for the working/work done CTA in SpotterViz.
+     */
+    '--ts-var-spotterviz-thinking-cta-hover-background'?: string;
+
+    /**
+     * Background color of tool call panels in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-call-background'?: string;
+
+    /**
+     * Color of tool titles and icons in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-title-color'?: string;
+
+    /**
+     * Border color of tool call panels in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-border-color'?: string;
+
+    /**
+     * Background color of the JSON input panel inside a tool call in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-json-input-background'?: string;
+
+    /**
+     * Background color of the upvote/downvote feedback buttons in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-feedback-button-background'?: string;
+
+    /**
+     * Hover background color of the upvote/downvote feedback buttons in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-feedback-button-hover'?: string;
+
+    /**
+     * Text color of the JSON input panel inside a tool call in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-json-input-color'?: string;
+
+    /**
+     * Background color of the last checkpoint section in SpotterViz.
+     */
+    '--ts-var-spotterviz-last-checkpoint-background'?: string;
+
+    /**
+     * Border color of the last checkpoint section in SpotterViz.
+     */
+    '--ts-var-spotterviz-last-checkpoint-border'?: string;
+
+    /**
+     * Border color of the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-border'?: string;
+
+    /**
+     * Background color of the selected section in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-selected-background'?: string;
+
+    /**
+     * Text color of the selected section in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-selected-text-color'?: string;
+
+    /**
+     * Text color of unselected items in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-text'?: string;
+
+    /**
+     * Hover background color of unselected items in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-hover-background'?: string;
+
+    /**
+     * Hover text color of unselected items in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-hover-text-color'?: string;
+
+    /**
+     * Text color of the SpotterViz footer.
+     */
+    '--ts-var-spotterviz-footer-text-color'?: string;
+
+    /**
+     * Shared border color used throughout SpotterViz: input box, user message,
+     * header underline, left panel border, thinking step connector and dots.
+     */
+    '--ts-var-spotterviz-border-color'?: string;
+}

package/src/embed/app.spec.ts

@@ -23,6 +23,7 @@ import {
     expectUrlMatchesWithParams,
     postMessageToParent,
     testVisualOverridesInEmbed,
+    expectUrlToHaveParamsWithValues,
 } from '../test/test-utils';
 import { version } from '../../package.json';
 import * as config from '../config';
@@ -521,6 +522,18 @@ describe('App embed tests', () => {
         });
     });
 
+    test('Should add homepageVersion=v4 when homePage is Focused to the iframe src', async () => {
+        await testUrlParams(
+            {
+                ...defaultViewConfig,
+                discoveryExperience: {
+                    homePage: HomePage.Focused,
+                },
+            } as AppViewConfig,
+            `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v2&homepageVersion=v4${defaultParams}${defaultParamsPost}#/home`,
+        );
+    });
+
     test('should set isLiveboardXLSXCSVDownloadEnabled to true in url', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -579,6 +592,141 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should include spotterVizConfig in APP_INIT embedParams when spotterViz is provided', async () => {
+        const spotterViz = {
+            brandName: 'MyBrand',
+            brandHeadline: "Hi, there! I'm",
+            description: 'Ask questions about your data',
+            inputChatPlaceholder: 'Ask a question...',
+            hideStarterPrompts: false,
+            customStarterPrompts: [
+                {
+                    id: '001',
+                    displayText: 'Show revenue by region',
+                    fullPrompt: 'Show revenue by region',
+                },
+                { id: '002', displayText: 'Top customers', fullPrompt: 'Top customers by sales' },
+            ],
+        };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterViz,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(
+                getIFrameEl().contentWindow,
+                { type: EmbedEvent.APP_INIT, data: {} },
+                mockPort,
+            );
+        });
+        await executeAfterWait(() => {
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: expect.objectContaining({
+                    embedParams: expect.objectContaining({
+                        spotterVizConfig: spotterViz,
+                    }),
+                }),
+            });
+        });
+    });
+
+    test('should pass brandHeadline through spotterVizConfig in APP_INIT', async () => {
+        const spotterViz = { brandName: 'MyBrand', brandHeadline: "Hi, there! I'm" };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterViz,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(
+                getIFrameEl().contentWindow,
+                { type: EmbedEvent.APP_INIT, data: {} },
+                mockPort,
+            );
+        });
+        await executeAfterWait(() => {
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: expect.objectContaining({
+                    embedParams: expect.objectContaining({
+                        spotterVizConfig: expect.objectContaining({
+                            brandHeadline: "Hi, there! I'm",
+                        }),
+                    }),
+                }),
+            });
+        });
+    });
+
+    test('should not include spotterVizConfig in APP_INIT when spotterViz is not provided', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(
+                getIFrameEl().contentWindow,
+                { type: EmbedEvent.APP_INIT, data: {} },
+                mockPort,
+            );
+        });
+        await executeAfterWait(() => {
+            const callArgs = mockPort.postMessage.mock.calls[0][0];
+            expect(callArgs.type).toBe(EmbedEvent.APP_INIT);
+            if (callArgs.data.embedParams) {
+                expect(callArgs.data.embedParams.spotterVizConfig).toBeUndefined();
+            }
+        });
+    });
+
+    test('should include spotterVizConfig alongside spotterSidebarConfig in APP_INIT', async () => {
+        const spotterViz = { brandName: 'MyBrand' };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterViz,
+            spotterSidebarConfig: { enablePastConversationsSidebar: true },
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(
+                getIFrameEl().contentWindow,
+                { type: EmbedEvent.APP_INIT, data: {} },
+                mockPort,
+            );
+        });
+        await executeAfterWait(() => {
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: expect.objectContaining({
+                    embedParams: expect.objectContaining({
+                        spotterVizConfig: spotterViz,
+                        spotterSidebarConfig: expect.objectContaining({
+                            enablePastConversationsSidebar: true,
+                        }),
+                    }),
+                }),
+            });
+        });
+    });
+
     test('should set toolResponseCardBrandingLabel in url via spotterChatConfig', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -595,6 +743,33 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should set spotterFileUploadEnabled to true in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterChatConfig: { spotterFileUploadEnabled: true },
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&profileAndHelpInNavBarHidden=false&spotterFileUploadEnabled=true${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('should set spotterFileUploadFileTypes in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterChatConfig: { spotterFileUploadFileTypes: { types: ['image/png', 'application/pdf'] } },
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlToHaveParamsWithValues(getIFrameSrc(), {
+                spotterFileUploadFileTypes: JSON.stringify({ types: ['image/png', 'application/pdf'] }),
+            });
+        });
+    });
+
     test('should set isLiveboardXLSXCSVDownloadEnabled to false in url', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -987,6 +1162,47 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should set newConnectionsExperience to true in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            newConnectionsExperience: true,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&newConnectionsExperience=true${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('should set newConnectionsExperience to false in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            newConnectionsExperience: false,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&newConnectionsExperience=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('should disable connection new experience by default in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
     test('Should add hideIrrelevantFiltersAtTabLevel flag to the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -1720,6 +1936,36 @@ describe('App embed tests', () => {
             addEventListenerSpy.mockRestore();
         });
 
+        test('should listen to scroll and resize changes from scrollable iframe ancestors', async () => {
+            const scrollContainer = getRootEl();
+            scrollContainer.style.overflow = 'auto';
+
+            const scrollContainerAddEventListenerSpy = jest.spyOn(scrollContainer, 'addEventListener');
+            const resizeObserveSpy = jest.fn();
+            const resizeDisconnectSpy = jest.fn();
+            (window as any).ResizeObserver = jest.fn().mockImplementation(() => ({
+                observe: resizeObserveSpy,
+                disconnect: resizeDisconnectSpy,
+            }));
+
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                enableScrollableContainerLazyLoading: true,
+            } as AppViewConfig);
+
+            await appEmbed.render();
+
+            await executeAfterWait(() => {
+                expect(scrollContainerAddEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+                expect(resizeObserveSpy).toHaveBeenCalledWith(scrollContainer);
+            }, 100);
+
+            appEmbed.destroy();
+            expect(resizeDisconnectSpy).toHaveBeenCalled();
+        });
+
         test('should remove window event listeners on destroy when fullHeight and lazyLoadingForFullHeight are enabled', async () => {
             const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
 
@@ -1734,7 +1980,7 @@ describe('App embed tests', () => {
             appEmbed.destroy();
 
             expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
-            expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function), true);
 
             removeEventListenerSpy.mockRestore();
         });
@@ -1965,5 +2211,3 @@ describe('AppEmbed visualOverrides tests', () => {
         await testVisualOverridesInEmbed(appEmbed, visualOverrides);
     });
 });
-
-