Evandro Fonseca Junior
032722e21b
- 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.
139 lines
3.5 KiB
TypeScript
139 lines
3.5 KiB
TypeScript
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}
|
|
/>
|
|
),
|
|
};
|
|
|