refactor: update submit and stop buttons (#1782)

Updated submit button and stop button to match the design in figma <img width="1582" alt="image" src="https://github.com/sourcegraph/cody/assets/68532117/1d5b8b4e-1541-4b8c-b517-9938632da05a"> #### Message in Progress The Submit button will become the Stop button <img width="1584" alt="image" src="https://github.com/sourcegraph/cody/assets/68532117/a2d1335d-bede-4421-b52a-98d728e90edd"> ## Test plan  - Send a message - Stop a message - Enable and disiable enhance context ### Demo https://github.com/sourcegraph/cody/assets/68532117/e44d8469-124e-4f39-b6aa-4f9a0aa85678 ### On different color theme <img width="1090" alt="image" src="https://github.com/sourcegraph/cody/assets/68532117/ceb9e304-f091-49b6-a4c1-d62b9beac93e"> <img width="1099" alt="image" src="https://github.com/sourcegraph/cody/assets/68532117/df019930-9ac0-429c-8e93-07753d2f30d6"> <img width="1093" alt="image" src="https://github.com/sourcegraph/cody/assets/68532117/75e5400b-83cd-4960-b650-35fe5c71f6da"> <img width="1085" alt="image" src="https://github.com/sourcegraph/cody/assets/68532117/92dba655-fd1e-49ac-8b5e-7c20c7effdb4"> <img width="1097" alt="image" src="https://github.com/sourcegraph/cody/assets/68532117/a2b28ace-707e-4481-b905-d5c47a72c30b">
sourcegraph · Nov 17, 2023 · 70f1f0c · 70f1f0c
1 parent 19101ca
commit 70f1f0c
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 75 deletions.
diff --git a/lib/ui/src/Chat.module.css b/lib/ui/src/Chat.module.css
@@ -17,6 +17,13 @@
 }
 
 .text-area-container {
+    width: 100%;
+    display: flex;
+}
+
+.chat-input-container {
+    width: 96%;
+    height: 100%;
     position: relative;
 }
 
@@ -27,26 +34,20 @@
 }
 
 .submit-button {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    fill: currentColor;
     opacity: 0.8;
-    margin: 0 0 0.2rem 0;
-    background: none;
     border: none;
     cursor: pointer;
-    height: 2rem;
-    width: 2rem;
+    border-radius: 50%;
+    margin-left: 0.5rem;
 }
 
 .context-button {
-    color: var(--foreground);
+    color: var(--button-primary-background);
     position: absolute;
-    right: 1rem;
+    right: 0;
     bottom: 0;
+
     fill: currentColor;
-    margin: 0rem 0.2rem 0rem 0rem;
     background: none;
     border: none;
     cursor: pointer;

diff --git a/lib/ui/src/Chat.tsx b/lib/ui/src/Chat.tsx
@@ -109,6 +109,7 @@ export interface ChatUISubmitButtonProps {
     className: string
     disabled: boolean
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
+    onAbortMessageInProgress?: () => void
 }
 
 export interface ChatUISuggestionButtonProps {
@@ -616,32 +617,35 @@ export const Chat: React.FunctionComponent<ChatProps> = ({
                             setSelectedChatContext={setSelectedChatContext}
                         />
                     )}
-                    <TextArea
-                        className={classNames(styles.chatInput, chatInputClassName)}
-                        rows={inputRows}
-                        value={isCodyEnabled ? formInput : 'Cody is disabled on this instance'}
-                        autoFocus={true}
-                        required={true}
-                        disabled={needsEmailVerification || !isCodyEnabled}
-                        onInput={onChatInput}
-                        onKeyDown={onChatKeyDown}
-                        setValue={inputHandler}
-                        chatModels={chatModels}
-                    />
-                    {ContextStatusComponent && EnhancedContextToggler && contextStatus && (
-                        <div className={styles.contextButton}>
-                            <EnhancedContextToggler
-                                setEnhanceContext={setEnhanceContext}
-                                enhanceContext={enhanceContext}
-                                contextStatus={contextStatus}
-                            />
-                        </div>
-                    )}
+                    <div className={styles.chatInputContainer}>
+                        <TextArea
+                            className={classNames(styles.chatInput, chatInputClassName)}
+                            rows={inputRows}
+                            value={isCodyEnabled ? formInput : 'Cody is disabled on this instance'}
+                            autoFocus={true}
+                            required={true}
+                            disabled={needsEmailVerification || !isCodyEnabled}
+                            onInput={onChatInput}
+                            onKeyDown={onChatKeyDown}
+                            setValue={inputHandler}
+                            chatModels={chatModels}
+                        />
+                        {ContextStatusComponent && EnhancedContextToggler && contextStatus && (
+                            <div className={styles.contextButton}>
+                                <EnhancedContextToggler
+                                    setEnhanceContext={setEnhanceContext}
+                                    enhanceContext={enhanceContext}
+                                    contextStatus={contextStatus}
+                                />
+                            </div>
+                        )}
+                    </div>
                     <SubmitButton
                         className={styles.submitButton}
                         onClick={onChatSubmit}
-                        disabled={
-                            !!messageInProgress || needsEmailVerification || !isCodyEnabled || formInput.length === 0
+                        disabled={needsEmailVerification || !isCodyEnabled || (!formInput.length && !messageInProgress)}
+                        onAbortMessageInProgress={
+                            !AbortMessageInProgressButton && messageInProgress ? onAbortMessageInProgress : undefined
                         }
                     />
                 </div>

diff --git a/vscode/CHANGELOG.md b/vscode/CHANGELOG.md
@@ -16,6 +16,8 @@ Starting from `0.2.0`, Cody is using `major.EVEN_NUMBER.patch` for release versi
 
 ### Changed
 
+- Chat: Updated the design and location for the `chat submit` button and `stop generating` button. [pull/1782](https://github.com/sourcegraph/cody/pull/1782)
+
 ## [0.16.0]
 
 ### Added

diff --git a/vscode/webviews/Chat.module.css b/vscode/webviews/Chat.module.css
@@ -194,7 +194,8 @@ body[data-vscode-theme-kind='vscode-light'] .transcript-item pre > code {
 }
 
 .submit-button {
-    color: var(--foreground);
+    background: var(--vscode-button-background);
+    color: var(--vscode-button-foreground);
 }
 
 .submit-button,
@@ -203,7 +204,8 @@ body[data-vscode-theme-kind='vscode-light'] .transcript-item pre > code {
 }
 
 .submit-button[disabled] {
-    pointer-events: none;
+    opacity: 0.8;
+    cursor: text;
 }
 
 .stop-generating-button {

diff --git a/vscode/webviews/Chat.tsx b/vscode/webviews/Chat.tsx
@@ -221,7 +221,6 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
             insertButtonOnSubmit={onInsertBtnClick}
             suggestions={suggestions}
             setSuggestions={setSuggestions}
-            abortMessageInProgressComponent={AbortMessageInProgress}
             onAbortMessageInProgress={abortMessageInProgress}
             isTranscriptError={isTranscriptError}
             // TODO: We should fetch this from the server and pass a pretty component
@@ -249,22 +248,6 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
     )
 }
 
-interface AbortMessageInProgressProps {
-    onAbortMessageInProgress: () => void
-}
-
-const AbortMessageInProgress: React.FunctionComponent<AbortMessageInProgressProps> = ({ onAbortMessageInProgress }) => (
-    <div className={classNames(styles.stopGeneratingButtonContainer)}>
-        <VSCodeButton
-            className={classNames(styles.stopGeneratingButton)}
-            onClick={onAbortMessageInProgress}
-            appearance="secondary"
-        >
-            <i className="codicon codicon-stop-circle" /> Stop generating
-        </VSCodeButton>
-    </div>
-)
-
 const ChatButton: React.FunctionComponent<ChatButtonProps> = ({ label, action, onClick }) => (
     <VSCodeButton type="button" onClick={() => onClick(action)} className={styles.chatButton}>
         {label}
@@ -333,16 +316,21 @@ const TextArea: React.FunctionComponent<ChatUITextAreaProps> = ({
     )
 }
 
-const SubmitButton: React.FunctionComponent<ChatUISubmitButtonProps> = ({ className, disabled, onClick }) => (
+const SubmitButton: React.FunctionComponent<ChatUISubmitButtonProps> = ({
+    className,
+    disabled,
+    onClick,
+    onAbortMessageInProgress,
+}) => (
     <VSCodeButton
-        className={classNames(styles.submitButton, className)}
-        appearance="icon"
+        className={classNames(styles.submitButton, className, disabled && styles.submitButtonDisabled)}
+        appearance="primary"
         type="button"
         disabled={disabled}
-        onClick={onClick}
-        title="Send Message"
+        onClick={onAbortMessageInProgress ?? onClick}
+        title={onAbortMessageInProgress ? 'Stop Generating' : disabled ? 'Message is empty' : 'Send Message'}
     >
-        <SubmitSvg />
+        {onAbortMessageInProgress ? <i className="codicon codicon-debug-stop" /> : <SubmitSvg />}
     </VSCodeButton>
 )
 

diff --git a/vscode/webviews/Components/EnhancedContextToggler.module.css b/vscode/webviews/Components/EnhancedContextToggler.module.css
@@ -6,11 +6,11 @@
 .pop-up-container {
     background: var(--vscode-input-background);
     color: var(--vscode-inputOption-activeForeground);
-    box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
+    box-shadow: 0 0 3px 2px var(--vscode-inputOption-activeBorder);
 
     position: absolute;
     bottom: 2.5rem;
-    right: 1rem;
+    right: -2.5rem;
 
     width: 50%;
     min-width: 300px;
@@ -21,28 +21,50 @@
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    gap: 0.5rem;
+    gap: 0.25rem;
 
     z-index: 100;
 }
 
-.enhanced-context-help-text {
-    margin: 0.5rem 0;
+.pop-up-container:before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    right: 3.4rem;
+
+    width: 0;
+    border-top: 0.5rem solid var(--vscode-input-background);
+    border-left: 0.5rem solid transparent;
+    border-right: 0.5rem solid transparent;
+}
+
+.enhanced-context-description {
     font-size: smaller;
+    margin: 0;
+    color: var(--vscode-descriptionForeground);
+}
+
+.codebase-connection {
+    font-size: smaller;
+    margin: 0;
+    margin-top: 1rem;
 }
 
 .settings-btn {
     position: relative;
     color: var(--vscode-editor-foreground);
 }
 
-.pop-up-container:before {
-    content: '';
-    position: absolute;
-    top: 100%;
-    right: 0;
+.settings-btn-active {
+    background: var(--vscode-button-background);
+    color: var(--vscode-button-foreground);
+}
 
-    width: 0;
-    border-top: 1rem solid var(--vscode-input-background);
-    border-left: 1rem solid transparent;
+.check-box {
+    margin: 0;
+    margin-bottom: 0.25rem;
+}
+
+.codebase {
+    border-bottom: 1px solid var(--vscode-selection-background);
 }
diff --git a/vscode/webviews/Components/EnhancedContextToggler.tsx b/vscode/webviews/Components/EnhancedContextToggler.tsx
@@ -21,6 +21,8 @@ export const EnhancedContextToggler: React.FunctionComponent<{
         [setEnhanceContext]
     )
 
+    const codebaseName = contextStatus.codebase ?? 'a local codebase'
+
     return (
         <div className={styles.container}>
             {open && (
@@ -32,13 +34,16 @@ export const EnhancedContextToggler: React.FunctionComponent<{
                     >
                         Enhanced Context ✨
                     </VSCodeCheckbox>
-                    <p className={styles.enhancedContextHelpText}>
-                        Automatically include additional context from your codebase {contextStatus.codebase}
+                    <p className={styles.enhancedContextDescription}>
+                        Automatically include additional context from your codebase.
+                    </p>
+                    <p className={styles.codebaseConnection}>
+                        Connected to <span className={contextStatus.codebase && styles.codebase}>{codebaseName}</span>
                     </p>
                 </div>
             )}
             <VSCodeButton
-                className={classNames(styles.settingsBtn)}
+                className={classNames(styles.settingsBtn, enhanceContext && styles.settingsBtnActive)}
                 appearance="icon"
                 type="button"
                 onClick={() => setOpen(!open)}