@vertesia/ui 0.69.0 → 0.71.0

package/src/features/agent/chat/ModernAgentOutput/MessageItem.tsx

@@ -259,7 +259,7 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                 <Markdown
                     remarkPlugins={[remarkGfm]}
                     components={{
-                        a: ({ node, ...props }: { node?: any; href?: string; children?: React.ReactNode }) => {
+                        a: ({ node, ref, ...props }: { node?: any; ref?: any; href?: string; children?: React.ReactNode }) => {
                             const href = props.href || "";
                             if (href.includes("/store/objects")) {
                                 return (
@@ -279,7 +279,7 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                                 />
                             );
                         },
-                        img: ({ node, ...props }: { node?: any; src?: string; alt?: string }) => {
+                        img: ({ node, ref, ...props }: { node?: any; ref?: any; src?: string; alt?: string }) => {
                             return (
                                 <img
                                     {...props}
@@ -291,11 +291,13 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                         },
                         code: ({
                             node,
+                            ref,
                             className,
                             children,
                             ...props
                         }: {
                             node?: any;
+                            ref?: any;
                             className?: string;
                             children?: React.ReactNode;
                         }) => {
@@ -317,21 +319,22 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                                 </>
                             );
                         },
-                        p: (props) => <p {...props} />,
-                        strong: (props) => <strong {...props} />,
-                        em: (props) => <em {...props} />,
-                        pre: (props) => <pre {...props} />,
-                        h1: (props) => <h1 {...props} />,
-                        h2: (props) => <h2 {...props} />,
-                        h3: (props) => <h3 {...props} />,
-                        li: (props) => <li {...props} />,
-                        ul: (props) => <ul {...props} />,
-                        ol: (props) => <ol {...props} />,
-                        blockquote: (props) => <blockquote {...props} />,
-                        hr: (props) => <hr {...props} />,
-                        table: (props) => <div className="overflow-x-auto"><table {...props} /></div>,
-                        th: (props) => <th {...props} />,
-                        td: (props) => <td {...props} />,
+                        // Remove 'node' and 'ref' from props
+                        p: ({ node, ref, ...props }) => <p {...props} />, 
+                        strong: ({ node, ref, ...props }) => <strong {...props} />,
+                        em: ({ node, ref, ...props }) => <em {...props} />,
+                        pre: ({ node, ref, ...props }) => <pre {...props} />,
+                        h1: ({ node, ref, ...props }) => <h1 {...props} />,
+                        h2: ({ node, ref, ...props }) => <h2 {...props} />,
+                        h3: ({ node, ref, ...props }) => <h3 {...props} />,
+                        li: ({ node, ref, ...props }) => <li {...props} />,
+                        ul: ({ node, ref, ...props }) => <ul {...props} />,
+                        ol: ({ node, ref, ...props }) => <ol {...props} />,
+                        blockquote: ({ node, ref, ...props }) => <blockquote {...props} />,
+                        hr: ({ node, ref, ...props }) => <hr {...props} />,
+                        table: ({ node, ref, ...props }) => <div className="overflow-x-auto"><table {...props} /></div>,
+                        th: ({ node, ref, ...props }) => <th {...props} />,
+                        td: ({ node, ref, ...props }) => <td {...props} />,
                     }}
                 >
                     {content as string}

package/src/router/path.ts

@@ -20,9 +20,12 @@ export function joinPath(path1: string, path2: string) {
 }
 
 export function getPathSegments(path: string) {
-    if (path === '' || path === '/') {
+    if (path === '') {
         return [];
     }
+    if (path === '/') {
+        return [''];
+    }
     let s = 0, e = path.length;
     if (path.startsWith('./')) {
         s = 2;

package/src/session/auth/useCurrentTenant.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import { useUserSession } from "@vertesia/ui/session";
+
+interface TenantConfig {
+    tenantKey: string;
+    name: string;
+    domain: string[];
+    firebaseTenantId: string;
+    provider?: string;
+    logo?: string;
+}
+
+export function useCurrentTenant() {
+    const { user } = useUserSession();
+    const [currentTenant, setCurrentTenant] = useState<TenantConfig | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const loadCurrentTenant = async () => {
+            if (!user?.email) {
+                setCurrentTenant(null);
+                setIsLoading(false);
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/resolve-tenant', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        tenantEmail: user.email
+                    })
+                });
+
+                if (response.ok) {
+                    const tenantData = await response.json();
+                    if (tenantData) {
+                        // Convert the resolved tenant data to our TenantConfig format
+                        setCurrentTenant({
+                            tenantKey: tenantData.name || 'unknown',
+                            name: tenantData.label || tenantData.name || 'Unknown',
+                            domain: tenantData.domain || [],
+                            firebaseTenantId: tenantData.firebaseTenantId,
+                            provider: tenantData.provider,
+                            logo: tenantData.logo
+                        });
+                    } else {
+                        setCurrentTenant(null);
+                    }
+                } else {
+                    setCurrentTenant(null);
+                }
+            } catch (error) {
+                console.error('Error loading current tenant:', error);
+                setError('Failed to load tenant configuration');
+                setCurrentTenant(null);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadCurrentTenant();
+    }, [user?.email]);
+
+    return {
+        currentTenant,
+        isLoading,
+        error
+    };
+}

package/src/session/index.ts

@@ -1,4 +1,5 @@
 export * from "./auth/composable";
+export * from "./auth/useCurrentTenant";
 export * from "./auth/firebase";
 export * from "./TypeRegistry";
 export * from "./UserSession";

package/src/shell/SplashScreen.tsx

@@ -1,11 +1,12 @@
 import { Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, ReactNode, useEffect, useState } from "react";
 import { useUserSession } from "@vertesia/ui/session";
 
 
 interface SplashScreenProps {
+    icon?: ReactNode;
 }
-export function SplashScreen({ }: SplashScreenProps) {
+export function SplashScreen({ icon: Icon }: SplashScreenProps) {
     const { isLoading } = useUserSession();
     const [show, setShow] = useState(true);
 
@@ -32,10 +33,42 @@ export function SplashScreen({ }: SplashScreenProps) {
             <div style={{ zIndex: 999999 }} className='fixed inset-x-0 inset-y-0'>
                 <div className="flex w-full h-full items-center justify-center">
                     <div className="animate-[spin_4s_linear_infinite]">
-                        <img src='/icon.svg' className='w-10 h-auto animate-pulse rounded-full' />
+                        <div className='animate-pulse rounded-full bg-transparent'>
+                            {Icon || <LoadingIcon />}
+                        </div>
                     </div>
                 </div>
             </div>
         </Transition>
     )
+}
+
+function LoadingIcon() {
+    const stopColor1 = "currentColor";
+    const stopColor2 = "currentColor";
+    // const stopColor1 = "#4F46E5";
+    // const stopColor2 = "#4F46E5";
+    return (
+        <svg
+            className="w-8 h-8 text-indigo-600"
+            viewBox="0 0 50 50"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <defs>
+                <linearGradient id="spinner-gradient" x1="1" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor={stopColor1} stopOpacity="1" />
+                    <stop offset="100%" stopColor={stopColor2} stopOpacity="0" />
+                </linearGradient>
+            </defs>
+            <circle
+                cx="25"
+                cy="25"
+                r="20"
+                stroke="url(#spinner-gradient)"
+                strokeWidth="5"
+                fill="none"
+                strokeLinecap="round"
+            />
+        </svg>
+    )
 }

package/src/shell/VertesiaShell.tsx

@@ -3,19 +3,21 @@ import { UserPermissionProvider } from "@vertesia/ui/features";
 import { UserSessionProvider } from "@vertesia/ui/session";
 import { SplashScreen } from "./SplashScreen";
 import { SigninScreen } from "./login/SigninScreen";
+import { ReactNode } from "react";
 
 
 interface VertesiaShellProps {
     children: React.ReactNode;
     lightLogo?: string;
     darkLogo?: string;
+    loadingIcon?: ReactNode;
 }
-export function VertesiaShell({ children, lightLogo, darkLogo }: VertesiaShellProps) {
+export function VertesiaShell({ children, lightLogo, darkLogo, loadingIcon }: VertesiaShellProps) {
     return (
         <ToastProvider>
             <UserSessionProvider>
                 <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-                    <SplashScreen />
+                    <SplashScreen icon={loadingIcon} />
                     <SigninScreen allowedPrefix="/shared/" lightLogo={lightLogo} darkLogo={darkLogo} />
                     <UserPermissionProvider>
                         {children}

package/src/shell/login/InviteAcceptModal.tsx

@@ -1,5 +1,5 @@
 import { TransientToken, UserInviteTokenData } from "@vertesia/common"
-import { Button, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core"
+import { Button, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core"
 import { useEffect, useState } from "react"
 import { useUserSession } from "@vertesia/ui/session"
 
@@ -14,15 +14,22 @@ export function InviteAcceptModal() {
     useEffect(() => {
         client.account.listInvites().then(invites => {
             if (invites.length > 0) {
-                console.log("Got invites - showing modal")
-                setInvites(invites)
-                /*toast({
-                    status: 'info',
-                    title: 'You have pending invites',
-                    description: 'Click the button on the top right to review them.'
-                })*/
+                // Filter out legacy invites that do not have account data
+                const notLegacyInvites = invites.filter(i => i.data.account);
+                if (notLegacyInvites.length === 0) {
+                    console.log("No valid invites found, closing modal")
+                    return;
+                }
+                // If we have valid invites, show the modal
+                console.log("Found valid invites", notLegacyInvites.length)
                 setShowModal(true);
+                setInvites(notLegacyInvites);
+            } else {
+                console.log("No invites found, closing modal")
+                setShowModal(false);
             }
+        }).catch(err => {
+            console.error("Error fetching invites", err);
         })
     }, [account?.id])
 
@@ -32,8 +39,11 @@ export function InviteAcceptModal() {
         await client.account.acceptInvite(invite.id);
         await session.fetchAccounts();
         const remainingInvites = invites.filter(i => i.id !== invite.id)
-        setInvites(remainingInvites)
-        if (remainingInvites.length === 0) {
+
+        const notLegacyInvites = remainingInvites.filter(i => i.data.account);
+        if (notLegacyInvites.length > 0) {
+            setInvites(notLegacyInvites);
+        } else {
             closeModal();
         }
     }
@@ -47,31 +57,37 @@ export function InviteAcceptModal() {
         }
     }
 
-    const inviteList = invites.map(invite => (
-        <div key={invite.id} className="flex flex-row w-full justify-between border rounded-sm px-2 py-2 ">
+    const inviteList = invites.map(invite => {
+        if (!invite.data.account) {
+            console.warn("Invite has no account data", invite);
+            return null; // Skip rendering this invite
+        }
+
+        return (<div key={invite.id} className="flex flex-row w-full justify-between border rounded-sm px-2 py-2 ">
             <div className="flex flex-col">
-                <div className="w-full font-semibold">{invite.data.account.name}</div>
+                <div className="w-full font-semibold">{invite.data.account.name ?? invite.data.account}</div>
+                {invite.data.project && <div className="w-full text-base">- {invite.data.project.name}</div>}
                 <div className="text-xs">Role: {invite.data.role}</div>
                 <div className="text-xs">by {invite.data.invitedBy.name}</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>
             </div>
-        </div>
-    ))
+        </div>)
+    })
 
     return (
         <div>
-            <Modal isOpen={showModal} onClose={closeModal}>
-                <ModalTitle>Review Invites</ModalTitle>
-                <ModalBody>
+            <VModal isOpen={showModal} onClose={closeModal}>
+                <VModalTitle>Review Invites</VModalTitle>
+                <VModalBody>
                     <div className="text-sm pb-4">
                         You have received the following invites to join other accounts.
                         Please review and accept or declined them.
                     </div>
                     {inviteList}
-                </ModalBody>
-            </Modal>
+                </VModalBody>
+            </VModal>
         </div>
     )
 

package/tsconfig.dist.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "declaration": true,
+        "declarationMap": true,
+        "jsx": "react-jsx",
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "rootDir": "./src",
+        "outDir": "./lib"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "**/*.test.*",
+        "**/*.spec.*"
+    ]
+}