klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 21:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify agent picker selection in homepage mobile view

Browse Source
This commit is contained in:
sabaimran
2025-02-10 15:05:30 -08:00
parent 427ec061b4
commit 589b047d90
2 changed files with 54 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/interface/web/app/page.module.css
View File

@@ -14,7 +14,6 @@ div.suggestions {
} }
div.inputBox { div.inputBox {
border: 1px solid var(--border-color);
margin-bottom: 20px; margin-bottom: 20px;
align-content: center; align-content: center;
} }

55
src/interface/web/app/page.tsx
View File

@@ -48,6 +48,8 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/s
import { AppSidebar } from "./components/appSidebar/appSidebar"; import { AppSidebar } from "./components/appSidebar/appSidebar";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { KhojLogoType } from "./components/logo/khojLogo"; import { KhojLogoType } from "./components/logo/khojLogo";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
interface ChatBodyDataProps { interface ChatBodyDataProps {
chatOptionsData: ChatOptions | null; chatOptionsData: ChatOptions | null;
@@ -102,8 +104,7 @@ function AgentCards({
> >
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Card <Card
className={`${ className={`${selectedAgent === agent.slug
selectedAgent === agent.slug
? convertColorToBorderClass(agent.color) ? convertColorToBorderClass(agent.color)
: "border-stone-100 dark:border-neutral-700 text-muted-foreground" : "border-stone-100 dark:border-neutral-700 text-muted-foreground"
} }
@@ -315,7 +316,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
)} )}
<div className={`w-full text-center justify-end content-end`}> <div className={`w-full text-center justify-end content-end`}>
<div className="items-center"> <div className="items-center">
<h1 className="text-2xl md:text-3xl text-center w-fit pb-6 px-4 mx-auto"> <h1 className="text-2xl md:text-3xl text-center w-fit pb-6 pt-4 px-4 mx-auto">
{greeting} {greeting}
</h1> </h1>
</div> </div>
@@ -432,32 +433,43 @@ function ChatBodyData(props: ChatBodyDataProps) {
{props.isMobileWidth && ( {props.isMobileWidth && (
<> <>
<div <div
className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1 rounded-2xl mb-2`} className={`${styles.inputBox} align-middle items-center justify-center pb-3 mx-1 mb-2 border-none`}
> >
<ScrollArea className="w-full max-w-[85vw]"> <DropdownMenu>
<div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12"> <DropdownMenuTrigger>
{agentIcons.map((icon, index) => ( <Button className="w-full m-2 p-0" variant="outline">
<Card {
key={`${index}-${agents[index].slug}`} selectedAgent ? (
className={`${selectedAgent === agents[index].slug ? convertColorToBorderClass(agents[index].color) : "border-muted text-muted-foreground"} hover:cursor-pointer`} getIconFromIconName(
> agents.find((agent) => agent.slug === selectedAgent)?.icon ?? "",
<CardTitle agents.find((agent) => agent.slug === selectedAgent)?.color ?? ""
className="text-center text-xs font-medium flex justify-center items-center whitespace-nowrap px-1.5 py-1" )
onDoubleClick={() => ) : (
openAgentEditCard(agents[index].slug) <ArrowsVertical className="h-5 w-5" />
)
} }
{selectedAgent ? `${agents.find((agent) => agent.slug === selectedAgent)?.name}` : "Select Agent"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="overflow-y-scroll h-96">
{
agentIcons.map((icon, index) => (
<DropdownMenuItem
key={`${index}-${agents[index].slug}`}
onClick={() => { onClick={() => {
setSelectedAgent(agents[index].slug); setSelectedAgent(agents[index].slug);
chatInputRef.current?.focus(); chatInputRef.current?.focus();
}} }}
> >
{icon} {agents[index].name} {icon} {agents[index].name}
</CardTitle> </DropdownMenuItem>
</Card> ))
))} }
</div> </DropdownMenuContent>
<ScrollBar orientation="horizontal" /> </DropdownMenu>
</ScrollArea> <div
className={`${styles.inputBox} pt-4 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background rounded-2xl mb-2 border-none`}
>
<ChatInputArea <ChatInputArea
isLoggedIn={props.isLoggedIn} isLoggedIn={props.isLoggedIn}
sendMessage={(message) => setMessage(message)} sendMessage={(message) => setMessage(message)}
@@ -472,6 +484,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
setTriggeredAbort={() => { }} setTriggeredAbort={() => { }}
/> />
</div> </div>
</div>
</> </>
)} )}
</div> </div>