feat: enhance chat functionality with markdown support and default prompts

- Added support for rendering markdown in chat messages using ReactMarkdown with custom renderers. - Integrated a default format prompt for the chat system, improving user experience by initializing with a predefined prompt. - Updated the prompt generator to handle model selection more robustly, including loading states and fallback options for model selection. - Enhanced UI components for better accessibility and user feedback during prompt generation.
2025-11-19 00:34:57 -03:00
1 parent b2a06ed994
commit 032722e21b
@@ -0,0 +1,138 @@
+import { Components } from "react-markdown";
+import { CodeBlock } from "./code-block";
+import { cn } from "@/lib/utils";
+
+export const markdownRenderers: Components = {
+  h1: ({ className, ...props }) => (
+    <h1
+      className={cn(
+        "mt-2 scroll-m-20 text-2xl font-bold tracking-tight first:mt-0",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2
+      className={cn(
+        "mt-6 scroll-m-20 border-b pb-2 text-xl font-semibold tracking-tight first:mt-0",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3
+      className={cn(
+        "mt-4 scroll-m-20 text-lg font-semibold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4
+      className={cn(
+        "mt-4 scroll-m-20 text-base font-semibold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }) => (
+    <p
+      className={cn("leading-7 [&:not(:first-child)]:mt-4", className)}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul className={cn("my-4 ml-6 list-disc [&>li]:mt-2", className)} {...props} />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol className={cn("my-4 ml-6 list-decimal [&>li]:mt-2", className)} {...props} />
+  ),
+  li: ({ className, ...props }) => (
+    <li className={cn("mt-2", className)} {...props} />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn(
+        "mt-4 border-l-2 border-primary pl-6 italic text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  ),
+  img: ({ className, alt, ...props }) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      className={cn("rounded-md border bg-muted", className)}
+      alt={alt}
+      {...props}
+    />
+  ),
+  hr: ({ ...props }) => <hr className="my-4 md:my-6" {...props} />,
+  table: ({ className, ...props }) => (
+    <div className="my-4 w-full overflow-y-auto">
+      <table className={cn("w-full", className)} {...props} />
+    </div>
+  ),
+  tr: ({ className, ...props }) => (
+    <tr
+      className={cn("m-0 border-t p-0 even:bg-muted", className)}
+      {...props}
+    />
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      className={cn(
+        "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(
+        "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      )}
+      {...props}
+    />
+  ),
+  pre: ({ children }) => <>{children}</>,
+  code: ({ className, children, ...props }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    const isInline = !match;
+
+    if (isInline) {
+      return (
+        <code
+          className={cn(
+            "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    }
+
+    return (
+      <CodeBlock language={match[1]}>
+        {String(children).replace(/\n$/, "")}
+      </CodeBlock>
+    );
+  },
+  a: ({ className, ...props }) => (
+    <a
+      className={cn("font-medium underline underline-offset-4 text-primary hover:text-primary/80", className)}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+    />
+  ),
+};
+