context

gatsby-browser.js

@@ -0,0 +1,16 @@
+const React = require('react');
+const { FloatingAssistantProvider } = require('./src/contexts/FloatingAssistantContext');
+const FloatingAssistant = require('./src/components/FloatingAssistant').default;
+
+exports.wrapRootElement = ({ element }) => (
+    <FloatingAssistantProvider>
+        {element}
+        <FloatingAssistant />
+    </FloatingAssistantProvider>
+);
+
+exports.onRouteUpdate = ({ location }) => {
+    window.dispatchEvent(
+        new CustomEvent('gatsby-route-update', { detail: { location } })
+    );
+};

gatsby-ssr.js

@@ -0,0 +1,8 @@
+const React = require('react');
+const { FloatingAssistantProvider } = require('./src/contexts/FloatingAssistantContext');
+
+exports.wrapRootElement = ({ element }) => (
+    <FloatingAssistantProvider>
+        {element}
+    </FloatingAssistantProvider>
+);

package.json

@@ -20,15 +20,18 @@
         "react-dom": "> 16.8.0"
     },
     "dependencies": {
+        "@types/dompurify": "^3.0.5",
         "@vercel/analytics": "^1.0.2",
         "algoliasearch": "^4.10.5",
         "cheerio": "^1.2.0",
         "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",
         "turndown": "^7.2.4",

src/components/DevDocTemplate/index.tsx

@@ -666,9 +666,9 @@ if (isVersionedIframe) {
     return (
         <>
             <Seo title={docTitle} description={docDescription} />
-            <Analytics />
-            {shouldShowAnnouncementBanner() && (
-                <AnnouncementBanner
+                <Analytics />
+                {shouldShowAnnouncementBanner() && (
+                    <AnnouncementBanner
                     enabled={HOME_ANNOUNCEMENT_BANNER?.enabled}
                     variant="release"
                     dismissKey={bannerDismissKey}

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;
+};

src/components/Document/helper.tsx

@@ -79,7 +79,19 @@ export const customizeDocContent = () => {
         langSpan.innerText = rawLang;
         header.appendChild(langSpan);
 
-        /* Copy button (right) */
+        /* Right group: CTA + copy button */
+        const rightGroup = document.createElement('div');
+        rightGroup.classList.add('code-block-header-actions');
+
+        const ctaLink = document.createElement('a');
+        ctaLink.classList.add('ctaButton');
+        ctaLink.href = 'https://try.thoughtspot.com';
+        ctaLink.target = '_blank';
+        ctaLink.rel = 'noopener noreferrer';
+        ctaLink.innerText = 'Ask SpotterCode';
+        rightGroup.appendChild(ctaLink);
+
+        /* Copy button */
         const buttonElement = document.createElement('button');
         buttonElement.setAttribute('class', 'copyButton');
         buttonElement.setAttribute('aria-label', t('CODE_COPY_BTN_HOVER_TEXT'));
@@ -90,7 +102,9 @@ export const customizeDocContent = () => {
         buttonElement.appendChild(imageElement);
 
         enableCopyToClipboard(buttonElement, copySource);
-        header.appendChild(buttonElement);
+        rightGroup.appendChild(buttonElement);
+
+        header.appendChild(rightGroup);
 
         /* ── Wrap pre in code-block-wrapper ── */
         const wrapper = document.createElement('div');

src/components/Document/index.scss

@@ -3,6 +3,48 @@
 @import '../../assets/styles/admonition.scss';
 @import '../../assets/styles/grid.scss';
 
+.selection-cta-button {
+    position: fixed;
+    z-index: 1000;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #fff;
+    background: #2770ef;
+    border-radius: 8px;
+    text-decoration: none;
+    white-space: nowrap;
+    pointer-events: all;
+    box-shadow:
+        0 0 8px 0 rgba(25, 35, 49, 0.10),
+        0 2px 4px 0 rgba(25, 35, 49, 0.04);
+    transition: background 0.15s ease, box-shadow 0.15s ease;
+
+    &::before {
+        content: '';
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        flex-shrink: 0;
+    }
+
+    &:hover {
+        background: #1a5ccc;
+        color: #fff;
+        text-decoration: none;
+        box-shadow:
+            0 0 12px 0 rgba(25, 35, 49, 0.15),
+            0 4px 8px 0 rgba(25, 35, 49, 0.08);
+    }
+}
+
 .documentWrapper {
     width: calc(98%);
     color: var(--primary-color);
@@ -102,6 +144,27 @@
             font-family: $font-family-code;
         }
 
+        .code-block-header-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .ctaButton {
+            display: inline-flex;
+            align-items: center;
+            padding: 4px 10px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #2770ef;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            text-decoration: none;
+            white-space: nowrap;
+            transition: background 0.15s ease;
+        }
+
         .copyButton {
             display: inline-flex;
             align-items: center;

src/components/Document/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import './index.scss';
 import { customizeDocContent, addScrollListener } from './helper';
 import Footer from '../Footer';
@@ -18,6 +18,52 @@ const Document = (props: {
     breadcrumsData: any;
     markdownBody?: string;
 }) => {
+    const [selectionPos, setSelectionPos] = useState<{ top: number; left: number } | null>(null);
+    const selectionRef = useRef<string>('');
+
+    useEffect(() => {
+        let mouseDownX = 0;
+        let mouseDownY = 0;
+
+        const handleMouseUp = (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('.selection-cta-button')) return;
+
+            // If mouse didn't move (plain click, not a drag-select), don't re-show
+            const moved = Math.abs(e.clientX - mouseDownX) > 3 || Math.abs(e.clientY - mouseDownY) > 3;
+            if (!moved) return;
+
+            const selection = window.getSelection();
+            const text = selection?.toString().trim() || '';
+            if (!text) {
+                setSelectionPos(null);
+                return;
+            }
+            const range = selection!.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+            selectionRef.current = text;
+            const HEADER_HEIGHT = 108; // main header (60) + secondary header (48)
+            const rawTop = rect.top - 36;
+            setSelectionPos({
+                top: Math.max(HEADER_HEIGHT + 4, rawTop),
+                left: rect.left,
+            });
+        };
+
+        const handleMouseDown = (e: MouseEvent) => {
+            mouseDownX = e.clientX;
+            mouseDownY = e.clientY;
+            setSelectionPos(null);
+        };
+
+        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener('mousedown', handleMouseDown);
+        return () => {
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('mousedown', handleMouseDown);
+        };
+    }, []);
+
     useEffect(() => {
         customizeDocContent();
     }, [props.docContent]);
@@ -131,6 +177,17 @@ const Document = (props: {
             className="documentWrapper"
             style={!props.shouldShowRightNav ? { width: '100%' } : undefined}
         >
+            {selectionPos && (
+                <a
+                    className="selection-cta-button"
+                    href="https://try.thoughtspot.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ top: selectionPos.top, left: selectionPos.left }}
+                >
+                    Ask SpotterCode
+                </a>
+            )}
             {!isHomePage && (
                 <Breadcrums
                     breadcrumsData={props.breadcrumsData}