V4.8.20 feature (#3686)

* Aiproxy (#3649)

* model config

* feat: model config ui

* perf: rename variable

* feat: custom request url

* perf: model buffer

* perf: init model

* feat: json model config

* auto login

* fix: ts

* update packages

* package

* fix: dockerfile

* feat: usage filter & export & dashbord (#3538)

* feat: usage filter & export & dashbord

* adjust ui

* fix tmb scroll

* fix code & selecte all

* merge

* perf: usages list；perf: move components (#3654)

* perf: usages list

* team sub plan load

* perf: usage dashboard code

* perf: dashboard ui

* perf: move components

* add default model config (#3653)

* 4.8.20 test (#3656)

* provider

* perf: model config

* model perf (#3657)

* fix: model

* dataset quote

* perf: model config

* model tag

* doubao model config

* perf: config model

* feat: model test

* fix: POST 500 error on dingtalk bot (#3655)

* feat: default model (#3662)

* move model config

* feat: default model

* fix: false triggerd org selection (#3661)

* export usage csv i18n (#3660)

* export usage csv i18n

* fix build

* 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

* reload buffer (#3665)

* reload buffer

* reload buffer

* tts selector

* fix: err tip (#3666)

* fix: err tip

* perf: training queue

* doc

* fix interactive edge (#3659)

* fix interactive edge

* fix

* comment

* add gemini model

* fix: chat model select

* perf: supplement assistant empty response (#3669)

* perf: supplement assistant empty response

* check array

* perf: max_token count;feat: support resoner output;fix: member scroll (#3681)

* perf: supplement assistant empty response

* check array

* perf: max_token count

* feat: support resoner output

* member scroll

* update provider order

* i18n

* fix: stream response (#3682)

* perf: supplement assistant empty response

* check array

* fix: stream response

* fix: model config cannot set to null

* fix: reasoning response (#3684)

* perf: supplement assistant empty response

* check array

* fix: reasoning response

* fix: reasoning response

* doc (#3685)

* perf: supplement assistant empty response

* check array

* doc

* lock

* animation

* update doc

* update compose

* doc

* doc

---------

Co-authored-by: heheer <heheer@sealos.io>
Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>

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

@@ -0,0 +1,105 @@
+import { eventBus, EventNameEnum } from '@/web/common/utils/eventbus';
+import {
+  Button,
+  Link,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverArrow,
+  PopoverCloseButton
+} from '@chakra-ui/react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useTranslation } from 'next-i18next';
+import React, { useMemo } from 'react';
+import { getQuoteData } from '@/web/core/dataset/api';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+import RawSourceBox from '../core/dataset/RawSourceBox';
+import { getCollectionSourceData } from '@fastgpt/global/core/dataset/collection/utils';
+import Markdown from '.';
+
+const A = ({ children, ...props }: any) => {
+  const { t } = useTranslation();
+
+  const {
+    data: quoteData,
+    loading,
+    runAsync
+  } = useRequest2(getQuoteData, {
+    manual: true
+  });
+
+  // empty href link
+  if (!props.href && typeof children?.[0] === 'string') {
+    const text = useMemo(() => String(children), [children]);
+
+    return (
+      <MyTooltip label={t('common:core.chat.markdown.Quick Question')}>
+        <Button
+          variant={'whitePrimary'}
+          size={'xs'}
+          borderRadius={'md'}
+          my={1}
+          onClick={() => eventBus.emit(EventNameEnum.sendQuestion, { text })}
+        >
+          {text}
+        </Button>
+      </MyTooltip>
+    );
+  }
+
+  // Quote
+  if (props.href === 'QUOTE' && typeof children?.[0] === 'string') {
+    return (
+      <Popover
+        direction="rtl"
+        isLazy
+        placement="auto"
+        strategy={'fixed'}
+        onOpen={() => runAsync(String(children))}
+      >
+        <PopoverTrigger>
+          <Button variant={'unstyled'} minH={0} minW={0} h={'auto'}>
+            <MyTooltip label={t('common:read_quote')}>
+              <MyIcon
+                name={'core/chat/quoteSign'}
+                w={'1rem'}
+                color={'primary.700'}
+                cursor={'pointer'}
+                transform={'translateY(-3px)'}
+              />
+            </MyTooltip>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent boxShadow={'lg'} w={'400px'}>
+          <MyBox isLoading={loading} minH={'300px'}>
+            <PopoverArrow />
+            <PopoverHeader h={'40px'} display={'flex'} alignItems={'center'}>
+              {quoteData?.collection && (
+                <RawSourceBox
+                  collectionId={quoteData?.collection._id}
+                  {...getCollectionSourceData(quoteData?.collection)}
+                  fontSize={'sm'}
+                  color={'black'}
+                  textDecoration={'none'}
+                />
+              )}
+              <PopoverCloseButton />
+            </PopoverHeader>
+            <PopoverBody fontSize={'sm'} maxH={'400px'} overflow={'auto'}>
+              <Markdown source={quoteData?.q} />
+              <Markdown source={quoteData?.a} />
+            </PopoverBody>
+          </MyBox>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return <Link {...props}>{children}</Link>;
+};
+
+export default A;

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/CodeLight.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { Box, Flex } from '@chakra-ui/react';
 import Icon from '@fastgpt/web/components/common/Icon';
-import { useCopyData } from '@/web/common/hooks/useCopyData';
+import { useCopyData } from '@fastgpt/web/hooks/useCopyData';
 import { useTranslation } from 'next-i18next';
 
 export const codeLight: { [key: string]: React.CSSProperties } = {

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

@@ -12,11 +12,11 @@ import {
   ModalCloseButton
 } from '@chakra-ui/react';
 import Icon from '@fastgpt/web/components/common/Icon';
-import { useCopyData } from '@/web/common/hooks/useCopyData';
+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

@@ -10,23 +10,21 @@ import RehypeExternalLinks from 'rehype-external-links';
 import styles from './index.module.scss';
 import dynamic from 'next/dynamic';
 
-import { Link, Button, Box } from '@chakra-ui/react';
-import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
-import { useTranslation } from 'next-i18next';
-import { EventNameEnum, eventBus } from '@/web/common/utils/eventbus';
-import MyIcon from '@fastgpt/web/components/common/Icon';
-import { MARKDOWN_QUOTE_SIGN } from '@fastgpt/global/core/chat/constants';
+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 });
+const A = dynamic(() => import('./A'), { ssr: false });
 
 type Props = {
   source?: string;
@@ -74,7 +72,10 @@ const MarkdownRender = ({ source = '', showAnimation, isDisabled, forbidZhFormat
         '$1$3 $2$4'
       )
       // 处理引用标记
-      .replace(/\n*(\[QUOTE SIGN\]\(.*\))/g, '$1');
+      .replace(/\n*(\[QUOTE SIGN\]\(.*\))/g, '$1')
+      // 处理 [quote:id] 格式引用，将 [quote:675934a198f46329dfc6d05a] 转换为 [675934a198f46329dfc6d05a]()
+      .replace(/\[quote:?\s*([a-f0-9]{24})\](?!\()/gi, '[$1](QUOTE)')
+      .replace(/\[([a-f0-9]{24})\](?!\()/g, '[$1](QUOTE)');
 
     // 还原 URL
     const finalText = textWithSpaces.replace(
@@ -140,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}>
@@ -155,53 +162,6 @@ function Image({ src }: { src?: string }) {
   return <MdImage src={src} />;
 }
 
-function A({ children, ...props }: any) {
-  const { t } = useTranslation();
-
-  // empty href link
-  if (!props.href && typeof children?.[0] === 'string') {
-    const text = useMemo(() => String(children), [children]);
-
-    return (
-      <MyTooltip label={t('common:core.chat.markdown.Quick Question')}>
-        <Button
-          variant={'whitePrimary'}
-          size={'xs'}
-          borderRadius={'md'}
-          my={1}
-          onClick={() => eventBus.emit(EventNameEnum.sendQuestion, { text })}
-        >
-          {text}
-        </Button>
-      </MyTooltip>
-    );
-  }
-
-  // quote link(未使用)
-  if (children?.length === 1 && typeof children?.[0] === 'string') {
-    const text = String(children);
-    if (text === MARKDOWN_QUOTE_SIGN && props.href) {
-      return (
-        <MyTooltip label={props.href}>
-          <MyIcon
-            name={'core/chat/quoteSign'}
-            transform={'translateY(-2px)'}
-            w={'18px'}
-            color={'primary.500'}
-            cursor={'pointer'}
-            _hover={{
-              color: 'primary.700'
-            }}
-            // onClick={() => getCollectionSourceAndOpen(props.href)}
-          />
-        </MyTooltip>
-      );
-    }
-  }
-
-  return <Link {...props}>{children}</Link>;
-}
-
 function RewritePre({ children }: any) {
   const modifiedChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {

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) {