Use the LoginPrompt in the chat history side panel

This commit is contained in:
sabaimran 2024-12-11 22:56:03 -08:00
parent b60b750555
commit 41bb1e60d0

View file

@ -105,6 +105,7 @@ import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
import { KhojLogoType } from "@/app/components/logo/khojLogo"; import { KhojLogoType } from "@/app/components/logo/khojLogo";
import NavMenu from "@/app/components/navMenu/navMenu"; import NavMenu from "@/app/components/navMenu/navMenu";
import { getIconFromIconName } from "@/app/common/iconUtils"; import { getIconFromIconName } from "@/app/common/iconUtils";
import LoginPrompt from "../loginPrompt/loginPrompt";
// Define a fetcher function // Define a fetcher function
const fetcher = (url: string) => const fetcher = (url: string) =>
@ -908,6 +909,7 @@ export default function SidePanel(props: SidePanelProps) {
const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null); const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null);
const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null); const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
const [enabled, setEnabled] = useState(false); const [enabled, setEnabled] = useState(false);
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
const authenticatedData = useAuthenticatedData(); const authenticatedData = useAuthenticatedData();
const { data: chatSessions } = useChatSessionsFetchRequest( const { data: chatSessions } = useChatSessionsFetchRequest(
@ -955,6 +957,13 @@ export default function SidePanel(props: SidePanelProps) {
<div <div
className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed} ${props.isMobileWidth ? "mt-0" : "mt-1"}`} className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed} ${props.isMobileWidth ? "mt-0" : "mt-1"}`}
> >
{showLoginPrompt && (
<LoginPrompt
loginRedirectMessage="Sign in to start chatting"
onOpenChange={setShowLoginPrompt}
isMobileWidth={props.isMobileWidth}
/>
)}
<div className={`flex justify-between flex-row`}> <div className={`flex justify-between flex-row`}>
{props.isMobileWidth ? ( {props.isMobileWidth ? (
<Drawer <Drawer
@ -990,17 +999,15 @@ export default function SidePanel(props: SidePanelProps) {
</div> </div>
) : ( ) : (
<div className={`${styles.panelWrapper}`}> <div className={`${styles.panelWrapper}`}>
<Link
href={`/login?next=${encodeURIComponent(window.location.pathname)}`}
className="text-center"
>
{" "} {" "}
{/* Redirect to login page */} {/* Redirect to login page */}
<Button variant="default"> <Button
variant="default"
onClick={() => setShowLoginPrompt(true)}
>
<UserCirclePlus className="h-4 w-4 mr-1" /> <UserCirclePlus className="h-4 w-4 mr-1" />
Sign Up Sign Up
</Button> </Button>
</Link>
</div> </div>
)} )}
<DrawerFooter> <DrawerFooter>
@ -1068,15 +1075,11 @@ export default function SidePanel(props: SidePanelProps) {
<StackPlus className="h-4 w-4 mr-1" /> <StackPlus className="h-4 w-4 mr-1" />
New Conversation New Conversation
</Button> </Button>
</Link> </Link>{" "}
<Link href={`/login?next=${encodeURIComponent(window.location.pathname)}`}> <Button variant="default" onClick={() => setShowLoginPrompt(true)}>
{" "}
{/* Redirect to login page */}
<Button variant="default">
<UserCirclePlus className="h-4 w-4 mr-1" /> <UserCirclePlus className="h-4 w-4 mr-1" />
Sign Up Sign Up
</Button> </Button>
</Link>
</div> </div>
)} )}
</div> </div>