Latex block content should be copyable

src/components/CopyButton.tsx

@@ -3,13 +3,21 @@ import { useState } from 'react'
 import Copy from '~/icons/Copy'
 import CopySuccess from '~/icons/CopySuccess'
 
-const CopyButton = ({ text, className = '' }: { text: string; className?: string }) => {
+type CopyButtonProps = {
+  text?: string
+  className?: string
+  getText?: () => string | undefined
+}
+
+const CopyButton = ({ text, className = '', getText }: CopyButtonProps) => {
   const [copied, setCopied] = useState(false)
 
   const handleClick = () => {
     setCopied(true)
 
-    navigator.clipboard.writeText(text)
+    const content = text || getText?.() || ''
+
+    navigator.clipboard.writeText(content)
 
     setTimeout(() => setCopied(false), 1500)
   }

src/components/CustomMathBlock.tsx

@@ -0,0 +1,36 @@
+import { useRef } from 'react'
+
+import CopyButton from '~/components/CopyButton'
+
+import 'highlight.js/styles/base16/woodland.min.css'
+
+const CustomMathBlock = (props: React.HTMLAttributes<HTMLElement>) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const getText = () => {
+    const text = ref.current?.getElementsByTagName('annotation')?.[0]
+
+    return text?.textContent?.trim() || ''
+  }
+
+  return (
+    <pre className='m-0'>
+      <div className="indicator block w-fit pr-2 pt-4">
+        <CopyButton
+          className="indicator-item !absolute z-10 text-neutral-content/30 hover:text-neutral-content"
+          getText={getText}
+        />
+
+        <div ref={ref}>
+          <math
+            {...props}
+            className="not-prose w-full overflow-x-scroll text-sm [&>*]:!text-sm"
+            ref={ref}
+          />
+        </div>
+      </div>
+    </pre>
+  )
+}
+
+export default CustomMathBlock

src/components/LazyMessage.tsx

@@ -30,6 +30,7 @@ import CopyButton from '~/components/CopyButton'
 import CachedImage from '~/components/CachedImage'
 import ToolTip from '~/components/Tooltip'
 import MessageVariationSelectionRow from '~/components/message/MessageVariationSelectionRow'
+import CustomMathBlock from './CustomMathBlock'
 
 const CustomCodeBlock = React.lazy(() => import('./CustomCodeBlock'))
 
@@ -136,9 +137,10 @@ const LazyMessage = observer(
         <Markdown
           remarkPlugins={[[remarkGfm, { singleTilde: false }], remarkMath]}
           rehypePlugins={[[rehypeKatex, { output: 'mathml' }]]}
-          className="prose-spacing rtts-markdown prose flex w-full flex-wrap overflow-x-hidden overscroll-none prose-p:w-full"
+          className="prose-spacing rtts-markdown prose flex w-full flex-wrap overflow-x-hidden overscroll-none prose-p:w-full -[&>*]:w-full"
           components={{
             code: DelayedCustomCodeBlock,
+            math: CustomMathBlock,
           }}
         >
           {content.replace(/\n/g, '  \n')}

src/types/JSX.ts

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+// note: this file fixes TS errors involving the LaTex ability
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace JSX {
+  interface IntrinsicElements {
+    math: any
+  }
+}