From da46f611237eeae13725a9b31af62411f969b702 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Tue, 15 Oct 2024 10:09:13 -0700
Subject: [PATCH] Ensure regenerate has dropdown too (#2797)

* ensure regenerate has dropdown too

* ensure applied to all

* nit
---
 web/src/app/chat/RegenerateOption.tsx        | 14 +++++-
 web/src/app/chat/message/Messages.tsx        | 46 +++++++++++++++-----
 web/src/components/tooltip/CustomTooltip.tsx |  3 ++
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/web/src/app/chat/RegenerateOption.tsx b/web/src/app/chat/RegenerateOption.tsx
index f28a83b03fae..8a9234b0a23c 100644
--- a/web/src/app/chat/RegenerateOption.tsx
+++ b/web/src/app/chat/RegenerateOption.tsx
@@ -24,6 +24,7 @@ export function RegenerateDropdown({
   side,
   maxHeight,
   alternate,
+  onDropdownVisibleChange,
 }: {
   alternate?: string;
   options: StringOrNumberOption[];
@@ -32,9 +33,15 @@ export function RegenerateDropdown({
   includeDefault?: boolean;
   side?: "top" | "right" | "bottom" | "left";
   maxHeight?: string;
+  onDropdownVisibleChange: (isVisible: boolean) => void;
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
+  const toggleDropdownVisible = (isVisible: boolean) => {
+    setIsOpen(isVisible);
+    onDropdownVisibleChange(isVisible);
+  };
+
   const Dropdown = (
     <div
       className={`
@@ -81,9 +88,9 @@ export function RegenerateDropdown({
   return (
     <Popover
       open={isOpen}
-      onOpenChange={(open) => setIsOpen(open)}
+      onOpenChange={toggleDropdownVisible}
       content={
-        <div onClick={() => setIsOpen(!isOpen)}>
+        <div onClick={() => toggleDropdownVisible(!isOpen)}>
           {!alternate ? (
             <Hoverable size={16} icon={StarFeedback as IconType} />
           ) : (
@@ -109,11 +116,13 @@ export default function RegenerateOption({
   regenerate,
   overriddenModel,
   onHoverChange,
+  onDropdownVisibleChange,
 }: {
   selectedAssistant: Persona;
   regenerate: (modelOverRide: LlmOverride) => Promise<void>;
   overriddenModel?: string;
   onHoverChange: (isHovered: boolean) => void;
+  onDropdownVisibleChange: (isVisible: boolean) => void;
 }) {
   const llmOverrideManager = useLlmOverride();
 
@@ -164,6 +173,7 @@ export default function RegenerateOption({
       onMouseLeave={() => onHoverChange(false)}
     >
       <RegenerateDropdown
+        onDropdownVisibleChange={onDropdownVisibleChange}
         alternate={overriddenModel}
         options={llmOptions}
         selected={currentModelName}
diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index 7a8a47ced549..56203cb06fcc 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -195,6 +195,8 @@ export const AIMessage = ({
   const finalContent = processContent(content as string);
 
   const [isRegenerateHovered, setIsRegenerateHovered] = useState(false);
+  const [isRegenerateDropdownVisible, setIsRegenerateDropdownVisible] =
+    useState(false);
   const { isHovering, trackedElementRef, hoverElementRef } = useMouseTracking();
 
   const settings = useContext(SettingsContext);
@@ -522,12 +524,22 @@ export const AIMessage = ({
                             />
                           </CustomTooltip>
                           {regenerate && (
-                            <RegenerateOption
-                              onHoverChange={setIsRegenerateHovered}
-                              selectedAssistant={currentPersona!}
-                              regenerate={regenerate}
-                              overriddenModel={overriddenModel}
-                            />
+                            <CustomTooltip
+                              disabled={isRegenerateDropdownVisible}
+                              showTick
+                              line
+                              content="Regenerate!"
+                            >
+                              <RegenerateOption
+                                onDropdownVisibleChange={
+                                  setIsRegenerateDropdownVisible
+                                }
+                                onHoverChange={setIsRegenerateHovered}
+                                selectedAssistant={currentPersona!}
+                                regenerate={regenerate}
+                                overriddenModel={overriddenModel}
+                              />
+                            </CustomTooltip>
                           )}
                         </TooltipGroup>
                       </div>
@@ -587,12 +599,22 @@ export const AIMessage = ({
                             />
                           </CustomTooltip>
                           {regenerate && (
-                            <RegenerateOption
-                              selectedAssistant={currentPersona!}
-                              regenerate={regenerate}
-                              overriddenModel={overriddenModel}
-                              onHoverChange={setIsRegenerateHovered}
-                            />
+                            <CustomTooltip
+                              disabled={isRegenerateDropdownVisible}
+                              showTick
+                              line
+                              content="Regenerate!"
+                            >
+                              <RegenerateOption
+                                selectedAssistant={currentPersona!}
+                                onDropdownVisibleChange={
+                                  setIsRegenerateDropdownVisible
+                                }
+                                regenerate={regenerate}
+                                overriddenModel={overriddenModel}
+                                onHoverChange={setIsRegenerateHovered}
+                              />
+                            </CustomTooltip>
                           )}
                         </TooltipGroup>
                       </div>
diff --git a/web/src/components/tooltip/CustomTooltip.tsx b/web/src/components/tooltip/CustomTooltip.tsx
index 2f4ca2d12548..52a98d8aad61 100644
--- a/web/src/components/tooltip/CustomTooltip.tsx
+++ b/web/src/components/tooltip/CustomTooltip.tsx
@@ -46,6 +46,7 @@ export const CustomTooltip = ({
   showTick = false,
   delay = 500,
   position = "bottom",
+  disabled = false,
 }: {
   medium?: boolean;
   content: string | ReactNode;
@@ -58,6 +59,7 @@ export const CustomTooltip = ({
   wrap?: boolean;
   citation?: boolean;
   position?: "top" | "bottom";
+  disabled?: boolean;
 }) => {
   const [isVisible, setIsVisible] = useState(false);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
@@ -119,6 +121,7 @@ export const CustomTooltip = ({
         {children}
       </span>
       {isVisible &&
+        !disabled &&
         createPortal(
           <div
             className={`min-w-8 fixed z-[1000] ${citation ? "max-w-[350px]" : "w-40"} ${