Ensure regenerate has dropdown too (#2797)

* ensure regenerate has dropdown too

* ensure applied to all

* nit

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}

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>

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"} ${