feat(chat): add WelcomeNotice component to WelcomeMessage

vscode/webviews/Chat.tsx

@@ -36,6 +36,7 @@ interface ChatboxProps {
     setView: (view: View) => void
     smartApplyEnabled?: boolean
     isPromptsV2Enabled?: boolean
+    isTeamsUpgradeCtaEnabled?: boolean
 }
 
 export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>> = ({
@@ -51,6 +52,7 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
     setView,
     smartApplyEnabled,
     isPromptsV2Enabled,
+    isTeamsUpgradeCtaEnabled,
 }) => {
     const telemetryRecorder = useTelemetryRecorder()
 
@@ -256,6 +258,7 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
                         IDE={userInfo.IDE}
                         setView={setView}
                         isPromptsV2Enabled={isPromptsV2Enabled}
+                        isTeamsUpgradeCtaEnabled={isTeamsUpgradeCtaEnabled}
                     />
                     <WelcomeFooter IDE={userInfo.IDE} />
                 </>

vscode/webviews/CodyPanel.tsx

@@ -138,6 +138,7 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
                             smartApplyEnabled={smartApplyEnabled}
                             isPromptsV2Enabled={isPromptsV2Enabled}
                             setView={setView}
+                            isTeamsUpgradeCtaEnabled={isTeamsUpgradeCtaEnabled}
                         />
                     )}
                     {view === View.History && (

vscode/webviews/chat/components/WelcomeMessage.tsx

@@ -9,19 +9,22 @@ import { PromptMigrationWidget } from './../../components/promptsMigration/Promp
 
 import { clsx } from 'clsx'
 import styles from './WelcomeMessage.module.css'
+import { WelcomeNotice } from './WelcomeNotice'
 
 const localStorageKey = 'chat.welcome-message-dismissed'
 
 interface WelcomeMessageProps {
     setView: (view: View) => void
     IDE: CodyIDE
     isPromptsV2Enabled?: boolean
+    isTeamsUpgradeCtaEnabled?: boolean
 }
 
 export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({
     setView,
     IDE,
     isPromptsV2Enabled,
+    isTeamsUpgradeCtaEnabled,
 }) => {
     // Remove the old welcome message dismissal key that is no longer used.
     localStorage.removeItem(localStorageKey)
@@ -32,7 +35,7 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({
     }
 
     return (
-        <div className="tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-8 tw-gap-6 tw-transition-all">
+        <div className="tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-8 tw-gap-6 tw-transition-all tw-relative">
             {isPromptsV2Enabled && IDE !== CodyIDE.Web && (
                 <PromptMigrationWidget dismissible={true} className="tw-w-full" />
             )}
@@ -48,7 +51,11 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({
                     telemetryLocation="WelcomeAreaPrompts"
                     onSelect={item => runAction(item, setView)}
                 />
-
+                {isTeamsUpgradeCtaEnabled && (
+                    <div className="tw-absolute tw-bottom-0 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-w-[95%] tw-z-2">
+                        <WelcomeNotice />
+                    </div>
+                )}
                 <div className={clsx(styles.actions, 'tw-flex tw-py-2 tw-gap-8 tw-justify-center')}>
                     <Button
                         variant="ghost"

vscode/webviews/chat/components/WelcomeNotice.tsx

@@ -0,0 +1,68 @@
+import { XIcon } from 'lucide-react'
+import { useCallback } from 'react'
+import { useLocalStorage } from '../../components/hooks'
+import { Badge } from '../../components/shadcn/ui/badge'
+import { Button } from '../../components/shadcn/ui/button'
+import graphDarkCTA from '../../graph_dark.svg'
+import graphLightCTA from '../../graph_light.svg'
+import { SourcegraphLogo } from '../../icons/SourcegraphLogo'
+import { useTelemetryRecorder } from '../../utils/telemetry'
+
+const WORKSPACES_URL = 'https://workspaces.sourcegraph.com'
+// TODO: Update to live link https://linear.app/sourcegraph/issue/CORE-535/
+const DOCS_URL = 'https://docs.sourcegraph.com'
+
+export function WelcomeNotice() {
+    const [dismissed, setDismissed] = useLocalStorage('sg_welcome_notice_00', 0)
+    if (dismissed) {
+        return null
+    }
+    const telemetryRecorder = useTelemetryRecorder()
+    const dismissNotice = useCallback(() => {
+        setDismissed(1)
+        telemetryRecorder.recordEvent('cody.notice.cta', 'clicked')
+    }, [telemetryRecorder, setDismissed])
+
+    return (
+        <div className="tw-w-full tw-relative tw-shadow-xl tw-bg-muted tw-border tw-border-input-border tw-p-8 tw-h-full tw-overflow-hidden tw-rounded-2xl tw-flex tw-flex-col tw-justify-end tw-items-start tw-gap-4">
+            <div className="tw-flex tw-mb-2">
+                <SourcegraphLogo width={22} height={22} />
+                <Badge className="tw-ml-3 tw-text-sm">Enterprise Starter</Badge>
+            </div>
+            <h1 className="tw-font-bold tw-text-2xl tw-my-2">Unlock the Sourcegraph platform</h1>
+            <p className="tw-text-muted-foreground tw-mb-2">
+                Get search, AI chat, autocompletes and inline edits for your entire team to find,
+                understand and fix code across all of your codebases.
+            </p>
+            <div id="welcome-notice-buttons" className="tw-flex tw-gap-4 tw-mb-4">
+                <Button variant="outline" className="tw-px-2">
+                    <a
+                        href={WORKSPACES_URL}
+                        className="tw-text-foreground hover:tw-text-foreground"
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                        Create a workspace
+                    </a>
+                </Button>
+                <Button type="button" variant="ghost" className="tw-px-2">
+                    <a href={DOCS_URL} className="" rel="noreferrer" target="_blank">
+                        Learn more
+                    </a>
+                </Button>
+            </div>
+            <img src={graphDarkCTA} alt="graph_dark" className="light:tw-hidden tw-w-full tw-m" />
+            <img src={graphLightCTA} alt="graph_light" className="dark:tw-hidden tw-w-full" />
+            <button
+                type="button"
+                className="tw-absolute tw-h-5 tw-w-5 tw-text-muted-foreground tw-top-6 tw-right-6"
+                onClick={dismissNotice}
+            >
+                <XIcon size={16} />
+            </button>
+        </div>
+    )
+}
+;<div className="tw-fixed tw-bottom-0 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-z-50 tw-mb-4">
+    <WelcomeNotice />
+</div>