sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-19 10:57:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add mobile friendliness and replace the login page redirects

Browse source
This commit is contained in:
sabaimran 2024-12-11 18:01:04 -08:00
parent de6ed2352a
commit 142239d2c9
7 changed files with 69 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/interface/web/app/agents/page.tsx
View file

@ -143,6 +143,7 @@ function CreateAgentCard(props: CreateAgentCardProps) {
<LoginPrompt
loginRedirectMessage="Sign in to start chatting with a specialized agent"
onOpenChange={setShowLoginPrompt}
isMobileWidth={props.isMobileWidth}
/>
)}
<AgentModificationForm
@ -317,6 +318,7 @@ export default function Agents() {
<LoginPrompt
loginRedirectMessage="Sign in to start chatting with a specialized agent"
onOpenChange={setShowLoginPrompt}
isMobileWidth={isMobileWidth}
/>
)}
<Alert className="bg-secondary border-none my-4">

1
src/interface/web/app/automations/page.tsx
View file

@ -1064,6 +1064,7 @@ export default function Automations() {
<LoginPrompt
loginRedirectMessage={"Create an account to make your own automation"}
onOpenChange={setShowLoginPrompt}
isMobileWidth={isMobileWidth}
/>
)}
<Alert className="bg-secondary border-none my-4">

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

@ -328,6 +328,7 @@ export function AgentCard(props: AgentCardProps) {
<LoginPrompt
loginRedirectMessage={`Sign in to start chatting with ${props.data.name}`}
onOpenChange={setShowLoginPrompt}
isMobileWidth={props.isMobileWidth}
/>
)}
<CardHeader>

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

@ -408,6 +408,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
{showLoginPrompt && loginRedirectMessage && (
<LoginPrompt
onOpenChange={setShowLoginPrompt}
isMobileWidth={props.isMobileWidth}
loginRedirectMessage={loginRedirectMessage}
/>
)}

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

@ -23,6 +23,7 @@ import Link from "next/link";
import { useEffect, useState } from "react";
import useSWR from "swr";
import { GoogleSignIn } from "./GoogleSignIn";
import { Drawer, DrawerContent } from "@/components/ui/drawer";
export interface LoginPromptProps {
loginRedirectMessage: string;
@ -143,19 +144,50 @@ export default function LoginPrompt(props: LoginPromptProps) {
});
}
if (props.isMobileWidth) {
return (
<Drawer open={true} onOpenChange={props.onOpenChange}>
<DrawerContent
className={`flex flex-col gap-4 max-w-xl ${!useEmailSignIn ? "p-0 pb-4 m-0" : ""}`}
>
<div>
{useEmailSignIn && (
<EmailSignInContext
email={email}
setEmail={setEmail}
checkEmail={checkEmail}
setCheckEmail={setCheckEmail}
setUseEmailSignIn={setUseEmailSignIn}
recheckEmail={recheckEmail}
setRecheckEmail={setRecheckEmail}
handleMagicLinkSignIn={handleMagicLinkSignIn}
/>
)}
{!useEmailSignIn && (
<MainSignInContext
tips={tips}
currentTip={currentTip}
nextSlide={nextSlide}
prevSlide={prevSlide}
handleGoogleScriptLoad={handleGoogleScriptLoad}
handleGoogleSignIn={handleGoogleSignIn}
isLoading={isLoading}
data={data}
setUseEmailSignIn={setUseEmailSignIn}
/>
)}
</div>
</DrawerContent>
</Drawer>
);
}
return (
<Dialog open={true} onOpenChange={props.onOpenChange}>
<DialogContent
className={`flex flex-col gap-4 max-w-xl ${!useEmailSignIn ? "p-0 pb-4 m-0" : ""}`}
>
<div>
{/* <DialogHeader>
<DialogTitle>Sign in to Khoj to continue</DialogTitle>
</DialogHeader>
<DialogDescription className="py-4">
{props.loginRedirectMessage}.
</DialogDescription> */}
{useEmailSignIn && (
<EmailSignInContext
email={email}

30
src/interface/web/app/components/navMenu/navMenu.tsx
View file

@ -25,6 +25,8 @@ import {
import { Moon, Sun, UserCircle, Question, GearFine, ArrowRight, Code } from "@phosphor-icons/react";
import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
import { useIsMobileWidth } from "@/app/common/utils";
import LoginPrompt from "../loginPrompt/loginPrompt";
import { Button } from "@/components/ui/button";
function SubscriptionBadge({ is_active }: { is_active: boolean }) {
return (
@ -51,6 +53,7 @@ export default function NavMenu() {
const [darkMode, setDarkMode] = useState(false);
const [initialLoadDone, setInitialLoadDone] = useState(false);
const isMobileWidth = useIsMobileWidth();
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
useEffect(() => {
if (localStorage.getItem("theme") === "dark") {
@ -87,6 +90,13 @@ export default function NavMenu() {
return (
<div className={styles.titleBar}>
{showLoginPrompt && (
<LoginPrompt
onOpenChange={setShowLoginPrompt}
isMobileWidth={isMobileWidth}
loginRedirectMessage={"Login to your second brain"}
/>
)}
{isMobileWidth ? (
<DropdownMenu>
<DropdownMenuTrigger>
@ -197,12 +207,16 @@ export default function NavMenu() {
</DropdownMenuItem>
) : (
<DropdownMenuItem>
<Link href="/login" className="no-underline w-full">
<div className="flex flex-rows">
<Button
variant={"ghost"}
onClick={() => setShowLoginPrompt(true)}
className="no-underline w-full text-left p-0 content-start justify-start items-start h-fit"
>
<div className="flex flex-rows text-left content-start justify-start items-start p-0">
<ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Login</p>
</div>
</Link>
</Button>
</DropdownMenuItem>
)}
</>
@ -323,12 +337,16 @@ export default function NavMenu() {
</MenubarItem>
) : (
<MenubarItem>
<Link href="/login" className="no-underline w-full">
<div className="flex flex-rows">
<Button
variant={"ghost"}
onClick={() => setShowLoginPrompt(true)}
className="no-underline w-full text-left p-0 content-start justify-start items-start h-fit"
>
<div className="flex flex-rows text-left content-start justify-start items-start p-0">
<ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Login</p>
</div>
</Link>
</Button>
</MenubarItem>
)}
</>

1
src/interface/web/app/page.tsx
View file

@ -217,6 +217,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
{showLoginPrompt && (
<LoginPrompt
onOpenChange={setShowLoginPrompt}
isMobileWidth={props.isMobileWidth}
loginRedirectMessage={"Login to your second brain"}
/>
)}