551 tooltip component

frontend/public/locales/en/translation.json

@@ -462,6 +462,9 @@
     "original_text": "Original Text",
     "inputs": "Inputs",
     "outputs": "Outputs",
+    "profile" : "Profile",
+    "add_new_flow": "Add new flow",
+    "toggle_menu": "Toggle menu",
     "any": "- Any -"
   },
   "placeholder": {

frontend/public/locales/fr/translation.json

@@ -463,6 +463,9 @@
     "original_text": "Texte par défaut",
     "inputs": "Ports d'entrée",
     "outputs": "Ports de sortie",
+    "profile": "Profil",
+    "add_new_flow": "Ajouter un nouveau flux",
+    "toggle_menu": "Basculer le menu",
     "any": "- Toutes -"
   },
   "placeholder": {

frontend/src/app-components/custom/MuiTooltipWrapper.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { Tooltip as MuiTooltip } from "@mui/material";
+import React, { ReactNode } from "react";
+
+type TooltipProps = {
+  children: ReactNode;
+  text: string;
+  position?:
+    | "top"
+    | "bottom"
+    | "left"
+    | "right"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end"
+    | "right-start"
+    | "right-end";
+};
+
+export const MuiTooltipWrapper: React.FC<TooltipProps> = ({
+  children,
+  text,
+  position = "top",
+}) => {
+  return (
+    <MuiTooltip title={text} placement={position} arrow>
+      <div>{children}</div>
+    </MuiTooltip>
+  );
+};

frontend/src/components/visual-editor/v2/Diagrams.tsx

@@ -1,11 +1,13 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
+
 import { Add, MoveUp } from "@mui/icons-material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
@@ -39,6 +41,7 @@ import {
 } from "react";
 import { useQueryClient } from "react-query";
 
+import { MuiTooltipWrapper } from "@/app-components/custom/MuiTooltipWrapper";
 import { DeleteDialog } from "@/app-components/dialogs";
 import { MoveDialog } from "@/app-components/dialogs/MoveDialog";
 import { CategoryDialog } from "@/components/categories/CategoryDialog";
@@ -612,26 +615,28 @@ const Diagrams = () => {
                 />
               ))}
             </Tabs>
-            <Button
-              sx={{
-                mt: "7px",
-                ml: "5px",
-                borderRadius: "0",
-                minHeight: "30px",
-
-                border: "1px solid #DDDDDD",
-                backgroundColor: "#F8F8F8",
-                borderBottom: "none",
-                width: "42px",
-                minWidth: "42px",
-              }}
-              onClick={(e) => {
-                addCategoryDialogCtl.openDialog();
-                e.preventDefault();
-              }}
-            >
-              <Add />
-            </Button>
+            <MuiTooltipWrapper text={t("label.add_new_flow")}>
+              <Button
+                sx={{
+                  mt: "7px",
+                  ml: "5px",
+                  borderRadius: "0",
+                  minHeight: "30px",
+
+                  border: "1px solid #DDDDDD",
+                  backgroundColor: "#F8F8F8",
+                  borderBottom: "none",
+                  width: "42px",
+                  minWidth: "42px",
+                }}
+                onClick={(e) => {
+                  addCategoryDialogCtl.openDialog();
+                  e.preventDefault();
+                }}
+                >
+                <Add />
+              </Button>
+            </MuiTooltipWrapper>
           </Grid>
           <Grid container>
             <Grid

frontend/src/layout/Header.tsx

@@ -1,11 +1,13 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
+
 import MenuIcon from "@mui/icons-material/Menu";
 import {
   Avatar,
@@ -19,6 +21,7 @@ import {
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
 import { FC, useEffect, useRef, useState } from "react";
 
+import { MuiTooltipWrapper } from "@/app-components/custom/MuiTooltipWrapper";
 import { HexabotLogo } from "@/app-components/logos/HexabotLogo";
 import { PopoverMenu } from "@/app-components/menus/PopoverMenu";
 import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages";
@@ -99,7 +102,9 @@ export const Header: FC<HeaderProps> = ({ isSideBarOpen, onToggleSidebar }) => {
                 onClick={onToggleSidebar}
                 isToggled={isSideBarOpen}
               >
-                <MenuIcon />
+                <MuiTooltipWrapper text={t("label.toggle_menu")} position="right">
+                  <MenuIcon />
+                </MuiTooltipWrapper>
               </StyledIconButton>
             ) : null}
           </Toolbar>
@@ -158,12 +163,14 @@ export const Header: FC<HeaderProps> = ({ isSideBarOpen, onToggleSidebar }) => {
                   {user?.email}
                 </Typography>
               </Box>
-              <Avatar
-                src={getAvatarSrc(apiUrl, EntityType.USER, user?.id).concat(
-                  `?${randomSeed}`,
-                )}
-                color={theme.palette.text.secondary}
-              />
+              <MuiTooltipWrapper text={t("label.profile")} position="bottom">
+                <Avatar
+                  src={getAvatarSrc(apiUrl, EntityType.USER, user?.id).concat(
+                    `?${randomSeed}`,
+                  )}
+                  color={theme.palette.text.secondary}
+                />
+              </MuiTooltipWrapper>
             </Box>
 
             {user ? (