Evandro Fonseca Junior
8834ef2b4f
- Added new Radix UI components including checkbox, label, popover, slider, switch, and tooltip to improve UI interactions. - Integrated react-syntax-highlighter for better code rendering in chat messages. - Updated package.json and pnpm-lock.yaml to include new dependencies and ensure compatibility. - Enhanced chat input to support web search toggling, improving user experience during message composition. - Implemented auto-saving of chat sessions and improved session management features. - Refactored chat message rendering to clean up metadata and improve display quality.
141 lines
3.5 KiB
TypeScript
141 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}
|
|
/>
|
|
),
|
|
};
|
|
|
|
|
|
|