[AI Chat] positions cursor at end of input when editing

components/ai_chat/resources/page/components/edit_input/index.tsx

@@ -19,6 +19,21 @@ interface Props {
 
 function EditInput(props: Props) {
   const [text, setText] = React.useState(props.text)
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  React.useEffect(() => {
+    if (textareaRef.current) {
+      /**
+       * When editing, we want the cursor to be positioned
+       * at the end of the text. Typically we would also call
+       * focus() here, but that isn't necessary in this case
+       * because the textarea already has [autoFocus] set.
+       */
+      const length = textareaRef.current.value.length
+      textareaRef.current.setSelectionRange(length, length)
+    }
+  }, [])
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing &&
         !props.isSubmitDisabled) {
@@ -38,6 +53,7 @@ function EditInput(props: Props) {
         data-replicated-value={text}
       >
           <textarea
+            ref={textareaRef}
             value={text}
             onChange={(e) => setText(e.currentTarget.value)}
             onKeyDown={handleKeyDown}