Clean up all references to authenticatedData

- De facto, was being assumed everywhere if authenticatedData is null, that it's not logged in. This isn't true because the data can still be loading. Update the hook to send additional states.
- Bonus: Delete model picker code and a slew of unused imports.

src/interface/web/app/components/agentCard/agentCard.tsx

@@ -326,7 +326,6 @@ export function AgentCard(props: AgentCardProps) {
         <Card className={`shadow-md rounded-xl hover:shadow-lg dark:bg-muted`}>
             {showLoginPrompt && (
                 <LoginPrompt
-                    loginRedirectMessage={`Sign in to start chatting with ${props.data.name}`}
                     onOpenChange={setShowLoginPrompt}
                     isMobileWidth={props.isMobileWidth}
                 />

src/interface/web/app/components/allConversations/allConversations.tsx

@@ -3,7 +3,6 @@
 import styles from "./sidePanel.module.css";
 
 import { useEffect, useMemo, useState } from "react";
-import { useRef } from "react";
 
 import { mutate } from "swr";
 
@@ -102,14 +101,10 @@ import {
 } from "@/components/ui/alert-dialog";
 import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
 import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
-import { KhojLogoType } from "@/app/components/logo/khojLogo";
-import NavMenu from "@/app/components/navMenu/navMenu";
 import { getIconFromIconName } from "@/app/common/iconUtils";
-import LoginPrompt from "../loginPrompt/loginPrompt";
 import {
     SidebarGroup,
     SidebarGroupLabel,
-    SidebarMenu,
     SidebarMenuAction,
     SidebarMenuButton,
     SidebarMenuItem,
@@ -908,9 +903,12 @@ export default function AllConversations(props: SidePanelProps) {
     const [data, setData] = useState<ChatHistory[] | null>(null);
     const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null);
     const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
-    const [showLoginPrompt, setShowLoginPrompt] = useState(false);
 
-    const authenticatedData = useAuthenticatedData();
+    const {
+        data: authenticatedData,
+        error: authenticationError,
+        isLoading: authenticationLoading,
+    } = useAuthenticatedData();
     const { data: chatSessions, isLoading } = useChatSessionsFetchRequest(
         authenticatedData ? `/api/chat/sessions` : "",
     );

src/interface/web/app/components/appSidebar/appSidebar.tsx

@@ -1,18 +1,14 @@
-import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
-
 import {
     Sidebar,
     SidebarContent,
     SidebarFooter,
     SidebarGroup,
     SidebarGroupContent,
-    SidebarGroupLabel,
     SidebarHeader,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
 } from "@/components/ui/sidebar";
-import Link from "next/link";
 import {
     KhojAgentLogo,
     KhojAutomationLogo,
@@ -21,12 +17,12 @@ import {
     KhojSearchLogo,
 } from "../logo/khojLogo";
 import { Gear } from "@phosphor-icons/react/dist/ssr";
-import { House, Plus } from "@phosphor-icons/react";
+import { Plus } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
-import { useAuthenticatedData } from "@/app/common/auth";
 import AllConversations from "../allConversations/allConversations";
 import NavMenu from "../navMenu/navMenu";
 import { useSidebar } from "@/components/ui/sidebar";
+import { useIsMobileWidth } from "@/app/common/utils";
 
 // Menu items.
 const items = [
@@ -66,21 +62,11 @@ interface AppSidebarProps {
 }
 
 export function AppSidebar(props: AppSidebarProps) {
-    const [isMobileWidth, setIsMobileWidth] = useState(false);
+    const isMobileWidth = useIsMobileWidth();
 
     const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } =
         useSidebar();
 
-    useEffect(() => {
-        const handleResize = () => {
-            setIsMobileWidth(window.innerWidth < 768);
-        };
-
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-
     return (
         <Sidebar collapsible={"icon"} variant="sidebar">
             <SidebarHeader>

src/interface/web/app/components/chatInputArea/chatInputArea.tsx

@@ -409,7 +409,6 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                 <LoginPrompt
                     onOpenChange={setShowLoginPrompt}
                     isMobileWidth={props.isMobileWidth}
-                    loginRedirectMessage={loginRedirectMessage}
                 />
             )}
             {uploading && (

src/interface/web/app/components/loginPrompt/loginPrompt.tsx

@@ -29,7 +29,6 @@ import { Card, CardContent } from "@/components/ui/card";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 
 export interface LoginPromptProps {
-    loginRedirectMessage: string;
     onOpenChange: (open: boolean) => void;
     isMobileWidth?: boolean;
 }

src/interface/web/app/components/modelPicker/modelPicker.module.css

@@ -1,23 +0,0 @@
-select.modelPicker {
-    font-size: small;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    border: none;
-    border-width: 1px;
-    display: flex;
-    align-items: center;
-    height: 2.5rem;
-    justify-content: space-between;
-    border-radius: calc(0.5rem - 2px);
-}
-
-select.modelPicker:after {
-    grid-area: select;
-    justify-self: end;
-}
-
-div.modelPicker {
-    margin-top: 8px;
-}

src/interface/web/app/components/modelPicker/modelPicker.tsx

@@ -1,166 +0,0 @@
-import { useAuthenticatedData } from "@/app/common/auth";
-import React, { useEffect } from "react";
-import useSWR from "swr";
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-
-import styles from "./modelPicker.module.css";
-
-export interface Model {
-    id: number;
-    chat_model: string;
-}
-
-// Custom fetcher function to fetch options
-const fetchOptionsRequest = async (url: string) => {
-    const response = await fetch(url, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-        },
-    });
-    return response.json();
-};
-
-export const useOptionsRequest = (url: string) => {
-    const { data, error } = useSWR<Model[]>(url, fetchOptionsRequest);
-
-    return {
-        data,
-        isLoading: !error && !data,
-        isError: error,
-    };
-};
-
-const fetchSelectedModel = async (url: string) => {
-    const response = await fetch(url, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-        },
-    });
-    return response.json();
-};
-
-export const useSelectedModel = (url: string) => {
-    const { data, error } = useSWR<Model>(url, fetchSelectedModel);
-
-    return {
-        data,
-        isLoading: !error && !data,
-        isError: error,
-    };
-};
-
-interface ModelPickerProps {
-    disabled?: boolean;
-    setModelUsed?: (model: Model) => void;
-    initialModel?: Model;
-}
-
-export const ModelPicker: React.FC<any> = (props: ModelPickerProps) => {
-    const { data: models } = useOptionsRequest("/api/model/chat/options");
-    const { data: selectedModel } = useSelectedModel("/api/model/chat");
-    const [openLoginDialog, setOpenLoginDialog] = React.useState(false);
-
-    let userData = useAuthenticatedData();
-
-    const setModelUsed = props.setModelUsed;
-
-    useEffect(() => {
-        if (setModelUsed && selectedModel) {
-            setModelUsed(selectedModel);
-        }
-    }, [selectedModel, setModelUsed]);
-
-    if (!models) {
-        return <div>Loading...</div>;
-    }
-
-    function onSelect(model: Model) {
-        if (!userData) {
-            setOpenLoginDialog(true);
-            return;
-        }
-
-        if (props.setModelUsed) {
-            props.setModelUsed(model);
-        }
-
-        fetch("/api/model/chat" + "?id=" + String(model.id), {
-            method: "POST",
-            body: JSON.stringify(model),
-        })
-            .then((response) => {
-                if (!response.ok) {
-                    throw new Error("Failed to select model");
-                }
-            })
-            .catch((error) => {
-                console.error("Failed to select model", error);
-            });
-    }
-
-    function isSelected(model: Model) {
-        if (props.initialModel) {
-            return model.id === props.initialModel.id;
-        }
-        return selectedModel?.id === model.id;
-    }
-
-    return (
-        <div className={styles.modelPicker}>
-            <select
-                className={styles.modelPicker}
-                onChange={(e) => {
-                    const selectedModelId = Number(e.target.value);
-                    const selectedModel = models.find((model) => model.id === selectedModelId);
-                    if (selectedModel) {
-                        onSelect(selectedModel);
-                    } else {
-                        console.error("Selected model not found", e.target.value);
-                    }
-                }}
-                disabled={props.disabled}
-            >
-                {models?.map((model) => (
-                    <option key={model.id} value={model.id} selected={isSelected(model)}>
-                        {model.chat_model}
-                    </option>
-                ))}
-            </select>
-            <AlertDialog open={openLoginDialog} onOpenChange={setOpenLoginDialog}>
-                <AlertDialogContent>
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>
-                            You must be logged in to configure your model.
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Once you create an account with Khoj, you can configure your model and
-                            use a whole suite of other features. Check out our{" "}
-                            <a href="https://docs.khoj.dev/">documentation</a> to learn more.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={() => {
-                                window.location.href = window.location.origin + "/login";
-                            }}
-                        >
-                            Sign in
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-        </div>
-    );
-};

src/interface/web/app/components/navMenu/navMenu.tsx

@@ -1,20 +1,10 @@
 "use client";
 
-import styles from "./navMenu.module.css";
 import Link from "next/link";
 import { useAuthenticatedData } from "@/app/common/auth";
 import { useState, useEffect } from "react";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 
-import {
-    Menubar,
-    MenubarContent,
-    MenubarItem,
-    MenubarMenu,
-    MenubarSeparator,
-    MenubarTrigger,
-} from "@/components/ui/menubar";
-
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -22,8 +12,7 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Moon, Sun, UserCircle, Question, GearFine, ArrowRight, Code } from "@phosphor-icons/react";
-import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
+import { Moon, Sun, UserCircle, Question, ArrowRight, Code } from "@phosphor-icons/react";
 import { useIsMobileWidth } from "@/app/common/utils";
 import LoginPrompt from "../loginPrompt/loginPrompt";
 import { Button } from "@/components/ui/button";
@@ -55,10 +44,13 @@ interface NavMenuProps {
 }
 
 export default function NavMenu({ sideBarIsOpen }: NavMenuProps) {
-    const userData = useAuthenticatedData();
+    const {
+        data: userData,
+        error: authenticationError,
+        isLoading: authenticationLoading,
+    } = useAuthenticatedData();
     const [darkMode, setDarkMode] = useState(false);
     const [initialLoadDone, setInitialLoadDone] = useState(false);
-    const isMobileWidth = useIsMobileWidth();
     const [showLoginPrompt, setShowLoginPrompt] = useState(false);
 
     useEffect(() => {
@@ -97,6 +89,12 @@ export default function NavMenu({ sideBarIsOpen }: NavMenuProps) {
     return (
         <SidebarMenu className="border-none p-0 m-0">
             <SidebarMenuItem className="p-0 m-0">
+                {showLoginPrompt && (
+                    <LoginPrompt
+                        onOpenChange={(isOpen) => setShowLoginPrompt(isOpen)}
+                        isMobileWidth={useIsMobileWidth()}
+                    />
+                )}
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <SidebarMenuButton className="p-0 m-0 rounded-lg" asChild>