klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-10 21:29:13 +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 {
border: 1px solid var(--border-color);
margin-bottom: 20px;
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 { Separator } from "@/components/ui/separator";
import { KhojLogoType } from "./components/logo/khojLogo";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
interface ChatBodyDataProps {
chatOptionsData: ChatOptions | null;
@@ -102,8 +104,7 @@ function AgentCards({
>
<PopoverTrigger asChild>
<Card
className={`${
selectedAgent === agent.slug
className={`${selectedAgent === agent.slug
? convertColorToBorderClass(agent.color)
: "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="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}
</h1>
</div>
@@ -432,32 +433,43 @@ function ChatBodyData(props: ChatBodyDataProps) {
{props.isMobileWidth && (
<>
<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]">
<div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12">
{agentIcons.map((icon, index) => (
<Card
key={`${index}-${agents[index].slug}`}
className={`${selectedAgent === agents[index].slug ? convertColorToBorderClass(agents[index].color) : "border-muted text-muted-foreground"} hover:cursor-pointer`}
>
<CardTitle
className="text-center text-xs font-medium flex justify-center items-center whitespace-nowrap px-1.5 py-1"
onDoubleClick={() =>
openAgentEditCard(agents[index].slug)
<DropdownMenu>
<DropdownMenuTrigger>
<Button className="w-full m-2 p-0" variant="outline">
{
selectedAgent ? (
getIconFromIconName(
agents.find((agent) => agent.slug === selectedAgent)?.icon ?? "",
agents.find((agent) => agent.slug === selectedAgent)?.color ?? ""
)
) : (
<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={() => {
setSelectedAgent(agents[index].slug);
chatInputRef.current?.focus();
}}
>
{icon} {agents[index].name}
</CardTitle>
</Card>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</DropdownMenuItem>
))
}
</DropdownMenuContent>
</DropdownMenu>
<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
isLoggedIn={props.isLoggedIn}
sendMessage={(message) => setMessage(message)}
@@ -472,6 +484,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
setTriggeredAbort={() => { }}
/>
</div>
</div>
</>
)}
</div>