4.8.8 test fix (#2149)

* perf: code comment

* feat: system plugin input guide

* perf: variable avatar

* feat: feishu webhook

* perf: select tool config tip

* perf: rename variable

* fix: per inherit error

* perf: docker-compose oneapi version and i18n

* perf: ui tip bug

* fix: ts

* perf: pg log

* perf: editor color

* perf: update init

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

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import 'katex/dist/katex.min.css';
-import RemarkMath from 'remark-math';
-import RemarkBreaks from 'remark-breaks';
-import RehypeKatex from 'rehype-katex';
-import RemarkGfm from 'remark-gfm';
+import RemarkMath from 'remark-math'; // Math syntax
+import RemarkBreaks from 'remark-breaks'; // Line break
+import RehypeKatex from 'rehype-katex'; // Math render
+import RemarkGfm from 'remark-gfm'; // Special markdown syntax
+import RehypeExternalLinks from 'rehype-external-links';
 
 import styles from './index.module.scss';
 import dynamic from 'next/dynamic';
@@ -15,6 +16,7 @@ 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 { CodeClassNameEnum } from './utils';
 
 const CodeLight = dynamic(() => import('./CodeLight'), { ssr: false });
 const MermaidCodeBlock = dynamic(() => import('./img/MermaidCodeBlock'), { ssr: false });
@@ -24,15 +26,6 @@ const EChartsCodeBlock = dynamic(() => import('./img/EChartsCodeBlock'), { ssr:
 const ChatGuide = dynamic(() => import('./chat/Guide'), { ssr: false });
 const QuestionGuide = dynamic(() => import('./chat/QuestionGuide'), { ssr: false });
 
-export enum CodeClassName {
-  guide = 'guide',
-  questionGuide = 'questionGuide',
-  mermaid = 'mermaid',
-  echarts = 'echarts',
-  quote = 'quote',
-  files = 'files'
-}
-
 const Markdown = ({
   source = '',
   showAnimation = false
@@ -51,10 +44,13 @@ const Markdown = ({
     []
   );
 
-  const formatSource = source
-    // .replace(/\\n/g, '\n')
-    .replace(/(http[s]?:\/\/[^\s，。]+)([。，])/g, '$1 $2')
-    .replace(/\n*(\[QUOTE SIGN\]\(.*\))/g, '$1');
+  const formatSource = useMemo(() => {
+    const formatSource = source
+      .replace(/(http[s]?:\/\/[^\s，。]+)([。，])/g, '$1 $2') // Follow the link with a space
+      .replace(/\n*(\[QUOTE SIGN\]\(.*\))/g, '$1');
+
+    return formatSource;
+  }, [source]);
 
   return (
     <ReactMarkdown
@@ -62,9 +58,8 @@ const Markdown = ({
       ${showAnimation ? `${formatSource ? styles.waitingAnimation : styles.animation}` : ''}
     `}
       remarkPlugins={[RemarkMath, [RemarkGfm, { singleTilde: false }], RemarkBreaks]}
-      rehypePlugins={[RehypeKatex]}
+      rehypePlugins={[RehypeKatex, [RehypeExternalLinks, { target: '_blank' }]]}
       components={components}
-      linkTarget={'_blank'}
     >
       {formatSource}
     </ReactMarkdown>
@@ -73,6 +68,7 @@ const Markdown = ({
 
 export default React.memo(Markdown);
 
+/* Custom dom */
 const Code = React.memo(function Code(e: any) {
   const { inline, className, children } = e;
 
@@ -82,17 +78,16 @@ const Code = React.memo(function Code(e: any) {
   const strChildren = String(children);
 
   const Component = useMemo(() => {
-    if (codeType === CodeClassName.mermaid) {
+    if (codeType === CodeClassNameEnum.mermaid) {
       return <MermaidCodeBlock code={strChildren} />;
     }
-
-    if (codeType === CodeClassName.guide) {
+    if (codeType === CodeClassNameEnum.guide) {
       return <ChatGuide text={strChildren} />;
     }
-    if (codeType === CodeClassName.questionGuide) {
+    if (codeType === CodeClassNameEnum.questionGuide) {
       return <QuestionGuide text={strChildren} />;
     }
-    if (codeType === CodeClassName.echarts) {
+    if (codeType === CodeClassNameEnum.echarts) {
       return <EChartsCodeBlock code={strChildren} />;
     }
 
@@ -105,7 +100,6 @@ const Code = React.memo(function Code(e: any) {
 
   return Component;
 });
-
 const Image = React.memo(function Image({ src }: { src?: string }) {
   return <MdImage src={src} />;
 });