From a49d69ef9a28d766d7949d55af22eb131107cdfb Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 14 Jul 2025 12:30:52 -0700
Subject: [PATCH 1/3] migrate font size menu to embedded tooltip modal

---
 .../PromptInput/TextSizeMenu/index.jsx        | 173 ++++++++----------
 1 file changed, 75 insertions(+), 98 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
index 27e2c4154a8..f58c81be1e1 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
@@ -1,140 +1,117 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 import { TextT } from "@phosphor-icons/react";
 import { Tooltip } from "react-tooltip";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "@/hooks/useTheme";
 
 export default function TextSizeButton() {
-  const [showTextSizeMenu, setShowTextSizeMenu] = useState(false);
-  const buttonRef = useRef(null);
+  const tooltipRef = useRef(null);
   const { t } = useTranslation();
+  const { theme } = useTheme();
+
+  const toggleTooltip = () => {
+    if (!tooltipRef.current) return;
+    tooltipRef.current.isOpen ? tooltipRef.current.close() : tooltipRef.current.open();
+  };
 
   return (
     <>
       <div
-        ref={buttonRef}
         id="text-size-btn"
         data-tooltip-id="tooltip-text-size-btn"
-        data-tooltip-content={t("chat_window.text_size")}
         aria-label={t("chat_window.text_size")}
-        onClick={() => setShowTextSizeMenu(!showTextSizeMenu)}
-        className={`border-none relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer ${
-          showTextSizeMenu ? "!opacity-100" : ""
-        }`}
+        onClick={toggleTooltip}
+        className="border-none flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer"
       >
         <TextT
           color="var(--theme-sidebar-footer-icon-fill)"
           weight="fill"
           className="w-[22px] h-[22px] pointer-events-none text-white"
         />
-        <Tooltip
-          id="tooltip-text-size-btn"
-          place="top"
-          delayShow={300}
-          className="tooltip !text-xs z-99"
-        />
       </div>
-      <TextSizeMenu
-        showing={showTextSizeMenu}
-        setShowing={setShowTextSizeMenu}
-        buttonRef={buttonRef}
-      />
+      <Tooltip
+        ref={tooltipRef}
+        id="tooltip-text-size-btn"
+        place="top"
+        opacity={1}
+        clickable={true}
+        delayShow={300}
+        delayHide={800}
+        arrowColor={
+          theme === "light"
+            ? "var(--theme-modal-border)"
+            : "var(--theme-bg-primary)"
+        }
+        className="z-99 !w-[140px] !bg-theme-bg-primary !px-[5px] !rounded-lg !pointer-events-auto light:border-2 light:border-theme-modal-border"
+      >
+        <TextSizeMenu tooltipRef={tooltipRef} />
+      </Tooltip>
     </>
   );
 }
 
-function TextSizeMenu({ showing, setShowing, buttonRef }) {
+function TextSizeMenu({ tooltipRef }) {
   const { t } = useTranslation();
-  const formRef = useRef(null);
   const [selectedSize, setSelectedSize] = useState(
     window.localStorage.getItem("anythingllm_text_size") || "normal"
   );
 
-  useEffect(() => {
-    function listenForOutsideClick() {
-      if (!showing || !formRef.current) return false;
-      document.addEventListener("click", closeIfOutside);
-    }
-    listenForOutsideClick();
-  }, [showing, formRef.current]);
-
-  const closeIfOutside = ({ target }) => {
-    if (target.id === "text-size-btn") return;
-    const isOutside = !formRef?.current?.contains(target);
-    if (!isOutside) return;
-    setShowing(false);
-  };
-
   const handleTextSizeChange = (size) => {
     setSelectedSize(size);
     window.localStorage.setItem("anythingllm_text_size", size);
     window.dispatchEvent(new CustomEvent("textSizeChange", { detail: size }));
+    tooltipRef.current?.close();
   };
 
-  if (!buttonRef.current) return null;
-
   return (
-    <div hidden={!showing}>
-      <div
-        ref={formRef}
-        className="absolute bottom-16 -ml-8 w-[140px] p-2 bg-theme-action-menu-bg rounded-lg shadow-md flex flex-col justify-center items-start gap-2 z-50"
+    <div className="flex flex-col justify-start items-stretch gap-1 p-2">
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          handleTextSizeChange("small");
+        }}
+        className={`border-none w-full hover:cursor-pointer px-2 py-2 rounded-md flex items-center group ${
+          selectedSize === "small"
+            ? "bg-theme-action-menu-item-hover"
+            : "hover:bg-theme-action-menu-item-hover"
+        }`}
       >
-        <button
-          onClick={(e) => {
-            e.preventDefault();
-            setShowing(false);
-            handleTextSizeChange("small");
-          }}
-          className={`border-none w-full hover:cursor-pointer px-2 py-1 rounded-md flex flex-col justify-start group ${
-            selectedSize === "small"
-              ? "bg-theme-action-menu-item-hover"
-              : "hover:bg-theme-action-menu-item-hover"
-          }`}
-        >
-          <div className="w-full flex-col text-left flex pointer-events-none">
-            <div className="text-theme-text-primary text-xs">
-              {t("chat_window.small")}
-            </div>
-          </div>
-        </button>
+        <div className="text-theme-text-primary text-sm">
+          {t("chat_window.small")}
+        </div>
+      </button>
 
-        <button
-          onClick={(e) => {
-            e.preventDefault();
-            setShowing(false);
-            handleTextSizeChange("normal");
-          }}
-          className={`border-none w-full hover:cursor-pointer px-2 py-1 rounded-md flex flex-col justify-start group ${
-            selectedSize === "normal"
-              ? "bg-theme-action-menu-item-hover"
-              : "hover:bg-theme-action-menu-item-hover"
-          }`}
-        >
-          <div className="w-full flex-col text-left flex pointer-events-none">
-            <div className="text-theme-text-primary text-sm">
-              {t("chat_window.normal")}
-            </div>
-          </div>
-        </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          handleTextSizeChange("normal");
+        }}
+        className={`border-none w-full hover:cursor-pointer px-2 py-2 rounded-md flex items-center group ${
+          selectedSize === "normal"
+            ? "bg-theme-action-menu-item-hover"
+            : "hover:bg-theme-action-menu-item-hover"
+        }`}
+      >
+        <div className="text-theme-text-primary text-sm">
+          {t("chat_window.normal")}
+        </div>
+      </button>
 
-        <button
-          onClick={(e) => {
-            e.preventDefault();
-            setShowing(false);
-            handleTextSizeChange("large");
-          }}
-          className={`border-none w-full hover:cursor-pointer px-2 py-1 rounded-md flex flex-col justify-start group ${
-            selectedSize === "large"
-              ? "bg-theme-action-menu-item-hover"
-              : "hover:bg-theme-action-menu-item-hover"
-          }`}
-        >
-          <div className="w-full flex-col text-left flex pointer-events-none">
-            <div className="text-theme-text-primary text-[16px]">
-              {t("chat_window.large")}
-            </div>
-          </div>
-        </button>
-      </div>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          handleTextSizeChange("large");
+        }}
+        className={`border-none w-full hover:cursor-pointer px-2 py-2 rounded-md flex items-center group ${
+          selectedSize === "large"
+            ? "bg-theme-action-menu-item-hover"
+            : "hover:bg-theme-action-menu-item-hover"
+        }`}
+      >
+        <div className="text-theme-text-primary text-sm">
+          {t("chat_window.large")}
+        </div>
+      </button>
     </div>
   );
 }

From cc08d8358ebd0f02accd0094495d4ac557e57da0 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 14 Jul 2025 12:31:18 -0700
Subject: [PATCH 2/3] lint

---
 .../ChatContainer/PromptInput/TextSizeMenu/index.jsx          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
index f58c81be1e1..77f2886bc8c 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
@@ -11,7 +11,9 @@ export default function TextSizeButton() {
 
   const toggleTooltip = () => {
     if (!tooltipRef.current) return;
-    tooltipRef.current.isOpen ? tooltipRef.current.close() : tooltipRef.current.open();
+    tooltipRef.current.isOpen
+      ? tooltipRef.current.close()
+      : tooltipRef.current.open();
   };
 
   return (

From c84ce221bb2580e121c3116c48c6ae19ed50ab8f Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 14 Jul 2025 12:49:08 -0700
Subject: [PATCH 3/3] fix text size menu ui

---
 .../ChatContainer/PromptInput/TextSizeMenu/index.jsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
index 77f2886bc8c..d2a2359340f 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
@@ -78,7 +78,7 @@ function TextSizeMenu({ tooltipRef }) {
             : "hover:bg-theme-action-menu-item-hover"
         }`}
       >
-        <div className="text-theme-text-primary text-sm">
+        <div className="text-theme-text-primary text-xs">
           {t("chat_window.small")}
         </div>
       </button>
@@ -110,7 +110,7 @@ function TextSizeMenu({ tooltipRef }) {
             : "hover:bg-theme-action-menu-item-hover"
         }`}
       >
-        <div className="text-theme-text-primary text-sm">
+        <div className="text-theme-text-primary text-[16px]">
           {t("chat_window.large")}
         </div>
       </button>