@nextclaw/ui 0.15.22 → 0.15.23

package/src/features/settings/components/config/provider-form.tsx

@@ -1,124 +1,107 @@
-import { useEffect, useMemo, useState } from 'react';
-import { CircleDotDashed, Trash2 } from 'lucide-react';
-import { toast } from 'sonner';
+import { useMemo, useState } from "react";
 import {
   useConfigSchema,
   useDeleteProvider,
   useProviders,
   useProviderTemplates,
-  useTestProviderConnection,
-  useUpdateProvider
-} from '@/shared/hooks/use-config';
-import { Button } from '@/shared/components/ui/button';
-import { Input } from '@/shared/components/ui/input';
-import { Label } from '@/shared/components/ui/label';
-import { FormActions } from '@/shared/components/ui/actions/form-actions';
-import { getLanguage, t } from '@/shared/lib/i18n';
-import type { ThinkingLevel } from '@/shared/lib/api';
+  useUpdateProvider,
+} from "@/shared/hooks/use-config";
+import { getLanguage, t } from "@/shared/lib/i18n";
+import type { ThinkingLevel } from "@/shared/lib/api";
+import { ConfigSplitEmptyPane } from "@/shared/components/config-split-page";
 import {
-  ConfigSplitDetailPane,
-  ConfigSplitEmptyPane,
-  ConfigSplitPaneBody,
-  ConfigSplitPaneFooter,
-  ConfigSplitPaneHeader
-} from '@/shared/components/config-split-page';
-import { ProviderAdvancedSettingsSection } from '@/features/settings/components/config/provider-advanced-settings-section';
-import { ProviderAuthSection } from '@/features/settings/components/config/provider-auth-section';
-import {
-  buildProviderConnectionTestPayload,
   buildProviderSavePayload,
-  formatThinkingLevelLabel,
   hasProviderFormChanges,
   normalizeModelConfigForModels,
-  THINKING_LEVELS,
   type ModelConfig,
-  type WireApiType
-} from '@/features/settings/utils/provider-form-support.utils';
+  type WireApiType,
+} from "@/features/settings/utils/provider-form-support.utils";
 import {
   addProviderLocalModel,
   removeProviderLocalModel,
   setModelThinkingDefaultInConfig,
   setModelVisionInConfig,
-  toggleModelThinkingLevelInConfig
-} from '@/features/settings/utils/provider-form-model.utils';
-import { resolveProviderFormContext } from '@/features/settings/utils/provider-form-context.utils';
-import { ProviderModelsSection } from './provider-models-section';
-import { ProviderStatusBadge } from '@/features/settings/components/config/provider-status-badge';
-import { useProviderAuthFlow } from '@/features/settings/hooks/use-provider-auth-flow';
+  toggleModelThinkingLevelInConfig,
+} from "@/features/settings/utils/provider-form-model.utils";
+import { resolveProviderFormContext } from "@/features/settings/utils/provider-form-context.utils";
+import { useProviderAuthFlow } from "@/features/settings/hooks/use-provider-auth-flow";
+import { useProviderConnectivity } from "@/features/settings/hooks/use-provider-connectivity";
+import { ProviderFormDetailPane } from "./provider-form-detail-pane";
 type ProviderFormProps = {
   providerName?: string;
   onProviderDeleted?: (providerName: string) => void;
 };
 type ProviderFormContext = ReturnType<typeof resolveProviderFormContext>;
-type ProviderFormDetailPaneProps = {
+type ProviderFormEditorProps = {
+  providerName: string;
+  onProviderDeleted?: (providerName: string) => void;
   context: ProviderFormContext;
   language: ReturnType<typeof getLanguage>;
-  providerTitle: string;
-  providerDisplayName: string;
-  apiKey: string;
-  apiBase: string;
-  extraHeaders: Record<string, string> | null;
-  wireApi: WireApiType;
-  models: string[];
-  modelConfig: ModelConfig;
-  modelDraft: string;
-  showAdvanced: boolean;
-  showModelInput: boolean;
-  resolvedAuthMethodId: string;
-  authSessionId: string | null;
-  authStatusMessage: string;
-  hasChanges: boolean;
-  isDeletePending: boolean;
-  isUpdatePending: boolean;
-  isTestPending: boolean;
-  startPending: boolean;
-  importPending: boolean;
-  onProviderDisplayNameChange: (value: string) => void;
-  onApiKeyChange: (value: string) => void;
-  onApiBaseChange: (value: string) => void;
-  onAuthMethodChange: (value: string) => void;
-  onStartProviderAuth: () => void;
-  onImportProviderAuthFromCli: () => void;
-  onModelDraftChange: (value: string) => void;
-  onShowModelInputChange: (show: boolean) => void;
-  onAddModel: () => void;
-  onRemoveModel: (modelName: string) => void;
-  onToggleModelThinkingLevel: (modelName: string, level: ThinkingLevel) => void;
-  onSetModelThinkingDefault: (modelName: string, level: ThinkingLevel | null) => void;
-  onSetModelVision: (modelName: string, vision: boolean) => void;
-  onShowAdvancedChange: (show: boolean) => void;
-  onWireApiChange: (wireApi: WireApiType) => void;
-  onExtraHeadersChange: (headers: Record<string, string> | null) => void;
-  onDeleteProvider: () => void;
-  onSubmit: React.FormEventHandler<HTMLFormElement>;
-  onTestConnection: () => void;
 };
 
-export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormProps) {
+export function ProviderForm({
+  providerName,
+  onProviderDeleted,
+}: ProviderFormProps) {
   const { data: providersView } = useProviders();
   const { data: templatesView } = useProviderTemplates();
   const { data: schema } = useConfigSchema();
-  const updateProvider = useUpdateProvider();
-  const deleteProvider = useDeleteProvider();
-  const testProviderConnection = useTestProviderConnection();
-
-  const [apiKey, setApiKey] = useState('');
-  const [apiBase, setApiBase] = useState('');
-  const [extraHeaders, setExtraHeaders] = useState<Record<string, string> | null>(null);
-  const [wireApi, setWireApi] = useState<WireApiType>('auto');
-  const [models, setModels] = useState<string[]>([]);
-  const [modelConfig, setModelConfig] = useState<ModelConfig>({});
-  const [modelDraft, setModelDraft] = useState('');
-  const [providerDisplayName, setProviderDisplayName] = useState('');
-  const [showAdvanced, setShowAdvanced] = useState(false);
-  const [showModelInput, setShowModelInput] = useState(false);
-  const [authMethodId, setAuthMethodId] = useState('');
-
   const language = getLanguage();
   const providerFormContext = useMemo(
-    () => resolveProviderFormContext({ providerName, providersView, templatesView, schema, language }),
-    [language, providerName, providersView, schema, templatesView]
+    () =>
+      resolveProviderFormContext({
+        providerName,
+        providersView,
+        templatesView,
+        schema,
+        language,
+      }),
+    [language, providerName, providersView, schema, templatesView],
   );
+
+  if (!providerName || !providerFormContext.providerConfig) {
+    return (
+      <ConfigSplitEmptyPane>
+        <div>
+          <h3 className="text-base font-semibold text-foreground">
+            {t("providersSelectTitle")}
+          </h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {t("providersSelectDescription")}
+          </p>
+        </div>
+      </ConfigSplitEmptyPane>
+    );
+  }
+
+  const editorRevision = JSON.stringify({
+    providerConfig: providerFormContext.providerConfig,
+    currentApiBase: providerFormContext.currentApiBase,
+    currentEditableModels: providerFormContext.currentEditableModels,
+    currentModelConfig: providerFormContext.currentModelConfig,
+    currentWireApi: providerFormContext.currentWireApi,
+    effectiveDisplayName: providerFormContext.effectiveDisplayName,
+    preferredAuthMethodId: providerFormContext.preferredAuthMethodId,
+  });
+  return (
+    <ProviderFormEditor
+      key={editorRevision}
+      providerName={providerName}
+      onProviderDeleted={onProviderDeleted}
+      context={providerFormContext}
+      language={language}
+    />
+  );
+}
+
+function ProviderFormEditor({
+  providerName,
+  onProviderDeleted,
+  context: providerFormContext,
+  language,
+}: ProviderFormEditorProps) {
+  const updateProvider = useUpdateProvider();
+  const deleteProvider = useDeleteProvider();
   const {
     currentApiBase,
     currentEditableModels,
@@ -129,22 +112,56 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     effectiveDisplayName,
     providerAuth,
     providerAuthMethods,
-    providerConfig,
     providerModelAliases,
     resolvedProviderConfig,
     preferredAuthMethodId,
     supportsWireApi,
   } = providerFormContext;
-  const providerTitle = providerDisplayName.trim() || effectiveDisplayName || providerName || t('providersSelectPlaceholder');
+  const [apiKey, setApiKey] = useState("");
+  const [apiBase, setApiBase] = useState(currentApiBase);
+  const [extraHeaders, setExtraHeaders] = useState<Record<
+    string,
+    string
+  > | null>(resolvedProviderConfig.extraHeaders || null);
+  const [wireApi, setWireApi] = useState<WireApiType>(currentWireApi);
+  const [models, setModels] = useState<string[]>(currentEditableModels);
+  const [modelConfig, setModelConfig] =
+    useState<ModelConfig>(currentModelConfig);
+  const [modelDraft, setModelDraft] = useState("");
+  const [providerDisplayName, setProviderDisplayName] =
+    useState(effectiveDisplayName);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [showModelInput, setShowModelInput] = useState(false);
+  const [authMethodId, setAuthMethodId] = useState(preferredAuthMethodId);
+  const connectivity = useProviderConnectivity({
+    providerName,
+    apiKey,
+    apiKeyRequired: resolvedProviderConfig.apiKeyRequired !== false,
+    apiKeySet: resolvedProviderConfig.apiKeySet,
+    apiBase,
+    extraHeaders,
+    supportsWireApi,
+    wireApi,
+    models,
+    providerModelAliases,
+  });
+  const providerTitle =
+    providerDisplayName.trim() ||
+    effectiveDisplayName ||
+    providerName ||
+    t("providersSelectPlaceholder");
   const resolvedAuthMethodId = useMemo(() => {
     if (!providerAuthMethods.length) {
-      return '';
+      return "";
     }
     const normalizedCurrent = authMethodId.trim();
-    if (normalizedCurrent && providerAuthMethods.some((method) => method.id === normalizedCurrent)) {
+    if (
+      normalizedCurrent &&
+      providerAuthMethods.some((method) => method.id === normalizedCurrent)
+    ) {
       return normalizedCurrent;
     }
-    return preferredAuthMethodId || providerAuthMethods[0]?.id || '';
+    return preferredAuthMethodId || providerAuthMethods[0]?.id || "";
   }, [authMethodId, preferredAuthMethodId, providerAuthMethods]);
   const {
     authSessionId,
@@ -152,45 +169,9 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     importAuthFromCli,
     importPending,
     startAuth,
-    startPending
+    startPending,
   } = useProviderAuthFlow({ providerName, providerAuth, resolvedAuthMethodId });
 
-  useEffect(() => {
-    if (!providerName) {
-      setApiKey('');
-      setApiBase('');
-      setExtraHeaders(null);
-      setWireApi('auto');
-      setModels([]);
-      setModelConfig({});
-      setModelDraft('');
-      setProviderDisplayName('');
-      setAuthMethodId('');
-      return;
-    }
-
-    setApiKey('');
-    setApiBase(currentApiBase);
-    setExtraHeaders(resolvedProviderConfig.extraHeaders || null);
-    setWireApi(currentWireApi);
-    setModels(currentEditableModels);
-    setModelConfig(currentModelConfig);
-    setModelDraft('');
-    setProviderDisplayName(effectiveDisplayName);
-    setAuthMethodId(preferredAuthMethodId);
-  }, [
-    providerName,
-    currentApiBase,
-    resolvedProviderConfig.extraHeaders,
-    currentWireApi,
-    currentEditableModels,
-    currentModelConfig,
-    effectiveDisplayName,
-    preferredAuthMethodId
-  ]);
-
-  useEffect(() => setModelConfig((prev) => normalizeModelConfigForModels(prev, models)), [models]);
-
   const hasChanges = useMemo(() => {
     return hasProviderFormChanges({
       providerName,
@@ -207,7 +188,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       modelConfig,
       currentModelConfig,
       providerDisplayName,
-      effectiveDisplayName
+      effectiveDisplayName,
     });
   }, [
     providerName,
@@ -224,21 +205,42 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     modelConfig,
     currentModelConfig,
     providerDisplayName,
-    effectiveDisplayName
+    effectiveDisplayName,
   ]);
 
+  const handleModelsChange = (nextModels: string[]) => {
+    setModels(nextModels);
+    setModelConfig((current) =>
+      normalizeModelConfigForModels(current, nextModels),
+    );
+  };
+
   const handleAddModel = () => {
-    const result = addProviderLocalModel(models, modelDraft, providerModelAliases);
-    setModels(result.models);
+    const result = addProviderLocalModel(
+      models,
+      modelDraft,
+      providerModelAliases,
+    );
+    handleModelsChange(result.models);
     setModelDraft(result.draft);
   };
 
-  const toggleModelThinkingLevel = (modelName: string, level: ThinkingLevel) => {
-    setModelConfig((prev) => toggleModelThinkingLevelInConfig(prev, modelName, level));
+  const toggleModelThinkingLevel = (
+    modelName: string,
+    level: ThinkingLevel,
+  ) => {
+    setModelConfig((prev) =>
+      toggleModelThinkingLevelInConfig(prev, modelName, level),
+    );
   };
 
-  const setModelThinkingDefault = (modelName: string, level: ThinkingLevel | null) => {
-    setModelConfig((prev) => setModelThinkingDefaultInConfig(prev, modelName, level));
+  const setModelThinkingDefault = (
+    modelName: string,
+    level: ThinkingLevel | null,
+  ) => {
+    setModelConfig((prev) =>
+      setModelThinkingDefaultInConfig(prev, modelName, level),
+    );
   };
 
   const setModelVision = (modelName: string, vision: boolean) => {
@@ -269,48 +271,16 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
         modelConfig,
         currentModelConfig,
         providerDisplayName,
-        effectiveDisplayName
-      })
+        effectiveDisplayName,
+      }),
     });
   };
 
-  const handleTestConnection = async () => {
-    if (!providerName) {
-      return;
-    }
-    try {
-      const result = await testProviderConnection.mutateAsync({
-        provider: providerName,
-        data: buildProviderConnectionTestPayload({
-          apiKey,
-          apiBase,
-          extraHeaders,
-          supportsWireApi,
-          wireApi,
-          models,
-          providerModelAliases
-        })
-      });
-      if (result.success) {
-        toast.success(`${t('providerTestConnectionSuccess')} (${result.latencyMs}ms)`);
-        return;
-      }
-      const details = [`provider=${result.provider}`, `latency=${result.latencyMs}ms`];
-      if (result.model) {
-        details.push(`model=${result.model}`);
-      }
-      toast.error(`${t('providerTestConnectionFailed')}: ${result.message} | ${details.join(' | ')}`);
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      toast.error(`${t('providerTestConnectionFailed')}: ${message}`);
-    }
-  };
-
   const handleDeleteProvider = async () => {
     if (!providerName) {
       return;
     }
-    if (!window.confirm(t('providerDeleteConfirm'))) {
+    if (!window.confirm(t("providerDeleteConfirm"))) {
       return;
     }
     try {
@@ -321,17 +291,6 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     }
   };
 
-  if (!providerName || !providerConfig) {
-    return (
-      <ConfigSplitEmptyPane>
-        <div>
-          <h3 className='text-base font-semibold text-foreground'>{t('providersSelectTitle')}</h3>
-          <p className='mt-2 text-sm text-muted-foreground'>{t('providersSelectDescription')}</p>
-        </div>
-      </ConfigSplitEmptyPane>
-    );
-  }
-
   return (
     <ProviderFormDetailPane
       context={providerFormContext}
@@ -353,7 +312,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       hasChanges={hasChanges}
       isDeletePending={deleteProvider.isPending}
       isUpdatePending={updateProvider.isPending}
-      isTestPending={testProviderConnection.isPending}
+      connectivity={connectivity}
       startPending={startPending}
       importPending={importPending}
       onProviderDisplayNameChange={setProviderDisplayName}
@@ -365,6 +324,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       onModelDraftChange={setModelDraft}
       onShowModelInputChange={setShowModelInput}
       onAddModel={handleAddModel}
+      onModelsChange={handleModelsChange}
       onRemoveModel={(modelName) => {
         const next = removeProviderLocalModel(models, modelConfig, modelName);
         setModels(next.models);
@@ -378,178 +338,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       onExtraHeadersChange={setExtraHeaders}
       onDeleteProvider={handleDeleteProvider}
       onSubmit={handleSubmit}
-      onTestConnection={handleTestConnection}
+      onTestConnection={connectivity.testConnection}
     />
   );
 }
-
-function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
-  const {
-    context,
-    language,
-    providerTitle,
-    providerDisplayName,
-    apiKey,
-    apiBase,
-    extraHeaders,
-    wireApi,
-    models,
-    modelConfig,
-    modelDraft,
-    showAdvanced,
-    showModelInput,
-    resolvedAuthMethodId,
-    authSessionId,
-    authStatusMessage,
-    hasChanges,
-    isDeletePending,
-    isUpdatePending,
-    isTestPending,
-    startPending,
-    importPending,
-    onProviderDisplayNameChange,
-    onApiKeyChange,
-    onApiBaseChange,
-    onAuthMethodChange,
-    onStartProviderAuth,
-    onImportProviderAuthFromCli,
-    onModelDraftChange,
-    onShowModelInputChange,
-    onAddModel,
-    onRemoveModel,
-    onToggleModelThinkingLevel,
-    onSetModelThinkingDefault,
-    onSetModelVision,
-    onShowAdvancedChange,
-    onWireApiChange,
-    onExtraHeadersChange,
-    onDeleteProvider,
-    onSubmit,
-    onTestConnection
-  } = props;
-  const selectedAuthMethod = context.providerAuthMethods.find((method) => method.id === resolvedAuthMethodId);
-
-  return (
-    <ConfigSplitDetailPane>
-      <ConfigSplitPaneHeader className='px-5 py-4'>
-        <div className='flex items-center justify-between'>
-          <h3 className='truncate text-lg font-semibold text-foreground'>{providerTitle}</h3>
-          <div className='flex items-center gap-3'>
-            <button
-              type='button'
-              onClick={onDeleteProvider}
-              disabled={isDeletePending}
-              className='text-muted-foreground/70 transition-colors hover:text-red-500'
-              title={t('providerDelete')}
-            >
-              <Trash2 className='h-4 w-4' />
-            </button>
-            <ProviderStatusBadge
-              enabled={context.currentEnabled}
-              apiKeyRequired={context.resolvedProviderConfig.apiKeyRequired}
-              apiKeySet={context.resolvedProviderConfig.apiKeySet}
-            />
-          </div>
-        </div>
-      </ConfigSplitPaneHeader>
-
-      <form onSubmit={onSubmit} className='flex min-h-0 flex-1 flex-col'>
-        <ConfigSplitPaneBody className='space-y-4 px-5 py-4'>
-          <div className='space-y-2'>
-            <Label htmlFor='providerDisplayName' className='text-sm font-medium text-foreground'>
-              {t('providerDisplayName')}
-            </Label>
-            <Input
-              id='providerDisplayName'
-              type='text'
-              value={providerDisplayName}
-              onChange={(e) => onProviderDisplayNameChange(e.target.value)}
-              placeholder={context.defaultDisplayName || t('providerDisplayNamePlaceholder')}
-              className='rounded-xl'
-            />
-            <p className='text-xs text-muted-foreground'>{t('providerDisplayNameHelpShort')}</p>
-          </div>
-
-          <ProviderAuthSection
-            apiKey={apiKey}
-            apiKeyRequired={context.resolvedProviderConfig.apiKeyRequired !== false}
-            apiKeySet={context.resolvedProviderConfig.apiKeySet}
-            apiKeyPlaceholder={context.apiKeyHint?.placeholder ?? t('enterApiKey')}
-            providerAuth={context.providerAuth}
-            providerAuthNote={context.providerAuth?.note?.[language] || context.providerAuth?.note?.en || context.providerAuth?.displayName || ''}
-            providerAuthMethodOptions={context.providerAuthMethodOptions}
-            providerAuthMethodsCount={context.providerAuthMethods.length}
-            selectedAuthMethodHint={selectedAuthMethod?.hint?.[language] || selectedAuthMethod?.hint?.en || ''}
-            shouldUseAuthMethodPills={context.shouldUseAuthMethodPills}
-            resolvedAuthMethodId={resolvedAuthMethodId}
-            onAuthMethodChange={onAuthMethodChange}
-            onStartProviderAuth={onStartProviderAuth}
-            onImportProviderAuthFromCli={onImportProviderAuthFromCli}
-            startPending={startPending}
-            importPending={importPending}
-            authSessionId={authSessionId}
-            authStatusMessage={authStatusMessage}
-            onApiKeyChange={onApiKeyChange}
-          />
-
-          <div className='space-y-2'>
-            <Label htmlFor='apiBase' className='text-sm font-medium text-foreground'>
-              {t('apiBase')}
-            </Label>
-            <Input
-              id='apiBase'
-              type='text'
-              value={apiBase}
-              onChange={(e) => onApiBaseChange(e.target.value)}
-              placeholder={context.defaultApiBase || context.apiBaseHint?.placeholder || 'https://api.example.com'}
-              className='rounded-xl'
-            />
-            <p className='text-xs text-muted-foreground'>{context.apiBaseHelpText}</p>
-          </div>
-
-          <ProviderModelsSection
-            models={models}
-            modelConfig={modelConfig}
-            modelDraft={modelDraft}
-            showModelInput={showModelInput}
-            onModelDraftChange={onModelDraftChange}
-            onShowModelInputChange={onShowModelInputChange}
-            onAddModel={onAddModel}
-            onRemoveModel={onRemoveModel}
-            onToggleModelThinkingLevel={onToggleModelThinkingLevel}
-            onSetModelThinkingDefault={onSetModelThinkingDefault}
-            onSetModelVision={onSetModelVision}
-            thinkingLevels={THINKING_LEVELS}
-            formatThinkingLevelLabel={formatThinkingLevelLabel}
-          />
-
-          <ProviderAdvancedSettingsSection
-            showAdvanced={showAdvanced}
-            onShowAdvancedChange={onShowAdvancedChange}
-            supportsWireApi={context.supportsWireApi}
-            wireApiLabel={t('wireApi')}
-            wireApi={wireApi}
-            onWireApiChange={onWireApiChange}
-            shouldUseWireApiPills={context.shouldUseWireApiPills}
-            wireApiSelectOptions={context.wireApiSelectOptions}
-            extraHeadersLabel={t('extraHeaders')}
-            extraHeaders={extraHeaders}
-            onExtraHeadersChange={onExtraHeadersChange}
-          />
-        </ConfigSplitPaneBody>
-
-        <ConfigSplitPaneFooter>
-          <FormActions align="between">
-            <Button type='button' variant='outline' size='sm' onClick={onTestConnection} disabled={isTestPending}>
-              <CircleDotDashed className='mr-1.5 h-3.5 w-3.5' />
-              {isTestPending ? t('providerTestingConnection') : t('providerTestConnection')}
-            </Button>
-            <Button type='submit' size='sm' disabled={isUpdatePending || !hasChanges}>
-              {isUpdatePending ? t('saving') : hasChanges ? t('save') : t('unchanged')}
-            </Button>
-          </FormActions>
-        </ConfigSplitPaneFooter>
-      </form>
-    </ConfigSplitDetailPane>
-  );
-}