Function OpenAIApiConfigView

src/components/OpenAIApiConfigView.tsx:11–153

()

import Tooltip from "./kit/Tooltip";

const OpenAIApiConfigView = () => {
  const { t } = useTranslation();
  const settingStore = useSettingStore();
  const [openAIApiConfig, setOpenAIApiConfig] = useState(settingStore.setting.openAIApiConfig);
  const [maskKey, setMaskKey] = useState(true);

  const models = [
    {
      id: "gpt-3.5-turbo",
      title: `GPT-3.5 Turbo`,
      cost: 1,
      disabled: false,
      tooltip: "",
    },
    {
      id: "gpt-4-turbo",
      title: `GPT-4 Turbo`,
      cost: 20,
      disabled: false,
      tooltip: "",
    },
    {
      id: "gpt-4",
      title: `GPT-4`,
      cost: 60,
      disabled: false,
      tooltip: "",
    },
    {
      id: "gpt-4o",
      title: `GPT-4o`,
      cost: 10,
      disabled: false,
      tooltip: "",
    },
    {
      id: "deepseek-chat",
      title: `Deepseek Chat`,
      cost: 1,
      disabled: false,
      tooltip: "",
    },
  ];

  const maskedKey = (str: string) => {
    if (str.length < 7) {
      return str;
    }
    const firstThree = str.slice(0, 3);
    const lastFour = str.slice(-4);
    const middle = ".".repeat(str.length - 7);
    return `${firstThree}${middle}${lastFour}`;
  };

  useDebounce(
    () => {
      settingStore.setOpenAIApiConfig(openAIApiConfig);
    },