From f7aacefcd6888d6773d63042b20bcc4aeb75a473 Mon Sep 17 00:00:00 2001
From: crazywoola <100913391+crazywoola@users.noreply.github.com>
Date: Fri, 25 Oct 2024 21:51:59 +0800
Subject: [PATCH] feat: support button in markdown (#9876)

---
 web/app/components/base/markdown.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index dbe4087882..33ff23d3b7 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -20,6 +20,7 @@ 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'
 import SVGRenderer from '@/app/components/base/svg-gallery'
+import Button from '@/app/components/base/button'
 
 // Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
 const capitalizationLanguageNameMap: Record<string, string> = {
@@ -240,6 +241,22 @@ const Link = ({ node, ...props }: any) => {
   }
 }
 
+const MarkdownButton = ({ node }: any) => {
+  const { onSend } = useChatContext()
+  const variant = node.properties.dataVariant
+  const message = node.properties.dataMessage
+  const size = node.properties.dataSize
+
+  return <Button variant={variant}
+    size={size}
+    className={cn('!h-8 !px-3 select-none')}
+    onClick={() => onSend?.(message)}
+  >
+    <span className='text-[13px]'>{node.children[0].value}</span>
+  </Button>
+}
+MarkdownButton.displayName = 'MarkdownButton'
+
 export function Markdown(props: { content: string; className?: string }) {
   const latexContent = preprocessLaTeX(props.content)
   return (
@@ -271,6 +288,7 @@ export function Markdown(props: { content: string; className?: string }) {
           audio: AudioBlock,
           a: Link,
           p: Paragraph,
+          button: MarkdownButton,
         }}
         linkTarget='_blank'
       >