feat: add i18n for mask

app/components/mask.tsx

@@ -4,37 +4,28 @@ import { ErrorBoundary } from "./error";
 import styles from "./mask.module.scss";
 
 import DownloadIcon from "../icons/download.svg";
+import UploadIcon from "../icons/upload.svg";
 import EditIcon from "../icons/edit.svg";
 import AddIcon from "../icons/add.svg";
 import CloseIcon from "../icons/close.svg";
 import DeleteIcon from "../icons/delete.svg";
-import BotIcon from "../icons/bot.svg";
+import EyeIcon from "../icons/eye.svg";
 import CopyIcon from "../icons/copy.svg";
 
-import {
-  DEFAULT_MASK_AVATAR,
-  DEFAULT_MASK_ID,
-  Mask,
-  useMaskStore,
-} from "../store/mask";
-import {
-  Message,
-  ModelConfig,
-  ROLES,
-  useAppConfig,
-  useChatStore,
-} from "../store";
+import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
+import { Message, ModelConfig, ROLES, useChatStore } from "../store";
 import { Input, List, ListItem, Modal, Popover, showToast } from "./ui-lib";
-import { Avatar, AvatarPicker, EmojiAvatar } from "./emoji";
-import Locale from "../locales";
+import { Avatar, AvatarPicker } from "./emoji";
+import Locale, { AllLangs, Lang } from "../locales";
 import { useNavigate } from "react-router-dom";
 
 import chatStyle from "./chat.module.scss";
-import { useState } from "react";
-import { copyToClipboard } from "../utils";
+import { useEffect, useState } from "react";
+import { downloadAs } from "../utils";
 import { Updater } from "../api/openai/typing";
 import { ModelConfigList } from "./model-config";
-import { Path } from "../constant";
+import { FileName, Path } from "../constant";
+import { BUILTIN_MASK_STORE } from "../masks";
 
 export function MaskAvatar(props: { mask: Mask }) {
   return props.mask.avatar !== DEFAULT_MASK_AVATAR ? (
@@ -48,10 +39,13 @@ export function MaskConfig(props: {
   mask: Mask;
   updateMask: Updater<Mask>;
   extraListItems?: JSX.Element;
+  readonly?: boolean;
 }) {
   const [showPicker, setShowPicker] = useState(false);
 
   const updateConfig = (updater: (config: ModelConfig) => void) => {
+    if (props.readonly) return;
+
     const config = { ...props.mask.modelConfig };
     updater(config);
     props.updateMask((mask) => (mask.modelConfig = config));
@@ -69,7 +63,7 @@ export function MaskConfig(props: {
       />
 
       <List>
-        <ListItem title={"角色头像"}>
+        <ListItem title={Locale.Mask.Config.Avatar}>
           <Popover
             content={
               <AvatarPicker
@@ -90,7 +84,7 @@ export function MaskConfig(props: {
             </div>
           </Popover>
         </ListItem>
-        <ListItem title={"角色名称"}>
+        <ListItem title={Locale.Mask.Config.Name}>
           <input
             type="text"
             value={props.mask.name}
@@ -197,33 +191,64 @@ export function MaskPage() {
 
   const maskStore = useMaskStore();
   const chatStore = useChatStore();
-  const masks = maskStore.getAll();
+
+  const [filterLang, setFilterLang] = useState<Lang>();
+
+  const allMasks = maskStore
+    .getAll()
+    .filter((m) => !filterLang || m.lang === filterLang);
+
+  const [searchMasks, setSearchMasks] = useState<Mask[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const masks = searchText.length > 0 ? searchMasks : allMasks;
+
+  // simple search, will refactor later
+  const onSearch = (text: string) => {
+    setSearchText(text);
+    if (text.length > 0) {
+      const result = allMasks.filter((m) => m.name.includes(text));
+      setSearchMasks(result);
+    } else {
+      setSearchMasks(allMasks);
+    }
+  };
 
   const [editingMaskId, setEditingMaskId] = useState<number | undefined>();
-  const editingMask = maskStore.get(editingMaskId);
+  const editingMask =
+    maskStore.get(editingMaskId) ?? BUILTIN_MASK_STORE.get(editingMaskId);
   const closeMaskModal = () => setEditingMaskId(undefined);
 
+  const downloadAll = () => {
+    downloadAs(JSON.stringify(masks), FileName.Masks);
+  };
+
   return (
     <ErrorBoundary>
       <div className={styles["mask-page"]}>
         <div className="window-header">
           <div className="window-header-title">
-            <div className="window-header-main-title">预设角色面具</div>
+            <div className="window-header-main-title">
+              {Locale.Mask.Page.Title}
+            </div>
             <div className="window-header-submai-title">
-              共有{masks.length} 个预设角色定义
+              {Locale.Mask.Page.SubTitle(allMasks.length)}
             </div>
           </div>
 
           <div className="window-actions">
             <div className="window-action-button">
               <IconButton
-                icon={<AddIcon />}
+                icon={<DownloadIcon />}
                 bordered
-                onClick={() => maskStore.create()}
+                onClick={downloadAll}
               />
             </div>
             <div className="window-action-button">
-              <IconButton icon={<DownloadIcon />} bordered />
+              <IconButton
+                icon={<UploadIcon />}
+                bordered
+                onClick={() => showToast(Locale.WIP)}
+              />
             </div>
             <div className="window-action-button">
               <IconButton
@@ -236,12 +261,45 @@ export function MaskPage() {
         </div>
 
         <div className={styles["mask-page-body"]}>
-          <input
-            type="text"
-            className={styles["search-bar"]}
-            placeholder="搜索"
-            autoFocus
-          />
+          <div className={styles["mask-filter"]}>
+            <input
+              type="text"
+              className={styles["search-bar"]}
+              placeholder={Locale.Mask.Page.Search}
+              autoFocus
+              onInput={(e) => onSearch(e.currentTarget.value)}
+            />
+            <select
+              className={styles["mask-filter-lang"]}
+              value={filterLang ?? Locale.Settings.Lang.All}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                if (value === Locale.Settings.Lang.All) {
+                  setFilterLang(undefined);
+                } else {
+                  setFilterLang(value as Lang);
+                }
+              }}
+            >
+              <option key="all" value={Locale.Settings.Lang.All}>
+                {Locale.Settings.Lang.All}
+              </option>
+              {AllLangs.map((lang) => (
+                <option value={lang} key={lang}>
+                  {Locale.Settings.Lang.Options[lang]}
+                </option>
+              ))}
+            </select>
+
+            <div className={styles["mask-create"]}>
+              <IconButton
+                icon={<AddIcon />}
+                text={Locale.Mask.Page.Create}
+                bordered
+                onClick={() => maskStore.create()}
+              />
+            </div>
+          </div>
 
           <div>
             {masks.map((m) => (
@@ -253,7 +311,7 @@ export function MaskPage() {
                   <div className={styles["mask-title"]}>
                     <div className={styles["mask-name"]}>{m.name}</div>
                     <div className={styles["mask-info"] + " one-line"}>
-                      {`包含 ${m.context.length} 条预设对话 / ${
+                      {`${Locale.Mask.Item.Info(m.context.length)} / ${
                         Locale.Settings.Lang.Options[m.lang]
                       } / ${m.modelConfig.model}`}
                     </div>
@@ -262,26 +320,36 @@ export function MaskPage() {
                 <div className={styles["mask-actions"]}>
                   <IconButton
                     icon={<AddIcon />}
-                    text="对话"
+                    text={Locale.Mask.Item.Chat}
                     onClick={() => {
                       chatStore.newSession(m);
                       navigate(Path.Chat);
                     }}
                   />
-                  <IconButton
-                    icon={<EditIcon />}
-                    text="编辑"
-                    onClick={() => setEditingMaskId(m.id)}
-                  />
-                  <IconButton
-                    icon={<DeleteIcon />}
-                    text="删除"
-                    onClick={() => {
-                      if (confirm("确认删除？")) {
-                        maskStore.delete(m.id);
-                      }
-                    }}
-                  />
+                  {m.builtin ? (
+                    <IconButton
+                      icon={<EyeIcon />}
+                      text={Locale.Mask.Item.View}
+                      onClick={() => setEditingMaskId(m.id)}
+                    />
+                  ) : (
+                    <IconButton
+                      icon={<EditIcon />}
+                      text={Locale.Mask.Item.Edit}
+                      onClick={() => setEditingMaskId(m.id)}
+                    />
+                  )}
+                  {!m.builtin && (
+                    <IconButton
+                      icon={<DeleteIcon />}
+                      text={Locale.Mask.Item.Delete}
+                      onClick={() => {
+                        if (confirm(Locale.Mask.Item.DeleteConfirm)) {
+                          maskStore.delete(m.id);
+                        }
+                      }}
+                    />
+                  )}
                 </div>
               </div>
             ))}
@@ -291,12 +359,35 @@ export function MaskPage() {
 
       {editingMask && (
         <div className="modal-mask">
-          <Modal title="编辑预设面具" onClose={closeMaskModal}>
+          <Modal
+            title={Locale.Mask.EditModal.Title(editingMask?.builtin)}
+            onClose={closeMaskModal}
+            actions={[
+              <IconButton
+                icon={<DownloadIcon />}
+                text={Locale.Mask.EditModal.Download}
+                key="export"
+                bordered
+              />,
+              <IconButton
+                key="copy"
+                icon={<CopyIcon />}
+                bordered
+                text={Locale.Mask.EditModal.Clone}
+                onClick={() => {
+                  navigate(Path.Masks);
+                  maskStore.create(editingMask);
+                  setEditingMaskId(undefined);
+                }}
+              />,
+            ]}
+          >
             <MaskConfig
-              mask={editingMask!}
+              mask={editingMask}
               updateMask={(updater) =>
                 maskStore.update(editingMaskId!, updater)
               }
+              readonly={editingMask.builtin}
             />
           </Modal>
         </div>