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

fix: sroll down button overlaping chat input (#564)

This commit is contained in:
Aldo Santiago 2023-04-18 08:28:19 -06:00 committed by GitHub
parent 51fa461965
commit 00f6189a42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/Chat/Chat.tsx
View File

@ -1,4 +1,4 @@
import { IconArrowDown, IconClearAll, IconSettings } from '@tabler/icons-react';
import { IconClearAll, IconSettings } from '@tabler/icons-react';
import {
MutableRefObject,
memo,
@ -492,24 +492,16 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
setCurrentMessage(message);
handleSend(message, 0, plugin);
}}
onScrollDownClick={handleScrollDown}
onRegenerate={() => {
if (currentMessage) {
handleSend(currentMessage, 2, null);
}
}}
showScrollDownButton={showScrollDownButton}
/>
</>
)}
{showScrollDownButton && (
<div className="absolute bottom-0 right-0 mb-4 mr-4 pb-20">
<button
className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
onClick={handleScrollDown}
>
<IconArrowDown size={18} />
</button>
</div>
)}
</div>
);
});

16
components/Chat/ChatInput.tsx
View File

@ -1,4 +1,5 @@
import {
IconArrowDown,
IconBolt,
IconBrandGoogle,
IconPlayerStop,
@ -30,15 +31,19 @@ import { VariableModal } from './VariableModal';
interface Props {
onSend: (message: Message, plugin: Plugin | null) => void;
onRegenerate: () => void;
onScrollDownClick: () => void;
stopConversationRef: MutableRefObject<boolean>;
textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
showScrollDownButton: boolean;
}
export const ChatInput = ({
onSend,
onRegenerate,
onScrollDownClick,
stopConversationRef,
textareaRef,
showScrollDownButton
}: Props) => {
const { t } = useTranslation('chat');
@ -341,6 +346,17 @@ export const ChatInput = ({
)}
</button>
{showScrollDownButton && (
<div className="absolute bottom-12 right-0 lg:bottom-0 lg:-right-10">
<button
className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
onClick={onScrollDownClick}
>
<IconArrowDown size={18} />
</button>
</div>
)}
{showPromptList && filteredPrompts.length > 0 && (
<div className="absolute bottom-12 w-full">
<PromptList