Ecosystem/ai-gateway
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: berry theme update & bug fix (#1471)

Browse Source 
* feat: load channel models from server

* chore: support AWS Claude/Cloudflare/Coze

* fix: Popup message when copying fails

* chore: Optimize tips
This commit is contained in:
Buer 2024-05-28 01:22:40 +08:00 committed by GitHub
parent 0acee9a065
commit 07b2fd58d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 448 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/berry/src/constants/ChannelConstants.js
View File

@ -11,12 +11,18 @@ export const CHANNEL_OPTIONS = {
value: 14,
color: 'primary'
},
// 33: {
// key: 33,
// text: 'AWS Claude',
// value: 33,
// color: 'primary'
// },
33: {
key: 33,
text: 'AWS Claude',
value: 33,
color: 'primary'
},
37: {
key: 37,
text: 'Cloudflare',
value: 37,
color: 'success'
},
3: {
key: 3,
text: 'Azure OpenAI',
@ -119,12 +125,12 @@ export const CHANNEL_OPTIONS = {
value: 32,
color: 'primary'
},
// 34: {
// key: 34,
// text: 'Coze',
// value: 34,
// color: 'primary'
// },
34: {
key: 34,
text: 'Coze',
value: 34,
color: 'primary'
},
35: {
key: 35,
text: 'Cohere',

42
web/berry/src/constants/SnackbarConstants.js
View File

@ -1,24 +1,56 @@
import { closeSnackbar } from 'notistack';
import { IconX } from '@tabler/icons-react';
import { IconButton } from '@mui/material';
const action = (snackbarId) => (
<>
<IconButton
onClick={() => {
closeSnackbar(snackbarId);
}}
>
<IconX stroke={1.5} size="1.25rem" />
</IconButton>
</>
);
export const snackbarConstants = {
Common: {
ERROR: {
variant: 'error',
autoHideDuration: 5000
autoHideDuration: 5000,
preventDuplicate: true,
action
},
WARNING: {
variant: 'warning',
autoHideDuration: 10000
autoHideDuration: 10000,
preventDuplicate: true,
action
},
SUCCESS: {
variant: 'success',
autoHideDuration: 1500
autoHideDuration: 1500,
preventDuplicate: true,
action
},
INFO: {
variant: 'info',
autoHideDuration: 3000
autoHideDuration: 3000,
preventDuplicate: true,
action
},
NOTICE: {
variant: 'info',
autoHideDuration: 7000
autoHideDuration: 20000,
preventDuplicate: true,
action
},
COPY: {
variant: 'copy',
persist: true,
preventDuplicate: true,
allowDownload: true,
action
}
},
Mobile: {

37
web/berry/src/utils/common.js
View File

@ -193,3 +193,40 @@ export function removeTrailingSlash(url) {
return url;
}
}
let channelModels = undefined;
export async function loadChannelModels() {
const res = await API.get('/api/models');
const { success, data } = res.data;
if (!success) {
return;
}
channelModels = data;
localStorage.setItem('channel_models', JSON.stringify(data));
}
export function getChannelModels(type) {
if (channelModels !== undefined && type in channelModels) {
return channelModels[type];
}
let models = localStorage.getItem('channel_models');
if (!models) {
return [];
}
channelModels = JSON.parse(models);
if (type in channelModels) {
return channelModels[type];
}
return [];
}
export function copy(text, name = '') {
try {
navigator.clipboard.writeText(text);
} catch (error) {
text = `复制${name}失败，请手动复制：<br /><br />${text}`;
enqueueSnackbar(<SnackbarHTMLContent htmlContent={text} />, getSnackbarOptions('COPY'));
return;
}
showSuccess(`复制${name}成功！`);
}

43
web/berry/src/views/Authentication/AuthForms/ResetPasswordForm.js
View File

@ -1,22 +1,22 @@
import { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
// material-ui
import { Button, Stack, Typography, Alert } from "@mui/material";
import { Button, Stack, Typography, Alert } from '@mui/material';
// assets
import { showError, showInfo } from "utils/common";
import { API } from "utils/api";
import { showError, copy } from 'utils/common';
import { API } from 'utils/api';
// ===========================|| FIREBASE - REGISTER ||=========================== //
const ResetPasswordForm = () => {
const [searchParams] = useSearchParams();
const [inputs, setInputs] = useState({
email: "",
token: "",
email: '',
token: ''
});
const [newPassword, setNewPassword] = useState("");
const [newPassword, setNewPassword] = useState('');
const submit = async () => {
const res = await API.post(`/api/user/reset`, inputs);
@ -24,31 +24,25 @@ const ResetPasswordForm = () => {
if (success) {
let password = res.data.data;
setNewPassword(password);
navigator.clipboard.writeText(password);
showInfo(`新密码已复制到剪贴板：${password}`);
copy(password, '新密码');
} else {
showError(message);
}
};
useEffect(() => {
let email = searchParams.get("email");
let token = searchParams.get("token");
let email = searchParams.get('email');
let token = searchParams.get('token');
setInputs({
token,
email,
email
});
}, []);
return (
<Stack
spacing={3}
padding={"24px"}
justifyContent={"center"}
alignItems={"center"}
>
<Stack spacing={3} padding={'24px'} justifyContent={'center'} alignItems={'center'}>
{!inputs.email || !inputs.token ? (
<Typography variant="h3" sx={{ textDecoration: "none" }}>
<Typography variant="h3" sx={{ textDecoration: 'none' }}>
无效的链接
</Typography>
) : newPassword ? (
@ -57,14 +51,7 @@ const ResetPasswordForm = () => {
请登录后及时修改密码
</Alert>
) : (
<Button
fullWidth
onClick={submit}
size="large"
type="submit"
variant="contained"
color="primary"
>
<Button fullWidth onClick={submit} size="large" type="submit" variant="contained" color="primary">
点击重置密码
</Button>
)}

502
web/berry/src/views/Channel/component/EditModal.js
View File

@ -1,9 +1,9 @@
import PropTypes from "prop-types";
import { useState, useEffect } from "react";
import { CHANNEL_OPTIONS } from "constants/ChannelConstants";
import { useTheme } from "@mui/material/styles";
import { API } from "utils/api";
import { showError, showSuccess } from "utils/common";
import PropTypes from 'prop-types';
import { useState, useEffect } from 'react';
import { CHANNEL_OPTIONS } from 'constants/ChannelConstants';
import { useTheme } from '@mui/material/styles';
import { API } from 'utils/api';
import { showError, showSuccess, getChannelModels } from 'utils/common';
import {
Dialog,
DialogTitle,
@ -22,15 +22,15 @@ import {
Autocomplete,
FormHelperText,
Switch,
Checkbox,
} from "@mui/material";
Checkbox
} from '@mui/material';
import { Formik } from "formik";
import * as Yup from "yup";
import { defaultConfig, typeConfig } from "../type/Config"; //typeConfig
import { createFilterOptions } from "@mui/material/Autocomplete";
import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
import CheckBoxIcon from "@mui/icons-material/CheckBox";
import { Formik } from 'formik';
import * as Yup from 'yup';
import { defaultConfig, typeConfig } from '../type/Config'; //typeConfig
import { createFilterOptions } from '@mui/material/Autocomplete';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;
@ -38,38 +38,34 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
const filter = createFilterOptions();
const validationSchema = Yup.object().shape({
is_edit: Yup.boolean(),
name: Yup.string().required("名称 不能为空"),
type: Yup.number().required("渠道 不能为空"),
key: Yup.string().when("is_edit", {
is: false,
then: Yup.string().required("密钥 不能为空"),
name: Yup.string().required('名称 不能为空'),
type: Yup.number().required('渠道 不能为空'),
key: Yup.string().when(['is_edit', 'type'], {
is: (is_edit, type) => !is_edit && type !== 33,
then: Yup.string().required('密钥 不能为空')
}),
other: Yup.string(),
models: Yup.array().min(1, "模型 不能为空"),
groups: Yup.array().min(1, "用户组 不能为空"),
base_url: Yup.string().when("type", {
models: Yup.array().min(1, '模型 不能为空'),
groups: Yup.array().min(1, '用户组 不能为空'),
base_url: Yup.string().when('type', {
is: (value) => [3, 8].includes(value),
then: Yup.string().required("渠道API地址 不能为空"), // base_url 是必需的
otherwise: Yup.string(), // 在其他情况下，base_url 可以是任意字符串
then: Yup.string().required('渠道API地址 不能为空'), // base_url 是必需的
otherwise: Yup.string() // 在其他情况下，base_url 可以是任意字符串
}),
model_mapping: Yup.string().test(
"is-json",
"必须是有效的JSON字符串",
function (value) {
try {
if (value === "" || value === null || value === undefined) {
return true;
}
const parsedValue = JSON.parse(value);
if (typeof parsedValue === "object") {
return true;
}
} catch (e) {
return false;
model_mapping: Yup.string().test('is-json', '必须是有效的JSON字符串', function (value) {
try {
if (value === '' || value === null || value === undefined) {
return true;
}
const parsedValue = JSON.parse(value);
if (typeof parsedValue === 'object') {
return true;
}
} catch (e) {
return false;
}
),
return false;
})
});
const EditModal = ({ open, channelId, onCancel, onOk }) => {
@ -81,12 +77,13 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const [groupOptions, setGroupOptions] = useState([]);
const [modelOptions, setModelOptions] = useState([]);
const [batchAdd, setBatchAdd] = useState(false);
const [basicModels, setBasicModels] = useState([]);
const initChannel = (typeValue) => {
if (typeConfig[typeValue]?.inputLabel) {
setInputLabel({
...defaultConfig.inputLabel,
...typeConfig[typeValue].inputLabel,
...typeConfig[typeValue].inputLabel
});
} else {
setInputLabel(defaultConfig.inputLabel);
@ -95,7 +92,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
if (typeConfig[typeValue]?.prompt) {
setInputPrompt({
...defaultConfig.prompt,
...typeConfig[typeValue].prompt,
...typeConfig[typeValue].prompt
});
} else {
setInputPrompt(defaultConfig.prompt);
@ -104,40 +101,14 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
return typeConfig[typeValue]?.input;
};
const handleTypeChange = (setFieldValue, typeValue, values) => {
const newInput = initChannel(typeValue);
if (newInput) {
Object.keys(newInput).forEach((key) => {
if (
(!Array.isArray(values[key]) &&
values[key] !== null &&
values[key] !== undefined &&
values[key] !== "") ||
(Array.isArray(values[key]) && values[key].length > 0)
) {
return;
}
if (key === "models") {
setFieldValue(key, initialModel(newInput[key]));
return;
}
setFieldValue(key, newInput[key]);
});
initChannel(typeValue);
let localModels = getChannelModels(typeValue);
setBasicModels(localModels);
if (localModels.length > 0 && Array.isArray(values['models']) && values['models'].length == 0) {
setFieldValue('models', initialModel(localModels));
}
};
const basicModels = (channelType) => {
let modelGroup =
typeConfig[channelType]?.modelGroup || defaultConfig.modelGroup;
// 循环 modelOptions，找到 modelGroup 对应的模型
let modelList = [];
modelOptions.forEach((model) => {
if (model.group === modelGroup) {
modelList.push(model);
}
});
return modelList;
setFieldValue('config', {});
};
const fetchGroups = async () => {
@ -155,7 +126,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const { data } = res.data;
data.forEach((item) => {
if (!item.owned_by) {
item.owned_by = "未知";
item.owned_by = '未知';
}
});
// 先对data排序
@ -171,7 +142,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
data.map((model) => {
return {
id: model.id,
group: model.owned_by,
group: model.owned_by
};
})
);
@ -182,33 +153,41 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
setSubmitting(true);
if (values.base_url && values.base_url.endsWith("/")) {
if (values.base_url && values.base_url.endsWith('/')) {
values.base_url = values.base_url.slice(0, values.base_url.length - 1);
}
if (values.type === 3 && values.other === "") {
values.other = "2023-09-01-preview";
if (values.type === 3 && values.other === '') {
values.other = '2023-09-01-preview';
}
if (values.type === 18 && values.other === "") {
values.other = "v2.1";
if (values.type === 18 && values.other === '') {
values.other = 'v2.1';
}
if (values.key === '') {
if (values.config.ak !== '' && values.config.sk !== '' && values.config.region !== '') {
values.key = `${values.config.ak}|${values.config.sk}|${values.config.region}`;
}
}
let res;
const modelsStr = values.models.map((model) => model.id).join(",");
values.group = values.groups.join(",");
const modelsStr = values.models.map((model) => model.id).join(',');
const configStr = JSON.stringify(values.config);
values.group = values.groups.join(',');
if (channelId) {
res = await API.put(`/api/channel/`, {
...values,
id: parseInt(channelId),
models: modelsStr,
config: configStr
});
} else {
res = await API.post(`/api/channel/`, { ...values, models: modelsStr });
res = await API.post(`/api/channel/`, { ...values, models: modelsStr, config: configStr });
}
const { success, message } = res.data;
if (success) {
if (channelId) {
showSuccess("渠道更新成功！");
showSuccess('渠道更新成功！');
} else {
showSuccess("渠道创建成功！");
showSuccess('渠道创建成功！');
}
setSubmitting(false);
setStatus({ success: true });
@ -226,15 +205,15 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
}
// 如果 channelModel 是一个字符串
if (typeof channelModel === "string") {
channelModel = channelModel.split(",");
if (typeof channelModel === 'string') {
channelModel = channelModel.split(',');
}
let modelList = channelModel.map((model) => {
const modelOption = modelOptions.find((option) => option.id === model);
if (modelOption) {
return modelOption;
}
return { id: model, group: "自定义：点击或回车输入" };
return { id: model, group: '自定义：点击或回车输入' };
});
return modelList;
}
@ -243,24 +222,24 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
let res = await API.get(`/api/channel/${channelId}`);
const { success, message, data } = res.data;
if (success) {
if (data.models === "") {
if (data.models === '') {
data.models = [];
} else {
data.models = initialModel(data.models);
}
if (data.group === "") {
if (data.group === '') {
data.groups = [];
} else {
data.groups = data.group.split(",");
data.groups = data.group.split(',');
}
if (data.model_mapping !== "") {
data.model_mapping = JSON.stringify(
JSON.parse(data.model_mapping),
null,
2
);
if (data.model_mapping !== '') {
data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
}
data.base_url = data.base_url ?? "";
if (data.config !== '') {
data.config = JSON.parse(data.config);
}
data.base_url = data.base_url ?? '';
data.is_edit = true;
initChannel(data.type);
setInitialInput(data);
@ -286,45 +265,25 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
}, [channelId]);
return (
<Dialog open={open} onClose={onCancel} fullWidth maxWidth={"md"}>
<Dialog open={open} onClose={onCancel} fullWidth maxWidth={'md'}>
<DialogTitle
sx={{
margin: "0px",
margin: '0px',
fontWeight: 700,
lineHeight: "1.55556",
padding: "24px",
fontSize: "1.125rem",
lineHeight: '1.55556',
padding: '24px',
fontSize: '1.125rem'
}}
>
{channelId ? "编辑渠道" : "新建渠道"}
{channelId ? '编辑渠道' : '新建渠道'}
</DialogTitle>
<Divider />
<DialogContent>
<Formik
initialValues={initialInput}
enableReinitialize
validationSchema={validationSchema}
onSubmit={submit}
>
{({
errors,
handleBlur,
handleChange,
handleSubmit,
isSubmitting,
touched,
values,
setFieldValue,
}) => (
<Formik initialValues={initialInput} enableReinitialize validationSchema={validationSchema} onSubmit={submit}>
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values, setFieldValue }) => (
<form noValidate onSubmit={handleSubmit}>
<FormControl
fullWidth
error={Boolean(touched.type && errors.type)}
sx={{ ...theme.typography.otherInput }}
>
<InputLabel htmlFor="channel-type-label">
{inputLabel.type}
</InputLabel>
<FormControl fullWidth error={Boolean(touched.type && errors.type)} sx={{ ...theme.typography.otherInput }}>
<InputLabel htmlFor="channel-type-label">{inputLabel.type}</InputLabel>
<Select
id="channel-type-label"
label={inputLabel.type}
@ -338,9 +297,9 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
MenuProps={{
PaperProps: {
style: {
maxHeight: 200,
},
},
maxHeight: 200
}
}
}}
>
{Object.values(CHANNEL_OPTIONS)
@ -360,21 +319,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.type}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-type-label">
{" "}
{inputPrompt.type}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-type-label"> {inputPrompt.type} </FormHelperText>
)}
</FormControl>
<FormControl
fullWidth
error={Boolean(touched.name && errors.name)}
sx={{ ...theme.typography.otherInput }}
>
<InputLabel htmlFor="channel-name-label">
{inputLabel.name}
</InputLabel>
<FormControl fullWidth error={Boolean(touched.name && errors.name)} sx={{ ...theme.typography.otherInput }}>
<InputLabel htmlFor="channel-name-label">{inputLabel.name}</InputLabel>
<OutlinedInput
id="channel-name-label"
label={inputLabel.name}
@ -383,7 +333,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
name="name"
onBlur={handleBlur}
onChange={handleChange}
inputProps={{ autoComplete: "name" }}
inputProps={{ autoComplete: 'name' }}
aria-describedby="helper-text-channel-name-label"
/>
{touched.name && errors.name ? (
@ -391,21 +341,12 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.name}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-name-label">
{" "}
{inputPrompt.name}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-name-label"> {inputPrompt.name} </FormHelperText>
)}
</FormControl>
<FormControl
fullWidth
error={Boolean(touched.base_url && errors.base_url)}
sx={{ ...theme.typography.otherInput }}
>
<InputLabel htmlFor="channel-base_url-label">
{inputLabel.base_url}
</InputLabel>
<FormControl fullWidth error={Boolean(touched.base_url && errors.base_url)} sx={{ ...theme.typography.otherInput }}>
<InputLabel htmlFor="channel-base_url-label">{inputLabel.base_url}</InputLabel>
<OutlinedInput
id="channel-base_url-label"
label={inputLabel.base_url}
@ -422,22 +363,13 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.base_url}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-base_url-label">
{" "}
{inputPrompt.base_url}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-base_url-label"> {inputPrompt.base_url} </FormHelperText>
)}
</FormControl>
{inputPrompt.other && (
<FormControl
fullWidth
error={Boolean(touched.other && errors.other)}
sx={{ ...theme.typography.otherInput }}
>
<InputLabel htmlFor="channel-other-label">
{inputLabel.other}
</InputLabel>
<FormControl fullWidth error={Boolean(touched.other && errors.other)} sx={{ ...theme.typography.otherInput }}>
<InputLabel htmlFor="channel-other-label">{inputLabel.other}</InputLabel>
<OutlinedInput
id="channel-other-label"
label={inputLabel.other}
@ -454,10 +386,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.other}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-other-label">
{" "}
{inputPrompt.other}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-other-label"> {inputPrompt.other} </FormHelperText>
)}
</FormControl>
)}
@ -471,22 +400,15 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
onChange={(e, value) => {
const event = {
target: {
name: "groups",
value: value,
},
name: 'groups',
value: value
}
};
handleChange(event);
}}
onBlur={handleBlur}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
name="groups"
error={Boolean(errors.groups)}
label={inputLabel.groups}
/>
)}
renderInput={(params) => <TextField {...params} name="groups" error={Boolean(errors.groups)} label={inputLabel.groups} />}
aria-describedby="helper-text-channel-groups-label"
/>
{errors.groups ? (
@ -494,10 +416,7 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.groups}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-groups-label">
{" "}
{inputPrompt.groups}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-groups-label"> {inputPrompt.groups} </FormHelperText>
)}
</FormControl>
@ -511,30 +430,19 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
onChange={(e, value) => {
const event = {
target: {
name: "models",
value: value.map((item) =>
typeof item === "string"
? { id: item, group: "自定义：点击或回车输入" }
: item
),
},
name: 'models',
value: value.map((item) => (typeof item === 'string' ? { id: item, group: '自定义：点击或回车输入' } : item))
}
};
handleChange(event);
}}
onBlur={handleBlur}
// filterSelectedOptions
disableCloseOnSelect
renderInput={(params) => (
<TextField
{...params}
name="models"
error={Boolean(errors.models)}
label={inputLabel.models}
/>
)}
renderInput={(params) => <TextField {...params} name="models" error={Boolean(errors.models)} label={inputLabel.models} />}
groupBy={(option) => option.group}
getOptionLabel={(option) => {
if (typeof option === "string") {
if (typeof option === 'string') {
return option;
}
if (option.inputValue) {
@ -545,25 +453,18 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
filterOptions={(options, params) => {
const filtered = filter(options, params);
const { inputValue } = params;
const isExisting = options.some(
(option) => inputValue === option.id
);
if (inputValue !== "" && !isExisting) {
const isExisting = options.some((option) => inputValue === option.id);
if (inputValue !== '' && !isExisting) {
filtered.push({
id: inputValue,
group: "自定义：点击或回车输入",
group: '自定义：点击或回车输入'
});
}
return filtered;
}}
renderOption={(props, option, { selected }) => (
<li {...props}>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
<Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
{option.id}
</li>
)}
@ -573,103 +474,104 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
{errors.models}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-models-label">
{" "}
{inputPrompt.models}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-models-label"> {inputPrompt.models} </FormHelperText>
)}
</FormControl>
<Container
sx={{
textAlign: "right",
textAlign: 'right'
}}
>
<ButtonGroup
variant="outlined"
aria-label="small outlined primary button group"
>
<ButtonGroup variant="outlined" aria-label="small outlined primary button group">
<Button
onClick={() => {
setFieldValue("models", basicModels(values.type));
setFieldValue('models', initialModel(basicModels));
}}
>
填入渠道支持模型
填入相关模型
</Button>
<Button
onClick={() => {
setFieldValue("models", modelOptions);
setFieldValue('models', modelOptions);
}}
>
填入所有模型
</Button>
</ButtonGroup>
</Container>
<FormControl
fullWidth
error={Boolean(touched.key && errors.key)}
sx={{ ...theme.typography.otherInput }}
>
{!batchAdd ? (
<>
<InputLabel htmlFor="channel-key-label">
{inputLabel.key}
</InputLabel>
<OutlinedInput
id="channel-key-label"
label={inputLabel.key}
type="text"
value={values.key}
name="key"
onBlur={handleBlur}
onChange={handleChange}
inputProps={{}}
aria-describedby="helper-text-channel-key-label"
/>
</>
) : (
<TextField
multiline
id="channel-key-label"
label={inputLabel.key}
value={values.key}
name="key"
onBlur={handleBlur}
onChange={handleChange}
aria-describedby="helper-text-channel-key-label"
minRows={5}
placeholder={inputPrompt.key + "，一行一个密钥"}
/>
)}
{inputLabel.key && (
<>
<FormControl fullWidth error={Boolean(touched.key && errors.key)} sx={{ ...theme.typography.otherInput }}>
{!batchAdd ? (
<>
<InputLabel htmlFor="channel-key-label">{inputLabel.key}</InputLabel>
<OutlinedInput
id="channel-key-label"
label={inputLabel.key}
type="text"
value={values.key}
name="key"
onBlur={handleBlur}
onChange={handleChange}
inputProps={{}}
aria-describedby="helper-text-channel-key-label"
/>
</>
) : (
<TextField
multiline
id="channel-key-label"
label={inputLabel.key}
value={values.key}
name="key"
onBlur={handleBlur}
onChange={handleChange}
aria-describedby="helper-text-channel-key-label"
minRows={5}
placeholder={inputPrompt.key + '，一行一个密钥'}
/>
)}
{touched.key && errors.key ? (
<FormHelperText error id="helper-tex-channel-key-label">
{errors.key}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-key-label">
{" "}
{inputPrompt.key}{" "}
</FormHelperText>
)}
</FormControl>
{channelId === 0 && (
<Container
sx={{
textAlign: "right",
}}
>
<Switch
checked={batchAdd}
onChange={(e) => setBatchAdd(e.target.checked)}
/>
批量添加
</Container>
{touched.key && errors.key ? (
<FormHelperText error id="helper-tex-channel-key-label">
{errors.key}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-key-label"> {inputPrompt.key} </FormHelperText>
)}
</FormControl>
{channelId === 0 && (
<Container
sx={{
textAlign: 'right'
}}
>
<Switch checked={batchAdd} onChange={(e) => setBatchAdd(e.target.checked)} />
批量添加
</Container>
)}
</>
)}
<FormControl
fullWidth
error={Boolean(touched.model_mapping && errors.model_mapping)}
sx={{ ...theme.typography.otherInput }}
>
{inputLabel.config &&
Object.keys(inputLabel.config).map((configName) => {
return (
<FormControl key={'config.' + configName} fullWidth sx={{ ...theme.typography.otherInput }}>
<TextField
multiline
key={'config.' + configName}
name={'config.' + configName}
value={values.config?.[configName] || ''}
label={configName}
placeholder={inputPrompt.config[configName]}
onChange={handleChange}
/>
<FormHelperText id={`helper-tex-config.${configName}-label`}> {inputPrompt.config[configName]} </FormHelperText>
</FormControl>
);
})}
<FormControl fullWidth error={Boolean(touched.model_mapping && errors.model_mapping)} sx={{ ...theme.typography.otherInput }}>
{/* <InputLabel htmlFor="channel-model_mapping-label">{inputLabel.model_mapping}</InputLabel> */}
<TextField
multiline
@ -684,28 +586,16 @@ const EditModal = ({ open, channelId, onCancel, onOk }) => {
placeholder={inputPrompt.model_mapping}
/>
{touched.model_mapping && errors.model_mapping ? (
<FormHelperText
error
id="helper-tex-channel-model_mapping-label"
>
<FormHelperText error id="helper-tex-channel-model_mapping-label">
{errors.model_mapping}
</FormHelperText>
) : (
<FormHelperText id="helper-tex-channel-model_mapping-label">
{" "}
{inputPrompt.model_mapping}{" "}
</FormHelperText>
<FormHelperText id="helper-tex-channel-model_mapping-label"> {inputPrompt.model_mapping} </FormHelperText>
)}
</FormControl>
<DialogActions>
<Button onClick={onCancel}>取消</Button>
<Button
disableElevation
disabled={isSubmitting}
type="submit"
variant="contained"
color="primary"
>
<Button disableElevation disabled={isSubmitting} type="submit" variant="contained" color="primary">
提交
</Button>
</DialogActions>
@ -723,5 +613,5 @@ EditModal.propTypes = {
open: PropTypes.bool,
channelId: PropTypes.number,
onCancel: PropTypes.func,
onOk: PropTypes.func,
onOk: PropTypes.func
};

27
web/berry/src/views/Channel/component/NameLabel.js
View File

@ -1,20 +1,20 @@
import PropTypes from "prop-types";
import { Tooltip, Stack, Container } from "@mui/material";
import Label from "ui-component/Label";
import { styled } from "@mui/material/styles";
import { showSuccess } from "utils/common";
import PropTypes from 'prop-types';
import { Tooltip, Stack, Container } from '@mui/material';
import Label from 'ui-component/Label';
import { styled } from '@mui/material/styles';
import { showSuccess, copy } from 'utils/common';
const TooltipContainer = styled(Container)({
maxHeight: "250px",
overflow: "auto",
"&::-webkit-scrollbar": {
width: "0px", // Set the width to 0 to hide the scrollbar
},
maxHeight: '250px',
overflow: 'auto',
'&::-webkit-scrollbar': {
width: '0px' // Set the width to 0 to hide the scrollbar
}
});
const NameLabel = ({ name, models }) => {
let modelMap = [];
modelMap = models.split(",");
modelMap = models.split(',');
modelMap.sort();
return (
@ -28,8 +28,7 @@ const NameLabel = ({ name, models }) => {
variant="ghost"
key={index}
onClick={() => {
navigator.clipboard.writeText(item);
showSuccess("复制模型名称成功！");
copy(item, '模型名称');
}}
>
{item}
@ -48,7 +47,7 @@ const NameLabel = ({ name, models }) => {
NameLabel.propTypes = {
name: PropTypes.string,
models: PropTypes.string,
models: PropTypes.string
};
export default NameLabel;

8
web/berry/src/views/Channel/index.js
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { showError, showSuccess, showInfo } from 'utils/common';
import { showError, showSuccess, showInfo, loadChannelModels } from 'utils/common';
import { useTheme } from '@mui/material/styles';
import Table from '@mui/material/Table';
@ -8,7 +8,6 @@ import TableContainer from '@mui/material/TableContainer';
import PerfectScrollbar from 'react-perfect-scrollbar';
import TablePagination from '@mui/material/TablePagination';
import LinearProgress from '@mui/material/LinearProgress';
import Alert from '@mui/material/Alert';
import ButtonGroup from '@mui/material/ButtonGroup';
import Toolbar from '@mui/material/Toolbar';
import useMediaQuery from '@mui/material/useMediaQuery';
@ -189,6 +188,7 @@ export default function ChannelPage() {
.catch((reason) => {
showError(reason);
});
loadChannelModels().then();
}, []);
return (
@ -200,7 +200,7 @@ export default function ChannelPage() {
</Button>
</Stack>
<Card>
<Box component="form" onSubmit={searchChannels} noValidate sx={{marginTop: 2}}>
<Box component="form" onSubmit={searchChannels} noValidate sx={{ marginTop: 2 }}>
<TableToolBar filterName={searchKeyword} handleFilterName={handleSearchKeyword} placeholder={'搜索渠道的 ID，名称和密钥 ...'} />
</Box>
<Toolbar
@ -214,7 +214,7 @@ export default function ChannelPage() {
>
<Container>
{matchUpMd ? (
<ButtonGroup variant="outlined" aria-label="outlined small primary button group" sx={{marginBottom: 2}}>
<ButtonGroup variant="outlined" aria-label="outlined small primary button group" sx={{ marginBottom: 2 }}>
<Button onClick={handleRefresh} startIcon={<IconRefresh width={'18px'} />}>
刷新
</Button>

196
web/berry/src/views/Channel/type/Config.js
View File

@ -1,177 +1,209 @@
const defaultConfig = {
input: {
name: "",
name: '',
type: 1,
key: "",
base_url: "",
other: "",
model_mapping: "",
key: '',
base_url: '',
other: '',
model_mapping: '',
models: [],
groups: ["default"],
groups: ['default'],
config: {}
},
inputLabel: {
name: "渠道名称",
type: "渠道类型",
base_url: "渠道API地址",
key: "密钥",
other: "其他参数",
models: "模型",
model_mapping: "模型映射关系",
groups: "用户组",
name: '渠道名称',
type: '渠道类型',
base_url: '渠道API地址',
key: '密钥',
other: '其他参数',
models: '模型',
model_mapping: '模型映射关系',
groups: '用户组',
config: null
},
prompt: {
type: "请选择渠道类型",
name: "请为渠道命名",
base_url: "可空，请输入中转API地址，例如通过cloudflare中转",
key: "请输入渠道对应的鉴权密钥",
other: "",
models: "请选择该渠道所支持的模型",
type: '请选择渠道类型',
name: '请为渠道命名',
base_url: '可空，请输入中转API地址，例如通过cloudflare中转',
key: '请输入渠道对应的鉴权密钥',
other: '',
models: '请选择该渠道所支持的模型',
model_mapping:
'请输入要修改的模型映射关系，格式为：api请求模型ID:实际转发给渠道的模型ID，使用JSON数组表示，例如：{"gpt-3.5": "gpt-35"}',
groups: "请选择该渠道所支持的用户组",
groups: '请选择该渠道所支持的用户组',
config: null
},
modelGroup: "openai",
modelGroup: 'openai'
};
const typeConfig = {
3: {
inputLabel: {
base_url: "AZURE_OPENAI_ENDPOINT",
other: "默认 API 版本",
base_url: 'AZURE_OPENAI_ENDPOINT',
other: '默认 API 版本'
},
prompt: {
base_url: "请填写AZURE_OPENAI_ENDPOINT",
other: "请输入默认API版本，例如：2024-03-01-preview",
},
base_url: '请填写AZURE_OPENAI_ENDPOINT',
other: '请输入默认API版本，例如：2024-03-01-preview'
}
},
11: {
input: {
models: ["PaLM-2"],
models: ['PaLM-2']
},
modelGroup: "google palm",
modelGroup: 'google palm'
},
14: {
input: {
models: ["claude-instant-1", "claude-2", "claude-2.0", "claude-2.1"],
models: ['claude-instant-1', 'claude-2', 'claude-2.0', 'claude-2.1']
},
modelGroup: "anthropic",
modelGroup: 'anthropic'
},
15: {
input: {
models: ["ERNIE-Bot", "ERNIE-Bot-turbo", "ERNIE-Bot-4", "Embedding-V1"],
models: ['ERNIE-Bot', 'ERNIE-Bot-turbo', 'ERNIE-Bot-4', 'Embedding-V1']
},
prompt: {
key: "按照如下格式输入：APIKey|SecretKey",
key: '按照如下格式输入：APIKey|SecretKey'
},
modelGroup: "baidu",
modelGroup: 'baidu'
},
16: {
input: {
models: ["glm-4", "glm-4v", "glm-3-turbo", "chatglm_turbo", "chatglm_pro", "chatglm_std", "chatglm_lite"],
models: ['glm-4', 'glm-4v', 'glm-3-turbo', 'chatglm_turbo', 'chatglm_pro', 'chatglm_std', 'chatglm_lite']
},
modelGroup: "zhipu",
modelGroup: 'zhipu'
},
17: {
inputLabel: {
other: "插件参数",
other: '插件参数'
},
input: {
models: [
"qwen-turbo",
"qwen-plus",
"qwen-max",
"qwen-max-longcontext",
"text-embedding-v1",
],
models: ['qwen-turbo', 'qwen-plus', 'qwen-max', 'qwen-max-longcontext', 'text-embedding-v1']
},
prompt: {
other: "请输入插件参数，即 X-DashScope-Plugin 请求头的取值",
other: '请输入插件参数，即 X-DashScope-Plugin 请求头的取值'
},
modelGroup: "ali",
modelGroup: 'ali'
},
18: {
inputLabel: {
other: "版本号",
other: '版本号'
},
input: {
models: [
"SparkDesk",
'SparkDesk-v1.1',
'SparkDesk-v2.1',
'SparkDesk-v3.1',
'SparkDesk-v3.5'
],
models: ['SparkDesk', 'SparkDesk-v1.1', 'SparkDesk-v2.1', 'SparkDesk-v3.1', 'SparkDesk-v3.5']
},
prompt: {
key: "按照如下格式输入：APPID|APISecret|APIKey",
other: "请输入版本号，例如：v3.1",
key: '按照如下格式输入：APPID|APISecret|APIKey',
other: '请输入版本号，例如：v3.1'
},
modelGroup: "xunfei",
modelGroup: 'xunfei'
},
19: {
input: {
models: [
"360GPT_S2_V9",
"embedding-bert-512-v1",
"embedding_s1_v1",
"semantic_similarity_s1_v1",
],
models: ['360GPT_S2_V9', 'embedding-bert-512-v1', 'embedding_s1_v1', 'semantic_similarity_s1_v1']
},
modelGroup: "360",
modelGroup: '360'
},
22: {
prompt: {
key: "按照如下格式输入：APIKey-AppId，例如：fastgpt-0sp2gtvfdgyi4k30jwlgwf1i-64f335d84283f05518e9e041",
},
key: '按照如下格式输入：APIKey-AppId，例如：fastgpt-0sp2gtvfdgyi4k30jwlgwf1i-64f335d84283f05518e9e041'
}
},
23: {
input: {
models: ["hunyuan"],
models: ['hunyuan']
},
prompt: {
key: "按照如下格式输入：AppId|SecretId|SecretKey",
key: '按照如下格式输入：AppId|SecretId|SecretKey'
},
modelGroup: "tencent",
modelGroup: 'tencent'
},
24: {
inputLabel: {
other: "版本号",
other: '版本号'
},
input: {
models: ["gemini-pro"],
models: ['gemini-pro']
},
prompt: {
other: "请输入版本号，例如：v1",
other: '请输入版本号，例如：v1'
},
modelGroup: "google gemini",
modelGroup: 'google gemini'
},
25: {
input: {
models: ['moonshot-v1-8k', 'moonshot-v1-32k', 'moonshot-v1-128k'],
models: ['moonshot-v1-8k', 'moonshot-v1-32k', 'moonshot-v1-128k']
},
modelGroup: "moonshot",
modelGroup: 'moonshot'
},
26: {
input: {
models: ['Baichuan2-Turbo', 'Baichuan2-Turbo-192k', 'Baichuan-Text-Embedding'],
models: ['Baichuan2-Turbo', 'Baichuan2-Turbo-192k', 'Baichuan-Text-Embedding']
},
modelGroup: "baichuan",
modelGroup: 'baichuan'
},
27: {
input: {
models: ['abab5.5s-chat', 'abab5.5-chat', 'abab6-chat'],
models: ['abab5.5s-chat', 'abab5.5-chat', 'abab6-chat']
},
modelGroup: "minimax",
modelGroup: 'minimax'
},
29: {
modelGroup: "groq",
modelGroup: 'groq'
},
30: {
modelGroup: "ollama",
modelGroup: 'ollama'
},
31: {
modelGroup: "lingyiwanwu",
modelGroup: 'lingyiwanwu'
},
33: {
inputLabel: {
key: '',
config: {
region: 'Region',
ak: 'Access Key',
sk: 'Secret Key'
}
},
prompt: {
key: '',
config: {
region: 'region，e.g. us-west-2',
ak: 'AWS IAM Access Key',
sk: 'AWS IAM Secret Key'
}
},
modelGroup: 'anthropic'
},
37: {
inputLabel: {
config: {
user_id: 'Account ID'
}
},
prompt: {
config: {
user_id: '请输入 Account ID，例如：d8d7c61dbc334c32d3ced580e4bf42b4'
}
},
modelGroup: 'Cloudflare'
},
34: {
inputLabel: {
config: {
user_id: 'User ID'
}
},
prompt: {
models: '对于 Coze 而言，模型名称即 Bot ID，你可以添加一个前缀 `bot-`，例如：`bot-123456`',
config: {
user_id: '生成该密钥的用户 ID'
}
},
modelGroup: 'Coze'
}
};
export { defaultConfig, typeConfig };

5
web/berry/src/views/Profile/index.js
View File

@ -21,7 +21,7 @@ import { IconBrandWechat, IconBrandGithub, IconMail } from '@tabler/icons-react'
import Label from 'ui-component/Label';
import { API } from 'utils/api';
import { showError, showSuccess } from 'utils/common';
import { onGitHubOAuthClicked, onLarkOAuthClicked } from 'utils/common';
import { onGitHubOAuthClicked, onLarkOAuthClicked, copy } from 'utils/common';
import * as Yup from 'yup';
import WechatModal from 'views/Authentication/AuthForms/WechatModal';
import { useSelector } from 'react-redux';
@ -90,8 +90,7 @@ export default function Profile() {
const { success, message, data } = res.data;
if (success) {
setInputs((inputs) => ({ ...inputs, access_token: data }));
navigator.clipboard.writeText(data);
showSuccess(`令牌已重置并已复制到剪贴板`);
copy(data, '访问令牌');
} else {
showError(message);
}

5
web/berry/src/views/Redemption/component/TableRow.js
View File

@ -18,7 +18,7 @@ import {
import Label from 'ui-component/Label';
import TableSwitch from 'ui-component/Switch';
import { timestamp2string, renderQuota, showSuccess } from 'utils/common';
import { timestamp2string, renderQuota, copy } from 'utils/common';
import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react';
@ -83,8 +83,7 @@ export default function RedemptionTableRow({ item, manageRedemption, handleOpenM
variant="contained"
color="primary"
onClick={() => {
navigator.clipboard.writeText(item.key);
showSuccess('已复制到剪贴板！');
copy(item.key, '兑换码');
}}
>
复制

14
web/berry/src/views/Token/component/TableRow.js
View File

@ -20,7 +20,7 @@ import {
} from '@mui/material';
import TableSwitch from 'ui-component/Switch';
import { renderQuota, showSuccess, timestamp2string } from 'utils/common';
import { renderQuota, timestamp2string, copy } from 'utils/common';
import { IconDotsVertical, IconEdit, IconTrash, IconCaretDownFilled } from '@tabler/icons-react';
@ -141,8 +141,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
if (type === 'link') {
window.open(text);
} else {
navigator.clipboard.writeText(text);
showSuccess('已复制到剪贴板！');
copy(text);
}
handleCloseMenu();
};
@ -192,7 +191,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
id={`switch-${item.id}`}
checked={statusSwitch === 1}
onChange={handleStatus}
// disabled={statusSwitch !== 1 && statusSwitch !== 2}
// disabled={statusSwitch !== 1 && statusSwitch !== 2}
/>
</Tooltip>
</TableCell>
@ -211,8 +210,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
<Button
color="primary"
onClick={() => {
navigator.clipboard.writeText(`sk-${item.key}`);
showSuccess('已复制到剪贴板！');
copy(`sk-${item.key}`);
}}
>
复制
@ -222,7 +220,9 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
</Button>
</ButtonGroup>
<ButtonGroup size="small" aria-label="split button">
<Button color="primary" onClick={(e) => handleCopy(COPY_OPTIONS[0], 'link')}>聊天</Button>
<Button color="primary" onClick={(e) => handleCopy(COPY_OPTIONS[0], 'link')}>
聊天
</Button>
<Button size="small" onClick={(e) => handleOpenMenu(e, 'link')}>
<IconCaretDownFilled size={'16px'} />
</Button>

8
web/berry/src/views/Topup/component/InviteCard.js
View File

@ -4,7 +4,7 @@ import SubCard from 'ui-component/cards/SubCard';
import inviteImage from 'assets/images/invite/cwok_casual_19.webp';
import { useState } from 'react';
import { API } from 'utils/api';
import { showError, showSuccess } from 'utils/common';
import { showError, copy } from 'utils/common';
const InviteCard = () => {
const theme = useTheme();
@ -12,8 +12,7 @@ const InviteCard = () => {
const handleInviteUrl = async () => {
if (inviteUl) {
navigator.clipboard.writeText(inviteUl);
showSuccess(`邀请链接已复制到剪切板`);
copy(inviteUl, '邀请链接');
return;
}
const res = await API.get('/api/user/aff');
@ -21,8 +20,7 @@ const InviteCard = () => {
if (success) {
let link = `${window.location.origin}/register?aff=${data}`;
setInviteUrl(link);
navigator.clipboard.writeText(link);
showSuccess(`邀请链接已复制到剪切板`);
copy(link, '邀请链接');
} else {
showError(message);
}