7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-08-09 00:15:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add session config modal

Browse Source
This commit is contained in:
Yidadaa
2023-04-23 01:27:15 +08:00
parent 2e3aa940fb
commit 7345639af3
15 changed files with 489 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
app/components/settings.tsx
View File

@@ -1,7 +1,5 @@
import { useState, useEffect, useMemo, HTMLProps, useRef } from "react";
import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react";
import styles from "./settings.module.scss";
import ResetIcon from "../icons/reload.svg";
@@ -10,30 +8,27 @@ import CopyIcon from "../icons/copy.svg";
import ClearIcon from "../icons/clear.svg";
import EditIcon from "../icons/edit.svg";
import { Input, List, ListItem, Modal, PasswordInput, Popover } from "./ui-lib";
import { ModelConfigList } from "./model-config";
import { IconButton } from "./button";
import {
SubmitKey,
useChatStore,
Theme,
ALL_MODELS,
useUpdateStore,
useAccessStore,
ModalConfigValidator,
useAppConfig,
ChatConfig,
ModelConfig,
} from "../store";
import { Avatar } from "./chat";
import Locale, { AllLangs, changeLang, getLang } from "../locales";
import { copyToClipboard, getEmojiUrl } from "../utils";
import { copyToClipboard } from "../utils";
import Link from "next/link";
import { Path, 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";
function UserPromptModal(props: { onClose?: () => void }) {
const promptStore = usePromptStore();
@@ -136,148 +131,6 @@ function UserPromptModal(props: { onClose?: () => void }) {
);
}
function SettingItem(props: {
title: string;
subTitle?: string;
children: JSX.Element;
}) {
return (
<ListItem>
<div className={styles["settings-title"]}>
<div>{props.title}</div>
{props.subTitle && (
<div className={styles["settings-sub-title"]}>{props.subTitle}</div>
)}
</div>
{props.children}
</ListItem>
);
}
export function ModelConfigList(props: {
modelConfig: ModelConfig;
updateConfig: (updater: (config: ModelConfig) => void) => void;
}) {
return (
<>
<SettingItem title={Locale.Settings.Model}>
<select
value={props.modelConfig.model}
onChange={(e) => {
props.updateConfig(
(config) =>
(config.model = ModalConfigValidator.model(
e.currentTarget.value,
)),
);
}}
>
{ALL_MODELS.map((v) => (
<option value={v.name} key={v.name} disabled={!v.available}>
{v.name}
</option>
))}
</select>
</SettingItem>
<SettingItem
title={Locale.Settings.Temperature.Title}
subTitle={Locale.Settings.Temperature.SubTitle}
>
<InputRange
value={props.modelConfig.temperature?.toFixed(1)}
min="0"
max="2"
step="0.1"
onChange={(e) => {
props.updateConfig(
(config) =>
(config.temperature = ModalConfigValidator.temperature(
e.currentTarget.valueAsNumber,
)),
);
}}
></InputRange>
</SettingItem>
<SettingItem
title={Locale.Settings.MaxTokens.Title}
subTitle={Locale.Settings.MaxTokens.SubTitle}
>
<input
type="number"
min={100}
max={32000}
value={props.modelConfig.max_tokens}
onChange={(e) =>
props.updateConfig(
(config) =>
(config.max_tokens = ModalConfigValidator.max_tokens(
e.currentTarget.valueAsNumber,
)),
)
}
></input>
</SettingItem>
<SettingItem
title={Locale.Settings.PresencePenlty.Title}
subTitle={Locale.Settings.PresencePenlty.SubTitle}
>
<InputRange
value={props.modelConfig.presence_penalty?.toFixed(1)}
min="-2"
max="2"
step="0.1"
onChange={(e) => {
props.updateConfig(
(config) =>
(config.presence_penalty =
ModalConfigValidator.presence_penalty(
e.currentTarget.valueAsNumber,
)),
);
}}
></InputRange>
</SettingItem>
<SettingItem
title={Locale.Settings.HistoryCount.Title}
subTitle={Locale.Settings.HistoryCount.SubTitle}
>
<InputRange
title={props.modelConfig.historyMessageCount.toString()}
value={props.modelConfig.historyMessageCount}
min="0"
max="25"
step="1"
onChange={(e) =>
props.updateConfig(
(config) => (config.historyMessageCount = e.target.valueAsNumber),
)
}
></InputRange>
</SettingItem>
<SettingItem
title={Locale.Settings.CompressThreshold.Title}
subTitle={Locale.Settings.CompressThreshold.SubTitle}
>
<input
type="number"
min={500}
max={4000}
value={props.modelConfig.compressMessageLengthThreshold}
onChange={(e) =>
props.updateConfig(
(config) =>
(config.compressMessageLengthThreshold =
e.currentTarget.valueAsNumber),
)
}
></input>
</SettingItem>
</>
);
}
export function Settings() {
const navigate = useNavigate();
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -401,16 +254,13 @@ export function Settings() {
</div>
<div className={styles["settings"]}>
<List>
<SettingItem title={Locale.Settings.Avatar}>
<ListItem title={Locale.Settings.Avatar}>
<Popover
onClose={() => setShowEmojiPicker(false)}
content={
<EmojiPicker
lazyLoadEmojis
theme={EmojiTheme.AUTO}
getEmojiUrl={getEmojiUrl}
onEmojiClick={(e) => {
updateConfig((config) => (config.avatar = e.unified));
<AvatarPicker
onEmojiClick={(avatar: string) => {
updateConfig((config) => (config.avatar = avatar));
setShowEmojiPicker(false);
}}
/>
@@ -421,12 +271,12 @@ export function Settings() {
className={styles.avatar}
onClick={() => setShowEmojiPicker(true)}
>
<Avatar role="user" />
<Avatar avatar={config.avatar} />
</div>
</Popover>
</SettingItem>
</ListItem>
<SettingItem
<ListItem
title={Locale.Settings.Update.Version(currentVersion ?? "unknown")}
subTitle={
checkingUpdate
@@ -449,9 +299,9 @@ export function Settings() {
onClick={() => checkUpdate(true)}
/>
)}
</SettingItem>
</ListItem>
<SettingItem title={Locale.Settings.SendKey}>
<ListItem title={Locale.Settings.SendKey}>
<select
value={config.submitKey}
onChange={(e) => {
@@ -467,12 +317,9 @@ export function Settings() {
</option>
))}
</select>
</SettingItem>
</ListItem>
<ListItem>
<div className={styles["settings-title"]}>
{Locale.Settings.Theme}
</div>
<ListItem title={Locale.Settings.Theme}>
<select
value={config.theme}
onChange={(e) => {
@@ -489,7 +336,7 @@ export function Settings() {
</select>
</ListItem>
<SettingItem title={Locale.Settings.Lang.Name}>
<ListItem title={Locale.Settings.Lang.Name}>
<select
value={getLang()}
onChange={(e) => {
@@ -502,9 +349,9 @@ export function Settings() {
</option>
))}
</select>
</SettingItem>
</ListItem>
<SettingItem
<ListItem
title={Locale.Settings.FontSize.Title}
subTitle={Locale.Settings.FontSize.SubTitle}
>
@@ -521,9 +368,9 @@ export function Settings() {
)
}
></InputRange>
</SettingItem>
</ListItem>
<SettingItem title={Locale.Settings.TightBorder}>
<ListItem title={Locale.Settings.TightBorder}>
<input
type="checkbox"
checked={config.tightBorder}
@@ -533,9 +380,9 @@ export function Settings() {
)
}
></input>
</SettingItem>
</ListItem>
<SettingItem title={Locale.Settings.SendPreviewBubble}>
<ListItem title={Locale.Settings.SendPreviewBubble}>
<input
type="checkbox"
checked={config.sendPreviewBubble}
@@ -546,12 +393,12 @@ export function Settings() {
)
}
></input>
</SettingItem>
</ListItem>
</List>
<List>
{enabledAccessControl ? (
<SettingItem
<ListItem
title={Locale.Settings.AccessCode.Title}
subTitle={Locale.Settings.AccessCode.SubTitle}
>
@@ -563,12 +410,12 @@ export function Settings() {
accessStore.updateCode(e.currentTarget.value);
}}
/>
</SettingItem>
</ListItem>
) : (
<></>
)}
<SettingItem
<ListItem
title={Locale.Settings.Token.Title}
subTitle={Locale.Settings.Token.SubTitle}
>
@@ -580,9 +427,9 @@ export function Settings() {
accessStore.updateToken(e.currentTarget.value);
}}
/>
</SettingItem>
</ListItem>
<SettingItem
<ListItem
title={Locale.Settings.Usage.Title}
subTitle={
showUsage
@@ -604,11 +451,11 @@ export function Settings() {
onClick={checkUsage}
/>
)}
</SettingItem>
</ListItem>
</List>
<List>
<SettingItem
<ListItem
title={Locale.Settings.Prompt.Disable.Title}
subTitle={Locale.Settings.Prompt.Disable.SubTitle}
>
@@ -622,9 +469,9 @@ export function Settings() {
)
}
></input>
</SettingItem>
</ListItem>
<SettingItem
<ListItem
title={Locale.Settings.Prompt.List}
subTitle={Locale.Settings.Prompt.ListCount(
builtinCount,
@@ -636,19 +483,17 @@ export function Settings() {
text={Locale.Settings.Prompt.Edit}
onClick={() => setShowPromptModal(true)}
/>
</SettingItem>
</ListItem>
</List>
<List>
<ModelConfigList
modelConfig={config.modelConfig}
updateConfig={(upater) => {
const modelConfig = { ...config.modelConfig };
upater(modelConfig);
config.update((config) => (config.modelConfig = modelConfig));
}}
/>
</List>
<ModelConfigList
modelConfig={config.modelConfig}
updateConfig={(upater) => {
const modelConfig = { ...config.modelConfig };
upater(modelConfig);
config.update((config) => (config.modelConfig = modelConfig));
}}
/>
{shouldShowPromptModal && (
<UserPromptModal onClose={() => setShowPromptModal(false)} />