From cb0fb447a794624119c282173106eef84aa63508 Mon Sep 17 00:00:00 2001
From: Mckay Wrigley <mckaywrigley@gmail.com>
Date: Tue, 21 Mar 2023 16:25:42 -0600
Subject: [PATCH] Quocthinhvo/main (#52)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Change scroll bar style in desktop

* new scrollbar

---------

Co-authored-by: Quốc Thịnh Võ <46624702+quocthinhvo@users.noreply.github.com>
---
 components/Chat/ChatInput.tsx |  3 ++-
 styles/globals.css            | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index f84c33e..7993fef 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -63,6 +63,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
     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"}`;
     }
   }, [content]);
 
@@ -75,7 +76,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
           resize: "none",
           bottom: `${textareaRef?.current?.scrollHeight}px`,
           maxHeight: "400px",
-          overflow: "auto"
+          overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 ? "auto" : "hidden"}`
         }}
         placeholder="Type a message..."
         value={content}
diff --git a/styles/globals.css b/styles/globals.css
index b5c61c9..f1218ea 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #aaa;
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: #f2f2f2;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}