fix markdown style

frontend/package.json

@@ -16,6 +16,7 @@
     "date-fns": "^3.6.0",
     "dompurify": "^3.1.5",
     "lodash": "^4.17.21",
+    "markdown": "^0.5.0",
     "next": "^14.2.3",
     "next-auth": "^5.0.0-beta.19",
     "next-themes": "^0.3.0",

frontend/src/components/search/search-response.tsx

@@ -1,24 +1,34 @@
-import { HTMLAttributes } from 'react'
+import { HTMLAttributes, OlHTMLAttributes } from 'react'
 import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
 import { twMerge } from 'tailwind-merge'
 
 type SearchResponseProps = HTMLAttributes<HTMLDivElement> & {
   response: string
 }
 
+const components = {
+  ol(props: OlHTMLAttributes<HTMLOListElement>) {
+    return (
+      <ol className="list-decimal pl-4" start={props.start}>
+        {props.children}
+      </ol>
+    )
+  },
+  ul(props: HTMLAttributes<HTMLUListElement>) {
+    return <ul className="list-disc pl-8">{props.children}</ul>
+  },
+  h3(props: HTMLAttributes<HTMLHeadingElement>) {
+    return <h3 className="font-bold text-lg">{props.children}</h3>
+  },
+}
+
 export default function SearchResponse(props: SearchResponseProps) {
   return (
     <div className={twMerge('flex flex-col gap-y-2', props.className)}>
       {props.response.split('\\n').map((paragraph, index) => (
-        <div
-          key={`response-paragraph-${index}`}
-          //style={{ animation: `fade-in ${Math.min(1 + index * 0.5, 5)}s` }}
-        >
-          <Markdown className="text-sm text-white/80" remarkPlugins={[remarkGfm]}>
-            {paragraph}
-          </Markdown>
-        </div>
+        <Markdown key={`response-paragraph-${index}`} className="text-base text-white/80" components={components}>
+          {paragraph.replaceAll('    -', '   -')}
+        </Markdown>
       ))}
     </div>
   )