markdown guide

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

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { Box } from '@chakra-ui/react';
+import ReactMarkdown from 'react-markdown';
+import RemarkGfm from 'remark-gfm';
+import RemarkMath from 'remark-math';
+import RehypeKatex from 'rehype-katex';
+
+import 'katex/dist/katex.min.css';
+import styles from '../index.module.scss';
+import { EventNameEnum } from '../constant';
+
+const Guide = ({ text, onClick }: { text: string; onClick?: (e: any) => void }) => {
+  const formatText = useMemo(() => text.replace(/\[(.*?)\]/g, '[$1]()'), [text]);
+
+  return (
+    <ReactMarkdown
+      className={`markdown ${styles.markdown}`}
+      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>
+          );
+        }
+      }}
+    >
+      {formatText}
+    </ReactMarkdown>
+  );
+};
+
+export default React.memo(Guide);

client/src/components/Markdown/constant.ts

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

client/src/components/Markdown/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import RemarkGfm from 'remark-gfm';
 import RemarkMath from 'remark-math';
@@ -7,19 +7,27 @@ import RemarkBreaks from 'remark-breaks';
 
 import 'katex/dist/katex.min.css';
 import styles from './index.module.scss';
+import dynamic from 'next/dynamic';
 
 import Link from './Link';
 import CodeLight from './CodeLight';
-import MermaidCodeBlock from './img/MermaidCodeBlock';
-import MdImage from './img/Image';
 
-function Code({ inline, className, children }: any) {
+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) {
   const match = /language-(\w+)/.exec(className || '');
+  const codeType = match?.[1];
 
-  if (match?.[1] === 'mermaid') {
+  if (codeType === 'mermaid') {
     return <MermaidCodeBlock code={String(children)} />;
   }
 
+  if (codeType === 'guide') {
+    return <ChatGuide text={String(children)} onClick={onClick} />;
+  }
+
   return (
     <CodeLight className={className} inline={inline} match={match}>
       {children}
@@ -31,7 +39,23 @@ function Image({ src }: { src?: string }) {
   return <MdImage src={src} />;
 }
 
-const Markdown = ({ source, isChatting = false }: { source: string; isChatting?: boolean }) => {
+const Markdown = ({
+  source,
+  isChatting = false,
+  onClick
+}: {
+  source: string;
+  isChatting?: boolean;
+  onClick?: (e: any) => void;
+}) => {
+  const components = useRef({
+    a: Link,
+    img: Image,
+    pre: 'div',
+    p: 'div',
+    code: (props: any) => <Code {...props} onClick={onClick} />
+  });
+
   return (
     <ReactMarkdown
       className={`markdown ${styles.markdown}
@@ -39,13 +63,8 @@ const Markdown = ({ source, isChatting = false }: { source: string; isChatting?:
     `}
       remarkPlugins={[RemarkGfm, RemarkMath, RemarkBreaks]}
       rehypePlugins={[RehypeKatex]}
-      components={{
-        a: Link,
-        img: Image,
-        pre: 'div',
-        p: 'div',
-        code: Code
-      }}
+      // @ts-ignore
+      components={components.current}
     >
       {source}
     </ReactMarkdown>