[Feature] Add Boolean to sanitize answers in the frontend (#693)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>
microsoft · Mar 13, 2024 · e9fc0ae · e9fc0ae
1 parent 98d6d50
commit e9fc0ae
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -227,6 +227,7 @@ Note: settings starting with `AZURE_SEARCH` are only needed when using Azure Ope
 |UI_CHAT_DESCRIPTION|This chatbot is configured to answer your questions| Description (chat window)
 |UI_FAVICON|| Defaults to Contoso favicon. Configure the URL to your favicon to modify.
 |UI_SHOW_SHARE_BUTTON|True|Share button (right-top)
+|SANITIZE_ANSWER|False|Whether to sanitize the answer from Azure OpenAI. Set to True to remove any HTML tags from the response.|
 
 ## Contributing
 

diff --git a/app.py b/app.py
@@ -170,6 +170,7 @@ async def assets(path):
 # Frontend Settings via Environment Variables
 AUTH_ENABLED = os.environ.get("AUTH_ENABLED", "true").lower() == "true"
 CHAT_HISTORY_ENABLED = AZURE_COSMOSDB_ACCOUNT and AZURE_COSMOSDB_DATABASE and AZURE_COSMOSDB_CONVERSATIONS_CONTAINER
+SANITIZE_ANSWER = os.environ.get("SANITIZE_ANSWER", "false").lower() == "true"
 frontend_settings = { 
     "auth_enabled": AUTH_ENABLED, 
     "feedback_enabled": AZURE_COSMOSDB_ENABLE_FEEDBACK and CHAT_HISTORY_ENABLED,
@@ -180,7 +181,8 @@ async def assets(path):
         "chat_title": UI_CHAT_TITLE,
         "chat_description": UI_CHAT_DESCRIPTION,
         "show_share_button": UI_SHOW_SHARE_BUTTON
-    }
+    },
+    "sanitize_answer": SANITIZE_ANSWER
 }
 
 def should_use_data():

diff --git a/frontend/src/api/models.ts b/frontend/src/api/models.ts
@@ -115,6 +115,7 @@ export type FrontendSettings = {
     auth_enabled?: string | null;
     feedback_enabled?: string | null;
     ui?: UI;
+    sanitize_answer?: boolean;
 }
 
 export enum Feedback {

diff --git a/frontend/src/components/Answer/Answer.tsx b/frontend/src/components/Answer/Answer.tsx
@@ -43,6 +43,7 @@ export const Answer = ({
     const [negativeFeedbackList, setNegativeFeedbackList] = useState<Feedback[]>([]);
     const appStateContext = useContext(AppStateContext)
     const FEEDBACK_ENABLED = appStateContext?.state.frontendSettings?.feedback_enabled && appStateContext?.state.isCosmosDBAvailable?.cosmosDB; 
+    const SANITIZE_ANSWER = appStateContext?.state.frontendSettings?.sanitize_answer 
 
     const handleChevronClick = () => {
         setChevronIsExpanded(!chevronIsExpanded);
@@ -187,7 +188,7 @@ export const Answer = ({
                             <ReactMarkdown
                                 linkTarget="_blank"
                                 remarkPlugins={[remarkGfm, supersub]}
-                                children={DOMPurify.sanitize(parsedAnswer.markdownFormatText, {ALLOWED_TAGS: XSSAllowTags})}
+                                children={SANITIZE_ANSWER ? DOMPurify.sanitize(parsedAnswer.markdownFormatText, {ALLOWED_TAGS: XSSAllowTags}) : parsedAnswer.markdownFormatText}
                                 className={styles.answerText}
                             />
                         </Stack.Item>

diff --git a/static/assets/index-cb20ac21.js → static/assets/index-3718dd47.js b/static/assets/index-cb20ac21.js → static/assets/index-3718dd47.js
diff --git a/static/assets/index-3718dd47.js.map b/static/assets/index-3718dd47.js.map
diff --git a/static/assets/index-cb20ac21.js.map b/static/assets/index-cb20ac21.js.map
diff --git a/static/index.html b/static/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/x-icon" href="{{ favicon }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="/assets/index-cb20ac21.js"></script>
+    <script type="module" crossorigin src="/assets/index-3718dd47.js"></script>
     <link rel="stylesheet" href="/assets/index-0774d4f6.css">
   </head>
   <body>