klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 13:25:11 +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

8
src/interface/web/app/chat/page.tsx
View File

@@ -119,10 +119,8 @@ export default function Chat() {
welcomeConsole(); welcomeConsole();
const handleWebSocketMessage = (event: MessageEvent) => { const handleWebSocketMessage = (event: MessageEvent) => {
let chunk = event.data; let chunk = event.data;
let currentMessage = messages.find(message => !message.completed); let currentMessage = messages.find(message => !message.completed);
if (!currentMessage) { if (!currentMessage) {
@@ -165,7 +163,6 @@ export default function Chat() {
} finally { } finally {
// no-op // no-op
} }
} else { } else {
// Update the current message with the new chunk // Update the current message with the new chunk
if (chunk && chunk.includes("### compiled references:")) { if (chunk && chunk.includes("### compiled references:")) {
@@ -179,7 +176,6 @@ export default function Chat() {
// If the chunk is not a JSON object, just display it as is // If the chunk is not a JSON object, just display it as is
currentMessage.rawResponse += chunk; currentMessage.rawResponse += chunk;
} }
} }
}; };
// Update the state with the new message, currentMessage // Update the state with the new message, currentMessage
@@ -269,7 +265,9 @@ export default function Chat() {
<SidePanel <SidePanel
webSocketConnected={chatWS !== null} webSocketConnected={chatWS !== null}
conversationId={conversationId} conversationId={conversationId}
uploadedFiles={uploadedFiles} /> uploadedFiles={uploadedFiles}
isMobileWidth={isMobileWidth}
/>
</div> </div>
<div className={styles.chatBox}> <div className={styles.chatBox}>
<NavMenu selected="Chat" title={title} /> <NavMenu selected="Chat" title={title} />

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

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