klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 05:39:12 +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;
} }

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

@@ -36,7 +36,7 @@ import {
} from "@/app/common/auth"; } from "@/app/common/auth";
import { convertColorToBorderClass } from "@/app/common/colorUtils"; import { convertColorToBorderClass } from "@/app/common/colorUtils";
import { getIconFromIconName } from "@/app/common/iconUtils"; import { getIconFromIconName } from "@/app/common/iconUtils";
import { AgentData } from"@/app/components/agentCard/agentCard"; import { AgentData } from "@/app/components/agentCard/agentCard";
import { createNewConversation } from "./common/chatFunctions"; import { createNewConversation } from "./common/chatFunctions";
import { useDebounce, useIsMobileWidth } from "./common/utils"; import { useDebounce, useIsMobileWidth } from "./common/utils";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
@@ -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,11 +104,10 @@ 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"
} }
hover:cursor-pointer rounded-lg px-2 py-2`} hover:cursor-pointer rounded-lg px-2 py-2`}
onDoubleClick={() => openAgentEditCard(agent.slug)} onDoubleClick={() => openAgentEditCard(agent.slug)}
onClick={() => { onClick={() => {
@@ -143,7 +144,7 @@ function AgentCards({
selectedChatModelOption="" selectedChatModelOption=""
agentSlug="" agentSlug=""
isSubscribed={isUserSubscribed(userConfig)} isSubscribed={isUserSubscribed(userConfig)}
setAgentChangeTriggered={() => {}} setAgentChangeTriggered={() => { }}
modelOptions={[]} modelOptions={[]}
inputToolOptions={{}} inputToolOptions={{}}
outputModeOptions={{}} outputModeOptions={{}}
@@ -221,8 +222,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
today.getHours() >= 17 || today.getHours() < 4 today.getHours() >= 17 || today.getHours() < 4
? "evening" ? "evening"
: today.getHours() >= 12 : today.getHours() >= 12
? "afternoon" ? "afternoon"
: "morning"; : "morning";
const nameSuffix = props.userConfig?.given_name ? `, ${props.userConfig?.given_name}` : ""; const nameSuffix = props.userConfig?.given_name ? `, ${props.userConfig?.given_name}` : "";
const greetings = [ const greetings = [
`What would you like to get done${nameSuffix}?`, `What would you like to get done${nameSuffix}?`,
@@ -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>
@@ -353,7 +354,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
setUploadedFiles={props.setUploadedFiles} setUploadedFiles={props.setUploadedFiles}
agentColor={agents.find((agent) => agent.slug === selectedAgent)?.color} agentColor={agents.find((agent) => agent.slug === selectedAgent)?.color}
ref={chatInputRef} ref={chatInputRef}
setTriggeredAbort={() => {}} setTriggeredAbort={() => { }}
/> />
</div> </div>
)} )}
@@ -432,45 +433,57 @@ 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
<ChatInputArea 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`}
isLoggedIn={props.isLoggedIn} >
sendMessage={(message) => setMessage(message)} <ChatInputArea
sendImage={(image) => setImages((prevImages) => [...prevImages, image])} isLoggedIn={props.isLoggedIn}
sendDisabled={processingMessage} sendMessage={(message) => setMessage(message)}
chatOptionsData={props.chatOptionsData} sendImage={(image) => setImages((prevImages) => [...prevImages, image])}
conversationId={null} sendDisabled={processingMessage}
isMobileWidth={props.isMobileWidth} chatOptionsData={props.chatOptionsData}
setUploadedFiles={props.setUploadedFiles} conversationId={null}
agentColor={agents.find((agent) => agent.slug === selectedAgent)?.color} isMobileWidth={props.isMobileWidth}
ref={chatInputRef} setUploadedFiles={props.setUploadedFiles}
setTriggeredAbort={() => {}} agentColor={agents.find((agent) => agent.slug === selectedAgent)?.color}
/> ref={chatInputRef}
setTriggeredAbort={() => { }}
/>
</div>
</div> </div>
</> </>
)} )}