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

Update nav menu styling to include everything in one header

Browse source 
- Move the nav menu into the chat history side panel component, so that they both show up on one line
- Update all pages to use it with the new formatting
- in mobile, present the sidebar button, home button, and profile button evenly centered in the middle
This commit is contained in:
sabaimran 2024-08-02 17:46:13 +05:30 • committed by Debanjum Singh Solanky
parent e62888659f
commit 07b3bdf181
13 changed files with 183 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/interface/web/app/agents/agents.module.css
View file

@ -46,7 +46,7 @@ div.agentList {
}
@media only screen and (max-width: 700px) {
@media only screen and (max-width: 768px) {
div.agentList {
width: 100%;
padding: 0;
@ -54,4 +54,9 @@ div.agentList {
margin-left: auto;
grid-template-columns: 1fr;
}
div.sidePanel {
position: relative;
height: 100%;
}
}

5
src/interface/web/app/agents/page.tsx
View file

@ -266,9 +266,6 @@ export default function Agents() {
return (
<main className={`${styles.main} w-full mx-auto`}>
<div className="float-right w-fit h-fit">
<NavMenu selected="Agents" />
</div>
{
showLoginPrompt &&
<LoginPrompt
@ -284,7 +281,7 @@ export default function Agents() {
/>
</div>
<div className={`mx-auto ${isMobileWidth ? "w-11/12" : "w-1/2"} pt-4`}>
<div className="pt-8 flex justify-between align-middle w-full">
<div className={`pt-4 md:pt-8 flex justify-between align-middle w-full`}>
<h1 className="text-3xl">Agents</h1>
<div className="ml-auto float-right border p-2 pt-3 rounded-xl font-bold hover:bg-stone-100 dark:hover:bg-neutral-900">
<TooltipProvider>

5
src/interface/web/app/automations/automations.module.css
View file

@ -28,4 +28,9 @@ div.sidePanel {
div.pageLayout {
max-width: 90vw;
}
div.sidePanel {
position: relative;
height: 100%;
}
}

5
src/interface/web/app/automations/page.tsx
View file

@ -936,9 +936,6 @@ export default function Automations() {
return (
<main className={`${styles.main} w-full ml-auto mr-auto`}>
<div className="float-right w-fit h-fit">
<NavMenu selected="Automations" />
</div>
<div className={`grid w-full ml-auto mr-auto`}>
<div className={`${styles.sidePanel} top-0`}>
<SidePanel
@ -949,7 +946,7 @@ export default function Automations() {
</div>
<div className={`${styles.pageLayout} w-full`}>
<div className='py-4 sm:flex sm:justify-between grid gap-1'>
<h1 className="text-3xl">Automations</h1>
<h1 className="text-3xl pt-4">Automations</h1>
<div className='flex flex-wrap gap-2 items-center md:justify-start justify-end'>
{
authenticatedData ? (

36
src/interface/web/app/chat/page.tsx
View file

@ -196,7 +196,7 @@ export default function Chat() {
}
// Track context used for chat response. References are rendered at the end of the chat
({context, onlineContext} = processMessageChunk(event, currentMessage, context, onlineContext));
({ context, onlineContext } = processMessageChunk(event, currentMessage, context, onlineContext));
setMessages([...messages]);
}
@ -231,16 +231,34 @@ export default function Chat() {
<title>
{title}
</title>
<div>
<SidePanel
conversationId={conversationId}
uploadedFiles={uploadedFiles}
isMobileWidth={isMobileWidth}
/>
</div>
{
!isMobileWidth &&
<div>
<SidePanel
conversationId={conversationId}
uploadedFiles={uploadedFiles}
isMobileWidth={isMobileWidth}
/>
</div>
}
<div className={styles.chatBox}>
<NavMenu selected="Chat" title={title} />
{
isMobileWidth &&
<div>
<SidePanel
conversationId={conversationId}
uploadedFiles={uploadedFiles}
isMobileWidth={isMobileWidth}
/>
</div>
}
<div className={styles.chatBoxBody}>
{
!isMobileWidth &&
<div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}>
{title && <h2 className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden pt-4`}>{title}</h2>}
</div>
}
<Suspense fallback={<Loading />}>
<ChatBodyData
isLoggedIn={authenticatedData !== null}

4
src/interface/web/app/components/navMenu/navMenu.module.css
View file

@ -17,10 +17,6 @@ a.selected {
div.titleBar {
display: flex;
padding-left: 12px;
padding-right: 12px;
padding-top: 16px;
padding-bottom: 16px;
justify-content: space-between;
align-content: space-evenly;
align-items: start;

30
src/interface/web/app/components/navMenu/navMenu.tsx
View file

@ -23,35 +23,16 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Moon, Sun, UserCircle, User, Robot, MagnifyingGlass, Question, GearFine, ArrowRight } from '@phosphor-icons/react';
import { KhojLogoType } from '../logo/khogLogo';
interface NavMenuProps {
selected: string;
showLogo?: boolean;
title?: string;
}
export default function NavMenu(props: NavMenuProps) {
export default function NavMenu() {
const userData = useAuthenticatedData();
const [displayTitle, setDisplayTitle] = useState<string | undefined>(props.title);
const [isMobileWidth, setIsMobileWidth] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const [initialLoadDone, setInitialLoadDone] = useState(false);
useEffect(() => {
setIsMobileWidth(window.innerWidth < 768);
if (props.title) {
setDisplayTitle(props.title);
} else if (!props.title) {
setDisplayTitle(undefined);
}
}, [props.title]);
useEffect(() => {
window.addEventListener('resize', () => {
setIsMobileWidth(window.innerWidth < 768);
@ -94,15 +75,6 @@ export default function NavMenu(props: NavMenuProps) {
return (
<div className={styles.titleBar}>
<div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}>
{displayTitle && <h2 className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden`} >{displayTitle}</h2>}
{
!displayTitle && props.showLogo &&
<Link href='/'>
<KhojLogoType />
</Link>
}
</div>
{
isMobileWidth ?
<DropdownMenu>

38
src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
View file

@ -76,6 +76,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
import { KhojLogo, KhojLogoType } from "@/app/components/logo/khogLogo";
import NavMenu from "../navMenu/navMenu";
// Define a fetcher function
const fetcher = (url: string) => fetch(url).then((res) => res.json());
@ -660,11 +661,8 @@ export default function SidePanel(props: SidePanelProps) {
}, [chatSessions]);
return (
<div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed} mt-1`}>
<div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed} ${props.isMobileWidth ? 'mt-0' : 'mt-1'}`}>
<div className={`flex justify-between flex-row`}>
<Link href='/'>
{props.isMobileWidth && <KhojLogo /> || <KhojLogoType />}
</Link>
{
authenticatedData && props.isMobileWidth ?
<Drawer open={enabled} onOpenChange={(open) => {
@ -672,7 +670,7 @@ export default function SidePanel(props: SidePanelProps) {
setEnabled(open);
}
}>
<DrawerTrigger><Sidebar className="h-4 w-4 mx-2" weight="thin" /></DrawerTrigger>
<DrawerTrigger><Sidebar className="h-6 w-6 mx-2" weight="thin" /></DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Sessions and Files</DrawerTitle>
@ -698,15 +696,33 @@ export default function SidePanel(props: SidePanelProps) {
</DrawerContent>
</Drawer>
:
<div className={`${enabled ? 'flex items-center flex-row gap-2' : 'flex'}`}>
<Link className={`ml-4 mr-4`} href="/">
{enabled ? <NotePencil className="h-6 w-6" /> : <NotePencil className="h-6 w-6" color="gray" />}
<div className={`flex justify-between flex-row`}>
<Link href='/' className="content-center">
<KhojLogoType />
</Link>
<button className={styles.button} onClick={() => setEnabled(!enabled)}>
{enabled ? <Sidebar className="h-6 w-6" /> : <Sidebar className="h-6 w-6" color="gray" />}
</button>
<div className={`${enabled ? 'flex items-center flex-row gap-2' : 'flex items-center'}`}>
<Link className={`ml-4 mr-4`} href="/">
{enabled ? <NotePencil className="h-6 w-6" /> : <NotePencil className="h-6 w-6" color="gray" />}
</Link>
<button className={styles.button} onClick={() => setEnabled(!enabled)}>
{enabled ? <Sidebar className="h-6 w-6" /> : <Sidebar className="h-6 w-6" color="gray" />}
</button>
</div>
<div className="fixed right-0 w-fit h-fit">
<NavMenu />
</div>
</div>
}
{
props.isMobileWidth &&
<Link href='/' className="content-center">
<KhojLogoType />
</Link>
}
{
props.isMobileWidth &&
<NavMenu />
}
</div>
{
authenticatedData && !props.isMobileWidth && enabled &&

6
src/interface/web/app/components/sidePanel/sidePanel.module.css
View file

@ -123,9 +123,9 @@ div.modalSessionsList div.session {
@media screen and (max-width: 768px) {
div.panel {
padding: 0.5rem;
position: fixed;
width: fit-content;
padding: 0.25rem;
/* position: fixed; */
width: 100%;
}
div.expanded {

16
src/interface/web/app/page.module.css
View file

@ -78,7 +78,13 @@ div.chatBoxBody {
display: grid;
height: 100%;
margin: auto;
grid-template-rows: auto 1fr;
}
div.homeGreetings {
display: grid;
height: 100%;
margin: auto;
grid-template-rows: 1fr 2fr;
}
@ -108,6 +114,10 @@ div.sidePanel {
grid-template-rows: auto;
}
div.sidePanel {
position: relative;
}
div.chatBox {
padding: 0;
}
@ -117,4 +127,8 @@ div.sidePanel {
grid-template-columns: 1fr;
}
div.homeGreetings {
grid-template-rows: auto;
}
}

11
src/interface/web/app/page.tsx
View file

@ -3,7 +3,7 @@ import './globals.css';
import styles from './page.module.css';
import 'katex/dist/katex.min.css';
import React, { use, useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import useSWR from 'swr';
import Image from 'next/image';
import { ClockCounterClockwise } from '@phosphor-icons/react';
@ -11,7 +11,6 @@ import { ClockCounterClockwise } from '@phosphor-icons/react';
import { Card, CardTitle } from '@/components/ui/card';
import SuggestionCard from '@/app/components/suggestions/suggestionCard';
import SidePanel from '@/app/components/sidePanel/chatHistorySidePanel';
import NavMenu from '@/app/components/navMenu/navMenu';
import Loading from '@/app/components/loading/loading';
import ChatInputArea, { ChatOptions } from '@/app/components/chatInputArea/chatInputArea';
import { Suggestion, suggestionsData } from '@/app/components/suggestions/suggestionsData';
@ -22,7 +21,6 @@ import { getIconFromIconName } from '@/app/common/iconUtils';
import { AgentData } from '@/app/agents/page';
interface ChatBodyDataProps {
chatOptionsData: ChatOptions | null;
onConversationIdChange?: (conversationId: string) => void;
@ -164,8 +162,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
}
return (
<div className={`${styles.chatBoxBody}`}>
<div className="w-full text-center">
<div className={`${styles.homeGreetings}`}>
<div className={`w-full text-center justify-end content-end`}>
<div className="items-center">
<h1 className="text-center w-fit pb-6 px-4 mx-auto">{greeting}</h1>
</div>
@ -225,7 +223,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
<button
onClick={shuffleSuggestionsCards}
className="m-2 p-1.5 rounded-lg dark:hover:bg-[var(--background-color)] hover:bg-stone-100 border border-stone-100 text-sm text-stone-500 dark:text-stone-300 dark:border-neutral-700">
More Examples <ClockCounterClockwise className='h-4 w-4 inline' />
More Ideas <ClockCounterClockwise className='h-4 w-4 inline' />
</button>
</div>
</div>
@ -324,7 +322,6 @@ export default function Home() {
/>
</div>
<div className={`${styles.chatBox}`}>
<NavMenu selected="Chat" title={title}></NavMenu>
<div className={`${styles.chatBoxBody}`}>
<ChatBodyData
isLoggedIn={authenticatedData !== null}

167
src/interface/web/app/search/page.tsx
View file

@ -5,7 +5,6 @@ import { Input } from '@/components/ui/input';
import { useAuthenticatedData } from '../common/auth';
import { useEffect, useRef, useState } from 'react';
import SidePanel from '../components/sidePanel/chatHistorySidePanel';
import NavMenu from '../components/navMenu/navMenu';
import styles from './search.module.css';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
@ -211,98 +210,96 @@ export default function Search() {
console.log('searchResults', searchResults);
return (
<div className={`${styles.searchLayout}`}>
<div className='h-full'>
<div>
<div className={`h-full ${styles.sidePanel}`}>
<SidePanel
conversationId={null}
uploadedFiles={[]}
isMobileWidth={isMobileWidth}
/>
</div>
<div className="md:w-3/4 sm:w-full mr-auto ml-auto">
<NavMenu title={title} selected='Chat' />
<div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'>
{
isMobileWidth && <div className='font-bold'>Search</div>
}
<div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
<MagnifyingGlass className='inline m-2' />
<Input
autoFocus
className='border-none'
onChange={(e) => setSearchQuery(e.currentTarget.value)}
onKeyDown={(e) => e.key === 'Enter' && search()}
type="search"
placeholder="Search Documents" />
<button className='px-4 rounded' onClick={() => search()}>
Find
</button>
</div>
{
focusSearchResult &&
<div className='mt-4'>
<Button onClick={() => setFocusSearchResult(null)} className='mb-4' variant={'outline'}>
<ArrowLeft className='inline mr-2' />
Back
</Button>
{focusNote(focusSearchResult)}
<div className={`${styles.searchLayout}`}>
<div className="md:w-3/4 sm:w-full mr-auto ml-auto pt-4 md:pt-8">
<div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'>
<div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
<MagnifyingGlass className='inline m-2' />
<Input
autoFocus
className='border-none'
onChange={(e) => setSearchQuery(e.currentTarget.value)}
onKeyDown={(e) => e.key === 'Enter' && search()}
type="search"
placeholder="Search Documents" />
<button className='px-4 rounded' onClick={() => search()}>
Find
</button>
</div>
}
{
!focusSearchResult && searchResults && searchResults.length > 0 &&
<div className='mt-4'>
<ScrollArea className="h-[80vh]">
{
searchResults.map((result, index) => {
return (
<Note key={result["corpus-id"]}
note={result}
setFocusSearchResult={setFocusSearchResult} />
);
})
}
</ScrollArea>
</div>
}
{
searchResults == null &&
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
<CardHeader className='flex flex-col items-center justify-center'>
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
<FileMagnifyingGlass weight='fill' className='text-muted-foreground h-10 w-10' />
</CardDescription>
<CardTitle className='text-center'>
Search across your documents
</CardTitle>
</CardHeader>
<CardContent className='text-muted-foreground items-center justify-center text-center flex'>
<Lightbulb className='inline mr-2' /> {exampleQuery}
</CardContent>
</Card>
}
{
searchResults && searchResults.length === 0 &&
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
<CardHeader className='flex flex-col items-center justify-center'>
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
<FileDashed weight='fill' className='text-muted-foreground h-10 w-10' />
</CardDescription>
<CardTitle className='text-center'>
No documents found
</CardTitle>
</CardHeader>
<CardContent>
<div className='text-muted-foreground items-center justify-center text-center flex'>
To use search, upload your docs to your account.
</div>
<Link href="https://docs.khoj.dev/data-sources/share_your_data" className='no-underline'>
<div className='mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg'>
Learn More
{
focusSearchResult &&
<div className='mt-4'>
<Button onClick={() => setFocusSearchResult(null)} className='mb-4' variant={'outline'}>
<ArrowLeft className='inline mr-2' />
Back
</Button>
{focusNote(focusSearchResult)}
</div>
}
{
!focusSearchResult && searchResults && searchResults.length > 0 &&
<div className='mt-4'>
<ScrollArea className="h-[80vh]">
{
searchResults.map((result, index) => {
return (
<Note key={result["corpus-id"]}
note={result}
setFocusSearchResult={setFocusSearchResult} />
);
})
}
</ScrollArea>
</div>
}
{
searchResults == null &&
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
<CardHeader className='flex flex-col items-center justify-center'>
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
<FileMagnifyingGlass weight='fill' className='text-muted-foreground h-10 w-10' />
</CardDescription>
<CardTitle className='text-center'>
Search across your documents
</CardTitle>
</CardHeader>
<CardContent className='text-muted-foreground items-center justify-center text-center flex'>
<Lightbulb className='inline mr-2' /> {exampleQuery}
</CardContent>
</Card>
}
{
searchResults && searchResults.length === 0 &&
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
<CardHeader className='flex flex-col items-center justify-center'>
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
<FileDashed weight='fill' className='text-muted-foreground h-10 w-10' />
</CardDescription>
<CardTitle className='text-center'>
No documents found
</CardTitle>
</CardHeader>
<CardContent>
<div className='text-muted-foreground items-center justify-center text-center flex'>
To use search, upload your docs to your account.
</div>
</Link>
</CardContent>
</Card>
}
<Link href="https://docs.khoj.dev/data-sources/share_your_data" className='no-underline'>
<div className='mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg'>
Learn More
</div>
</Link>
</CardContent>
</Card>
}
</div>
</div>
</div>
</div>

12
src/interface/web/app/search/search.module.css
View file

@ -1,12 +1,22 @@
div.searchLayout {
display: grid;
grid-template-columns: auto 1fr;
grid-template-columns: 1fr;
gap: 1rem;
height: 100vh;
}
div.sidePanel {
position: fixed;
height: 100%;
}
@media screen and (max-width: 768px) {
div.searchLayout {
gap: 0;
}
div.sidePanel {
position: relative;
height: 100%;
}
}