Just checking in

frontend/src/StyledMarkdown.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { MuiMarkdown } from 'mui-markdown';
+import { useTheme } from '@mui/material/styles';
+import { Link } from '@mui/material';
+import { ChatQuery } from './Message';
+
+interface StyledMarkdownProps {
+  content: string,
+  submitQuery?: (query: string) => void,
+  [key: string]: any, // For any additional props
+};
+
+const StyledMarkdown: React.FC<StyledMarkdownProps> = ({ content, submitQuery, ...props }) => {
+  const theme = useTheme();
+  
+  let options: any = {
+    overrides: {
+      a: {
+        component: Link,
+        props: {
+          sx: { 
+            wordBreak: "break-all",
+            color: theme.palette.secondary.main,
+            textDecoration: 'none',
+            '&:hover': {
+              color: theme.palette.custom.highlight,
+              textDecoration: 'underline',
+            }
+          }
+        }
+      },
+      ChatQuery: undefined
+    },
+  };
+
+  if (submitQuery) {
+    options.overrides.ChatQuery = {
+      component: ChatQuery,
+      props: {
+        submitQuery
+      },
+    };
+  }
+  
+  return <MuiMarkdown {...options} children={content} {...props}/>;
+};
+
+export { StyledMarkdown };