Skip to content

Commit

Permalink
feat: add i18n for mask
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yidadaa
Yidadaa committed Apr 26, 2023
1 parent 3cda44e commit c7c58ef
Show file tree
Hide file tree
Showing 22 changed files with 890 additions and 81 deletions.
18 changes: 13 additions & 5 deletions app/components/chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import PromptIcon from "../icons/prompt.svg";
import MaskIcon from "../icons/mask.svg";
import MaxIcon from "../icons/max.svg";
import MinIcon from "../icons/min.svg";
import ResetIcon from "../icons/reload.svg";

import LightIcon from "../icons/light.svg";
import DarkIcon from "../icons/dark.svg";
Expand Down Expand Up @@ -58,7 +59,7 @@ import { Path } from "../constant";
import { ModelConfigList } from "./model-config";
import { Avatar, AvatarPicker } from "./emoji";
import { MaskConfig } from "./mask";
import { DEFAULT_MASK_ID } from "../store/mask";
import { DEFAULT_MASK_ID, useMaskStore } from "../store/mask";

const Markdown = dynamic(
async () => memo((await import("./markdown")).Markdown),
Expand Down Expand Up @@ -108,6 +109,8 @@ function exportMessages(messages: Message[], topic: string) {
export function SessionConfigModel(props: { onClose: () => void }) {
const chatStore = useChatStore();
const session = chatStore.currentSession();
const maskStore = useMaskStore();
const navigate = useNavigate();

return (
<div className="modal-mask">
Expand All @@ -117,9 +120,9 @@ export function SessionConfigModel(props: { onClose: () => void }) {
actions={[
<IconButton
key="reset"
icon={<CopyIcon />}
icon={<ResetIcon />}
bordered
text="重置"
text={Locale.Chat.Config.Reset}
onClick={() =>
confirm(Locale.Memory.ResetConfirm) && chatStore.resetSession()
}
Expand All @@ -128,8 +131,13 @@ export function SessionConfigModel(props: { onClose: () => void }) {
key="copy"
icon={<CopyIcon />}
bordered
text="保存为面具"
onClick={() => copyToClipboard(session.memoryPrompt)}
text={Locale.Chat.Config.SaveAs}
onClick={() => {
navigate(Path.Masks);
setTimeout(() => {
maskStore.create(session.mask);
}, 500);
}}
/>,
]}
>
Expand Down
29 changes: 27 additions & 2 deletions app/components/mask.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,36 @@
padding: 20px;
overflow-y: auto;

.search-bar {
.mask-filter {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
margin-bottom: 10px;
animation: search-in ease 0.3s;

display: flex;

.search-bar {
flex-grow: 1;
max-width: 100%;
min-width: 0;
margin-bottom: 20px;
animation: search-in ease 0.3s;
}

.mask-filter-lang {
height: 100%;
margin-left: 10px;
}

.mask-create {
height: 100%;
margin-left: 10px;
box-sizing: border-box;

button {
padding: 10px;
}
}
}

.mask-item {
Expand Down
195 changes: 143 additions & 52 deletions app/components/mask.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand All @@ -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));
Expand All @@ -69,7 +63,7 @@ export function MaskConfig(props: {
/>

<List>
<ListItem title={"角色头像"}>
<ListItem title={Locale.Mask.Config.Avatar}>
<Popover
content={
<AvatarPicker
Expand All @@ -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}
Expand Down Expand Up @@ -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
Expand All @@ -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) => (
Expand All @@ -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>
Expand All @@ -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>
))}
Expand All @@ -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>
Expand Down
Loading

0 comments on commit c7c58ef

Please sign in to comment.