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

Show Khoj agent in agent dropdown by default on mobile in web app home

Browse Source 
Previously on slow connection you'd see the agent dropdown flicker
from undefined to Khoj default agent on phones and other thin screens.

This is unnecessary and jarring. Populate with default agent to remove
this issue
This commit is contained in:
Debanjum
2025-03-20 12:24:11 +05:30
parent 9a0b126f12
commit f15a95dccf
1 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@ import "./globals.css";
import styles from "./page.module.css";
import "katex/dist/katex.min.css";
import React, { useEffect, useRef, useState, useMemo } from "react";
import React, { useEffect, useRef, useState } from "react";
import useSWR from "swr";
import { ArrowsVertical } from "@phosphor-icons/react";
@@ -48,9 +48,19 @@ 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 {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
const fetcher = (url: string) =>
fetch(url)
.then((res) => res.json())
.catch((err) => console.warn(err));
interface ChatBodyDataProps {
chatOptionsData: ChatOptions | null;
onConversationIdChange?: (conversationId: string) => void;
@@ -104,10 +114,11 @@ 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"
}
}
hover:cursor-pointer rounded-lg px-2 py-2`}
onDoubleClick={() => openAgentEditCard(agent.slug)}
onClick={() => {
@@ -144,7 +155,7 @@ function AgentCards({
selectedChatModelOption=""
agentSlug=""
isSubscribed={isUserSubscribed(userConfig)}
setAgentChangeTriggered={() => { }}
setAgentChangeTriggered={() => {}}
modelOptions={[]}
inputToolOptions={{}}
outputModeOptions={{}}
@@ -199,12 +210,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
const onConversationIdChange = props.onConversationIdChange;
const agentsFetcher = () =>
window
.fetch("/api/agents")
.then((res) => res.json())
.catch((err) => console.log(err));
const { data: agentsData, error } = useSWR<AgentData[]>("agents", agentsFetcher, {
const { data: agentsData, error } = useSWR<AgentData[]>("/api/agents", fetcher, {
revalidateOnFocus: false,
});
@@ -222,8 +228,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
today.getHours() >= 17 || today.getHours() < 4
? "evening"
: today.getHours() >= 12
? "afternoon"
: "morning";
? "afternoon"
: "morning";
const nameSuffix = props.userConfig?.given_name ? `, ${props.userConfig?.given_name}` : "";
const greetings = [
`What would you like to get done${nameSuffix}?`,
@@ -354,7 +360,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
setUploadedFiles={props.setUploadedFiles}
agentColor={agents.find((agent) => agent.slug === selectedAgent)?.color}
ref={chatInputRef}
setTriggeredAbort={() => { }}
setTriggeredAbort={() => {}}
/>
</div>
)}
@@ -438,21 +444,23 @@ function ChatBodyData(props: ChatBodyDataProps) {
<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 ? (
getIconFromIconName(
agents.find((agent) => agent.slug === selectedAgent)
?.icon ?? "Lightbulb",
agents.find((agent) => agent.slug === selectedAgent)
?.color ?? "orange",
)
}
{selectedAgent ? `${agents.find((agent) => agent.slug === selectedAgent)?.name}` : "Select Agent"}
) : (
<ArrowsVertical className="h-5 w-5" />
)}
{selectedAgent
? `${agents?.find((agent) => agent.slug === selectedAgent)?.name ?? "Khoj"}`
: "Select Agent"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="overflow-y-scroll h-96">
{
<DropdownMenuContent align="end" className="overflow-y-scroll max-h-96">
{agentIcons.length > 0 ? (
agentIcons.map((icon, index) => (
<DropdownMenuItem
key={`${index}-${agents[index].slug}`}
@@ -464,7 +472,17 @@ function ChatBodyData(props: ChatBodyDataProps) {
{icon} {agents[index].name}
</DropdownMenuItem>
))
}
) : (
<DropdownMenuItem
key="0-khoj"
onClick={() => {
setSelectedAgent("khoj");
chatInputRef.current?.focus();
}}
>
{getIconFromIconName("Lightbulb", "orange")} Khoj
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
<div
@@ -473,15 +491,19 @@ function ChatBodyData(props: ChatBodyDataProps) {
<ChatInputArea
isLoggedIn={props.isLoggedIn}
sendMessage={(message) => setMessage(message)}
sendImage={(image) => setImages((prevImages) => [...prevImages, image])}
sendImage={(image) =>
setImages((prevImages) => [...prevImages, image])
}
sendDisabled={processingMessage}
chatOptionsData={props.chatOptionsData}
conversationId={null}
isMobileWidth={props.isMobileWidth}
setUploadedFiles={props.setUploadedFiles}
agentColor={agents.find((agent) => agent.slug === selectedAgent)?.color}
agentColor={
agents.find((agent) => agent.slug === selectedAgent)?.color
}
ref={chatInputRef}
setTriggeredAbort={() => { }}
setTriggeredAbort={() => {}}
/>
</div>
</div>