Message rendering (#6868)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/components/base/markdown.tsx

@@ -4,6 +4,7 @@ import 'katex/dist/katex.min.css'
 import RemarkMath from 'remark-math'
 import RemarkBreaks from 'remark-breaks'
 import RehypeKatex from 'rehype-katex'
+import RehypeRaw from 'rehype-raw'
 import RemarkGfm from 'remark-gfm'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
@@ -15,6 +16,9 @@ import CopyBtn from '@/app/components/base/copy-btn'
 import SVGBtn from '@/app/components/base/svg'
 import Flowchart from '@/app/components/base/mermaid'
 import ImageGallery from '@/app/components/base/image-gallery'
+import { useChatContext } from '@/app/components/base/chat/chat/context'
+import VideoGallery from '@/app/components/base/video-gallery'
+import AudioGallery from '@/app/components/base/audio-gallery'
 
 // Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
 const capitalizationLanguageNameMap: Record<string, string> = {
@@ -33,6 +37,10 @@ const capitalizationLanguageNameMap: Record<string, string> = {
   markdown: 'MarkDown',
   makefile: 'MakeFile',
   echarts: 'ECharts',
+  shell: 'Shell',
+  powershell: 'PowerShell',
+  json: 'JSON',
+  latex: 'Latex',
 }
 const getCorrectCapitalizationLanguageName = (language: string) => {
   if (!language)
@@ -65,6 +73,7 @@ export function PreCode(props: { children: any }) {
   )
 }
 
+// eslint-disable-next-line unused-imports/no-unused-vars
 const useLazyLoad = (ref: RefObject<Element>): boolean => {
   const [isIntersecting, setIntersecting] = useState<boolean>(false)
 
@@ -126,12 +135,7 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
           >
             <div className='text-[13px] text-gray-500 font-normal'>{languageShowName}</div>
             <div style={{ display: 'flex' }}>
-              {language === 'mermaid'
-                && <SVGBtn
-                  isSVG={isSVG}
-                  setIsSVG={setIsSVG}
-                />
-              }
+              {language === 'mermaid' && <SVGBtn isSVG={isSVG} setIsSVG={setIsSVG} />}
               <CopyBtn
                 className='mr-1'
                 value={String(children).replace(/\n$/, '')}
@@ -172,36 +176,83 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
 
 CodeBlock.displayName = 'CodeBlock'
 
+const VideoBlock: CodeComponent = memo(({ node }) => {
+  const srcs = node.children.filter(child => 'properties' in child).map(child => (child as any).properties.src)
+  if (srcs.length === 0)
+    return null
+  return <VideoGallery key={srcs.join()} srcs={srcs} />
+})
+VideoBlock.displayName = 'VideoBlock'
+
+const AudioBlock: CodeComponent = memo(({ node }) => {
+  const srcs = node.children.filter(child => 'properties' in child).map(child => (child as any).properties.src)
+  if (srcs.length === 0)
+    return null
+  return <AudioGallery key={srcs.join()} srcs={srcs} />
+})
+AudioBlock.displayName = 'AudioBlock'
+
+const Paragraph = (paragraph: any) => {
+  const { node }: any = paragraph
+  const children_node = node.children
+  if (children_node && children_node[0] && 'tagName' in children_node[0] && children_node[0].tagName === 'img') {
+    return (
+      <>
+        <ImageGallery srcs={[children_node[0].properties.src]} />
+        <div>{paragraph.children.slice(1)}</div>
+      </>
+    )
+  }
+  return <div>{paragraph.children}</div>
+}
+
+const Img = ({ src }: any) => {
+  return (<ImageGallery srcs={[src]} />)
+}
+
+const Link = ({ node, ...props }: any) => {
+  if (node.properties?.href && node.properties.href?.toString().startsWith('abbr')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { onSend } = useChatContext()
+    const hidden_text = decodeURIComponent(node.properties.href.toString().split('abbr:')[1])
+
+    return <abbr className="underline decoration-dashed !decoration-primary-700 cursor-pointer" onClick={() => onSend?.(hidden_text)} title={node.children[0]?.value}>{node.children[0]?.value}</abbr>
+  }
+  else {
+    return <a {...props} target="_blank" className="underline decoration-dashed !decoration-primary-700 cursor-pointer">{node.children[0] ? node.children[0]?.value : 'Download'}</a>
+  }
+}
+
 export function Markdown(props: { content: string; className?: string }) {
   const latexContent = preprocessLaTeX(props.content)
   return (
     <div className={cn(props.className, 'markdown-body')}>
       <ReactMarkdown
-        remarkPlugins={[[RemarkMath, { singleDollarTextMath: false }], RemarkGfm, RemarkBreaks]}
+        remarkPlugins={[[RemarkGfm, RemarkMath, { singleDollarTextMath: false }], RemarkBreaks]}
         rehypePlugins={[
-          RehypeKatex as any,
+          RehypeKatex,
+          RehypeRaw as any,
+          // The Rehype plug-in is used to remove the ref attribute of an element
+          () => {
+            return (tree) => {
+              const iterate = (node: any) => {
+                if (node.type === 'element' && !node.properties?.src && node.properties?.ref && node.properties.ref.startsWith('{') && node.properties.ref.endsWith('}'))
+                  delete node.properties.ref
+
+                if (node.children)
+                  node.children.forEach(iterate)
+              }
+              tree.children.forEach(iterate)
+            }
+          },
         ]}
         components={{
           code: CodeBlock,
-          img({ src }) {
-            return (
-              <ImageGallery srcs={[src || '']} />
-            )
-          },
-          p: (paragraph) => {
-            const { node }: any = paragraph
-            if (node.children[0].tagName === 'img') {
-              const image = node.children[0]
-
-              return (
-                <>
-                  <ImageGallery srcs={[image.properties.src]} />
-                  <p>{paragraph.children.slice(1)}</p>
-                </>
-              )
-            }
-            return <p>{paragraph.children}</p>
-          },
+          img: Img,
+          video: VideoBlock,
+          audio: AudioBlock,
+          a: Link,
+          p: Paragraph,
         }}
         linkTarget='_blank'
       >