feat: add database support, conversation sidebar, and improve chat streaming

- Update .gitignore to exclude database files, extensions, and .cursor directory
- Enhance chat streaming API with safe enqueue and close functions to prevent errors
- Integrate ConversationSidebar component into ClientHome for better UI
- Add dependencies like better-sqlite3 and esbuild packages for database functionality

This commit introduces database persistence for conversations, improves error handling in streaming responses, and adds a sidebar for managing chats, enhancing overall app robustness and user experience.

components/message/MarkdownRenderer.tsx

@@ -5,6 +5,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import rehypeHighlight from "rehype-highlight";
+import { Copy } from "lucide-react";
 
 type MarkdownRendererProps = {
   content: string;
@@ -15,6 +16,56 @@ export function MarkdownRenderer({ content }: MarkdownRendererProps) {
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw, rehypeHighlight]}
+      components={{
+        code({ inline, className, children, ...props }: any) {
+          const text = String(children || "");
+
+          if (inline) {
+            return (
+              <code className="rounded bg-[var(--surface)] px-1 py-0.5 text-[0.95em]">
+                {children}
+              </code>
+            );
+          }
+
+          return (
+            <div className="relative my-3 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"
+                onClick={() => navigator.clipboard.writeText(text)}
+                aria-label="Copiar código"
+              >
+                <Copy className="h-3 w-3" />
+              </button>
+              <pre className="overflow-auto p-3">
+                <code className={className} {...props}>
+                  {children}
+                </code>
+              </pre>
+            </div>
+          );
+        },
+        h1: ({ children }: any) => (
+          <h1 className="text-xl font-bold mt-3 mb-1">{children}</h1>
+        ),
+        h2: ({ children }: any) => (
+          <h2 className="text-lg font-semibold mt-2 mb-1">{children}</h2>
+        ),
+        h3: ({ children }: any) => (
+          <h3 className="text-base font-semibold mt-2 mb-1">{children}</h3>
+        ),
+        h4: ({ children }: any) => (
+          <h4 className="text-sm font-semibold mt-1 mb-1">{children}</h4>
+        ),
+        h5: ({ children }: any) => (
+          <h5 className="text-sm font-medium mt-1 mb-1">{children}</h5>
+        ),
+        h6: ({ children }: any) => (
+          <h6 className="text-xs font-medium mt-1 mb-1">{children}</h6>
+        ),
+        p: ({ children }: any) => <p className="mb-1">{children}</p>,
+      }}
     >
       {content}
     </ReactMarkdown>