@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260331.091034Z

package/src/shell/apps/StandaloneApp.tsx

@@ -3,6 +3,7 @@ import { Center, useFetch, SelectBox } from "@vertesia/ui/core";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
 import { LockIcon } from "lucide-react";
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from "react";
+import { useUITranslation } from '../../i18n/index.js';
 import { AppInstallationProvider } from "./AppInstallationProvider";
 
 
@@ -73,6 +74,7 @@ interface AccessDeniedMessageProps {
 
 function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
     const { project, accounts, client } = useUserSession();
+    const { t } = useUITranslation();
     const [selectedAccountId, setSelectedAccountId] = useState<string | undefined>();
 
     // Fetch all projects where the app is installed across all organizations
@@ -117,7 +119,7 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
     return (
         <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
             <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
-            <div className="text-xl font-semibold">Access Denied</div>
+            <div className="text-xl font-semibold">{t('shell.accessDenied')}</div>
             <div className="mt-2 text-sm text-gray-500">
                 You don&apos;t have permission to view the <span className="font-semibold">{name}</span> app in project: <span className="font-semibold">&laquo;{project?.name}&raquo;</span>.
             </div>
@@ -130,25 +132,25 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
                 <div className="mt-4 flex flex-row gap-4 items-end">
                     {orgOptions.length > 1 && (
                         <div>
-                            <div className="text-sm text-gray-500 mb-2">Organization</div>
+                            <div className="text-sm text-gray-500 mb-2">{t('shell.organization')}</div>
                             <SelectBox
                                 by="id"
                                 value={selectedOrg}
                                 options={orgOptions}
                                 optionLabel={(option) => option.name}
-                                placeholder="Select Organization"
+                                placeholder={t('shell.selectOrganization')}
                                 onChange={(org) => setSelectedAccountId(org.id)}
                             />
                         </div>
                     )}
                     <div>
-                        {orgOptions.length > 1 && <div className="text-sm text-gray-500 mb-2">Project</div>}
+                        {orgOptions.length > 1 && <div className="text-sm text-gray-500 mb-2">{t('login.terminal.project')}</div>}
                         <SelectBox
                             by="id"
                             value={undefined}
                             options={filteredProjects}
                             optionLabel={(option) => option.name}
-                            placeholder="Select Project"
+                            placeholder={t('shell.selectProject')}
                             onChange={onProjectChange}
                         />
                     </div>
@@ -159,10 +161,11 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
 }
 
 function UnknownAppName() {
+    const { t } = useUITranslation();
     return (
         <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
             <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
-            <div className="text-xl font-semibold">Application not registered</div>
+            <div className="text-xl font-semibold">{t('shell.applicationNotRegistered')}</div>
             <div className="mt-2 text-sm text-gray-500">
                 Before starting to code a Vertesia application you must register an application manifest
                 in Vertesia Studio then install it in one or more projects.

package/src/shell/login/EnterpriseSigninButton.tsx

@@ -1,5 +1,6 @@
 import { Button, Input, Spinner, useToast } from "@vertesia/ui/core";
 import { Env } from "@vertesia/ui/env";
+import { useUITranslation } from "@vertesia/ui/i18n";
 import { getFirebaseAuth, setFirebaseTenant, useUXTracking } from "@vertesia/ui/session";
 import { GoogleAuthProvider, OAuthProvider, signInWithRedirect } from "firebase/auth";
 import { useState } from "react";
@@ -40,6 +41,7 @@ interface EnterpriseSigninButtonProps {
     redirectTo?: string;
 }
 export default function EnterpriseSigninButton({ redirectTo }: EnterpriseSigninButtonProps) {
+    const { t } = useUITranslation();
     const [isLoading, setIsLoading] = useState(false);
     const { trackEvent } = useUXTracking();
 
@@ -52,7 +54,7 @@ export default function EnterpriseSigninButton({ redirectTo }: EnterpriseSigninB
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         if (!emailRegex.test(email)) {
             toast({
-                title: "Invalid email address",
+                title: t('auth.invalidEmail'),
                 status: "error",
                 duration: 5000,
             });
@@ -63,7 +65,7 @@ export default function EnterpriseSigninButton({ redirectTo }: EnterpriseSigninB
         setFirebaseTenant(email).then((data) => {
             if (!data) {
                 toast({
-                    title: "Tenant not found",
+                    title: t('auth.tenantNotFound'),
                     status: "error",
                     duration: 5000,
                 });
@@ -90,7 +92,7 @@ export default function EnterpriseSigninButton({ redirectTo }: EnterpriseSigninB
 
     return (
         <>
-            <Input value={email} onChange={setEmail} placeholder="Enter your enterprise email" type="email" />
+            <Input value={email} onChange={setEmail} placeholder={t('auth.enterEnterpriseEmail')} type="email" />
             {
                 isLoading ? (
                     <div className="w-full flex justify-center">
@@ -100,7 +102,7 @@ export default function EnterpriseSigninButton({ redirectTo }: EnterpriseSigninB
                     <Button variant={"outline"}
                         onClick={signIn}
                         className="w-full mt-2 py-4 flex rounded-lg hover:shadow-sm transition duration-150 text-center">
-                        <span className="text-sm font-semibold">Continue with Enterprise SSO</span>
+                        <span className="text-sm font-semibold">{t('auth.continueWithEnterprise')}</span>
                     </Button>
                 )
             }

package/src/shell/login/GitHubSignInButton.tsx

@@ -1,19 +1,15 @@
 import { GithubAuthProvider, signInWithRedirect } from "firebase/auth";
 import { getFirebaseAuth } from "@vertesia/ui/session";
 import { Button } from "@vertesia/ui/core";
+import { useUITranslation } from "@vertesia/ui/i18n";
 
 interface GitHubSignInButtonProps {
     redirectTo?: string;
 }
 export default function GitHubSignInButton({ }: GitHubSignInButtonProps) {
+    const { t } = useUITranslation();
     const signIn = () => {
         localStorage.removeItem("tenantName");
-        //with github can only have one allowed redirect
-        const baseUrl = "https://dengenlabs.firebaseapp.com/__/auth/handler";
-        let redirectPath = baseUrl + window.location.pathname;
-        if (redirectPath[0] !== "/") {
-            redirectPath = "/" + redirectPath;
-        }
         const provider = new GithubAuthProvider();
         provider.addScope("profile");
         provider.addScope("email");
@@ -34,7 +30,7 @@ export default function GitHubSignInButton({ }: GitHubSignInButtonProps) {
                 loading="lazy"
                 alt="github logo"
             />
-            <span className="text-sm font-semibold">Continue with GitHub</span>
+            <span className="text-sm font-semibold">{t('auth.continueWithGithub')}</span>
         </Button>
     );
 }

package/src/shell/login/GoogleSignInButton.tsx

@@ -1,11 +1,13 @@
 import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";
 import { getFirebaseAuth } from "@vertesia/ui/session";
 import { Button } from "@vertesia/ui/core";
+import { useUITranslation } from "@vertesia/ui/i18n";
 
 interface GoogleSignInButtonProps {
     redirectTo?: string;
 }
 export default function GoogleSignInButton({ redirectTo }: GoogleSignInButtonProps) {
+    const { t } = useUITranslation();
 
     const signIn = () => {
         localStorage.removeItem("tenantName");
@@ -30,7 +32,7 @@ export default function GoogleSignInButton({ redirectTo }: GoogleSignInButtonPro
             onClick={signIn}
             className="w-full py-5 flex rounded-lg hover:shadow-sm transition duration-150 text-center mb-2">
             <img className="size-6" src="https://www.svgrepo.com/show/475656/google-color.svg" loading="lazy" alt="google logo" />
-            <span className="text-sm font-semibold">Continue with Google</span>
+            <span className="text-sm font-semibold">{t('auth.continueWithGoogle')}</span>
         </Button>
     );
 }

package/src/shell/login/InviteAcceptModal.tsx

@@ -2,12 +2,14 @@ import { TransientToken, UserInviteTokenData } from "@vertesia/common"
 import { Button, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core"
 import { useEffect, useState } from "react"
 import { useUserSession } from "@vertesia/ui/session"
+import { useUITranslation } from '../../i18n/index.js'
 
 
 export function InviteAcceptModal() {
 
     const session = useUserSession()
     const { client, account } = session;
+    const { t } = useUITranslation()
     const [showModal, setShowModal] = useState(false)
     const [invites, setInvites] = useState<TransientToken<UserInviteTokenData>[]>([])
 
@@ -38,6 +40,7 @@ export function InviteAcceptModal() {
     const accept = async (invite: TransientToken<UserInviteTokenData>) => {
         await client.account.acceptInvite(invite.id);
         await session.fetchAccounts();
+        await session.fetchProjects(invite.data.account.id);
         const remainingInvites = invites.filter(i => i.id !== invite.id)
 
         const notLegacyInvites = remainingInvites.filter(i => i.data.account);
@@ -71,7 +74,7 @@ export function InviteAcceptModal() {
                 {invite.data.invited_by &&<div className="text-xs">by {invite.data.invited_by.name ?? invite.data.invited_by}</div>}
             </div>
             <div className="flex flex-col gap-4">
-                <Button size={'xs'} onClick={() => accept(invite)}>Accept</Button> <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>Reject</Button>
+                <Button size={'xs'} onClick={() => accept(invite)}>{t('login.accept')}</Button> <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>{t('login.reject')}</Button>
             </div>
         </div>)
     })
@@ -79,7 +82,7 @@ export function InviteAcceptModal() {
     return (
         <div>
             <Modal isOpen={showModal} onClose={closeModal}>
-                <ModalTitle>Review Invites</ModalTitle>
+                <ModalTitle>{t('login.reviewInvites')}</ModalTitle>
                 <ModalBody>
                     <div className="text-sm pb-4">
                         You have received the following invites to join other accounts.

package/src/shell/login/MicrosoftSigninButton.tsx

@@ -1,18 +1,16 @@
 import { OAuthProvider, signInWithRedirect } from "firebase/auth";
 import { getFirebaseAuth } from "@vertesia/ui/session";
 import { Button } from "@vertesia/ui/core";
+import { useUITranslation } from "@vertesia/ui/i18n";
 
 interface GoogleSignInButtonProps {
     redirectTo?: string;
 }
-export default function MicrosoftSignInButton({ redirectTo }: GoogleSignInButtonProps) {
+export default function MicrosoftSignInButton({ redirectTo: _redirectTo }: GoogleSignInButtonProps) {
+    const { t } = useUITranslation();
 
     const signIn = () => {
         localStorage.removeItem("tenantName");
-        let redirectPath = redirectTo || window.location.pathname || '/';
-        if (redirectPath[0] !== '/') {
-            redirectPath = '/' + redirectPath;
-        }
         const provider = new OAuthProvider('microsoft.com');
         provider.addScope('profile');
         provider.addScope('email');
@@ -24,7 +22,7 @@ export default function MicrosoftSignInButton({ redirectTo }: GoogleSignInButton
             onClick={signIn}
             className="w-full py-5 flex rounded-lg hover:shadow-sm transition duration-150 text-center">
             <img className="size-6" src="https://learn.microsoft.com/en-us/entra/identity-platform/media/howto-add-branding-in-apps/ms-symbollockup_mssymbol_19.svg" loading="lazy" alt="microsoft logo" />
-            <span className="text-sm font-semibold">Continue with Microsoft</span>
+            <span className="text-sm font-semibold">{t('auth.continueWithMicrosoft')}</span>
         </Button>
     );
 }

package/src/shell/login/SigninScreen.tsx

@@ -1,7 +1,9 @@
 import { SignupData, SignupPayload } from "@vertesia/common";
 import { Button, useSafeLayoutEffect } from "@vertesia/ui/core";
 import { Env } from "@vertesia/ui/env";
+import { useUITranslation } from "@vertesia/ui/i18n";
 import { UserNotFoundError, useUserSession, useUXTracking } from "@vertesia/ui/session";
+import { RegionTag } from "@vertesia/ui/layout";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
 import EnterpriseSigninButton from "./EnterpriseSigninButton";
@@ -25,6 +27,7 @@ export function SigninScreen({ allowedPrefix, isNested = false, lightLogo, darkL
 }
 
 function SigninScreenImpl({ isNested = false, lightLogo, darkLogo }: SigninScreenProps) {
+    const { t } = useUITranslation();
     const { isLoading, user, authError } = useUserSession();
 
     return !isLoading && !user ? (
@@ -39,13 +42,14 @@ function SigninScreenImpl({ isNested = false, lightLogo, darkLogo }: SigninScree
             >
 
                 <StandardSigninPanel authError={authError} lightLogo={lightLogo} darkLogo={darkLogo} />
-                <div className="flex gap-x-6 mt-10 justify-center text-muted">
+                <div className="flex gap-x-6 mt-10 justify-center items-center text-muted">
                     <a href="https://vertesiahq.com/privacy" className="text-sm">
-                        Privacy Policy
+                        {t('auth.privacyPolicy')}
                     </a>
                     <a href="https://vertesiahq.com/terms" className="text-sm">
-                        Terms of Service
+                        {t('auth.termsOfService')}
                     </a>
+                    <RegionTag />
                 </div>
             </div>
         </div>
@@ -57,6 +61,7 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
     darkLogo?: string,
     lightLogo?: string
 }) {
+    const { t } = useUITranslation();
     const [signupData, setSignupData] = useState<SignupData | undefined>(undefined);
     const [collectSignupData, setCollectSignupData] = useState(false);
     const { signOut } = useUserSession();
@@ -109,8 +114,8 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
 
             {signupData && (
                 <div className="my-6">
-                    Need to make a change?{" "}
-                    <Button onClick={goToSignup}> Go back</Button>
+                    {t('auth.needToMakeChange')}{" "}
+                    <Button onClick={goToSignup}> {t('auth.goBack')}</Button>
                 </div>
             )}
             <div className="flex flex-col space-y-2">
@@ -120,12 +125,12 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
 
                     <div className="flex flex-col">
                         <div className="my-4">
-                            <h2 className="text-2xl font-bold text-center">Log in or Sign up</h2>
+                            <h2 className="text-2xl font-bold text-center">{t('auth.logInOrSignUp')}</h2>
                         </div>
                         <div className="max-w-2xl text-center my-2 px-2">
-                            First time here? No problem, it&apos;s free to try!
+                            {t('auth.firstTimeMessage')}
                             <br />
-                            We&apos;ll just ask you a couple of questions next and you&apos;ll be on your way.
+                            {t('auth.firstTimeDetails')}
                         </div>
                         <div className="flex items-center flex-col">
                             <div className="py-4 w-70">
@@ -135,7 +140,7 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
                             </div>
                             <div className="flex items-center flex-row w-70 text-muted">
                                 <hr className="w-full" />
-                                <div className="px-2 text-xs">OR</div>
+                                <div className="px-2 text-xs">{t('auth.or')}</div>
                                 <hr className="w-full" />
                             </div>
                             <div className="py-4 w-70">
@@ -145,12 +150,12 @@ function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
                         {authError && !(authError instanceof UserNotFoundError) && (
                             <div className="text-center">
                                 <div className="">
-                                    Sorry, we have not been able to sign you in.
+                                    {t('auth.signInError')}
                                     <br />
-                                    Please try again or contact
+                                    {t('auth.signInErrorContact')}
                                     <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>
+                                    {t('auth.signInErrorPersists')}
+                                    <pre className="mt-2">{t('auth.error', { message: authError.message })}</pre>
                                 </div>
                             </div>
                         )}

package/src/shell/login/SignupForm.tsx

@@ -1,8 +1,9 @@
 import { SignupData } from "@vertesia/common";
-import { Button, Input, SelectBox, SelectStack } from "@vertesia/ui/core";
+import { Button, Input, RadioGroup, SelectBox } from "@vertesia/ui/core";
 import { User } from "firebase/auth";
 import { useEffect, useState } from "react";
 import { getFirebaseAuth } from "@vertesia/ui/session";
+import { useUITranslation } from '../../i18n/index.js';
 
 
 interface CompanySizeOption {
@@ -10,41 +11,13 @@ interface CompanySizeOption {
     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 { t } = useUITranslation();
     const [accountType, setAccountType] = useState<string | undefined>(undefined);
     const [companySize, setCompanySize] = useState<CompanySizeOption | undefined>(undefined);
     const [companyName, setCompanyName] = useState<string | undefined>(undefined);
@@ -55,6 +28,35 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
     const [error, setError] = useState<string | undefined>(undefined);
     const isCompany = accountType === "company";
 
+    const companySizeOptions: CompanySizeOption[] = [
+        { id: 1, label: t('signup.size1to10') },
+        { id: 11, label: t('signup.size11to100') },
+        { id: 101, label: t('signup.size101to1000') },
+        { id: 1001, label: t('signup.size1001to5000') },
+        { id: 5001, label: t('signup.size5000plus') },
+    ];
+
+    const accountTypeOptions = [
+        {
+            id: "personal",
+            label: t('signup.personal'),
+            description: t('signup.personalDescription'),
+        },
+        {
+            id: "company",
+            label: t('signup.company'),
+            description: t('signup.companyDescription'),
+        },
+    ];
+
+    const projectMaturityOptions = [
+        { id: "testing", label: t('signup.justTesting') },
+        { id: "exploring", label: t('signup.activelyExploring') },
+        { id: "using", label: t('signup.alreadyUsing') },
+        { id: "migrating", label: t('signup.migratingLLMs') },
+        { id: "other", label: t('signup.other') },
+    ];
+
     useEffect(() => {
         const user = getFirebaseAuth().currentUser;
         if (!user) {
@@ -66,16 +68,16 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
 
     const isValid = () => {
         if (!accountType) {
-            setError("Please select an account type");
+            setError(t('signup.pleaseSelectAccountType'));
             return false;
         }
         if (isCompany && !companyName) {
-            setError("Please enter an organization name");
+            setError(t('signup.pleaseEnterOrgName'));
             return false;
         }
 
         if (isCompany && !companySize) {
-            setError("Please select a company size");
+            setError(t('signup.pleaseSelectCompanySize'));
             return false;
         }
 
@@ -112,16 +114,14 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
         <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.
+                    {t('signup.welcomeMessage', { name: fbUser?.displayName, email: fbUser?.email })}
                 </p>
                 {error &&
                     <div className="text-destructive">{error}</div>
                 }
             </div>
-            <FormItem label="Account Type">
-                <SelectStack
+            <FormItem label={t('signup.accountType')}>
+                <RadioGroup
                     options={accountTypeOptions}
                     selected={accountTypeOptions.find((option) => option.id === accountType)}
                     onSelect={(option) => setAccountType(option.id)}
@@ -129,38 +129,38 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
             </FormItem>
             {isCompany &&
                 <>
-                    <FormItem label="Company Size">
+                    <FormItem label={t('signup.companySize')}>
                         <SelectBox className="w-full border border-accent bg-muted"
                             value={companySize}
                             options={companySizeOptions}
                             onChange={setCompanySize}
                             optionLabel={(option) => option?.label}
-                            placeholder='Select Company Size'
+                            placeholder={t('signup.selectCompanySize')}
                         />
                     </FormItem>
-                    <FormItem label="Company Name">
+                    <FormItem label={t('signup.companyName')}>
                         <Input value={companyName} onChange={setCompanyName} type="text" required={true} />
                     </FormItem>
-                    <FormItem label="Company Website">
+                    <FormItem label={t('signup.companyWebsite')}>
                         <Input value={companyWebsite} onChange={setCompanyWebsite} type="text" />
                     </FormItem>
                 </>
             }
-            <FormItem label="Project Maturity">
+            <FormItem label={t('signup.projectMaturity')}>
                 <SelectBox 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'
+                    placeholder={t('signup.selectProjectMaturity')}
                     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>
+                    <span className="text-lg">{t('signup.signUp')}</span>
                 </Button>
                 <Button variant="ghost" size="xl" className="mt-4" onClick={goBack}>
-                    <span className="">Wrong account, go back</span>
+                    <span className="">{t('signup.wrongAccountGoBack')}</span>
                 </Button>
             </div>
         </div>