From 718d6b5a48e9fe5b69d2972919e38ab191d4e990 Mon Sep 17 00:00:00 2001
From: Pavan-Microsoft <v-kupavan@microsoft.com>
Date: Fri, 26 Jul 2024 18:13:31 +0530
Subject: [PATCH] fix: Add fallback message for preview display issues with
 tables and special formatting (#1173)

Co-authored-by: Pavan Kumar <v-kupavan.microsoft.com>
---
 .../utilities/document_loading/word_document.py  |  4 ++--
 code/frontend/src/pages/chat/Chat.module.css     | 16 ++++++++++++++++
 code/frontend/src/pages/chat/Chat.tsx            |  1 +
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/code/backend/batch/utilities/document_loading/word_document.py b/code/backend/batch/utilities/document_loading/word_document.py
index 6e59293ab..33d4cc3f4 100644
--- 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
index a5cc97e9f..752f960c9 100644
--- 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
index d3964aeea..c73a37b1a 100644
--- 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]}