Format ai agent messages as markdown, also auto scroll when new messa…

…ges come in.

client/package.json

@@ -64,6 +64,7 @@
   "devDependencies": {
     "@hey-api/openapi-ts": "^0.53.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.15",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",

client/src/app/components/ai-assistant.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -12,6 +12,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { MessageCircle, Send, X } from "lucide-react";
 import { ChatMessage, ChatState } from "../client";
 import { useCompletionMutation } from "../queries/ai";
+import ReactMarkdown from "react-markdown";
 
 interface Conversation {
   isEnabled: boolean;
@@ -106,16 +107,29 @@ export function AIAssistant({ viewing }: { viewing?: string }) {
     });
   };
 
+  const scrollAreaRef = useRef(null as HTMLDivElement | null);
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      if (scrollAreaRef?.current) {
+        const scrollArea = scrollAreaRef.current;
+        scrollArea.scrollTop = scrollArea.scrollHeight;
+      }
+    }, 0);
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [completionMutation.isPending]);
+
   if (!isEnabled) {
     return null;
   }
-
   return (
     <>
       {/* Floating button */}
       {!isOpen && (
         <Button
-          className="fixed bottom-20 right-4 rounded-full p-4"
+          className="fixed bottom-20 right-4 rounded-full p-4 z-10"
           onClick={() => setIsOpen(true)}
         >
           <MessageCircle className="h-6 w-6" />
@@ -139,7 +153,7 @@ export function AIAssistant({ viewing }: { viewing?: string }) {
             </Button>
           </CardHeader>
           <CardContent className="flex-grow overflow-hidden">
-            <ScrollArea className="h-full w-full pr-4">
+            <ScrollArea className="h-full w-full pr-4" ref={scrollAreaRef}>
               <div className={`mb-4 text-left`}>
                 <span className={`inline-block p-2 rounded-lg bg-muted`}>
                   Hello there! How can I help you today?
@@ -153,13 +167,13 @@ export function AIAssistant({ viewing }: { viewing?: string }) {
                   }`}
                 >
                   <span
-                    className={`inline-block p-2 rounded-lg max-w-[90%] ${
+                    className={`inline-block p-2 rounded-lg max-w-[90%] prose prose-sm ${
                       m.message_type === "ai"
                         ? "bg-muted"
                         : "bg-primary text-primary-foreground"
                     }`}
                   >
-                    {m.content}
+                    <ReactMarkdown>{m.content}</ReactMarkdown>
                   </span>
                 </div>
               ))}

client/src/components/ui/scroll-area.tsx

@@ -10,11 +10,13 @@ const ScrollArea = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
-    ref={ref}
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport
+      className="h-full w-full rounded-[inherit]"
+      ref={ref}
+    >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

client/tailwind.config.js

@@ -73,5 +73,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };