Markdown.tsx

src/components/Markdown.tsx

1. import { memo, useState } from 'react'
2. import ReactMarkdown from 'react-markdown'
3. import rehypeHighlight from 'rehype-highlight'
4. import remarkGfm from 'remark-gfm'
5. import bash from 'highlight.js/lib/languages/bash'
6. import css from 'highlight.js/lib/languages/css'
7. import diff from 'highlight.js/lib/languages/diff'
8. import go from 'highlight.js/lib/languages/go'
9. import javascript from 'highlight.js/lib/languages/javascript'
10. import json from 'highlight.js/lib/languages/json'
11. import markdown from 'highlight.js/lib/languages/markdown'
12. import python from 'highlight.js/lib/languages/python'
13. import rust from 'highlight.js/lib/languages/rust'
14. import sql from 'highlight.js/lib/languages/sql'
15. import typescript from 'highlight.js/lib/languages/typescript'
16. import xml from 'highlight.js/lib/languages/xml'
17. import yaml from 'highlight.js/lib/languages/yaml'
19. import { useStore } from '../state/store'
21. const languages = {
22. bash,
23. sh: bash,
24. shell: bash,
25. css,
26. diff,
27. go,
28. javascript,
29. js: javascript,
30. json,
31. markdown,
32. md: markdown,
33. python,
34. py: python,
35. rust,
36. rs: rust,
37. sql,
38. typescript,
39. ts: typescript,
40. tsx: typescript,
41. xml,
42. html: xml,
43. yaml,
44. yml: yaml,
45. }
47. function textOf(node: unknown): string {
48. if (typeof node === 'string') return node
49. if (Array.isArray(node)) return node.map(textOf).join('')
50. if (node && typeof node === 'object' && 'props' in node)
51. return textOf((node as { props: { children?: unknown } }).props.children)
52. return ''
53. }
55. function CodeBlock({ children }: { children?: React.ReactNode }) {
56. const [copied, setCopied] = useState(false)
57. const code = textOf(children).replace(/\n$/, '')
58. const lang = /language-(\w+)/.exec(
59. ((children as { props?: { className?: string } })?.props?.className ?? '') as string,
60. )?.[1]
61. return (
62. <div className="codeblock">
63. <div className="codeblock-bar">
64. <span>{lang ?? 'text'}</span>
65. <button
66. className="ghost small"
67. onClick={() => {
68. void navigator.clipboard?.writeText(code)
69. setCopied(true)
70. setTimeout(() => setCopied(false), 1400)
71. }}
72. >
73. {copied ? 'Copied' : 'Copy'}
74. </button>
75. </div>
76. <pre>{children}</pre>
77. </div>
78. )
79. }
81. /** Assistant text. No raw HTML; links open in the browser, https only. */
82. export const Markdown = memo(function Markdown({ text }: { text: string }) {
83. const client = useStore((s) => s.client)
84. return (
85. <div className="md selectable">
86. <ReactMarkdown
87. remarkPlugins={[remarkGfm]}
88. rehypePlugins={[[rehypeHighlight, { languages, detect: false, ignoreMissing: true }]]}
89. skipHtml
90. components={{
91. pre: ({ children }) => <CodeBlock>{children}</CodeBlock>,
92. a: ({ href, children }) => (
93. <a
94. href={href}
95. onClick={(e) => {
96. e.preventDefault()
97. if (href && /^https:\/\//.test(href)) void client?.openUrl(href)
98. }}
99. title={href}
100. >
101. {children}
102. </a>
103. ),
104. img: ({ alt }) => <span className="md-img">[image: {alt || 'untitled'}]</span>,
105. }}
106. >
107. {text}
108. </ReactMarkdown>
109. </div>
110. )
111. })