From f15a95dccfba810bcf681cda1d30e36e3a8848fd Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Thu, 20 Mar 2025 12:24:11 +0530
Subject: [PATCH] Show Khoj agent in agent dropdown by default on mobile in web
 app home

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
---
 src/interface/web/app/page.tsx | 82 +++++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index d76542b7..0e163148 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -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>