{showCopyButton ? (
@@ -121,16 +103,18 @@ export function CodeBlock(props: {
) : null}
-
)
}
diff --git a/web/src/components/MarkdownRenderer.tsx b/web/src/components/MarkdownRenderer.tsx
index 99f9a310..106a5ce5 100644
--- a/web/src/components/MarkdownRenderer.tsx
+++ b/web/src/components/MarkdownRenderer.tsx
@@ -1,50 +1,30 @@
-import ReactMarkdown, { Components } from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import { CodeBlock } from '@/components/CodeBlock'
-
-function getLanguageFromClassName(className?: string): string | null {
- if (!className) return null
- for (const token of className.split(/\s+/g)) {
- if (token.startsWith('language-')) {
- return token.slice('language-'.length) || null
- }
- }
- return null
-}
-
-const defaultComponents: Components = {
- code({ className, children, ...props }) {
- const language = getLanguageFromClassName(className) || 'text'
- const code = String(children).replace(/\n$/, '')
-
- if (language !== 'text' || code.includes('\n')) {
- return (
-
-
- {props.code}
-
-
+
+ {typeof highlighted === 'string' ? (
+
+ {highlighted ?? props.code}
+
+ )}
+
{children}
- },
-}
+import type { MarkdownTextPrimitiveProps } from '@assistant-ui/react-markdown'
+import { MarkdownTextPrimitive } from '@assistant-ui/react-markdown'
+import { TextMessagePartProvider } from '@assistant-ui/react'
+import { MARKDOWN_PLUGINS, defaultComponents } from '@/components/assistant-ui/markdown-text'
+import { cn } from '@/lib/utils'
interface MarkdownRendererProps {
content: string
- components?: Components
+ components?: MarkdownTextPrimitiveProps['components']
}
-export function MarkdownRenderer({ content, components }: MarkdownRendererProps) {
+function MarkdownContent(props: MarkdownRendererProps) {
+ const mergedComponents = props.components
+ ? { ...defaultComponents, ...props.components }
+ : defaultComponents
+
return (
-
-
- {content}
-
-
+
+
+ )
+}
+
+function Pre(props: ComponentPropsWithoutRef<'pre'>) {
+ return (
+
+ )
+}
+
+function Code(props: ComponentPropsWithoutRef<'code'>) {
+ const isCodeBlock = useIsMarkdownCodeBlock()
+
+ if (isCodeBlock) {
+ return (
+
+ {language}
+
+
+ +} + +function Table(props: ComponentPropsWithoutRef<'table'>) { + return
+
+ {props.code}
+
+
+ )
+}
diff --git a/web/src/index.css b/web/src/index.css
index 79c53362..ef0fc8a0 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -92,6 +92,33 @@ body {
.markdown-content table { border-collapse: collapse; width: 100%; }
.markdown-content th, .markdown-content td { border: 1px solid var(--app-border); padding: 0.25rem 0.5rem; }
+/* assistant-ui markdown + shiki */
+.aui-md-codeblock pre.shiki {
+ margin: 0;
+ padding: 0.5rem;
+ overflow: auto;
+ background-color: transparent !important;
+ font-size: 0.75rem;
+}
+
+.aui-md-codeblock pre.shiki code {
+ display: block;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.aui-md-codeblock .shiki,
+.aui-md-codeblock .shiki span {
+ background-color: transparent !important;
+}
+
+html[data-theme="dark"] .shiki,
+html[data-theme="dark"] .shiki span {
+ color: var(--shiki-dark) !important;
+ font-style: var(--shiki-dark-font-style) !important;
+ font-weight: var(--shiki-dark-font-weight) !important;
+ text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
/* Ultrathink rainbow sparkle effect - per-letter wave animation */
@keyframes rainbow-wave {
0% { color: #ff5555; } /* red */