From bea0aa5445a775755693574380f387bbf4b82875 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Thu, 11 Jul 2024 20:11:21 +0530
Subject: [PATCH] Improve the logged out share experience

---
 .../chatInputArea/chatInputArea.tsx           | 29 +++++++++++-
 .../app/components/loading/loading.module.css | 24 ----------
 .../web/app/components/loading/loading.tsx    |  7 +--
 .../components/loginPrompt/loginPrompt.tsx    | 42 +++++++++++++++++
 .../sidePanel/chatHistorySidePanel.tsx        | 46 ++++++++++---------
 .../web/app/share/chat/[slug]/page.tsx        |  5 +-
 6 files changed, 102 insertions(+), 51 deletions(-)
 delete mode 100644 src/interface/web/app/components/loading/loading.module.css
 create mode 100644 src/interface/web/app/components/loginPrompt/loginPrompt.tsx

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index c624a961..760301d9 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -39,11 +39,15 @@ import {
     AlertDialogAction,
     AlertDialogContent,
     AlertDialogDescription,
+    AlertDialogFooter,
     AlertDialogHeader,
     AlertDialogTitle
 } from '@/components/ui/alert-dialog';
 import { Popover, PopoverContent } from '@/components/ui/popover';
 import { PopoverTrigger } from '@radix-ui/react-popover';
+import Link from 'next/link';
+import { AlertDialogCancel } from '@radix-ui/react-alert-dialog';
+import LoginPrompt from '../loginPrompt/loginPrompt';
 
 export interface ChatOptions {
     [key: string]: string
@@ -66,6 +70,8 @@ export default function ChatInputArea(props: ChatInputProps) {
     const [warning, setWarning] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
     const [uploading, setUploading] = useState(false);
+    const [loginRedirectMessage, setLoginRedirectMessage] = useState<string | null>(null);
+    const [showLoginPrompt, setShowLoginPrompt] = useState(false);
 
     const [progressValue, setProgressValue] = useState(0);
 
@@ -87,7 +93,15 @@ export default function ChatInputArea(props: ChatInputProps) {
     }, [uploading]);
 
     function onSendMessage() {
-        props.sendMessage(message);
+        if (!message.trim()) return;
+
+        if (!props.isLoggedIn) {
+            setLoginRedirectMessage('Hey there, you need to be signed in to send messages to Khoj AI');
+            setShowLoginPrompt(true);
+            return;
+        }
+
+        props.sendMessage(message.trim());
         setMessage('');
     }
 
@@ -103,6 +117,12 @@ export default function ChatInputArea(props: ChatInputProps) {
     function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
         if (!event.target.files) return;
 
+        if (!props.isLoggedIn) {
+            setLoginRedirectMessage('Whoa! You need to login to upload files');
+            setShowLoginPrompt(true);
+            return;
+        }
+
         uploadDataForIndexing(
             event.target.files,
             setWarning,
@@ -153,6 +173,13 @@ export default function ChatInputArea(props: ChatInputProps) {
 
     return (
         <>
+            {
+                showLoginPrompt && loginRedirectMessage && (
+                    <LoginPrompt
+                        onOpenChange={setShowLoginPrompt}
+                        loginRedirectMessage={loginRedirectMessage} />
+                )
+            }
             {
                 uploading && (
                     <AlertDialog
diff --git a/src/interface/web/app/components/loading/loading.module.css b/src/interface/web/app/components/loading/loading.module.css
deleted file mode 100644
index e22778a4..00000000
--- a/src/interface/web/app/components/loading/loading.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-/* HTML: <div class="loader"></div> */
-.loader {
-    --c: conic-gradient(from -90deg, hsla(var(--secondary)) 90deg, #0000 0);
-    background: var(--c), var(--c);
-    background-size: 40% 40%;
-    animation: l19 1s infinite alternate;
-}
-
-@keyframes l19 {
-
-    0%,
-    10% {
-        background-position: 0 0, 0 calc(100%/3)
-    }
-
-    50% {
-        background-position: 0 0, calc(100%/3) calc(100%/3)
-    }
-
-    90%,
-    100% {
-        background-position: 0 0, calc(100%/3) 0
-    }
-}
diff --git a/src/interface/web/app/components/loading/loading.tsx b/src/interface/web/app/components/loading/loading.tsx
index a45377a5..97f8ade3 100644
--- a/src/interface/web/app/components/loading/loading.tsx
+++ b/src/interface/web/app/components/loading/loading.tsx
@@ -1,10 +1,11 @@
-import styles from './loading.module.css';
-
 import { CircleNotch } from '@phosphor-icons/react';
 
 export default function Loading() {
     return (
-        <div className={`${styles.loader} h-[100vh] flex items-center justify-center`}></div>
+        // NOTE: We can display usage tips here for casual learning moments.
+        <div className={`bg-background opacity-50 flex items-center justify-center h-screen`}>
+            <div>Loading <span><CircleNotch className={`inline animate-spin h-5 w-5`} /></span></div>
+        </div>
     );
 }
 
diff --git a/src/interface/web/app/components/loginPrompt/loginPrompt.tsx b/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
new file mode 100644
index 00000000..3ec4f2f3
--- /dev/null
+++ b/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
@@ -0,0 +1,42 @@
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle
+} from '@/components/ui/alert-dialog';
+import Link from 'next/link';
+
+export interface LoginPromptProps {
+    loginRedirectMessage: string;
+    onOpenChange: (open: boolean) => void;
+}
+
+export default function LoginPrompt(props: LoginPromptProps) {
+    return (
+        <AlertDialog
+            open={true}
+            onOpenChange={props.onOpenChange}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Sign in to Khoj to continue</AlertDialogTitle>
+                </AlertDialogHeader>
+                <AlertDialogDescription>{props.loginRedirectMessage}. By logging in, you agree to our <Link href="https://khoj.dev/terms-of-service">Terms of Service.</Link></AlertDialogDescription>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Dismiss</AlertDialogCancel>
+                    <AlertDialogAction className='bg-slate-400 hover:bg-slate-500'
+                        onClick={() => {
+                            window.location.href = `/login?next=${encodeURIComponent(window.location.pathname)}`;
+                        }}>
+                        <Link href={`/login?next=${encodeURIComponent(window.location.pathname)}`}> {/* Redirect to login page */}
+                            Login
+                        </Link>
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}
diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
index 382a45ee..351a77aa 100644
--- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
+++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
@@ -4,7 +4,7 @@ import styles from "./sidePanel.module.css";
 
 import { Suspense, useEffect, useState } from "react";
 
-import { UserProfile } from "@/app/common/auth";
+import { UserProfile, useAuthenticatedData } from "@/app/common/auth";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import Link from "next/link";
 import useSWR from "swr";
@@ -45,7 +45,7 @@ import {
 
 import { ScrollArea } from "@/components/ui/scroll-area";
 
-import { ArrowRight, ArrowLeft, ArrowDown, Spinner, Check, FolderPlus, DotsThreeVertical } from "@phosphor-icons/react";
+import { ArrowRight, ArrowLeft, ArrowDown, Spinner, Check, FolderPlus, DotsThreeVertical, House, StackPlus, UserCirclePlus } from "@phosphor-icons/react";
 
 interface ChatHistory {
     conversation_id: string;
@@ -496,7 +496,7 @@ function ChatSessionActionMenu(props: ChatSessionActionMenuProps) {
         <DropdownMenu
             onOpenChange={(open) => setIsOpen(open)}
             open={isOpen}>
-            <DropdownMenuTrigger><DotsThreeVertical className="h-4 w-4"/></DropdownMenuTrigger>
+            <DropdownMenuTrigger><DotsThreeVertical className="h-4 w-4" /></DropdownMenuTrigger>
             <DropdownMenuContent>
                 <DropdownMenuItem>
                     <Button className="p-0 text-sm h-auto" variant={'ghost'} onClick={() => setIsRenaming(true)}>
@@ -544,7 +544,7 @@ function ChatSessionsModal({ data }: ChatSessionsModalProps) {
         <Dialog>
             <DialogTrigger
                 className="flex text-left text-medium text-gray-500 hover:text-gray-300 cursor-pointer my-4 text-sm p-[0.5rem]">
-                    <span className="mr-2">See All <ArrowRight className="h-4 w-4" /></span>
+                <span className="mr-2">See All <ArrowRight className="h-4 w-4" /></span>
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>
@@ -656,9 +656,9 @@ export default function SidePanel(props: SidePanelProps) {
     const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
     const [enabled, setEnabled] = useState(false);
 
-    const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+    const authenticatedData = useAuthenticatedData();
+    const { data: chatSessions } = useChatSessionsFetchRequest(authenticatedData ? `/api/chat/sessions` : '');
 
-    const { data: chatSessions } = useChatSessionsFetchRequest('/api/chat/sessions');
 
     const [isMobileWidth, setIsMobileWidth] = useState(false);
 
@@ -707,16 +707,6 @@ export default function SidePanel(props: SidePanelProps) {
         window.addEventListener('resize', () => {
             setIsMobileWidth(window.innerWidth < 768);
         });
-
-        fetch('/api/v1/user', { method: 'GET' })
-            .then(response => response.json())
-            .then((data: UserProfile) => {
-                setUserProfile(data);
-            })
-            .catch(err => {
-                console.error(err);
-                return;
-            });
     }, []);
 
     return (
@@ -728,7 +718,8 @@ export default function SidePanel(props: SidePanelProps) {
                     height={40}
                 />
                 {
-                    isMobileWidth ?
+                    authenticatedData &&
+                        isMobileWidth ?
                         <Drawer>
                             <DrawerTrigger><ArrowRight className="h-4 w-4 mx-2" /></DrawerTrigger>
                             <DrawerContent>
@@ -744,7 +735,7 @@ export default function SidePanel(props: SidePanelProps) {
                                         organizedData={organizedData}
                                         data={data}
                                         uploadedFiles={props.uploadedFiles}
-                                        userProfile={userProfile}
+                                        userProfile={authenticatedData}
                                         conversationId={props.conversationId}
                                         isMobileWidth={isMobileWidth}
                                     />
@@ -763,7 +754,7 @@ export default function SidePanel(props: SidePanelProps) {
                 }
             </div>
             {
-                enabled &&
+                authenticatedData && enabled &&
                 <div className={`${styles.panelWrapper}`}>
                     <SessionsAndFiles
                         webSocketConnected={props.webSocketConnected}
@@ -772,13 +763,26 @@ export default function SidePanel(props: SidePanelProps) {
                         organizedData={organizedData}
                         data={data}
                         uploadedFiles={props.uploadedFiles}
-                        userProfile={userProfile}
+                        userProfile={authenticatedData}
                         conversationId={props.conversationId}
                         isMobileWidth={isMobileWidth}
                     />
                 </div>
             }
-
+            {
+                !authenticatedData && enabled &&
+                <div className={`${styles.panelWrapper}`}>
+                    <Link href="/">
+                        <Button variant="ghost"><House className="h-4 w-4 mr-1" />Home</Button>
+                    </Link>
+                    <Link href="/">
+                        <Button variant="ghost"><StackPlus className="h-4 w-4 mr-1" />New Conversation</Button>
+                    </Link>
+                    <Link href={`/login?next=${encodeURIComponent(window.location.pathname)}`}> {/* Redirect to login page */}
+                        <Button variant="default"><UserCirclePlus className="h-4 w-4 mr-1"/>Sign Up</Button>
+                    </Link>
+                </div>
+            }
         </div>
     );
 }
diff --git a/src/interface/web/app/share/chat/[slug]/page.tsx b/src/interface/web/app/share/chat/[slug]/page.tsx
index 8681535e..d16b4478 100644
--- a/src/interface/web/app/share/chat/[slug]/page.tsx
+++ b/src/interface/web/app/share/chat/[slug]/page.tsx
@@ -76,7 +76,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                 <ChatInputArea
                     isLoggedIn={props.isLoggedIn}
                     sendMessage={(message) => setMessage(message)}
-                    sendDisabled={!props.isLoggedIn || processingMessage}
+                    sendDisabled={processingMessage}
                     chatOptionsData={props.chatOptionsData}
                     conversationId={props.conversationId}
                     isMobileWidth={props.isMobileWidth}
@@ -280,7 +280,7 @@ export default function SharedChat({ params }: { params: { slug: string } }) {
 
 
     return (
-        <div className={`${styles.main} ${authenticatedData ? styles.chatLayout : ''}`}>
+        <div className={`${styles.main} ${styles.chatLayout}`}>
             <title>
                 {title}
             </title>
@@ -290,6 +290,7 @@ export default function SharedChat({ params }: { params: { slug: string } }) {
                     conversationId={conversationId ?? null}
                     uploadedFiles={uploadedFiles} />
             </div>
+
             <div className={styles.chatBox}>
                 <NavMenu selected="Chat" title={title} />
                 <div className={styles.chatBoxBody}>