ui: apply markdown to chatbot

frontend/app/(sidebar)/chatbot/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { Send, MessageSquare, Sparkles, Loader2, User, Bot } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -9,6 +8,9 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar"; // Assuming Avatar is in ui folder
 import { sendChatMessage } from "@/api/chat"; // Import the API function
 
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
 // Interface for chat messages
 interface ChatMessage {
   id: string;
@@ -157,9 +159,9 @@ export default function GeneralChatbotPage() {
                 className={`max-w-[80%] rounded-lg p-3 shadow-sm ${
                   message.role === "user"
                     ? "bg-green-600 text-white dark:bg-green-700"
-                    : "bg-white dark:bg-gray-800 border dark:border-gray-700"
+                    : "prose prose-sm dark:prose-invert bg-white dark:bg-gray-800 border dark:border-gray-700 max-w-none" // Use prose styles
                 }`}>
-                <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
                 <p
                   className={`mt-1 text-xs opacity-70 ${
                     message.role === "user" ? "text-green-100" : "text-gray-500 dark:text-gray-400"

frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/chatbot-dialog.tsx

@@ -10,6 +10,8 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useParams } from "next/navigation";
 import { sendChatMessage } from "@/api/chat";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 interface Message {
   id: string;
@@ -142,9 +144,9 @@ export function ChatbotDialog({ open, onOpenChange, cropName }: ChatbotDialogPro
                       className={`rounded-lg px-4 py-2 max-w-[80%] shadow-sm ${
                         message.role === "user"
                           ? "bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground"
-                          : "bg-muted dark:bg-muted dark:text-muted-foreground"
+                          : "prose prose-sm dark:prose-invert bg-muted dark:bg-muted dark:text-muted-foreground max-w-none"
                       }`}>
-                      <p className="text-sm whitespace-pre-wrap break-words">{message.content}</p>
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
                       <p
                         className={`mt-1 text-xs opacity-70 ${
                           message.role === "user" ? "text-green-100" : "text-gray-500 dark:text-gray-400"

frontend/components/sidebar/nav-user.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles } from "lucide-react";
+import { ChevronsUpDown, LogOut } from "lucide-react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -66,28 +65,6 @@ export function NavUser({
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <Sparkles />
-                Upgrade to Pro
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <BadgeCheck />
-                Account
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <CreditCard />
-                Billing
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Bell />
-                Notifications
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
             <DropdownMenuItem onClick={logout}>
               <LogOut />
               Log out

frontend/package.json

@@ -30,7 +30,6 @@
     "@radix-ui/react-visually-hidden": "^1.1.2",
     "@react-google-maps/api": "^2.20.6",
     "@react-oauth/google": "^0.12.1",
-    "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-table": "^8.21.2",
     "@vis.gl/react-google-maps": "^1.5.2",
@@ -49,7 +48,9 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.5.0",
+    "react-markdown": "^10.1.0",
     "recharts": "^2.15.1",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
@@ -57,6 +58,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

frontend/tailwind.config.ts

@@ -1,4 +1,6 @@
 import type { Config } from "tailwindcss";
+import animate from "tailwindcss-animate";
+import typography from "@tailwindcss/typography";
 
 export default {
   darkMode: ["class"],
@@ -91,5 +93,5 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+  plugins: [animate, typography],
 } satisfies Config;