feat: add markdown

package.json

@@ -20,14 +20,17 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
+    "react-markdown": "^9.0.0",
     "react-redux": "^8.1.3",
     "react-redux-loading-bar": "^5.0.4",
     "react-router-dom": "^6.16.0",
     "react-toastify": "^9.1.3",
     "redux": "^4.2.1",
+    "remark-gfm": "^4.0.0",
     "secure-ls": "^1.2.6"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20.8.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

src/components/partials/markdown/CustomMarkdown.tsx

@@ -0,0 +1,12 @@
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+const CustomMarkdown = ({ markdown = '', className = '' }) => {
+  return (
+    <div className={`${className} prose`}>
+      <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
+    </div>
+  );
+};
+
+export default CustomMarkdown;

src/components/shared/health-worker/LeftBubble.tsx

@@ -1,5 +1,6 @@
 import verified from '@/assets/images/verified.svg';
 import rbc from '@/assets/images/rbc.svg';
+import CustomMarkdown from '@/components/partials/markdown/CustomMarkdown';
 
 const LeftBubble = ({ message }: { message: string }) => {
   return (
@@ -16,9 +17,9 @@ const LeftBubble = ({ message }: { message: string }) => {
           className="h-[12.13px] w-[12.13px] pointer-events-none"
         />
       </h3>
-      <div
+      <CustomMarkdown
+        markdown={message}
         className="px-3 py-2 text-slate-600 font-['Inter'] leading-normal"
-        dangerouslySetInnerHTML={{ __html: message }}
       />
     </div>
   );

src/components/shared/health-worker/RightBubble.tsx

@@ -1,12 +1,14 @@
+import CustomMarkdown from '@/components/partials/markdown/CustomMarkdown';
+
 const RightBubble = ({ message }: { message: string }) => {
   return (
     <div className="ml-auto w-fit max-w-[70%] mb-8 bg-slate-200 rounded-tl-2xl rounded-bl-2xl rounded-br-2xl border border-blue-500/30">
       <h3 className="flex items-center space-x-3 px-3 py-2 border-b border-blue-500/30 text-green-500">
         User
       </h3>
-      <div
+      <CustomMarkdown
+        markdown={message}
         className="px-3 py-2 text-slate-600 font-['Inter'] leading-normal"
-        dangerouslySetInnerHTML={{ __html: message }}
       />
     </div>
   );

src/components/shared/linguist/QuestionAnswer.tsx

@@ -1,3 +1,5 @@
+import CustomMarkdown from '@/components/partials/markdown/CustomMarkdown';
+
 const QuestionAnswer = ({
   className = '',
   language = 'Kinyarwanda',
@@ -9,18 +11,18 @@ const QuestionAnswer = ({
       <p className="mb-8 text-slate-600 text-opacity-60 text-xs font-normal font-['Inter']">
         {language}
       </p>
-      <p className="text-blue-500 font-['Inter'] flex space-x-2">
+      <div className="text-blue-500 font-['Inter'] flex space-x-2">
         <span className="text-slate-600 text-opacity-60 font-normal font-['Inter']">
           Q.
         </span>
-        <span>{question}</span>
-      </p>
-      <p className="mt-6 text-slate-600 font-['Inter'] flex space-x-2">
+        <CustomMarkdown markdown={question} />
+      </div>
+      <div className="mt-6 text-slate-600 font-['Inter'] flex space-x-2">
         <span className="text-slate-600 text-opacity-60 font-normal font-['Inter']">
           R.
         </span>
-        <span>{answer}</span>
-      </p>
+        <CustomMarkdown markdown={answer} />
+      </div>
     </div>
   );
 };

tailwind.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /** @type {import('tailwindcss').Config} */
 import defaultTheme from 'tailwindcss/defaultTheme';
 
@@ -22,6 +23,8 @@ export default {
       },
     },
   },
-  // eslint-disable-next-line no-undef
-  plugins: [require('flowbite/plugin')],
+  plugins: [
+    require('flowbite/plugin'),
+    require('@tailwindcss/typography'),
+  ],
 };