feat: markdown extension (#3663)

* feat: markdown extension

* media cros

* rerank test

* default price

* perf: default model

* fix: cannot custom provider

* fix: default model select

* update bg

* perf: default model selector

* fix: usage export

* i18n

* fix: rerank

* update init extension

* perf: ip limit check

* doubao model order

* web default modle

* perf: tts selector

* perf: tts error

* qrcode package

projects/app/src/components/Markdown/codeBlock/Audio.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { Box } from '@chakra-ui/react';
+import { useMarkdownWidth } from '../hooks';
+
+const AudioBlock = ({ code: audioUrl }: { code: string }) => {
+  const { width, Ref } = useMarkdownWidth();
+
+  useEffect(() => {
+    fetch(audioUrl?.trim(), {
+      mode: 'cors',
+      credentials: 'omit'
+    })
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = URL.createObjectURL(blob);
+        const audio = document.getElementById('player');
+        audio?.setAttribute('src', url);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [audioUrl]);
+
+  return (
+    <Box w={width} ref={Ref}>
+      <audio id="player" controls style={{ width: '100%' }} />
+    </Box>
+  );
+};
+
+export default AudioBlock;

projects/app/src/components/Markdown/codeBlock/Video.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { Box } from '@chakra-ui/react';
+import { useMarkdownWidth } from '../hooks';
+
+const VideoBlock = ({ code: videoUrl }: { code: string }) => {
+  const { width, Ref } = useMarkdownWidth();
+
+  useEffect(() => {
+    fetch(videoUrl?.trim(), {
+      mode: 'cors',
+      credentials: 'omit'
+    })
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = URL.createObjectURL(blob);
+        const video = document.getElementById('player');
+        video?.setAttribute('src', url);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [videoUrl]);
+
+  return (
+    <Box w={width} ref={Ref}>
+      <video id="player" controls />
+    </Box>
+  );
+};
+
+export default VideoBlock;

projects/app/src/components/Markdown/codeBlock/iframe-html.tsx

@@ -16,7 +16,7 @@ import { useCopyData } from '@fastgpt/web/hooks/useCopyData';
 import { useTranslation } from 'next-i18next';
 import { useMarkdownWidth } from '../hooks';
 import type { IconNameType } from '@fastgpt/web/components/common/Icon/type.d';
-import { codeLight } from '../CodeLight';
+import { codeLight } from './CodeLight';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 
 const StyledButton = ({

projects/app/src/components/Markdown/index.tsx

@@ -13,12 +13,14 @@ import dynamic from 'next/dynamic';
 import { Box } from '@chakra-ui/react';
 import { CodeClassNameEnum } from './utils';
 
-const CodeLight = dynamic(() => import('./CodeLight'), { ssr: false });
+const CodeLight = dynamic(() => import('./codeBlock/CodeLight'), { ssr: false });
 const MermaidCodeBlock = dynamic(() => import('./img/MermaidCodeBlock'), { ssr: false });
 const MdImage = dynamic(() => import('./img/Image'), { ssr: false });
 const EChartsCodeBlock = dynamic(() => import('./img/EChartsCodeBlock'), { ssr: false });
 const IframeCodeBlock = dynamic(() => import('./codeBlock/Iframe'), { ssr: false });
 const IframeHtmlCodeBlock = dynamic(() => import('./codeBlock/iframe-html'), { ssr: false });
+const VideoBlock = dynamic(() => import('./codeBlock/Video'), { ssr: false });
+const AudioBlock = dynamic(() => import('./codeBlock/Audio'), { ssr: false });
 
 const ChatGuide = dynamic(() => import('./chat/Guide'), { ssr: false });
 const QuestionGuide = dynamic(() => import('./chat/QuestionGuide'), { ssr: false });
@@ -139,6 +141,12 @@ function Code(e: any) {
         </IframeHtmlCodeBlock>
       );
     }
+    if (codeType === CodeClassNameEnum.video) {
+      return <VideoBlock code={strChildren} />;
+    }
+    if (codeType === CodeClassNameEnum.audio) {
+      return <AudioBlock code={strChildren} />;
+    }
 
     return (
       <CodeLight className={className} codeBlock={codeBlock} match={match}>

projects/app/src/components/Markdown/utils.ts

@@ -7,7 +7,9 @@ export enum CodeClassNameEnum {
   files = 'files',
   latex = 'latex',
   iframe = 'iframe',
-  html = 'html'
+  html = 'html',
+  video = 'video',
+  audio = 'audio'
 }
 
 function htmlTableToLatex(html: string) {