From d2d43af0dfb5339b9b7d0ffa4bb896035a54379e Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 20 Feb 2025 12:03:50 -0800
Subject: [PATCH] Nav: breadcrumbs

---
 src/common/components/AppBreadcrumbs.tsx      |  5 ++--
 src/modules/llms/models-modal/ModelsModal.tsx | 27 ++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/common/components/AppBreadcrumbs.tsx b/src/common/components/AppBreadcrumbs.tsx
index a1a53dd2c..bebb2b37f 100644
--- a/src/common/components/AppBreadcrumbs.tsx
+++ b/src/common/components/AppBreadcrumbs.tsx
@@ -11,7 +11,7 @@ const _sx = { p: 0 };
 export function AppBreadcrumbs(props: {
   size?: 'sm' | 'md' | 'lg';
   children?: React.ReactNode;
-  rootTitle?: string;
+  rootTitle?: React.ReactNode;
   onRootClick?: () => void;
 }) {
 
@@ -26,7 +26,8 @@ export function AppBreadcrumbs(props: {
   return <Breadcrumbs size={props.size || 'sm'} separator={<KeyboardArrowRightIcon />} aria-label='breadcrumbs' sx={_sx}>
     {(props.children && !!rootTitle && !!onRootClick)
       ? <AppBreadcrumbs.Link color='neutral' href='#' onClick={handleRootClick}>{props.rootTitle}</AppBreadcrumbs.Link>
-      : <Typography>{props.rootTitle}</Typography>
+      : (typeof props.rootTitle === 'string') ? <Typography>{props.rootTitle}</Typography>
+        : props.rootTitle
     }
     {props.children}
     {/*{nav.pnt === 'create-new' && <Link color='neutral' href='#'>Create New</Link>}*/}
diff --git a/src/modules/llms/models-modal/ModelsModal.tsx b/src/modules/llms/models-modal/ModelsModal.tsx
index 95c59bc54..03df89485 100644
--- a/src/modules/llms/models-modal/ModelsModal.tsx
+++ b/src/modules/llms/models-modal/ModelsModal.tsx
@@ -116,19 +116,20 @@ function ModelsConfiguratorModal(props: {
           <AppBreadcrumbs.Leaf>Setup <b>AI Models</b></AppBreadcrumbs.Leaf>
         </AppBreadcrumbs>
       ) : (
-        <>Configure <b>AI Models</b></>
-        // <AppBreadcrumbs size='md' rootTitle='AI Models'>
-        //   <Box sx={{ display: 'flex', gap: 1 }}>
-        //     {!hasLLMs ? <AppBreadcrumbs.Leaf>Setup</AppBreadcrumbs.Leaf> : <>
-        //       <Chip size='lg' variant={isTabSetup ? 'solid' : 'outlined'} color='neutral' onClick={isTabSetup ? undefined : handleToggleDefaults} sx={{}}>
-        //         Setup
-        //       </Chip>
-        //       <Chip size='lg' variant={isTabDefaults ? 'solid' : 'outlined'} color='neutral' onClick={isTabDefaults ? undefined : handleToggleDefaults} sx={{}}>
-        //         Defaults
-        //       </Chip>
-        //     </>}
-        //   </Box>
-        // </AppBreadcrumbs>
+        // <>Configure <b>AI Models</b></>
+        <AppBreadcrumbs size='md' rootTitle='Configure'>
+          <AppBreadcrumbs.Leaf><b>AI Models</b></AppBreadcrumbs.Leaf>
+          {/*<Box sx={{ display: 'flex', gap: 1 }}>*/}
+          {/*  {!hasLLMs ? <AppBreadcrumbs.Leaf>Setup</AppBreadcrumbs.Leaf> : <>*/}
+          {/*    <Chip size='lg' variant={isTabSetup ? 'solid' : 'outlined'} color='neutral' onClick={isTabSetup ? undefined : handleToggleDefaults} sx={{}}>*/}
+          {/*      Setup*/}
+          {/*    </Chip>*/}
+          {/*    <Chip size='lg' variant={isTabDefaults ? 'solid' : 'outlined'} color='neutral' onClick={isTabDefaults ? undefined : handleToggleDefaults} sx={{}}>*/}
+          {/*      Defaults*/}
+          {/*    </Chip>*/}
+          {/*  </>}*/}
+          {/*</Box>*/}
+        </AppBreadcrumbs>
       )}
       open onClose={optimaActions().closeModels}
       darkBottomClose={!isTabWizard}