feat(svelte): Add cody chat page (sourcegraph#64448)

Closes #srch-906 This commit adds the cody chat page to svelte. This is simply reusing the existing wrapper around the React component and renders it in a standalone page. When merged this will cause the cody chat page to be handled by new web app on dotcom by default. ## Test plan - Verified that chat loads and the tabs are clickable. - Verified that the scroll behavior works as in the React app. - Verified that the sidebar chat still works as expected (scroll behavior, default context loading/switching)
yonasBSD · Aug 13, 2024 · 34ff925 · 34ff925
1 parent f9f3cd8
commit 34ff925
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 7 deletions.
diff --git a/...tekit/src/lib/cody/CodySidebarChat.svelte → ...eb-sveltekit/src/lib/cody/CodyChat.svelte b/...tekit/src/lib/cody/CodySidebarChat.svelte → ...eb-sveltekit/src/lib/cody/CodyChat.svelte
@@ -21,8 +21,8 @@ function getTelemetrySourceClient(): string {
 
     import type { LineOrPositionOrRange } from '@sourcegraph/common'
 
-    export let repository: CodySidebar_ResolvedRevision
-    export let filePath: string
+    export let repository: CodySidebar_ResolvedRevision | undefined = undefined
+    export let filePath: string | undefined = undefined
     export let lineOrPosition: LineOrPositionOrRange | undefined = undefined
 
     let container: HTMLDivElement
@@ -38,8 +38,8 @@ function getTelemetrySourceClient(): string {
     })
 
     function render(
-        repository: CodySidebar_ResolvedRevision,
-        filePath: string,
+        repository?: CodySidebar_ResolvedRevision,
+        filePath?: string,
         lineOrPosition?: LineOrPositionOrRange
     ) {
         if (!root) {
@@ -54,7 +54,7 @@ function getTelemetrySourceClient(): string {
             {
                 accessToken: '',
                 initialContext: {
-                    repositories: [repository],
+                    repositories: repository ? [repository] : [],
                     fileURL: filePath ? (!filePath.startsWith('/') ? `/${filePath}` : filePath) : undefined,
                     // Line range - 1 because of Cody Web initial context file range bug
                     fileRange: hasFileRangeSelection
@@ -108,7 +108,6 @@ function getTelemetrySourceClient(): string {
         --vscode-keybindingLabel-foreground: var(--body-color);
 
         line-height: 1.55;
-        padding-bottom: 2rem;
         flex: 1;
         min-height: 0;
 
@@ -249,4 +248,14 @@ function getTelemetrySourceClient(): string {
             --vscode-list-activeSelectionBackground: #031824;
         }
     }
+
+    :global([data-cody-web-chat]) {
+        height: 100%;
+        overflow: auto;
+        background-color: var(--vscode-editor-background);
+        font-size: var(--vscode-font-size);
+        font-family: var(--vscode-font-family);
+        color: var(--vscode-editor-foreground);
+        padding-bottom: 2rem;
+    }
 </style>
diff --git a/client/web-sveltekit/src/lib/cody/CodySidebar.svelte b/client/web-sveltekit/src/lib/cody/CodySidebar.svelte
@@ -44,7 +44,7 @@ export const CODY_SIDEBAR_ID = uniqueID("cody-sidebar");
         </Tooltip>
     </div>
     {#if $user}
-        {#await import('./CodySidebarChat.svelte')}
+        {#await import('./CodyChat.svelte')}
             <LoadingSpinner />
         {:then module}
             <svelte:component this={module.default} {repository} {filePath} {lineOrPosition} />

diff --git a/client/web-sveltekit/src/lib/routes.ts b/client/web-sveltekit/src/lib/routes.ts
@@ -66,6 +66,11 @@ export const svelteKitRoutes: SvelteKitRoute[] = [
         pattern: new RegExp('^/(backstage|chakraui|cncf|julia|kubernetes|o3de|stackstorm|stanford|temporal)/?$'),
         isRepoRoot: false,
     },
+    {
+        id: '/cody/chat',
+        pattern: new RegExp('^/cody/chat/?$'),
+        isRepoRoot: false,
+    },
     {
         id: '/search',
         pattern: new RegExp('^/search/?$'),

diff --git a/client/web-sveltekit/src/routes/cody/chat/+page.svelte b/client/web-sveltekit/src/routes/cody/chat/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    // @sg EnableRollout
+    import Icon from '$lib/Icon.svelte'
+    import LoadingSpinner from '$lib/LoadingSpinner.svelte'
+    import { Alert, Button } from '$lib/wildcard'
+    import ProductStatusBadge from '$lib/wildcard/ProductStatusBadge.svelte'
+
+    import type { PageData } from './$types'
+
+    export let data: PageData
+</script>
+
+<svelte:head>
+    <title>Cody Chat - Sourcegraph</title>
+</svelte:head>
+
+<section>
+    <header>
+        <h2>
+            <Icon icon={ISgCody} aria-hidden --icon-color="initial" />
+            <span>Cody Chat</span>
+            <ProductStatusBadge status="beta" />
+        </h2>
+
+        <div class="actions">
+            <a href={data.dashboardRoute}>Editor extensions</a>
+            &nbsp;
+            <Button variant="secondary">
+                <a slot="custom" let:buttonClass class={buttonClass} href={data.dashboardRoute}> Dashboard </a>
+            </Button>
+        </div>
+    </header>
+
+    {#await import('$lib/cody/CodyChat.svelte')}
+        <LoadingSpinner center />
+    {:then module}
+        <svelte:component this={module.default} />
+    {:catch}
+        <Alert variant="warning">Failed to load Cody Chat</Alert>
+    {/await}
+</section>
+
+<style lang="scss">
+    section {
+        max-width: var(--viewport-lg);
+        width: 100%;
+        margin: 2rem auto 0 auto;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    header {
+        display: flex;
+        justify-content: space-between;
+
+        margin-bottom: 1rem;
+    }
+
+    h2 > * {
+        vertical-align: middle;
+    }
+</style>
diff --git a/client/web-sveltekit/src/routes/cody/chat/+page.ts b/client/web-sveltekit/src/routes/cody/chat/+page.ts
@@ -0,0 +1,20 @@
+import { redirect } from '@sveltejs/kit'
+
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ parent }) => {
+    const dashboardRoute = window.context.sourcegraphDotComMode ? '/cody/manage' : '/cody/dashboard'
+    const data = await parent()
+
+    if (!data.user) {
+        redirect(302, '/sign-in')
+    }
+
+    if (!window.context?.codyEnabledForCurrentUser) {
+        redirect(303, dashboardRoute)
+    }
+
+    return {
+        dashboardRoute,
+    }
+}
diff --git a/client/web/src/sveltekit/routes.ts b/client/web/src/sveltekit/routes.ts
@@ -66,6 +66,11 @@ export const svelteKitRoutes: SvelteKitRoute[] = [
         pattern: new RegExp('^/(backstage|chakraui|cncf|julia|kubernetes|o3de|stackstorm|stanford|temporal)/?$'),
         isRepoRoot: false,
     },
+    {
+        id: '/cody/chat',
+        pattern: new RegExp('^/cody/chat/?$'),
+        isRepoRoot: false,
+    },
     {
         id: '/search',
         pattern: new RegExp('^/search/?$'),

diff --git a/cmd/frontend/internal/app/ui/sveltekit/routes.go b/cmd/frontend/internal/app/ui/sveltekit/routes.go
@@ -73,6 +73,11 @@ var svelteKitRoutes = []svelteKitRoute{
 		Pattern: regexp.MustCompile("^/(backstage|chakraui|cncf|julia|kubernetes|o3de|stackstorm|stanford|temporal)/?$"),
 		Tag:     tags.EnableOptIn | tags.EnableRollout | tags.Dotcom,
 	},
+	{
+		Id:      "/cody/chat",
+		Pattern: regexp.MustCompile("^/cody/chat/?$"),
+		Tag:     tags.EnableOptIn | tags.EnableRollout,
+	},
 	{
 		Id:      "/search",
 		Pattern: regexp.MustCompile("^/search/?$"),