@vertesia/ui 0.24.0-dev.202601221707

package/src/shell/login/TerminalLogin.tsx

@@ -0,0 +1,338 @@
+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
+}
+
+const LOOPBACK_HOSTS = new Set(['127.0.0.1', 'localhost'])
+
+function parseRedirectUri(rawRedirect: string | null): string | null {
+    if (!rawRedirect) {
+        return null
+    }
+
+    let decoded: string
+    try {
+        decoded = decodeURIComponent(rawRedirect)
+    } catch {
+        return null
+    }
+
+    let parsed: URL
+    try {
+        parsed = new URL(decoded)
+    } catch {
+        return null
+    }
+
+    if (parsed.protocol !== 'http:') {
+        return null
+    }
+
+    if (!parsed.port) {
+        return null
+    }
+
+    if (parsed.username || parsed.password) {
+        return null
+    }
+
+    if (!LOOPBACK_HOSTS.has(parsed.hostname)) {
+        return null
+    }
+
+    return parsed.toString()
+}
+
+function getClientInfo(location: Location): ClientInfo | null {
+    const params = new URLSearchParams(location.search)
+    const redirect = parseRedirectUri(params.get('redirect_uri'))
+    const code = params.get('code')
+    if (!redirect || !code) {
+        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-info">
+                    Authorizing client on {envName} environment.
+                </div>
+                <div className='mb-2 text-md text-muted-foreground'>
+                    <div>A client app wants authorization to access the composable prompt servers in your name.</div>
+                    <div>The client app code is <b className="text-foreground">{clientInfo.code}</b>. You can check if the code is correct in the terminal.</div>
+                </div>
+                <div className='mb-2 text-sm text-muted-foreground'>
+                    <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-muted-foreground">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-muted-foreground">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-muted-foreground">Project</span>
+                <SelectProject value={currentData.project} onChange={onChangeProject} projects={projects} />
+            </div>
+            <div className='mb-4 text-sm text-attention'>
+                <b>Note:</b> If your browser asks for permission to access your local network, please allow it. This is required to send the authorization token back to the CLI tool. If not, you will need to copy/paste the token manually in your terminal.
+            </div>
+            <div>
+                <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} />
+    )
+}

package/src/shell/login/UserInfo.tsx

@@ -0,0 +1,78 @@
+import { getTenantIdFromProject } from "@vertesia/common";
+import { VTabs, VTabsBar, VTabsPanel, VTooltip } from "@vertesia/ui/core";
+import { Env } from "@vertesia/ui/env";
+import { useUserSession } from "@vertesia/ui/session";
+// Package version is now passed as prop from the consuming application
+import { Check, CopyIcon } from "lucide-react";
+import { useState } from "react";
+
+export function InfoItems({ title, value }: { title: string, value: string }) {
+    function copyToClipboard(value: string) {
+        navigator.clipboard.writeText(value);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+    }
+    const [isCopied, setIsCopied] = useState(false);
+    return (
+        <div className="w-full flex justify-between items-center mb-1">
+            <div className="flex flex-col w-[calc(100%-3rem)]">
+                <div className='text-sm px-2 dark:text-slate-200'>{title}</div>
+                <VTooltip description={value} size="xs" placement="left">
+                    <div className='text-xs truncate text-muted w-full text-left px-2'>{value} </div>
+                </VTooltip>
+            </div>
+            {isCopied ?
+                <Check className="size-4 cursor-pointer text-success" />
+                :
+                <CopyIcon className="size-4 cursor-pointer text-gray-400 dark:text-slate-400"
+                    onClick={() => copyToClipboard(value)} />
+            }
+        </div>
+    )
+}
+
+export default function InfoList() {
+
+    const session = useUserSession();
+    const { account, project, client, authToken } = session;
+    const server = new URL(client.baseUrl).hostname;
+    const store = new URL(client.store.baseUrl).hostname;
+    const tenantId = project ? getTenantIdFromProject(project) : '';
+
+    const tabs = [
+        {
+            name: 'user',
+            label: 'User',
+            content:
+                <div className="space-y-1 p-2">
+                    <InfoItems title="Organization ID" value={account?.id ?? 'Unknown'} />
+                    <InfoItems title="Project ID" value={project?.id ?? 'Unknown'} />
+                    <InfoItems title="User ID" value={authToken?.sub ?? 'Unknown'} />
+                    <InfoItems title="Organization Roles" value={authToken?.account_roles?.join(',') ?? 'Unknown'} />
+                    <InfoItems title="Project Roles" value={authToken?.project_roles?.join(',') ?? 'Unknown'} />
+                </div>
+        },
+        {
+            name: 'environment',
+            label: 'Environment',
+            content:
+                <div className="space-y-1 p-2">
+                    <InfoItems title="Tenant ID" value={tenantId} />
+                    <InfoItems title="Environment" value={Env.type} />
+                    <InfoItems title="Server" value={server} />
+                    <InfoItems title="Store" value={store} />
+                    <InfoItems title="App Version" value={Env.version} />
+                    <InfoItems title="SDK Version" value={Env.sdkVersion || 'unknown'} />
+                </div>
+        }
+    ];
+
+    return (
+        <div className="w-full">
+            <VTabs defaultValue="user" tabs={tabs} fullWidth updateHash={false}>
+                <VTabsBar />
+                <VTabsPanel />
+            </VTabs>
+        </div>
+    )
+}

package/src/shell/login/UserSessionMenu.tsx

@@ -0,0 +1,92 @@
+import { AuthTokenPayload, Permission } from "@vertesia/common";
+import { Avatar, Button, MenuList, ModeToggle, Spinner } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { Popover } from "@vertesia/ui/widgets";
+import clsx from "clsx";
+import { useState } from "react";
+import SignInModal from "./SignInModal";
+import InfoList from "./UserInfo";
+import { useNavigate } from "@vertesia/ui/router";
+import { useUserPermissions } from "@vertesia/ui/features";
+interface UserSessionMenuProps {
+    name?: string
+    picture?: string;
+    user?: AuthTokenPayload;
+}
+export function UserSessionMenu({ }: UserSessionMenuProps) {
+    const { user, isLoading } = useUserSession();
+    const [showModal, setShowModal] = useState(false)
+
+    if (isLoading) {
+        return <Spinner />
+    } else if (!user) {
+        return <>
+            <Button onClick={() => setShowModal(true)}>Sign In</Button>
+            <SignInModal isOpen={showModal} onClose={() => setShowModal(false)} />
+        </>
+    } else {
+        return (
+
+            <div className="px-3">
+                <UserSessionPopup asMenuTrigger />
+            </div>
+        )
+    }
+}
+
+interface UserSessionPopupProps {
+    asMenuTrigger?: boolean
+    className?: string
+}
+function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopupProps) {
+    const session = useUserSession();
+    const navigate = useNavigate();
+    const perms = useUserPermissions();
+    const { user } = session;
+    if (!session || !user) return null;
+
+    const isProjectManager = perms.hasPermission(Permission.project_admin);
+
+    return (
+        <Popover strategy='fixed' placement='bottom-start' zIndex={100}>
+            <Popover.Trigger click>
+                <div className={clsx(className, "flex items-center justify-start", asMenuTrigger && "cursor-pointer")}>
+                    <Avatar
+                        size='sm'
+                        color='bg-amber-500'
+                        shape='circle'
+                        /*src={picture} */
+                        name={user?.name} />
+                </div>
+            </Popover.Trigger>
+            <Popover.Content className="w-[280px] mx-2 my-1">
+                <div className="bg-white dark:bg-slate-900 shadow-lg rounded-md ring-1 ring-gray-200 dark:ring-slate-700">
+                    <div className='divide-y divide-gray-200 dark:divide-slate-700'>
+                        <div className='py-2 pl-2'>
+                            <p className="px-4 dark:text-white mb-1">{user?.name ?? 'Unknown'}</p>
+                            <p className="px-4 text-xs text-gray-500">{user?.email ?? ''}</p>
+                        </div>
+                        <div className="w-full p-1" >
+                            <InfoList />
+                        </div>
+                        <div className='py-2 pl-2'>
+                            <ModeToggle />
+                        </div>
+                        <div className='py-2'>
+                            <MenuList>
+                                {isProjectManager && (
+                                    <MenuList.Item className='px-2' onClick={() => navigate('/settings', { replace: true })}>
+                                        Settings
+                                    </MenuList.Item>
+                                )}
+                                <MenuList.Item className='px-2' onClick={() => session.logout()}>
+                                    Sign out
+                                </MenuList.Item>
+                            </MenuList>
+                        </div>
+                    </div >
+                </div >
+            </Popover.Content>
+        </Popover>
+    )
+}

package/src/shell/utils.tsx

@@ -0,0 +1,7 @@
+export function isVertesiaEmail(email: string | undefined) {
+    return email ? (
+        email.endsWith('@vertesiahq.com') ||
+        email.endsWith('@becomposable.com') ||
+        email.endsWith('@composableprompts.com')
+    ) : false;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

package/src/widgets/Progress.tsx

@@ -0,0 +1,10 @@
+interface ProgressProps {
+    percent: number; // progress percent value
+}
+export function Progress({ percent }: ProgressProps) {
+    return (
+        <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+            <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${percent}%` }}></div>
+        </div>
+    )
+}

package/src/widgets/SvgIcon.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+
+interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
+    content: string; // the SVG content as a string
+}
+export function SvgIcon({ content, ...props }: SvgIconProps) {
+    const containerRef = useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        // Parse the SVG string
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(content, 'image/svg+xml');
+        const svgEl = doc.querySelector('svg');
+
+        if (!svgEl) {
+            console.warn('SvgIcon: No <svg> element found in provided string');
+            containerRef.current.innerHTML = '';
+            return;
+        }
+
+        // Apply all passed props to the SVG element
+        props && Object.entries(props).forEach(([key, value]) => {
+            if (value == null) return;
+
+            const attrName = key === 'className' ? 'class' : key;
+            svgEl.setAttribute(attrName, String(value));
+        });
+
+        // Clear and append the new SVG
+        containerRef.current.innerHTML = '';
+        containerRef.current.appendChild(svgEl);
+    }, [content, props]);
+
+    return <span ref={containerRef} />;
+}
+
+export function createSvgIcon(content: string): React.ComponentType<React.HTMLAttributes<SVGElement>> {
+    const IconComponent: React.FC<React.HTMLAttributes<SVGElement>> = (props) => {
+        return <SvgIcon content={content} {...props} />;
+    };
+    return IconComponent;
+}