feat(NavBar): add tooltips and separators (#45)

- Added tooltips to the navbar on all pages for better user guidance. - Included a specific tooltip for the "Rag Management" section in the navbar. - Reintroduced separators in the navbar for improved visual separation of sections.
tenstorrent · Sep 21, 2024 · 2eccb99 · 2eccb99
1 parent 0f7ce38
commit 2eccb99
Showing 1 changed file with 101 additions and 19 deletions.
diff --git a/app/frontend/src/components/NavBar.tsx b/app/frontend/src/components/NavBar.tsx
@@ -8,7 +8,7 @@ import {
   NavigationMenuItem,
   NavigationMenuList,
 } from "./ui/navigation-menu";
-import { Home, BrainCog, BotMessageSquare, Notebook } from "lucide-react"; // Import BotMessageSquare
+import { Home, BrainCog, BotMessageSquare, Notebook } from "lucide-react";
 import ModeToggle from "./DarkModeToggle";
 import HelpIcon from "./HelpIcon";
 import { Separator } from "./ui/separator";
@@ -111,10 +111,25 @@ export default function NavBar() {
                   to="/"
                   className={({ isActive }) => getNavLinkClass(isActive)}
                 >
-                  <Home
-                    className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
-                  />
-                  {!isChatUI && <span>Home</span>}
+                  {isChatUI ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Home
+                          className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Home</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  ) : (
+                    <>
+                      <Home
+                        className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                      />
+                      <span>Home</span>
+                    </>
+                  )}
                 </NavLink>
               </NavigationMenuItem>
               {!isChatUI && (
@@ -130,12 +145,28 @@ export default function NavBar() {
                   to="/rag-management"
                   className={({ isActive }) => getNavLinkClass(isActive)}
                 >
-                  <Notebook
-                    className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
-                  />
-                  {!isChatUI && <span>Rag Management</span>}
+                  {isChatUI ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Notebook
+                          className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Rag Management</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  ) : (
+                    <>
+                      <Notebook
+                        className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                      />
+                      <span>Rag Management</span>
+                    </>
+                  )}
                 </NavLink>
               </NavigationMenuItem>
+
               {!isChatUI && (
                 <Separator
                   className="h-6 w-px bg-zinc-400"
@@ -149,10 +180,25 @@ export default function NavBar() {
                   to="/models-deployed"
                   className={({ isActive }) => getNavLinkClass(isActive)}
                 >
-                  <BrainCog
-                    className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
-                  />
-                  {!isChatUI && <span>Models Deployed</span>}
+                  {isChatUI ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <BrainCog
+                          className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Models Deployed</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  ) : (
+                    <>
+                      <BrainCog
+                        className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                      />
+                      <span>Models Deployed</span>
+                    </>
+                  )}
                 </NavLink>
               </NavigationMenuItem>
               {isChatUI && (
@@ -163,9 +209,16 @@ export default function NavBar() {
                     to="/chat-ui"
                     className={({ isActive }) => getNavLinkClass(isActive)}
                   >
-                    <BotMessageSquare
-                      className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
-                    />
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <BotMessageSquare
+                          className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Chat UI</p>
+                      </TooltipContent>
+                    </Tooltip>
                   </NavLink>
                 </NavigationMenuItem>
               )}
@@ -216,9 +269,38 @@ export default function NavBar() {
         </div>
         {isChatUI && (
           <div className="mt-auto flex flex-col items-center mb-4 space-y-4">
-            <ModeToggle />
-            <ResetIcon onReset={handleReset} />
-            <HelpIcon toggleSidebar={handleToggleSidebar} />
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <ModeToggle />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Toggle Dark/Light Mode</p>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <ResetIcon onReset={handleReset} />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Reset Board</p>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <HelpIcon toggleSidebar={handleToggleSidebar} />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Get Help</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </div>
         )}
         <Sidebar ref={sidebarRef} />