Add @mantine/form package and ConfigStore to RootStore

Author: small-stone

package.json

@@ -112,6 +112,7 @@
     "@emotion/react": "^11.10.8",
     "@mantine/core": "^6.0.10",
     "@mantine/dropzone": "^6.0.10",
+    "@mantine/form": "^7.5.3",
     "@mantine/hooks": "^6.0.10",
     "@mantine/prism": "^6.0.10",
     "@mantine/tiptap": "^6.0.10",
@@ -126,6 +127,7 @@
     "dotenv": "^16.0.3",
     "i18next": "^23.7.11",
     "js-yaml": "^4.1.0",
+    "lodash.isequal": "^4.5.0",
     "mdast": "^3.0.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-to-markdown": "^2.1.0",

src/util/ideaBridge.ts

@@ -318,6 +318,28 @@ const JStoIdea = {
 
     window.JSJavaBridge.callJava(JSON.stringify(params));
   },
+  readConfig: () => {
+    // 获取完整的用户设置
+    const params = {
+      action: "getSetting/request",
+      metadata: {
+        callback: "IdeaToJSMessage",
+      },
+      payload: {},
+    };
+    window.JSJavaBridge.callJava(JSON.stringify(params));
+  },
+  saveConfig: (data) => {
+    const params = {
+      action: "updateSettings/request",
+      metadata: {
+        callback: "IdeaToJSMessage",
+      },
+      payload: data,
+    };
+    console.log("saveConfig params: ", params);
+    window.JSJavaBridge.callJava(JSON.stringify(params));
+  },
 };
 
 class IdeaBridge {
@@ -444,7 +466,10 @@ class IdeaBridge {
 
   resviceSettings(res) {
     // 用户设置的回调
-    const setting = res.payload.setting;
+    const setting = res?.payload || {};
+    console.log("setting: ", setting);
+    this.executeHandlers("readConfig", setting);
+    return;
 
     let key = setting?.apiKey || "";
     // idea 默认的 key 是 change_me,所以这里要清空
@@ -460,23 +485,12 @@ class IdeaBridge {
       key2: "defaultModel",
     });
 
-    // this.handle.getUserAccessKey({
-    //   endPoint: setting.apiBase,
-    //   accessKey: key,
-    //   keyType: key.startsWith("DC") ? "DevChat" : "OpenAi",
-    // });
-
     this.executeHandlers("getUserAccessKey", {
       endPoint: setting.apiBase,
       accessKey: key,
       keyType: key.startsWith("DC") ? "DevChat" : "OpenAi",
     });
 
-    // this.handle.getSetting({
-    //   value: setting.language,
-    //   key2: "Language",
-    // });
-
     this.executeHandlers("getSetting", {
       value: setting.language,
       key2: "Language",
@@ -645,6 +659,13 @@ class IdeaBridge {
       case "stopDevChat":
         JStoIdea.stopDevChat();
         break;
+      case "readConfig":
+        JStoIdea.readConfig();
+        break;
+      case "saveConfig":
+        // 保存用户设置
+        JStoIdea.saveConfig(message.data);
+        break;
       default:
         break;
     }

src/util/modelName.ts

@@ -0,0 +1,25 @@
+const nameMap = {
+  "gpt-3.5-turbo": "GPT-3.5",
+  "gpt-4": "GPT-4",
+  "gpt-4-turbo-preview": "GPT-4-turbo",
+  "claude-2.1": "CLAUDE-2.1",
+  "xinghuo-3.5": "xinghuo-3.5",
+  "GLM-4": "GLM-4",
+  "ERNIE-Bot-4.0": "ERNIE-Bot-4.0",
+  "togetherai/codellama/CodeLlama-70b-Instruct-hf": "CodeLlama-70b",
+  "togetherai/mistralai/Mixtral-8x7B-Instruct-v0.1": "Mixtral-8x7B",
+  "minimax/abab6-chat": "minimax-abab6",
+  "llama-2-70b-chat": "llama2-70b",
+};
+
+export default function getModelShowName(modelName: string) {
+  if (modelName in nameMap) {
+    return nameMap[modelName];
+  } else if (modelName.lastIndexOf("/") > -1) {
+    return modelName
+      .substring(modelName.lastIndexOf("/") + 1)
+      .toLocaleUpperCase();
+  } else {
+    return modelName.toUpperCase();
+  }
+}

src/views/App.tsx

@@ -1,12 +1,21 @@
 import * as React from "react";
 import { AppShell, LoadingOverlay } from "@mantine/core";
 import ChatPanel from "@/views/pages/ChatPanel";
+import Config from "./pages/Config";
 import Head from "@/views/components/Header";
+import { CurrentRouteType, IRouter, RouterContext } from "./router";
 import "./App.css";
 import "./i18n";
 
 export default function App() {
   const [ready, setReady] = React.useState(false);
+  const [currentRoute, setCurrentRoute] =
+    React.useState<CurrentRouteType>("chat");
+
+  const router: IRouter = {
+    currentRoute,
+    updateRoute: setCurrentRoute,
+  };
 
   React.useEffect(() => {
     if (process.env.platform === "vscode") {
@@ -24,17 +33,26 @@ export default function App() {
   }, []);
 
   return (
-    <AppShell
-      header={ready ? <Head /> : <div></div>}
-      styles={{
-        main: {
-          padding: "40px 0 0 0",
-          fontFamily: "var(--vscode-editor-font-family)",
-          fontSize: "var(--vscode-editor-font-size)",
-        },
-      }}
-    >
-      {ready ? <ChatPanel /> : <LoadingOverlay visible />}
-    </AppShell>
+    <RouterContext.Provider value={router}>
+      <AppShell
+        header={ready ? <Head /> : <div></div>}
+        styles={{
+          main: {
+            padding: "40px 0 0 0",
+            fontFamily: "var(--vscode-editor-font-family)",
+            fontSize: "var(--vscode-editor-font-size)",
+          },
+        }}
+      >
+        {ready ? (
+          <>
+            <ChatPanel />
+            <Config />
+          </>
+        ) : (
+          <LoadingOverlay visible />
+        )}
+      </AppShell>
+    </RouterContext.Provider>
   );
 }

src/views/components/Header/index.tsx

@@ -8,11 +8,12 @@ import {
   createStyles,
 } from "@mantine/core";
 import BalanceTip from "@/views/components/BalanceTip";
-import { IconSettings, IconLanguage } from "@tabler/icons-react";
+import { IconSettings, IconLanguage, IconMessages } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 // @ts-ignore
 import SvgAvatarDevChat from "../MessageAvatar/avatar_devchat.svg";
 import messageUtil from "@/util/MessageUtil";
+import { useRouter } from "@/views/router";
 
 const useStyles = createStyles((theme) => ({
   logoName: {
@@ -21,6 +22,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export default function Head() {
+  const router = useRouter();
   const { classes } = useStyles();
   const { i18n } = useTranslation();
 
@@ -46,10 +48,21 @@ export default function Head() {
   }, []);
 
   const openSetting = () => {
-    messageUtil.sendMessage({
-      command: "doCommand",
-      content: ["workbench.action.openSettings", "@ext:merico.devchat"],
-    });
+    if (router.currentRoute === "config") return;
+    router.updateRoute("config");
+    // messageUtil.sendMessage({
+    //   command: "doCommand",
+    //   content: ["workbench.action.openSettings", "@ext:merico.devchat"],
+    // });
+  };
+
+  const openChat = () => {
+    if (router.currentRoute === "chat") return;
+    router.updateRoute("chat");
+    // messageUtil.sendMessage({
+    //   command: "doCommand",
+    //   content: ["workbench.action.openSettings", "@ext:merico.devchat"],
+    // });
   };
 
   const switchLang = () => {
@@ -89,10 +102,22 @@ export default function Head() {
         </Flex>
         <Flex align="center" gap="xs" sx={{ paddingRight: 10 }}>
           <div>
-            <BalanceTip />
+            <ActionIcon
+              size="sm"
+              onClick={openChat}
+              color={router.currentRoute === "chat" ? "merico" : "gray"}
+              variant={router.currentRoute === "chat" ? "filled" : "subtle"}
+            >
+              <IconMessages size="1.125rem" />
+            </ActionIcon>
           </div>
           <div>
-            <ActionIcon size="sm" onClick={openSetting}>
+            <ActionIcon
+              size="sm"
+              onClick={openSetting}
+              color={router.currentRoute === "config" ? "merico" : "gray"}
+              variant={router.currentRoute === "config" ? "filled" : "subtle"}
+            >
               <IconSettings size="1.125rem" />
             </ActionIcon>
           </div>
@@ -101,6 +126,9 @@ export default function Head() {
               <IconLanguage size="1.125rem" />
             </ActionIcon>
           </div>
+          <div>
+            <BalanceTip />
+          </div>
         </Flex>
       </Flex>
     </Header>