klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 21:29:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Only open side panel as drawer in mobile view

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-07-14 14:08:41 +05:30
parent b47f30ad77
commit 47b754c07b
2 changed files with 8 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
View File

@@ -651,6 +651,7 @@ interface SidePanelProps {
webSocketConnected?: boolean;
conversationId: string | null;
uploadedFiles: string[];
isMobileWidth: boolean;
}
@@ -659,7 +660,6 @@ export default function SidePanel(props: SidePanelProps) {
const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null);
const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
const [enabled, setEnabled] = useState(false);
const [isMobileWidth, setIsMobileWidth] = useState(false);
const authenticatedData = useAuthenticatedData();
const { data: chatSessions } = useChatSessionsFetchRequest(authenticatedData ? `/api/chat/sessions` : '');
@@ -695,28 +695,17 @@ export default function SidePanel(props: SidePanelProps) {
}
});
setSubsetOrganizedData(subsetOrganizedData);
setOrganizedData(groupedData);
}
}, [chatSessions]);
useEffect(() => {
if (window.innerWidth < 768) {
setIsMobileWidth(true);
}
window.addEventListener('resize', () => {
setIsMobileWidth(window.innerWidth < 768);
});
}, []);
return (
<div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed}`}>
<div className="flex items-center justify-between">
<img src="/khoj-logo.svg" alt="logo" className="w-16"/>
{
authenticatedData && isMobileWidth && enabled ?
authenticatedData && props.isMobileWidth ?
<Drawer>
<DrawerTrigger><ArrowRight className="h-4 w-4 mx-2" weight="bold"/></DrawerTrigger>
<DrawerContent>
@@ -734,7 +723,7 @@ export default function SidePanel(props: SidePanelProps) {
uploadedFiles={props.uploadedFiles}
userProfile={authenticatedData}
conversationId={props.conversationId}
isMobileWidth={isMobileWidth}
isMobileWidth={props.isMobileWidth}
/>
</div>
<DrawerFooter>
@@ -751,7 +740,7 @@ export default function SidePanel(props: SidePanelProps) {
}
</div>
{
authenticatedData && enabled &&
authenticatedData && !props.isMobileWidth && enabled &&
<div className={`${styles.panelWrapper}`}>
<SessionsAndFiles
webSocketConnected={props.webSocketConnected}
@@ -762,7 +751,7 @@ export default function SidePanel(props: SidePanelProps) {
uploadedFiles={props.uploadedFiles}
userProfile={authenticatedData}
conversationId={props.conversationId}
isMobileWidth={isMobileWidth}
isMobileWidth={props.isMobileWidth}
/>
</div>
}