perf: guide modules

client/src/components/Markdown/chat/Guide.tsx

@@ -4,13 +4,37 @@ import ReactMarkdown from 'react-markdown';
 import RemarkGfm from 'remark-gfm';
 import RemarkMath from 'remark-math';
 import RehypeKatex from 'rehype-katex';
+import { event } from '@/utils/plugin/eventbus';
 
 import 'katex/dist/katex.min.css';
 import styles from '../index.module.scss';
-import { EventNameEnum } from '../constant';
+import Image from '../img/Image';
 
-const Guide = ({ text, onClick }: { text: string; onClick?: (e: any) => void }) => {
-  const formatText = useMemo(() => text.replace(/\[(.*?)\]/g, '[$1]()'), [text]);
+function Link(e: any) {
+  const href = e.href;
+  const text = String(e.children);
+  return (
+    <Box as={'li'} py={1} m={0}>
+      <Box
+        as={'span'}
+        color={'blue.600'}
+        textDecoration={'underline'}
+        cursor={'pointer'}
+        onClick={() => {
+          if (href) {
+            return window.open(href, '_blank');
+          }
+          event.emit('guideClick', { text });
+        }}
+      >
+        {text}
+      </Box>
+    </Box>
+  );
+}
+
+const Guide = ({ text }: { text: string }) => {
+  const formatText = useMemo(() => text.replace(/\[(.*?)\]($|\n)/g, '[$1]()\n'), [text]);
 
   return (
     <ReactMarkdown
@@ -18,27 +42,8 @@ const Guide = ({ text, onClick }: { text: string; onClick?: (e: any) => void })
       remarkPlugins={[RemarkGfm, RemarkMath]}
       rehypePlugins={[RehypeKatex]}
       components={{
-        a({ children }: any) {
-          return (
-            <Box as={'li'} py={1} m={0}>
-              <Box
-                as={'span'}
-                color={'blue.600'}
-                textDecoration={'underline'}
-                cursor={'pointer'}
-                onClick={() => {
-                  if (!onClick) return;
-                  onClick({
-                    event: EventNameEnum.guideClick,
-                    data: String(children)
-                  });
-                }}
-              >
-                {String(children)}
-              </Box>
-            </Box>
-          );
-        }
+        a: Link,
+        img: Image
       }}
     >
       {formatText}

client/src/components/Markdown/constant.ts

@@ -1,3 +0,0 @@
-export enum EventNameEnum {
-  guideClick = 'guideClick'
-}

client/src/components/Markdown/img/Image.tsx

@@ -22,6 +22,7 @@ const MdImage = ({ src }: { src?: string }) => {
         fallbackStrategy={'onError'}
         cursor={succeed ? 'pointer' : 'default'}
         loading="eager"
+        objectFit={'contain'}
         onLoad={() => {
           setIsLoading(false);
           setSucceed(true);

client/src/components/Markdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import RemarkGfm from 'remark-gfm';
 import RemarkMath from 'remark-math';
@@ -15,7 +15,7 @@ const MermaidCodeBlock = dynamic(() => import('./img/MermaidCodeBlock'));
 const MdImage = dynamic(() => import('./img/Image'));
 const ChatGuide = dynamic(() => import('./chat/Guide'));
 
-function Code({ inline, className, children, onClick }: any) {
+function Code({ inline, className, children }: any) {
   const match = /language-(\w+)/.exec(className || '');
   const codeType = match?.[1];
 
@@ -24,7 +24,7 @@ function Code({ inline, className, children, onClick }: any) {
   }
 
   if (codeType === 'guide') {
-    return <ChatGuide text={String(children)} onClick={onClick} />;
+    return <ChatGuide text={String(children)} />;
   }
 
   return (
@@ -33,28 +33,19 @@ function Code({ inline, className, children, onClick }: any) {
     </CodeLight>
   );
 }
-
 function Image({ src }: { src?: string }) {
   return <MdImage src={src} />;
 }
 
-const Markdown = ({
-  source,
-  isChatting = false,
-  onClick
-}: {
-  source: string;
-  isChatting?: boolean;
-  onClick?: (e: any) => void;
-}) => {
+const Markdown = ({ source, isChatting = false }: { source: string; isChatting?: boolean }) => {
   const components = useMemo(
     () => ({
       img: Image,
       pre: 'div',
       p: 'div',
-      code: (props: any) => <Code {...props} onClick={onClick} />
+      code: Code
     }),
-    [onClick]
+    []
   );
 
   return (