Merge pull request #7 from devchat-ai/feat/i18n

Feat/i18n

Author: small-stone

package.json

@@ -44,7 +44,7 @@
     "typescript"
   ],
   "scripts": {
-    "compile": "webpack 1",
+    "compile": "webpack",
     "watch": "webpack --watch",
     "package": "webpack --mode production --devtool hidden-source-map",
     "compile-tests": "tsc -p . --outDir out",

src/util/bridge.md

@@ -13,7 +13,7 @@
   // 1. 打开设置
   // 2. 启动 ask code 安装
   // 3. 设置 access key
-- featureToggles ？？
+- featureToggles // 判断有没有 ask code
 - isDevChatInstalled // 判断 ask code 是否安装
 
 - historyMessages // 页面的历史消息
@@ -42,6 +42,10 @@
 - receiveMessage // 对话
 - systemMessage // 没用了
 
+## 函数
+
+onInitializationFinish // 初始化完成之后服务端掉用
+
 # css
 
 --vscode-editor-font-familyy

src/util/ideaBridge.ts

@@ -161,16 +161,19 @@ const JStoIdea = {
 
     window.JSJavaBridge.callJava(JSON.stringify(params));
   },
-  updateSetting: (value: string) => {
-    // 因为现在只有更换模型，所以直接取 value
+  updateSetting: (message: { value: string; key2: string }) => {
+    if (message.key2 === "Language") {
+      JStoIdea.setLanguage(message.value);
+      return;
+    }
     const params = {
       action: "updateSetting/request",
       metadata: {
         callback: "IdeaToJSMessage",
       },
       payload: {
         setting: {
-          currentModel: value,
+          currentModel: message.value,
         },
       },
     };
@@ -242,6 +245,19 @@ const JStoIdea = {
 
     window.JSJavaBridge.callJava(JSON.stringify(params));
   },
+  setLanguage: (language) => {
+    const params = {
+      action: "updateLanguage/request",
+      metadata: {
+        callback: "IdeaToJSMessage",
+      },
+      payload: {
+        language: language || "en",
+      },
+    };
+    console.log("setLanguage params: ", params);
+    window.JSJavaBridge.callJava(JSON.stringify(params));
+  },
   userInput: (message) => {
     const params = {
       action: "input/request",
@@ -372,10 +388,17 @@ class IdeaBridge {
       value: setting.currentModel,
     });
     this.handle.getUserAccessKey({
+      accessKey: setting.apiKey,
+    });
+    this.handle.getUserSetting({
       endPoint: setting.apiBase,
       accessKey: setting.apiKey,
       keyType: setting.apiKey.startsWith("DC") ? "DevChat" : "OpenAi",
     });
+    this.handle.getSetting({
+      value: setting.language,
+      key2: "Language",
+    });
   }
 
   resviceAccessKey(res: string = "") {
@@ -492,7 +515,7 @@ class IdeaBridge {
         JStoIdea.viewDiff(message.content);
         break;
       case "updateSetting":
-        JStoIdea.updateSetting(message.value);
+        JStoIdea.updateSetting(message);
         break;
       case "doCommit":
         JStoIdea.commit(message.content);
@@ -515,6 +538,9 @@ class IdeaBridge {
       case "userInput":
         JStoIdea.userInput(message);
         break;
+      case "setLanguage":
+        JStoIdea.setLanguage(message);
+        break;
       default:
         break;
     }

src/views/components/BalanceTip/index.tsx

@@ -9,6 +9,7 @@ import {
   Group,
   LoadingOverlay,
 } from "@mantine/core";
+import { Trans } from "react-i18next";
 
 const currencyMap = {
   USD: "$",
@@ -19,7 +20,10 @@ function formatBalance(balance: number) {
   return Math.round(balance * 1000) / 1000;
 }
 
-function formatCurrency(balance: number, currency: string) {
+function formatCurrency(balance: number | null, currency: string) {
+  if (balance === null || balance === undefined) {
+    return "";
+  }
   return `${currencyMap[currency] || currency}${balance}`;
 }
 
@@ -34,13 +38,13 @@ const envMap = {
   },
 };
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 export default function WechatTip() {
   const [bindWechat, setBindWechat] = useState(false);
   const [balance, setBalance] = useState<null | number>(null);
   const [currency, setCurrency] = useState("USD");
   const [accessKey, setAccessKey] = useState("");
   const [env, setEnv] = useState("prod");
+
   const [loading, setLoading] = useState(false);
   const platform = process.env.platform;
 
@@ -82,7 +86,7 @@ export default function WechatTip() {
   useEffect(() => {
     getSettings();
     messageUtil.registerHandler(
-      "getUserAccessKey",
+      "getUserSetting",
       (message: { endPoint: string; accessKey: string; keyType: string }) => {
         if (message.keyType === "DevChat" && message.accessKey) {
           if (message.endPoint.includes("api-test.devchat.ai")) {
@@ -105,6 +109,8 @@ export default function WechatTip() {
     });
   };
 
+  const formatedCurrency = formatCurrency(balance, currency);
+
   if (balance === null || balance === undefined) {
     return null;
   }
@@ -138,18 +144,19 @@ export default function WechatTip() {
       >
         <Group style={{ width: "90%" }}>
           <Text size="sm">
-            Your remaining credit is {formatCurrency(balance, currency)}. Sign
-            in to{" "}
-            {platform === "idea" ? (
-              <Text td="underline" c="blue" onClick={(e) => openLink(e)}>
-                web.devchat.ai{" "}
-              </Text>
-            ) : (
-              <a href={envMap[env].link} target="_blank">
-                web.devchat.ai{" "}
-              </a>
-            )}
-            to {bindWechat ? "purchase more tokens." : "earn additional ¥8"}
+            <Trans i18nKey="balance" formatedCurrency={formatedCurrency}>
+              Your remaining credit is {{ formatedCurrency }}. Sign in to{" "}
+              {platform === "idea" ? (
+                <Text td="underline" c="blue" onClick={(e) => openLink(e)}>
+                  web.devchat.ai{" "}
+                </Text>
+              ) : (
+                <a href={envMap[env].link} target="_blank">
+                  web.devchat.ai{" "}
+                </a>
+              )}
+              to purchase more tokens.
+            </Trans>
           </Text>
           <LoadingOverlay visible={loading} />
         </Group>

src/views/components/Header/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Header,
   Avatar,
@@ -22,7 +22,28 @@ const useStyles = createStyles((theme) => ({
 
 export default function Head() {
   const { classes } = useStyles();
-  const { t, i18n } = useTranslation();
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    messageUtil.sendMessage({
+      command: "getSetting",
+      key1: "DevChat",
+      key2: "Language",
+    });
+    messageUtil.registerHandler(
+      "getSetting",
+      (data: { key2: string; value: string }) => {
+        console.log("data: ", data);
+        if (data.key2 === "Language") {
+          if (data.value && data.value.toLocaleLowerCase() === "en") {
+            i18n.changeLanguage("en");
+          } else {
+            i18n.changeLanguage("zh");
+          }
+        }
+      }
+    );
+  }, []);
 
   const openSetting = () => {
     messageUtil.sendMessage({
@@ -35,6 +56,13 @@ export default function Head() {
     const currentLang = i18n.language;
     const newLang = currentLang === "en" ? "zh" : "en";
     i18n.changeLanguage(newLang);
+
+    messageUtil.sendMessage({
+      command: "updateSetting",
+      key1: "DevChat",
+      key2: "Language",
+      value: newLang,
+    });
   };
 
   return (
@@ -68,11 +96,11 @@ export default function Head() {
               <IconSettings size="1.125rem" />
             </ActionIcon>
           </div>
-          {/* <div>
+          <div>
             <ActionIcon size="sm" onClick={switchLang}>
               <IconLanguage size="1.125rem" />
             </ActionIcon>
-          </div> */}
+          </div>
         </Flex>
       </Flex>
     </Header>

src/views/components/InputMessage/index.tsx

@@ -34,7 +34,7 @@ import Topic from "./Topic";
 import { observer } from "mobx-react-lite";
 import { useMst } from "@/views/stores/RootStore";
 import { ChatContext } from "@/views/stores/InputStore";
-import { Message } from "@/views/stores/ChatStore";
+import { Trans, useTranslation } from "react-i18next";
 
 const useStyles = createStyles((theme) => ({
   actionIcon: {
@@ -60,6 +60,7 @@ const useStyles = createStyles((theme) => ({
 const InputMessage = observer((props: any) => {
   const { classes } = useStyles();
   const { input, chat } = useMst();
+  const { t } = useTranslation();
   const {
     contexts,
     menuOpend,
@@ -311,7 +312,7 @@ const InputMessage = observer((props: any) => {
                 color: theme.colors.gray[6],
               }}
             >
-              {description}
+              <Trans>{description}</Trans>
             </Text>
           </Stack>
         </Flex>
@@ -456,7 +457,10 @@ const InputMessage = observer((props: any) => {
           <Menu.Dropdown>
             {modelMenus.map((modelName) => {
               return (
-                <Menu.Item key={modelName} onClick={() => changeModel(modelName)}>
+                <Menu.Item
+                  key={modelName}
+                  onClick={() => changeModel(modelName)}
+                >
                   {getModelShowName(modelName)}
                 </Menu.Item>
               );
@@ -515,7 +519,7 @@ const InputMessage = observer((props: any) => {
               marginTop: 5,
               marginBottom: 5,
             }}
-            placeholder="Ask DevChat a question or type ‘/’ for workflow"
+            placeholder={t("Ask DevChat a question or type ‘/’ for workflow")}
             styles={{
               rightSection: {
                 alignItems: "flex-end",

src/views/components/MessageAvatar/index.tsx

@@ -60,7 +60,7 @@ const MessageAvatar = observer((props: IProps) => {
       ) : (
         <Avatar color="cyan" size={25} radius="xl" src={SvgAvatarUser} />
       )}
-      <Text weight="bold">{avatarType === "bot" ? "DevChat" : "User"}</Text>
+      <Text weight="bold">{avatarType === "bot" ? "DevChat" : t("User")}</Text>
       {avatarType === "user" ? (
         <Flex
           gap="xs"
@@ -72,7 +72,7 @@ const MessageAvatar = observer((props: IProps) => {
         >
           <Tooltip
             sx={{ padding: "3px", fontSize: "var(--vscode-editor-font-size)" }}
-            label={done ? "Refilled" : "Refill prompt"}
+            label={done ? t("Refilled") : t("Refill prompt")}
             withArrow
             position="left"
             color="gray"
@@ -142,7 +142,7 @@ const MessageAvatar = observer((props: IProps) => {
                 padding: "3px",
                 fontSize: "var(--vscode-editor-font-size)",
               }}
-              label={copied ? "Copied" : "Copy message"}
+              label={copied ? t("Copied") : t("Copy message")}
               withArrow
               position="left"
               color="gray"