Fix popup overlap

web/src/components/admin/connectors/Popup.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 export interface PopupSpec {
   message: string;
@@ -17,9 +17,17 @@ export const Popup: React.FC<PopupSpec> = ({ message, type }) => (
 
 export const usePopup = () => {
   const [popup, setPopup] = useState<PopupSpec | null>(null);
+  // using NodeJS.Timeout because setTimeout in NodeJS returns a different type than in browsers
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
   const setPopupWithExpiration = (popupSpec: PopupSpec | null) => {
+    // Clear any previous timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
     setPopup(popupSpec);
-    setTimeout(() => {
+    timeoutRef.current = setTimeout(() => {
       setPopup(null);
     }, 4000);
   };

web/src/components/search/DocumentDisplay.tsx

@@ -2,18 +2,19 @@ import { DanswerDocument } from "@/lib/search/interfaces";
 import { DocumentFeedbackBlock } from "./DocumentFeedbackBlock";
 import { getSourceIcon } from "../source";
 import { useState } from "react";
-import { usePopup } from "../admin/connectors/Popup";
+import { PopupSpec } from "../admin/connectors/Popup";
 
 interface DocumentDisplayProps {
   document: DanswerDocument;
   queryEventId: number | null;
+  setPopup: (popupSpec: PopupSpec | null) => void;
 }
 
 export const DocumentDisplay = ({
   document,
   queryEventId,
+  setPopup,
 }: DocumentDisplayProps) => {
-  const { popup, setPopup } = usePopup();
   const [isHovered, setIsHovered] = useState(false);
 
   return (
@@ -25,7 +26,6 @@ export const DocumentDisplay = ({
       }}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {popup}
       <div className="flex relative">
         <div className="absolute -left-10 top-2/4 -translate-y-2/4 w-10 flex">
           <div

web/src/components/search/DocumentFeedbackBlock.tsx

@@ -70,7 +70,6 @@ const DocumentFeedback = ({
           queryId,
           feedbackType
         );
-        console.log(errorMsg);
         if (!errorMsg) {
           setPopup({
             message: "Thanks for your feedback!",

web/src/components/search/QAFeedback.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { PopupSpec, usePopup } from "../admin/connectors/Popup";
+import { PopupSpec } from "../admin/connectors/Popup";
 import { ThumbsDownIcon, ThumbsUpIcon } from "../icons/icons";
 
 type Feedback = "like" | "dislike";
@@ -71,14 +71,15 @@ const QAFeedback = ({
 
 interface QAFeedbackBlockProps {
   queryId: number;
+  setPopup: (popupSpec: PopupSpec | null) => void;
 }
 
-export const QAFeedbackBlock = ({ queryId }: QAFeedbackBlockProps) => {
+export const QAFeedbackBlock = ({
-  const { popup, setPopup } = usePopup();
+  queryId,
-
+  setPopup,
+}: QAFeedbackBlockProps) => {
   return (
     <div className="flex">
-      {popup}
       <QAFeedback queryId={queryId} setPopup={setPopup} feedbackType="like" />
       <div className="ml-2">
         <QAFeedback

web/src/components/search/SearchResultsDisplay.tsx

@@ -18,7 +18,8 @@ import {
   getAIThoughtsIsOpenSavedValue,
   setAIThoughtsIsOpenSavedValue,
 } from "@/lib/search/aiThoughtUtils";
-import { Grid, ThreeDots } from "react-loader-spinner";
+import { ThreeDots } from "react-loader-spinner";
+import { usePopup } from "../admin/connectors/Popup";
 
 const removeDuplicateDocs = (documents: DanswerDocument[]) => {
   const seen = new Set<string>();
@@ -45,6 +46,7 @@ export const SearchResultsDisplay: React.FC<SearchResultsDisplayProps> = ({
   isFetching,
   defaultOverrides,
 }) => {
+  const { popup, setPopup } = usePopup();
   const [isAIThoughtsOpen, setIsAIThoughtsOpen] = React.useState<boolean>(
     getAIThoughtsIsOpenSavedValue()
   );
@@ -106,6 +108,7 @@ export const SearchResultsDisplay: React.FC<SearchResultsDisplayProps> = ({
 
   return (
     <>
+      {popup}
       {shouldDisplayQA && (
         <div className="min-h-[16rem] p-4 border-2 rounded-md border-gray-700 relative">
           <div>
@@ -150,7 +153,10 @@ export const SearchResultsDisplay: React.FC<SearchResultsDisplayProps> = ({
 
                 {searchResponse.queryEventId !== null && (
                   <div className="absolute right-3 bottom-3">
-                    <QAFeedbackBlock queryId={searchResponse.queryEventId} />
+                    <QAFeedbackBlock
+                      queryId={searchResponse.queryEventId}
+                      setPopup={setPopup}
+                    />
                   </div>
                 )}
               </div>
@@ -169,6 +175,7 @@ export const SearchResultsDisplay: React.FC<SearchResultsDisplayProps> = ({
               key={document.document_id}
               document={document}
               queryEventId={queryEventId}
+              setPopup={setPopup}
             />
           ))}
         </div>