Tooltips for workspace and threads (#4500)

* Tooltips for workspace and threads

* refactor tooltips

* add comp on desktop only

* dev

Author: timothycarambat

.github/workflows/dev-build.yaml

@@ -6,7 +6,7 @@ concurrency:
 
 on:
   push:
-    branches: ['agentic-streaming'] # put your current branch to create a build. Core team only.
+    branches: ['4499-tooltips'] # put your current branch to create a build. Core team only.
     paths-ignore:
       - '**.md'
       - 'cloud-deployments/*'

frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx

@@ -91,6 +91,8 @@ export default function ThreadItem({
             href={
               window.location.pathname === linkTo || ctrlPressed ? "#" : linkTo
             }
+            data-tooltip-id="workspace-thread-name"
+            data-tooltip-content={thread.name}
             className="w-full pl-2 py-1 overflow-hidden"
             aria-current={isActive ? "page" : ""}
           >

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -106,6 +106,8 @@ export default function ActiveWorkspaces() {
                               ? null
                               : paths.workspace.chat(workspace.slug)
                           }
+                          data-tooltip-id="workspace-name"
+                          data-tooltip-content={workspace.name}
                           aria-current={isActive ? "page" : ""}
                           className={`
                             transition-all duration-[200ms]

frontend/src/components/Sidebar/index.jsx

@@ -13,6 +13,8 @@ import paths from "@/utils/paths";
 import { useTranslation } from "react-i18next";
 import { useSidebarToggle, ToggleSidebarButton } from "./SidebarToggle";
 import SearchBox from "./SearchBox";
+import { Tooltip } from "react-tooltip";
+import { createPortal } from "react-dom";
 
 export default function Sidebar() {
   const { user } = useUser();
@@ -24,7 +26,6 @@ export default function Sidebar() {
     showModal: showNewWsModal,
     hideModal: hideNewWsModal,
   } = useNewWorkspaceModal();
-  const { t } = useTranslation();
 
   return (
     <>
@@ -72,6 +73,7 @@ export default function Sidebar() {
         </div>
         {showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
       </div>
+      <WorkspaceAndThreadTooltips />
     </>
   );
 }
@@ -87,7 +89,6 @@ export function SidebarMobileHeader() {
     hideModal: hideNewWsModal,
   } = useNewWorkspaceModal();
   const { user } = useUser();
-  const { t } = useTranslation();
 
   useEffect(() => {
     // Darkens the rest of the screen
@@ -203,3 +204,23 @@ function NewWorkspaceButton({ user, showNewWsModal }) {
     </div>
   );
 }
+
+function WorkspaceAndThreadTooltips() {
+  return createPortal(
+    <React.Fragment>
+      <Tooltip
+        id="workspace-name"
+        place="right"
+        delayShow={800}
+        className="tooltip !text-xs z-99"
+      />
+      <Tooltip
+        id="workspace-thread-name"
+        place="right"
+        delayShow={800}
+        className="tooltip !text-xs z-99"
+      />
+    </React.Fragment>,
+    document.body
+  );
+}