fix: Add fallback message for preview display issues with tables and …

…special formatting (#1173) Co-authored-by: Pavan Kumar <v-kupavan.microsoft.com>
Azure-Samples · Jul 26, 2024 · 718d6b5 · 718d6b5
1 parent fd8619a
commit 718d6b5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/code/backend/batch/utilities/document_loading/word_document.py b/code/backend/batch/utilities/document_loading/word_document.py
@@ -24,10 +24,10 @@ def _download_document(self, document_url: str) -> BytesIO:
         return file
 
     def _get_opening_tag(self, heading_level: int) -> str:
-        return f"<{self.doc_headings_to_markdown_tags.get(f'{heading_level}', '')}>"
+        return f"<{self.doc_headings_to_markdown_tags.get(f'{heading_level}', 'p')}>"
 
     def _get_closing_tag(self, heading_level: int) -> str:
-        return f"</{self.doc_headings_to_markdown_tags.get(f'{heading_level}', '')}>"
+        return f"</{self.doc_headings_to_markdown_tags.get(f'{heading_level}', 'p')}>"
 
     def load(self, document_url: str) -> List[SourceDocument]:
         output = ""

diff --git a/code/frontend/src/pages/chat/Chat.module.css b/code/frontend/src/pages/chat/Chat.module.css
@@ -249,6 +249,15 @@
     flex-grow: 0;
 }
 
+.citationPanelDisclaimer {
+    font-family: "Segoe UI";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    display: flex;
+    color: #707070;
+}
+
 .citationPanelContent h1 {
 
     line-height: 30px;
@@ -297,6 +306,13 @@
     }
 }
 
+.mobileCitationPanelDisclaimer {
+    @media screen and (max-width: 600px) {
+        font-weight: 250;
+        font-size: 10px;
+    }
+}
+
 @media screen and (max-width: 600px) {
     h1 {
         font-weight: 300;

diff --git a/code/frontend/src/pages/chat/Chat.tsx b/code/frontend/src/pages/chat/Chat.tsx
@@ -381,6 +381,7 @@ const Chat = () => {
               />
             </Stack>
             <h5 className={`${styles.citationPanelTitle} ${styles.mobileCitationPanelTitle}`}>{activeCitation[2]}</h5>
+            <div className={`${styles.citationPanelDisclaimer} ${styles.mobileCitationPanelDisclaimer}`}>Tables, images, and other special formatting not shown in this preview. Please follow the link to review the original document.</div>
             <ReactMarkdown
               className={`${styles.citationPanelContent} ${styles.mobileCitationPanelContent}`}
               children={activeCitation[0]}