fix(svelte): Update cody web (#63710)

This commit updates cody web, making similar changes as
[ed493c9](ed493c9dd1)
and a81d5e7. I wasn't quite sure about some styles, but I left comments
on the respective PRs and tried to at match the styling.

Most importantly this also fixes cody web in the Svelte app which
currently appears to be broken. I'd like to get this in as quickly as
possible (hence stampers), styles can always be tweaked later.

Additional changes:

- Fixed layout (chat container was overflowing).
- Set font family and size to the same we use in the Svelte app for
consistency.


## Test plan

Manual testing.

client/web-sveltekit/package.json

@@ -92,7 +92,7 @@
     "@sourcegraph/wildcard": "workspace:*",
     "@storybook/test": "^8.0.5",
     "@urql/core": "^4.2.3",
-    "cody-web-experimental": "^0.1.4",
+    "cody-web-experimental": "^0.2.1",
     "copy-to-clipboard": "^3.3.1",
     "fzf": "^0.5.2",
     "highlight.js": "^10.0.0",

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

@@ -65,9 +65,16 @@
         --vscode-inputOption-activeBackground: var(--search-input-token-filter);
         --vscode-inputOption-activeForeground: var(--body-color);
         --vscode-loading-dot-color: var(--body-color);
+        --vscode-textPreformat-foreground: var(--body-color);
+        --vscode-textPreformat-background: var(--secondary);
+        --vscode-sideBarSectionHeader-border: var(--border-color);
+        --vscode-editor-font-family: var(--code-font-family);
+        --vscode-editor-font-size: var(--code-font-size);
         --mention-color-opacity: 100%;
 
-        height: 100%;
+        line-height: 1.55;
+        flex: 1;
+        min-height: 0;
 
         :global(h3) {
             font-size: inherit;
@@ -81,6 +88,44 @@
         :global(a) {
             color: var(--link-color) !important;
         }
+
+        :global(code) {
+            padding: 1px 3px;
+            border-radius: 0.25rem;
+            color: var(--vscode-textPreformat-foreground);
+            background-color: var(--vscode-textPreformat-background);
+        }
+
+        :global(pre) {
+            // Controls cody snippets (i.e. 'pre code' blocks)
+            --code-foreground: var(--body-color);
+            --code-background: transparent;
+
+            border-top-right-radius: 2px;
+            border-top-left-radius: 2px;
+
+            :global(code) {
+                // Overwrite the code styles set above
+                padding: initial;
+                background-color: inherit;
+            }
+        }
+
+        // Sourcegraph styles already add [hidden] display none
+        // and this breaks chat animation since there is no starting point
+        // with display:none element. Override this logic back to visibility: hidden;
+        // so chat animation would work again.
+        :global([hidden]) {
+            visibility: hidden;
+            display: block !important;
+        }
+
+        // Target all possible animated elements (radix accordions)
+        // and disable animation since there are flashes with exit
+        // animations.
+        :global(.tw-transition-all) {
+            animation: none !important;
+        }
     }
 
     :global([data-floating-ui-portal]) {
@@ -89,5 +134,8 @@
         --vscode-list-activeSelectionBackground: var(--primary);
         --vscode-foreground: var(--body-color);
         --vscode-widget-shadow: rgba(36, 41, 54, 0.2);
+        // Turn off background color for picker popover element
+        // Which causes glitch effect in Cody Web
+        --vscode-sideBar-background: transparent;
     }
 </style>

pnpm-lock.yaml

@@ -1594,8 +1594,8 @@ importers:
         specifier: ^4.2.3
         version: 4.2.3(graphql@15.4.0)
       cody-web-experimental:
-        specifier: ^0.1.4
-        version: 0.1.4
+        specifier: ^0.2.1
+        version: 0.2.1
       copy-to-clipboard:
         specifier: ^3.3.1
         version: 3.3.1
@@ -14545,10 +14545,6 @@ packages:
     resolution: {integrity: sha512-19Jox5sAKpusTDgqgKB5dawPpQcY+ipQK7xoEI+MVucEF9qqFaXpeqY1KaoyGBso/wHQoDa4HMMxMjdsS3Zzzw==}
     dev: false
 
-  /cody-web-experimental@0.1.4:
-    resolution: {integrity: sha512-5WE+ZWfbNhXJxvJeCFfyJPHNaPZKEdJAGoFa7sSXoxdeUEN62YGIs5DmpCOEmSCzX0cQm+35GWRWoV28HI/0jg==}
-    dev: false
-
   /cody-web-experimental@0.2.1:
     resolution: {integrity: sha512-ci7wRIOaxpD+xZ5ecR0IYeJhxAai4meIUNVGXzjUATYiRx3+755kWtrWRbvPGhmE+2jF1KB2DKKd+pyGKmfbdg==}
     dev: false