Function AiSettings

packages/web/src/routes/settings.tsx:255–490

({ saveButtonLabel }: AiSettingsProps)

};

export function AiSettings({ saveButtonLabel }: AiSettingsProps) {
  const {
    aiProvider,
    aiModel,
    aiBaseUrl,
    openaiKey: configOpenaiKey,
    anthropicKey: configAnthropicKey,
    customApiKey: configCustomApiKey,
    xaiKey: configXaiKey,
    geminiKey: configGeminiKey,
    openrouterKey: configOpenrouterKey,
    updateConfig: updateConfigContext,
  } = useSettings();

  const [openaiKey, setOpenaiKey] = useState<string>(configOpenaiKey ?? '');
  const [anthropicKey, setAnthropicKey] = useState<string>(configAnthropicKey ?? '');
  const [xaiKey, setXaiKey] = useState<string>(configXaiKey ?? '');
  const [geminiKey, setGeminiKey] = useState<string>(configGeminiKey ?? '');
  const [openrouterKey, setOpenrouterKey] = useState<string>(configOpenrouterKey ?? '');
  const [customApiKey, setCustomApiKey] = useState<string>(configCustomApiKey ?? '');
  const [model, setModel] = useState<string>(aiModel);
  const [baseUrl, setBaseUrl] = useState<string>(aiBaseUrl || '');

  const setAiProvider = (provider: AiProviderType) => {
    const model = getDefaultModel(provider);
    setModel(model);
    updateConfigContext({ aiProvider: provider, aiModel: model });
  };

  // Either the key from the server is null/undefined and the user entered input
  // or the key from the server is a string and the user entered input is different.
  const openaiKeySaveEnabled =
    (typeof configOpenaiKey === 'string' && openaiKey !== configOpenaiKey) ||
    ((configOpenaiKey === null || configOpenaiKey === undefined) && openaiKey.length > 0) ||
    model !== aiModel;

  const anthropicKeySaveEnabled =
    (typeof configAnthropicKey === 'string' && anthropicKey !== configAnthropicKey) ||
    ((configAnthropicKey === null || configAnthropicKey === undefined) &&
      anthropicKey.length > 0) ||
    model !== aiModel;

  const xaiKeySaveEnabled =
    (typeof configXaiKey === 'string' && xaiKey !== configXaiKey) ||
    ((configXaiKey === null || configXaiKey === undefined) && xaiKey.length > 0) ||
    model !== aiModel;

  const geminiKeySaveEnabled =
    (typeof configGeminiKey === 'string' && geminiKey !== configGeminiKey) ||
    ((configGeminiKey === null || configGeminiKey === undefined) && geminiKey.length > 0) ||
    model !== aiModel;

  const openrouterKeySaveEnabled =
    (typeof configOpenrouterKey === 'string' && openrouterKey !== configOpenrouterKey) ||
    ((configOpenrouterKey === null || configOpenrouterKey === undefined) &&
      openrouterKey.length > 0) ||
    model !== aiModel;