k

web/src/app/chat/Refinement.tsx

@@ -23,14 +23,16 @@ export function useOrderedPhases(externalPhase: StreamingPhase) {
   const MIN_DELAY = 1000; // 0.5 seconds
 
   const getPhaseIndex = (phase: StreamingPhase) => PHASES_ORDER.indexOf(phase);
+  const finalPhaseIndex = useRef<number | null>(null);
 
   // Whenever externalPhase changes, add any missing steps into the queue
   useEffect(() => {
     setPhaseQueue((prevQueue) => {
       const lastDisplayed = displayedPhases[displayedPhases.length - 1];
-      const lastIndex = lastDisplayed
-        ? getPhaseIndex(lastDisplayed)
-        : getPhaseIndex(StreamingPhase.WAITING);
+      const lastIndex = finalPhaseIndex.current || 0;
+      //  lastDisplayed
+      //   ? getPhaseIndex(lastDisplayed)
+      //   : getPhaseIndex(StreamingPhase.WAITING);
 
       let targetPhase = externalPhase;
       let targetIndex = getPhaseIndex(targetPhase);
@@ -40,11 +42,19 @@ export function useOrderedPhases(externalPhase: StreamingPhase) {
         return prevQueue;
       }
 
+      finalPhaseIndex.current = targetIndex;
+
       // Otherwise, collect all missing phases from lastDisplayed+1 up to targetIndex
-      const missingPhases: StreamingPhase[] = [];
-      for (let i = lastIndex + 1; i <= targetIndex; i++) {
-        missingPhases.push(PHASES_ORDER[i]);
-      }
+      const missingPhases: StreamingPhase[] = PHASES_ORDER.slice(
+        0,
+        targetIndex + 1
+      );
+
+      // [];
+
+      // for (let i = lastIndex + 1; i <= targetIndex; i++) {
+      //   missingPhases= PHASES_ORDER[i]);
+      // }
       return [...prevQueue, ...missingPhases];
     });
   }, [externalPhase, displayedPhases]);
@@ -155,16 +165,17 @@ export function RefinemenetBadge({
               />
             </div>
           </TooltipTrigger>
-          <TooltipContent
-            onMouseEnter={() => setToolTipHovered(true)}
-            side="bottom"
-            align="start"
-            className="w-fit p-4 bg-white border-2 border-border shadow-lg rounded-md"
-          >
-            {/* If not done, show the "Refining" box + a chevron */}
+          {expanded && (
+            <TooltipContent
+              onMouseEnter={() => setToolTipHovered(true)}
+              side="bottom"
+              align="start"
+              className="w-fit p-4 bg-white border-2 border-border shadow-lg rounded-md"
+            >
+              {/* If not done, show the "Refining" box + a chevron */}
+
+              {/* Expanded area: each displayed phase in order */}
 
-            {/* Expanded area: each displayed phase in order */}
-            {expanded && (
               <div className="items-start flex flex-col gap-y-2">
                 {currentState !== StreamingPhase.WAITING ? (
                   Array.from(new Set(displayedPhases)).map((phase, index) => {
@@ -209,8 +220,8 @@ export function RefinemenetBadge({
                   </div>
                 )}
               </div>
-            )}
-          </TooltipContent>
+            </TooltipContent>
+          )}
         </div>
       </Tooltip>
     </TooltipProvider>
@@ -304,7 +315,10 @@ export function StatusRefinement({
         isImprovement ? (
           <TooltipProvider delayDuration={0}>
             <Tooltip open={toolTipHovered}>
-              <TooltipTrigger asChild>
+              <TooltipTrigger
+                onMouseLeave={() => setToolTipHovered(false)}
+                asChild
+              >
                 <Badge
                   // NOTE: This is a hack to make the badge slightly higher
                   className="cursor-pointer mt-[1px]"

web/src/app/chat/message/SourcesDisplay.tsx

@@ -15,6 +15,7 @@ interface SourcesDisplayProps {
   threeCols?: boolean;
   hideDocumentDisplay?: boolean;
   docSidebarToggled?: boolean;
+  setPresentingDocument: (document: OnyxDocument) => void;
 }
 
 const SourceCard: React.FC<{
@@ -55,6 +56,7 @@ export const SourcesDisplay: React.FC<SourcesDisplayProps> = ({
   animateEntrance = false,
   threeCols = false,
   hideDocumentDisplay = false,
+  setPresentingDocument,
   docSidebarToggled = false,
 }) => {
   const displayedDocuments = documents.slice(0, 5);
@@ -96,7 +98,7 @@ export const SourcesDisplay: React.FC<SourcesDisplayProps> = ({
         {displayedDocuments.map((doc, index) => (
           <div
             key={index}
-            onClick={() => openDocument(doc, () => {})}
+            onClick={() => openDocument(doc, setPresentingDocument)}
             className={`transition-opacity duration-300 ${
               animateEntrance ? "opacity-100" : "opacity-100"
             }`}

web/src/app/chat/message/StreamingMessages.ts

@@ -15,8 +15,8 @@ export const StreamingPhaseText: Record<StreamingPhase, string> = {
   [StreamingPhase.WAITING]: "Extracting key concepts",
   [StreamingPhase.SUB_QUERIES]: "Identifying additional questions",
   [StreamingPhase.CONTEXT_DOCS]: "Reading more documents",
-  [StreamingPhase.ANSWER]: "Generating refined answer",
   [StreamingPhase.EVALUATE]: "Evaluating new context",
+  [StreamingPhase.ANSWER]: "Generating refined answer",
   [StreamingPhase.COMPARE]: "Comparing results",
   [StreamingPhase.COMPLETE]: "Finished",
 };
@@ -25,8 +25,8 @@ export const PHASES_ORDER: StreamingPhase[] = [
   StreamingPhase.WAITING,
   StreamingPhase.SUB_QUERIES,
   StreamingPhase.CONTEXT_DOCS,
-  StreamingPhase.ANSWER,
   StreamingPhase.EVALUATE,
+  StreamingPhase.ANSWER,
   StreamingPhase.COMPARE,
   StreamingPhase.COMPLETE,
 ];

web/src/app/chat/message/SubQuestionsDisplay.tsx

@@ -747,6 +747,7 @@ const SubQuestionsDisplay: React.FC<SubQuestionsDisplayProps> = ({
 
       {shownDocuments && shownDocuments.length > 0 && (
         <SourcesDisplay
+          setPresentingDocument={setPresentingDocument}
           docSidebarToggled={docSidebarToggled}
           hideDocumentDisplay
           animateEntrance={true}

web/src/components/chat_search/sources/SourceCard.tsx

@@ -35,7 +35,7 @@ export default function SourceCard({
     <div
       key={doc.document_id}
       onClick={() => openDocument(doc, setPresentingDocument)}
-      className="cursor-pointer h-[80px] text-left overflow-hidden flex flex-col gap-0.5 rounded-lg px-3 py-2 hover:bg-background-dark/80 bg-background-dark/60 w-[200px]"
+      className="cursor-pointer h-[80px] text-left overflow-hidden flex flex-col gap-0.5 rounded-lg px-3 py-2 bg-[#f1eee8] hover:bg-[#ebe7de] w-[200px]"
     >
       <div className="line-clamp-1 font-semibold text-ellipsis text-text-900  flex h-6 items-center gap-2 text-sm">
         {doc.is_internet || doc.source_type === "web" ? (
@@ -105,7 +105,7 @@ export function SeeMoreBlock({
   return (
     <button
       onClick={toggleDocumentSelection}
-      className="max-w-[260px] min-w-[150px] h-[80px] p-3 bg-[#f1eee8] hover:bg-[#ebe7de] cursor-pointer rounded-lg flex flex-col items-start justify-between transition-opacity duration-300"
+      className="max-w-[260px]  min-w-[200px] h-[80px] p-3 bg-[#f1eee8]/40 border border-[#d8d0c0] hover:bg-[#ebe7de]/40 cursor-pointer rounded-lg flex flex-col items-start justify-between transition-opacity duration-300"
     >
       <div className="flex items-center gap-1">
         {iconsToRender.map((icon, index) =>
@@ -119,11 +119,6 @@ export function SeeMoreBlock({
             <WebResultIcon key={index} url={icon.data} size={14} />
           )
         )}
-        {totalSources > 3 && (
-          <span className="text-xs text-[#4a4a4a] font-medium">
-            +{totalSources - 3}
-          </span>
-        )}
       </div>
       <div className="text-text-darker text-xs font-semibold">
         {toggled ? "Hide Results" : "Show All"}