highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-03-26 17:51:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Ensure sidepanel defaults sidebar off (#3844)

Browse Source 
* ensure sidepanel defaults sidepanel off

* address comment

* reformat

* initial visible
This commit is contained in:
pablonyx 2025-02-11 14:22:56 -08:00 committed by GitHub
parent 552a0630fe
commit f9485b1325
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 194 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/app/assistants/SidebarWrapper.tsx
View File

@ -33,7 +33,7 @@ export default function SidebarWrapper<T extends object>({
size = "sm",
children,
}: SidebarWrapperProps<T>) {
const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
const [sidebarVisible, setSidebarVisible] = useState(initiallyToggled);
const [showDocSidebar, setShowDocSidebar] = useState(false); // State to track if sidebar is open
// Used to maintain a "time out" for history sidebar so our existing refs can have time to process change
const [untoggled, setUntoggled] = useState(false);
@ -41,13 +41,13 @@ export default function SidebarWrapper<T extends object>({
const toggleSidebar = useCallback(() => {
Cookies.set(
SIDEBAR_TOGGLED_COOKIE_NAME,
String(!toggledSidebar).toLocaleLowerCase()
String(!sidebarVisible).toLocaleLowerCase()
),
{
path: "/",
};
setToggledSidebar((toggledSidebar) => !toggledSidebar);
}, [toggledSidebar]);
setSidebarVisible((sidebarVisible) => !sidebarVisible);
}, [sidebarVisible]);
const sidebarElementRef = useRef<HTMLDivElement>(null);
const { folders, openedFolders, chatSessions } = useChatContext();
@ -63,7 +63,7 @@ export default function SidebarWrapper<T extends object>({
const settings = useContext(SettingsContext);
useSidebarVisibility({
toggledSidebar,
sidebarVisible,
sidebarElementRef,
showDocSidebar,
setShowDocSidebar,
@ -94,7 +94,7 @@ export default function SidebarWrapper<T extends object>({
duration-300
ease-in-out
${
!untoggled && (showDocSidebar || toggledSidebar)
!untoggled && (showDocSidebar || sidebarVisible)
? "opacity-100 w-[250px] translate-x-0"
: "opacity-0 w-[200px] pointer-events-none -translate-x-10"
}`}
@ -107,7 +107,7 @@ export default function SidebarWrapper<T extends object>({
explicitlyUntoggle={explicitlyUntoggle}
ref={sidebarElementRef}
toggleSidebar={toggleSidebar}
toggled={toggledSidebar}
toggled={sidebarVisible}
existingChats={chatSessions}
currentChatSession={null}
folders={folders}
@ -117,7 +117,7 @@ export default function SidebarWrapper<T extends object>({
<div className="absolute px-2 left-0 w-full top-0">
<FunctionalHeader
sidebarToggled={toggledSidebar}
sidebarToggled={sidebarVisible}
toggleSidebar={toggleSidebar}
page="chat"
/>
@ -132,7 +132,7 @@ export default function SidebarWrapper<T extends object>({
bg-opacity-80
duration-300
ease-in-out
${toggledSidebar ? "w-[250px]" : "w-[0px]"}`}
${sidebarVisible ? "w-[250px]" : "w-[0px]"}`}
/>
<div
@ -144,7 +144,7 @@ export default function SidebarWrapper<T extends object>({
</div>
</div>
</div>
<FixedLogo backgroundToggled={toggledSidebar || showDocSidebar} />
<FixedLogo backgroundToggled={sidebarVisible || showDocSidebar} />
</div>
);
}

76
web/src/app/chat/ChatPage.tsx
View File

@ -138,12 +138,12 @@ const SYSTEM_MESSAGE_ID = -3;
export function ChatPage({
toggle,
documentSidebarInitialWidth,
toggledSidebar,
sidebarVisible,
firstMessage,
}: {
toggle: (toggled?: boolean) => void;
documentSidebarInitialWidth?: number;
toggledSidebar: boolean;
sidebarVisible: boolean;
firstMessage?: string;
}) {
const router = useRouter();
@ -204,7 +204,7 @@ export function ChatPage({
const settings = useContext(SettingsContext);
const enterpriseSettings = settings?.enterpriseSettings;
const [documentSidebarToggled, setDocumentSidebarToggled] = useState(false);
const [documentSidebarVisible, setDocumentSidebarVisible] = useState(false);
const [proSearchEnabled, setProSearchEnabled] = useState(proSearchToggled);
const [streamingAllowed, setStreamingAllowed] = useState(false);
const toggleProSearch = () => {
@ -243,7 +243,7 @@ export function ChatPage({
if (user?.is_anonymous_user) {
Cookies.set(
SIDEBAR_TOGGLED_COOKIE_NAME,
String(!toggledSidebar).toLocaleLowerCase()
String(!sidebarVisible).toLocaleLowerCase()
);
toggle(false);
}
@ -1024,10 +1024,10 @@ export function ChatPage({
if (
(!personaIncludesRetrieval &&
(!selectedDocuments || selectedDocuments.length === 0) &&
documentSidebarToggled) ||
documentSidebarVisible) ||
chatSessionIdRef.current == undefined
) {
setDocumentSidebarToggled(false);
setDocumentSidebarVisible(false);
}
clientScrollToBottom();
}, [chatSessionIdRef.current]);
@ -1805,7 +1805,7 @@ export function ChatPage({
}
Cookies.set(
SIDEBAR_TOGGLED_COOKIE_NAME,
String(!toggledSidebar).toLocaleLowerCase()
String(!sidebarVisible).toLocaleLowerCase()
),
{
path: "/",
@ -1822,7 +1822,7 @@ export function ChatPage({
const sidebarElementRef = useRef<HTMLDivElement>(null);
useSidebarVisibility({
toggledSidebar,
sidebarVisible,
sidebarElementRef,
showDocSidebar: showHistorySidebar,
setShowDocSidebar: setShowHistorySidebar,
@ -2003,7 +2003,7 @@ export function ChatPage({
useEffect(() => {
if (!retrievalEnabled) {
setDocumentSidebarToggled(false);
setDocumentSidebarVisible(false);
}
}, [retrievalEnabled]);
@ -2068,10 +2068,10 @@ export function ChatPage({
const [showAssistantsModal, setShowAssistantsModal] = useState(false);
const toggleDocumentSidebar = () => {
if (!documentSidebarToggled) {
setDocumentSidebarToggled(true);
if (!documentSidebarVisible) {
setDocumentSidebarVisible(true);
} else {
setDocumentSidebarToggled(false);
setDocumentSidebarVisible(false);
}
};
@ -2178,11 +2178,11 @@ export function ChatPage({
/>
)}
{retrievalEnabled && documentSidebarToggled && settings?.isMobile && (
{retrievalEnabled && documentSidebarVisible && settings?.isMobile && (
<div className="md:hidden">
<Modal
hideDividerForTitle
onOutsideClick={() => setDocumentSidebarToggled(false)}
onOutsideClick={() => setDocumentSidebarVisible(false)}
title="Sources"
>
<DocumentResults
@ -2198,7 +2198,7 @@ export function ChatPage({
modal={true}
ref={innerSidebarElementRef}
closeSidebar={() => {
setDocumentSidebarToggled(false);
setDocumentSidebarVisible(false);
}}
selectedMessage={aiMessage}
selectedDocuments={selectedDocuments}
@ -2277,8 +2277,10 @@ export function ChatPage({
bg-opacity-80
duration-300
ease-in-out
${
!untoggled && (showHistorySidebar || toggledSidebar)
!untoggled && (showHistorySidebar || sidebarVisible)
? "opacity-100 w-[250px] translate-x-0"
: "opacity-0 w-[250px] pointer-events-none -translate-x-10"
}`}
@ -2291,7 +2293,7 @@ export function ChatPage({
page="chat"
ref={innerSidebarElementRef}
toggleSidebar={toggleSidebar}
toggled={toggledSidebar}
toggled={sidebarVisible}
currentAssistantId={liveAssistant?.id}
existingChats={chatSessions}
currentChatSession={selectedChatSession}
@ -2314,7 +2316,7 @@ export function ChatPage({
duration-300
ease-in-out
${
documentSidebarToggled &&
documentSidebarVisible &&
!settings?.isMobile &&
"opacity-100 w-[350px]"
}`}
@ -2339,7 +2341,7 @@ export function ChatPage({
ease-in-out
h-full
${
documentSidebarToggled && !settings?.isMobile
documentSidebarVisible && !settings?.isMobile
? "w-[400px]"
: "w-[0px]"
}
@ -2358,7 +2360,7 @@ export function ChatPage({
modal={false}
ref={innerSidebarElementRef}
closeSidebar={() =>
setTimeout(() => setDocumentSidebarToggled(false), 300)
setTimeout(() => setDocumentSidebarVisible(false), 300)
}
selectedMessage={aiMessage}
selectedDocuments={selectedDocuments}
@ -2367,12 +2369,12 @@ export function ChatPage({
selectedDocumentTokens={selectedDocumentTokens}
maxTokens={maxTokens}
initialWidth={400}
isOpen={documentSidebarToggled && !settings?.isMobile}
isOpen={documentSidebarVisible && !settings?.isMobile}
/>
</div>
<BlurBackground
visible={!untoggled && (showHistorySidebar || toggledSidebar)}
visible={!untoggled && (showHistorySidebar || sidebarVisible)}
onClick={() => toggleSidebar()}
/>
@ -2387,7 +2389,7 @@ export function ChatPage({
{liveAssistant && (
<FunctionalHeader
toggleUserSettings={() => setUserSettingsToggled(true)}
sidebarToggled={toggledSidebar}
sidebarToggled={sidebarVisible}
reset={() => setMessage("")}
page="chat"
setSharingModalVisible={
@ -2395,8 +2397,8 @@ export function ChatPage({
? setSharingModalVisible
: undefined
}
documentSidebarToggled={
documentSidebarToggled && !settings?.isMobile
documentSidebarVisible={
documentSidebarVisible && !settings?.isMobile
}
toggleSidebar={toggleSidebar}
currentChatSession={selectedChatSession}
@ -2424,7 +2426,7 @@ export function ChatPage({
duration-300
ease-in-out
h-full
${toggledSidebar ? "w-[200px]" : "w-[0px]"}
${sidebarVisible ? "w-[200px]" : "w-[0px]"}
`}
></div>
)}
@ -2450,7 +2452,7 @@ export function ChatPage({
duration-300
ease-in-out
h-full
${toggledSidebar ? "w-[200px]" : "w-[0px]"}
${sidebarVisible ? "w-[200px]" : "w-[0px]"}
`}
></div>
)}
@ -2636,7 +2638,7 @@ export function ChatPage({
message.sub_questions.length > 0 ? (
<AgenticMessage
docSidebarToggled={
documentSidebarToggled &&
documentSidebarVisible &&
(selectedMessageForDocDisplay ==
message.messageId ||
selectedMessageForDocDisplay ==
@ -2740,8 +2742,8 @@ export function ChatPage({
) => {
if (
(!second &&
!documentSidebarToggled) ||
(documentSidebarToggled &&
!documentSidebarVisible) ||
(documentSidebarVisible &&
selectedMessageForDocDisplay ===
message.messageId)
) {
@ -2749,8 +2751,8 @@ export function ChatPage({
}
if (
(second &&
!documentSidebarToggled) ||
(documentSidebarToggled &&
!documentSidebarVisible) ||
(documentSidebarVisible &&
selectedMessageForDocDisplay ===
secondLevelMessage?.messageId)
) {
@ -2851,8 +2853,8 @@ export function ChatPage({
selectedDocuments={selectedDocuments}
toggleDocumentSelection={() => {
if (
!documentSidebarToggled ||
(documentSidebarToggled &&
!documentSidebarVisible ||
(documentSidebarVisible &&
selectedMessageForDocDisplay ===
message.messageId)
) {
@ -3147,7 +3149,7 @@ export function ChatPage({
ease-in-out
h-full
${
documentSidebarToggled && !settings?.isMobile
documentSidebarVisible && !settings?.isMobile
? "w-[350px]"
: "w-[0px]"
}
@ -3162,7 +3164,7 @@ export function ChatPage({
style={{ transition: "width 0.30s ease-out" }}
className={`flex-none bg-transparent transition-all bg-opacity-80 duration-300 ease-in-out h-full
${
toggledSidebar && !settings?.isMobile
sidebarVisible && !settings?.isMobile
? "w-[250px] "
: "w-[0px]"
}`}
@ -3174,7 +3176,7 @@ export function ChatPage({
)}
</div>
</div>
<FixedLogo backgroundToggled={toggledSidebar || showHistorySidebar} />
<FixedLogo backgroundToggled={sidebarVisible || showHistorySidebar} />
</div>
{/* Right Sidebar - DocumentSidebar */}
</div>

12
web/src/app/chat/WrappedChat.tsx
View File

@ -5,18 +5,22 @@ import FunctionalWrapper from "../../components/chat/FunctionalWrapper";
export default function WrappedChat({
firstMessage,
defaultSidebarOff,
}: {
firstMessage?: string;
// This is required for the chrome extension side panel
// we don't want to show the sidebar by default when the user opens the side panel
defaultSidebarOff?: boolean;
}) {
const { toggledSidebar } = useChatContext();
const { sidebarInitiallyVisible } = useChatContext();
return (
<FunctionalWrapper
initiallyToggled={toggledSidebar}
content={(toggledSidebar, toggle) => (
initiallyVisible={sidebarInitiallyVisible && !defaultSidebarOff}
content={(sidebarVisible, toggle) => (
<ChatPage
toggle={toggle}
toggledSidebar={toggledSidebar}
sidebarVisible={sidebarVisible}
firstMessage={firstMessage}
/>
)}

4
web/src/app/chat/layout.tsx
View File

@ -31,7 +31,7 @@ export default async function Layout({
llmProviders,
folders,
openedFolders,
toggleSidebar,
sidebarInitiallyVisible,
defaultAssistantId,
shouldShowWelcomeModal,
ccPairs,
@ -47,7 +47,7 @@ export default async function Layout({
proSearchToggled,
inputPrompts,
chatSessions,
toggledSidebar: toggleSidebar,
sidebarInitiallyVisible,
availableSources,
ccPairs,
documentSets,

6
web/src/app/chat/message/Messages.tsx
View File

@ -185,7 +185,7 @@ export const AIMessage = ({
onMessageSelection,
setPresentingDocument,
index,
toggledDocumentSidebar,
documentSidebarVisible,
}: {
index?: number;
shared?: boolean;
@ -205,7 +205,7 @@ export const AIMessage = ({
citedDocuments?: [string, OnyxDocument][] | null;
toolCall?: ToolCallMetadata | null;
isComplete?: boolean;
toggledDocumentSidebar?: boolean;
documentSidebarVisible?: boolean;
hasDocs?: boolean;
handleFeedback?: (feedbackType: FeedbackType) => void;
handleSearchQueryEdit?: (query: string) => void;
@ -508,7 +508,7 @@ export const AIMessage = ({
/>
))}
<SeeMoreBlock
toggled={toggledDocumentSidebar!}
toggled={documentSidebarVisible!}
toggleDocumentSelection={toggleDocumentSelection!}
docs={docs}
webSourceDomains={webSourceDomains}

1
web/src/app/chat/modal/UserSettingsModal.tsx
View File

@ -39,7 +39,6 @@ export function UserSettingsModal({
onClose: () => void;
defaultModel: string | null;
}) {
const { inputPrompts, refreshInputPrompts } = useChatContext();
const {
refreshUser,
user,

10
web/src/app/chat/page.tsx
View File

@ -1,3 +1,4 @@
import { SEARCH_PARAMS } from "@/lib/extension/constants";
import WrappedChat from "./WrappedChat";
export default async function Page(props: {
@ -5,6 +6,13 @@ export default async function Page(props: {
}) {
const searchParams = await props.searchParams;
const firstMessage = searchParams.firstMessage;
const defaultSidebarOff =
searchParams[SEARCH_PARAMS.DEFAULT_SIDEBAR_OFF] === "true";
return <WrappedChat firstMessage={firstMessage} />;
return (
<WrappedChat
firstMessage={firstMessage}
defaultSidebarOff={defaultSidebarOff}
/>
);
}

48
web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
View File

@ -21,13 +21,13 @@ import TextView from "@/components/chat/TextView";
import { DocumentResults } from "../../documentSidebar/DocumentResults";
import { Modal } from "@/components/Modal";
import FunctionalHeader from "@/components/chat/Header";
import FixedLogo from "../../../../components/logo/FixedLogo";
import FixedLogo from "@/components/logo/FixedLogo";
import { useRouter } from "next/navigation";
function BackToOnyxButton({
documentSidebarToggled,
documentSidebarVisible,
}: {
documentSidebarToggled: boolean;
documentSidebarVisible: boolean;
}) {
const router = useRouter();
const enterpriseSettings = useContext(SettingsContext)?.enterpriseSettings;
@ -47,7 +47,7 @@ function BackToOnyxButton({
transition-all
duration-300
ease-in-out
${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
${documentSidebarVisible ? "w-[400px]" : "w-[0px]"}
`}
></div>
</div>
@ -62,7 +62,7 @@ export function SharedChatDisplay({
persona: Persona;
}) {
const settings = useContext(SettingsContext);
const [documentSidebarToggled, setDocumentSidebarToggled] = useState(false);
const [documentSidebarVisible, setDocumentSidebarVisible] = useState(false);
const [selectedMessageForDocDisplay, setSelectedMessageForDocDisplay] =
useState<number | null>(null);
const [isReady, setIsReady] = useState(false);
@ -70,7 +70,7 @@ export function SharedChatDisplay({
useState<OnyxDocument | null>(null);
const toggleDocumentSidebar = () => {
setDocumentSidebarToggled(!documentSidebarToggled);
setDocumentSidebarVisible(!documentSidebarVisible);
};
useEffect(() => {
@ -85,7 +85,7 @@ export function SharedChatDisplay({
Did not find a shared chat with the specified ID.
</Callout>
</div>
<BackToOnyxButton documentSidebarToggled={documentSidebarToggled} />
<BackToOnyxButton documentSidebarVisible={documentSidebarVisible} />
</div>
);
}
@ -102,7 +102,7 @@ export function SharedChatDisplay({
onClose={() => setPresentingDocument(null)}
/>
)}
{documentSidebarToggled && settings?.isMobile && (
{documentSidebarVisible && settings?.isMobile && (
<div className="md:hidden">
<Modal noPadding noScroll>
<DocumentResults
@ -117,7 +117,7 @@ export function SharedChatDisplay({
: null
}
toggleDocumentSelection={() => {
setDocumentSidebarToggled(true);
setDocumentSidebarVisible(true);
}}
selectedDocuments={[]}
clearSelectedDocuments={() => {}}
@ -128,7 +128,7 @@ export function SharedChatDisplay({
setPresentingDocument={setPresentingDocument}
modal={true}
closeSidebar={() => {
setDocumentSidebarToggled(false);
setDocumentSidebarVisible(false);
}}
/>
</Modal>
@ -158,7 +158,7 @@ export function SharedChatDisplay({
duration-300
ease-in-out
h-full
${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
${documentSidebarVisible ? "w-[400px]" : "w-[0px]"}
`}
>
<DocumentResults
@ -174,7 +174,7 @@ export function SharedChatDisplay({
: null
}
toggleDocumentSelection={() => {
setDocumentSidebarToggled(true);
setDocumentSidebarVisible(true);
}}
clearSelectedDocuments={() => {}}
selectedDocumentTokens={0}
@ -183,7 +183,7 @@ export function SharedChatDisplay({
isOpen={true}
setPresentingDocument={setPresentingDocument}
closeSidebar={() => {
setDocumentSidebarToggled(false);
setDocumentSidebarVisible(false);
}}
selectedDocuments={[]}
/>
@ -214,7 +214,7 @@ export function SharedChatDisplay({
bg-gradient-to-b via-50% z-[-1] from-background via-background to-background/10 flex
transition-all duration-300 ease-in-out
${
documentSidebarToggled
documentSidebarVisible
? "left-[200px] transform -translate-x-[calc(50%+100px)]"
: "left-1/2 transform -translate-x-1/2"
}
@ -311,13 +311,13 @@ export function SharedChatDisplay({
selectedDocuments={[]}
toggleDocumentSelection={() => {
if (
!documentSidebarToggled ||
(documentSidebarToggled &&
!documentSidebarVisible ||
(documentSidebarVisible &&
selectedMessageForDocDisplay ===
message.messageId)
) {
setDocumentSidebarToggled(
!documentSidebarToggled
setDocumentSidebarVisible(
!documentSidebarVisible
);
}
setSelectedMessageForDocDisplay(
@ -351,13 +351,13 @@ export function SharedChatDisplay({
selectedDocuments={[]}
toggleDocumentSelection={() => {
if (
!documentSidebarToggled ||
(documentSidebarToggled &&
!documentSidebarVisible ||
(documentSidebarVisible &&
selectedMessageForDocDisplay ===
message.messageId)
) {
setDocumentSidebarToggled(
!documentSidebarToggled
setDocumentSidebarVisible(
!documentSidebarVisible
);
}
setSelectedMessageForDocDisplay(
@ -404,7 +404,7 @@ export function SharedChatDisplay({
transition-all
duration-300
ease-in-out
${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
${documentSidebarVisible ? "w-[400px]" : "w-[0px]"}
`}
></div>
)}
@ -412,7 +412,7 @@ export function SharedChatDisplay({
</div>
<FixedLogo backgroundToggled={false} />
<BackToOnyxButton documentSidebarToggled={documentSidebarToggled} />
<BackToOnyxButton documentSidebarVisible={documentSidebarVisible} />
</div>
</div>
</>

65
web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx Normal file
View File

@ -0,0 +1,65 @@
"use client";
import React, { ReactNode, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
export default function FunctionalWrapper({
sidebarInitiallyVisible,
content,
}: {
content: (
sidebarVisible: boolean,
toggle: (toggled?: boolean) => void
) => ReactNode;
sidebarInitiallyVisible: boolean;
}) {
const router = useRouter();
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.metaKey || event.ctrlKey) {
const newPage = event.shiftKey;
switch (event.key.toLowerCase()) {
case "d":
event.preventDefault();
if (newPage) {
window.open("/chat", "_blank");
} else {
router.push("/chat");
}
break;
case "s":
event.preventDefault();
if (newPage) {
window.open("/search", "_blank");
} else {
router.push("/search");
}
break;
}
}
};
window.addEventListener("keydown", handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, [router]);
const [sidebarVisible, setSidebarVisible] = useState(sidebarInitiallyVisible);
const toggle = (value?: boolean) => {
setSidebarVisible((sidebarVisible) =>
value !== undefined ? value : !sidebarVisible
);
};
return (
<>
{" "}
<div className="overscroll-y-contain overflow-y-scroll overscroll-contain left-0 top-0 w-full h-svh">
{content(sidebarVisible, toggle)}
</div>
</>
);
}

4
web/src/app/ee/assistants/stats/[id]/page.tsx
View File

@ -26,7 +26,7 @@ export default async function GalleryPage(props: {
chatSessions,
folders,
openedFolders,
toggleSidebar,
sidebarInitiallyVisible,
shouldShowWelcomeModal,
availableSources,
ccPairs,
@ -43,8 +43,8 @@ export default async function GalleryPage(props: {
value={{
inputPrompts,
chatSessions,
toggledSidebar: toggleSidebar,
proSearchToggled,
sidebarInitiallyVisible,
availableSources,
ccPairs,
documentSets,

4
web/src/components/admin/Layout.tsx
View File

@ -57,7 +57,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
llmProviders,
folders,
openedFolders,
toggleSidebar,
sidebarInitiallyVisible,
defaultAssistantId,
shouldShowWelcomeModal,
ccPairs,
@ -71,7 +71,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
inputPrompts,
chatSessions,
proSearchToggled,
toggledSidebar: toggleSidebar,
sidebarInitiallyVisible,
availableSources,
ccPairs,
documentSets,

18
web/src/components/chat/FunctionalWrapper.tsx
View File

@ -3,27 +3,29 @@
import React, { ReactNode, useState } from "react";
export default function FunctionalWrapper({
initiallyToggled,
initiallyVisible,
content,
}: {
content: (
toggledSidebar: boolean,
toggle: (toggled?: boolean) => void
sidebarVisible: boolean,
toggle: (visible?: boolean) => void
) => ReactNode;
initiallyToggled: boolean;
initiallyVisible?: boolean;
}) {
const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
const [sidebarVisible, setSidebarVisible] = useState(
initiallyVisible || false
);
const toggle = (value?: boolean) => {
setToggledSidebar((toggledSidebar) =>
value !== undefined ? value : !toggledSidebar
setSidebarVisible((sidebarVisible) =>
value !== undefined ? value : !sidebarVisible
);
};
return (
<>
<div className="overscroll-y-contain overflow-y-scroll overscroll-contain left-0 top-0 w-full h-svh">
{content(toggledSidebar, toggle)}
{content(sidebarVisible, toggle)}
</div>
</>
);

15
web/src/components/chat/Header.tsx
View File

@ -17,7 +17,7 @@ export default function FunctionalHeader({
currentChatSession,
setSharingModalVisible,
toggleSidebar = () => null,
documentSidebarToggled,
documentSidebarVisible,
reset = () => null,
sidebarToggled,
toggleUserSettings,
@ -31,7 +31,7 @@ export default function FunctionalHeader({
toggleSidebar?: () => void;
toggleUserSettings?: () => void;
hideUserDropdown?: boolean;
documentSidebarToggled?: boolean;
documentSidebarVisible?: boolean;
}) {
const settings = useContext(SettingsContext);
useEffect(() => {
@ -89,6 +89,7 @@ export default function FunctionalHeader({
duration-300
ease-in-out
h-full
${sidebarToggled ? "w-[250px]" : "w-[0px]"}
`}
/>
@ -97,19 +98,19 @@ export default function FunctionalHeader({
className={`
absolute
${
documentSidebarToggled &&
documentSidebarVisible &&
sidebarToggled &&
"left-[calc(50%-75px)]"
}
${
documentSidebarToggled && !sidebarToggled
documentSidebarVisible && !sidebarToggled
? "left-[calc(50%-175px)]"
: !documentSidebarToggled && sidebarToggled
: !documentSidebarVisible && sidebarToggled
? "left-[calc(50%+100px)]"
: "left-1/2"
}
${
documentSidebarToggled || sidebarToggled
documentSidebarVisible || sidebarToggled
? "mobile:w-[40vw] max-w-[40vw]"
: "mobile:w-[50vw] max-w-[60vw]"
}
@ -190,7 +191,7 @@ export default function FunctionalHeader({
duration-300
ease-in-out
h-full
${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
${documentSidebarVisible ? "w-[400px]" : "w-[0px]"}
`}
/>
</div>

8
web/src/components/chat/hooks.ts
View File

@ -1,7 +1,7 @@
import { Dispatch, SetStateAction, useEffect, useRef } from "react";
interface UseSidebarVisibilityProps {
toggledSidebar: boolean;
sidebarVisible: boolean;
sidebarElementRef: React.RefObject<HTMLElement>;
showDocSidebar: boolean;
setShowDocSidebar: Dispatch<SetStateAction<boolean>>;
@ -11,7 +11,7 @@ interface UseSidebarVisibilityProps {
}
export const useSidebarVisibility = ({
toggledSidebar,
sidebarVisible,
sidebarElementRef,
setShowDocSidebar,
setToggled,
@ -55,7 +55,7 @@ export const useSidebarVisibility = ({
currentXPosition > 100 &&
showDocSidebar &&
!isWithinSidebar &&
!toggledSidebar
!sidebarVisible
) {
setTimeout(() => {
setShowDocSidebar((showDocSidebar) => {
@ -88,7 +88,7 @@ export const useSidebarVisibility = ({
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [showDocSidebar, toggledSidebar, sidebarElementRef, mobile]);
}, [showDocSidebar, sidebarVisible, sidebarElementRef, mobile]);
return { showDocSidebar };
};

2
web/src/components/context/ChatContext.tsx
View File

@ -16,7 +16,7 @@ import { useRouter } from "next/navigation";
interface ChatContextProps {
chatSessions: ChatSession[];
toggledSidebar: boolean;
sidebarInitiallyVisible: boolean;
availableSources: ValidSources[];
ccPairs: CCPairBasicInfo[];
tags: Tag[];

6
web/src/lib/chat/fetchChatData.ts
View File

@ -42,7 +42,7 @@ interface FetchChatDataResult {
folders: Folder[];
openedFolders: Record<string, boolean>;
defaultAssistantId?: number;
toggleSidebar: boolean;
sidebarInitiallyVisible: boolean;
finalDocumentSidebarInitialWidth?: number;
shouldShowWelcomeModal: boolean;
inputPrompts: InputPrompt[];
@ -182,7 +182,7 @@ export async function fetchChatData(searchParams: {
"true";
// IF user is an anoymous user, we don't want to show the sidebar (they have no access to chat history)
const toggleSidebar =
const sidebarInitiallyVisible =
!user?.is_anonymous_user &&
(sidebarToggled
? sidebarToggled.value.toLocaleLowerCase() == "true" || false
@ -230,7 +230,7 @@ export async function fetchChatData(searchParams: {
openedFolders,
defaultAssistantId,
finalDocumentSidebarInitialWidth,
toggleSidebar,
sidebarInitiallyVisible,
shouldShowWelcomeModal,
inputPrompts,
proSearchToggled,

4
web/src/lib/extension/constants.ts
View File

@ -31,3 +31,7 @@ export const LocalStorageKeys = {
SHOW_SHORTCUTS: "showShortcuts",
USE_ONYX_AS_NEW_TAB: "useOnyxAsDefaultNewTab",
};
export const SEARCH_PARAMS = {
DEFAULT_SIDEBAR_OFF: "defaultSidebarOff",
};