From 7ce2d5ec2c270b142838bf7f9cbdc152add3a323 Mon Sep 17 00:00:00 2001
From: Tony <92271804+jean-jacket@users.noreply.github.com>
Date: Thu, 23 Mar 2023 19:01:35 +0000
Subject: [PATCH] autofocus textarea (#103)

---
 components/Chat/Chat.tsx      | 5 +++++
 components/Chat/ChatInput.tsx | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index caa8f53..6a67f52 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -27,6 +27,8 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreami
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
 
   const scrollToBottom = () => {
     if (autoScrollEnabled) {
@@ -49,6 +51,8 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreami
 
   useEffect(() => {
     scrollToBottom();
+    textareaRef.current?.focus()
+
   }, [conversation.messages]);
 
   useEffect(() => {
@@ -136,6 +140,7 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreami
           ) : (
             <ChatInput
               stopConversationRef={stopConversationRef}
+              textareaRef={textareaRef}
               messageIsStreaming={messageIsStreaming}
               onSend={(message) => {
                 setCurrentMessage(message);
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index a01e6db..ee223ec 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -7,14 +7,13 @@ interface Props {
   onSend: (message: Message) => void;
   model: OpenAIModel;
   stopConversationRef: MutableRefObject<boolean>;
+  textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
 }
 
-export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopConversationRef }) => {
+export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopConversationRef, textareaRef }) => {
   const [content, setContent] = useState<string>();
   const [isTyping, setIsTyping] = useState<boolean>(false);
 
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
     const maxLength = model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000;
@@ -68,6 +67,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopCo
     }
   }, [content]);
 
+
   function handleStopConversation() {
     stopConversationRef.current = true;
     setTimeout(() => {