@thoughtspot/visual-embed-sdk 1.26.6 → 1.26.7

package/src/embed/sage.ts

@@ -18,14 +18,14 @@ import { V1Embed } from './ts-embed';
  */
 export interface SearchOptions {
     /**
-     * The query string to pre-fill in natual language search bar
+     * The query string to pass for Natural Language Search.
      */
     searchQuery: string;
     /**
-     * Boolean to determine if the search should be executed or not.
-     * if it is executed, put the focus on the results.
-     * if it’s not executed, put the focus in the search bar - at the end of
-     * the tokens
+     * Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
      */
     executeSearch?: boolean;
 }
@@ -34,7 +34,7 @@ export interface SearchOptions {
  * The configuration attributes for the embedded Natural language search view. Based on
  * GPT and LLM.
  *
- * @version: SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl, 9.5.1-sw
+ * @version: SDK: 1.23.0 | ThoughtSpot: 9.8.0.cl, 9.8.0.sw
  * @group Embed components
  */
 export interface SageViewConfig
@@ -43,11 +43,11 @@ export interface SageViewConfig
         'hiddenHomepageModules' | 'hiddenHomeLeftNavItems' | 'hiddenTabs' | 'visibleTabs' | 'reorderedHomepageModules'
     > {
     /**
-     * If set to true, a list of liveboard and answers related
+     * If set to true, a list of Liveboard and Answers related
      * to the natural language search will be shown below the
      * AI generated answer.
      *
-     * @deprecated Currently liveboard and answers related
+     * @deprecated Currently Liveboard and Answers related
      * to the natural language search will not be shown for sage
      * embed
      */
@@ -64,57 +64,75 @@ export interface SageViewConfig
      */
     isProductTour?: boolean;
     /**
-     * flag to hide search bar title. default false.
+     * Show or hide the search bar title.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     hideSearchBarTitle?: boolean;
     /**
-     * flag to disable Sage Answer header(`AI Answer` title section on top of the Sage
-     * answer). default false.
+     * Show or hide the Answer header, that is, the `AI Answer` title
+     * at the top of the Answer page.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.9.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.10.0.cl
      */
     hideSageAnswerHeader?: boolean;
     /**
-     * flag to disable changing worksheet. default false.
+     * Disable the worksheet selection option.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.9.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     disableWorksheetChange?: boolean;
     /**
-     * flag to hide worksheet selector. default false.
+     * Hide the worksheet selection panel.
+     *
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     hideWorksheetSelector?: boolean;
     /**
-     * If set to true, the search bar auto complete search suggestions will not be shown.
-     * default false
+     * Show or hide autocomplete suggestions for the search query string.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.9.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     hideAutocompleteSuggestions?: boolean;
     /**
-     * If set to false, the auto complete search suggestions not be shown
+     * Show or hide autocomplete suggestions for the search query string.
      *
-     * @deprecated currently, object suggestions will not be shown for sage embed
-     * earlier this flag was used to show Auto complete suggestions
+     * @deprecated
+     * Currently, the object suggestions will not be shown for Natural Language Search.
+     * You can use {@link hideAutocompleteSuggestions} instead.
      */
     showObjectSuggestions?: boolean;
     /**
-     * If set to true, sample questions would be hidden to user.
-     * These sample questions are autogenerated based on selected datasource.
+     * Show or hide sample questions.
+     * The sample questions are autogenerated based on the worksheet
+     * selected for the search operation.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.10.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     hideSampleQuestions?: boolean;
     /**
-     * The data source GUID to set on load.
+     * The data source GUID (Worksheet GUID) to set on load.
      */
     dataSource?: string;
     /**
-     * Configuration for search options
+     * Includes the following properties:
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl
+     * `searchQuery`: The search query string to pass in the search bar.
+     * Supports Natural Language Search queries.
+     *
+     * `executeSearch`: Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
+     *
+     * @example
+     * ```js
+     * searchOptions: {
+     *    searchQuery: 'average sales by country and product type',
+     *    executeSearch: true,
+     * }
+     * ```
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     searchOptions?: SearchOptions;
 }
@@ -129,7 +147,7 @@ export const HiddenActionItemByDefaultForSageEmbed = [
     Action.Share,
 ];
 /**
- * Embed ThoughtSpot LLM and GPT based natural language search component.
+ * Embed ThoughtSpot LLM and GPT-based Natural Language Search component.
  *
  * @version: SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl, 9.5.1-sw
  * @group Embed components
@@ -193,7 +211,7 @@ export class SageEmbed extends V1Embed {
      *
      * @returns {string} iframe url
      */
-    private getIFrameSrc() {
+    public getIFrameSrc(): string {
         const path = 'eureka';
         const postHashObj = {};
         const tsPostHashParams = this.getThoughtSpotPostUrlParams();
@@ -202,15 +220,15 @@ export class SageEmbed extends V1Embed {
         } = this.viewConfig;
 
         if (dataSource) postHashObj[Param.WorksheetId] = dataSource;
-        if (searchOptions?.searchQuery) {
-            postHashObj[Param.Query] = searchOptions?.searchQuery;
-            if (searchOptions.executeSearch) {
-                postHashObj[Param.executeSearch] = true;
-            }
+        if (searchOptions?.searchQuery && searchOptions.executeSearch) {
+            postHashObj[Param.executeSearch] = true;
         }
+
         let sagePostHashParams = new URLSearchParams(postHashObj).toString();
         if (sagePostHashParams) sagePostHashParams = `${tsPostHashParams ? '&' : '?'}${sagePostHashParams}`;
-
+        if (searchOptions?.searchQuery) sagePostHashParams += `${sagePostHashParams ? '&' : '?'}${[Param.Query]}=${encodeURIComponent(searchOptions.searchQuery)}`;
+        // use encodeURIComponent for query instead of URLSearchParams
+        // as it adds + instead of %20 for spaces
         return `${this.getRootIframeSrc()}/embed/${path}${tsPostHashParams}${sagePostHashParams}`;
     }
 

package/src/embed/search-bar.tsx

@@ -20,25 +20,41 @@ export interface SearchBarViewConfig
     > {
     /**
      * The array of data source GUIDs to set on load.
-     * Only a single dataSource supported currently.
+     * Only a single data source is supported currently.
      *
-     * @deprecated Use dataSource instead
+     * @deprecated Use `dataSource` instead
      */
     dataSources?: string[];
     /**
      * The array of data source GUIDs to set on load.
      *
-     * @version: SDK: 1.19.0
+     * @version: SDK: 1.19.0, ThoughtSpot 9.0.0.cl, 9.0.1.sw
      */
     dataSource?: string;
     /**
-     * Flag to set if last selected dataSource should be used
+     * Boolean to define if the last selected data source should be used
      *
-     * @version: SDK: 1.24.0
+     * @version: SDK: 1.24.0, ThoughtSpot 9.5.0.cl, 9.5.0.sw
      */
     useLastSelectedSources?: boolean;
     /**
-     * Configuration for search options
+     * Configuration for search options.
+     * Includes the following properties:
+     *
+     * `searchTokenString`: Search tokens to pass in the query.
+     *
+     * `executeSearch`: Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
+     *
+     * @example
+     * ```js
+     * searchOptions: {
+     *    searchTokenString: '[quantity purchased] [region]',
+     *    executeSearch: true,
+     * }
+     * ```
      */
     searchOptions?: SearchOptions;
 }

package/src/embed/search.spec.ts

@@ -411,4 +411,17 @@ describe('Search embed tests', () => {
             );
         });
     });
+    test('should set hideSearchBar to true if hideSearchBar flag is true', async () => {
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            hideSearchBar: true,
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false&hideSearchBar=true${prefixParams}#/embed/saved-answer/${answerId}`,
+            );
+        });
+    });
 });

package/src/embed/search.ts

@@ -7,34 +7,35 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 
+import { getReleaseVersion } from '../auth';
+import { ERROR_MESSAGE } from '../errors';
 import {
-    DataSourceVisualMode, DOMSelector, Param, Action, ViewConfig,
+    Action, DOMSelector, DataSourceVisualMode, Param, ViewConfig,
 } from '../types';
 import {
-    getQueryParamString,
     checkReleaseVersionInBeta,
     getFilterQuery,
+    getQueryParamString,
     getRuntimeParameters,
 } from '../utils';
-import { TsEmbed } from './ts-embed';
-import { ERROR_MESSAGE } from '../errors';
 import { getAuthPromise } from './base';
-import { getReleaseVersion } from '../auth';
 import { getEmbedConfig } from './embedConfig';
+import { TsEmbed } from './ts-embed';
 
 /**
- * Configuration for search options
+ * Configuration for search options.
+ *
  */
 export interface SearchOptions {
     /**
-     * The tml string to load the answer
+     * Search tokens to pass in the query.
      */
     searchTokenString: string;
     /**
-     * Boolean to determine if the search should be executed or not.
-     * if it is executed, put the focus on the results.
-     * if it’s not executed, put the focus in the search bar - at the end of
-     * the tokens
+     * Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
      */
     executeSearch?: boolean;
 }
@@ -59,11 +60,11 @@ export interface SearchViewConfig
      */
     collapseDataSources?: boolean;
     /**
-     * If set to true, hides the data sources panel.
+     * Show or hide the data sources panel.
      */
     hideDataSources?: boolean;
     /**
-     * If set to true, hides the charts and tables in search answers.
+     * Show or hide the charts and tables in search answers.
      * This attribute can be used to create a custom visualization
      * using raw answer data.
      */
@@ -85,9 +86,9 @@ export interface SearchViewConfig
     forceTable?: boolean;
     /**
      * The array of data source GUIDs to set on load.
-     * Only a single dataSource supported currently.
+     * Only a single data source is supported currently.
      *
-     * @deprecated Use dataSource instead
+     * @deprecated Use `dataSource` instead.
      */
     dataSources?: string[];
     /**
@@ -99,11 +100,29 @@ export interface SearchViewConfig
     /**
      * The initial search query to load the answer with.
      *
-     * @deprecated Use {@link searchOptions} instead
+     * @deprecated
+     *
+     * Use {@link searchOptions} instead.
      */
     searchQuery?: string;
     /**
-     * Configuration for search options
+     * Configuration for search options.
+     * Includes the following properties:
+     *
+     * `searchTokenString`: Search tokens to pass in the query.
+     *
+     * `executeSearch`: Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
+     *
+     * @example
+     * ```js
+     * searchOptions: {
+     *    searchTokenString: '[quantity purchased] [region]',
+     *    executeSearch: true,
+     * }
+     * ```
      */
     searchOptions?: SearchOptions;
     /**
@@ -111,10 +130,10 @@ export interface SearchViewConfig
      */
     answerId?: string;
     /**
-     * If set to true, search page will render without the Search Bar
+     * If set to true, the search page will render without the Search Bar
      * The chart/table should still be visible.
      *
-     * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
+     * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.5.0.sw
      */
     hideSearchBar?: boolean;
     /**
@@ -183,6 +202,7 @@ export class SearchEmbed extends TsEmbed {
             dataSource,
             dataSources,
             excludeRuntimeFiltersfromURL,
+            hideSearchBar,
             dataPanelV2 = false,
             useLastSelectedSources = false,
             runtimeParameters,
@@ -219,6 +239,10 @@ export class SearchEmbed extends TsEmbed {
             queryParams[Param.ForceTable] = true;
         }
 
+        if (hideSearchBar) {
+            queryParams[Param.HideSearchBar] = true;
+        }
+
         queryParams[Param.DataPanelV2Enabled] = dataPanelV2;
         queryParams[Param.DataSourceMode] = this.getDataSourceMode();
 
@@ -251,7 +275,8 @@ export class SearchEmbed extends TsEmbed {
      * @param answerId The GUID of a saved answer
      * @param dataSources A list of data source GUIDs
      */
-    private getIFrameSrc(answerId: string) {
+    public getIFrameSrc(): string {
+        const { answerId } = this.viewConfig;
         const answerPath = answerId ? `saved-answer/${answerId}` : 'answer';
         const tsPostHashParams = this.getThoughtSpotPostUrlParams();
 
@@ -265,7 +290,7 @@ export class SearchEmbed extends TsEmbed {
         super.render();
         const { answerId } = this.viewConfig;
 
-        const src = this.getIFrameSrc(answerId);
+        const src = this.getIFrameSrc();
         this.renderIFrame(src);
         getAuthPromise().then(() => {
             if (