From 0fefbac89f9fba954e22305661571318e48a6a50 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Sun, 22 Dec 2024 09:58:21 -0800
Subject: [PATCH] Improve sidebar experience for not logged in state

---
 .../allConversations/allConversations.tsx     | 12 +++----
 .../app/components/appSidebar/appSidebar.tsx  | 36 +++++++++++++++++--
 .../web/app/components/navMenu/navMenu.tsx    |  2 +-
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/interface/web/app/components/allConversations/allConversations.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx
index 29c43e48..52c6806e 100644
--- a/src/interface/web/app/components/allConversations/allConversations.tsx
+++ b/src/interface/web/app/components/allConversations/allConversations.tsx
@@ -883,13 +883,9 @@ const fetchChatHistory = async (url: string) => {
 };
 
 export const useChatSessionsFetchRequest = (url: string) => {
-    const { data, error } = useSWR<ChatHistory[]>(url, fetchChatHistory);
+    const { data, isLoading, error } = useSWR<ChatHistory[]>(url, fetchChatHistory);
 
-    return {
-        data,
-        isLoading: !error && !data,
-        isError: error,
-    };
+    return { data, isLoading, error };
 };
 
 interface SidePanelProps {
@@ -965,10 +961,12 @@ export default function AllConversations(props: SidePanelProps) {
 
     return (
         <SidebarGroup>
-            <SidebarGroupLabel className="!p-0 m-0 px-0">Conversations</SidebarGroupLabel>
             <div className={`flex justify-between flex-col`}>
                 {authenticatedData && (
                     <>
+                        <SidebarGroupLabel className="!p-0 m-0 px-0">
+                            Conversations
+                        </SidebarGroupLabel>
                         <div
                             className={`${props.sideBarOpen ? "border-l-2 border-light-blue-500 border-opacity-25 " : ""}`}
                         >
diff --git a/src/interface/web/app/components/appSidebar/appSidebar.tsx b/src/interface/web/app/components/appSidebar/appSidebar.tsx
index 590fb842..d80314b9 100644
--- a/src/interface/web/app/components/appSidebar/appSidebar.tsx
+++ b/src/interface/web/app/components/appSidebar/appSidebar.tsx
@@ -20,9 +20,12 @@ import { Gear } from "@phosphor-icons/react/dist/ssr";
 import { Plus } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 import AllConversations from "../allConversations/allConversations";
-import NavMenu from "../navMenu/navMenu";
+import FooterMenu from "../navMenu/navMenu";
 import { useSidebar } from "@/components/ui/sidebar";
 import { useIsMobileWidth } from "@/app/common/utils";
+import { UserPlusIcon } from "lucide-react";
+import { useAuthenticatedData } from "@/app/common/auth";
+import LoginPrompt from "../loginPrompt/loginPrompt";
 
 // Menu items.
 const items = [
@@ -63,10 +66,19 @@ interface AppSidebarProps {
 
 export function AppSidebar(props: AppSidebarProps) {
     const isMobileWidth = useIsMobileWidth();
+    const { data, isLoading, error } = useAuthenticatedData();
 
     const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } =
         useSidebar();
 
+    const [showLoginPrompt, setShowLoginPrompt] = useState(false);
+
+    useEffect(() => {
+        if (!isLoading && !data) {
+            setShowLoginPrompt(true);
+        }
+    }, [isLoading, data]);
+
     return (
         <Sidebar collapsible={"icon"} variant="sidebar" className="md:py-2">
             <SidebarHeader>
@@ -89,9 +101,29 @@ export function AppSidebar(props: AppSidebarProps) {
                 </SidebarMenu>
             </SidebarHeader>
             <SidebarContent>
+                {showLoginPrompt && (
+                    <LoginPrompt
+                        onOpenChange={(isOpen) => setShowLoginPrompt(isOpen)}
+                        isMobileWidth={isMobileWidth}
+                    />
+                )}
                 <SidebarGroup>
                     <SidebarGroupContent>
                         <SidebarMenu className="p-0 m-0">
+                            {!isLoading && !data && (
+                                <SidebarMenuItem className="p-0 m-0 list-none">
+                                    <SidebarMenuButton
+                                        asChild
+                                        variant={"default"}
+                                        onClick={() => setShowLoginPrompt(true)}
+                                    >
+                                        <div>
+                                            <UserPlusIcon />
+                                            <span>Sign up to get started</span>
+                                        </div>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            )}
                             {items.map((item) => (
                                 <SidebarMenuItem key={item.title} className="p-0 list-none m-0">
                                     <SidebarMenuButton asChild>
@@ -116,7 +148,7 @@ export function AppSidebar(props: AppSidebarProps) {
                 </SidebarGroup>
             </SidebarContent>
             <SidebarFooter>
-                <NavMenu sideBarIsOpen={open} />
+                <FooterMenu sideBarIsOpen={open} />
             </SidebarFooter>
         </Sidebar>
     );
diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx
index d6bfd85c..434a9e2e 100644
--- a/src/interface/web/app/components/navMenu/navMenu.tsx
+++ b/src/interface/web/app/components/navMenu/navMenu.tsx
@@ -43,7 +43,7 @@ interface NavMenuProps {
     sideBarIsOpen: boolean;
 }
 
-export default function NavMenu({ sideBarIsOpen }: NavMenuProps) {
+export default function FooterMenu({ sideBarIsOpen }: NavMenuProps) {
     const {
         data: userData,
         error: authenticationError,