schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
6 changed files with 401 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/ChatInput.tsx
+6 -6
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" />{' '}