fix:优化前端界面

869413421 · Mar 20, 2023 · d6e2286 · d6e2286
1 parent 9b81109
commit d6e2286
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 190 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,8 @@
 > 详情参考官方详细[参数示例](https://beta.openai.com/examples)
 
 # 更新记录
+- [x] fix: 优化前端显示界面。 2023-03-20
+- [x] feat: 增加接口代理配置。 2023-03-20
 - [x] fix: 修复前端部分BUG，优化富文本代码格式。 2023-03-13
 - [x] feat: 增加socsk5代理的支持，命令行参数配置。2023-03-13
 - [x] feat: 增加docker-compose.yaml。2023-03-08
@@ -33,10 +35,6 @@
 # 使用前提
 > 有openai账号，并且创建好api_key，注册事项可以参考[此文章](https://juejin.cn/post/7173447848292253704) 。
 
-# 项目初衷
-> 自chatgpt流行以后，一直在使用其作为自己的编码工具。奈何官网时常在问题问到一半时短路，一些得到的答案就此丢失。
-> 为了解决这个问题，我选择了更加稳定的API套上客户端来作为自己的工具。定制化地做了一些功能，如存储提问记录，统计提问信息等一些功能，同时做上内网穿透提供给没有办法体验chatgpt的朋友使用，由此大大降低了使用门槛。
-> 当前项目是初始功能版本，开源出来给有需要的朋友使用。
 
 # 快速开始
 

diff --git a/chat-new/package.json b/chat-new/package.json
@@ -16,11 +16,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.5",
+    "sanitize-html": "^2.10.0",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/sanitize-html": "^2.9.0",
     "@vitejs/plugin-react": "^3.1.0",
     "less": "^4.1.3",
     "typescript": "^4.9.3",

diff --git a/chat-new/src/App.tsx b/chat-new/src/App.tsx
@@ -15,6 +15,7 @@ import axios from 'axios'
 import clipboardy from 'clipboardy'
 import MdEditor from "md-editor-rt"
 import "md-editor-rt/lib/style.css"
+import sanitizeHtml from 'sanitize-html';
 
 const defaultQuickReplies = [
   {
@@ -96,13 +97,21 @@ function App() {
     switch (type) {
       case 'text':
         let text = content.text
-        return (
-            <Bubble><MdEditor
-                style={{float: 'left'}}
-                modelValue = { text } // 要展示的markdown字符串
-                previewOnly = { true } // 只展示预览框部分
-             ></MdEditor></Bubble>
-        )
+        let isHtml = sanitizeHtml(text) !== text;
+        if(isHtml){
+          return (
+              <Bubble><MdEditor
+                  style={{float: 'left'}}
+                  modelValue = { text } // 要展示的markdown字符串
+                  previewOnly = { true } // 只展示预览框部分
+              ></MdEditor></Bubble>
+          )
+        }else{
+          return (
+              <Bubble>{text}</Bubble>
+          )
+        }
+
       default:
         return null
     }

diff --git a/resources/view/index.html b/resources/view/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AI Chatbot</title>
-    <script type="module" crossorigin src="/assets/index-f2f1e40f.js"></script>
+    <script type="module" crossorigin src="/assets/index-1dc493db.js"></script>
     <link rel="stylesheet" href="/assets/index-4c8bd10d.css">
   </head>
   <body>

diff --git a/static/assets/index-1dc493db.js b/static/assets/index-1dc493db.js