Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 01:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

animates scroll to bottom and debounces bottom

Browse source
This commit is contained in:
Daniel Avila 2023-02-13 20:13:59 -05:00
parent 779f142058
commit a5afd5c48f
9 changed files with 130 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/main/Message.jsx
View file

@ -1,9 +1,24 @@
import React from 'react';
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import GPTIcon from '../svg/GPTIcon';
// import useCustomEffect from '~/hooks/useCustomEffect';
export default function Message({ sender, text, last = false, error = false }) {
export default function Message({
sender,
text,
last = false,
error = false,
scrollToBottom
}) {
const { isSubmitting } = useSelector((state) => state.submit);
const blinker = isSubmitting && last && sender === 'GPT';
useEffect(() => {
if (blinker) {
scrollToBottom();
}
}, [isSubmitting, text]);
const props = {
className:
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800'
@ -14,15 +29,13 @@ export default function Message({ sender, text, last = false, error = false }) {
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
}
const blinker = isSubmitting && last && sender === 'GPT';
return (
<div {...props}>
<div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<strong className="relative flex w-[30px] flex-col items-end">
{sender === 'GPT' ? (
<div
style={{backgroundColor: 'rgb(16, 163, 127)'}}
style={{ backgroundColor: 'rgb(16, 163, 127)' }}
className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
>
<GPTIcon />
@ -34,7 +47,7 @@ export default function Message({ sender, text, last = false, error = false }) {
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
<div className="flex flex-grow flex-col gap-3">
{!!error ? (
<div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500" >
<div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
<div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
{text}
</div>