feat(chat): add conversation selection and enhance message rendering

- Add currentConversationId prop to ChatContainer for loading selected conversations
- Implement logic to load messages when conversation is selected and clear when deselected
- Improve user message rendering with proper whitespace handling
- Enhance MarkdownRenderer with content normalization and adjusted spacing for better readability
- Add paragraph styling to markdown output for improved layout

This enables users to switch between conversations seamlessly and provides cleaner message display.

components/message/MarkdownRenderer.tsx

@@ -12,6 +12,12 @@ type MarkdownRendererProps = {
 };
 
 export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  // Normalizar quebras de linha e espaços
+  const normalizedContent = content
+    .replace(/\n{3,}/g, "\n\n") // Máximo 2 quebras consecutivas
+    .replace(/[ \t]+$/gm, "") // Remover espaços no final das linhas
+    .trim();
+
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
@@ -29,7 +35,7 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
           }
 
           return (
-            <div className="relative my-3 rounded-lg border border-[var(--border)] bg-[var(--background)]">
+            <div className="relative my-4 rounded-lg border border-[var(--border)] bg-[var(--background)]">
               <button
                 type="button"
                 className="absolute right-2 top-2 rounded px-2 py-1 text-xs bg-[var(--surface)]/70 hover:bg-[var(--surface)] transition-colors"
@@ -47,27 +53,45 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
           );
         },
         h1: ({ children }: any) => (
-          <h1 className="text-xl font-bold mt-3 mb-1">{children}</h1>
+          <h1 className="text-xl font-bold mt-4 mb-2 first:mt-0">{children}</h1>
         ),
         h2: ({ children }: any) => (
-          <h2 className="text-lg font-semibold mt-2 mb-1">{children}</h2>
+          <h2 className="text-lg font-semibold mt-3 mb-2">{children}</h2>
         ),
         h3: ({ children }: any) => (
-          <h3 className="text-base font-semibold mt-2 mb-1">{children}</h3>
+          <h3 className="text-base font-semibold mt-3 mb-1">{children}</h3>
         ),
         h4: ({ children }: any) => (
-          <h4 className="text-sm font-semibold mt-1 mb-1">{children}</h4>
+          <h4 className="text-sm font-semibold mt-2 mb-1">{children}</h4>
         ),
         h5: ({ children }: any) => (
-          <h5 className="text-sm font-medium mt-1 mb-1">{children}</h5>
+          <h5 className="text-sm font-medium mt-2 mb-1">{children}</h5>
         ),
         h6: ({ children }: any) => (
-          <h6 className="text-xs font-medium mt-1 mb-1">{children}</h6>
+          <h6 className="text-xs font-medium mt-2 mb-1">{children}</h6>
         ),
-        p: ({ children }: any) => <p className="mb-1">{children}</p>,
+        p: ({ children }: any) => (
+          <p className="mb-3 leading-relaxed">{children}</p>
+        ),
+        ul: ({ children }: any) => (
+          <ul className="mb-3 ml-4 list-disc space-y-1">{children}</ul>
+        ),
+        ol: ({ children }: any) => (
+          <ol className="mb-3 ml-4 list-decimal space-y-1">{children}</ol>
+        ),
+        li: ({ children }: any) => (
+          <li className="leading-relaxed">{children}</li>
+        ),
+        blockquote: ({ children }: any) => (
+          <blockquote className="border-l-4 border-[var(--border)] pl-4 my-3 italic text-[var(--foreground)]/80">
+            {children}
+          </blockquote>
+        ),
+        hr: () => <hr className="my-4 border-[var(--border)]" />,
+        br: () => <br className="mb-1" />,
       }}
     >
-      {content}
+      {normalizedContent}
     </ReactMarkdown>
   );
 }