mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2025-03-15 22:52:23 +00:00
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>
This commit is contained in:
parent
cf3b085a3a
commit
4d15d4b192
4 changed files with 55 additions and 8 deletions
frontend/src
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Reference in a new issue