V4.6.6-1 (#656)

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

@@ -23,7 +23,7 @@ function MyLink(e: any) {
     <Box as={'li'} mb={1}>
       <Box
         as={'span'}
-        color={'blue.700'}
+        color={'primary.700'}
         textDecoration={'underline'}
         cursor={'pointer'}
         onClick={() => {

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

@@ -77,7 +77,7 @@ const QuestionGuide = ({ text }: { text: string }) => {
                   name={'core/chat/sendLight'}
                   w={'14px'}
                   cursor={'pointer'}
-                  _hover={{ color: 'blue.500' }}
+                  _hover={{ color: 'primary.500' }}
                   onClick={() => eventBus.emit(EventNameEnum.sendQuestion, { text })}
                 />
               </MyTooltip>

projects/app/src/components/Markdown/img/MermaidCodeBlock.tsx

@@ -123,7 +123,7 @@ const MermaidBlock = ({ code }: { code: string }) => {
         position={'absolute'}
         color={'myGray.600'}
         _hover={{
-          color: 'blue.600'
+          color: 'primary.600'
         }}
         right={0}
         top={0}

projects/app/src/components/Markdown/index.module.scss

@@ -4,7 +4,7 @@
   width: 3px;
   height: 14px;
   transform: translate(4px, 2px) scaleY(1.3);
-  background-color: var(--chakra-colors-blue-700);
+  background-color: var(--chakra-colors-primary-700);
   animation: blink 0.6s infinite;
 }
 
@@ -17,7 +17,7 @@
     width: 3px;
     height: 14px;
     transform: translate(4px, 2px) scaleY(1.3);
-    background-color: var(--chakra-colors-blue-700);
+    background-color: var(--chakra-colors-primary-700);
     animation: blink 0.6s infinite;
   }
 }
@@ -129,7 +129,7 @@
 .markdown dl,
 .markdown table,
 .markdown pre {
-  margin: 10px 0;
+  margin: 14px 0;
 }
 .markdown > h2:first-child,
 .markdown > h1:first-child,
@@ -368,7 +368,7 @@
 
   a {
     text-decoration: underline;
-    color: var(--chakra-colors-blue-600);
+    color: var(--chakra-colors-primary-700);
   }
 
   table {

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

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
 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 '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 styles from './index.module.scss';
 import dynamic from 'next/dynamic';
 
@@ -74,7 +74,7 @@ function A({ children, ...props }: any) {
     return (
       <MyTooltip label={t('core.chat.markdown.Quick Question')}>
         <Button
-          variant={'base'}
+          variant={'whitePrimary'}
           size={'xs'}
           borderRadius={'md'}
           my={1}
@@ -96,10 +96,10 @@ function A({ children, ...props }: any) {
             name={'core/chat/quoteSign'}
             transform={'translateY(-2px)'}
             w={'18px'}
-            color={'blue.500'}
+            color={'primary.500'}
             cursor={'pointer'}
             _hover={{
-              color: 'blue.700'
+              color: 'primary.700'
             }}
             onClick={() => getFileAndOpen(props.href)}
           />
@@ -112,17 +112,6 @@ function A({ children, ...props }: any) {
 }
 
 const Markdown = ({ source, isChatting = false }: { source: string; isChatting?: boolean }) => {
-  const components = useMemo(
-    () => ({
-      img: Image,
-      pre: 'div',
-      p: 'div',
-      code: Code,
-      a: A
-    }),
-    []
-  );
-
   const formatSource = source
     .replace(/\\n/g, '\n&nbsp;')
     .replace(/(http[s]?:\/\/[^\s，。]+)([。，])/g, '$1 $2')
@@ -133,10 +122,15 @@ const Markdown = ({ source, isChatting = false }: { source: string; isChatting?:
       className={`markdown ${styles.markdown}
       ${isChatting ? `${formatSource ? styles.waitingAnimation : styles.animation}` : ''}
     `}
-      remarkPlugins={[RemarkGfm, RemarkMath, RemarkBreaks]}
+      remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
       rehypePlugins={[RehypeKatex]}
-      // @ts-ignore
-      components={components}
+      components={{
+        img: Image,
+        pre: 'div',
+        p: (pProps) => <p {...pProps} dir="auto" />,
+        code: Code,
+        a: A
+      }}
       linkTarget={'_blank'}
     >
       {formatSource}