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.
2026-02-06 12:51:55 +00:00 · 2024-08-07 09:23:25 -04:00 · 2024-08-07 09:23:25 -04:00 · f7d4517dbc
commit f7d4517dbc
parent ebaab129ee
7 changed files with 49 additions and 88 deletions
--- a/client/web-sveltekit/package.json
+++ b/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:*",
--- a/client/web-sveltekit/src/lib/cody/CodySidebarChat.svelte
+++ b/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]) {
--- a/client/web/src/cody/chat/new-chat/NewCodyChatPage.module.scss
+++ b/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;
+    }
 }
--- a/client/web/src/cody/chat/new-chat/components/chat-ui/ChatUI.module.scss
+++ b/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;
+}
--- a/client/web/src/cody/sidebar/new-cody-sidebar/NewCodySidebarWebChat.tsx
+++ b/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>
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -146,8 +146,8 @@ importers:
        specifier: ^7.8.1
        version: 7.8.1
      '@sourcegraph/cody-web':
-        specifier: ^0.3.7
-        version: 0.3.7
+        specifier: ^0.4.0
+        version: 0.4.0
      '@sourcegraph/extension-api-classes':
        specifier: ^1.1.0
        version: 1.1.0(sourcegraph@client+extension-api)
@ -1576,8 +1576,8 @@ importers:
        specifier: workspace:*
        version: link:../client-api
      '@sourcegraph/cody-web':
-        specifier: ^0.3.7
-        version: 0.3.7
+        specifier: ^0.4.0
+        version: 0.4.0
      '@sourcegraph/common':
        specifier: workspace:*
        version: link:../common
@ -9720,8 +9720,8 @@ packages:
    resolution: {integrity: sha512-Uf7wMo5Fu3+g03gl2jvU2qHMaDp0p9RK9U2ucmy6VxWaavxALCC8iy47JL5GdgR5qG3ekEd5mAQV0dIIfoKELA==}
    dev: true

-  /@sourcegraph/cody-web@0.3.7:
-    resolution: {integrity: sha512-Y0Ld/Qla4bUK0XSCx7uibMT5K1lbIhP8JvuvTOAgISahMWpOpzzLdBLFlrBfEopxL5CG4rjgj2GHVjPwt+UD8w==}
+  /@sourcegraph/cody-web@0.4.0:
+    resolution: {integrity: sha512-lEwDrFQ6JSUxmoWeatHpsW/6bQOvJVoJVxlAbXxPcK7qq/0fE1DBi65gTJvdGfe43z+3JaUQgITZvrI8zfR06Q==}
    dev: false

  /@sourcegraph/eslint-config@0.37.1(@testing-library/dom@8.13.0)(eslint@8.57.0)(typescript@5.4.2):