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