feature: mermaid support

hzeyuan · Feb 1, 2024 · e9720c4 · e9720c4
1 parent e3f2dc5
commit e9720c4
Show file tree

Hide file tree

Showing 11 changed files with 345 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,6 @@ OpenGPTs 是一款开源的浏览器插件，支持语音输入,函数调用,多
 [![][github-issues-shield]][github-issues-link]
 [![][github-license-shield]][github-license-link]<br>
 
-
 **Share OpenGPTs Repository**
 
 [![][share-x-shield]][share-x-link]
@@ -39,8 +38,6 @@ OpenGPTs 是一款开源的浏览器插件，支持语音输入,函数调用,多
 
 </div>
 
-
-
 ## 👋🏻 开始和介绍
 
 开源的GPT浏览器插件并不多，但我觉得浏览器插件是AI当前很好的一个形态，所以我们决定开发一个。
@@ -52,23 +49,21 @@ OpenGPTs 是一款开源的浏览器插件，支持语音输入,函数调用,多
 - 开发: 👏🏻欢迎任何小伙伴参与进来，关于开发可以查看 [这里](#开发指导)
 - 联系方式: 请加入我们的QQ群：860859251,邮箱:yixotieq@gmail.com
 
-
 **野望**：我们的最终设想是希望能够以这个插件为平台📈，把**每个GPTs当成一个Agent**🤖，实现各种业务流程的自动化，最大程度解放大家的生产力🚀，帮助大家更好的摸鱼🐟！哈哈！😄
 
 如果本项目对大家有帮助，欢迎点一下上面的Star🌟，欢迎转发，这是对我们最大的支持！🙌
 
 如果有任何问题，欢迎提issue💬，如果有新的功能，欢迎大家提PR。也欢迎加入我们的开发者群：860859251。👩‍💻
 
-
 ## 为什么要做OpenGPTs？ 🤔💡
 
 <details><summary><code><b>1. 关于AI应用的一些想法</b></code></summary>
 
-* 网页对浏览器的权限有限，但插件却可以修改任何页面，所以我觉得插件是做AI产品的一个很好的形态。
-* 我讨论重复的工作，作为一名开发，每次打开F12,都是一些重复工作~，这时候我会幻想AI能否替我解决一些事情。
-* - GPT能否帮我处理网络请求，方便我更好的抓取数据？
-* - 能否让GPT来操作dom，来帮我做一些固定的操作，自动发推特，自动b站点赞？或者满足一些人们千奇百怪的需求(重点是让GPT生成这些脚本)
-* - AIGC时代，能否有一款AI版的插件系统，上面有各种各样的插件，去广告，甚至改面网页的样貌，每个人都有独一无二的网站。
+- 网页对浏览器的权限有限，但插件却可以修改任何页面，所以我觉得插件是做AI产品的一个很好的形态。
+- 我讨论重复的工作，作为一名开发，每次打开F12,都是一些重复工作~，这时候我会幻想AI能否替我解决一些事情。
+- - GPT能否帮我处理网络请求，方便我更好的抓取数据？
+- - 能否让GPT来操作dom，来帮我做一些固定的操作，自动发推特，自动b站点赞？或者满足一些人们千奇百怪的需求(重点是让GPT生成这些脚本)
+- - AIGC时代，能否有一款AI版的插件系统，上面有各种各样的插件，去广告，甚至改面网页的样貌，每个人都有独一无二的网站。
 
 </details>
 
@@ -78,68 +73,68 @@ OpenGPTs 是一款开源的浏览器插件，支持语音输入,函数调用,多
 
 ChatGPT很厉害，但ChatGPT的产品交互我觉得可以做的更好，甚至有时候有很多想要吐槽的地方。
 与其等Openai更新，不如自己动手，满足自己的功能，结合插件可以实现各式各样的效果。
-* 截图，直接提交，而不是保存图片，在到页面上提交
-* 同时多个GPTs对话，而不是要一个个切换。
-* @功能,GPTs之间能否共享对话,互相调用, 而不是一个回答完后，在粘贴给下一个GPTs
-* 同时多个窗口，比如网页中有6个窗口，而不是只有固定一个。
-* 对话自动播放语音，音色可以选择。
-* 直接集成多家大模型，Claude2 gpt3.5,Gemini pro,可以在网页端调用。
+
+- 截图，直接提交，而不是保存图片，在到页面上提交
+- 同时多个GPTs对话，而不是要一个个切换。
+- @功能,GPTs之间能否共享对话,互相调用, 而不是一个回答完后，在粘贴给下一个GPTs
+- 同时多个窗口，比如网页中有6个窗口，而不是只有固定一个。
+- 对话自动播放语音，音色可以选择。
+- 直接集成多家大模型，Claude2 gpt3.5,Gemini pro,可以在网页端调用。
 
 还有一些很多我感觉很有用的功能。
 
 </details>
 
-
 ## 2. ✨ 亮点功能：
 
 ### 2.1 GPTs模块
 
 |     功能名称     |                                                               功能描述                                                                | 完成 |
-| :--------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :------: |
-|     一键同步     |                                           自动同步官网GPTs所有数据：对话数，收藏数，用户数                                            |    ✅    |
-|     批量管理     |              批量管理自己的所有GPTs：自定义排序；批量删除；查询搜索；一键发布到商店；一键复制到剪切板（标题+简介+链接）               |    ✅    |
-|     一键生成     |                             输入标题，一键生成GPTs，复刻官网功能，但可以自定义提示词！（后续封装出接口）                              |    ✅    |
-|     一键复刻     |                                   对自己已有GPTs，一键复刻成其他语言，或者通过语言调整其他微调版本                                    |    ✅    |
-| 批量删除GPT对话  |     参考[chatGPTBox](https://github.com/josStorer/chatGPTBox)，我们为大家提供了批量删除OpenAI对话的功能，这个功能实在是太痛点了！     |    ✅    |
-| 一键调用GPTs对话 |                                              一次输入，同时调用多个模型，快速对比结果。                                               |    ✅    |
-|      排行榜      | 参考[gpts-works](https://github.com/all-in-aigc/gpts-works)，我们希望提供一个更加全面和准确的排行榜，让大家更好的选择和推广自己的GPTs |    ✅    |
-|     更漂亮UI     |                                                   提供更漂亮的UI和更便捷的交互模式                                                    |    ✅    |
-
-
+| :--------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :--: |
+|     一键同步     |                                           自动同步官网GPTs所有数据：对话数，收藏数，用户数                                            |  ✅  |
+|     批量管理     |              批量管理自己的所有GPTs：自定义排序；批量删除；查询搜索；一键发布到商店；一键复制到剪切板（标题+简介+链接）               |  ✅  |
+|     一键生成     |                             输入标题，一键生成GPTs，复刻官网功能，但可以自定义提示词！（后续封装出接口）                              |  ✅  |
+|     一键复刻     |                                   对自己已有GPTs，一键复刻成其他语言，或者通过语言调整其他微调版本                                    |  ✅  |
+| 批量删除GPT对话  |     参考[chatGPTBox](https://github.com/josStorer/chatGPTBox)，我们为大家提供了批量删除OpenAI对话的功能，这个功能实在是太痛点了！     |  ✅  |
+| 一键调用GPTs对话 |                                              一次输入，同时调用多个模型，快速对比结果。                                               |  ✅  |
+|      排行榜      | 参考[gpts-works](https://github.com/all-in-aigc/gpts-works)，我们希望提供一个更加全面和准确的排行榜，让大家更好的选择和推广自己的GPTs |  ✅  |
+|     更漂亮UI     |                                                   提供更漂亮的UI和更便捷的交互模式                                                    |  ✅  |
 
 ### 2.2 Chat聊天模块
 
-|       功能名称       |                                                               功能描述                                                               | 完成 |
-| :------------------: | :----------------------------------------------------------------------------------------------------------------------------------: | :------: |
-|       截图提交       |                                            直接在聊天界面中提交截图，而不需先保存后上传                                             |    ❌    |
-|      多GPTs对话      |                                       同时与多个GPT模型对话，无需逐一切换，提升交互效率                                       |    ✅    |
-|    @任意GPTs，模型    | GPTs,模型之间可以共享对话内容，互相调用，实现信息的快速共享和传递，避免重复输入相同信息 |    ✅    |
-|      多窗口交互      |                                    在一个界面中开设多个窗口，同时进行多任务操作，提高效率                                     |    ✅   |
-|       语音播放       |                                                      对话内容自动转换为语音播放                                                      |    ❌    |
-|   网页端ChatGPT调用   |                                   让插件直接在网页端调用ChatGPT, GPT3.5, GPT4.0 GPTs                                   |    ✅    |
-|   网页端Claude调用   |                                   让插件直接在网页端调用Claude                             |    ❌    |
-|   网页端Gemini Pro调用   |                                   让插件直接在网页端调用Gemini Pro                                  |    ❌    |
-| ChatGPT API Key调用  |                                                  使用API key调用, GPT3.5, GPT4.0                                                   |    ✅    |
-| 聊天历史对话管理         |                                                     提供聊天历史的管理和搜索功能                                                     |    ✅    |
-|        /预设功能        |                                                   提供快捷操作和自定义预设功能选项                                                   |    ✅    |
-|       流程图生成       |                                                自动从描述中生成流程图或概念图等视觉内容                                                |    ❌    |
-|       函数调用       |                                                   通过命令行直接调用特定函数或服务                                                   |    ❌    |
-|      多模态输入      |                                                  支持文本、图像、音频等多种输入模式                                                  |    ❌    |
-
-
-### 2.3 知识库管理，文件夹系统模态
+|       功能名称       |                                        功能描述                                         | 完成 |
+| :------------------: | :-------------------------------------------------------------------------------------: | :--: |
+|       截图提交       |                      直接在聊天界面中提交截图，而不需先保存后上传                       |  ❌  |
+|      多GPTs对话      |                    同时与多个GPT模型对话，无需逐一切换，提升交互效率                    |  ✅  |
+|   @任意GPTs，模型    | GPTs,模型之间可以共享对话内容，互相调用，实现信息的快速共享和传递，避免重复输入相同信息 |  ✅  |
+|      多窗口交互      |                 在一个界面中开设多个窗口，同时进行多任务操作，提高效率                  |  ✅  |
+|       语音播放       |                               对话内容自动转换为语音播放                                |  ❌  |
+|  网页端ChatGPT调用   |                   让插件直接在网页端调用ChatGPT, GPT3.5, GPT4.0 GPTs                    |  ✅  |
+|   网页端Claude调用   |                              让插件直接在网页端调用Claude                               |  ❌  |
+| 网页端Gemini Pro调用 |                            让插件直接在网页端调用Gemini Pro                             |  ❌  |
+| ChatGPT API Key调用  |                             使用API key调用, GPT3.5, GPT4.0                             |  ✅  |
+|   聊天历史对话管理   |                              提供聊天历史的管理和搜索功能                               |  ✅  |
+|      /预设功能       |                            提供快捷操作和自定义预设功能选项                             |  ✅  |
+|      流程图生成      |                        自动从描述中生成流程图或概念图等视觉内容                         |  ❌  |
+|       函数调用       |                            通过命令行直接调用特定函数或服务                             |  ❌  |
+|      多模态输入      |                           支持文本、图像、音频等多种输入模式                            |  ❌  |
+| 生成流程图(mermaid)  |                                     支出输出流程图                                      |  ✅  |
+
+### 2.3 UI通用
+
+|   功能名称    |                   功能描述                   | 完成 |
+| :-----------: | :------------------------------------------: | :--: |
+| 暗黑/明亮模式 | 提供暗黑/明亮模式，方便用户在不同环境下使用  |  ✅  |
+|  多语言支持   | 提供多语言支持，方便用户在不同语言环境下使用 |  ✅  |
+
+### 2.4 知识库管理，文件夹系统模态
 
 #### 暂无
 
-
-### 2.4 RPA自动脚本执行，Agent WorkFlow
+### 2.5 RPA自动脚本执行，Agent WorkFlow
 
 #### 暂无
 
-
-
-
-
 ## 极简安装步骤：
 
 - 打开[OpenAI官网](https://chat.openai.com/)，登录你的OpenAI账号，进行一次GPTs的对话，注意，这里需要有Plus的权限。

diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -1,7 +1,7 @@
 {
   "name": "OpenGPTS",
   "displayName": "OpenGPTs",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "OpenGPTs- Powerful GPTs Colipot | 强大的gpts管理器",
   "author": " hzeyuan.github.com <[email protected]>",
   "scripts": {
@@ -31,16 +31,16 @@
     "@tiptap/react": "^2.1.13",
     "@tiptap/starter-kit": "^2.1.13",
     "ahooks": "^3.7.8",
+    "ai": "^2.2.28",
     "antd": "^5.12.1",
     "cheerio": "1.0.0-rc.12",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
     "framer-motion": "^10.16.16",
     "i18next": "^23.7.16",
     "jquery": "^3.7.1",
-    "mermaid": "^10.6.1",
-    "ai": "^2.2.28",
     "lodash": "^4.17.21",
+    "mermaid": "^10.6.1",
     "nanoid": "^5.0.4",
     "next": "14.0.2",
     "nextjs-cors": "^2.2.0",
@@ -57,21 +57,20 @@
     "react-tabs": "^6.0.2",
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.3",
+    "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "remark-breaks": "^3.0.2",
     "swr": "^2.2.4",
     "tippy.js": "^6.3.7",
-    "unist-util-visit-parents": "^6.0.1",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.1",
     "webextension-polyfill": "^0.10.0",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
-    "@plasmohq/rps": "1.8.7",
     "@opengpts/types": "workspace:*",
+    "@plasmohq/rps": "1.8.7",
     "@types/chrome": "0.0.251",
     "@types/node": "20.9.0",
     "@types/react": "18.2.37",

diff --git a/apps/extension/src/components/Chat/Chat.tsx b/apps/extension/src/components/Chat/Chat.tsx
@@ -210,9 +210,7 @@ export const Chat = forwardRef<ChatRef, ChatProps>(
                         ),
                     });
                 }
-                console.log("useChat", error);
                 // setError(error.message)
-                // alert(error.message)
             },
             onResponse: (response) => {
                 handleScrollToBottom();
@@ -270,6 +268,7 @@ export const Chat = forwardRef<ChatRef, ChatProps>(
             //TODO: use model that was mentioned last, if not exist, use default model, temporarily
             const mentionType = _.get(mention, "type", "");
             const modelKey = mentionType === "GPTs" ? "gpt-4-gizmo" : mention?.key ?? model.key;
+            console.log('modelKey', modelKey)
             const quoteMessage = getQuoteMessage(chatId);
             const capturedImage = useScreenCapture.getState().capturedImage;
 
@@ -351,8 +350,8 @@ export const Chat = forwardRef<ChatRef, ChatProps>(
                 {
                     ...message,
                     content: `${selection}
-            ${webSearchPrompt}
-            ${content}`,
+${webSearchPrompt}
+${content}`.trim(),
                 },
                 {
                     options,
@@ -383,8 +382,6 @@ export const Chat = forwardRef<ChatRef, ChatProps>(
             setContent(v);
         };
 
-        const handleHideInputArea = () => { };
-
         useImperativeHandle(ref, () => {
             return {
                 handleSubmit: () => inputRef.current.submit(),
@@ -407,16 +404,14 @@ export const Chat = forwardRef<ChatRef, ChatProps>(
         }, [messages]);
 
         useEffect(() => {
-            // const model = MODELS.find(({ name }) => name === model.key)
-            console.log("设置模型为", model?.key);
+            console.debug("设置模型为", model?.key);
             if (model) {
                 setMode(model.mode);
             }
         }, [model]);
 
         useEffect(() => {
             const messages = getChatMessages(chatId);
-            console.log("messages", messages);
             setMessages(messages);
         }, [chatId]);