upgrade Cody Web, always create a new chat (#64334)

Incorporates https://github.com/sourcegraph/cody/pull/5129

## Test plan

Run in SvelteKit and non-SvelteKit. Ensure that the Cody standalone chat
and Cody sidebar chats work.

Author: sqs

client/web-sveltekit/package.json

@@ -80,7 +80,7 @@
     "@sentry/sveltekit": "^8.7.0",
     "@sourcegraph/branded": "workspace:*",
     "@sourcegraph/client-api": "workspace:*",
-    "@sourcegraph/cody-web": "^0.3.7",
+    "@sourcegraph/cody-web": "^0.4.0",
     "@sourcegraph/common": "workspace:*",
     "@sourcegraph/http-client": "workspace:*",
     "@sourcegraph/shared": "workspace:*",

client/web-sveltekit/src/lib/cody/CodySidebarChat.svelte

@@ -1,31 +1,30 @@
 <script context="module" lang="ts">
-function getTelemetrySourceClient(): string {
-	if (window.context?.sourcegraphDotComMode) {
-		return "dotcom.web";
-	}
-	return "server.web";
-}
+    function getTelemetrySourceClient(): string {
+        if (window.context?.sourcegraphDotComMode) {
+            return 'dotcom.web'
+        }
+        return 'server.web'
+    }
 </script>
 
 <script lang="ts">
     import { createElement } from 'react'
 
-    import { CodyWebPanel, CodyWebPanelProvider } from '@sourcegraph/cody-web'
     import { createRoot, type Root } from 'react-dom/client'
     import { onDestroy } from 'svelte'
 
+    import { CodyWebPanel, CodyWebPanelProvider } from '@sourcegraph/cody-web'
+
     import type { CodySidebar_ResolvedRevision } from './CodySidebar.gql'
 
     import '@sourcegraph/cody-web/dist/style.css'
 
-    import { createLocalWritable } from '$lib/stores'
-    import type { LineOrPositionOrRange } from '@sourcegraph/common';
+    import type { LineOrPositionOrRange } from '@sourcegraph/common'
 
     export let repository: CodySidebar_ResolvedRevision
     export let filePath: string
     export let lineOrPosition: LineOrPositionOrRange | undefined = undefined
 
-    const chatIDs = createLocalWritable<Record<string, string>>('cody.context-to-chat-ids', {})
     let container: HTMLDivElement
     let root: Root | null
 
@@ -38,7 +37,11 @@ function getTelemetrySourceClient(): string {
         root = null
     })
 
-    function render(repository: CodySidebar_ResolvedRevision, filePath: string, lineOrPosition?: LineOrPositionOrRange) {
+    function render(
+        repository: CodySidebar_ResolvedRevision,
+        filePath: string,
+        lineOrPosition?: LineOrPositionOrRange
+    ) {
         if (!root) {
             root = createRoot(container)
         }
@@ -50,25 +53,20 @@ function getTelemetrySourceClient(): string {
             CodyWebPanelProvider,
             {
                 accessToken: '',
-                chatID: $chatIDs[`${repository.id}-${filePath}`] ?? null,
                 initialContext: {
                     repositories: [repository],
                     fileURL: filePath ? (!filePath.startsWith('/') ? `/${filePath}` : filePath) : undefined,
                     // Line range - 1 because of Cody Web initial context file range bug
-                    fileRange: hasFileRangeSelection ? {
-                        startLine: lineOrPosition.line - 1,
-                        endLine: lineOrPosition.endLine ? lineOrPosition.endLine - 1 : lineOrPosition.line - 1
-                    } : undefined
+                    fileRange: hasFileRangeSelection
+                        ? {
+                              startLine: lineOrPosition.line - 1,
+                              endLine: lineOrPosition.endLine ? lineOrPosition.endLine - 1 : lineOrPosition.line - 1,
+                          }
+                        : undefined,
                 },
                 serverEndpoint: window.location.origin,
                 customHeaders: window.context.xhrHeaders,
                 telemetryClientName: getTelemetrySourceClient(),
-                onNewChatCreated: (chatID: string) => {
-                    chatIDs.update(ids => {
-                        ids[`${repository.id}-${filePath}`] = chatID
-                        return ids
-                    })
-                },
             },
             [chat]
         )
@@ -80,7 +78,7 @@ function getTelemetrySourceClient(): string {
 
 <style lang="scss">
     .chat {
-        --vscode-sideBar-background: transparent;
+        --vscode-sideBar-background: var(--body-bg);
         --vscode-editor-background: var(--body-bg);
         --vscode-editor-foreground: var(--body-color);
         --vscode-input-background: var(--input-bg);
@@ -104,10 +102,12 @@ function getTelemetrySourceClient(): string {
         --vscode-foreground: var(--body-color);
 
         line-height: 1.55;
+        padding-bottom: 2rem;
         flex: 1;
         min-height: 0;
 
-        :global(h3) {
+        :global(h3),
+        :global(h4) {
             font-size: inherit;
             margin: 0;
         }
@@ -116,10 +116,6 @@ function getTelemetrySourceClient(): string {
             margin: 0;
         }
 
-        :global(a) {
-            color: var(--link-color) !important;
-        }
-
         :global(code) {
             padding: 1px 3px;
             border-radius: 0.25rem;
@@ -157,6 +153,10 @@ function getTelemetrySourceClient(): string {
         :global(.tw-transition-all) {
             animation: none !important;
         }
+
+        :global([cmdk-root] input:focus-visible) {
+            box-shadow: unset !important;
+        }
     }
 
     :global([data-floating-ui-portal]) {

client/web/src/cody/chat/new-chat/NewCodyChatPage.module.scss

@@ -3,20 +3,8 @@
 .root {
     display: flex;
     flex-direction: column;
-    // stylelint-disable-next-line property-no-unknown
-    container-type: inline-size;
     padding-bottom: 0 !important;
-
-    @media (--sm-breakpoint-down) {
-        // These need to be !important to override the `py-4`
-        // default padding on the page
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-
-        .page-header {
-            display: none;
-        }
-    }
+    width: 100%;
 }
 
 .page-header {
@@ -28,18 +16,11 @@
     display: flex;
     flex-grow: 1;
     overflow: hidden;
-    border-top: 1px solid var(--border-color);
-}
-
-.chat-history {
-    width: 30%;
-    flex-shrink: 0;
-    overflow: auto;
-    padding-top: 0.5rem;
 }
 
 .chat {
     flex-grow: 1;
-    height: 100%;
-    border-left: 1px solid var(--border-color);
+    [role='tabpanel'] {
+        overflow: auto;
+    }
 }

client/web/src/cody/chat/new-chat/components/chat-ui/ChatUI.module.scss

@@ -1,11 +1,5 @@
 // stylelint-disable custom-property-pattern
 
-:root {
-    // Turn off background color for picker popover element
-    // Which causes glitch effect in Cody Web
-    --vscode-sideBar-background: transparent;
-}
-
 .chat {
     --vscode-editor-background: var(--body-bg);
     --vscode-editor-foreground: var(--body-color);
@@ -18,6 +12,7 @@
     --vscode-loading-dot-color: var(--body-color);
     --vscode-textPreformat-foreground: var(--body-color);
     --vscode-textPreformat-background: var(--secondary);
+    --vscode-sideBar-background: var(--body-bg);
     --vscode-sideBarSectionHeader-border: var(--border-color);
     --mention-color-opacity: 100%;
 
@@ -28,8 +23,10 @@
     --vscode-foreground: var(--body-color);
 
     line-height: 1.55;
+    padding-bottom: 2rem;
 
-    h3 {
+    h3,
+    h4 {
         font-size: inherit;
         margin: 0;
     }
@@ -38,10 +35,6 @@
         margin: 0;
     }
 
-    a {
-        color: var(--link-color) !important;
-    }
-
     code {
         // stylelint-disable-next-line declaration-property-unit-allowed-list
         padding: 1px 3px;
@@ -79,3 +72,7 @@
     --vscode-foreground: var(--body-color);
     --vscode-widget-shadow: rgba(36, 41, 54, 0.2);
 }
+
+[cmdk-root] :global(.focus-visible) {
+    box-shadow: unset !important;
+}

client/web/src/cody/sidebar/new-cody-sidebar/NewCodySidebarWebChat.tsx

@@ -1,10 +1,9 @@
-import { type FC, memo, useCallback, useMemo } from 'react'
+import { type FC, memo, useMemo } from 'react'
 
 import { useLocation } from 'react-router-dom'
 
 import { CodyWebPanelProvider, type InitialContext } from '@sourcegraph/cody-web'
 import { SourcegraphURL } from '@sourcegraph/common'
-import { useLocalStorage } from '@sourcegraph/wildcard'
 
 import { getTelemetrySourceClient } from '../../../telemetry'
 import { ChatUi } from '../../chat/new-chat/components/chat-ui/ChatUi'
@@ -23,18 +22,6 @@ export const NewCodySidebarWebChat: FC<NewCodySidebarWebChatProps> = memo(functi
     const { filePath, repository } = props
 
     const location = useLocation()
-    const [contextToChatIds, setContextToChatIds] = useLocalStorage<Record<string, string>>(
-        'cody.context-to-chat-ids',
-        {}
-    )
-
-    const handleNewChatCreated = useCallback(
-        (chatId: string): void => {
-            contextToChatIds[`${repository.id}-${filePath}`] = chatId
-            setContextToChatIds(contextToChatIds)
-        },
-        [contextToChatIds, setContextToChatIds, filePath, repository.id]
-    )
 
     const contextInfo = useMemo<InitialContext>(() => {
         const lineOrPosition = SourcegraphURL.from(location).lineRange
@@ -53,17 +40,13 @@ export const NewCodySidebarWebChat: FC<NewCodySidebarWebChatProps> = memo(functi
         }
     }, [repository, filePath, location])
 
-    const chatID = contextToChatIds[`${repository.id}-${filePath}`] ?? null
-
     return (
         <CodyWebPanelProvider
             accessToken=""
-            chatID={chatID}
             initialContext={contextInfo}
             serverEndpoint={window.location.origin}
             customHeaders={window.context.xhrHeaders}
             telemetryClientName={getTelemetrySourceClient()}
-            onNewChatCreated={handleNewChatCreated}
         >
             <ChatUi />
         </CodyWebPanelProvider>

package.json

@@ -309,7 +309,7 @@
     "@reach/visually-hidden": "^0.16.0",
     "@react-aria/live-announcer": "^3.1.0",
     "@sentry/browser": "^7.8.1",
-    "@sourcegraph/cody-web": "^0.3.7",
+    "@sourcegraph/cody-web": "^0.4.0",
     "@sourcegraph/extension-api-classes": "^1.1.0",
     "@stripe/react-stripe-js": "^2.7.0",
     "@stripe/stripe-js": "^3.3.0",