sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats 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();
const handleWebSocketMessage = (event: MessageEvent) => {
let chunk = event.data;
let currentMessage = messages.find(message => !message.completed);
if (!currentMessage) {
@ -165,7 +163,6 @@ export default function Chat() {
} finally {
// no-op
}
} else {
// Update the current message with the new chunk
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
currentMessage.rawResponse += chunk;
}
}
};
// Update the state with the new message, currentMessage
@ -269,7 +265,9 @@ export default function Chat() {
<SidePanel
webSocketConnected={chatWS !== null}
conversationId={conversationId}
uploadedFiles={uploadedFiles} />
uploadedFiles={uploadedFiles}
isMobileWidth={isMobileWidth}
/>
</div>
<div className={styles.chatBox}>
<NavMenu selected="Chat" title={title} />

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>
}