sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-18 18:47:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 23

Update image assets to sign up prompt

Browse source
This commit is contained in:
sabaimran 2024-12-13 11:30:14 -08:00
parent 62545a9af3
commit d5681ad1a2
4 changed files with 80 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View file

@ -732,6 +732,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
<Button <Button
variant="ghost" variant="ghost"
className="float-right justify-center gap-1 flex items-center p-1.5 mr-2 h-fit" className="float-right justify-center gap-1 flex items-center p-1.5 mr-2 h-fit"
disabled={props.sendDisabled || !props.isLoggedIn}
onClick={() => { onClick={() => {
setUseResearchMode(!useResearchMode); setUseResearchMode(!useResearchMode);
chatInputRef?.current?.focus(); chatInputRef?.current?.focus();

8
src/interface/web/app/components/loginPrompt/loginPopup.tsx
View file

@ -11,17 +11,17 @@ export interface LoginPopupProps {
export default function LoginPopup(props: LoginPopupProps) { export default function LoginPopup(props: LoginPopupProps) {
return ( 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"> <Card className="absolute rounded-lg 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" />} {!props.isMobileWidth && <KhojLogo className="w-12 h-auto" />}
<div className="flex flex-col items-start justify-center"> <div className="flex flex-col items-start justify-center">
<CardHeader className="p-0 text-xl">Welcome to Khoj!</CardHeader> <CardHeader className="p-0 text-xl font-bold">Welcome to Khoj!</CardHeader>
<CardDescription> <CardDescription>
Get started with Khoj, your AI-powered research assistant, now. Get started with Khoj, your AI-powered knowledge assistant.
</CardDescription> </CardDescription>
</div> </div>
<Button <Button
variant={"default"} variant={"default"}
className="bg-gradient-to-br from-orange-200 to-orange-500" className="p-8 text-lg"
onClick={() => props.setShowLoginPrompt(true)} onClick={() => props.setShowLoginPrompt(true)}
> >
Get started for free Get started for free

1
src/interface/web/app/components/loginPrompt/loginPrompt.module.css
View file

@ -3,7 +3,6 @@
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;
-webkit-appearance: none; -webkit-appearance: none;
background-color: WHITE;
background-image: none; background-image: none;
/* border: 1px solid #747775; */ /* border: 1px solid #747775; */
-webkit-border-radius: 20px; -webkit-border-radius: 20px;

119
src/interface/web/app/components/loginPrompt/loginPrompt.tsx
View file

@ -145,7 +145,7 @@ export default function LoginPrompt(props: LoginPromptProps) {
if (props.isMobileWidth) { if (props.isMobileWidth) {
return ( return (
<Drawer open={true} onOpenChange={props.onOpenChange}> <Drawer open={true} onOpenChange={props.onOpenChange}>
<DrawerContent className={`flex flex-col gap-4 max-w-xl`}> <DrawerContent className={`flex flex-col gap-4 w-full`}>
<div> <div>
{useEmailSignIn && ( {useEmailSignIn && (
<EmailSignInContext <EmailSignInContext
@ -178,7 +178,7 @@ export default function LoginPrompt(props: LoginPromptProps) {
return ( return (
<Dialog open={true} onOpenChange={props.onOpenChange}> <Dialog open={true} onOpenChange={props.onOpenChange}>
<DialogContent <DialogContent
className={`flex flex-col gap-4 max-w-xl ${!useEmailSignIn ? "p-0 pb-4 m-0" : ""}`} className={`flex flex-col gap-4 ${!useEmailSignIn ? "p-0 pb-4 m-0 max-w-xl" : "w-fit"}`}
> >
<div> <div>
{useEmailSignIn && ( {useEmailSignIn && (
@ -239,55 +239,60 @@ function EmailSignInContext({
<ArrowLeft className="h-6 w-6" /> <ArrowLeft className="h-6 w-6" />
</Button> </Button>
<div> <div>
<div className="text-center font-bold text-lg">Sign in with Email</div> <div className="text-center font-bold text-xl">Get started with Khoj</div>
</div> </div>
<div className="text-center text-sm text-muted-foreground"> <div className="text-center text-sm text-muted-foreground">
{checkEmail {checkEmail
? recheckEmail ? recheckEmail
? "A new link has been sent. Click on the link in your email to sign-in" ? `A new link has been sent to ${email}. Click on the link in your email to sign-in`
: "Click on the link in your email to sign-in" : `A sign-in link has been sent to ${email}. Click on the link in your email to sign-in`
: "You will receive a sign-in link on the email address you provide below"} : "You will receive a sign-in link on the email address you provide below"}
</div> </div>
<Input {!checkEmail && (
placeholder="Email" <>
className="p-6" <Input
disabled={checkEmail} placeholder="Email"
value={email} className="p-6 w-[300px] mx-auto rounded-lg"
onChange={(e) => setEmail(e.target.value)} disabled={checkEmail}
/> value={email}
<Button onChange={(e) => setEmail(e.target.value)}
variant="default" />
className="p-6" <Button
onClick={handleMagicLinkSignIn} variant="default"
disabled={!email} className="p-6 w-[300px] mx-auto flex gap-2 items-center justify-center rounded-lg"
> onClick={handleMagicLinkSignIn}
<PaperPlaneTilt className="h-6 w-6 mr-2" /> disabled={checkEmail}
{checkEmail ? "Check your email" : "Send sign in link"} >
</Button> <PaperPlaneTilt className="h-6 w-6 mr-2" />
{checkEmail ? "Check your email" : "Send sign in link"}
</Button>
</>
)}
{checkEmail && ( {checkEmail && (
<div className="flex items-center justify-center gap-4 text-muted-foreground"> <div className="flex items-center justify-center gap-4 text-muted-foreground flex-col md:flex-row">
<Button <Button
variant="ghost" variant="ghost"
className="p-0" className="p-0 text-orange-500"
disabled={recheckEmail} disabled={recheckEmail}
onClick={() => { onClick={() => {
handleMagicLinkSignIn(); handleMagicLinkSignIn();
}} }}
> >
<ArrowsClockwise className="h-6 w-6 mr-2" /> <ArrowsClockwise className="h-6 w-6 mr-2 text-gray-500" />
Resend email Resend email
</Button> </Button>
<LineVertical className="h-6 w-6" /> <LineVertical className="h-6 w-6 hidden md:block" />
<Button <Button
variant="ghost" variant="ghost"
className="p-0" className="p-0 text-orange-500"
disabled={recheckEmail} disabled={recheckEmail}
onClick={() => { onClick={() => {
setEmail(""); setEmail("");
setCheckEmail(false); setCheckEmail(false);
}} }}
> >
<PencilSimple className="h-6 w-6 mr-2" /> <PencilSimple className="h-6 w-6 mr-2 text-gray-500" />
Use a different email Use a different email
</Button> </Button>
</div> </div>
@ -311,12 +316,25 @@ function MainSignInContext({
setUseEmailSignIn: (useEmailSignIn: boolean) => void; setUseEmailSignIn: (useEmailSignIn: boolean) => void;
isMobileWidth: boolean; isMobileWidth: boolean;
}) { }) {
const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true })); const plugin = useRef(Autoplay({ delay: 3500, stopOnInteraction: true }));
const [showArrows, setShowArrows] = useState(false);
const tips = [ const tips = [
{ src: "/documents_tip.png", alt: "Documents tip" }, {
{ src: "/personalize_tip.png", alt: "Personalize tip" }, src: "https://assets.khoj.dev/sign_in_demos/research_mode.gif",
{ src: "/automate_tip.png", alt: "Automate tip" }, alt: "Research tip",
description: "Use research mode to find answers to your questions",
},
{
src: "https://assets.khoj.dev/sign_in_demos/custom_agents.gif",
alt: "Personalize tip",
description: "Personalize your Khoj experience by creating custom agents",
},
{
src: "https://assets.khoj.dev/sign_in_demos/docment_questions.gif",
alt: "Document tip",
description: "Understand and create documents to expand your knowledge base",
},
]; ];
return ( return (
@ -325,15 +343,24 @@ function MainSignInContext({
<Carousel <Carousel
plugins={[plugin.current]} plugins={[plugin.current]}
className="w-full" className="w-full"
onMouseEnter={plugin.current.stop} onMouseEnter={() => {
onMouseLeave={plugin.current.reset} plugin.current.stop();
setShowArrows(true);
}}
onMouseLeave={() => {
plugin.current.play();
setShowArrows(false);
}}
> >
<CarouselContent> <CarouselContent>
{tips.map((tip, index) => ( {tips.map((tip, index) => (
<CarouselItem key={index}> <CarouselItem key={index}>
<div className="p-0"> <div className="relative p-0">
<Card> <Card>
<CardContent className="flex items-center justify-center rounded-b-none rounded-t-lg p-0"> <CardContent className="flex flex-col items-center justify-center rounded-b-none rounded-t-lg p-0">
<div className="flex items-center justify-center text-black text-center p-4">
{tip.description}
</div>
<img <img
src={tip.src} src={tip.src}
alt={tip.alt} alt={tip.alt}
@ -345,21 +372,25 @@ function MainSignInContext({
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent> </CarouselContent>
<CarouselPrevious className="absolute left-0" /> {showArrows && (
<CarouselNext className="absolute right-0" /> <>
<CarouselPrevious className="absolute left-0" />
<CarouselNext className="absolute right-0" />
</>
)}
</Carousel> </Carousel>
)} )}
<div className="flex flex-col gap-4 text-center p-4"> <div className="flex flex-col gap-4 text-center p-2">
<div className="text-center font-bold text-lg"> <div className="text-center font-bold text-xl">
Sign in to unlock your second brain Sign in for free to unlock your second brain
</div> </div>
</div> </div>
<div className="flex flex-col gap-4 py-4 text-center align-middle items-center"> <div className="flex flex-col gap-8 pb-4 text-center align-middle items-center">
<GoogleSignIn onLoad={handleGoogleScriptLoad} /> <GoogleSignIn onLoad={handleGoogleScriptLoad} />
{/* <div id="g_id_signin" /> */} {/* <div id="g_id_signin" /> */}
<Button <Button
variant="outline" variant="outline"
className="w-[300px] p-6 flex gap-2 items-center justify-center" className="w-[300px] p-8 flex gap-2 items-center justify-center rounded-lg"
onClick={handleGoogleSignIn} onClick={handleGoogleSignIn}
disabled={isLoading || !data?.google} disabled={isLoading || !data?.google}
> >
@ -405,7 +436,7 @@ function MainSignInContext({
<Button <Button
variant="outline" variant="outline"
className="w-[300px] p-6 flex gap-2 items-center justify-center" className="w-[300px] p-8 flex gap-2 items-center justify-center rounded-lg"
onClick={() => { onClick={() => {
setUseEmailSignIn(true); setUseEmailSignIn(true);
}} }}
@ -414,7 +445,7 @@ function MainSignInContext({
Continue with Email Continue with Email
</Button> </Button>
</div> </div>
<div className="text-center text-muted-foreground text-xs"> <div className="text-center text-muted-foreground text-sm mb-[20px]">
By logging in, you agree to our{" "} By logging in, you agree to our{" "}
<Link href="https://khoj.dev/terms-of-service">Terms of Service</Link>. See{" "} <Link href="https://khoj.dev/terms-of-service">Terms of Service</Link>. See{" "}
<Link href="https://khoj.dev/privacy-policy">Privacy Policy</Link>. <Link href="https://khoj.dev/privacy-policy">Privacy Policy</Link>.