From 91cbe0b104e8e43f724446e56c0b86dd8a1173df Mon Sep 17 00:00:00 2001
From: Syed Muzamil <38078427+SyedMuzamilM@users.noreply.github.com>
Date: Sun, 2 Apr 2023 10:41:03 +0530
Subject: [PATCH] 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
---
 components/Chat/Chat.tsx           |  2 +-
 components/Chat/ChatInput.tsx      | 17 +++++++----------
 components/Chatbar/Chatbar.tsx     |  2 +-
 components/Promptbar/Promptbar.tsx |  2 +-
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 67959ae..d5e7a43 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -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} />
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index 072b96b..286883c 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -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...') || ''
diff --git a/components/Chatbar/Chatbar.tsx b/components/Chatbar/Chatbar.tsx
index c542d2c..b764daa 100644
--- a/components/Chatbar/Chatbar.tsx
+++ b/components/Chatbar/Chatbar.tsx
@@ -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}
diff --git a/components/Promptbar/Promptbar.tsx b/components/Promptbar/Promptbar.tsx
index e451c9c..e899859 100644
--- a/components/Promptbar/Promptbar.tsx
+++ b/components/Promptbar/Promptbar.tsx
@@ -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}