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 && ( {showScrollDownButton && (
<div className="absolute bottom-0 right-0 mb-4 mr-4 pb-20"> <div className="absolute bottom-0 right-0 mb-4 mr-4 pb-20">
<button <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} onClick={handleScrollDown}
> >
<IconArrowDown size={18} /> <IconArrowDown size={18} />

13
components/Chat/ChatInput.tsx
View File

@ -214,8 +214,7 @@ export const ChatInput: FC<Props> = ({
if (textareaRef && textareaRef.current) { if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit'; textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`; textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
textareaRef.current.style.overflow = `${ textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
}`; }`;
} }
}, [content]); }, [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"> <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 && ( {messageIsStreaming && (
<button <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} onClick={handleStopConversation}
> >
<IconPlayerStop size={16} /> {t('Stop Generating')} <IconPlayerStop size={16} /> {t('Stop Generating')}
@ -251,7 +250,7 @@ export const ChatInput: FC<Props> = ({
{!messageIsStreaming && !conversationIsEmpty && ( {!messageIsStreaming && !conversationIsEmpty && (
<button <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} onClick={onRegenerate}
> >
<IconRepeat size={16} /> {t('Regenerate response')} <IconRepeat size={16} /> {t('Regenerate response')}
@ -266,10 +265,8 @@ export const ChatInput: FC<Props> = ({
resize: 'none', resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`, bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: '400px', maxHeight: '400px',
overflow: `${ overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400
textareaRef.current && textareaRef.current.scrollHeight > 400 ? 'auto' : 'hidden'
? 'auto'
: 'hidden'
}`, }`,
}} }}
placeholder={ placeholder={

2
components/Chatbar/Chatbar.tsx
View File

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

2
components/Promptbar/Promptbar.tsx
View File

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