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,20 @@ 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('button');
+        ctaLink.classList.add('ctaButton');
+        ctaLink.innerText = 'Ask SpotterCode';
+        ctaLink.addEventListener('click', () => {
+            const code = copySource.innerText.trim();
+            window.dispatchEvent(new CustomEvent('spotter-code-ask', { detail: { quotedText: code } }));
+        });
+        rightGroup.appendChild(ctaLink);
+
+        /* Copy button — icon style */
         const buttonElement = document.createElement('button');
         buttonElement.setAttribute('class', 'copyButton');
         buttonElement.setAttribute('aria-label', t('CODE_COPY_BTN_HOVER_TEXT'));
@@ -90,7 +103,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 14px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #1d232f !important;
+    background: #fff;
+    border-radius: 100px;
+    text-decoration: none;
+    white-space: nowrap;
+    pointer-events: all;
+    box-shadow:
+        0 4px 16px 0 rgba(25, 35, 49, 0.14),
+        0 1px 4px 0 rgba(25, 35, 49, 0.06);
+    transition: box-shadow 0.15s ease;
+    font-family: 'Optimo-Plain', sans-serif;
+
+    &::before {
+        content: '';
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27' fill='%232770EF'%3E%3Cpath d='M8.25809 7.21109C8.83155 5.59342 11.1191 5.59349 11.6927 7.21109L13.4163 12.0753C13.4919 12.2885 13.6602 12.4568 13.8733 12.5324L18.7376 14.256C20.3555 14.8294 20.3555 17.1172 18.7376 17.6906L13.8733 19.4142C13.6601 19.4898 13.4918 19.658 13.4163 19.8712L11.6927 24.7355C11.1191 26.353 8.83157 26.3531 8.25809 24.7355L6.53445 19.8712C6.4589 19.658 6.29064 19.4898 6.07742 19.4142L1.21316 17.6906C-0.404397 17.1171 -0.404379 14.8295 1.21316 14.256L6.07742 12.5324C6.29058 12.4568 6.45883 12.2885 6.53445 12.0753L8.25809 7.21109ZM20.2805 0.49136C20.6395 -0.163697 21.6064 -0.163877 21.9651 0.49136L22.0315 0.642727L22.888 3.05972L25.3059 3.91616C26.1625 4.21966 26.1622 5.43079 25.3059 5.73452L22.888 6.59097L22.0315 9.00894C21.7279 9.86544 20.5167 9.86552 20.2132 9.00894L19.3567 6.59097L16.9397 5.73452C16.0831 5.43098 16.0831 4.21969 16.9397 3.91616L19.3567 3.05972L20.2132 0.642727L20.2805 0.49136Z'/%3E%3C/svg%3E");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        flex-shrink: 0;
+    }
+
+    &:hover {
+        color: #1d232f !important;
+        text-decoration: none;
+        box-shadow:
+            0 6px 20px 0 rgba(25, 35, 49, 0.18),
+            0 2px 6px 0 rgba(25, 35, 49, 0.08);
+    }
+}
+
 .documentWrapper {
     width: calc(98%);
     color: var(--primary-color);
@@ -102,52 +144,49 @@
             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;
+            background: transparent;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            text-decoration: none;
+            white-space: nowrap;
+            font-family: $font-family-doc;
+            transition: opacity 0.15s ease;
+            &:hover { opacity: 0.75; }
+        }
+
         .copyButton {
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            width: 28px;
+            padding: 0 8px;
             height: 28px;
-            padding: 0;
+            font-size: 13px;
+            font-weight: 500;
             color: #fff;
             background: transparent;
             border: 1px solid rgba(255, 255, 255, 0.15);
             border-radius: 5px;
             cursor: pointer;
+            white-space: nowrap;
+            font-family: $font-family-doc;
             transition: background 0.15s ease, color 0.15s ease;
-            position: relative;
 
-            &:hover {
-                background: rgba(255, 255, 255, 0.1);
-                color: #fff;
-            }
-
-            .copyIcon {
-                height: 14px;
-                width: 14px;
-                display: block;
-                flex-shrink: 0;
-            }
-
-            /* Tooltip floats below — absolutely positioned so it doesn't shift layout */
-            .tooltip {
-                position: absolute;
-                top: calc(100% + 6px);
-                right: 0;
-                z-index: 10;
-                pointer-events: none;
-
-                .tooltiptext {
-                    display: block;
-                    background: #1d232f;
-                    color: #fff;
-                    font-size: 11px;
-                    padding: 3px 8px;
-                    border-radius: 4px;
-                    white-space: nowrap;
-                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
-                }
-            }
+            &:hover { background: rgba(255, 255, 255, 0.1); }
+            &.copied { color: #0d9f6e; border-color: #0d9f6e; }
         }
     }
 

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';
@@ -7,6 +7,7 @@ import LinkableHeader from '../LinkableHeader';
 import WasThisHelpful from '../WasThisHelpful';
 import CopyPageDropdown from '../CopyPageDropdown';
 import { HOME_PAGE_ID } from '../../configs/doc-configs';
+import { useFloatingAssistant } from '../../contexts/FloatingAssistantContext';
 import parse, { HTMLReactParserOptions, domToReact, attributesToProps } from 'html-react-parser';
 
 const Document = (props: {
@@ -18,6 +19,55 @@ const Document = (props: {
     breadcrumsData: any;
     markdownBody?: string;
 }) => {
+    const { setIsOpen, setQuotedText } = useFloatingAssistant();
+    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 BUTTON_HEIGHT = 36;
+            const rawTop = rect.top - BUTTON_HEIGHT - 6;
+            setSelectionPos({
+                top: Math.max(HEADER_HEIGHT + 4, rawTop),
+                left: Math.max(8, e.clientX - 80),
+            });
+        };
+
+        const handleMouseDown = (e: MouseEvent) => {
+            mouseDownX = e.clientX;
+            mouseDownY = e.clientY;
+            if ((e.target as HTMLElement).closest('.selection-cta-button')) return;
+            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 +181,20 @@ const Document = (props: {
             className="documentWrapper"
             style={!props.shouldShowRightNav ? { width: '100%' } : undefined}
         >
+            {selectionPos && (
+                <button
+                    className="selection-cta-button"
+                    style={{ top: selectionPos.top, left: selectionPos.left }}
+                    onClick={() => {
+                        const selected = selectionRef.current;
+                        setSelectionPos(null);
+                        setQuotedText(selected);
+                        setIsOpen(true);
+                    }}
+                >
+                    Ask SpotterCode
+                </button>
+            )}
             {!isHomePage && (
                 <Breadcrums
                     breadcrumsData={props.breadcrumsData}