Merge pull request #339 from microsoft/PSL-BUG-16600

fix: Text file getting downloaded on click of details button

Author: Roopan-Microsoft

App/frontend-app/src/components/documentViewer/documentViewer.tsx

@@ -75,6 +75,7 @@ export function DocDialog(
     const [iframeKey, setIframeKey] = useState(0);
     const [isExpanded, setIsExpanded] = useState(false);
     const [clearedChatFlag, setClearChatFlag] = useState(clearChatFlag);
+    const [iframeSrc, setIframeSrc] = useState<string | undefined>(undefined);
     // const [aiKnowledgeMetadata, setAIKnowledgeMetadata] = useState<Document | null>(null);
 
 
@@ -90,6 +91,24 @@ export function DocDialog(
             setUrlWithSasToken(undefined);
         }
     }, [metadata]); // Only run when metadata changes
+
+    useEffect(() => {
+        if (metadata && metadata.fileName.endsWith(".txt")) {
+            fetch(metadata.document_url)
+                .then((response) => response.text())
+                .then((textContent) => {
+                    const blob = new Blob([textContent], { type: "text/plain" });
+                    const objectURL = URL.createObjectURL(blob);
+                    setIframeSrc(objectURL);
+
+                    // Cleanup the object URL when component unmounts or metadata changes
+                    return () => URL.revokeObjectURL(objectURL);
+                })
+                .catch((error) => console.error("Error fetching text file:", error));
+        } else {
+            setIframeSrc(metadata?.document_url);
+        }
+    }, [metadata]);
 
 
     const downloadFile = () => {
@@ -236,7 +255,7 @@ export function DocDialog(
                                 <IFrameComponent
                                     className="h-[100%]"
                                     metadata={metadata}
-                                    urlWithSasToken={urlWithSasToken}
+                                    urlWithSasToken={iframeSrc}
                                     iframeKey={iframeKey}
                                 />
                             </div>