added UI changes

Author: ruchI9897

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}