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

smoother autoscroll down (#141)

This commit is contained in:
Thomas LÉVEIL 2023-03-25 15:00:40 +01:00 committed by GitHub
parent 93a8e814d6
commit 698c3bda29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/Chat/Chat.tsx
View File

@ -1,5 +1,5 @@
import { Conversation, KeyValuePair, Message, OpenAIModel } from "@/types"; import { Conversation, KeyValuePair, Message, OpenAIModel } from "@/types";
import { FC, MutableRefObject, useEffect, useRef, useState } from "react"; import { FC, MutableRefObject, useCallback, useEffect, useRef, useState } from "react";
import { ChatInput } from "./ChatInput"; import { ChatInput } from "./ChatInput";
import { ChatLoader } from "./ChatLoader"; import { ChatLoader } from "./ChatLoader";
import { ChatMessage } from "./ChatMessage"; import { ChatMessage } from "./ChatMessage";
@ -30,16 +30,17 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, serverSideApiKey
const chatContainerRef = useRef<HTMLDivElement>(null); const chatContainerRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null); const textareaRef = useRef<HTMLTextAreaElement>(null);
const scrollToBottom = () => { const scrollToBottom = useCallback(() => {
if (autoScrollEnabled) { if (autoScrollEnabled) {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
textareaRef.current?.focus();
} }
}; }, [autoScrollEnabled]);
const handleScroll = () => { const handleScroll = () => {
if (chatContainerRef.current) { if (chatContainerRef.current) {
const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current; const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current;
const bottomTolerance = 30; const bottomTolerance = 5;
if (scrollTop + clientHeight < scrollHeight - bottomTolerance) { if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
setAutoScrollEnabled(false); setAutoScrollEnabled(false);
@ -51,9 +52,8 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, serverSideApiKey
useEffect(() => { useEffect(() => {
scrollToBottom(); scrollToBottom();
textareaRef.current?.focus();
setCurrentMessage(conversation.messages[conversation.messages.length - 2]); setCurrentMessage(conversation.messages[conversation.messages.length - 2]);
}, [conversation.messages]); }, [conversation.messages, scrollToBottom]);
useEffect(() => { useEffect(() => {
const chatContainer = chatContainerRef.current; const chatContainer = chatContainerRef.current;