Updated for markdown content

Dockerfile

@@ -25,7 +25,8 @@ RUN npm install --no-save \
   tailwindcss@3.3.0 \
   postcss@8.4.24 \
   autoprefixer@10.4.14 \
-  lucide-react@0.263.1
+  lucide-react@0.263.1 \
+  react-markdown@9.0.1
 
 # Copy all project files
 COPY . .

package.json

@@ -2,7 +2,7 @@
   "name": "insucompass",
   "version": "1.0.0",
   "main": "index.js",
- "scripts": {
+  "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
@@ -14,9 +14,16 @@
   "dependencies": {
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "4.0.3",
+    "autoprefixer": "10.4.14",
     "lucide-react": "^0.263.1",
+    "postcss": "8.4.24",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "tailwindcss": "3.3.0",
+    "typescript": "5.0.2",
+    "vite": "4.4.5"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.6.0",

src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Send, MapPin, User, Users, DollarSign, Briefcase, CheckCircle, Bot } from 'lucide-react';
 import InsuCompassLogo from './assets/InsuCompass_Logo.png';
+import ReactMarkdown from 'react-markdown';
 
 // Types
 interface UserProfile {
@@ -434,7 +435,10 @@ const InsuCompassApp: React.FC = () => {
                     <div className="text-sm font-medium mb-1 opacity-75">
                       {message.role === 'user' ? 'You' : 'InsuCompass AI'}
                     </div>
-                    <div className="whitespace-pre-wrap">{message.content}</div>
+                    {/* <div className="whitespace-pre-wrap">{message.content}</div> */}
+                    <ReactMarkdown className="prose prose-sm max-w-none prose-table:border prose-table:border-gray-300 prose-th:bg-gray-100 prose-th:p-2 prose-td:p-2 prose-td:border prose-td:border-gray-300">
+                      {message.content}
+                    </ReactMarkdown>
                   </div>
                 </div>
               </div>