kexsh/agent-chat-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Improved markdown rendering

Browse Source
This commit is contained in:
bracesproul
2025-03-17 12:33:59 -07:00
parent ddc477532c
commit 5c6f27b2a1
5 changed files with 2221 additions and 4569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package.json
View File

@@ -1,8 +1,11 @@
{ {
"name": "chat-langgraph", "name": "agent-chat-ui",
"readme": "https://github.com/langchain-ai/chat-langgraph/blob/main/README.md", "readme": "https://github.com/langchain-ai/agent-chat-ui/blob/main/README.md",
"homepage": "https://chat-langgraph.vercel.app", "homepage": "https://agentchat.vercel.app",
"repository": "https://github.com/langchain-ai/chat-langgraph", "repository": {
"type": "git",
"url": "git+https://github.com/langchain-ai/agent-chat-ui.git"
},
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
@@ -15,9 +18,6 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@assistant-ui/react": "^0.8.0",
"@assistant-ui/react-markdown": "^0.8.0",
"@assistant-ui/react-syntax-highlighter": "^0.7.2",
"@langchain/core": "^0.3.41", "@langchain/core": "^0.3.41",
"@langchain/langgraph": "^0.2.54", "@langchain/langgraph": "^0.2.54",
"@langchain/langgraph-api": "^0.0.15", "@langchain/langgraph-api": "^0.0.15",

6533
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

45
src/components/thread/markdown-styles.css Normal file
View File

@@ -0,0 +1,45 @@
/* Base markdown styles */
.markdown-content code:not(pre code) {
background-color: rgba(0, 0, 0, 0.05);
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
}
.markdown-content a {
color: #0070f3;
text-decoration: none;
}
.markdown-content a:hover {
text-decoration: underline;
}
.markdown-content blockquote {
border-left: 4px solid #ddd;
padding-left: 1rem;
color: #666;
}
.markdown-content pre {
overflow-x: auto;
}
.markdown-content table {
border-collapse: collapse;
width: 100%;
}
.markdown-content th,
.markdown-content td {
border: 1px solid #ddd;
padding: 8px;
}
.markdown-content th {
background-color: #f2f2f2;
}
.markdown-content tr:nth-child(even) {
background-color: #f9f9f9;
}

148
src/components/thread/markdown-text.tsx
View File

@@ -1,12 +1,7 @@
"use client"; "use client";
import "@assistant-ui/react-markdown/styles/dot.css"; import "./markdown-styles.css";
import {
CodeHeaderProps,
unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
useIsMarkdownCodeBlock,
} from "@assistant-ui/react-markdown";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import rehypeKatex from "rehype-katex"; import rehypeKatex from "rehype-katex";
@@ -20,37 +15,10 @@ import { cn } from "@/lib/utils";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
const MarkdownTextImpl = ({ children }: { children: string }) => { interface CodeHeaderProps {
return ( language?: string;
<ReactMarkdown code: string;
remarkPlugins={[remarkGfm, remarkMath]} }
rehypePlugins={[rehypeKatex]}
components={defaultComponents}
>
{children}
</ReactMarkdown>
);
};
export const MarkdownText = memo(MarkdownTextImpl);
const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
const { isCopied, copyToClipboard } = useCopyToClipboard();
const onCopy = () => {
if (!code || isCopied) return;
copyToClipboard(code);
};
return (
<div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
<span className="lowercase [&>span]:text-xs">{language}</span>
<TooltipIconButton tooltip="Copy" onClick={onCopy}>
{!isCopied && <CopyIcon />}
{isCopied && <CheckIcon />}
</TooltipIconButton>
</div>
);
};
const useCopyToClipboard = ({ const useCopyToClipboard = ({
copiedDuration = 3000, copiedDuration = 3000,
@@ -71,8 +39,26 @@ const useCopyToClipboard = ({
return { isCopied, copyToClipboard }; return { isCopied, copyToClipboard };
}; };
const defaultComponents = memoizeMarkdownComponents({ const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
h1: ({ className, ...props }) => ( const { isCopied, copyToClipboard } = useCopyToClipboard();
const onCopy = () => {
if (!code || isCopied) return;
copyToClipboard(code);
};
return (
<div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
<span className="lowercase [&>span]:text-xs">{language}</span>
<TooltipIconButton tooltip="Copy" onClick={onCopy}>
{!isCopied && <CopyIcon />}
{isCopied && <CheckIcon />}
</TooltipIconButton>
</div>
);
};
const defaultComponents: any = {
h1: ({ className, ...props }: { className?: string }) => (
<h1 <h1
className={cn( className={cn(
"mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0", "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
@@ -81,7 +67,7 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
h2: ({ className, ...props }) => ( h2: ({ className, ...props }: { className?: string }) => (
<h2 <h2
className={cn( className={cn(
"mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0", "mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -90,7 +76,7 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
h3: ({ className, ...props }) => ( h3: ({ className, ...props }: { className?: string }) => (
<h3 <h3
className={cn( className={cn(
"mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0", "mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -99,7 +85,7 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
h4: ({ className, ...props }) => ( h4: ({ className, ...props }: { className?: string }) => (
<h4 <h4
className={cn( className={cn(
"mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0", "mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -108,7 +94,7 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
h5: ({ className, ...props }) => ( h5: ({ className, ...props }: { className?: string }) => (
<h5 <h5
className={cn( className={cn(
"my-4 text-lg font-semibold first:mt-0 last:mb-0", "my-4 text-lg font-semibold first:mt-0 last:mb-0",
@@ -117,19 +103,19 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
h6: ({ className, ...props }) => ( h6: ({ className, ...props }: { className?: string }) => (
<h6 <h6
className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)} className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)}
{...props} {...props}
/> />
), ),
p: ({ className, ...props }) => ( p: ({ className, ...props }: { className?: string }) => (
<p <p
className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)} className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)}
{...props} {...props}
/> />
), ),
a: ({ className, ...props }) => ( a: ({ className, ...props }: { className?: string }) => (
<a <a
className={cn( className={cn(
"text-primary font-medium underline underline-offset-4", "text-primary font-medium underline underline-offset-4",
@@ -138,28 +124,28 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
blockquote: ({ className, ...props }) => ( blockquote: ({ className, ...props }: { className?: string }) => (
<blockquote <blockquote
className={cn("border-l-2 pl-6 italic", className)} className={cn("border-l-2 pl-6 italic", className)}
{...props} {...props}
/> />
), ),
ul: ({ className, ...props }) => ( ul: ({ className, ...props }: { className?: string }) => (
<ul <ul
className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)} className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)}
{...props} {...props}
/> />
), ),
ol: ({ className, ...props }) => ( ol: ({ className, ...props }: { className?: string }) => (
<ol <ol
className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)} className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)}
{...props} {...props}
/> />
), ),
hr: ({ className, ...props }) => ( hr: ({ className, ...props }: { className?: string }) => (
<hr className={cn("my-5 border-b", className)} {...props} /> <hr className={cn("my-5 border-b", className)} {...props} />
), ),
table: ({ className, ...props }) => ( table: ({ className, ...props }: { className?: string }) => (
<table <table
className={cn( className={cn(
"my-5 w-full border-separate border-spacing-0 overflow-y-auto", "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
@@ -168,7 +154,7 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
th: ({ className, ...props }) => ( th: ({ className, ...props }: { className?: string }) => (
<th <th
className={cn( className={cn(
"bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right", "bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
@@ -177,7 +163,7 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
td: ({ className, ...props }) => ( td: ({ className, ...props }: { className?: string }) => (
<td <td
className={cn( className={cn(
"border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right", "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
@@ -186,7 +172,7 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
tr: ({ className, ...props }) => ( tr: ({ className, ...props }: { className?: string }) => (
<tr <tr
className={cn( className={cn(
"m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg", "m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
@@ -195,30 +181,58 @@ const defaultComponents = memoizeMarkdownComponents({
{...props} {...props}
/> />
), ),
sup: ({ className, ...props }) => ( sup: ({ className, ...props }: { className?: string }) => (
<sup <sup
className={cn("[&>a]:text-xs [&>a]:no-underline", className)} className={cn("[&>a]:text-xs [&>a]:no-underline", className)}
{...props} {...props}
/> />
), ),
pre: ({ className, ...props }) => ( pre: ({ className, ...props }: { className?: string }) => (
<pre <pre
className={cn( className={cn(
"overflow-x-auto rounded-b-lg bg-black p-4 text-white max-w-4xl", "overflow-x-auto rounded-lg bg-black text-white max-w-4xl",
className, className,
)} )}
{...props} {...props}
/> />
), ),
code: function Code({ className, ...props }) { code: ({ className, children, ...props }: { className?: string; children: React.ReactNode }) => {
const isCodeBlock = useIsMarkdownCodeBlock(); const match = /language-(\w+)/.exec(className || '');
if (match) {
const language = match[1];
const code = String(children).replace(/\n$/, '');
return (
<>
<CodeHeader language={language} code={code} />
<SyntaxHighlighter language={language} className={className}>
{code}
</SyntaxHighlighter>
</>
);
}
return ( return (
<code <code className={cn("rounded font-semibold", className)} {...props}>
className={cn(!isCodeBlock && "rounded font-semibold", className)} {children}
{...props} </code>
/>
); );
}, }
CodeHeader, };
SyntaxHighlighter,
}); const MarkdownTextImpl: FC<{ children: string }> = ({ children }) => {
return (
<div className="markdown-content">
<ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeKatex]}
components={defaultComponents}
>
{children}
</ReactMarkdown>
</div>
);
};
export const MarkdownText = memo(MarkdownTextImpl);

50
src/components/thread/syntax-highlighter.tsx
View File

@@ -1,24 +1,36 @@
import { PrismAsyncLight } from "react-syntax-highlighter"; import { PrismAsyncLight as SyntaxHighlighterPrism } from "react-syntax-highlighter";
import { makePrismAsyncLightSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx"; import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
import python from "react-syntax-highlighter/dist/esm/languages/prism/python"; import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { FC } from "react";
// register languages you want to support // Register languages you want to support
PrismAsyncLight.registerLanguage("js", tsx); SyntaxHighlighterPrism.registerLanguage("js", tsx);
PrismAsyncLight.registerLanguage("jsx", tsx); SyntaxHighlighterPrism.registerLanguage("jsx", tsx);
PrismAsyncLight.registerLanguage("ts", tsx); SyntaxHighlighterPrism.registerLanguage("ts", tsx);
PrismAsyncLight.registerLanguage("tsx", tsx); SyntaxHighlighterPrism.registerLanguage("tsx", tsx);
PrismAsyncLight.registerLanguage("python", python); SyntaxHighlighterPrism.registerLanguage("python", python);
export const SyntaxHighlighter = makePrismAsyncLightSyntaxHighlighter({ interface SyntaxHighlighterProps {
style: coldarkDark, children: string;
customStyle: { language: string;
margin: 0, className?: string;
width: "100%", }
background: "transparent",
padding: "1.5rem 1rem", export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({ children, language, className }) => {
}, return (
}); <SyntaxHighlighterPrism
language={language}
style={coldarkDark}
customStyle={{
margin: 0,
width: "100%",
background: "transparent",
padding: "1.5rem 1rem",
}}
className={className}
>
{children}
</SyntaxHighlighterPrism>
);
};