From 3040490f6af8b7e845514221dbcb20784590649b Mon Sep 17 00:00:00 2001
From: Auguste Rame <19855629+SuperAuguste@users.noreply.github.com>
Date: Mon, 15 May 2023 10:33:08 -0400
Subject: [PATCH] Cody: Add submit button to edit dialog for parity with chat
 input box (#51900)

Closes #51740

## Test plan

Tested web and VSCode locally.
---
 client/cody-ui/src/Chat.tsx                   |  2 +
 client/cody-ui/src/chat/Transcript.tsx        | 15 +++-
 .../src/chat/TranscriptItem.module.css        | 27 ++++++-
 client/cody-ui/src/chat/TranscriptItem.tsx    | 73 +++++++++++--------
 4 files changed, 86 insertions(+), 31 deletions(-)

diff --git a/client/cody-ui/src/Chat.tsx b/client/cody-ui/src/Chat.tsx
index 76dd72eacb2..346f2638eda 100644
--- a/client/cody-ui/src/Chat.tsx
+++ b/client/cody-ui/src/Chat.tsx
@@ -213,6 +213,8 @@ export const Chat: React.FunctionComponent<ChatProps> = ({
                 FeedbackButtonsContainer={FeedbackButtonsContainer}
                 feedbackButtonsOnSubmit={feedbackButtonsOnSubmit}
                 copyButtonOnSubmit={copyButtonOnSubmit}
+                submitButtonComponent={SubmitButton}
+                chatInputClassName={chatInputClassName}
             />
 
             <form className={classNames(styles.inputRow, inputRowClassName)}>
diff --git a/client/cody-ui/src/chat/Transcript.tsx b/client/cody-ui/src/chat/Transcript.tsx
index 7bc24bfa16f..a360aba1b42 100644
--- a/client/cody-ui/src/chat/Transcript.tsx
+++ b/client/cody-ui/src/chat/Transcript.tsx
@@ -4,7 +4,13 @@ import classNames from 'classnames'
 
 import { ChatMessage } from '@sourcegraph/cody-shared/src/chat/transcript/messages'
 
-import { ChatUITextAreaProps, EditButtonProps, FeedbackButtonsProps, CopyButtonProps } from '../Chat'
+import {
+    ChatUITextAreaProps,
+    EditButtonProps,
+    FeedbackButtonsProps,
+    CopyButtonProps,
+    ChatUISubmitButtonProps,
+} from '../Chat'
 
 import { FileLinkProps } from './ContextFiles'
 import { TranscriptItem, TranscriptItemClassNames } from './TranscriptItem'
@@ -25,6 +31,7 @@ export const Transcript: React.FunctionComponent<
         FeedbackButtonsContainer?: React.FunctionComponent<FeedbackButtonsProps>
         feedbackButtonsOnSubmit?: (text: string) => void
         copyButtonOnSubmit?: CopyButtonProps['copyButtonOnSubmit']
+        submitButtonComponent?: React.FunctionComponent<ChatUISubmitButtonProps>
     } & TranscriptItemClassNames
 > = ({
     transcript,
@@ -44,6 +51,8 @@ export const Transcript: React.FunctionComponent<
     FeedbackButtonsContainer,
     feedbackButtonsOnSubmit,
     copyButtonOnSubmit,
+    submitButtonComponent,
+    chatInputClassName,
 }) => {
     const transcriptContainerRef = useRef<HTMLDivElement>(null)
     useEffect(() => {
@@ -103,6 +112,8 @@ export const Transcript: React.FunctionComponent<
                             feedbackButtonsOnSubmit={feedbackButtonsOnSubmit}
                             copyButtonOnSubmit={copyButtonOnSubmit}
                             showFeedbackButtons={index > 0 && transcript.length - index === 1}
+                            submitButtonComponent={submitButtonComponent}
+                            chatInputClassName={chatInputClassName}
                         />
                     )
             )}
@@ -120,6 +131,8 @@ export const Transcript: React.FunctionComponent<
                     showEditButton={false}
                     showFeedbackButtons={false}
                     copyButtonOnSubmit={copyButtonOnSubmit}
+                    submitButtonComponent={submitButtonComponent}
+                    chatInputClassName={chatInputClassName}
                 />
             )}
         </div>
diff --git a/client/cody-ui/src/chat/TranscriptItem.module.css b/client/cody-ui/src/chat/TranscriptItem.module.css
index 0bfb021c9f9..1ebeeb3075e 100644
--- a/client/cody-ui/src/chat/TranscriptItem.module.css
+++ b/client/cody-ui/src/chat/TranscriptItem.module.css
@@ -58,8 +58,11 @@
     padding: 0 var(--spacing);
 }
 
-.content {
+.content-padding {
     padding: 0 var(--spacing) var(--spacing) var(--spacing);
+}
+
+.content {
     word-break: break-word;
     line-height: 150%;
 }
@@ -97,8 +100,30 @@
     margin: 0;
 }
 
+.text-area-container {
+    position: relative;
+}
+
 .chat-input {
     width: 100%;
     height: 100%;
     resize: none;
 }
+
+.submit-button {
+    position: absolute;
+    right: 0;
+    bottom: 0.125rem;
+    fill: currentColor;
+    opacity: 0.8;
+    margin: 0.25rem !important;
+    background: none;
+    border: none;
+    cursor: pointer;
+    height: 2rem;
+    width: 2rem;
+}
+
+.submit-button:hover {
+    opacity: 1;
+}
diff --git a/client/cody-ui/src/chat/TranscriptItem.tsx b/client/cody-ui/src/chat/TranscriptItem.tsx
index ccba7afb4fc..bfe8ff10e32 100644
--- a/client/cody-ui/src/chat/TranscriptItem.tsx
+++ b/client/cody-ui/src/chat/TranscriptItem.tsx
@@ -4,7 +4,13 @@ import classNames from 'classnames'
 
 import { ChatMessage } from '@sourcegraph/cody-shared/src/chat/transcript/messages'
 
-import { ChatUITextAreaProps, EditButtonProps, FeedbackButtonsProps, CopyButtonProps } from '../Chat'
+import {
+    ChatUITextAreaProps,
+    EditButtonProps,
+    FeedbackButtonsProps,
+    CopyButtonProps,
+    ChatUISubmitButtonProps,
+} from '../Chat'
 import { CodySvg } from '../utils/icons'
 
 import { BlinkingCursor } from './BlinkingCursor'
@@ -22,6 +28,7 @@ export interface TranscriptItemClassNames {
     transcriptItemParticipantClassName?: string
     codeBlocksCopyButtonClassName?: string
     transcriptActionClassName?: string
+    chatInputClassName?: string
 }
 
 /**
@@ -42,6 +49,7 @@ export const TranscriptItem: React.FunctionComponent<
         feedbackButtonsOnSubmit?: (text: string) => void
         showFeedbackButtons: boolean
         copyButtonOnSubmit?: CopyButtonProps['copyButtonOnSubmit']
+        submitButtonComponent?: React.FunctionComponent<ChatUISubmitButtonProps>
     } & TranscriptItemClassNames
 > = ({
     message,
@@ -62,39 +70,46 @@ export const TranscriptItem: React.FunctionComponent<
     feedbackButtonsOnSubmit,
     showFeedbackButtons,
     copyButtonOnSubmit,
+    submitButtonComponent: SubmitButton,
+    chatInputClassName,
 }) => {
     const [formInput, setFormInput] = useState<string>(message.displayText ?? '')
     const textarea =
-        TextArea && beingEdited && editButtonOnSubmit ? (
-            <TextArea
-                className={classNames(styles.chatInput)}
-                rows={5}
-                value={formInput}
-                autoFocus={true}
-                required={true}
-                onInput={({ target }) => {
-                    const { value } = target as HTMLInputElement
-                    setFormInput(value)
-                }}
-                onKeyDown={event => {
-                    if (event.key === 'Escape') {
-                        setBeingEdited(false)
-                    }
+        TextArea && beingEdited && editButtonOnSubmit && SubmitButton ? (
+            <div className={styles.textAreaContainer}>
+                <TextArea
+                    className={classNames(styles.chatInput, chatInputClassName)}
+                    rows={5}
+                    value={formInput}
+                    autoFocus={true}
+                    required={true}
+                    onInput={event => setFormInput((event.target as HTMLInputElement).value)}
+                    onKeyDown={event => {
+                        if (event.key === 'Escape') {
+                            setBeingEdited(false)
+                        }
 
-                    if (
-                        event.key === 'Enter' &&
-                        !event.shiftKey &&
-                        !event.nativeEvent.isComposing &&
-                        formInput &&
-                        formInput.trim()
-                    ) {
-                        event.preventDefault()
-                        event.stopPropagation()
+                        if (
+                            event.key === 'Enter' &&
+                            !event.shiftKey &&
+                            !event.nativeEvent.isComposing &&
+                            formInput.trim()
+                        ) {
+                            event.preventDefault()
+                            setBeingEdited(false)
+                            editButtonOnSubmit(formInput)
+                        }
+                    }}
+                />
+                <SubmitButton
+                    className={styles.submitButton}
+                    onClick={() => {
                         setBeingEdited(false)
                         editButtonOnSubmit(formInput)
-                    }
-                }}
-            />
+                    }}
+                    disabled={formInput.length === 0}
+                />
+            </div>
         ) : null
 
     return (
@@ -148,7 +163,7 @@ export const TranscriptItem: React.FunctionComponent<
                     />
                 </div>
             )}
-            <div className={classNames(styles.content)}>
+            <div className={classNames(styles.contentPadding, textarea ? undefined : styles.content)}>
                 {message.displayText ? (
                     textarea ?? (
                         <CodeBlocks