Merge pull request #473 from microsoft/ryonsteele/6433-document-viewe…

…r-updates Add support to document viewer for more document types
microsoft · Jan 19, 2024 · a1a0b02 · a1a0b02
2 parents 9bb7c0d + 741e62b
commit a1a0b02
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 16 deletions.
diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -20,7 +20,9 @@
     "classnames": "^2.3.1",
     "nanoid": "3.3.4",
     "prop-types": "15.8.1",
-    "react-bootstrap": "^2.7.4"
+    "react-bootstrap": "^2.7.4",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^3.0.0"
   },
   "devDependencies": {
     "@types/dompurify": "^2.4.0",

diff --git a/app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx b/app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx
@@ -6,6 +6,8 @@ import { Pivot, PivotItem, Text } from "@fluentui/react";
 import { Label } from '@fluentui/react/lib/Label';
 import { Separator } from '@fluentui/react/lib/Separator';
 import DOMPurify from "dompurify";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm'
 
 import styles from "./AnalysisPanel.module.css";
 
@@ -28,6 +30,8 @@ const pivotItemDisabledStyle = { disabled: true, style: { color: "grey" } };
 
 export const AnalysisPanel = ({ answer, activeTab, activeCitation, sourceFile, pageNumber, citationHeight, className, onActiveTabChanged }: Props) => {
     const [activeCitationObj, setActiveCitationObj] = useState<ActiveCitation>();
+    const [markdownContent, setMarkdownContent] = useState('');
+    const [plainTextContent, setPlainTextContent] = useState('');
 
     const isDisabledThoughtProcessTab: boolean = !answer.thoughts;
     const isDisabledSupportingContentTab: boolean = !answer.data_points.length;
@@ -51,6 +55,36 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, sourceFile, p
         fetchActiveCitationObj();
     }, [activeCitation]);
 
+    useEffect(() => {
+        const fetchMarkdownContent = async () => {
+            try {
+                const response = await fetch(sourceFile!);
+                const content = await response.text();
+                setMarkdownContent(content);
+            } catch (error) {
+                console.error('Error fetching Markdown content:', error);
+            }
+        };
+
+        fetchMarkdownContent();
+    }, [sourceFile]);
+
+    useEffect(() => {
+        const fetchPlainTextContent = async () => {
+            try {
+                const response = await fetch(sourceFile!);
+                const content = await response.text();
+                setPlainTextContent(content);
+            } catch (error) {
+                console.error('Error fetching plain text content:', error);
+            }
+        };
+
+        if (["json", "txt", "xml"].includes(sourceFileExt)) {
+            fetchPlainTextContent();
+        }
+    }, [sourceFile, sourceFileExt]);
+
     return (
         <Pivot
             className={className}
@@ -78,31 +112,39 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, sourceFile, p
             >
                 <Pivot className={className}>
                     <PivotItem itemKey="indexedFile" headerText="Document Section">
-                        { activeCitationObj === undefined ? (
+                        {activeCitationObj === undefined ? (
                             <Text>Loading...</Text>
                         ) : (
                             <div>
-                            <Separator>Metadata</Separator>
-                            <Label>File Name</Label><Text>{activeCitationObj.file_name}</Text>
-                            <Label>File URI</Label><Text>{activeCitationObj.file_uri}</Text>
-                            <Label>Title</Label><Text>{activeCitationObj.title}</Text>
-                            <Label>Section</Label><Text>{activeCitationObj.section}</Text>
-                            <Label>Page Number(s)</Label><Text>{activeCitationObj.pages?.join(",")}</Text>
-                            <Label>Token Count</Label><Text>{activeCitationObj.token_count}</Text>
-                            <Separator>Content</Separator>
-                            <Label>Content</Label><Text>{activeCitationObj.content}</Text>
+                                <Separator>Metadata</Separator>
+                                <Label>File Name</Label><Text>{activeCitationObj.file_name}</Text>
+                                <Label>File URI</Label><Text>{activeCitationObj.file_uri}</Text>
+                                <Label>Title</Label><Text>{activeCitationObj.title}</Text>
+                                <Label>Section</Label><Text>{activeCitationObj.section}</Text>
+                                <Label>Page Number(s)</Label><Text>{activeCitationObj.pages?.join(",")}</Text>
+                                <Label>Token Count</Label><Text>{activeCitationObj.token_count}</Text>
+                                <Separator>Content</Separator>
+                                <Label>Content</Label><Text>{activeCitationObj.content}</Text>
                             </div>
                         )}
                     </PivotItem>
                     <PivotItem itemKey="rawFile" headerText="Document">
-                        { sourceFileExt === "pdf" ? (
-                            //use object tag for pdfs because iframe does not support page numbers
+                        {["docx", "xlsx", "pptx"].includes(sourceFileExt) ? (
+                            // Treat other Office formats like "xlsx" for the Office Online Viewer
+                            <iframe title="Source File" src={'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(sourceFile as string) + "&action=embedview&wdStartOn=" + pageNumber} width="100%" height={citationHeight} />
+                        ) : sourceFileExt === "pdf" ? (
+                            // Use object tag for PDFs because iframe does not support page numbers
                             <object data={sourceFile + "#page=" + pageNumber} type="application/pdf" width="100%" height={citationHeight} />
-                        ) : ( sourceFileExt === "docx" ? (
-                            <iframe title="Source File" src={'https://view.officeapps.live.com/op/view.aspx?src='+encodeURIComponent(sourceFile as string)+"&action=embedview&wdStartOn="+pageNumber} width="100%" height={citationHeight} />
+                        ) : sourceFileExt === "md" ? (
+                            // Render Markdown content using react-markdown
+                            <ReactMarkdown>{markdownContent}</ReactMarkdown>
+                        ) : ["json", "txt", "xml"].includes(sourceFileExt) ? (
+                            // Render plain text content
+                            <pre>{plainTextContent}</pre>
                         ) : (
+                            // Default to iframe for other file types
                             <iframe title="Source File" src={sourceFile} width="100%" height={citationHeight} />
-                        )) }
+                        )}
                     </PivotItem>
                 </Pivot>
             </PivotItem>