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

Fix rendering performances issues related to scrolling events (#174) 

* memoize chat related components

* Avoid re-rendering ChatInput on every message udpate

* change the way the horizontal scrollbar is hidden

* make the scroll event listener passive

* perf(Chat): fix performances issues related to autoscroll

Uses the intersection API to determine autoscroll mode instead of listening for scroll events

* tuning detection of autoscroll
This commit is contained in:
Thomas LÉVEIL 2023-03-27 09:22:38 +02:00 committed by GitHub
parent c3f2dced56
commit 46e1857489
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 401 additions and 366 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
components/Chat/Chat.tsx
View File

@ -7,6 +7,7 @@ import {
} from '@/types';
import {
FC,
memo,
MutableRefObject,
useCallback,
useEffect,
@ -21,6 +22,7 @@ import { ErrorMessageDiv } from './ErrorMessageDiv';
import { ModelSelect } from './ModelSelect';
import { SystemPrompt } from './SystemPrompt';
import { IconSettings } from '@tabler/icons-react';
import { throttle } from '@/utils';
interface Props {
conversation: Conversation;
@ -40,7 +42,8 @@ interface Props {
stopConversationRef: MutableRefObject<boolean>;
}
export const Chat: FC<Props> = ({
export const Chat: FC<Props> = memo(
({
conversation,
models,
apiKey,
@ -63,47 +66,47 @@ export const Chat: FC<Props> = ({
const chatContainerRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const scrollToBottom = useCallback(() => {
if (autoScrollEnabled) {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
textareaRef.current?.focus();
}
}, [autoScrollEnabled]);
const handleScroll = () => {
if (chatContainerRef.current) {
const { scrollTop, scrollHeight, clientHeight } =
chatContainerRef.current;
const bottomTolerance = 5;
if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
setAutoScrollEnabled(false);
} else {
setAutoScrollEnabled(true);
}
}
};
const handleSettings = () => {
setShowSettings(!showSettings);
};
useEffect(() => {
scrollToBottom();
setCurrentMessage(conversation.messages[conversation.messages.length - 2]);
}, [conversation.messages, scrollToBottom]);
useEffect(() => {
const chatContainer = chatContainerRef.current;
if (chatContainer) {
chatContainer.addEventListener('scroll', handleScroll);
return () => {
chatContainer.removeEventListener('scroll', handleScroll);
};
const scrollDown = () => {
if (autoScrollEnabled) {
messagesEndRef.current?.scrollIntoView(true);
}
}, []);
};
const throttledScrollDown = throttle(scrollDown, 250);
useEffect(() => {
throttledScrollDown();
setCurrentMessage(
conversation.messages[conversation.messages.length - 2],
);
}, [conversation.messages, throttledScrollDown]);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setAutoScrollEnabled(entry.isIntersecting);
if (entry.isIntersecting) {
textareaRef.current?.focus();
}
},
{
root: null,
threshold: 0.5,
},
);
const messagesEndElement = messagesEndRef.current;
if (messagesEndElement) {
observer.observe(messagesEndElement);
}
return () => {
if (messagesEndElement) {
observer.unobserve(messagesEndElement);
}
};
}, [messagesEndRef]);
return (
<div className="overflow-none relative flex-1 bg-white dark:bg-[#343541]">
@ -133,7 +136,10 @@ export const Chat: FC<Props> = ({
<ErrorMessageDiv error={modelError} />
) : (
<>
<div className="max-h-full overflow-scroll" ref={chatContainerRef}>
<div
className="max-h-full overflow-x-hidden"
ref={chatContainerRef}
>
{conversation.messages.length === 0 ? (
<>
<div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
@ -217,7 +223,7 @@ export const Chat: FC<Props> = ({
stopConversationRef={stopConversationRef}
textareaRef={textareaRef}
messageIsStreaming={messageIsStreaming}
messages={conversation.messages}
conversationIsEmpty={conversation.messages.length > 0}
model={conversation.model}
onSend={(message) => {
setCurrentMessage(message);
@ -233,4 +239,6 @@ export const Chat: FC<Props> = ({
)}
</div>
);
};
},
);
Chat.displayName = 'Chat';

12
components/Chat/ChatInput.tsx
View File

@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next';
interface Props {
messageIsStreaming: boolean;
model: OpenAIModel;
messages: Message[];
conversationIsEmpty: boolean;
onSend: (message: Message) => void;
onRegenerate: () => void;
stopConversationRef: MutableRefObject<boolean>;
@ -22,7 +22,7 @@ interface Props {
export const ChatInput: FC<Props> = ({
messageIsStreaming,
model,
messages,
conversationIsEmpty,
onSend,
onRegenerate,
stopConversationRef,
@ -102,11 +102,11 @@ export const ChatInput: FC<Props> = ({
}
return (
<div className="absolute bottom-0 left-0 w-full border-transparent pt-6 dark:border-white/20 bg-gradient-to-b from-transparent via-white to-white dark:via-[#343541] dark:to-[#343541] md:pt-2">
<div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#343541] dark:to-[#343541] md:pt-2">
<div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
{messageIsStreaming && (
<button
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 dark:border-neutral-600 py-2 px-4 text-black bg-white dark:bg-[#343541] dark:text-white md:top-0"
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
onClick={handleStopConversation}
>
<IconPlayerStop size={16} className="mb-[2px] inline-block" />{' '}
@ -114,9 +114,9 @@ export const ChatInput: FC<Props> = ({
</button>
)}
{!messageIsStreaming && messages.length > 0 && (
{!messageIsStreaming && !conversationIsEmpty && (
<button
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 dark:border-neutral-600 py-2 px-4 text-black bg-white dark:bg-[#343541] dark:text-white md:top-0"
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
onClick={onRegenerate}
>
<IconRepeat size={16} className="mb-[2px] inline-block" />{' '}

29
components/Chat/ChatMessage.tsx
View File

@ -1,12 +1,12 @@
import { Message } from '@/types';
import { IconEdit } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { FC, useEffect, useRef, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { FC, useEffect, useRef, useState, memo } from 'react';
import rehypeMathjax from 'rehype-mathjax';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import { CodeBlock } from '../Markdown/CodeBlock';
import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown';
import { CopyButton } from './CopyButton';
interface Props {
@ -15,11 +15,8 @@ interface Props {
onEditMessage: (message: Message, messageIndex: number) => void;
}
export const ChatMessage: FC<Props> = ({
message,
messageIndex,
onEditMessage,
}) => {
export const ChatMessage: FC<Props> = memo(
({ message, messageIndex, onEditMessage }) => {
const { t } = useTranslation('chat');
const [isEditing, setIsEditing] = useState<boolean>(false);
const [isHovering, setIsHovering] = useState<boolean>(false);
@ -32,7 +29,9 @@ export const ChatMessage: FC<Props> = ({
setIsEditing(!isEditing);
};
const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
const handleInputChange = (
event: React.ChangeEvent<HTMLTextAreaElement>,
) => {
setMessageContent(event.target.value);
if (textareaRef.current) {
textareaRef.current.style.height = 'inherit';
@ -74,7 +73,8 @@ export const ChatMessage: FC<Props> = ({
return (
<div
className={`group ${message.role === 'assistant'
className={`group ${
message.role === 'assistant'
? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
: 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
}`}
@ -135,7 +135,8 @@ export const ChatMessage: FC<Props> = ({
{(isHovering || window.innerWidth < 640) && !isEditing && (
<button
className={`absolute ${window.innerWidth < 640
className={`absolute ${
window.innerWidth < 640
? 'right-3 bottom-1'
: 'right-[-20px] top-[26px]'
}`}
@ -150,7 +151,7 @@ export const ChatMessage: FC<Props> = ({
</div>
) : (
<>
<ReactMarkdown
<MemoizedReactMarkdown
className="prose dark:prose-invert"
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
@ -195,7 +196,7 @@ export const ChatMessage: FC<Props> = ({
}}
>
{message.content}
</ReactMarkdown>
</MemoizedReactMarkdown>
{(isHovering || window.innerWidth < 640) && (
<CopyButton
@ -209,4 +210,6 @@ export const ChatMessage: FC<Props> = ({
</div>
</div>
);
};
},
);
ChatMessage.displayName = 'ChatMessage';

7
components/Markdown/CodeBlock.tsx
View File

@ -3,7 +3,7 @@ import {
programmingLanguages,
} from '@/utils/app/codeblock';
import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
import { FC, useState } from 'react';
import { FC, useState, memo } from 'react';
import { useTranslation } from 'next-i18next';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@ -13,7 +13,7 @@ interface Props {
value: string;
}
export const CodeBlock: FC<Props> = ({ language, value }) => {
export const CodeBlock: FC<Props> = memo(({ language, value }) => {
const { t } = useTranslation('markdown');
const [isCopied, setIsCopied] = useState<Boolean>(false);
@ -92,4 +92,5 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
</SyntaxHighlighter>
</div>
);
};
});
CodeBlock.displayName = 'CodeBlock';

4
components/Markdown/MemoizedReactMarkdown.tsx Normal file
View File

@ -0,0 +1,4 @@
import { FC, memo } from 'react';
import ReactMarkdown, { Options } from 'react-markdown';
export const MemoizedReactMarkdown: FC<Options> = memo(ReactMarkdown);

19
utils/index.ts Normal file
View File

@ -0,0 +1,19 @@
export function throttle<T extends (...args: any[]) => any>(func: T, limit: number): T {
let lastFunc: ReturnType<typeof setTimeout>;
let lastRan: number;
return ((...args) => {
if (!lastRan) {
func(...args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastRan >= limit) {
func(...args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
}) as T;
}