From 45ad3ba22aef1c2f66b07d6b5b561334c4bf67b9 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Sun, 5 Mar 2023 15:28:46 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20md=E8=A7=A3=E6=9E=90=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Markdown/index.module.scss | 18 +++++++++++++-----
 src/components/Markdown/index.tsx         |  3 +--
 src/constants/common.ts                   |  3 +--
 src/pages/api/chat/chatGpt.ts             |  7 +++++++
 src/pages/chat/index.tsx                  |  2 +-
 5 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/Markdown/index.module.scss b/src/components/Markdown/index.module.scss
index a15fc1198..df120ae62 100644
--- a/src/components/Markdown/index.module.scss
+++ b/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;
   }
diff --git a/src/components/Markdown/index.tsx b/src/components/Markdown/index.tsx
index c112cf934..536c48e60 100644
--- a/src/components/Markdown/index.tsx
+++ b/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 || '');
diff --git a/src/constants/common.ts b/src/constants/common.ts
index 4e498190d..8ee8809c3 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -6,8 +6,7 @@ export enum EmailTypeEnum {
 export const introPage = `
 ## 欢迎使用 Doc GPT
 
-时间比较赶，介绍没来得及完善，先直接上怎么使用：  
-
+时间比较赶，介绍没来得及完善，先直接上怎么使用:
 1. 使用邮箱注册账号。  
 2. 进入账号页面，添加关联账号，目前只有 openai 的账号可以添加，直接去 openai 官网，把 API Key 粘贴过来。  
 3. 进入模型页，创建一个模型，建议直接用 ChatGPT。    
diff --git a/src/pages/api/chat/chatGpt.ts b/src/pages/api/chat/chatGpt.ts
index 4fda08656..3e40046a5 100644
--- a/src/pages/api/chat/chatGpt.ts
+++ b/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(
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index 72f01f279..5ff11dd68 100644
--- a/src/pages/chat/index.tsx
+++ b/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>