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

Use the new shadcn sidebar for khoj nav and actions

Browse Source 
- Use the sidebar across all pages to quickly navigate through the app, access settings, and go to past chats
- Pending: mobile friendliness
This commit is contained in:
sabaimran
2024-12-19 20:10:03 -08:00
parent 7eb15bf0a9
commit 68af10c805
16 changed files with 1270 additions and 1353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/interface/web/app/share/chat/page.tsx
View File

@@ -3,7 +3,6 @@
import styles from "./sharedChat.module.css";
import React, { Suspense, useEffect, useRef, useState } from "react";
import SidePanel from "../../components/sidePanel/chatHistorySidePanel";
import ChatHistory from "../../components/chatHistory/chatHistory";
import Loading from "../../components/loading/loading";
@@ -19,6 +18,8 @@ import {
} from "@/app/components/chatInputArea/chatInputArea";
import { StreamMessage } from "@/app/components/chatMessage/chatMessage";
import { AgentData } from "@/app/agents/page";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/app/components/appSidebar/appSidebar";
interface ChatBodyDataProps {
chatOptionsData: ChatOptions | null;
@@ -184,47 +185,43 @@ export default function SharedChat() {
}
return (
<div className={`${styles.main} ${styles.chatLayout}`}>
<title>{title}</title>
<div className={styles.sidePanel}>
<SidePanel
conversationId={conversationId ?? null}
uploadedFiles={[]}
isMobileWidth={isMobileWidth}
/>
</div>
<div className={styles.chatBox}>
<div className={styles.chatBoxBody}>
{!isMobileWidth && title && (
<div
className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8 pt-6 col-auto h-fit`}
>
{title && (
<h2
className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden`}
>
{title}
</h2>
)}
</div>
)}
<Suspense fallback={<Loading />}>
<ChatBodyData
conversationId={conversationId}
streamedMessages={messages}
setQueryToProcess={setQueryToProcess}
isLoggedIn={authenticatedData !== null}
publicConversationSlug={paramSlug}
chatOptionsData={chatOptionsData}
setTitle={setTitle}
setUploadedFiles={setUploadedFiles}
isMobileWidth={isMobileWidth}
setImages={setImages}
/>
</Suspense>
<SidebarProvider>
<AppSidebar conversationId={conversationId || ""} />
<SidebarTrigger />
<div className={`${styles.main} ${styles.chatLayout}`}>
<title>{title}</title>
<div className={styles.chatBox}>
<div className={styles.chatBoxBody}>
{!isMobileWidth && title && (
<div
className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8 pt-6 col-auto h-fit`}
>
{title && (
<h2
className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden`}
>
{title}
</h2>
)}
</div>
)}
<Suspense fallback={<Loading />}>
<ChatBodyData
conversationId={conversationId}
streamedMessages={messages}
setQueryToProcess={setQueryToProcess}
isLoggedIn={authenticatedData !== null}
publicConversationSlug={paramSlug}
chatOptionsData={chatOptionsData}
setTitle={setTitle}
setUploadedFiles={setUploadedFiles}
isMobileWidth={isMobileWidth}
setImages={setImages}
/>
</Suspense>
</div>
</div>
</div>
</div>
</SidebarProvider>
);
}

2
src/interface/web/app/share/chat/sharedChat.module.css
View File

@@ -1,6 +1,8 @@
div.main {
height: 100vh;
color: hsla(var(--foreground));
margin-left: auto;
margin-right: auto;
}
.suggestions {