@vertesia/ui 0.66.0 → 0.68.0

package/src/shell/login/SigninScreen.tsx

@@ -0,0 +1,162 @@
+import { SignupData, SignupPayload } from "@vertesia/common";
+import { Button, useSafeLayoutEffect } from "@vertesia/ui/core";
+import { Env } from "@vertesia/ui/env";
+import { UserNotFoundError, useUserSession, useUXTracking } from "@vertesia/ui/session";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import EnterpriseSigninButton from "./EnterpriseSigninButton";
+import GitHubSignInButton from "./GitHubSignInButton";
+import GoogleSignInButton from "./GoogleSignInButton";
+import MicrosoftSignInButton from "./MicrosoftSigninButton";
+import SignupForm from "./SignupForm";
+
+interface SigninScreenProps {
+    isNested?: boolean;
+    allowedPrefix?: string;
+    lightLogo?: string;
+    darkLogo?: string;
+}
+export function SigninScreen({ allowedPrefix, isNested = false, lightLogo, darkLogo }: SigninScreenProps) {
+    const [allow, setAllow] = useState(false);
+    useSafeLayoutEffect(() => {
+        allowedPrefix && setAllow(window.location.href.startsWith(allowedPrefix));
+    }, []);
+    return allow ? null : <SigninScreenImpl isNested={isNested} lightLogo={lightLogo} darkLogo={darkLogo} />;
+}
+
+function SigninScreenImpl({ isNested = false, lightLogo, darkLogo }: SigninScreenProps) {
+    const { isLoading, user, authError } = useUserSession();
+
+    return !isLoading && !user ? (
+        <div
+            style={{ zIndex: 999998 }}
+            className={(isNested ? "absolute" : "fixed") + "overflow-y-auto "}
+        >
+            <div
+                className={clsx(
+                    "flex flex-col items-center justify-center py-14 px-4",
+                )}
+            >
+
+                <StandardSigninPanel authError={authError} lightLogo={lightLogo} darkLogo={darkLogo} />
+                <div className="flex gap-x-6 mt-10 justify-center text-muted">
+                    <a href="https://vertesiahq.com/privacy" className="text-sm">
+                        Privacy Policy
+                    </a>
+                    <a href="https://vertesiahq.com/terms" className="text-sm">
+                        Terms of Service
+                    </a>
+                </div>
+            </div>
+        </div>
+    ) : null;
+}
+
+function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
+    authError?: Error,
+    darkLogo?: string,
+    lightLogo?: string
+}) {
+    const [signupData, setSignupData] = useState<SignupData | undefined>(undefined);
+    const [collectSignupData, setCollectSignupData] = useState(false);
+    const { signOut } = useUserSession();
+    const { trackEvent } = useUXTracking();
+
+    history.replaceState({}, '', '/');
+
+    const goBack = () => {
+        console.log("Going back, signing out");
+        setSignupData(undefined);
+        setCollectSignupData(false);
+        signOut();
+    };
+
+    const goToSignup = () => {
+        setSignupData(undefined);
+        setCollectSignupData(true);
+    };
+
+    useEffect(() => {
+        if (authError instanceof UserNotFoundError) {
+            console.log("User not found, redirecting to signup");
+            goToSignup();
+        }
+    }, [authError]);
+
+    const onSignup = (data: SignupData, fbToken: string) => {
+        console.log("Got Signup data", data);
+        setSignupData(data);
+        const payload: SignupPayload = {
+            signupData: data,
+            firebaseToken: fbToken,
+        };
+        fetch(Env.endpoints.studio + "/auth/signup", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+        }).then((res) => {
+            console.log("Signup successful", payload, res);
+
+            trackEvent("sign_up");
+            window.location.href = "/";
+        });
+    };
+
+    return (
+        <>
+            {lightLogo && <img src={lightLogo} alt='logo' className='h-15 block dark:hidden' />}
+            {darkLogo && <img src={darkLogo} alt='logo' className='h-15 hidden dark:block' />}
+
+            {signupData && (
+                <div className="my-6">
+                    Need to make a change?{" "}
+                    <Button onClick={goToSignup}> Go back</Button>
+                </div>
+            )}
+            <div className="flex flex-col space-y-2">
+                {collectSignupData && !localStorage.getItem('tenantName') ? (
+                    <SignupForm onSignup={onSignup} goBack={goBack} />
+                ) : (
+
+                    <div className="flex flex-col">
+                        <div className="my-4">
+                            <h2 className="text-2xl font-bold text-center">Log in or Sign up</h2>
+                        </div>
+                        <div className="max-w-2xl text-center my-2 px-2">
+                            First time here? No problem, it&apos;s free to try!
+                            <br />
+                            We&apos;ll just ask you a couple of questions next and you&apos;ll be on your way.
+                        </div>
+                        <div className="flex items-center flex-col">
+                            <div className="py-4 w-70">
+                                <GoogleSignInButton />
+                                <GitHubSignInButton />
+                                <MicrosoftSignInButton />
+                            </div>
+                            <div className="flex items-center flex-row w-70 text-muted">
+                                <hr className="w-full" />
+                                <div className="px-2 text-xs">OR</div>
+                                <hr className="w-full" />
+                            </div>
+                            <div className="py-4 w-70">
+                                <EnterpriseSigninButton />
+                            </div>
+                        </div>
+                        {authError && (
+                            <div className="text-center">
+                                <div className="">
+                                    Sorry, we have not been able to sign you in.
+                                    <br />
+                                    Please try again or contact
+                                    <a className='text-info mx-1' href="mailto:support@vertesiahq.com">support@vertesiahq.com</a>
+                                    if it persists.
+                                    <pre className="mt-2">Error: {authError.message}</pre>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </>
+    );
+}

package/src/shell/login/SignupForm.tsx

@@ -0,0 +1,178 @@
+import { SignupData } from "@vertesia/common";
+import { Button, Input, VSelectBox, SelectStack } from "@vertesia/ui/core";
+import { User, getAuth } from "firebase/auth";
+import { useEffect, useState } from "react";
+
+
+interface CompanySizeOption {
+    id: number;
+    label: string;
+}
+
+const companySizeOptions: CompanySizeOption[] = [
+    { id: 1, label: "1-10 employees" },
+    { id: 11, label: "11-100 employees" },
+    { id: 101, label: "101-1000 employees" },
+    { id: 1001, label: "1001-5000 employees" },
+    { id: 5001, label: "5000+ employees" },
+];
+
+const accountTypeOptions = [
+    {
+        id: "personal",
+        label: "Personal",
+        description: "For personal use, or for a small team.",
+    },
+    {
+        id: "company",
+        label: "Company",
+        description: "For a company or organization.",
+    },
+];
+
+const projectMaturityOptions = [
+    { id: "testing", label: "Just Testing or Evaluating LLMs" },
+    { id: "exploring", label: "Actively Exploring LLMs on a Project" },
+    { id: "using", label: "Already Using LLMs in Production" },
+    { id: "migrating", label: "Migrating to different LLMs" },
+    { id: "other", label: "Other" },
+];
+
+interface SignupFormProps {
+    onSignup: (data: SignupData, fbToken: string) => void;
+    goBack: () => void;
+}
+
+export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
+    const [accountType, setAccountType] = useState<string | undefined>(undefined);
+    const [companySize, setCompanySize] = useState<CompanySizeOption | undefined>(undefined);
+    const [companyName, setCompanyName] = useState<string | undefined>(undefined);
+    const [companyWebsite, setCompanyWebsite] = useState<string | undefined>(undefined);
+    const [projectMaturity, setProjectMaturity] = useState<string | undefined>(undefined);
+    const [fbUser, setFbUser] = useState<User | undefined>(undefined);
+
+    const [error, setError] = useState<string | undefined>(undefined);
+    const isCompany = accountType === "company";
+
+    useEffect(() => {
+        const user = getAuth().currentUser;
+        if (!user) {
+            console.error('No user found');
+            return;
+        }
+        setFbUser(user);
+    }, [fbUser]);
+
+    const isValid = () => {
+        if (!accountType) {
+            setError("Please select an account type");
+            return false;
+        }
+        if (isCompany && !companyName) {
+            setError("Please enter an organization name");
+            return false;
+        }
+
+        if (isCompany && !companySize) {
+            setError("Please select a company size");
+            return false;
+        }
+
+        return true
+    }
+
+
+    const onSubmit = async () => {
+        if (!isValid()) return;
+        if (!accountType) return;
+
+        const signupData = {
+            accountType: accountType,
+            companyName: companyName,
+            companySize: companySize?.id,
+            companyWebsite: companyWebsite,
+            maturity: projectMaturity,
+        };
+
+        window.localStorage.setItem("composableSignupData", JSON.stringify(signupData));
+
+        const fbToken = await getAuth().currentUser?.getIdToken();
+        console.log('Got firebase token', getAuth(), fbToken);
+        if (!fbToken) {
+            console.error('No firebase token found');
+            return;
+        }
+
+        onSignup(signupData, fbToken);
+
+    }
+
+    return (
+        <div className="flex flex-col space-y-2">
+            <div className="prose">
+                <p className="prose text-sm text-muted pt-4">
+                    Welcome to Vertesia, {fbUser?.displayName} ({fbUser?.email}).
+                    Please tell us a little bit about yourself and you&apos;ll be on your way.
+                    No credit card is required.
+                </p>
+                {error &&
+                    <div className="text-destructive">{error}</div>
+                }
+            </div>
+            <FormItem label="Account Type">
+                <SelectStack
+                    options={accountTypeOptions}
+                    selected={accountTypeOptions.find((option) => option.id === accountType)}
+                    onSelect={(option) => setAccountType(option.id)}
+                />
+            </FormItem>
+            {isCompany &&
+                <>
+                    <FormItem label="Company Size">
+                        <VSelectBox className="w-full border border-accent bg-muted"
+                            value={companySize}
+                            options={companySizeOptions}
+                            onChange={setCompanySize}
+                            optionLabel={(option) => option?.label}
+                            placeholder='Select Company Size'
+                        />
+                    </FormItem>
+                    <FormItem label="Company Name">
+                        <Input value={companyName} onChange={setCompanyName} type="text" required={true} />
+                    </FormItem>
+                    <FormItem label="Company Website">
+                        <Input value={companyWebsite} onChange={setCompanyWebsite} type="text" />
+                    </FormItem>
+                </>
+            }
+            <FormItem label="Project Maturity">
+                <VSelectBox className="w-full border border-accent bg-muted"
+                    options={projectMaturityOptions}
+                    value={projectMaturityOptions.find((option) => option.id === projectMaturity)}
+                    optionLabel={(option) => option?.label}
+                    placeholder='Select Project Maturity'
+                    onChange={(option) => setProjectMaturity(option?.id)}
+                />
+            </FormItem>
+            <div className="pt-8 flex flex-col">
+                <Button variant="primary" onClick={onSubmit} size="xl">
+                    <span className="text-lg">Sign Up</span>
+                </Button>
+                <Button variant="ghost" size="xl" className="mt-4" onClick={goBack}>
+                    <span className="">Wrong account, go back</span>
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+function FormItem({ label, children }: { label: string, children: React.ReactNode }) {
+
+    return (
+        <div className="flex flex-col space-y-2 pt-4">
+            <div className="text-sm text-muted">{label}</div>
+            {children}
+        </div>
+    )
+
+}

package/src/shell/login/TerminalLogin.tsx

@@ -0,0 +1,299 @@
+import { useState } from 'react'
+
+import { AccountRef, ProjectRef } from '@vertesia/common'
+import { Button, Center, ErrorBox, Input, SelectBox, Spinner, useFetch, useToast } from '@vertesia/ui/core'
+import { Env } from "@vertesia/ui/env"
+import { useLocation } from "@vertesia/ui/router"
+import { fetchComposableTokenFromFirebaseToken, useUserSession } from '@vertesia/ui/session'
+
+interface ProfileData {
+    profile?: string
+    account?: string
+    project?: string
+}
+
+interface LoginResult extends Required<ProfileData> {
+    token: string
+    studio_server_url: string
+    zeno_server_url: string
+}
+
+interface ClientInfo extends ProfileData {
+    redirect: string
+    code: string
+}
+
+function getClientInfo(location: Location): ClientInfo | null {
+    const params = new URLSearchParams(location.search)
+    let redirect = params.get('redirect_uri')
+    const code = params.get('code')
+    if (!redirect || !code) {
+        return null
+    }
+    redirect = decodeURI(redirect)
+    if (!redirect.startsWith('http://127.0.0.1:') && !redirect.startsWith('http://localhost:')) {
+        return null
+    }
+    const profile = params.get('profile') ?? "default"
+    const project = params.get('project') ?? undefined
+    const account = params.get('account') ?? undefined
+    return { redirect, code, profile, project, account }
+}
+
+export function TerminalLogin() {
+    const [payload, setPayload] = useState<LoginResult | undefined>()
+    const [error, setError] = useState<Error>()
+    const location = useLocation()
+    const clientInfo = getClientInfo(location)
+    const toast = useToast()
+
+    const onAccept = async (data: ProfileData) => {
+        if (!clientInfo) return
+        if (!data.profile) {
+            toast({
+                title: 'Profile is required',
+                description: 'Please enter a profile name to save the client authorization',
+                status: 'error',
+                duration: 2000
+            })
+            return
+        }
+        if (!data.account) {
+            toast({
+                title: 'Account is required',
+                description: 'Please select an account to authorize the client to access the ComposablePrompts servers',
+                status: 'error',
+                duration: 2000
+            })
+            return
+        }
+        if (!data.project) {
+            toast({
+                title: 'Project is required',
+                description: 'Please select a project to authorize the client to access the ComposablePrompts servers',
+                status: 'error',
+                duration: 2000
+            })
+            return
+        }
+
+        // expire in 1 day
+        let payload: LoginResult | undefined
+        try {
+            const token = await fetchComposableTokenFromFirebaseToken(data.account, data.project, 24 * 3600)
+            if (token) {
+                payload = {
+                    ...data,
+                    studio_server_url: Env.endpoints.studio,
+                    zeno_server_url: Env.endpoints.zeno,
+                    token,
+                } as LoginResult
+                await fetch(clientInfo.redirect, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(payload)
+                })
+                setPayload(payload)
+            } else {
+                toast({
+                    title: 'Failed to get composable token',
+                    status: 'error',
+                    duration: 5000
+                })
+            }
+        } catch (err: any) {
+            if (payload) {
+                setError(err)
+                setPayload(payload)
+            } else {
+                toast({
+                    title: 'Error authorizing client',
+                    description: err.message,
+                    status: 'error',
+                    duration: 5000
+                })
+            }
+        }
+    }
+
+    const getPageContent = () => {
+        if (!clientInfo) {
+            return <ErrorBox title='Invalid request'>This page should be called by a terminal client to authenticate against the ComposablePrompts servers</ErrorBox>
+        }
+
+        return payload
+            ? <AuthDoneScreen payload={payload} error={error} />
+            : <AuthAcceptScreen clientInfo={clientInfo} onAccept={onAccept} />
+    }
+
+    const page = getPageContent()
+
+    return (
+        <div className="w-full flex flex-col items-center gap-4 mt-24">{page}</div>
+    )
+}
+
+interface AuthAcceptScreenProps {
+    onAccept: (data: ProfileData) => void
+    clientInfo: ClientInfo
+}
+function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenProps>) {
+    const { client, user } = useUserSession()
+    const { data: allProjects, error } = useFetch(() => user ? client.projects.list() : Promise.resolve([]), [user])
+
+
+    if (error) {
+        return <ErrorBox title='Error loading projects'>{error.message}</ErrorBox>
+    }
+
+    const getEnvironmentName = () => {
+        if (Env.isLocalDev) {
+            return "Local Dev"
+        } else if (Env.isDev) {
+            return "Staging"
+        }
+        return "Production"
+    }
+
+    const envName = getEnvironmentName()
+
+    return user && allProjects ? (
+        <>
+            <div className='w-1/3'>
+                <div className="mb-4 text-xl font-semibold text-gray-800">
+                    Authorizing client on {envName} environment.
+                </div>
+                <div className='mb-2 text-md text-gray-800'>
+                    <div>A client app wants authorization to access the composable prompt servers in your name.</div>
+                    <div>The client app code is <b>{clientInfo.code}</b>. You can check if the code is correct in the terminal.</div>
+                </div>
+                <div className='mb-2 text-sm text-gray-600'>
+                    <div>You must choose the target account and project for the client to access.</div>
+                    <div>Also, enter a profile name that will be used to save the authorization in your client configuration.</div>
+                </div>
+            </div>
+            <ProfileForm onAccept={onAccept} allProjects={allProjects} data={clientInfo} />
+        </>
+    ) : <Spinner size='lg' />
+}
+
+function AuthDoneScreen({ payload, error }: Readonly<{ payload: LoginResult, error?: Error }>) {
+    const toast = useToast()
+    const onCopy = () => {
+        if (payload) {
+            navigator.clipboard.writeText(JSON.stringify(payload))
+            toast({
+                title: 'Authentication Payload copied',
+                description: error ? 'You can paste the authentication payload in the terminal to authenticate the client.' : 'You can close the page now.',
+                status: 'success',
+                duration: 5000
+            })
+        }
+    }
+
+    return (
+        <div>
+            {
+                error ?
+                    <div>
+                        <ErrorBox title='Failed to send the authorization token to the cli tool'>This can happen due to security checks on Safari. The error is &quot;{error.message}&quot;</ErrorBox>
+                        <div>Don&apos;t worry, you can still authenticate the cli tool by pasting the authentication token in the terminal.
+                            You can close this page.</div>
+                    </div>
+                    : <div>The client is authenticated. You can close this page.</div>
+            }
+            <Center className="mt-4">
+                <Button variant='secondary' onClick={onCopy}>Copy the Authentication Payload</Button>
+            </Center>
+        </div>
+    )
+}
+
+interface ProfileFormProps {
+    onAccept: (data: ProfileData) => void
+    allProjects: ProjectRef[]
+    data: ProfileData
+}
+function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>) {
+    const { accounts, account, project } = useUserSession()
+    const [currentData, setCurrentData] = useState<ProfileData>(() => ({
+        profile: data.profile,
+        account: data.account ?? account?.id,
+        project: data.project ?? project?.id,
+    }))
+
+    const onChangeProfile = (value: string) => {
+        setCurrentData({ ...currentData, profile: value })
+    }
+
+    const onChangeAccount = (value: AccountRef) => {
+        setCurrentData({ ...currentData, account: value.id, project: undefined })
+    }
+
+    const onChangeProject = (value: ProjectRef) => {
+        setCurrentData({ ...currentData, project: value.id })
+    }
+
+    const projects = allProjects.filter(p => p.account === currentData.account)
+
+    return (
+        <div className='w-1/3'>
+            <div className="mb-4 flex flex-col gap-2">
+                <span className="font-semibold text-gray-600">Profile Name</span>
+                <Input type='text' value={currentData.profile} onChange={onChangeProfile} />
+            </div>
+            <div className="mb-4 flex flex-col gap-2">
+                <span className="font-semibold text-gray-600">Account</span>
+                <SelectAccount value={currentData.account} onChange={onChangeAccount} accounts={accounts || []} />
+            </div>
+            <div className="mb-4 flex flex-col gap-2">
+                <span className="font-semibold text-gray-600">Project</span>
+                <SelectProject value={currentData.project} onChange={onChangeProject} projects={projects} />
+            </div>
+            <div className="pt-2">
+                <Button size='xl' onClick={() => onAccept(currentData)}>Authorize Client</Button>
+            </div>
+        </div>
+    )
+}
+
+interface SelectAccountProps {
+    value?: string
+    accounts: AccountRef[]
+    onChange: (value: AccountRef) => void
+}
+function SelectAccount({ value, accounts, onChange }: Readonly<SelectAccountProps>) {
+    const _onChange = (value: AccountRef) => {
+        onChange(value)
+    }
+    return <SelectBox
+        options={accounts}
+        value={accounts?.find(a => a.id === value)}
+        onChange={_onChange}
+        by="id"
+        optionLabel={(option) => option.name}
+        placeholder='Select Account'
+    />
+}
+
+interface SelectProjectProps {
+    value?: string
+    projects: ProjectRef[]
+    onChange: (value: ProjectRef) => void
+}
+function SelectProject({ value, projects, onChange }: Readonly<SelectProjectProps>) {
+    const _onChange = (value: ProjectRef) => {
+        onChange(value)
+    }
+    return (
+        <SelectBox
+            by="id"
+            value={projects.find(p => p.id === value)}
+            options={projects}
+            optionLabel={(option) => option.name}
+            placeholder='Select Project'
+            onChange={_onChange} />
+    )
+}