context

package.json

@@ -20,14 +20,17 @@
         "react-dom": "> 16.8.0"
     },
     "dependencies": {
+        "@types/dompurify": "^3.0.5",
         "@vercel/analytics": "^1.0.2",
         "algoliasearch": "^4.10.5",
         "classnames": "^2.3.1",
+        "dompurify": "^3.3.3",
         "eventemitter3": "^4.0.7",
         "gatsby-plugin-vercel": "^1.0.3",
         "gatsby-source-git": "^1.1.0",
         "html-react-parser": "^1.4.12",
         "lodash": "^4.17.21",
+        "marked": "^18.0.0",
         "mixpanel-browser": "^2.45.0",
         "react-helmet": "^6.1.0",
         "use-deep-compare-effect": "^1.8.1"
@@ -74,7 +77,6 @@
         "identity-obj-proxy": "^3.0.0",
         "jest": "^26.6.3",
         "jsdom": "^17.0.0",
-        "sass": "^1.80.6",
         "prettier": "2.1.2",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
@@ -83,6 +85,7 @@
         "react-resize-detector": "^9.x.0",
         "react-test-renderer": "^18.0.x",
         "react-use-flexsearch": "^0.1.1",
+        "sass": "^1.80.6",
         "ts-jest": "^26.5.5",
         "ts-node": "^10.9.1",
         "tsx": "^4.7.1",

src/components/DevDocTemplate/index.tsx

@@ -52,6 +52,7 @@ import t from '../../utils/lang-utils';
 import { getHTMLFromComponent } from '../../utils/react-utils';
 import { ThemeBuilder } from './playGround/ThemeBuilder';
 import VersionIframe from '../VersionIframe';
+import FloatingAssistant from '../FloatingAssistant';
 
 const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
     const {
@@ -643,6 +644,7 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
                         renderDocTemplate()
                     )}
                 </main>
+                <FloatingAssistant isDarkMode={isDarkMode ?? false} pageId={curPageNode.pageAttributes.pageid} />
             </div>
         </>
     );

src/components/DevDocTemplate/playGround/VisualEmbed.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, FC } from 'react';
+
+import { DEFAULT_HOST } from '../../../configs/doc-configs';
+import BackButton from '../../BackButton';
+
+const VisualEmbedPlayGround: FC<VisualEmbedPlayGroundProps> = (props) => {
+    const isBrowser = () => typeof window !== 'undefined';
+    const { isPublisSiteOpen, location, backLink } = props;
+
+    const getParentURL = () => {
+        let parentUrl = location?.origin;
+        if (isBrowser()) {
+            const { ancestorOrigins } = window?.location;
+            parentUrl =
+                ancestorOrigins?.length > 0
+                    ? ancestorOrigins[ancestorOrigins?.length - 1]
+                    : document.referrer || window?.origin;
+        }
+        return parentUrl;
+    };
+    const baseUrl = isPublisSiteOpen ? DEFAULT_HOST : getParentURL();
+    const playgroundUrl = "https://try-everywhere.thoughtspot.cloud/v2/#/develop/playground/search"
+    console.log(playgroundUrl)
+
+    return (
+        <div className="restApiWrapper">
+            <BackButton title="Back" backLink={backLink} internalRedirect />
+            <iframe
+                ref={null}
+                src={playgroundUrl}
+                height="100%"
+                width="100%"
+                id="restAPIPlayGround"
+            />
+        </div>
+    );
+};
+
+export default VisualEmbedPlayGround;
+
+type VisualEmbedPlayGroundProps = {
+    location: Location;
+    isPublisSiteOpen: boolean;
+    backLink: string;
+    params: Object;
+};