mirror of https://github.com/usememos/memos
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import { Button, Input } from "@mui/joy";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "react-hot-toast";
|
|
import * as api from "@/helpers/api";
|
|
import { useGlobalStore } from "@/store/module";
|
|
import { useTranslate } from "@/utils/i18n";
|
|
import LearnMore from "../LearnMore";
|
|
import "@/less/settings/system-section.less";
|
|
|
|
interface OpenAIConfig {
|
|
key: string;
|
|
host: string;
|
|
}
|
|
|
|
const OpenAISection = () => {
|
|
const t = useTranslate();
|
|
const globalStore = useGlobalStore();
|
|
const [openAIConfig, setOpenAIConfig] = useState<OpenAIConfig>({
|
|
key: "",
|
|
host: "",
|
|
});
|
|
|
|
useEffect(() => {
|
|
globalStore.fetchSystemStatus();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
api.getSystemSetting().then(({ data: systemSettings }) => {
|
|
const openAIConfigSetting = systemSettings.find((setting) => setting.name === "openai-config");
|
|
if (openAIConfigSetting) {
|
|
setOpenAIConfig(JSON.parse(openAIConfigSetting.value));
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
const handleOpenAIConfigKeyChanged = (value: string) => {
|
|
setOpenAIConfig({
|
|
...openAIConfig,
|
|
key: value,
|
|
});
|
|
};
|
|
|
|
const handleOpenAIConfigHostChanged = (value: string) => {
|
|
setOpenAIConfig({
|
|
...openAIConfig,
|
|
host: value,
|
|
});
|
|
};
|
|
|
|
const handleSaveOpenAIConfig = async () => {
|
|
try {
|
|
await api.upsertSystemSetting({
|
|
name: "openai-config",
|
|
value: JSON.stringify(openAIConfig),
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
return;
|
|
}
|
|
toast.success("OpenAI Config updated");
|
|
};
|
|
|
|
return (
|
|
<div className="section-container system-section-container">
|
|
<p className="title-text">{t("setting.openai")}</p>
|
|
<div className="form-label">
|
|
<div className="flex flex-row items-center">
|
|
<span className="text-sm mr-1">{t("setting.system-section.openai-api-key")}</span>
|
|
<LearnMore title={t("setting.system-section.openai-api-key-description")} url="https://platform.openai.com/account/api-keys" />
|
|
</div>
|
|
</div>
|
|
<Input
|
|
className="w-full"
|
|
sx={{
|
|
fontFamily: "monospace",
|
|
fontSize: "14px",
|
|
}}
|
|
placeholder={t("setting.system-section.openai-api-key-placeholder")}
|
|
value={openAIConfig.key}
|
|
onChange={(event) => handleOpenAIConfigKeyChanged(event.target.value)}
|
|
/>
|
|
<div className="form-label mt-2">
|
|
<span className="normal-text">{t("setting.system-section.openai-api-host")}</span>
|
|
</div>
|
|
<Input
|
|
className="w-full"
|
|
sx={{
|
|
fontFamily: "monospace",
|
|
fontSize: "14px",
|
|
}}
|
|
placeholder={t("setting.system-section.openai-api-host-placeholder")}
|
|
value={openAIConfig.host}
|
|
onChange={(event) => handleOpenAIConfigHostChanged(event.target.value)}
|
|
/>
|
|
<div className="mt-4">
|
|
<Button onClick={handleSaveOpenAIConfig}>{t("common.save")}</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OpenAISection;
|