Improve / fix arrow keys for Cody history

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}
         />
     )