mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-12-18 10:37:11 +00:00
Add a static login footer that prompts login, disable input box without auth
This commit is contained in:
sabaimran
parent
a7d0ed8670
commit
ad3f8a33d1
4 changed files with 49 additions and 8 deletions
|
|
@ -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" />
|
||||
|
|
|
|||
31
src/interface/web/app/components/loginPrompt/loginPopup.tsx
Normal file
31
src/interface/web/app/components/loginPrompt/loginPopup.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue