Mark Henderson
9bec2e9b17
- Install @assistant-ui/react and @assistant-ui/react-markdown - components/assistant-ui/thread.tsx — full Thread UI with primitives - components/assistant-ui/markdown-text.tsx — GFM markdown renderer - AtlasChat.tsx — useLocalRuntime adapter calling existing atlas-chat API Gives proper markdown rendering, branch switching, copy/retry actions, cancel button during streaming, and a polished thread experience. Made-with: Cursor
51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import type { FC } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export const MarkdownText: FC = () => {
|
|
return (
|
|
<MarkdownTextPrimitive
|
|
remarkPlugins={[remarkGfm]}
|
|
className="prose prose-sm dark:prose-invert max-w-none leading-relaxed"
|
|
components={{
|
|
h1: ({ className, ...props }) => (
|
|
<h1 className={cn("text-base font-bold mt-3 mb-1", className)} {...props} />
|
|
),
|
|
h2: ({ className, ...props }) => (
|
|
<h2 className={cn("text-sm font-bold mt-3 mb-1", className)} {...props} />
|
|
),
|
|
h3: ({ className, ...props }) => (
|
|
<h3 className={cn("text-sm font-semibold mt-2 mb-1", className)} {...props} />
|
|
),
|
|
p: ({ className, ...props }) => (
|
|
<p className={cn("mb-2 last:mb-0", className)} {...props} />
|
|
),
|
|
ul: ({ className, ...props }) => (
|
|
<ul className={cn("list-disc list-outside ml-4 mb-2 space-y-0.5", className)} {...props} />
|
|
),
|
|
ol: ({ className, ...props }) => (
|
|
<ol className={cn("list-decimal list-outside ml-4 mb-2 space-y-0.5", className)} {...props} />
|
|
),
|
|
li: ({ className, ...props }) => (
|
|
<li className={cn("leading-relaxed", className)} {...props} />
|
|
),
|
|
strong: ({ className, ...props }) => (
|
|
<strong className={cn("font-semibold", className)} {...props} />
|
|
),
|
|
code: ({ className, ...props }) => (
|
|
<code className={cn("bg-muted px-1 py-0.5 rounded text-xs font-mono", className)} {...props} />
|
|
),
|
|
pre: ({ className, ...props }) => (
|
|
<pre className={cn("bg-muted rounded-lg p-3 overflow-x-auto text-xs my-2", className)} {...props} />
|
|
),
|
|
blockquote: ({ className, ...props }) => (
|
|
<blockquote className={cn("border-l-2 border-muted-foreground/30 pl-3 italic text-muted-foreground my-2", className)} {...props} />
|
|
),
|
|
}}
|
|
/>
|
|
);
|
|
};
|