Feat/support form in conversation (#9980)

web/app/components/base/markdown.tsx

@@ -20,7 +20,8 @@ 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'
+import MarkdownButton from '@/app/components/base/markdown-blocks/button'
+import MarkdownForm from '@/app/components/base/markdown-blocks/form'
 
 // Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
 const capitalizationLanguageNameMap: Record<string, string> = {
@@ -241,22 +242,6 @@ 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 (
@@ -289,6 +274,7 @@ export function Markdown(props: { content: string; className?: string }) {
           a: Link,
           p: Paragraph,
           button: MarkdownButton,
+          form: MarkdownForm,
         }}
         linkTarget='_blank'
       >