diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx index 4241ed71e..d542f309f 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 99f133889..85e45d695 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 29dd658a3..54f956008 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 7914da00a..b8562c739 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; + } }, /**