feat: replace AtlasChat with assistant-ui Thread component
- 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
This commit is contained in:
50
components/assistant-ui/markdown-text.tsx
Normal file
50
components/assistant-ui/markdown-text.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
"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} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user