Svelte: add Cody upsell banner (#63167)

Fixes SRCH-492

client/web-sveltekit/src/lib/icons/Cody.svelte

@@ -1,14 +1,14 @@
-<svg width="24" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
         d="M13.9088 4C14.756 4 15.4429 4.69836 15.4429 5.55983V8.33286C15.4429 9.19433 14.756 9.89269 13.9088 9.89269C13.0615 9.89269 12.3747 9.19433 12.3747 8.33286V5.55983C12.3747 4.69836 13.0615 4 13.9088 4Z"
-        fill="#a6b6d9"
+        fill="var(--icon-fill-color, #ff5543)"
     />
     <path
         d="M4.19287 7.63942C4.19287 6.77795 4.87971 6.07959 5.72696 6.07959H8.45423C9.30148 6.07959 9.98832 6.77795 9.98832 7.63942C9.98832 8.50089 9.30148 9.19925 8.45423 9.19925H5.72696C4.87971 9.19925 4.19287 8.50089 4.19287 7.63942Z"
-        fill="#a6b6d9"
+        fill="var(--icon-fill-color, #a112ff)"
     />
     <path
         d="M17.5756 12.1801C18.1216 12.7075 18.1437 13.5851 17.625 14.1403L17.1423 14.6569C13.3654 18.6994 6.99777 18.5987 3.34628 14.4387C2.84481 13.8674 2.89377 12.9909 3.45565 12.481C4.01752 11.9711 4.87954 12.0209 5.38102 12.5922C7.97062 15.5424 12.4865 15.6139 15.1651 12.747L15.6477 12.2304C16.1664 11.6752 17.0296 11.6527 17.5756 12.1801Z"
-        fill="#a6b6d9"
+        fill="var(--icon-fill-color, #00cbec)"
     />
 </svg>

client/web-sveltekit/src/lib/navigation/MainNavigationLink.svelte

@@ -35,6 +35,7 @@
     }
 
     .icon {
+        --icon-fill-color: var(--header-icon-color);
         width: var(--icon-inline-size);
         height: var(--icon-inline-size);
         color: var(--header-icon-color);

client/web-sveltekit/src/routes/search/+page.svelte

@@ -41,5 +41,5 @@
         selectedFilters={data.queryFilters}
     />
 {:else}
-    <SearchHome {queryState} />
+    <SearchHome {queryState} codyHref={data.codyHref} />
 {/if}

client/web-sveltekit/src/routes/search/+page.ts

@@ -87,6 +87,8 @@ export const load: PageLoad = async ({ parent, url, depends }) => {
     const cachePolicy = getCachePolicyFromURL(url)
     const trace = url.searchParams.get('trace') ?? undefined
 
+    const codyHref = window.context.sourcegraphDotComMode ? 'https://sourcegraph.com/cody' : '/cody'
+
     if (hasQuery) {
         const parsedQuery = parseExtendedSearchURL(url)
         let {
@@ -139,6 +141,7 @@ export const load: PageLoad = async ({ parent, url, depends }) => {
         const searchStream = streamManager.search(parsedQuery, options, useClientCache)
 
         return {
+            codyHref,
             searchStream,
             queryFilters,
             queryFromURL: query,
@@ -152,6 +155,7 @@ export const load: PageLoad = async ({ parent, url, depends }) => {
         }
     }
     return {
+        codyHref,
         queryOptions: {
             query: '',
         },

client/web-sveltekit/src/routes/search/SearchHome.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
     import { setContext, onMount } from 'svelte'
 
-    import { SVELTE_LOGGER, SVELTE_TELEMETRY_EVENTS } from '$lib/telemetry'
-    import { TELEMETRY_V2_RECORDER } from '$lib/telemetry2'
     import { TELEMETRY_V2_SEARCH_SOURCE_TYPE } from '@sourcegraph/shared/src/search'
+
     import { logoLight, logoDark } from '$lib/images'
     import SearchInput from '$lib/search/input/SearchInput.svelte'
     import type { QueryStateStore, QueryState } from '$lib/search/state'
     import type { SearchPageContext } from '$lib/search/utils'
     import { isLightTheme } from '$lib/stores'
+    import { SVELTE_LOGGER, SVELTE_TELEMETRY_EVENTS } from '$lib/telemetry'
+    import { TELEMETRY_V2_RECORDER } from '$lib/telemetry2'
 
+    import CodyUpsellBanner from './cody-upsell/CodyUpsellBanner.svelte'
     import SearchHomeNotifications from './SearchHomeNotifications.svelte'
 
     export let queryState: QueryStateStore
+    export let codyHref: string = '/cody'
 
     setContext<SearchPageContext>('search-context', {
         setQuery(newQuery) {
@@ -44,6 +47,7 @@
             <SearchInput {queryState} autoFocus onSubmit={handleSubmit} />
             <SearchHomeNotifications />
         </div>
+        <CodyUpsellBanner {codyHref} />
     </div>
 </section>
 
@@ -58,8 +62,10 @@
     }
 
     div.content {
+        margin-top: 6rem;
         flex-shrink: 0;
         display: flex;
+        gap: 3rem;
         flex-direction: column;
         align-items: center;
         width: 100%;
@@ -75,13 +81,12 @@
         display: flex;
         flex-direction: column;
         gap: 2rem;
+        z-index: 1;
     }
 
     img.logo {
         width: 20rem;
-        margin-top: 6rem;
         max-width: 90%;
         min-height: 54px;
-        margin-bottom: 3rem;
     }
 </style>

client/web-sveltekit/src/routes/search/cody-upsell/CodyUpsellBanner.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import CodyIcon from '$lib/icons/Cody.svelte'
+
+    import MultiLineCompletion from './MultiLineCompletion.svelte'
+
+    export let codyHref = '/cody'
+</script>
+
+<section>
+    <div class="meta">
+        <div class="logo"><CodyIcon /></div>
+        <h2 class="title">Introducing Cody: your new AI coding assistant.</h2>
+        <p class="description">
+            Cody autocompletes single lines, or entire code blocks, in any programming language, keeping all of your
+            company’s codebase in mind.
+        </p>
+        <a href={codyHref}>Explore Cody</a>
+    </div>
+    <div class="image"><MultiLineCompletion /></div>
+</section>
+
+<style lang="scss">
+    section {
+        isolation: isolate;
+        padding: 1.75rem 2.5rem;
+        display: grid;
+        grid-template-columns: 1fr 1.5fr;
+        gap: 1rem;
+
+        @media (--sm-breakpoint-down) {
+            grid-template-columns: 1fr;
+        }
+
+        .meta {
+            align-self: center;
+
+            .logo {
+                width: 2.5rem;
+                height: 2.5rem;
+                margin-bottom: 1rem;
+            }
+
+            .title {
+                font-size: 1.5rem;
+                font-weight: 500;
+                margin-bottom: 0.75rem;
+            }
+
+            .description {
+                margin-bottom: 1.25rem;
+            }
+        }
+
+        .image {
+            filter: drop-shadow(-7px -16px 32px #a112ff24);
+            width: 100%;
+        }
+    }
+</style>