KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

autofocus textarea (#103)

This commit is contained in:
Tony 2023-03-23 19:01:35 +00:00 committed by GitHub
parent 42c48f290f
commit 7ce2d5ec2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/Chat/Chat.tsx
View File

@ -27,6 +27,8 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreami
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const chatContainerRef = useRef<HTMLDivElement>(null); const chatContainerRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const scrollToBottom = () => { const scrollToBottom = () => {
if (autoScrollEnabled) { if (autoScrollEnabled) {
@ -49,6 +51,8 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreami
useEffect(() => { useEffect(() => {
scrollToBottom(); scrollToBottom();
textareaRef.current?.focus()
}, [conversation.messages]); }, [conversation.messages]);
useEffect(() => { useEffect(() => {
@ -136,6 +140,7 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreami
) : ( ) : (
<ChatInput <ChatInput
stopConversationRef={stopConversationRef} stopConversationRef={stopConversationRef}
textareaRef={textareaRef}
messageIsStreaming={messageIsStreaming} messageIsStreaming={messageIsStreaming}
onSend={(message) => { onSend={(message) => {
setCurrentMessage(message); setCurrentMessage(message);

6
components/Chat/ChatInput.tsx
View File

@ -7,14 +7,13 @@ interface Props {
onSend: (message: Message) => void; onSend: (message: Message) => void;
model: OpenAIModel; model: OpenAIModel;
stopConversationRef: MutableRefObject<boolean>; 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 [content, setContent] = useState<string>();
const [isTyping, setIsTyping] = useState<boolean>(false); const [isTyping, setIsTyping] = useState<boolean>(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value; const value = e.target.value;
const maxLength = model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000; const maxLength = model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000;
@ -68,6 +67,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopCo
} }
}, [content]); }, [content]);
function handleStopConversation() { function handleStopConversation() {
stopConversationRef.current = true; stopConversationRef.current = true;
setTimeout(() => { setTimeout(() => {