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

fix: some ui issues (#346) 

* fix: scroll button not visible in light mode

* fix: sidebar when there is a folder

When a folder is added in the sidebar and there are less items scroll
bar appears. This simple change fixes that behaviour

* fix: small devices regerate/Stop button below input

Below 768px Stop Genrating and Regerate Button remains hidden behind the
input. This is the fix for that
This commit is contained in:
Syed Muzamil 2023-04-02 10:41:03 +05:30 committed by GitHub
parent b7b6bbaaca
commit 91cbe0b104
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Chat/Chat.tsx
View File

@ -318,7 +318,7 @@ export const Chat: FC<Props> = memo(
{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-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"
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} />

17
components/Chat/ChatInput.tsx
View File

@ -214,9 +214,8 @@ export const ChatInput: FC<Props> = ({
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
textareaRef.current.style.overflow = `${
textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
}`;
textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
}`;
}
}, [content]);
@ -242,7 +241,7 @@ export const ChatInput: FC<Props> = ({
<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 left-0 right-0 mx-auto mt-2 flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
className="absolute top-0 left-0 right-0 mb-3 md:mb-0 md:mt-2 mx-auto flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white"
onClick={handleStopConversation}
>
<IconPlayerStop size={16} /> {t('Stop Generating')}
@ -251,7 +250,7 @@ export const ChatInput: FC<Props> = ({
{!messageIsStreaming && !conversationIsEmpty && (
<button
className="absolute left-0 right-0 mx-auto mt-2 flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
className="absolute top-0 left-0 right-0 mb-3 md:mb-0 md:mt-2 mx-auto flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white"
onClick={onRegenerate}
>
<IconRepeat size={16} /> {t('Regenerate response')}
@ -266,11 +265,9 @@ export const ChatInput: FC<Props> = ({
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: '400px',
overflow: `${
textareaRef.current && textareaRef.current.scrollHeight > 400
? 'auto'
: 'hidden'
}`,
overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400
? 'auto' : 'hidden'
}`,
}}
placeholder={
t('Type a message or type "/" to select a prompt...') || ''

2
components/Chatbar/Chatbar.tsx
View File

@ -176,7 +176,7 @@ export const Chatbar: FC<Props> = ({
{conversations.length > 0 ? (
<div
className="h-full pt-2"
className="pt-2"
onDrop={(e) => handleDrop(e)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}

2
components/Promptbar/Promptbar.tsx
View File

@ -151,7 +151,7 @@ export const Promptbar: FC<Props> = ({
{prompts.length > 0 ? (
<div
className="h-full pt-2"
className="pt-2"
onDrop={(e) => handleDrop(e)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}