sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 15:38:55 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Show all agents in carousel on home screen agent pane of web app

Browse source 
This change wraps the agent pane in a scroll area with all agents shown.
It allows selecting an agent to chat with directly from the home
screen without breaking flow and having to jump to the agents page.

The previous flow was not convenient to quickly and consistently start
chat with one of your standard agents.

This was because a random subet of agents were shown on the home page.
To start chat with an agent not shown on home screen load you had to
open the agents page and initiate the conversation from there.
This commit is contained in:
Debanjum Singh Solanky 2024-10-20 01:30:15 -07:00
parent d55cba8627
commit 42a5ba8bf4
1 changed files with 41 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,6 +23,7 @@ import { AgentData } from "@/app/agents/page";
import { createNewConversation } from "./common/chatFunctions"; import { createNewConversation } from "./common/chatFunctions";
import { useIsMobileWidth } from "./common/utils"; import { useIsMobileWidth } from "./common/utils";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
interface ChatBodyDataProps { interface ChatBodyDataProps {
chatOptionsData: ChatOptions | null; chatOptionsData: ChatOptions | null;
@ -112,7 +113,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
const shuffledAgents = agentsData ? [...agentsData].sort(() => 0.5 - Math.random()) : []; const shuffledAgents = agentsData ? [...agentsData].sort(() => 0.5 - Math.random()) : [];
const agents = agentsData ? [agentsData[0]] : []; // Always add the first/default agent. const agents = agentsData ? [agentsData[0]] : []; // Always add the first/default agent.
shuffledAgents.slice(0, nSlice - 1).forEach((agent) => { shuffledAgents.forEach((agent) => {
if (!agents.find((a) => a.slug === agent.slug)) { if (!agents.find((a) => a.slug === agent.slug)) {
agents.push(agent); agents.push(agent);
} }
@ -194,34 +195,29 @@ function ChatBodyData(props: ChatBodyDataProps) {
</h1> </h1>
</div> </div>
{!props.isMobileWidth && ( {!props.isMobileWidth && (
<div className="flex pb-6 gap-2 items-center justify-center"> <ScrollArea className="w-full max-w-[600px] mx-auto">
{agentIcons.map((icon, index) => ( <div className="flex pb-2 gap-2 items-center justify-center">
<Card {agentIcons.map((icon, index) => (
key={`${index}-${agents[index].slug}`} <Card
className={`${ key={`${index}-${agents[index].slug}`}
selectedAgent === agents[index].slug className={`${
? convertColorToBorderClass(agents[index].color) selectedAgent === agents[index].slug
: "border-stone-100 dark:border-neutral-700 text-muted-foreground" ? convertColorToBorderClass(agents[index].color)
} : "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`}
<CardTitle
className="text-center text-md font-medium flex justify-center items-center"
onClick={() => setSelectedAgent(agents[index].slug)}
> >
{icon} {agents[index].name} <CardTitle
</CardTitle> className="text-center text-md font-medium flex justify-center items-center"
</Card> onClick={() => setSelectedAgent(agents[index].slug)}
))} >
<Card {icon} {agents[index].name}
className="border-none shadow-none flex justify-center items-center hover:cursor-pointer" </CardTitle>
onClick={() => (window.location.href = "/agents")} </Card>
> ))}
<CardTitle className="text-center text-md font-normal flex justify-center items-center px-1.5 py-2"> </div>
See All → <ScrollBar orientation="horizontal" />
</CardTitle> </ScrollArea>
</Card>
</div>
)} )}
</div> </div>
<div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-fit"}`}> <div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-fit"}`}>
@ -285,31 +281,24 @@ function ChatBodyData(props: ChatBodyDataProps) {
<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-t-2xl rounded-b-none`} 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-t-2xl rounded-b-none`}
> >
<div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12"> <ScrollArea className="w-full max-w-[85vw]">
{agentIcons.map((icon, index) => ( <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12">
<Card {agentIcons.map((icon, index) => (
key={`${index}-${agents[index].slug}`} <Card
className={`${selectedAgent === agents[index].slug ? convertColorToBorderClass(agents[index].color) : "border-muted text-muted-foreground"} hover:cursor-pointer`} 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 px-1.5 py-1"
onClick={() => setSelectedAgent(agents[index].slug)}
> >
{icon} {agents[index].name} <CardTitle
</CardTitle> className="text-center text-xs font-medium flex justify-center items-center px-1.5 py-1"
</Card> onClick={() => setSelectedAgent(agents[index].slug)}
))} >
<Card {icon} {agents[index].name}
className="border-none shadow-none flex justify-center items-center hover:cursor-pointer" </CardTitle>
onClick={() => (window.location.href = "/agents")} </Card>
> ))}
<CardTitle </div>
className={`text-center ${props.isMobileWidth ? "text-xs" : "text-md"} font-normal flex justify-center items-center px-1.5 py-2`} <ScrollBar orientation="horizontal" />
> </ScrollArea>
See All →
</CardTitle>
</Card>
</div>
<ChatInputArea <ChatInputArea
isLoggedIn={props.isLoggedIn} isLoggedIn={props.isLoggedIn}
sendMessage={(message) => setMessage(message)} sendMessage={(message) => setMessage(message)}