Onelevenvy · Onelevenvy · Sep 10, 2024 · Sep 10, 2024
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/components/Common/ModelProvider/index.tsx b/web/src/components/Common/ModelProvider/index.tsx
@@ -17,7 +17,7 @@ import { ModelsOut } from "@/client/models/ModelsOut";
 import { MemberUpdate } from "@/client/models/MemberUpdate";
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import ModelProviderIcon from "../../Icons/models";
-
+import { useTranslation } from "react-i18next";
 const ModelSelect = ({
   models,
   control,
@@ -29,6 +29,7 @@ const ModelSelect = ({
   onModelSelect: (selectData: string) => void;
   isLoading: Boolean;
 }) => {
+  const { t } = useTranslation();
   const groupedModels = models?.data.reduce(
     (acc, model) => {
       const providerName = model.provider.provider_name;
@@ -59,7 +60,7 @@ const ModelSelect = ({
   return (
     <Box>
       <FormControl>
-        <FormLabel htmlFor="model">选择模型</FormLabel>
+        <FormLabel htmlFor="model">{t("team.teamsetting.model")}</FormLabel>
         {isLoading ? (
           <Spinner size="md" />
         ) : (

diff --git a/web/src/components/Common/Navbar.tsx b/web/src/components/Common/Navbar.tsx
@@ -33,7 +33,7 @@ const Navbar = ({ type }: NavbarProps) => {
                   : addUploadModal.onOpen
           }
         >
-          <Icon as={FaPlus} /> {t(`setting.create`)}
+          <Icon as={FaPlus} /> {t(`setting.create`)}{" "}
           {t(`setting.${type.toLowerCase()}`)}
         </Button>
         <AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />

diff --git a/web/src/components/Markdown/LoadMarkdownCSSStyle.tsx b/web/src/components/Markdown/LoadMarkdownCSSStyle.tsx
@@ -1,22 +1,22 @@
 import { useEffect } from "react";
 import { useColorMode } from "@chakra-ui/react"; // 假设你使用的是 @chakra-ui/react 来处理 colorMode
-
+import "highlight.js/styles/github-dark.css"; // 导入 GitHub Dark 主题的 CSS 文件
 const LoadMarkdownCSSStyle = () => {
   const { colorMode } = useColorMode();
 
-  useEffect(() => {
-    const loadCSS = async () => {
-      if (colorMode === "dark") {
-        await import("highlight.js/styles/github-dark.css");
-      } else {
-        await import("highlight.js/styles/github.css");
-      }
-    };
+  // useEffect(() => {
+  //   const loadCSS = async () => {
+  //     if (colorMode === "dark") {
+  //       await import ("highlight.js/styles/github-dark.css");
+  //     } else {
+  //       await import("highlight.js/styles/github.css");
+  //     }
+  //   };
 
-    loadCSS();
-  }, [colorMode]);
+  //   loadCSS();
+  // }, [colorMode]);
 
-  return null;
+  // return null;
 };
 
 export default LoadMarkdownCSSStyle;
diff --git a/web/src/components/Markdown/Markdown.tsx b/web/src/components/Markdown/Markdown.tsx
@@ -7,19 +7,19 @@ import { Terminal } from "lucide-react";
 import { v4 } from "uuid";
 import dynamic from "next/dynamic";
 
-const DynamicLoadMarkdownCSSStyle = dynamic(
-  () => import("./LoadMarkdownCSSStyle"),
-  {
-    ssr: false, // 关闭服务器端渲染，这样只在客户端执行
-  }
-);
+// const DynamicLoadMarkdownCSSStyle = dynamic(
+//   () => import("./LoadMarkdownCSSStyle"),
+//   {
+//     ssr: false, // 关闭服务器端渲染，这样只在客户端执行
+//   }
+// );
 
 const Markdown = ({ content }: { content: string }) => {
   const textColor = useColorModeValue("ui.dark", "ui.white");
   const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate");
   return (
     <>
-      <DynamicLoadMarkdownCSSStyle />
+      {/* <DynamicLoadMarkdownCSSStyle /> */}
       <ReactMarkdown
         rehypePlugins={[rehypeHighlight]}
         components={{

diff --git a/web/src/components/Members/index.tsx b/web/src/components/Members/index.tsx
@@ -37,6 +37,7 @@ import { type SubmitHandler, useForm, Controller } from "react-hook-form";
 import { Select as MultiSelect, chakraComponents } from "chakra-react-select";
 import { forwardRef, Ref, useState } from "react";
 import ModelSelect from "../Common/ModelProvider";
+import { useTranslation } from "react-i18next";
 
 interface EditTeamMemberProps {
   member: MemberOut;
@@ -125,6 +126,7 @@ const ALLOWED_MEMBER_CONFIGS: Record<MemberTypes, MemberConfigs> = {
 
 const EditTeamMember = forwardRef<HTMLFormElement, EditTeamMemberProps>(
   ({ member, teamId, isOpen, onClose }, ref) => {
+    const {t} = useTranslation();
     const queryClient = useQueryClient();
     const showToast = useCustomToast();
     const [showTooltip, setShowTooltip] = useState(false);
@@ -269,7 +271,7 @@ const EditTeamMember = forwardRef<HTMLFormElement, EditTeamMemberProps>(
               overflow={"auto"}
             >
               <FormControl mt={4} isRequired isInvalid={!!errors.name} px="6">
-                <FormLabel htmlFor="name">名字</FormLabel>
+                <FormLabel htmlFor="name">{t("team.teamsetting.name")}</FormLabel>
                 <Input
                   id="name"
                   {...register("name", {
@@ -288,7 +290,7 @@ const EditTeamMember = forwardRef<HTMLFormElement, EditTeamMemberProps>(
                 )}
               </FormControl>
               <FormControl mt={4} isRequired isInvalid={!!errors.role} px="6">
-                <FormLabel htmlFor="role">角色</FormLabel>
+                <FormLabel htmlFor="role">{t("team.teamsetting.role")}</FormLabel>
                 <Textarea
                   id="role"
                   {...register("role", { required: "Role is required." })}
@@ -300,7 +302,7 @@ const EditTeamMember = forwardRef<HTMLFormElement, EditTeamMemberProps>(
                 )}
               </FormControl>
               <FormControl mt={4} px="6">
-                <FormLabel htmlFor="backstory">背景故事</FormLabel>
+                <FormLabel htmlFor="backstory">{t("team.teamsetting.backstory")}</FormLabel>
                 <Textarea
                   id="backstory"
                   {...register("backstory")}
@@ -324,7 +326,7 @@ const EditTeamMember = forwardRef<HTMLFormElement, EditTeamMemberProps>(
                     fieldState: { error },
                   }) => (
                     <FormControl mt={4} px="6" isInvalid={!!error} id="skills">
-                      <FormLabel>工具</FormLabel>
+                      <FormLabel>{t("team.teamsetting.tools")}</FormLabel>
                       <MultiSelect
                         isLoading={isLoadingSkills}
                         isMulti
@@ -353,7 +355,7 @@ const EditTeamMember = forwardRef<HTMLFormElement, EditTeamMemberProps>(
                     fieldState: { error },
                   }) => (
                     <FormControl mt={4} px="6" isInvalid={!!error} id="uploads">
-                      <FormLabel>知识库</FormLabel>
+                      <FormLabel>{t("team.teamsetting.knowledge")}</FormLabel>
                       <MultiSelect
                         // isDisabled={}
                         isLoading={isLoadingUploads}

diff --git a/web/src/components/Settings/ModelProviderPage/ProviderUpdate.tsx b/web/src/components/Settings/ModelProviderPage/ProviderUpdate.tsx
@@ -128,7 +128,7 @@ export default function ProviderUpdate({
             )}
           </FormControl>
           <FormControl isInvalid={!!errors.description}>
-            <FormLabel>描述</FormLabel>
+            <FormLabel>Description</FormLabel>
             <Input
               id="description"
               {...register("description", { required: "描述是必填项" })}

diff --git a/web/src/components/Skills/SkillEditor.tsx b/web/src/components/Skills/SkillEditor.tsx
diff --git a/web/src/components/Teams/DebugPreview/head.tsx b/web/src/components/Teams/DebugPreview/head.tsx
@@ -14,7 +14,7 @@ import {
   PopoverCloseButton,
   PopoverFooter,
 } from "@chakra-ui/react";
-
+import { useTranslation } from "react-i18next";
 import { MdBuild } from "react-icons/md";
 import { ImHistory } from "react-icons/im";
 import ChatHistoryList from "@/components/Playground/ChatHistoryList";
@@ -28,7 +28,7 @@ function DebugPreviewHead({
 }) {
   const bgColor = useColorModeValue("ui.bgMain", "ui.bgMainDark");
   const buttonColor = useColorModeValue("ui.main", "ui.main");
-
+  const { t } = useTranslation();
   return (
     <Box
       display={"flex"}
@@ -37,7 +37,7 @@ function DebugPreviewHead({
       alignItems={"center"}
     >
       <Text ml="5" fontSize={"xl"} fontWeight={"bold"}>
-        调试预览
+        {t(`team.teamsetting.debugoverview`)}
       </Text>
       <Box display={"flex"} flexDirection={"row"} mr="5" alignItems={"center"}>
         <Popover preventOverflow={false} isLazy={true}>
@@ -55,7 +55,7 @@ function DebugPreviewHead({
           <PopoverContent zIndex="9999">
             <PopoverArrow />
             <PopoverCloseButton />
-            <PopoverHeader>聊天记录</PopoverHeader>
+            <PopoverHeader> {t(`team.teamsetting.chathistory`)}</PopoverHeader>
             <PopoverBody maxH="50vh" overflowY="auto" zIndex="9999">
               <Box zIndex="1001">
                 <ChatHistoryList teamId={teamId} />
@@ -73,7 +73,7 @@ function DebugPreviewHead({
           _hover={{ backgroundColor: "#1c86ee" }}
           rightIcon={<MdBuild color={"white"} />}
         >
-          <Text color={"white"}>发布</Text>
+          <Text color={"white"}>{t("team.teamsetting.savedeploy")}</Text>
         </Button>
       </Box>
     </Box>

diff --git a/web/src/components/Teams/TeamInfo/index.tsx b/web/src/components/Teams/TeamInfo/index.tsx
@@ -1,7 +1,9 @@
 import { TeamOut } from "@/client";
 import { Box, Tag, TagLabel, Text } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
 
 function TeamInforCard({ teamData }: { teamData: TeamOut }) {
+  const { t } = useTranslation();
   return (
     <Box
       key={teamData.id}
@@ -13,7 +15,7 @@ function TeamInforCard({ teamData }: { teamData: TeamOut }) {
       bg="white"
     >
       <Box justifyItems={"center"} display={"flex"} flexDirection={"row"}>
-        <Text color="gray.400">类别：</Text>
+        <Text color="gray.400">{t("team.teamsetting.type")}：</Text>
         <Tag variant="outline" colorScheme="green" size={"sm"}>
           <TagLabel>{teamData.workflow || "N/A"}</TagLabel>
         </Tag>
@@ -23,7 +25,7 @@ function TeamInforCard({ teamData }: { teamData: TeamOut }) {
           color={!teamData.description ? "gray.400" : "gray.400"}
           noOfLines={2}
         >
-          描述：{teamData.description || "N/A"}
+          {t("team.teamsetting.description")}：{teamData.description || "N/A"}
         </Text>
       </Box>
     </Box>

diff --git a/web/src/i18n/en-US/team.ts b/web/src/i18n/en-US/team.ts
@@ -29,6 +29,19 @@ const translation = {
         "Sequential type of Multi-Agent, usually used for task decomposition and step-by-step execution",
     },
   },
+  teamsetting: {
+    debugoverview: "Debug Overview",
+    savedeploy: "Deploy",
+    name: "Name",
+    description: "Description",
+    type: "Type",
+    role: "Role",
+    backstory: "Backstory",
+    model: "Model",
+    tools: "Tools",
+    knowledge: "Knowledge Base",
+    chathistory: "Chat History",
+  },
 };
 
 export default translation;
diff --git a/web/src/i18n/zh-Hans/team.ts b/web/src/i18n/zh-Hans/team.ts
@@ -28,6 +28,19 @@ const translation = {
         "Sequential类型的Muti-Agent，通常用于任务分解和逐步执行的场景",
     },
   },
+  teamsetting: {
+    debugoverview: "调试预览",
+    savedeploy: "发布",
+    name: "名字",
+    description: "描述",
+    type: "类型",
+    role: "角色",
+    backstory: "背景故事",
+    model: "模型",
+    tools: "工具",
+    knowledge: "知识库",
+    chathistory: "聊天记录",
+  },
 };
 
 export default translation;