sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 17:35:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make Title, Chat Footer Icons larger to ease click, tap on Mobile

Browse source
This commit is contained in:
Debanjum Singh Solanky 2024-08-03 11:22:33 +05:30
parent 8d1c5226ec
commit 529ffdb7e3
11 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -281,7 +281,7 @@ export default function Agents() {
/> />
</div> </div>
<div className={`mx-auto ${isMobileWidth ? "w-11/12" : "w-1/2"} pt-4`}> <div className={`mx-auto ${isMobileWidth ? "w-11/12" : "w-1/2"} pt-4`}>
<div className={`pt-4 md:pt-8 flex justify-between align-middle w-full`}> <div className={`pt-6 md:pt-8 flex justify-between align-middle w-full`}>
<h1 className="text-3xl">Agents</h1> <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"> <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> <TooltipProvider>

2
src/interface/web/app/chat/chat.module.css
View file

@ -105,6 +105,7 @@ div.agentIndicator {
div.chatBox { div.chatBox {
padding: 0; padding: 0;
height: min-content;
} }
} }
@ -119,6 +120,7 @@ div.agentIndicator {
div.chatBox { div.chatBox {
padding: 0; padding: 0;
height: min-content;
} }
div.chatLayout { div.chatLayout {

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

@ -256,7 +256,7 @@ export default function Chat() {
{ {
!isMobileWidth && !isMobileWidth &&
<div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}> <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>} {title && <h2 className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden pt-6`}>{title}</h2>}
</div> </div>
} }
<Suspense fallback={<Loading />}> <Suspense fallback={<Loading />}>

9
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View file

@ -372,7 +372,7 @@ export default function ChatInputArea(props: ChatInputProps) {
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500" className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
disabled={props.sendDisabled} disabled={props.sendDisabled}
onClick={handleFileButtonClick}> onClick={handleFileButtonClick}>
<Paperclip className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} /> <Paperclip className='w-8 h-8' />
</Button> </Button>
<div className="grid w-full gap-1.5 relative"> <div className="grid w-full gap-1.5 relative">
<Textarea <Textarea
@ -380,6 +380,7 @@ export default function ChatInputArea(props: ChatInputProps) {
className={`border-none w-full h-16 min-h-16 max-h-[128px] md:py-4 rounded-lg resize-none dark:bg-neutral-700 ${props.isMobileWidth ? 'text-md' : 'text-lg'}`} className={`border-none w-full h-16 min-h-16 max-h-[128px] md:py-4 rounded-lg resize-none dark:bg-neutral-700 ${props.isMobileWidth ? 'text-md' : 'text-lg'}`}
placeholder="Type / to see a list of commands" placeholder="Type / to see a list of commands"
id="message" id="message"
autoFocus={true}
value={message} value={message}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
@ -403,7 +404,7 @@ export default function ChatInputArea(props: ChatInputProps) {
}} }}
disabled={props.sendDisabled} disabled={props.sendDisabled}
> >
<Stop weight='fill' className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} /> <Stop weight='fill' className='w-8 h-8' />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@ -428,7 +429,7 @@ export default function ChatInputArea(props: ChatInputProps) {
}} }}
disabled={props.sendDisabled} disabled={props.sendDisabled}
> >
<Microphone weight='fill' className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} /> <Microphone weight='fill' className='w-8 h-8' />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@ -442,7 +443,7 @@ export default function ChatInputArea(props: ChatInputProps) {
className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-0 h-auto text-3xl transition transform hover:-translate-y-1`} className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-0 h-auto text-3xl transition transform hover:-translate-y-1`}
onClick={onSendMessage} onClick={onSendMessage}
disabled={props.sendDisabled}> disabled={props.sendDisabled}>
<ArrowCircleUp className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} /> <ArrowCircleUp className='w-8 h-8' />
</Button> </Button>
</div > </div >
</> </>

2
src/interface/web/app/components/logo/khogLogo.tsx
View file

@ -1,6 +1,6 @@
export function KhojLogoType() { export function KhojLogoType() {
return ( return (
<svg width="64" height="auto" viewBox="0 0 442 198" className="fill-zinc-950 dark:fill-zinc-300" xmlns="http://www.w3.org/2000/svg"> <svg width="70" height="auto" viewBox="0 0 442 198" className="fill-zinc-950 dark:fill-zinc-300" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_45_75)"> <g clipPath="url(#clip0_45_75)">
<path d="M57.9394 93.0404L67.5396 49.1063C68.7987 49.5268 71.7365 51.9442 74.7267 51.9442C78.5039 51.9442 79.2383 47.4246 86.1631 45.7955C91.6715 44.4817 96.3404 45.4276 99.0684 47.6349C99.0684 47.6349 99.6979 53.6259 101.167 55.4127C102.531 57.0418 104.629 56.4637 104.629 56.4637C107.672 70.8106 114.072 100.661 115.279 105.233C116.8 110.961 110.924 114.114 108.669 119.369C106.413 124.625 94.242 126.884 87.0549 127.62C79.8679 128.356 59.723 119.632 57.9394 117.215C56.1557 114.797 55.3688 109.857 55.1065 105.18C54.8442 101.449 56.8902 95.5104 57.9394 93.0404Z" fill="#FAE80B" /> <path d="M57.9394 93.0404L67.5396 49.1063C68.7987 49.5268 71.7365 51.9442 74.7267 51.9442C78.5039 51.9442 79.2383 47.4246 86.1631 45.7955C91.6715 44.4817 96.3404 45.4276 99.0684 47.6349C99.0684 47.6349 99.6979 53.6259 101.167 55.4127C102.531 57.0418 104.629 56.4637 104.629 56.4637C107.672 70.8106 114.072 100.661 115.279 105.233C116.8 110.961 110.924 114.114 108.669 119.369C106.413 124.625 94.242 126.884 87.0549 127.62C79.8679 128.356 59.723 119.632 57.9394 117.215C56.1557 114.797 55.3688 109.857 55.1065 105.18C54.8442 101.449 56.8902 95.5104 57.9394 93.0404Z" fill="#FAE80B" />
<path d="M57.9394 92.9879L62.2936 74.8046C63.5526 75.2251 66.9626 73.4383 71.4742 69.0764C74.1497 66.4488 79.8678 58.8812 86.0582 55.3601C90.5698 52.785 94.924 54.204 97.5995 56.4112C97.5995 56.4112 100.013 57.6199 102.846 57.6199C104.944 57.6199 104.629 56.4112 104.629 56.4112C107.672 70.7581 114.072 100.608 115.279 105.18C116.8 110.908 110.924 114.062 108.669 119.317C106.413 124.572 94.242 126.832 87.0549 127.568C79.8679 128.303 59.723 119.58 57.9394 117.162C56.1557 114.745 55.3688 109.805 55.1065 105.128C54.8442 101.449 56.8902 95.5104 57.9394 92.9879Z" fill="#FFCC09" /> <path d="M57.9394 92.9879L62.2936 74.8046C63.5526 75.2251 66.9626 73.4383 71.4742 69.0764C74.1497 66.4488 79.8678 58.8812 86.0582 55.3601C90.5698 52.785 94.924 54.204 97.5995 56.4112C97.5995 56.4112 100.013 57.6199 102.846 57.6199C104.944 57.6199 104.629 56.4112 104.629 56.4112C107.672 70.7581 114.072 100.608 115.279 105.18C116.8 110.908 110.924 114.062 108.669 119.317C106.413 124.572 94.242 126.832 87.0549 127.568C79.8679 128.303 59.723 119.58 57.9394 117.162C56.1557 114.745 55.3688 109.805 55.1065 105.128C54.8442 101.449 56.8902 95.5104 57.9394 92.9879Z" fill="#FFCC09" />

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

@ -81,14 +81,14 @@ export default function NavMenu() {
<DropdownMenuTrigger> <DropdownMenuTrigger>
{ {
userData ? userData ?
<Avatar className={`h-8 w-8 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}> <Avatar className={`h-10 w-10 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}>
<AvatarImage src={userData?.photo} alt="user profile" /> <AvatarImage src={userData?.photo} alt="user profile" />
<AvatarFallback className="bg-transparent hover:bg-muted"> <AvatarFallback className="bg-transparent hover:bg-muted">
{userData?.username[0].toUpperCase()} {userData?.username[0].toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
: :
<UserCircle className="h-6 w-6" /> <UserCircle className="h-10 w-10" />
} }
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className='gap-2'> <DropdownMenuContent className='gap-2'>
@ -172,14 +172,14 @@ export default function NavMenu() {
<MenubarTrigger> <MenubarTrigger>
{ {
userData ? userData ?
<Avatar className={`h-8 w-8 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}> <Avatar className={`h-10 w-10 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}>
<AvatarImage src={userData?.photo} alt="user profile" /> <AvatarImage src={userData?.photo} alt="user profile" />
<AvatarFallback className="bg-transparent hover:bg-muted"> <AvatarFallback className="bg-transparent hover:bg-muted">
{userData?.username[0].toUpperCase()} {userData?.username[0].toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
: :
<UserCircle className="w-8 h-8" /> <UserCircle className="w-10 h-10" />
} }
</MenubarTrigger> </MenubarTrigger>
<MenubarContent align="end" className="rounded-xl gap-2"> <MenubarContent align="end" className="rounded-xl gap-2">

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

@ -670,7 +670,7 @@ export default function SidePanel(props: SidePanelProps) {
setEnabled(open); setEnabled(open);
} }
}> }>
<DrawerTrigger><Sidebar className="h-6 w-6 mx-2" weight="thin" /></DrawerTrigger> <DrawerTrigger><Sidebar className="h-8 w-8 mx-2" weight="thin" /></DrawerTrigger>
<DrawerContent> <DrawerContent>
<DrawerHeader> <DrawerHeader>
<DrawerTitle>Sessions and Files</DrawerTitle> <DrawerTitle>Sessions and Files</DrawerTitle>

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

@ -66,7 +66,6 @@ div.chatLayout {
div.chatBox { div.chatBox {
display: grid; display: grid;
height: 100%;
} }
div.titleBar { div.titleBar {
@ -101,6 +100,7 @@ div.sidePanel {
div.chatBox { div.chatBox {
padding: 0; padding: 0;
height: min-content;
} }
} }
@ -120,6 +120,7 @@ div.sidePanel {
div.chatBox { div.chatBox {
padding: 0; padding: 0;
height: min-content;
} }
div.chatLayout { div.chatLayout {
@ -130,5 +131,4 @@ div.sidePanel {
div.homeGreetings { div.homeGreetings {
grid-template-rows: auto; grid-template-rows: auto;
} }
} }

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

@ -160,7 +160,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
} }
return ( return (
<div className={`${styles.homeGreetings}`}> <div className={`${styles.homeGreetings} w-full md:w-auto`}>
{ {
showLoginPrompt && ( showLoginPrompt && (
<LoginPrompt <LoginPrompt

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

@ -213,8 +213,8 @@ export default function Search() {
/> />
</div> </div>
<div className={`${styles.searchLayout}`}> <div className={`${styles.searchLayout}`}>
<div className="md:w-3/4 sm:w-full mr-auto ml-auto pt-4 md:pt-8"> <div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8">
<div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'> <div className='p-4 md:w-3/4 sm:w-full mx-auto'>
<div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'> <div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
<MagnifyingGlass className='inline m-2 h-4 w-4' /> <MagnifyingGlass className='inline m-2 h-4 w-4' />
<Input <Input

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

@ -102,6 +102,7 @@ div.agentIndicator {
div.chatBox { div.chatBox {
padding: 0; padding: 0;
height: min-content;
} }
} }
@ -116,6 +117,7 @@ div.agentIndicator {
div.chatBox { div.chatBox {
padding: 0; padding: 0;
height: min-content;
} }
div.chatLayout { div.chatLayout {