Add convenient improvements (#63)

* auto focus on input element if selected a conversation Signed-off-by: cbh778899 <[email protected]> * when start edit, select all texts Signed-off-by: cbh778899 <[email protected]> --------- Signed-off-by: cbh778899 <[email protected]>
SkywardAI · Oct 16, 2024 · ab42071 · ab42071
1 parent 685cb98
commit ab42071
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/src/components/chat/ChatPage.jsx b/src/components/chat/ChatPage.jsx
@@ -13,7 +13,7 @@ export default function ChatPage({
                 <TitleBar current_title={chat.title} updateTitle={updateTitle} />
                 <Bubbles conversation={chat_history} pending_message={pending_message} />
                 <UserMessage
-                    enable_send={pending_message === null}
+                    uid={chat.uid} enable_send={pending_message === null}
                     file_available={!/^(OpenAI|Wllama|Llama)$/.test(chat.platform)}
                     send={sendMessage} abort_completion={abort}
                 /></>:

diff --git a/src/components/chat/TitleBar.jsx b/src/components/chat/TitleBar.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { PencilFill } from "react-bootstrap-icons";
 import { XCircle } from "react-bootstrap-icons";
 import { CheckCircle } from "react-bootstrap-icons";
@@ -7,6 +7,8 @@ export default function TitleBar({current_title, updateTitle}) {
     const [title, setTitle] = useState(current_title);
     const [is_editing, toggleEditTitle] = useState(false);
 
+    const inputRef = useRef(null);
+
     function submitUpdateTitle() {
         if(is_editing && title !== current_title) {
             updateTitle(title);
@@ -18,12 +20,19 @@ export default function TitleBar({current_title, updateTitle}) {
         setTitle(current_title);
     }, [current_title])
 
+    useEffect(()=>{
+        if(is_editing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [is_editing])
+
     return (
         <div className="title-bar">
             {
                 is_editing ? 
                 <form onSubmit={evt=>{evt.preventDefault(); submitUpdateTitle()}}>
-                    <input className="edit-title" value={title} onChange={evt=>setTitle(evt.target.value)} />
+                    <input className="edit-title" ref={inputRef} value={title} onChange={evt=>setTitle(evt.target.value)} />
                     <CheckCircle className="btn clickable" onClick={submitUpdateTitle} />
                     <XCircle className="btn clickable" onClick={()=>{setTitle(current_title); toggleEditTitle(false)}} />
                 </form>:

diff --git a/src/components/chat/UserMessage.jsx b/src/components/chat/UserMessage.jsx
@@ -1,22 +1,31 @@
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { Paperclip } from "react-bootstrap-icons";
 import { FileTextFill } from "react-bootstrap-icons";
 import { FileImageFill } from "react-bootstrap-icons";
 import { StopCircleFill } from "react-bootstrap-icons";
 import { Send } from "react-bootstrap-icons";
 
-export default function UserMessage({ enable_send, file_available, abort_completion, send }) {
+export default function UserMessage({ uid, enable_send, file_available, abort_completion, send }) {
 
     const [message, setMessage] = useState('');
     const [files, setFiles] = useState([]);
 
+    const inputRef = useRef(null);
+
     function submitMessage(event) {
         event.preventDefault();
         send(message, files);
         setMessage('');
         setFiles('');
     }
 
+    // update when uid changed, means we entered a new conversation
+    useEffect(()=>{
+        if(uid && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [uid])
+
     return (
         <form className="send-message-form" onSubmit={submitMessage}>
             <div className="input-container">
@@ -35,7 +44,7 @@ export default function UserMessage({ enable_send, file_available, abort_complet
                             onChange={evt=>setFiles(evt.target.files.length ? evt.target.files[0] : null)} />
                     </div>
                 }
-                <input type="text" value={message} onChange={evt=>setMessage(evt.target.value)}/>
+                <input type="text" ref={inputRef} value={message} onChange={evt=>setMessage(evt.target.value)}/>
                 <div className="button-container">
                     { 
                         enable_send ?