perf: md解析样式

src/components/Markdown/index.module.scss

@@ -129,7 +129,8 @@
 .markdown ul,
 .markdown ol,
 .markdown dl,
-.markdown table {
+.markdown table,
+.markdown pre {
   margin: 15px 0;
 }
 .markdown hr {
@@ -242,7 +243,7 @@
   border-top: 1px solid #cccccc;
 }
 .markdown table tr:nth-child(2n) {
-  background-color: #f8f8f8;
+  background-color: #f0f0f0;
 }
 .markdown img {
   max-width: 100%;
@@ -323,7 +324,8 @@
 }
 .markdown code,
 .markdown tt {
-  background-color: #f8f8f8;
+  background-color: #f0f0f0;
+  border: 1px solid #eaeaea;
   border-radius: 3px 3px 3px 3px;
   margin: 0 2px;
   padding: 0 5px;
@@ -331,13 +333,16 @@
 }
 .markdown pre > code {
   background: none repeat scroll 0 0 transparent;
+  border: medium none;
   margin: 0;
   padding: 0;
   white-space: pre;
 }
 .markdown .highlight pre,
 .markdown pre {
-  background-color: #f8f8f8;
+  background-color: #f0f0f0;
+  border: 1px solid #cccccc;
+  border-radius: 3px 3px 3px 3px;
   font-size: 13px;
   line-height: 19px;
   overflow: auto;
@@ -353,11 +358,14 @@
   line-height: 1.6;
   letter-spacing: 0.5px;
   text-align: justify;
-  white-space: pre;
+
   pre {
     display: block;
     width: 100%;
     padding: 15px;
+    margin: 0;
+    border: none;
+    border-radius: 0;
     background-color: #222 !important;
     overflow-x: auto;
   }

src/components/Markdown/index.tsx

@@ -11,15 +11,14 @@ import Icon from '@/components/Icon';
 const Markdown = ({ source, isChatting }: { source: string; isChatting: boolean }) => {
   // const formatSource = useMemo(() => source.replace(/\n/g, '\n'), [source]);
   const { copyData } = useCopyData();
+  // console.log(source);
   return (
     <ReactMarkdown
       className={`${styles.markdown} ${
         isChatting ? (source === '' ? styles.waitingAnimation : styles.animation) : ''
       }`}
       rehypePlugins={[remarkGfm]}
-      skipHtml={true}
       components={{
-        p: 'div',
         pre: 'div',
         code({ node, inline, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || '');

src/constants/common.ts

@@ -6,8 +6,7 @@ export enum EmailTypeEnum {
 export const introPage = `
 ## 欢迎使用 Doc GPT
 
-时间比较赶，介绍没来得及完善，先直接上怎么使用：  
+时间比较赶，介绍没来得及完善，先直接上怎么使用:
-
 1. 使用邮箱注册账号。  
 2. 进入账号页面，添加关联账号，目前只有 openai 的账号可以添加，直接去 openai 官网，把 API Key 粘贴过来。  
 3. 进入模型页，创建一个模型，建议直接用 ChatGPT。    

src/pages/api/chat/chatGpt.ts

@@ -50,6 +50,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         content: item.value
       })
     );
+    // 第一句话，强调代码类型
+    formatPrompts.unshift({
+      role: ChatCompletionRequestMessageRoleEnum.System,
+      content:
+        'If the content is code or code blocks, please label the code type as accurately as possible.'
+    });
+
     // 获取 chatAPI
     const chatAPI = getOpenAIApi(userApiKey);
     const chatResponse = await chatAPI.createChatCompletion(

src/pages/chat/index.tsx

@@ -306,7 +306,7 @@ const Chat = () => {
                     isChatting={isChatting && index === chatList.length - 1}
                   />
                 ) : (
-                  <Box whiteSpace={'pre'}>{item.value}</Box>
+                  <Box whiteSpace={'pre-wrap'}>{item.value}</Box>
                 )}
               </Box>
             </Flex>