Update language translations and fix UI issues

Author: smallstone

src/util/ideaBridge.ts

@@ -364,6 +364,7 @@ class IdeaBridge {
   }
 
   resviceSettings(res) {
+    console.log("resviceSettings res: ", res);
     // 用户设置的回调
     const setting = res.payload.setting;
 
@@ -372,6 +373,9 @@ 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",

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

@@ -68,11 +68,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 { 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,
@@ -515,7 +516,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"
@@ -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"

src/views/components/MessageBody/index.tsx

@@ -1,48 +1,55 @@
-import { Container, createStyles ,Text} from "@mantine/core";
+import { Container, createStyles, Text } from "@mantine/core";
 import React from "react";
 import { observer } from "mobx-react-lite";
 import MessageMarkdown from "@/views/components/MessageMarkdown";
 import { useMst } from "@/views/stores/RootStore";
+import { useTranslation } from "react-i18next";
 
 interface IProps {
-    messageType: string,
-    children: string,
-    messageDone?: boolean,
-    temp?: boolean
+  messageType: string;
+  children: string;
+  messageDone?: boolean;
+  temp?: boolean;
 }
 
-
-const useStyles = createStyles((theme, options:any) => ({
-    bodyWidth:{
-        width: options.chatPanelWidth - 20,
-    },
-    userContent:{
-        fontFamily: theme.fontFamily,
-        whiteSpace: 'pre-wrap',
-        wordBreak: 'break-word',
-    }
+const useStyles = createStyles((theme, options: any) => ({
+  bodyWidth: {
+    width: options.chatPanelWidth - 20,
+  },
+  userContent: {
+    fontFamily: theme.fontFamily,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+  },
 }));
 
 const MessageBody = observer((props: IProps) => {
-    const { children, messageType, temp=false ,messageDone} = props;
-    const { chat } = useMst();
-    const {classes} = useStyles({
-        chatPanelWidth:chat.chatPanelWidth
-    });
-    return (
-        messageType === 'bot'
-            ? <MessageMarkdown className={classes.bodyWidth} temp={temp} messageDone={messageDone}>
-                {children}
-            </MessageMarkdown>
-            : <Container
-                sx={{
-                    margin: 0,
-                    padding: 0,
-                    width: chat.chatPanelWidth - 20
-                }}>
-                <pre className={classes.userContent}>{children}</pre>
-            </Container>
-    );
+  const { children, messageType, temp = false, messageDone } = props;
+  const { chat } = useMst();
+  const { classes } = useStyles({
+    chatPanelWidth: chat.chatPanelWidth,
+  });
+  const { t } = useTranslation();
+
+  return messageType === "bot" ? (
+    <MessageMarkdown
+      className={classes.bodyWidth}
+      temp={temp}
+      messageDone={messageDone}
+    >
+      {children}
+    </MessageMarkdown>
+  ) : (
+    <Container
+      sx={{
+        margin: 0,
+        padding: 0,
+        width: chat.chatPanelWidth - 20,
+      }}
+    >
+      <pre className={classes.userContent}>{t(children)}</pre>
+    </Container>
+  );
 });
 
-export default MessageBody;
+export default MessageBody;

src/views/i18n/en.json

@@ -1,3 +1 @@
-{
-  "Delete message": "Delete message"
-}
+{}

src/views/i18n/index.ts

@@ -3,8 +3,6 @@ import { initReactI18next } from "react-i18next";
 
 import enTranslations from "./en.json";
 import zhTranslations from "./zh.json";
-console.log("enTranslations: ", enTranslations);
-console.log("zhTranslations 233: ", zhTranslations);
 
 i18n.use(initReactI18next).init({
   resources: {
@@ -19,7 +17,7 @@ i18n.use(initReactI18next).init({
       },
     },
   },
-  lng: "en",
+  lng: "zh",
   fallbackLng: "en",
   interpolation: {
     escapeValue: false,

src/views/i18n/zh.json

@@ -1,3 +1,11 @@
 {
-  "Delete message": "11删除消息"
+  "Delete message": "删除",
+  "Copied": "已复制",
+  "Copy message": "复制",
+  "Refilled": "已发送",
+  "Refill message": "再次发送",
+  "User": "用户",
+  "Ask DevChat a question or type ‘/’ for workflow": "向 DevChat 提问或输入 '/' 以查看工作流",
+  "How do I use DevChat?": "如何使用 DevChat？",
+  "balance": "您的余额为 {{formatedCurrency}}，登录 <4>web.devchat.ai</4> 以获得更多 tokens"
 }

webpack.idea.config.js

@@ -73,11 +73,6 @@ const webviewConfig = {
         ],
         include: /views/,
       },
-      {
-        test: /\.json$/i,
-        use: "json-loader",
-        type: "asset/source",
-      },
       {
         test: /\.(png|jpg|jpeg|gif|svg)$/, // 匹配文件类型
         type: "asset/inline",