Improve / fix arrow keys for Cody history (#51586)

Closes #51575.

Some issues that were fixed:
- Down arrow did not navigate history forward
- You couldn't navigate the WIP prompt with the up arrow as it would
navigate history always; now we only navigate to backwards when the up
arrow is pressed at the start of the prompt and forwards then the down
arrow is pressed at the end of the prompt
- There was a typo that prevented the history index from being set
properly in VSCode
- Input history wasn't populated on the web

## Test plan

Tested history navigation in VSCode and web.

client/cody-ui/src/Chat.tsx

@@ -52,7 +52,7 @@ export interface ChatUITextAreaProps {
     value: string
     required: boolean
     onInput: React.FormEventHandler<HTMLElement>
-    onKeyDown: React.KeyboardEventHandler<HTMLElement>
+    onKeyDown?: (event: React.KeyboardEvent<HTMLElement>, caretPosition: number | null) => void
 }
 
 export interface ChatUISubmitButtonProps {
@@ -145,7 +145,7 @@ export const Chat: React.FunctionComponent<ChatProps> = ({
 
             onSubmit(input, submitType)
             setSuggestions?.(undefined)
-            setHistoryIndex(input.length + 1)
+            setHistoryIndex(inputHistory.length + 1)
             setInputHistory([...inputHistory, input])
         },
         [inputHistory, messageInProgress, onSubmit, setInputHistory, setSuggestions]
@@ -161,7 +161,7 @@ export const Chat: React.FunctionComponent<ChatProps> = ({
     }, [formInput, messageInProgress, setFormInput, submitInput])
 
     const onChatKeyDown = useCallback(
-        (event: React.KeyboardEvent<HTMLDivElement>): void => {
+        (event: React.KeyboardEvent<HTMLElement>, caretPosition: number | null): void => {
             // Submit input on Enter press (without shift) and
             // trim the formInput to make sure input value is not empty.
             if (
@@ -176,16 +176,25 @@ export const Chat: React.FunctionComponent<ChatProps> = ({
                 setMessageBeingEdited(false)
                 onChatSubmit()
             }
+
             // Loop through input history on up arrow press
-            if (event.key === 'ArrowUp' && inputHistory.length) {
-                if (formInput === inputHistory[historyIndex] || !formInput) {
+            if (!inputHistory.length) {
+                return
+            }
+
+            if (formInput === inputHistory[historyIndex] || !formInput) {
+                if (event.key === 'ArrowUp' && caretPosition === 0) {
                     const newIndex = historyIndex - 1 < 0 ? inputHistory.length - 1 : historyIndex - 1
                     setHistoryIndex(newIndex)
                     setFormInput(inputHistory[newIndex])
+                } else if (event.key === 'ArrowDown' && caretPosition === formInput.length) {
+                    const newIndex = historyIndex + 1 >= inputHistory.length ? 0 : historyIndex + 1
+                    setHistoryIndex(newIndex)
+                    setFormInput(inputHistory[newIndex])
                 }
             }
         },
-        [inputHistory, onChatSubmit, formInput, historyIndex, setFormInput, setMessageBeingEdited]
+        [inputHistory, historyIndex, setFormInput, onChatSubmit, formInput, setMessageBeingEdited]
     )
 
     const transcriptWithWelcome = useMemo<ChatMessage[]>(

client/cody-web/src/Chat.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 
 import { noop } from 'lodash'
 
@@ -60,17 +60,28 @@ const TextArea: React.FunctionComponent<ChatUITextAreaProps> = ({
     required,
     onInput,
     onKeyDown,
-}) => (
-    <textarea
-        className={className}
-        rows={rows}
-        value={value}
-        autoFocus={autoFocus}
-        required={required}
-        onInput={onInput}
-        onKeyDown={onKeyDown}
-    />
-)
+}) => {
+    const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {
+        if (onKeyDown) {
+            onKeyDown(event, textAreaRef.current?.selectionStart ?? null)
+        }
+    }
+
+    return (
+        <textarea
+            ref={textAreaRef}
+            className={className}
+            rows={rows}
+            value={value}
+            autoFocus={autoFocus}
+            required={required}
+            onInput={onInput}
+            onKeyDown={handleKeyDown}
+        />
+    )
+}
 
 const SubmitButton: React.FunctionComponent<ChatUISubmitButtonProps> = ({ className, disabled, onClick }) => (
     <button className={className} type="submit" disabled={disabled} onClick={onClick}>

client/cody/CHANGELOG.md

@@ -10,6 +10,8 @@ All notable changes to Sourcegraph Cody will be documented in this file.
 
 ### Changed
 
+- Arrow key behavior: you can now navigate forwards through messages with the down arrow; additionally the up and down arrows will navigate backwards and forwards only if you're at the start or end of the drafted text, respectively. [pull/51586](https://github.com/sourcegraph/sourcegraph/pull/51586)
+
 ## [0.1.2]
 
 ### Added

client/cody/webviews/Chat.tsx

@@ -125,7 +125,7 @@ const TextArea: React.FunctionComponent<ChatUITextAreaProps> = ({
     // Focus the textarea when the webview gains focus (unless there is text selected). This makes
     // it so that the user can immediately start typing to Cody after invoking `Cody: Focus on Chat
     // View` with the keyboard.
-    const inputRef = useRef<HTMLElement>(null)
+    const inputRef = useRef<HTMLTextAreaElement>(null)
     useEffect(() => {
         const handleFocus = (): void => {
             if (document.getSelection()?.isCollapsed) {
@@ -145,6 +145,12 @@ const TextArea: React.FunctionComponent<ChatUITextAreaProps> = ({
         }
     }, [autoFocus])
 
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {
+        if (onKeyDown) {
+            onKeyDown(event, (inputRef.current as any)?.control.selectionStart)
+        }
+    }
+
     return (
         <VSCodeTextArea
             className={classNames(styles.chatInput, className)}
@@ -159,7 +165,7 @@ const TextArea: React.FunctionComponent<ChatUITextAreaProps> = ({
             autofocus={autoFocus}
             required={required}
             onInput={e => onInput(e as React.FormEvent<HTMLTextAreaElement>)}
-            onKeyDown={onKeyDown}
+            onKeyDown={handleKeyDown}
         />
     )
 }

client/web/src/cody/components/ChatUI/ChatUi.tsx

@@ -25,11 +25,24 @@ export const SCROLL_THRESHOLD = 100
 const onFeedbackSubmit = (feedback: string): void => eventLogger.log(`web:cody:feedbackSubmit:${feedback}`)
 
 export const ChatUI = (): JSX.Element => {
-    const { submitMessage, editMessage, messageInProgress, transcript, getChatContext, transcriptId } =
-        useChatStoreState()
+    const {
+        submitMessage,
+        editMessage,
+        messageInProgress,
+        transcript,
+        getChatContext,
+        transcriptId,
+        transcriptHistory,
+    } = useChatStoreState()
 
     const [formInput, setFormInput] = useState('')
-    const [inputHistory, setInputHistory] = useState<string[] | []>([])
+    const [inputHistory, setInputHistory] = useState<string[] | []>(() =>
+        transcriptHistory
+            .flatMap(entry => entry.interactions)
+            .sort((entryA, entryB) => +new Date(entryA.timestamp) - +new Date(entryB.timestamp))
+            .filter(interaction => interaction.humanMessage.displayText !== undefined)
+            .map(interaction => interaction.humanMessage.displayText!)
+    )
     const [messageBeingEdited, setMessageBeingEdited] = useState<boolean>(false)
 
     return (
@@ -172,6 +185,12 @@ export const AutoResizableTextArea: React.FC<AutoResizableTextAreaProps> = ({
         adjustTextAreaHeight()
     }, [adjustTextAreaHeight, value, width])
 
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {
+        if (onKeyDown) {
+            onKeyDown(event, textAreaRef.current?.selectionStart ?? null)
+        }
+    }
+
     return (
         <TextArea
             ref={textAreaRef}
@@ -181,7 +200,7 @@ export const AutoResizableTextArea: React.FC<AutoResizableTextAreaProps> = ({
             rows={1}
             autoFocus={false}
             required={true}
-            onKeyDown={onKeyDown}
+            onKeyDown={handleKeyDown}
             onInput={onInput}
         />
     )