chat: fix cursor jumping bug in chat

Author: williamstein

src/packages/frontend/chat/input.tsx

@@ -36,6 +36,7 @@ interface Props {
   editBarStyle?: CSS;
   placeholder?: string;
   autoFocus?: boolean;
+  moveCursorToEndOfLine?: boolean;
 }
 
 export default function ChatInput({
@@ -55,6 +56,7 @@ export default function ChatInput({
   style,
   submitMentionsRef,
   syncdb,
+  moveCursorToEndOfLine,
 }: Props) {
   const intl = useIntl();
   const onSendRef = useRef<Function>(on_send);
@@ -82,7 +84,7 @@ export default function ChatInput({
     // See https://github.com/sagemathinc/cocalc/issues/6415
     const input = dbInput ?? propsInput;
     setInput(input);
-    if (input?.trim()) {
+    if (input?.trim() && moveCursorToEndOfLine) {
       // have to wait until it's all rendered -- i hate code like this...
       for (const n of [1, 10, 50]) {
         setTimeout(() => {

src/packages/frontend/chat/message.tsx

@@ -769,6 +769,7 @@ export default function Message(props: Readonly<Props>) {
     }
     const replyDate = -getThreadRootDate({ date, messages });
     let input;
+    let moveCursorToEndOfLine = false;
     if (isLLMThread) {
       input = "";
     } else {
@@ -777,13 +778,15 @@ export default function Message(props: Readonly<Props>) {
         input = "";
       } else {
         input = `<span class="user-mention" account-id=${replying_to} >@${editor_name}</span> `;
+        moveCursorToEndOfLine = autoFocusReply;
       }
     }
     return (
       <div style={{ marginLeft: mode === "standalone" ? "30px" : "0" }}>
         <ChatInput
           fontSize={font_size}
           autoFocus={autoFocusReply}
+          moveCursorToEndOfLine={moveCursorToEndOfLine}
           style={{
             borderRadius: "8px",
             height: "auto" /* for some reason the default 100% breaks things */,
@@ -879,8 +882,9 @@ export default function Message(props: Readonly<Props>) {
       !props.allowReply ||
       is_folded ||
       props.actions == null
-    )
+    ) {
       return;
+    }
 
     return (
       <div style={{ textAlign: "center", marginBottom: "5px", width: "100%" }}>