Small fixes on message box

src/app/server/[id]/page.tsx

@@ -24,7 +24,8 @@ export default async function Server(params: {
           {
             id: "1",
             authorId: "user1",
-            content: `# Test\n### Hello World\n\nThis is a **markdown** message with _various_ elements:\n\n- Item 1\n- Item 2\n- Item 3\n\n[Click here](https://example.com) for more info.\n\n1. First\n2. Second\n3. Third`,
+            content:
+              "# Test\n### Hello World\n\nThis is a **markdown** message with _various_ elements:\n\n- Item 1\n- Item 2\n- Item 3\n\n[Click here](https://example.com) for more info.\n\n1. First\n2. Second\n3. Third",
             channelId: "1",
             timestamp: new Date(),
           },

src/components/MessageBox.tsx

@@ -11,7 +11,7 @@ import {
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 import { SmilePlusIcon } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -36,7 +36,8 @@ function MessageContainer({ message }: { message: Message }) {
 
           <span className="text-foreground/85 flex flex-col">
             {message.content.split("\n\n").map((line, index) => (
-              <div key={index}>
+              <div key={index} className="h-max">
+                {index > 0 && <br />}
                 <ReactMarkdown
                   remarkPlugins={[remarkGfm]}
                   components={{
@@ -68,7 +69,6 @@ function MessageContainer({ message }: { message: Message }) {
                 >
                   {line}
                 </ReactMarkdown>
-                <br />
               </div>
             ))}
           </span>

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }