updated package .json and update code in answer.tsx and citationPanel.tsx

Author: Rohini-Microsoft

ClientAdvisor/App/frontend/package.json

@@ -29,7 +29,7 @@
     "react-syntax-highlighter": "^15.6.1",
     "react-uuid": "^2.0.0",
     "rehype-raw": "^7.0.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "remark-supersub": "^1.0.0",
     "undici": "^7.2.0"
   },
@@ -49,15 +49,15 @@
     "@types/react-dom": "^18.0.10",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/testing-library__user-event": "^4.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
-    "@typescript-eslint/parser": "^8.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
     "@vitejs/plugin-react": "^4.3.4",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-n": "^17.15.1",
+    "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-react": "^7.37.2",

ClientAdvisor/App/frontend/src/components/Answer/Answer.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useContext, useEffect, useMemo, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown, { Components, Options } from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { nord } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { Checkbox, DefaultButton, Dialog, FontIcon, Stack, Text } from '@fluentui/react'
@@ -228,19 +228,38 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
     )
   }
 
-  const components = {
-    code({ node, ...props }: { node: any;[key: string]: any }) {
-      let language
-      if (props.className) {
-        const match = props.className.match(/language-(\w+)/)
-        language = match ? match[1] : undefined
+  const components: Components = {
+    a: ({ href, children, ...props }) => (
+      <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </a>
+    ),
+    code({ inline, className, children, ...props }: { 
+      inline?: boolean; 
+      className?: string; 
+      children?: React.ReactNode; 
+      [key: string]: any 
+    }) {
+      const match = /language-(\w+)/.exec(className || '');
+      // Handle inline and block code rendering
+      if (inline) {
+        return (
+          <code className={className} {...props}>
+            {children}
+          </code>
+        );
+      } else if (match) {
+        return (
+          <SyntaxHighlighter
+            style={nord}
+            language={match[1]}
+            PreTag="div"
+            {...props}
+          >
+            {String(children).replace(/\n$/, '')}
+          </SyntaxHighlighter>
+        );
       }
-      const codeString = node.children[0].value ?? ''
-      return (
-        <SyntaxHighlighter style={nord} language={language} PreTag="div" {...props}>
-          {codeString}
-        </SyntaxHighlighter>
-      )
     }
   }
   return (
@@ -249,18 +268,17 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
         <Stack.Item>
           <Stack horizontal grow>
             <Stack.Item grow>
-              <ReactMarkdown
-                linkTarget="_blank"
-                remarkPlugins={[remarkGfm, supersub]}
-                rehypePlugins={[rehypeRaw]}
-                children={
-                  SANITIZE_ANSWER
-                    ? DOMPurify.sanitize(parsedAnswer.markdownFormatText, { ALLOWED_TAGS: XSSAllowTags })
-                    : parsedAnswer.markdownFormatText
-                }
-                className={styles.answerText}
-                components={components}
-              />
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm, supersub]}
+              rehypePlugins={[rehypeRaw]}
+              children={
+                SANITIZE_ANSWER
+                  ? DOMPurify.sanitize(parsedAnswer.markdownFormatText, { ALLOWED_TAGS: XSSAllowTags, ALLOWED_ATTR: ['href', 'target', 'rel'] })
+                  : parsedAnswer.markdownFormatText
+              }
+              className={styles.answerText}
+              components={components}
+            />    
             </Stack.Item>
             <Stack.Item className={styles.answerHeader}>
               {FEEDBACK_ENABLED && answer.message_id !== undefined && (

ClientAdvisor/App/frontend/src/pages/chat/Components/CitationPanel.tsx

@@ -15,6 +15,10 @@ interface CitationPanelProps {
 }
 
 export const CitationPanel: React.FC<CitationPanelProps> = ({ activeCitation, IsCitationPanelOpen, onViewSource }) => {
+
+  const renderLink = (props: any) => {
+    return <a {...props} target="_blank" rel="noopener noreferrer" />;
+  };
   return (
     <Stack.Item className={styles.citationPanel} tabIndex={0} role="tabpanel" aria-label="Citations Panel">
       <Stack
@@ -41,11 +45,13 @@ export const CitationPanel: React.FC<CitationPanelProps> = ({ activeCitation, Is
       </h5>
       <div tabIndex={0}>
         <ReactMarkdown
-          linkTarget="_blank"
           className={styles.citationPanelContent}
           children={DOMPurify.sanitize(activeCitation.content, { ALLOWED_TAGS: XSSAllowTags })}
           remarkPlugins={[remarkGfm]}
           rehypePlugins={[rehypeRaw]}
+          components={{
+            a: renderLink, 
+          }}
         />
       </div>
     </Stack.Item>