improvement in question page

app/project/page.tsx

@@ -9,8 +9,6 @@ import { ProjectLayout } from "./components/project-layout";
 import { ProjectContent } from "./components/project-content";
 
 
-
-
 // Loading fallback component
 function ProjectPageLoading() {
   return (

app/questions/components/questions-section.tsx

@@ -18,6 +18,7 @@ import { RfpDocument, AnswerSource } from "@/types/api"
 import { cn } from "@/lib/utils"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { AnswerDisplay } from "@/components/ui/answer-display"
 
 // Interface for answer data
 interface AnswerData {
@@ -788,6 +789,14 @@ function QuestionsSectionInner() {
                         onChange={(e) => handleAnswerChange(selectedQuestion, e.target.value)}
                       />
                       
+                      {/* Show markdown preview if there's content */}
+                      {answers[selectedQuestion]?.text && (
+                        <div className="mt-4">
+                          <h3 className="text-sm font-medium mb-2">Preview:</h3>
+                          <AnswerDisplay content={answers[selectedQuestion]?.text || ""} />
+                        </div>
+                      )}
+                      
                       {/* Display sources if available */}
                       {answers[selectedQuestion]?.sources && answers[selectedQuestion].sources.length > 0 && (
                         <div className="mt-2 text-sm">
@@ -956,6 +965,14 @@ function QuestionsSectionInner() {
                         onChange={(e) => handleAnswerChange(selectedQuestion, e.target.value)}
                       />
                       
+                      {/* Show markdown preview if there's content */}
+                      {answers[selectedQuestion]?.text && (
+                        <div className="mt-4">
+                          <h3 className="text-sm font-medium mb-2">Preview:</h3>
+                          <AnswerDisplay content={answers[selectedQuestion]?.text || ""} />
+                        </div>
+                      )}
+                      
                       {/* Display sources if available */}
                       {answers[selectedQuestion]?.sources && answers[selectedQuestion].sources.length > 0 && (
                         <div className="mt-2 text-sm">
@@ -1114,6 +1131,14 @@ function QuestionsSectionInner() {
                         onChange={(e) => handleAnswerChange(selectedQuestion, e.target.value)}
                       />
                       
+                      {/* Show markdown preview if there's content */}
+                      {answers[selectedQuestion]?.text && (
+                        <div className="mt-4">
+                          <h3 className="text-sm font-medium mb-2">Preview:</h3>
+                          <AnswerDisplay content={answers[selectedQuestion]?.text || ""} />
+                        </div>
+                      )}
+                      
                       {/* Display sources if available */}
                       {answers[selectedQuestion]?.sources && answers[selectedQuestion].sources.length > 0 && (
                         <div className="mt-2 text-sm">
@@ -1282,6 +1307,14 @@ function QuestionsSectionInner() {
                         onChange={(e) => handleAnswerChange(selectedQuestion, e.target.value)}
                       />
                       
+                      {/* Show markdown preview if there's content */}
+                      {answers[selectedQuestion]?.text && (
+                        <div className="mt-4">
+                          <h3 className="text-sm font-medium mb-2">Preview:</h3>
+                          <AnswerDisplay content={answers[selectedQuestion]?.text || ""} />
+                        </div>
+                      )}
+                      
                       {/* Display sources if available */}
                       {answers[selectedQuestion]?.sources && answers[selectedQuestion].sources.length > 0 && (
                         <div className="mt-2 text-sm">

components/ui/answer-display.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+import { MarkdownRenderer } from "./markdown-renderer";
+
+interface AnswerDisplayProps {
+  content: string;
+  className?: string;
+}
+
+export function AnswerDisplay({ content, className = "" }: AnswerDisplayProps) {
+  return (
+    <div className={`border rounded-md p-4 bg-white ${className}`}>
+      <MarkdownRenderer content={content} />
+    </div>
+  );
+} 

components/ui/markdown-renderer.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+}
+
+export function MarkdownRenderer({ content, className = "" }: MarkdownRendererProps) {
+  return (
+    <div className={`prose prose-sm max-w-none ${className}`}>
+      <ReactMarkdown>{content}</ReactMarkdown>
+    </div>
+  );
+} 

package.json

@@ -56,6 +56,7 @@
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.1",
+    "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.0",
     "recharts": "^2.15.3",
     "sonner": "^2.0.3",
@@ -65,6 +66,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

tailwind.config.ts

@@ -81,7 +81,10 @@ const config: Config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/typography"),
+  ],
 }
 
 export default config