updated code and update package.json file

Author: Rohini-Microsoft

frontend/package.json

@@ -33,7 +33,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"
   },
   "devDependencies": {
@@ -50,8 +50,8 @@
     "@types/react-dom": "^18.0.10",
     "@types/react-plotly.js": "^2.6.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.18.2",
-    "@typescript-eslint/parser": "^8.18.2",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

frontend/src/components/Answer/Answer.tsx

@@ -1,5 +1,6 @@
 import { FormEvent, useContext, useEffect, useMemo, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
+import { Components } 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'
@@ -225,19 +226,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 (
@@ -247,7 +267,6 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
           <Stack horizontal grow>
             <Stack.Item grow>
               <ReactMarkdown
-                linkTarget="_blank"
                 remarkPlugins={[remarkGfm, supersub]}
                 children={
                   SANITIZE_ANSWER

frontend/src/pages/chat/Chat.tsx

@@ -105,6 +105,11 @@ interface Props {
   type?: ChatType
 }
 
+
+const renderLink = (props: any) => {
+  return <a {...props} target="_blank" rel="noopener noreferrer" />;
+};
+
 const Chat = ({ type = ChatType.Browse }: Props) => {
   const location = useLocation()
 
@@ -1126,11 +1131,13 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
               </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>