diff --git a/src/components/chat/ChatPage.jsx b/src/components/chat/ChatPage.jsx index 9e44813..2656b3a 100644 --- a/src/components/chat/ChatPage.jsx +++ b/src/components/chat/ChatPage.jsx @@ -13,7 +13,7 @@ export default function ChatPage({ : diff --git a/src/components/chat/TitleBar.jsx b/src/components/chat/TitleBar.jsx index 670a8ba..b36c870 100644 --- 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 (
{ is_editing ?
{evt.preventDefault(); submitUpdateTitle()}}> - setTitle(evt.target.value)} /> + setTitle(evt.target.value)} /> {setTitle(current_title); toggleEditTitle(false)}} /> : diff --git a/src/components/chat/UserMessage.jsx b/src/components/chat/UserMessage.jsx index ef1834d..dce3278 100644 --- a/src/components/chat/UserMessage.jsx +++ b/src/components/chat/UserMessage.jsx @@ -1,15 +1,17 @@ -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); @@ -17,6 +19,13 @@ export default function UserMessage({ enable_send, file_available, abort_complet setFiles(''); } + // update when uid changed, means we entered a new conversation + useEffect(()=>{ + if(uid && inputRef.current) { + inputRef.current.focus(); + } + }, [uid]) + return (
@@ -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)} />
} - setMessage(evt.target.value)}/> + setMessage(evt.target.value)}/>
{ enable_send ?