From 4d15d4b1926e22ff56d3c5983913a48584a60398 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Tue, 12 Nov 2024 10:23:30 -0800
Subject: [PATCH] Fix chat window scrollbar appearance option (#2589)

* wip fix chat window scrollbar

* fix chat/default chat window scrollbare option

* lint

* small lint and refactor

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
 frontend/src/components/DefaultChat/index.jsx |  6 ++-
 .../ChatContainer/ChatHistory/index.jsx       |  4 +-
 frontend/src/index.css                        | 44 +++++++++++++++++--
 frontend/src/models/appearance.js             |  9 +++-
 4 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 4241ed71ea..d542f309fd 100644
--- a/frontend/src/components/DefaultChat/index.jsx
+++ b/frontend/src/components/DefaultChat/index.jsx
@@ -18,8 +18,10 @@ import { userFromStorage } from "@/utils/request";
 import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import useUser from "@/hooks/useUser";
 import { useTranslation, Trans } from "react-i18next";
+import Appearance from "@/models/appearance";
 
 export default function DefaultChatContainer() {
+  const { showScrollbar } = Appearance.getSettings();
   const [mockMsgs, setMockMessages] = useState([]);
   const { user } = useUser();
   const [fetchedMessages, setFetchedMessages] = useState([]);
@@ -305,7 +307,9 @@ export default function DefaultChatContainer() {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+      className={`relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full border-2 border-outline overflow-y-scroll ${
+        showScrollbar ? "show-scrollbar" : "no-scroll"
+      }`}
     >
       {isMobile && <SidebarMobileHeader />}
       {fetchedMessages.length === 0
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
index 99f133889d..85e45d695f 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
@@ -28,8 +28,8 @@ export default function ChatHistory({
   const chatHistoryRef = useRef(null);
   const [textSize, setTextSize] = useState("normal");
   const [isUserScrolling, setIsUserScrolling] = useState(false);
-  const showScrollbar = Appearance.getSettings()?.showScrollbar || false;
   const isStreaming = history[history.length - 1]?.animate;
+  const { showScrollbar } = Appearance.getSettings();
 
   const getTextSizeClass = (size) => {
     switch (size) {
@@ -205,7 +205,7 @@ export default function ChatHistory({
   return (
     <div
       className={`markdown text-white/80 font-light ${textSize} h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start ${
-        showScrollbar ? "" : "no-scroll"
+        showScrollbar ? "show-scrollbar" : "no-scroll"
       }`}
       id="chat-history"
       ref={chatHistoryRef}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 29dd658a3a..54f9560088 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -244,15 +244,53 @@ a {
   }
 }
 
-#chat-history::-webkit-scrollbar,
+.show-scrollbar {
+  overflow-y: scroll !important;
+  scrollbar-width: thin !important;
+  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.1) !important;
+  -webkit-overflow-scrolling: touch !important;
+}
+
+.show-scrollbar::-webkit-scrollbar {
+  width: 8px !important;
+  display: block !important;
+  background: transparent !important;
+}
+
+.show-scrollbar::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1) !important;
+  margin: 3px !important;
+  border-radius: 4px !important;
+}
+
+.show-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.3) !important;
+  border-radius: 4px !important;
+  border: none !important;
+  min-height: 40px !important;
+}
+
+.show-scrollbar::-webkit-scrollbar,
+.show-scrollbar::-webkit-scrollbar-thumb,
+.show-scrollbar::-webkit-scrollbar-track {
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.show-scrollbar,
+.show-scrollbar::-webkit-scrollbar,
+.show-scrollbar::-webkit-scrollbar-thumb,
+.show-scrollbar::-webkit-scrollbar-track {
+  transition: none !important;
+  animation: none !important;
+}
+
 #chat-container::-webkit-scrollbar,
 .no-scroll::-webkit-scrollbar {
   display: none !important;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
-#chat-history,
-#chat-container,
 .no-scroll {
   -ms-overflow-style: none !important;
   /* IE and Edge */
diff --git a/frontend/src/models/appearance.js b/frontend/src/models/appearance.js
index 7914da00a7..b8562c7392 100644
--- a/frontend/src/models/appearance.js
+++ b/frontend/src/models/appearance.js
@@ -1,13 +1,18 @@
 import { APPEARANCE_SETTINGS } from "@/utils/constants";
 
 const Appearance = {
+  defaultSettings: { showScrollbar: false },
   /**
    * Fetches any locally storage settings for the user
    * @returns {{showScrollbar: boolean}}
    */
   getSettings: () => {
-    const settings = localStorage.getItem(APPEARANCE_SETTINGS);
-    return settings ? JSON.parse(settings) : { showScrollbar: false };
+    try {
+      const settings = localStorage.getItem(APPEARANCE_SETTINGS);
+      return settings ? JSON.parse(settings) : Appearance.defaultSettings;
+    } catch (e) {
+      return Appearance.defaultSettings;
+    }
   },
 
   /**