mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-03 21:29:08 +00:00
Nav Menu Upgrades and Minor UX Improvements (#869)
* Converted navigation menu into a dropdown menu * Moved collapsed side panel menu icons into top row * Auto refresh when conversation is deleted to update side panel and route back to main page if deletion is on current conversation * Highlight the current conversation in the side panel * Dynamic homepage messages with current day and time of day. * `colorutils` upgraded to have more expansive tailwind color options and dynamic class name generation. * Converted create agent button alert into shadcn `ToolTip` * Colored lines and icons for agents in chat window * Cleaned up border styling in dark mode * fixed three dot menu in side panel to be more easier to click * Add the KhojLogo import in the nav menu and use a default user profile icon when not authenticated * Get rid of custom --box-shadow CSS variable * Pass the agent metadat through the chat body data in order to style the send button * Add login to the unauthenticated login view, redirecto to home if conversation history not loaded * Set a max height for the input text area * Simplify tailwind class names --------- Co-authored-by: sabaimran <narmiabas@gmail.com>
This commit is contained in:
Raghav Tirumale
@@ -18,7 +18,7 @@ a.selected {
|
||||
div.titleBar {
|
||||
display: flex;
|
||||
padding-left: 12px;
|
||||
padding-right: 32px;
|
||||
padding-right: 12px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
justify-content: space-between;
|
||||
@@ -51,11 +51,6 @@ div.settingsMenu {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.settingsMenu:hover {
|
||||
background-color: var(--primary-hover);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.settingsMenuOptions {
|
||||
display: block;
|
||||
grid-auto-flow: row;
|
||||
|
||||
@@ -4,6 +4,7 @@ import styles from './navMenu.module.css';
|
||||
import Link from 'next/link';
|
||||
import { useAuthenticatedData } from '@/app/common/auth';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
import {
|
||||
Menubar,
|
||||
@@ -18,13 +19,11 @@ import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Toggle } from '@/components/ui/toggle';
|
||||
import { Moon } from '@phosphor-icons/react';
|
||||
import Image from 'next/image';
|
||||
import { Moon, Sun, UserCircle, User, Robot, MagnifyingGlass, Question, GearFine, ArrowRight } from '@phosphor-icons/react';
|
||||
import { KhojLogo } from '../logo/khogLogo';
|
||||
|
||||
|
||||
interface NavMenuProps {
|
||||
@@ -104,94 +103,199 @@ export default function NavMenu(props: NavMenuProps) {
|
||||
{
|
||||
!displayTitle && props.showLogo &&
|
||||
<Link href='/'>
|
||||
<Image
|
||||
src="/khoj-logo.svg"
|
||||
alt="Khoj"
|
||||
width={52}
|
||||
height={52} />
|
||||
<KhojLogo />
|
||||
</Link>
|
||||
}
|
||||
</div>
|
||||
{
|
||||
isMobileWidth ?
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>=</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuTrigger>
|
||||
{
|
||||
userData ?
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={userData?.photo} alt="user profile" />
|
||||
<AvatarFallback>
|
||||
{userData?.username[0]}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
:
|
||||
<UserCircle className="w-6 h-6" />
|
||||
}
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='gap-2'>
|
||||
<DropdownMenuItem>
|
||||
<Link href='/' className={`${props.selected.toLowerCase() === 'chat' ? styles.selected : ''} hover:bg-background no-underline`}>Chat</Link>
|
||||
<div
|
||||
onClick={() => {
|
||||
setDarkMode(!darkMode)
|
||||
}
|
||||
}
|
||||
className="flex flex-rows">
|
||||
{darkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
|
||||
<p className="ml-3 font-semibold">{darkMode ? 'Light Mode' : 'Dark Mode'}</p>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Link href='/agents' className={`${props.selected.toLowerCase() === 'agent' ? styles.selected : ''} hover:bg-background no-underline`}>Agents</Link>
|
||||
<Link href="/agents" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<User className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Agents</p>
|
||||
</div>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Link href='/automations' className={`${props.selected.toLowerCase() === 'automations' ? styles.selected : ''} hover:bg-background no-underline`}>Automations</Link>
|
||||
<Link href="/automations" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<Robot className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Automations</p>
|
||||
</div>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
{userData && <>
|
||||
<DropdownMenuItem>
|
||||
<Link href="/search" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<MagnifyingGlass className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Search</p>
|
||||
</div>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuLabel>Profile</DropdownMenuLabel>
|
||||
{userData &&
|
||||
<DropdownMenuItem>
|
||||
<Link href="/settings" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<GearFine className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Settings</p>
|
||||
</div>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
}
|
||||
<DropdownMenuItem>
|
||||
<Link href="/settings">Settings</Link>
|
||||
<Link href="https://docs.khoj.dev" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<Question className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Help</p>
|
||||
</div>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Link href="https://docs.khoj.dev">Help</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Link href="/auth/logout">Logout</Link>
|
||||
</DropdownMenuItem>
|
||||
</>}
|
||||
{
|
||||
userData ?
|
||||
<DropdownMenuItem>
|
||||
<Link href="/auth/logout" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<ArrowRight className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Logout</p>
|
||||
</div>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
:
|
||||
<DropdownMenuItem>
|
||||
<Link href="/auth/login" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<ArrowRight className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Login</p>
|
||||
</div>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
}
|
||||
</>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
:
|
||||
<Menubar className='items-top inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground'>
|
||||
<Menubar className='border-none hover:bg-stone-100 dark:hover:bg-neutral-900 bg-none'>
|
||||
<MenubarMenu>
|
||||
<Link href='/' className={`${props.selected.toLowerCase() === 'chat' ? styles.selected : ''} hover:bg-background no-underline`}>
|
||||
<MenubarTrigger>Chat</MenubarTrigger>
|
||||
</Link>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<Link href='/agents' className={`${props.selected.toLowerCase() === 'agent' ? styles.selected : ''} hover:bg-background no-underline`}>
|
||||
<MenubarTrigger>Agents</MenubarTrigger>
|
||||
</Link>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<Link href='/automations' className={`${props.selected.toLowerCase() === 'automations' ? styles.selected : ''} hover:bg-background no-underline`}>
|
||||
<MenubarTrigger>Automations</MenubarTrigger>
|
||||
</Link>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>Profile</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarTrigger>
|
||||
{
|
||||
userData ?
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={userData?.photo} alt="user profile" />
|
||||
<AvatarFallback>
|
||||
{userData?.username[0]}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
:
|
||||
<UserCircle className="w-8 h-8" />
|
||||
}
|
||||
</MenubarTrigger>
|
||||
<MenubarContent align="end" className="rounded-xl gap-2">
|
||||
<MenubarItem>
|
||||
<Toggle
|
||||
pressed={darkMode}
|
||||
<div
|
||||
onClick={() => {
|
||||
setDarkMode(!darkMode)
|
||||
}
|
||||
}>
|
||||
<Moon />
|
||||
</Toggle>
|
||||
}
|
||||
className="flex flex-rows">
|
||||
{darkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
|
||||
<p className="ml-3 font-semibold">{darkMode ? 'Light Mode' : 'Dark Mode'}</p>
|
||||
</div>
|
||||
</MenubarItem>
|
||||
{userData &&
|
||||
<>
|
||||
<MenubarItem>
|
||||
<Link href="/agents" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<User className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Agents</p>
|
||||
</div>
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
<Link href="/automations" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<Robot className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Automations</p>
|
||||
</div>
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
<Link href="/search" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<MagnifyingGlass className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Search</p>
|
||||
</div>
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
<>
|
||||
<MenubarSeparator className="dark:bg-white height-[2px] bg-black" />
|
||||
<MenubarItem>
|
||||
<Link href="https://docs.khoj.dev" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<Question className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Help</p>
|
||||
</div>
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
{
|
||||
userData &&
|
||||
<MenubarItem>
|
||||
<Link href="/settings">
|
||||
Settings
|
||||
<Link href="/settings" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<GearFine className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Settings</p>
|
||||
</div>
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
<Link href="https://docs.khoj.dev">
|
||||
Help
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
<Link href="/auth/logout">
|
||||
Logout
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
</>
|
||||
}
|
||||
}
|
||||
{
|
||||
userData ?
|
||||
<MenubarItem>
|
||||
<Link href="/auth/logout" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<ArrowRight className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Logout</p>
|
||||
</div>
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
:
|
||||
<MenubarItem>
|
||||
<Link href="/auth/login" className="no-underline">
|
||||
<div className="flex flex-rows">
|
||||
<ArrowRight className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Login</p>
|
||||
</div>
|
||||
</Link>
|
||||
</MenubarItem>
|
||||
}
|
||||
</>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
|
||||
Reference in New Issue
Block a user