[Backport vscode-v1.64.x] fix: added extension banner to web (#6777)

This PR introduces a banner to push users to the editor extensions, only on the web. Once dismissed, it never returns. ![CleanShot 2025-01-22 at 16 00 49@2x](https://github.com/user-attachments/assets/34cac620-8a9a-47e6-b68f-81fa51d1467d) ## Test plan Tested locally, visually. <br> Backport e099407 from #6757 Co-authored-by: Taiyab Raja <taiyab.raja@gmail.com>
sourcegraph · Jan 24, 2025 · 74b5eaa · 74b5eaa
1 parent be2a19f
commit 74b5eaa
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 3 deletions.
diff --git a/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/SubmitButton.tsx b/vscode/webviews/chat/cells/messageCell/human/editor/toolbar/SubmitButton.tsx
@@ -402,6 +402,10 @@ export const PopoverItem: FunctionComponent<
                 onKeyDown={onKeyDownInPopoverContent}
                 ref={popoverContentRef}
                 {...popoverContentProps}
+                className={clsx(
+                    'tw-w-[350px] !tw-p-0 tw-z-10 tw-my-2 tw-shadow-lg tw-border tw-border-button-border tw-rounded-md',
+                    popoverContentProps?.className
+                )}
             >
                 {popoverContent(close)}
             </PopoverContent>

diff --git a/vscode/webviews/chat/components/WelcomeFooter.tsx b/vscode/webviews/chat/components/WelcomeFooter.tsx
@@ -1,9 +1,10 @@
-import type { CodyIDE } from '@sourcegraph/cody-shared'
+import { CodyIDE } from '@sourcegraph/cody-shared'
 import { QuickStart } from './QuickStart'
 import styles from './WelcomeFooter.module.css'
 
 import { BookOpenText, type LucideProps, MessageCircleQuestion } from 'lucide-react'
 import type { ForwardRefExoticComponent } from 'react'
+import { ExtensionPromotionalBanner } from '../../components/ExtensionPromotionalBanner'
 
 interface ChatViewLink {
     icon: ForwardRefExoticComponent<Omit<LucideProps, 'ref'>>
@@ -24,9 +25,10 @@ const chatLinks: ChatViewLink[] = [
     },
 ]
 
-export default function WelcomeFooter({ IDE }: { IDE: CodyIDE }) {
+export default function WelcomeFooter({ IDE }: { IDE: CodyIDE }): JSX.Element {
     return (
         <div className={styles.welcomeFooter}>
+            {IDE === CodyIDE.Web && <ExtensionPromotionalBanner IDE={IDE} />}
             <QuickStart />
             <div className={styles.links}>
                 {chatLinks.map(link => (

diff --git a/vscode/webviews/components/ExtensionPromotionalBanner.module.css b/vscode/webviews/components/ExtensionPromotionalBanner.module.css
@@ -0,0 +1,38 @@
+.banner {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    background: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-widget-border);
+    margin: 0 auto;
+    border-radius: 6px;
+
+    h3 {
+        margin: 0;
+        font-size: 0.875rem;
+        color: var(--vscode-editor-foreground);
+        font-weight: 500;
+    }
+}
+
+.download-button {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    font-weight: 500;
+    background: var(--vscode-button-secondaryBackground);
+    color: var(--vscode-editor-foreground);
+    text-decoration: none;
+    border-radius: 4px;
+    height: 32px;
+}
+
+.download-button:hover {
+    background: var(--vscode-button-hoverBackground);
+    color: var(--vscode-editor-foreground);
+}
+
+.banner {
+    position: relative;
+}
diff --git a/vscode/webviews/components/ExtensionPromotionalBanner.tsx b/vscode/webviews/components/ExtensionPromotionalBanner.tsx
@@ -0,0 +1,76 @@
+import type { CodyIDE } from '@sourcegraph/cody-shared'
+import { useState } from 'react'
+import styles from './ExtensionPromotionalBanner.module.css'
+
+const BANNER_DISMISSED_KEY = 'cody-extension-banner-dismissed'
+
+export const ExtensionPromotionalBanner: React.FC<{ IDE: CodyIDE }> = ({ IDE }) => {
+    const [isVisible, setIsVisible] = useState(() => {
+        // Initialize state from localStorage
+        return localStorage.getItem(BANNER_DISMISSED_KEY) !== 'true'
+    })
+    const [isClosing, setIsClosing] = useState(false)
+
+    const handleDismiss = () => {
+        setIsClosing(true)
+        // Wait for animation to complete before hiding
+        setTimeout(() => {
+            setIsVisible(false)
+            // Save dismissed state to localStorage
+            localStorage.setItem(BANNER_DISMISSED_KEY, 'true')
+        }, 300)
+    }
+
+    if (!isVisible) {
+        return null
+    }
+
+    return (
+        <div
+            className={`${styles.banner} ${
+                isClosing ? styles.slideOut : styles.slideIn
+            } tw-flex tw-items-center tw-w-full tw-max-w-[640px] tw-mb-16 tw-mt-4 tw-shadow tw-relative`}
+        >
+            <div className="tw-flex tw-flex-row tw-gap-6 tw-items-start tw-py-2">
+                <div className="tw-flex tw-flex-col tw-max-w-[360px] tw-gap-1">
+                    <h3>Get Sourcegraph for your favorite editor</h3>
+                    <p className="tw-leading-tight">
+                        Download the extension to get the power of Sourcegraph right where you code
+                    </p>
+                </div>
+            </div>
+            <div className="tw-flex tw-gap-8 tw-mx-4">
+                <div className="tw-flex tw-gap-8">
+                    <img
+                        alt="VS Code"
+                        src="https://storage.googleapis.com/sourcegraph-assets/ideIcons/ideIconVsCode.svg"
+                        width="24"
+                        height="24"
+                    />
+                    <img
+                        alt="All JetBrains IDEs"
+                        src="https://storage.googleapis.com/sourcegraph-assets/ideIcons/ideIconJetBrains.svg"
+                        width="24"
+                        height="24"
+                    />
+                </div>
+                <a
+                    href="https://sourcegraph.com/docs/cody"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styles.downloadButton}
+                >
+                    Download
+                </a>
+                <button
+                    className="tw-text-muted-foreground hover:tw-text-foreground"
+                    onClick={handleDismiss}
+                    aria-label="Close banner"
+                    type="button"
+                >
+                    ✕
+                </button>
+            </div>
+        </div>
+    )
+}
diff --git a/vscode/webviews/components/codeSnippet/CodeSnippet.module.css b/vscode/webviews/components/codeSnippet/CodeSnippet.module.css
@@ -47,6 +47,7 @@
 
 .result {
     border-bottom: solid 1px var(--cody-chat-code-border-color);
+    background-color: var(--vscode-editor-background);
 
     code {
         padding: 0 !important;

diff --git a/vscode/webviews/components/codeSnippet/CodeSnippet.tsx b/vscode/webviews/components/codeSnippet/CodeSnippet.tsx
@@ -337,7 +337,7 @@ const ResultContainer: ForwardReferenceExoticComponent<
                 <header
                     className={clsx(
                         styles.header,
-                        'tw-flex tw-pt-4 tw-items-center tw-gap-2 tw-py-2 tw-px-4 md:tw-py-3 md:tw-px-6 '
+                        'tw-flex tw-py-2 tw-px-4 tw-items-center tw-gap-2 md:tw-py-3 md:tw-px-6 '
                     )}
                     data-result-header={true}
                 >