Chat: fix chat input focus issues (#5170)

- Update the chat transcript container styles to use `height: 100%` and `overflow: scroll` to properly handle overflow of chat messages - Adjust the padding and margin of the transcript container to improve the layout Fixes an issue where @-mentions would cause the focus to shift to the top chat input box due to the container overflow settings causing the reference to the bottom chat input box to be lost.
sourcegraph · Aug 11, 2024 · 1c846e5 · 1c846e5
1 parent 4f32537
commit 1c846e5
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 6 deletions.
diff --git a/vscode/CHANGELOG.md b/vscode/CHANGELOG.md
@@ -8,8 +8,13 @@ This is a log of all notable changes to Cody for VS Code. [Unreleased] changes a
 
 ### Fixed
 
+- Chat: Fixed an issue where @-mentions move focus to the chat input box at the top. [pull/5170](https://github.com/sourcegraph/cody/pull/5170)
+
 ### Changed
 
+- Chat: Improved how Cody associates code to existing files in chat responses. [pull/5038](https://github.com/sourcegraph/cody/pull/5038)
+- Chat: Added an experimental simpler code block UI, that can accomodate the "Smart Apply" button. [pull/5038](https://github.com/sourcegraph/cody/pull/5038)
+
 ## 1.30.2
 
 ### Added

diff --git a/vscode/webviews/App.module.css b/vscode/webviews/App.module.css
@@ -3,7 +3,8 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    min-height: 100%;
+    height: 100%;
+    overflow: hidden;
 }
 
 .error-container {

diff --git a/vscode/webviews/Chat.module.css b/vscode/webviews/Chat.module.css
@@ -2,6 +2,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    overflow: scroll;
 }
 
 .chat-disabled {

diff --git a/vscode/webviews/chat/Transcript.tsx b/vscode/webviews/chat/Transcript.tsx
@@ -54,7 +54,7 @@ export const Transcript: FC<TranscriptProps> = props => {
     )
 
     return (
-        <div className="tw-px-8 tw-py-6 tw-pt-8 tw-mt-2 tw-flex tw-flex-col tw-gap-10">
+        <div className="tw-px-8 tw-pt-6 tw-pb-12 tw-flex tw-flex-col tw-gap-10">
             {interactions.map((interaction, i) => (
                 <TranscriptInteraction
                     // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>

diff --git a/vscode/webviews/prompts/PromptsTab.tsx b/vscode/webviews/prompts/PromptsTab.tsx
@@ -13,7 +13,7 @@ export const PromptsTab: React.FC<{
 }> = ({ setView }) => {
     const dispatchClientAction = useClientActionDispatcher()
     return (
-        <div className="tw-flex tw-flex-col tw-gap-8 tw-p-8">
+        <div className="tw-overflow-auto tw-flex tw-flex-col tw-gap-8 tw-p-8">
             <PromptListSuitedForNonPopover
                 onSelect={item => onPromptSelectInPanel(item, setView, dispatchClientAction)}
                 onSelectActionLabels={onPromptSelectInPanelActionLabels}

diff --git a/vscode/webviews/tabs/AccountTab.tsx b/vscode/webviews/tabs/AccountTab.tsx
@@ -45,7 +45,7 @@ export const AccountTab: React.FC<AccountTabProps> = ({ userInfo }) => {
     ]
 
     return (
-        <div className="tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-8 tw-py-6 tw-gap-6">
+        <div className="tw-overflow-auto tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-8 tw-py-6 tw-gap-6">
             <h2>Account</h2>
             <div className="tw-w-full tw-px-8 tw-py-4 tw-flex tw-flex-col tw-gap-4 tw-bg-popover tw-border tw-border-border tw-rounded-lg">
                 <div className="tw-flex tw-justify-between tw-w-full tw-border-b tw-border-border tw-shadow-lg tw-shadow-border-500/50 tw-p-4 tw-pb-6">

diff --git a/vscode/webviews/tabs/HistoryTab.tsx b/vscode/webviews/tabs/HistoryTab.tsx
@@ -38,7 +38,7 @@ export const HistoryTab: React.FC<HistoryTabProps> = ({ userHistory }) => {
     )
 
     return (
-        <div className="tw-flex tw-flex-col tw-gap-8 tw-px-8 tw-py-6">
+        <div className="tw-overflow-auto tw-px-8 tw-pt-6 tw-pb-12 tw-flex tw-flex-col tw-gap-10">
             {Array.from(chatByPeriod, ([period, chats]) => (
                 <CollapsiblePanel
                     key={period}

diff --git a/vscode/webviews/tabs/SettingsTab.tsx b/vscode/webviews/tabs/SettingsTab.tsx
@@ -13,7 +13,7 @@ export const SettingsTab: React.FC<SettingsTabProps> = ({ userInfo }) => {
     }
 
     return (
-        <div className="tw-flex tw-flex-col tw-gap-4 tw-px-8 tw-mt-4">
+        <div className="tw-overflow-auto tw-flex tw-flex-col tw-gap-4 tw-px-8 tw-mt-4">
             <Button
                 key="settings"
                 variant="secondary"