Sage embed with react

modules/ROOT/pages/embed-ts-react-app.adoc

@@ -91,7 +91,7 @@ You can find the GUIDs of these objects in the UI, the developer Playground on y
 
 To embed ThoughtSpot Search page, complete the following steps:
 
-=== Create a search component
+=== Create a Search component
 
 In your React app project, go to the **Components ** folder in your app directory and add a page for the embedded search object; for example, `Search.tsx`.
 
@@ -126,35 +126,6 @@ ts-data-app> npm start
 ----
 
 === Code sample
-
-[source,TypeScript]
-----
-import { init } from '@thoughtspot/visual-embed-sdk';
-import { SearchEmbed } from '@thoughtspot/visual-embed-sdk/react';
-
-// If you are using Webpack 4 (which is the default when using create-react-app v4), you would need to import
-// the React components using the below:
-import { SearchEmbed } from '@thoughtspot/visual-embed-sdk/lib/src/react';
-
-init({
-    thoughtSpotHost: '<%=tshost%>',
-    authType: AuthType.None,
-});
-
-const MyComponent = ({ dataSource }) => {
-    const onCustomAction = (actionEvent) => {
-        // Do something with actionEvent.
-    };
-
-    return (
-        <SearchEmbed
-            dataSource={dataSource}
-            onCustomAction={onCustomAction}
-        />
-    );
-};
-----
-
 The following code sample shows additional attributes and properties:
 
 * A `Search` function with a data source ID.
@@ -167,9 +138,9 @@ The following code sample shows additional attributes and properties:
 import { init } from "@thoughtspot/visual-embed-sdk";
 import { SearchEmbed } from "@thoughtspot/visual-embed-sdk/react";
 
-// If you are using Webpack 4 (which is the default when using create-react-app v4), you would need to import
+// If you are using Webpack 4 (which is the default when using create-react-app v4), import
 // the React components using the below:
-import { SearchEmbed } from "@thoughtspot/visual-embed-sdk/lib/src/react";
+// import { SearchEmbed } from "@thoughtspot/visual-embed-sdk/lib/src/react";
 
 init({
   thoughtSpotHost: "<%=tshost%>",
@@ -269,6 +240,100 @@ image::./images/search-query-changed.png[]
 * Check the console log to verify if the registered events are emitted.
 ////
 
+== Embed a Natural Language Search
+To embed ThoughtSpot Natural Language Search interface, complete the steps listed in the following sections.
+
+=== Create a Natural Language Search component
+
+In your React app project, go to the **Components ** folder in your app directory and add a page for the embedded search object; for example, `Sage.tsx`.
+
+. Import the `SageEmbed` component and event libraries
++
+[source,TypeScript]
+----
+import { Action, EmbedEvent, HostEvent }
+from "@thoughtspot/visual-embed-sdk";
+import {SageEmbed,useEmbedRef}
+from "@thoughtspot/visual-embed-sdk/lib/src/react";
+----
+
+. Initialize the SDK and specify the xref:embed-authentication.adoc[authentication method].
+. Add constructor options as props and register event handlers.
+. Render the app.
++
+----
+ts-data-app> npm start
+----
+
+
+=== Code sample
+The following code sample shows additional attributes and properties:
+
+* A `Sage` function with a data source ID.
+* The `searchOptions` property to pass a search query `number of jackets sold today` and execute the query.
+* Event handlers for `init` and Load events.
+
++
+[source,TypeScript]
+----
+import { init } from "@thoughtspot/visual-embed-sdk";
+import { SageEmbed } from "@thoughtspot/visual-embed-sdk/react";
+
+// If you are using Webpack 4 (which is the default when using create-react-app v4), you would need to import
+// the React components using the below:
+// import { SageEmbed } from "@thoughtspot/visual-embed-sdk/lib/src/react";
+
+// Initialize ThoughtSpot
+init({
+  thoughtSpotHost: "<%=tshost%>",
+  authType: AuthType.None,
+});
+const Sage = () => {
+  // Define search options
+  const searchOptions = {
+    searchQuery: "number of jackets sold today",  // Search query to execute
+    executeSearch: true,  // Execute search immediately
+  },
+    dataSource: "c8684f7f-d8a4-4bc9-b87d-115433c5e458", // Replace with your actual data source
+  };
+  // Add Event handlers
+  const onInit = () => {
+    console.log(EmbedEvent.Init, {});
+  };
+
+  const onLoad = () => {
+    console.log(EmbedEvent.Load, {});
+  };
+
+  return (
+    <SageEmbed
+      frameParams={{
+        height: 720px
+      }}
+      searchOptions={searchOptions}
+      onLoad={onLoad}
+      onInit={onInit}  
+    />
+  );
+};
+----
+
+For more information about `SageEmbed` objects and attributes, see the following pages:
+
+* xref:SageEmbed.adoc[SageEmbed]
+* xref:SageViewConfig.adoc[SageViewConfig]
+* xref:HostEvent.adoc[HostEvent]
+* xref:EmbedEvent.adoc[EmbedEvent]
+* xref:Action.adoc[Actions]
+
+=== Test your app
+
+* Load your application.
+* Check if the ThoughtSpot natural language search bar is rendered with the search query you specified.
++
+[.bordered]
+image::./images/sage-embed.png[]
+
 == Embed a Liveboard
 
 To embed a ThoughtSpot Liveboard, complete the following steps:
@@ -322,7 +387,7 @@ import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';
 
 // If you are using Webpack 4 (which is the default when using create-react-app v4), you would need to import
 // the React components using the below:
-import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/lib/src/react';
+// import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/lib/src/react';
 
 init({
     thoughtSpotHost: '<%=tshost%>',