1193 lines
40 KiB
TypeScript
1193 lines
40 KiB
TypeScript
import { useState, useEffect, useMemo } from "react";
|
|
|
|
import styles from "./settings.module.scss";
|
|
|
|
import ResetIcon from "../icons/reload.svg";
|
|
import AddIcon from "../icons/add.svg";
|
|
import CloseIcon from "../icons/close.svg";
|
|
import CopyIcon from "../icons/copy.svg";
|
|
import ClearIcon from "../icons/clear.svg";
|
|
import LoadingIcon from "../icons/three-dots.svg";
|
|
import EditIcon from "../icons/edit.svg";
|
|
import EyeIcon from "../icons/eye.svg";
|
|
import DownloadIcon from "../icons/download.svg";
|
|
import UploadIcon from "../icons/upload.svg";
|
|
import ConfigIcon from "../icons/config.svg";
|
|
import ConfirmIcon from "../icons/confirm.svg";
|
|
|
|
import ConnectionIcon from "../icons/connection.svg";
|
|
import CloudSuccessIcon from "../icons/cloud-success.svg";
|
|
import CloudFailIcon from "../icons/cloud-fail.svg";
|
|
|
|
import {
|
|
Input,
|
|
List,
|
|
ListItem,
|
|
Modal,
|
|
PasswordInput,
|
|
Popover,
|
|
Select,
|
|
showConfirm,
|
|
showToast,
|
|
} from "./ui-lib";
|
|
import { ModelConfigList } from "./model-config";
|
|
|
|
import { IconButton } from "./button";
|
|
import {
|
|
SubmitKey,
|
|
useChatStore,
|
|
Theme,
|
|
useUpdateStore,
|
|
useAccessStore,
|
|
useAppConfig,
|
|
} from "../store";
|
|
|
|
import Locale, {
|
|
AllLangs,
|
|
ALL_LANG_OPTIONS,
|
|
changeLang,
|
|
getLang,
|
|
} from "../locales";
|
|
import { copyToClipboard } from "../utils";
|
|
import Link from "next/link";
|
|
import {
|
|
Anthropic,
|
|
Azure,
|
|
Google,
|
|
OPENAI_BASE_URL,
|
|
Path,
|
|
RELEASE_URL,
|
|
STORAGE_KEY,
|
|
ServiceProvider,
|
|
SlotID,
|
|
UPDATE_URL,
|
|
} from "../constant";
|
|
import { Prompt, SearchService, usePromptStore } from "../store/prompt";
|
|
import { ErrorBoundary } from "./error";
|
|
import { InputRange } from "./input-range";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Avatar, AvatarPicker } from "./emoji";
|
|
import { getClientConfig } from "../config/client";
|
|
import { useSyncStore } from "../store/sync";
|
|
import { nanoid } from "nanoid";
|
|
import { useMaskStore } from "../store/mask";
|
|
import { ProviderType } from "../utils/cloud";
|
|
|
|
function EditPromptModal(props: { id: string; onClose: () => void }) {
|
|
const promptStore = usePromptStore();
|
|
const prompt = promptStore.get(props.id);
|
|
|
|
return prompt ? (
|
|
<div className="modal-mask">
|
|
<Modal
|
|
title={Locale.Settings.Prompt.EditModal.Title}
|
|
onClose={props.onClose}
|
|
actions={[
|
|
<IconButton
|
|
key=""
|
|
onClick={props.onClose}
|
|
text={Locale.UI.Confirm}
|
|
bordered
|
|
/>,
|
|
]}
|
|
>
|
|
<div className={styles["edit-prompt-modal"]}>
|
|
<input
|
|
type="text"
|
|
value={prompt.title}
|
|
readOnly={!prompt.isUser}
|
|
className={styles["edit-prompt-title"]}
|
|
onInput={(e) =>
|
|
promptStore.updatePrompt(
|
|
props.id,
|
|
(prompt) => (prompt.title = e.currentTarget.value),
|
|
)
|
|
}
|
|
></input>
|
|
<Input
|
|
value={prompt.content}
|
|
readOnly={!prompt.isUser}
|
|
className={styles["edit-prompt-content"]}
|
|
rows={10}
|
|
onInput={(e) =>
|
|
promptStore.updatePrompt(
|
|
props.id,
|
|
(prompt) => (prompt.content = e.currentTarget.value),
|
|
)
|
|
}
|
|
></Input>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
) : null;
|
|
}
|
|
|
|
function UserPromptModal(props: { onClose?: () => void }) {
|
|
const promptStore = usePromptStore();
|
|
const userPrompts = promptStore.getUserPrompts();
|
|
const builtinPrompts = SearchService.builtinPrompts;
|
|
const allPrompts = userPrompts.concat(builtinPrompts);
|
|
const [searchInput, setSearchInput] = useState("");
|
|
const [searchPrompts, setSearchPrompts] = useState<Prompt[]>([]);
|
|
const prompts = searchInput.length > 0 ? searchPrompts : allPrompts;
|
|
|
|
const [editingPromptId, setEditingPromptId] = useState<string>();
|
|
|
|
useEffect(() => {
|
|
if (searchInput.length > 0) {
|
|
const searchResult = SearchService.search(searchInput);
|
|
setSearchPrompts(searchResult);
|
|
} else {
|
|
setSearchPrompts([]);
|
|
}
|
|
}, [searchInput]);
|
|
|
|
return (
|
|
<div className="modal-mask">
|
|
<Modal
|
|
title={Locale.Settings.Prompt.Modal.Title}
|
|
onClose={() => props.onClose?.()}
|
|
actions={[
|
|
<IconButton
|
|
key="add"
|
|
onClick={() => {
|
|
const promptId = promptStore.add({
|
|
id: nanoid(),
|
|
createdAt: Date.now(),
|
|
title: "Empty Prompt",
|
|
content: "Empty Prompt Content",
|
|
});
|
|
setEditingPromptId(promptId);
|
|
}}
|
|
icon={<AddIcon />}
|
|
bordered
|
|
text={Locale.Settings.Prompt.Modal.Add}
|
|
/>,
|
|
]}
|
|
>
|
|
<div className={styles["user-prompt-modal"]}>
|
|
<input
|
|
type="text"
|
|
className={styles["user-prompt-search"]}
|
|
placeholder={Locale.Settings.Prompt.Modal.Search}
|
|
value={searchInput}
|
|
onInput={(e) => setSearchInput(e.currentTarget.value)}
|
|
></input>
|
|
|
|
<div className={styles["user-prompt-list"]}>
|
|
{prompts.map((v, _) => (
|
|
<div className={styles["user-prompt-item"]} key={v.id ?? v.title}>
|
|
<div className={styles["user-prompt-header"]}>
|
|
<div className={styles["user-prompt-title"]}>{v.title}</div>
|
|
<div className={styles["user-prompt-content"] + " one-line"}>
|
|
{v.content}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles["user-prompt-buttons"]}>
|
|
{v.isUser && (
|
|
<IconButton
|
|
icon={<ClearIcon />}
|
|
className={styles["user-prompt-button"]}
|
|
onClick={() => promptStore.remove(v.id!)}
|
|
/>
|
|
)}
|
|
{v.isUser ? (
|
|
<IconButton
|
|
icon={<EditIcon />}
|
|
className={styles["user-prompt-button"]}
|
|
onClick={() => setEditingPromptId(v.id)}
|
|
/>
|
|
) : (
|
|
<IconButton
|
|
icon={<EyeIcon />}
|
|
className={styles["user-prompt-button"]}
|
|
onClick={() => setEditingPromptId(v.id)}
|
|
/>
|
|
)}
|
|
<IconButton
|
|
icon={<CopyIcon />}
|
|
className={styles["user-prompt-button"]}
|
|
onClick={() => copyToClipboard(v.content)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
{editingPromptId !== undefined && (
|
|
<EditPromptModal
|
|
id={editingPromptId!}
|
|
onClose={() => setEditingPromptId(undefined)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DangerItems() {
|
|
const chatStore = useChatStore();
|
|
const appConfig = useAppConfig();
|
|
|
|
return (
|
|
<List>
|
|
<ListItem
|
|
title={Locale.Settings.Danger.Reset.Title}
|
|
subTitle={Locale.Settings.Danger.Reset.SubTitle}
|
|
>
|
|
<IconButton
|
|
text={Locale.Settings.Danger.Reset.Action}
|
|
onClick={async () => {
|
|
if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {
|
|
appConfig.reset();
|
|
}
|
|
}}
|
|
type="danger"
|
|
/>
|
|
</ListItem>
|
|
<ListItem
|
|
title={Locale.Settings.Danger.Clear.Title}
|
|
subTitle={Locale.Settings.Danger.Clear.SubTitle}
|
|
>
|
|
<IconButton
|
|
text={Locale.Settings.Danger.Clear.Action}
|
|
onClick={async () => {
|
|
if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) {
|
|
chatStore.clearAllData();
|
|
}
|
|
}}
|
|
type="danger"
|
|
/>
|
|
</ListItem>
|
|
</List>
|
|
);
|
|
}
|
|
|
|
function CheckButton() {
|
|
const syncStore = useSyncStore();
|
|
|
|
const couldCheck = useMemo(() => {
|
|
return syncStore.cloudSync();
|
|
}, [syncStore]);
|
|
|
|
const [checkState, setCheckState] = useState<
|
|
"none" | "checking" | "success" | "failed"
|
|
>("none");
|
|
|
|
async function check() {
|
|
setCheckState("checking");
|
|
const valid = await syncStore.check();
|
|
setCheckState(valid ? "success" : "failed");
|
|
}
|
|
|
|
if (!couldCheck) return null;
|
|
|
|
return (
|
|
<IconButton
|
|
text={Locale.Settings.Sync.Config.Modal.Check}
|
|
bordered
|
|
onClick={check}
|
|
icon={
|
|
checkState === "none" ? (
|
|
<ConnectionIcon />
|
|
) : checkState === "checking" ? (
|
|
<LoadingIcon />
|
|
) : checkState === "success" ? (
|
|
<CloudSuccessIcon />
|
|
) : checkState === "failed" ? (
|
|
<CloudFailIcon />
|
|
) : (
|
|
<ConnectionIcon />
|
|
)
|
|
}
|
|
></IconButton>
|
|
);
|
|
}
|
|
|
|
function SyncConfigModal(props: { onClose?: () => void }) {
|
|
const syncStore = useSyncStore();
|
|
|
|
return (
|
|
<div className="modal-mask">
|
|
<Modal
|
|
title={Locale.Settings.Sync.Config.Modal.Title}
|
|
onClose={() => props.onClose?.()}
|
|
actions={[
|
|
<CheckButton key="check" />,
|
|
<IconButton
|
|
key="confirm"
|
|
onClick={props.onClose}
|
|
icon={<ConfirmIcon />}
|
|
bordered
|
|
text={Locale.UI.Confirm}
|
|
/>,
|
|
]}
|
|
>
|
|
<List>
|
|
<ListItem
|
|
title={Locale.Settings.Sync.Config.SyncType.Title}
|
|
subTitle={Locale.Settings.Sync.Config.SyncType.SubTitle}
|
|
>
|
|
<select
|
|
value={syncStore.provider}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) =>
|
|
(config.provider = e.target.value as ProviderType),
|
|
);
|
|
}}
|
|
>
|
|
{Object.entries(ProviderType).map(([k, v]) => (
|
|
<option value={v} key={k}>
|
|
{k}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</ListItem>
|
|
|
|
<ListItem
|
|
title={Locale.Settings.Sync.Config.Proxy.Title}
|
|
subTitle={Locale.Settings.Sync.Config.Proxy.SubTitle}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={syncStore.useProxy}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) => (config.useProxy = e.currentTarget.checked),
|
|
);
|
|
}}
|
|
></input>
|
|
</ListItem>
|
|
{syncStore.useProxy ? (
|
|
<ListItem
|
|
title={Locale.Settings.Sync.Config.ProxyUrl.Title}
|
|
subTitle={Locale.Settings.Sync.Config.ProxyUrl.SubTitle}
|
|
>
|
|
<input
|
|
type="text"
|
|
value={syncStore.proxyUrl}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) => (config.proxyUrl = e.currentTarget.value),
|
|
);
|
|
}}
|
|
></input>
|
|
</ListItem>
|
|
) : null}
|
|
</List>
|
|
|
|
{syncStore.provider === ProviderType.WebDAV && (
|
|
<>
|
|
<List>
|
|
<ListItem title={Locale.Settings.Sync.Config.WebDav.Endpoint}>
|
|
<input
|
|
type="text"
|
|
value={syncStore.webdav.endpoint}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) =>
|
|
(config.webdav.endpoint = e.currentTarget.value),
|
|
);
|
|
}}
|
|
></input>
|
|
</ListItem>
|
|
|
|
<ListItem title={Locale.Settings.Sync.Config.WebDav.UserName}>
|
|
<input
|
|
type="text"
|
|
value={syncStore.webdav.username}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) =>
|
|
(config.webdav.username = e.currentTarget.value),
|
|
);
|
|
}}
|
|
></input>
|
|
</ListItem>
|
|
<ListItem title={Locale.Settings.Sync.Config.WebDav.Password}>
|
|
<PasswordInput
|
|
value={syncStore.webdav.password}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) =>
|
|
(config.webdav.password = e.currentTarget.value),
|
|
);
|
|
}}
|
|
></PasswordInput>
|
|
</ListItem>
|
|
</List>
|
|
</>
|
|
)}
|
|
|
|
{syncStore.provider === ProviderType.UpStash && (
|
|
<List>
|
|
<ListItem title={Locale.Settings.Sync.Config.UpStash.Endpoint}>
|
|
<input
|
|
type="text"
|
|
value={syncStore.upstash.endpoint}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) =>
|
|
(config.upstash.endpoint = e.currentTarget.value),
|
|
);
|
|
}}
|
|
></input>
|
|
</ListItem>
|
|
|
|
<ListItem title={Locale.Settings.Sync.Config.UpStash.UserName}>
|
|
<input
|
|
type="text"
|
|
value={syncStore.upstash.username}
|
|
placeholder={STORAGE_KEY}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) =>
|
|
(config.upstash.username = e.currentTarget.value),
|
|
);
|
|
}}
|
|
></input>
|
|
</ListItem>
|
|
<ListItem title={Locale.Settings.Sync.Config.UpStash.Password}>
|
|
<PasswordInput
|
|
value={syncStore.upstash.apiKey}
|
|
onChange={(e) => {
|
|
syncStore.update(
|
|
(config) => (config.upstash.apiKey = e.currentTarget.value),
|
|
);
|
|
}}
|
|
></PasswordInput>
|
|
</ListItem>
|
|
</List>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SyncItems() {
|
|
const syncStore = useSyncStore();
|
|
const chatStore = useChatStore();
|
|
const promptStore = usePromptStore();
|
|
const maskStore = useMaskStore();
|
|
const couldSync = useMemo(() => {
|
|
return syncStore.cloudSync();
|
|
}, [syncStore]);
|
|
|
|
const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
|
|
|
|
const stateOverview = useMemo(() => {
|
|
const sessions = chatStore.sessions;
|
|
const messageCount = sessions.reduce((p, c) => p + c.messages.length, 0);
|
|
|
|
return {
|
|
chat: sessions.length,
|
|
message: messageCount,
|
|
prompt: Object.keys(promptStore.prompts).length,
|
|
mask: Object.keys(maskStore.masks).length,
|
|
};
|
|
}, [chatStore.sessions, maskStore.masks, promptStore.prompts]);
|
|
|
|
return (
|
|
<>
|
|
<List>
|
|
<ListItem
|
|
title={Locale.Settings.Sync.CloudState}
|
|
subTitle={
|
|
syncStore.lastProvider
|
|
? `${new Date(syncStore.lastSyncTime).toLocaleString()} [${
|
|
syncStore.lastProvider
|
|
}]`
|
|
: Locale.Settings.Sync.NotSyncYet
|
|
}
|
|
>
|
|
<div style={{ display: "flex" }}>
|
|
<IconButton
|
|
icon={<ConfigIcon />}
|
|
text={Locale.UI.Config}
|
|
onClick={() => {
|
|
setShowSyncConfigModal(true);
|
|
}}
|
|
/>
|
|
{couldSync && (
|
|
<IconButton
|
|
icon={<ResetIcon />}
|
|
text={Locale.UI.Sync}
|
|
onClick={async () => {
|
|
try {
|
|
await syncStore.sync();
|
|
showToast(Locale.Settings.Sync.Success);
|
|
} catch (e) {
|
|
showToast(Locale.Settings.Sync.Fail);
|
|
console.error("[Sync]", e);
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</ListItem>
|
|
|
|
<ListItem
|
|
title={Locale.Settings.Sync.LocalState}
|
|
subTitle={Locale.Settings.Sync.Overview(stateOverview)}
|
|
>
|
|
<div style={{ display: "flex" }}>
|
|
<IconButton
|
|
icon={<UploadIcon />}
|
|
text={Locale.UI.Export}
|
|
onClick={() => {
|
|
syncStore.export();
|
|
}}
|
|
/>
|
|
<IconButton
|
|
icon={<DownloadIcon />}
|
|
text={Locale.UI.Import}
|
|
onClick={() => {
|
|
syncStore.import();
|
|
}}
|
|
/>
|
|
</div>
|
|
</ListItem>
|
|
</List>
|
|
|
|
{showSyncConfigModal && (
|
|
<SyncConfigModal onClose={() => setShowSyncConfigModal(false)} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function Settings() {
|
|
const navigate = useNavigate();
|
|
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
|
|
const config = useAppConfig();
|
|
const updateConfig = config.update;
|
|
|
|
const updateStore = useUpdateStore();
|
|
const [checkingUpdate, setCheckingUpdate] = useState(false);
|
|
const currentVersion = updateStore.formatVersion(updateStore.version);
|
|
const remoteId = updateStore.formatVersion(updateStore.remoteVersion);
|
|
const hasNewVersion = currentVersion !== remoteId;
|
|
const updateUrl = getClientConfig()?.isApp ? RELEASE_URL : UPDATE_URL;
|
|
|
|
function checkUpdate(force = false) {
|
|
setCheckingUpdate(true);
|
|
updateStore.getLatestVersion(force).then(() => {
|
|
setCheckingUpdate(false);
|
|
});
|
|
|
|
console.log("[Update] local version ", updateStore.version);
|
|
console.log("[Update] remote version ", updateStore.remoteVersion);
|
|
}
|
|
|
|
const accessStore = useAccessStore();
|
|
const shouldHideBalanceQuery = useMemo(() => {
|
|
const isOpenAiUrl = accessStore.openaiUrl.includes(OPENAI_BASE_URL);
|
|
|
|
return (
|
|
accessStore.hideBalanceQuery ||
|
|
isOpenAiUrl ||
|
|
accessStore.provider === ServiceProvider.Azure
|
|
);
|
|
}, [
|
|
accessStore.hideBalanceQuery,
|
|
accessStore.openaiUrl,
|
|
accessStore.provider,
|
|
]);
|
|
|
|
const usage = {
|
|
used: updateStore.used,
|
|
subscription: updateStore.subscription,
|
|
};
|
|
const [loadingUsage, setLoadingUsage] = useState(false);
|
|
function checkUsage(force = false) {
|
|
if (shouldHideBalanceQuery) {
|
|
return;
|
|
}
|
|
|
|
setLoadingUsage(true);
|
|
updateStore.updateUsage(force).finally(() => {
|
|
setLoadingUsage(false);
|
|
});
|
|
}
|
|
|
|
const enabledAccessControl = useMemo(
|
|
() => accessStore.enabledAccessControl(),
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[],
|
|
);
|
|
|
|
const promptStore = usePromptStore();
|
|
const builtinCount = SearchService.count.builtin;
|
|
const customCount = promptStore.getUserPrompts().length ?? 0;
|
|
const [shouldShowPromptModal, setShowPromptModal] = useState(false);
|
|
|
|
const showUsage = accessStore.isAuthorized();
|
|
useEffect(() => {
|
|
// checks per minutes
|
|
checkUpdate();
|
|
showUsage && checkUsage();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const keydownEvent = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
navigate(Path.Home);
|
|
}
|
|
};
|
|
if (clientConfig?.isApp) {
|
|
// Force to set custom endpoint to true if it's app
|
|
accessStore.update((state) => {
|
|
state.useCustomConfig = true;
|
|
});
|
|
}
|
|
document.addEventListener("keydown", keydownEvent);
|
|
return () => {
|
|
document.removeEventListener("keydown", keydownEvent);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const clientConfig = useMemo(() => getClientConfig(), []);
|
|
const showAccessCode = enabledAccessControl && !clientConfig?.isApp;
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<div className="window-header" data-tauri-drag-region>
|
|
<div className="window-header-title">
|
|
<div className="window-header-main-title">
|
|
{Locale.Settings.Title}
|
|
</div>
|
|
<div className="window-header-sub-title">
|
|
{Locale.Settings.SubTitle}
|
|
</div>
|
|
</div>
|
|
<div className="window-actions">
|
|
<div className="window-action-button"></div>
|
|
<div className="window-action-button"></div>
|
|
<div className="window-action-button">
|
|
<IconButton
|
|
icon={<CloseIcon />}
|
|
onClick={() => navigate(Path.Home)}
|
|
bordered
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles["settings"]}>
|
|
<List>
|
|
<ListItem title={Locale.Settings.Avatar}>
|
|
<Popover
|
|
onClose={() => setShowEmojiPicker(false)}
|
|
content={
|
|
<AvatarPicker
|
|
onEmojiClick={(avatar: string) => {
|
|
updateConfig((config) => (config.avatar = avatar));
|
|
setShowEmojiPicker(false);
|
|
}}
|
|
/>
|
|
}
|
|
open={showEmojiPicker}
|
|
>
|
|
<div
|
|
className={styles.avatar}
|
|
onClick={() => {
|
|
setShowEmojiPicker(!showEmojiPicker);
|
|
}}
|
|
>
|
|
<Avatar avatar={config.avatar} />
|
|
</div>
|
|
</Popover>
|
|
</ListItem>
|
|
|
|
{/*<ListItem*/}
|
|
{/* title={Locale.Settings.Update.Version(currentVersion ?? "unknown")}*/}
|
|
{/* subTitle={*/}
|
|
{/* checkingUpdate*/}
|
|
{/* ? Locale.Settings.Update.IsChecking*/}
|
|
{/* : hasNewVersion*/}
|
|
{/* ? Locale.Settings.Update.FoundUpdate(remoteId ?? "ERROR")*/}
|
|
{/* : Locale.Settings.Update.IsLatest*/}
|
|
{/* }*/}
|
|
{/*>*/}
|
|
{/* {checkingUpdate ? (*/}
|
|
{/* <LoadingIcon />*/}
|
|
{/* ) : hasNewVersion ? (*/}
|
|
{/* <Link href={updateUrl} target="_blank" className="link">*/}
|
|
{/* {Locale.Settings.Update.GoToUpdate}*/}
|
|
{/* </Link>*/}
|
|
{/* ) : (*/}
|
|
{/* <IconButton*/}
|
|
{/* icon={<ResetIcon></ResetIcon>}*/}
|
|
{/* text={Locale.Settings.Update.CheckUpdate}*/}
|
|
{/* onClick={() => checkUpdate(true)}*/}
|
|
{/* />*/}
|
|
{/* )}*/}
|
|
{/*</ListItem>*/}
|
|
|
|
{/*<ListItem title={Locale.Settings.SendKey}>*/}
|
|
{/* <Select*/}
|
|
{/* value={config.submitKey}*/}
|
|
{/* onChange={(e) => {*/}
|
|
{/* updateConfig(*/}
|
|
{/* (config) =>*/}
|
|
{/* (config.submitKey = e.target.value as any as SubmitKey),*/}
|
|
{/* );*/}
|
|
{/* }}*/}
|
|
{/* >*/}
|
|
{/* {Object.values(SubmitKey).map((v) => (*/}
|
|
{/* <option value={v} key={v}>*/}
|
|
{/* {v}*/}
|
|
{/* </option>*/}
|
|
{/* ))}*/}
|
|
{/* </Select>*/}
|
|
{/*</ListItem>*/}
|
|
|
|
{/*<ListItem title={Locale.Settings.Theme}>*/}
|
|
{/* <Select*/}
|
|
{/* value={config.theme}*/}
|
|
{/* onChange={(e) => {*/}
|
|
{/* updateConfig(*/}
|
|
{/* (config) => (config.theme = e.target.value as any as Theme),*/}
|
|
{/* );*/}
|
|
{/* }}*/}
|
|
{/* >*/}
|
|
{/* {Object.values(Theme).map((v) => (*/}
|
|
{/* <option value={v} key={v}>*/}
|
|
{/* {v}*/}
|
|
{/* </option>*/}
|
|
{/* ))}*/}
|
|
{/* </Select>*/}
|
|
{/*</ListItem>*/}
|
|
|
|
{/*<ListItem title={Locale.Settings.Lang.Name}>*/}
|
|
{/* <Select*/}
|
|
{/* value={getLang()}*/}
|
|
{/* onChange={(e) => {*/}
|
|
{/* changeLang(e.target.value as any);*/}
|
|
{/* }}*/}
|
|
{/* >*/}
|
|
{/* {AllLangs.map((lang) => (*/}
|
|
{/* <option value={lang} key={lang}>*/}
|
|
{/* {ALL_LANG_OPTIONS[lang]}*/}
|
|
{/* </option>*/}
|
|
{/* ))}*/}
|
|
{/* </Select>*/}
|
|
{/*</ListItem>*/}
|
|
|
|
<ListItem
|
|
title={Locale.Settings.FontSize.Title}
|
|
subTitle={Locale.Settings.FontSize.SubTitle}
|
|
>
|
|
<InputRange
|
|
title={`${config.fontSize ?? 14}px`}
|
|
value={config.fontSize}
|
|
min="12"
|
|
max="40"
|
|
step="1"
|
|
onChange={(e) =>
|
|
updateConfig(
|
|
(config) =>
|
|
(config.fontSize = Number.parseInt(e.currentTarget.value)),
|
|
)
|
|
}
|
|
></InputRange>
|
|
</ListItem>
|
|
|
|
{/*<ListItem*/}
|
|
{/* title={Locale.Settings.AutoGenerateTitle.Title}*/}
|
|
{/* subTitle={Locale.Settings.AutoGenerateTitle.SubTitle}*/}
|
|
{/*>*/}
|
|
{/* <input*/}
|
|
{/* type="checkbox"*/}
|
|
{/* checked={config.enableAutoGenerateTitle}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* updateConfig(*/}
|
|
{/* (config) =>*/}
|
|
{/* (config.enableAutoGenerateTitle = e.currentTarget.checked),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/*</ListItem>*/}
|
|
|
|
{/*<ListItem*/}
|
|
{/* title={Locale.Settings.SendPreviewBubble.Title}*/}
|
|
{/* subTitle={Locale.Settings.SendPreviewBubble.SubTitle}*/}
|
|
{/*>*/}
|
|
{/* <input*/}
|
|
{/* type="checkbox"*/}
|
|
{/* checked={config.sendPreviewBubble}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* updateConfig(*/}
|
|
{/* (config) =>*/}
|
|
{/* (config.sendPreviewBubble = e.currentTarget.checked),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/*</ListItem>*/}
|
|
</List>
|
|
|
|
{/*<SyncItems />*/}
|
|
|
|
{/*<List>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Mask.Splash.Title}*/}
|
|
{/* subTitle={Locale.Settings.Mask.Splash.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="checkbox"*/}
|
|
{/* checked={!config.dontShowMaskSplashScreen}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* updateConfig(*/}
|
|
{/* (config) =>*/}
|
|
{/* (config.dontShowMaskSplashScreen =*/}
|
|
{/* !e.currentTarget.checked),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Mask.Builtin.Title}*/}
|
|
{/* subTitle={Locale.Settings.Mask.Builtin.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="checkbox"*/}
|
|
{/* checked={config.hideBuiltinMasks}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* updateConfig(*/}
|
|
{/* (config) =>*/}
|
|
{/* (config.hideBuiltinMasks = e.currentTarget.checked),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
{/*</List>*/}
|
|
|
|
{/*<List>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Prompt.Disable.Title}*/}
|
|
{/* subTitle={Locale.Settings.Prompt.Disable.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="checkbox"*/}
|
|
{/* checked={config.disablePromptHint}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* updateConfig(*/}
|
|
{/* (config) =>*/}
|
|
{/* (config.disablePromptHint = e.currentTarget.checked),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Prompt.List}*/}
|
|
{/* subTitle={Locale.Settings.Prompt.ListCount(*/}
|
|
{/* builtinCount,*/}
|
|
{/* customCount,*/}
|
|
{/* )}*/}
|
|
{/* >*/}
|
|
{/* <IconButton*/}
|
|
{/* icon={<EditIcon />}*/}
|
|
{/* text={Locale.Settings.Prompt.Edit}*/}
|
|
{/* onClick={() => setShowPromptModal(true)}*/}
|
|
{/* />*/}
|
|
{/* </ListItem>*/}
|
|
{/*</List>*/}
|
|
|
|
{/*<List id={SlotID.CustomModel}>*/}
|
|
{/* {showAccessCode && (*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.AccessCode.Title}*/}
|
|
{/* subTitle={Locale.Settings.Access.AccessCode.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <PasswordInput*/}
|
|
{/* value={accessStore.accessCode}*/}
|
|
{/* type="text"*/}
|
|
{/* placeholder={Locale.Settings.Access.AccessCode.Placeholder}*/}
|
|
{/* onChange={(e) => {*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) => (access.accessCode = e.currentTarget.value),*/}
|
|
{/* );*/}
|
|
{/* }}*/}
|
|
{/* />*/}
|
|
{/* </ListItem>*/}
|
|
{/* )}*/}
|
|
|
|
{/* {!accessStore.hideUserApiKey && (*/}
|
|
{/* <>*/}
|
|
{/* {*/}
|
|
{/* // Conditionally render the following ListItem based on clientConfig.isApp*/}
|
|
{/* !clientConfig?.isApp && ( // only show if isApp is false*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.CustomEndpoint.Title}*/}
|
|
{/* subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="checkbox"*/}
|
|
{/* checked={accessStore.useCustomConfig}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.useCustomConfig = e.currentTarget.checked),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* {accessStore.useCustomConfig && (*/}
|
|
{/* <>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.Provider.Title}*/}
|
|
{/* subTitle={Locale.Settings.Access.Provider.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <Select*/}
|
|
{/* value={accessStore.provider}*/}
|
|
{/* onChange={(e) => {*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.provider = e.target*/}
|
|
{/* .value as ServiceProvider),*/}
|
|
{/* );*/}
|
|
{/* }}*/}
|
|
{/* >*/}
|
|
{/* {Object.entries(ServiceProvider).map(([k, v]) => (*/}
|
|
{/* <option value={v} key={k}>*/}
|
|
{/* {k}*/}
|
|
{/* </option>*/}
|
|
{/* ))}*/}
|
|
{/* </Select>*/}
|
|
{/* </ListItem>*/}
|
|
|
|
{/* {accessStore.provider === "OpenAI" ? (*/}
|
|
{/* <>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.OpenAI.Endpoint.Title}*/}
|
|
{/* subTitle={*/}
|
|
{/* Locale.Settings.Access.OpenAI.Endpoint.SubTitle*/}
|
|
{/* }*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="text"*/}
|
|
{/* value={accessStore.openaiUrl}*/}
|
|
{/* placeholder={OPENAI_BASE_URL}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.openaiUrl = e.currentTarget.value),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.OpenAI.ApiKey.Title}*/}
|
|
{/* subTitle={Locale.Settings.Access.OpenAI.ApiKey.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <PasswordInput*/}
|
|
{/* value={accessStore.openaiApiKey}*/}
|
|
{/* type="text"*/}
|
|
{/* placeholder={*/}
|
|
{/* Locale.Settings.Access.OpenAI.ApiKey.Placeholder*/}
|
|
{/* }*/}
|
|
{/* onChange={(e) => {*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.openaiApiKey = e.currentTarget.value),*/}
|
|
{/* );*/}
|
|
{/* }}*/}
|
|
{/* />*/}
|
|
{/* </ListItem>*/}
|
|
{/* </>*/}
|
|
{/* ) : accessStore.provider === "Azure" ? (*/}
|
|
{/* <>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.Azure.Endpoint.Title}*/}
|
|
{/* subTitle={*/}
|
|
{/* Locale.Settings.Access.Azure.Endpoint.SubTitle +*/}
|
|
{/* Azure.ExampleEndpoint*/}
|
|
{/* }*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="text"*/}
|
|
{/* value={accessStore.azureUrl}*/}
|
|
{/* placeholder={Azure.ExampleEndpoint}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.azureUrl = e.currentTarget.value),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.Azure.ApiKey.Title}*/}
|
|
{/* subTitle={Locale.Settings.Access.Azure.ApiKey.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <PasswordInput*/}
|
|
{/* value={accessStore.azureApiKey}*/}
|
|
{/* type="text"*/}
|
|
{/* placeholder={*/}
|
|
{/* Locale.Settings.Access.Azure.ApiKey.Placeholder*/}
|
|
{/* }*/}
|
|
{/* onChange={(e) => {*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.azureApiKey = e.currentTarget.value),*/}
|
|
{/* );*/}
|
|
{/* }}*/}
|
|
{/* />*/}
|
|
{/* </ListItem>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.Azure.ApiVerion.Title}*/}
|
|
{/* subTitle={*/}
|
|
{/* Locale.Settings.Access.Azure.ApiVerion.SubTitle*/}
|
|
{/* }*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="text"*/}
|
|
{/* value={accessStore.azureApiVersion}*/}
|
|
{/* placeholder="2023-08-01-preview"*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.azureApiVersion =*/}
|
|
{/* e.currentTarget.value),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
{/* </>*/}
|
|
{/* ) : accessStore.provider === "Google" ? (*/}
|
|
{/* <>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.Google.Endpoint.Title}*/}
|
|
{/* subTitle={*/}
|
|
{/* Locale.Settings.Access.Google.Endpoint.SubTitle +*/}
|
|
{/* Google.ExampleEndpoint*/}
|
|
{/* }*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="text"*/}
|
|
{/* value={accessStore.googleUrl}*/}
|
|
{/* placeholder={Google.ExampleEndpoint}*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.googleUrl = e.currentTarget.value),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.Google.ApiKey.Title}*/}
|
|
{/* subTitle={Locale.Settings.Access.Google.ApiKey.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <PasswordInput*/}
|
|
{/* value={accessStore.googleApiKey}*/}
|
|
{/* type="text"*/}
|
|
{/* placeholder={*/}
|
|
{/* Locale.Settings.Access.Google.ApiKey.Placeholder*/}
|
|
{/* }*/}
|
|
{/* onChange={(e) => {*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.googleApiKey = e.currentTarget.value),*/}
|
|
{/* );*/}
|
|
{/* }}*/}
|
|
{/* />*/}
|
|
{/* </ListItem>*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.Google.ApiVersion.Title}*/}
|
|
{/* subTitle={*/}
|
|
{/* Locale.Settings.Access.Google.ApiVersion.SubTitle*/}
|
|
{/* }*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="text"*/}
|
|
{/* value={accessStore.googleApiVersion}*/}
|
|
{/* placeholder="2023-08-01-preview"*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* accessStore.update(*/}
|
|
{/* (access) =>*/}
|
|
{/* (access.googleApiVersion =*/}
|
|
{/* e.currentTarget.value),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
{/* </>*/}
|
|
{/* ) : null}*/}
|
|
{/* </>*/}
|
|
{/* )}*/}
|
|
{/* </>*/}
|
|
{/* )}*/}
|
|
|
|
{/* {!shouldHideBalanceQuery && !clientConfig?.isApp ? (*/}
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Usage.Title}*/}
|
|
{/* subTitle={*/}
|
|
{/* showUsage*/}
|
|
{/* ? loadingUsage*/}
|
|
{/* ? Locale.Settings.Usage.IsChecking*/}
|
|
{/* : Locale.Settings.Usage.SubTitle(*/}
|
|
{/* usage?.used ?? "[?]",*/}
|
|
{/* usage?.subscription ?? "[?]",*/}
|
|
{/* )*/}
|
|
{/* : Locale.Settings.Usage.NoAccess*/}
|
|
{/* }*/}
|
|
{/* >*/}
|
|
{/* {!showUsage || loadingUsage ? (*/}
|
|
{/* <div />*/}
|
|
{/* ) : (*/}
|
|
{/* <IconButton*/}
|
|
{/* icon={<ResetIcon></ResetIcon>}*/}
|
|
{/* text={Locale.Settings.Usage.Check}*/}
|
|
{/* onClick={() => checkUsage(true)}*/}
|
|
{/* />*/}
|
|
{/* )}*/}
|
|
{/* </ListItem>*/}
|
|
{/* ) : null}*/}
|
|
|
|
{/* <ListItem*/}
|
|
{/* title={Locale.Settings.Access.CustomModel.Title}*/}
|
|
{/* subTitle={Locale.Settings.Access.CustomModel.SubTitle}*/}
|
|
{/* >*/}
|
|
{/* <input*/}
|
|
{/* type="text"*/}
|
|
{/* value={config.customModels}*/}
|
|
{/* placeholder="model1,model2,model3"*/}
|
|
{/* onChange={(e) =>*/}
|
|
{/* config.update(*/}
|
|
{/* (config) => (config.customModels = e.currentTarget.value),*/}
|
|
{/* )*/}
|
|
{/* }*/}
|
|
{/* ></input>*/}
|
|
{/* </ListItem>*/}
|
|
{/*</List>*/}
|
|
|
|
{/*<List>*/}
|
|
{/* <ModelConfigList*/}
|
|
{/* modelConfig={config.modelConfig}*/}
|
|
{/* updateConfig={(updater) => {*/}
|
|
{/* const modelConfig = { ...config.modelConfig };*/}
|
|
{/* updater(modelConfig);*/}
|
|
{/* config.update((config) => (config.modelConfig = modelConfig));*/}
|
|
{/* }}*/}
|
|
{/* />*/}
|
|
{/*</List>*/}
|
|
|
|
{shouldShowPromptModal && (
|
|
<UserPromptModal onClose={() => setShowPromptModal(false)} />
|
|
)}
|
|
|
|
<DangerItems />
|
|
</div>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|