From ad3f8a33d155a24dfce5129f8269881a1697fc33 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Thu, 12 Dec 2024 14:57:52 -0800
Subject: [PATCH] Add a static login footer that prompts login, disable input
 box without auth

---
 .../chatInputArea/chatInputArea.tsx           |  6 ++--
 .../app/components/loginPrompt/loginPopup.tsx | 31 +++++++++++++++++++
 .../components/loginPrompt/loginPrompt.tsx    | 13 ++++----
 src/interface/web/app/page.tsx                |  7 +++++
 4 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 src/interface/web/app/components/loginPrompt/loginPopup.tsx

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 627e8517..173f6edc 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -629,7 +629,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                         <Button
                             variant={"ghost"}
                             className="!bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
-                            disabled={props.sendDisabled}
+                            disabled={props.sendDisabled || !props.isLoggedIn}
                             onClick={handleFileButtonClick}
                         >
                             <Paperclip className="w-8 h-8" />
@@ -669,7 +669,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                                             onClick={() => {
                                                 setRecording(!recording);
                                             }}
-                                            disabled={props.sendDisabled}
+                                            disabled={props.sendDisabled || !props.isLoggedIn}
                                         >
                                             <Stop weight="fill" className="w-6 h-6" />
                                         </Button>
@@ -699,6 +699,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                                             <Button
                                                 variant="default"
                                                 className={`${!message || recording || "hidden"} ${props.agentColor ? convertToBGClass(props.agentColor) : "bg-orange-300 hover:bg-orange-500"} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
+                                                disabled={props.sendDisabled || !props.isLoggedIn}
                                                 onClick={() => {
                                                     setMessage("Listening...");
                                                     setRecording(!recording);
@@ -718,6 +719,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                         )}
                         <Button
                             className={`${(!message || recording) && "hidden"} ${props.agentColor ? convertToBGClass(props.agentColor) : "bg-orange-300 hover:bg-orange-500"} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
+                            disabled={props.sendDisabled || !props.isLoggedIn}
                             onClick={onSendMessage}
                         >
                             <ArrowUp className="w-6 h-6" weight="bold" />
diff --git a/src/interface/web/app/components/loginPrompt/loginPopup.tsx b/src/interface/web/app/components/loginPrompt/loginPopup.tsx
new file mode 100644
index 00000000..ca964349
--- /dev/null
+++ b/src/interface/web/app/components/loginPrompt/loginPopup.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardDescription, CardHeader } from "@/components/ui/card";
+import { KhojLogo } from "../logo/khojLogo";
+
+export interface LoginPopupProps {
+    isMobileWidth?: boolean;
+    setShowLoginPrompt: (show: boolean) => void;
+}
+
+export default function LoginPopup(props: LoginPopupProps) {
+    return (
+        <Card className="absolute inset-x-0 bottom-2 md:bottom-8 left-1/2 transform -translate-x-1/2 p-6 flex flex-col md:flex-row items-center justify-between bg-gradient-to-b from-slate-50 dark:from-slate-900 to-bg-secondary z-30 shadow-lg gap-8 w-full md:w-fit">
+            {!props.isMobileWidth && <KhojLogo className="w-12 h-auto" />}
+            <div className="flex flex-col items-start justify-center">
+                <CardHeader className="p-0 text-xl">Welcome to Khoj!</CardHeader>
+                <CardDescription>
+                    Get started with Khoj's AI-powered research assistant now.
+                </CardDescription>
+            </div>
+            <Button
+                variant={"default"}
+                className="bg-gradient-to-br from-orange-200 to-orange-500"
+                onClick={() => props.setShowLoginPrompt(true)}
+            >
+                Get started for free
+            </Button>
+        </Card>
+    );
+}
diff --git a/src/interface/web/app/components/loginPrompt/loginPrompt.tsx b/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
index 8e10dc63..2e639626 100644
--- a/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
+++ b/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
@@ -320,7 +320,7 @@ function MainSignInContext({
     ];
 
     return (
-        <div className="flex flex-col gap-4 p-4">
+        <div className="flex flex-col gap-4 p-4 md:p-0">
             {!isMobileWidth && (
                 <Carousel
                     plugins={[plugin.current]}
@@ -331,13 +331,13 @@ function MainSignInContext({
                     <CarouselContent>
                         {tips.map((tip, index) => (
                             <CarouselItem key={index}>
-                                <div className="p-1">
+                                <div className="p-0">
                                     <Card>
                                         <CardContent className="flex items-center justify-center rounded-b-none rounded-t-lg p-0">
                                             <img
                                                 src={tip.src}
                                                 alt={tip.alt}
-                                                className="w-full h-auto"
+                                                className="w-full h-auto rounded-b-none rounded-t-lg"
                                             />
                                         </CardContent>
                                     </Card>
@@ -351,7 +351,7 @@ function MainSignInContext({
             )}
             <div className="flex flex-col gap-4 text-center p-4">
                 <div className="text-center font-bold text-lg">
-                    Sign In for free to start using Khoj: Your AI-powered second brain
+                    Sign in to unlock your second brain
                 </div>
             </div>
             <div className="flex flex-col gap-4 py-4 text-center align-middle items-center">
@@ -404,7 +404,7 @@ function MainSignInContext({
                 </Button>
 
                 <Button
-                    variant="secondary"
+                    variant="outline"
                     className="w-[300px] p-6 flex gap-2 items-center justify-center"
                     onClick={() => {
                         setUseEmailSignIn(true);
@@ -416,7 +416,8 @@ function MainSignInContext({
             </div>
             <div className="text-center text-muted-foreground text-xs">
                 By logging in, you agree to our{" "}
-                <Link href="https://khoj.dev/terms-of-service">Terms of Service.</Link>
+                <Link href="https://khoj.dev/terms-of-service">Terms of Service</Link>. See{" "}
+                <Link href="https://khoj.dev/privacy-policy">Privacy Policy</Link>.
             </div>
         </div>
     );
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index d503e6a1..bf7f30d1 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -34,6 +34,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { AgentCard } from "@/app/components/agentCard/agentCard";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import LoginPopup from "./components/loginPrompt/loginPopup";
 
 interface ChatBodyDataProps {
     chatOptionsData: ChatOptions | null;
@@ -221,6 +222,12 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     loginRedirectMessage={"Login to your second brain"}
                 />
             )}
+            {!props.isLoggedIn && (
+                <LoginPopup
+                    isMobileWidth={props.isMobileWidth}
+                    setShowLoginPrompt={setShowLoginPrompt}
+                />
+            )}
             <div className={`w-full text-center justify-end content-end`}>
                 <div className="items-center">
                     <h1 className="text-2xl md:text-3xl text-center w-fit pb-6 px-4 mx-auto">