perf: markdown more wrap (#365)

projects/app/src/components/Markdown/chat/Guide.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import RemarkGfm from 'remark-gfm';
 import RemarkMath from 'remark-math';
 import RehypeKatex from 'rehype-katex';
+import RemarkBreaks from 'remark-breaks';
 import { event } from '@/utils/plugin/eventbus';
 
 import 'katex/dist/katex.min.css';
@@ -38,12 +39,14 @@ function MyLink(e: any) {
 }
 
 const Guide = ({ text }: { text: string }) => {
-  const formatText = useMemo(() => text.replace(/\[(.*?)\]($|\n)/g, '[$1]()\n'), [text]);
-
+  const formatText = useMemo(
+    () => text.replace(/\[(.*?)\]($|\n)/g, '[$1]()\n').replace(/\\n/g, '\n '),
+    [text]
+  );
   return (
     <ReactMarkdown
       className={`markdown ${styles.markdown}`}
-      remarkPlugins={[RemarkGfm, RemarkMath]}
+      remarkPlugins={[RemarkGfm, RemarkMath, RemarkBreaks]}
       rehypePlugins={[RehypeKatex]}
       components={{
         a: MyLink,

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

@@ -62,6 +62,8 @@ const Markdown = ({ source, isChatting = false }: { source: string; isChatting?:
     []
   );
 
+  const formatSource = source.replace(/\\n/g, '\n ');
+
   return (
     <ReactMarkdown
       className={`markdown ${styles.markdown}
@@ -73,9 +75,9 @@ const Markdown = ({ source, isChatting = false }: { source: string; isChatting?:
       components={components}
       linkTarget={'_blank'}
     >
-      {source}
+      {formatSource}
     </ReactMarkdown>
   );
 };
 
-export default Markdown;
+export default React.memo(Markdown);