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

@@ -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,7 +114,8 @@ 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"
                                 }
@@ -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 = () =>
+    const { data: agentsData, error } = useSWR<AgentData[]>("/api/agents", fetcher, {
-        window
-            .fetch("/api/agents")
-            .then((res) => res.json())
-            .catch((err) => console.log(err));
-    const { data: agentsData, error } = useSWR<AgentData[]>("agents", agentsFetcher, {
         revalidateOnFocus: false,
     });
 
@@ -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 ? (
-                                        selectedAgent ? (
                                         getIconFromIconName(
-                                                agents.find((agent) => agent.slug === selectedAgent)?.icon ?? "",
+                                            agents.find((agent) => agent.slug === selectedAgent)
-                                                agents.find((agent) => agent.slug === selectedAgent)?.color ?? ""
+                                                ?.icon ?? "Lightbulb",
+                                            agents.find((agent) => agent.slug === selectedAgent)
+                                                ?.color ?? "orange",
                                         )
                                     ) : (
                                         <ArrowsVertical className="h-5 w-5" />
-                                        )
+                                    )}
-                                    }
+                                    {selectedAgent
-                                    {selectedAgent ? `${agents.find((agent) => agent.slug === selectedAgent)?.name}` : "Select Agent"}
+                                        ? `${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>