@jupyternaut/persona 0.0.0 → 0.20.0

package/src/widgets/provider-config-dialog.tsx

@@ -0,0 +1,997 @@
+import { getProviderModelInfo } from '@jupyternaut/agent';
+import type {
+  IProviderConfig,
+  IProviderParameters,
+  IProviderRegistry,
+  IProviderToolCapabilities
+} from '@jupyternaut/agent';
+import type { TranslationBundle } from '@jupyterlab/translation';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Delete from '@mui/icons-material/Delete';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Autocomplete,
+  Box,
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  FormControlLabel,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  List,
+  ListItem,
+  ListItemText,
+  MenuItem,
+  Select,
+  Slider,
+  Switch,
+  TextField,
+  Typography
+} from '@mui/material';
+import React from 'react';
+
+/**
+ * Default parameter values for provider configuration
+ */
+const DEFAULT_TEMPERATURE = 0.7;
+const DEFAULT_MAX_TURNS = 25;
+type DomainSection = 'webSearch' | 'webFetch';
+type DomainKey = 'allowedDomains' | 'blockedDomains';
+type DomainFieldId = `${DomainSection}.${DomainKey}`;
+
+const DOMAIN_FIELD_MAP: Record<
+  DomainFieldId,
+  { section: DomainSection; key: DomainKey }
+> = {
+  'webSearch.allowedDomains': {
+    section: 'webSearch',
+    key: 'allowedDomains'
+  },
+  'webSearch.blockedDomains': {
+    section: 'webSearch',
+    key: 'blockedDomains'
+  },
+  'webFetch.allowedDomains': {
+    section: 'webFetch',
+    key: 'allowedDomains'
+  },
+  'webFetch.blockedDomains': {
+    section: 'webFetch',
+    key: 'blockedDomains'
+  }
+};
+
+function createEmptyDomainInputs(): Record<DomainFieldId, string> {
+  return {
+    'webSearch.allowedDomains': '',
+    'webSearch.blockedDomains': '',
+    'webFetch.allowedDomains': '',
+    'webFetch.blockedDomains': ''
+  };
+}
+
+function toRecord(value: unknown): Record<string, any> {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return value as Record<string, any>;
+  }
+  return {};
+}
+
+function toStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((item): item is string => typeof item === 'string');
+}
+
+function sanitizeCustomSettingsForProvider(
+  customSettings: Record<string, any>,
+  capabilities?: IProviderToolCapabilities
+): Record<string, any> {
+  const result: Record<string, any> = { ...customSettings };
+  const webSearch = toRecord(customSettings.webSearch);
+  const webFetch = toRecord(customSettings.webFetch);
+  const supportsWebSearch = !!capabilities?.webSearch;
+  const supportsWebFetch = !!capabilities?.webFetch;
+
+  if (supportsWebSearch && webSearch.enabled === true) {
+    result.webSearch = webSearch;
+  } else {
+    delete result.webSearch;
+  }
+
+  if (supportsWebFetch && webFetch.enabled === true) {
+    result.webFetch = webFetch;
+  } else {
+    delete result.webFetch;
+  }
+
+  return result;
+}
+
+interface IProviderConfigDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (config: Omit<IProviderConfig, 'id'>) => void;
+  initialConfig?: IProviderConfig;
+  mode: 'add' | 'edit';
+  providerRegistry: IProviderRegistry;
+  handleSecretField: (
+    input: HTMLInputElement,
+    provider: string,
+    fieldName: string
+  ) => Promise<void>;
+  trans: TranslationBundle;
+}
+
+export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
+  open,
+  onClose,
+  onSave,
+  initialConfig,
+  mode,
+  providerRegistry,
+  handleSecretField,
+  trans
+}) => {
+  const [name, setName] = React.useState(initialConfig?.name || '');
+  const [provider, setProvider] = React.useState(
+    initialConfig?.provider || 'anthropic'
+  );
+  const [model, setModel] = React.useState(initialConfig?.model || '');
+  const [apiKey, setApiKey] = React.useState(initialConfig?.apiKey || '');
+  const [baseURL, setBaseURL] = React.useState(initialConfig?.baseURL || '');
+  const [showApiKey, setShowApiKey] = React.useState(false);
+  const [customSettings, setCustomSettings] = React.useState<
+    Record<string, any>
+  >(initialConfig?.customSettings || {});
+  const [domainInputs, setDomainInputs] = React.useState<
+    Record<DomainFieldId, string>
+  >(createEmptyDomainInputs());
+
+  const [parameters, setParameters] = React.useState<IProviderParameters>(
+    initialConfig?.parameters || {}
+  );
+
+  const [expandedAdvanced, setExpandedAdvanced] = React.useState(false);
+  const selectedProviderInfo = React.useMemo(
+    () => providerRegistry.getProviderInfo(provider),
+    [providerRegistry, provider]
+  );
+  const providerToolCapabilities =
+    selectedProviderInfo?.providerToolCapabilities;
+  const selectedModelInfo = React.useMemo(
+    () => getProviderModelInfo(selectedProviderInfo, model),
+    [selectedProviderInfo, model]
+  );
+  const webSearchImplementation =
+    providerToolCapabilities?.webSearch?.implementation;
+  const supportsWebSearch = !!providerToolCapabilities?.webSearch;
+  const supportsWebFetch = !!providerToolCapabilities?.webFetch;
+  const webSearchSettings = React.useMemo(
+    () => toRecord(customSettings.webSearch),
+    [customSettings]
+  );
+  const webFetchSettings = React.useMemo(
+    () => toRecord(customSettings.webFetch),
+    [customSettings]
+  );
+
+  // Get provider options from registry
+  const providerOptions = React.useMemo(() => {
+    const providers = providerRegistry.providers;
+    return Object.keys(providers).map(id => {
+      const info = providers[id];
+      return {
+        value: id,
+        label: info.name,
+        models: info.defaultModels,
+        apiKeyRequirement: info.apiKeyRequirement,
+        supportsBaseURL: info.supportsBaseURL,
+        description: info.description,
+        baseUrls: info.baseUrls
+      };
+    });
+  }, [providerRegistry]);
+
+  const selectedProvider = providerOptions.find(p => p.value === provider);
+
+  React.useEffect(() => {
+    if (open) {
+      // Reset form when dialog opens
+      const initialProvider = initialConfig?.provider || 'anthropic';
+      const initialProviderInfo =
+        providerRegistry.getProviderInfo(initialProvider);
+      setName(initialConfig?.name || '');
+      setProvider(initialProvider);
+      setModel(
+        initialConfig?.model || initialProviderInfo?.defaultModels[0] || ''
+      );
+      setApiKey(initialConfig?.apiKey || '');
+      setBaseURL(initialConfig?.baseURL || '');
+      setParameters(initialConfig?.parameters || {});
+      setCustomSettings(initialConfig?.customSettings || {});
+      setDomainInputs(createEmptyDomainInputs());
+      setShowApiKey(false);
+      setExpandedAdvanced(false);
+    } else {
+      // Reset expanded state when dialog closes
+      setDomainInputs(createEmptyDomainInputs());
+      setExpandedAdvanced(false);
+    }
+  }, [open, initialConfig, providerRegistry]);
+
+  const handleRef = React.useCallback(
+    (node: HTMLInputElement | null) => {
+      if (open && node) {
+        handleSecretField(node, provider, 'apiKey');
+      }
+    },
+    [provider, handleSecretField, open]
+  );
+
+  const handleProviderChange = React.useCallback(
+    (newProvider: IProviderConfig['provider']) => {
+      const newProviderInfo = providerRegistry.getProviderInfo(newProvider);
+      setProvider(newProvider);
+      setModel(newProviderInfo?.defaultModels[0] || '');
+    },
+    [providerRegistry]
+  );
+
+  const updateCustomSetting = React.useCallback(
+    (section: 'webSearch' | 'webFetch', key: string, value: unknown) => {
+      setCustomSettings(prev => {
+        const next = { ...prev };
+        const sectionSettings = { ...toRecord(next[section]) };
+        const shouldDelete =
+          value === undefined ||
+          value === null ||
+          value === '' ||
+          (Array.isArray(value) && value.length === 0);
+
+        if (shouldDelete) {
+          delete sectionSettings[key];
+        } else {
+          sectionSettings[key] = value;
+        }
+
+        if (Object.keys(sectionSettings).length === 0) {
+          delete next[section];
+        } else {
+          next[section] = sectionSettings;
+        }
+
+        return next;
+      });
+    },
+    []
+  );
+
+  const addDomainValue = React.useCallback(
+    (fieldId: DomainFieldId) => {
+      const valueToAdd = domainInputs[fieldId].trim();
+      if (!valueToAdd) {
+        return;
+      }
+
+      const { section, key } = DOMAIN_FIELD_MAP[fieldId];
+      const currentValues = toStringArray(
+        toRecord(customSettings[section])[key]
+      );
+      if (currentValues.includes(valueToAdd)) {
+        setDomainInputs(prev => ({
+          ...prev,
+          [fieldId]: ''
+        }));
+        return;
+      }
+      const nextValues = [...currentValues, valueToAdd];
+
+      updateCustomSetting(section, key, nextValues);
+      setDomainInputs(prev => ({
+        ...prev,
+        [fieldId]: ''
+      }));
+    },
+    [customSettings, domainInputs, updateCustomSetting]
+  );
+
+  const removeDomainValue = React.useCallback(
+    (fieldId: DomainFieldId, valueToRemove: string) => {
+      const { section, key } = DOMAIN_FIELD_MAP[fieldId];
+      const currentValues = toStringArray(
+        toRecord(customSettings[section])[key]
+      );
+      const nextValues = currentValues.filter(value => value !== valueToRemove);
+      updateCustomSetting(
+        section,
+        key,
+        nextValues.length > 0 ? nextValues : undefined
+      );
+    },
+    [customSettings, updateCustomSetting]
+  );
+
+  const renderDomainList = React.useCallback(
+    (
+      fieldId: DomainFieldId,
+      label: string,
+      placeholder: string,
+      values: unknown
+    ) => {
+      const domainValues = toStringArray(values);
+
+      return (
+        <Box>
+          <Typography variant="body2" gutterBottom>
+            {label}
+          </Typography>
+          <List
+            dense
+            sx={{
+              mb: 1,
+              maxHeight: 160,
+              overflow: 'auto',
+              border: 1,
+              borderColor: 'divider',
+              borderRadius: 1
+            }}
+          >
+            {domainValues.length === 0 ? (
+              <ListItem>
+                <ListItemText
+                  secondary={trans.__('No domains added.')}
+                  slotProps={{
+                    secondary: {
+                      color: 'text.secondary'
+                    }
+                  }}
+                />
+              </ListItem>
+            ) : (
+              domainValues.map(value => (
+                <ListItem
+                  key={value}
+                  secondaryAction={
+                    <IconButton
+                      onClick={() => removeDomainValue(fieldId, value)}
+                      size="small"
+                    >
+                      <Delete fontSize="small" />
+                    </IconButton>
+                  }
+                >
+                  <ListItemText primary={value} />
+                </ListItem>
+              ))
+            )}
+          </List>
+          <TextField
+            fullWidth
+            size="small"
+            label={trans.__('Add Domain')}
+            value={domainInputs[fieldId]}
+            onChange={e =>
+              setDomainInputs(prev => ({
+                ...prev,
+                [fieldId]: e.target.value
+              }))
+            }
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                addDomainValue(fieldId);
+              }
+            }}
+            placeholder={placeholder}
+            helperText={trans.__('Press Enter to add one domain.')}
+          />
+        </Box>
+      );
+    },
+    [addDomainValue, domainInputs, removeDomainValue, trans]
+  );
+
+  const handleSave = () => {
+    if (!name.trim() || !provider || !model) {
+      return;
+    }
+
+    // Only include parameters if at least one is set
+    const hasParameters = Object.keys(parameters).some(
+      key => parameters[key as keyof IProviderParameters] !== undefined
+    );
+    const sanitizedCustomSettings = sanitizeCustomSettingsForProvider(
+      customSettings,
+      providerToolCapabilities
+    );
+
+    const config: Omit<IProviderConfig, 'id'> = {
+      name: name.trim(),
+      provider: provider as IProviderConfig['provider'],
+      model,
+      ...(apiKey && { apiKey }),
+      ...(baseURL && { baseURL }),
+      ...(hasParameters && { parameters }),
+      ...(Object.keys(sanitizedCustomSettings).length > 0 && {
+        customSettings: sanitizedCustomSettings
+      })
+    };
+
+    onSave(config);
+    onClose();
+  };
+
+  const isValid =
+    name.trim() &&
+    provider &&
+    model &&
+    (selectedProvider?.apiKeyRequirement !== 'required' || apiKey);
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle>
+        {mode === 'add'
+          ? trans.__('Add New Provider')
+          : trans.__('Edit Provider')}
+      </DialogTitle>
+      <DialogContent>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
+          <TextField
+            fullWidth
+            label={trans.__('Provider Name')}
+            value={name}
+            onChange={e => setName(e.target.value)}
+            placeholder={trans.__('e.g., My Anthropic Config, Work Provider')}
+            helperText={trans.__(
+              'A friendly name to identify this provider configuration'
+            )}
+            required
+          />
+
+          <FormControl fullWidth required>
+            <InputLabel>{trans.__('Provider Type')}</InputLabel>
+            <Select
+              value={provider}
+              label={trans.__('Provider Type')}
+              onChange={e =>
+                handleProviderChange(
+                  e.target.value as IProviderConfig['provider']
+                )
+              }
+            >
+              {providerOptions.map(option => (
+                <MenuItem key={option.value} value={option.value}>
+                  <Box>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      {option.label}
+                      {option.apiKeyRequirement === 'required' && (
+                        <Chip
+                          size="small"
+                          label={trans.__('API Key')}
+                          color="default"
+                          variant="outlined"
+                        />
+                      )}
+                    </Box>
+                    {option.description && (
+                      <Typography variant="caption" color="text.secondary">
+                        {option.description}
+                      </Typography>
+                    )}
+                  </Box>
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <Autocomplete
+            freeSolo
+            fullWidth
+            options={selectedProvider?.models ?? []}
+            value={model}
+            onChange={(_, value) => {
+              setModel(typeof value === 'string' ? value : '');
+            }}
+            inputValue={model}
+            onInputChange={(_, value) => {
+              setModel(value);
+            }}
+            renderInput={params => (
+              <TextField
+                {...params}
+                fullWidth
+                label={trans.__('Model')}
+                placeholder={trans.__('Select or type a model ID')}
+                required
+                helperText={trans.__(
+                  'Choose from the list or enter a custom model ID'
+                )}
+              />
+            )}
+            clearOnBlur={false}
+          />
+
+          {selectedProvider &&
+            selectedProvider?.apiKeyRequirement !== 'none' && (
+              <TextField
+                fullWidth
+                inputRef={handleRef}
+                label={
+                  selectedProvider?.apiKeyRequirement === 'required'
+                    ? trans.__('API Key')
+                    : trans.__('API Key (Optional)')
+                }
+                type={showApiKey ? 'text' : 'password'}
+                value={apiKey}
+                onChange={e => setApiKey(e.target.value)}
+                placeholder={trans.__('Enter your API key...')}
+                required={selectedProvider?.apiKeyRequirement === 'required'}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        onClick={() => setShowApiKey(!showApiKey)}
+                        edge="end"
+                      >
+                        {showApiKey ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    </InputAdornment>
+                  )
+                }}
+              />
+            )}
+
+          {selectedProvider?.supportsBaseURL && (
+            <Autocomplete
+              freeSolo
+              fullWidth
+              options={(selectedProvider.baseUrls ?? []).map(
+                option => option.url
+              )}
+              value={baseURL || ''}
+              onChange={(_, value) => {
+                if (value && typeof value === 'string') {
+                  setBaseURL(value);
+                }
+              }}
+              inputValue={baseURL || ''}
+              renderOption={(props, option) => {
+                const urlOption = (selectedProvider.baseUrls ?? []).find(
+                  u => u.url === option
+                );
+                return (
+                  <Box component="li" {...props} key={option}>
+                    <Box>
+                      <Typography variant="body2">{option}</Typography>
+                      {urlOption?.description && (
+                        <Typography variant="caption" color="text.secondary">
+                          {urlOption.description}
+                        </Typography>
+                      )}
+                    </Box>
+                  </Box>
+                );
+              }}
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  fullWidth
+                  label={trans.__('Base URL')}
+                  placeholder="https://api.example.com/v1"
+                  onChange={e => setBaseURL(e.target.value)}
+                />
+              )}
+              clearOnBlur={false}
+            />
+          )}
+
+          {/* Advanced Settings Section */}
+          <Accordion
+            expanded={expandedAdvanced}
+            onChange={(_, isExpanded) => setExpandedAdvanced(isExpanded)}
+            sx={{
+              mt: 2,
+              bgcolor: 'transparent',
+              boxShadow: 'none',
+              border: 1,
+              borderColor: 'divider',
+              borderRadius: 1
+            }}
+          >
+            <AccordionSummary expandIcon={<ExpandMore />}>
+              <Typography variant="subtitle1" fontWeight="medium">
+                {trans.__('Advanced Settings')}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails sx={{ bgcolor: 'transparent' }}>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <Box>
+                  <Typography gutterBottom>
+                    {trans.__(
+                      'Temperature: %1',
+                      parameters.temperature ?? trans.__('Default')
+                    )}
+                  </Typography>
+                  <Slider
+                    value={parameters.temperature ?? DEFAULT_TEMPERATURE}
+                    onChange={(_, value) =>
+                      setParameters({
+                        ...parameters,
+                        temperature: value as number
+                      })
+                    }
+                    min={0}
+                    max={2}
+                    step={0.1}
+                    valueLabelDisplay="auto"
+                  />
+                  <Typography variant="caption" color="text.secondary">
+                    {trans.__(
+                      'Temperature for the model (lower values are more deterministic)'
+                    )}
+                  </Typography>
+                </Box>
+
+                <TextField
+                  fullWidth
+                  label={trans.__('Max Tokens (Optional)')}
+                  type="number"
+                  value={parameters.maxOutputTokens ?? ''}
+                  onChange={e =>
+                    setParameters({
+                      ...parameters,
+                      maxOutputTokens: e.target.value
+                        ? Number(e.target.value)
+                        : undefined
+                    })
+                  }
+                  placeholder={trans.__('Leave empty for provider default')}
+                  helperText={trans.__('Maximum length of AI responses')}
+                  slotProps={{ htmlInput: { min: 1 } }}
+                />
+
+                <TextField
+                  fullWidth
+                  label={trans.__('Max Turns (Optional)')}
+                  type="number"
+                  value={parameters.maxTurns ?? ''}
+                  onChange={e =>
+                    setParameters({
+                      ...parameters,
+                      maxTurns: e.target.value
+                        ? Number(e.target.value)
+                        : undefined
+                    })
+                  }
+                  placeholder={trans.__('Default: %1', DEFAULT_MAX_TURNS)}
+                  helperText={trans.__(
+                    'Maximum number of tool execution turns'
+                  )}
+                  slotProps={{ htmlInput: { min: 1, max: 100 } }}
+                />
+
+                <TextField
+                  fullWidth
+                  label={trans.__('Context Window (Optional)')}
+                  type="number"
+                  value={parameters.contextWindow ?? ''}
+                  onChange={e =>
+                    setParameters({
+                      ...parameters,
+                      contextWindow: e.target.value
+                        ? Number(e.target.value)
+                        : undefined
+                    })
+                  }
+                  placeholder={
+                    selectedModelInfo?.contextWindow !== undefined
+                      ? trans.__(
+                          'Default: %1',
+                          selectedModelInfo.contextWindow.toLocaleString()
+                        )
+                      : trans.__('e.g., 128000')
+                  }
+                  helperText={
+                    selectedModelInfo?.contextWindow !== undefined &&
+                    parameters.contextWindow === undefined
+                      ? trans.__(
+                          'Using provider metadata default of %1 tokens for this model unless you override it here.',
+                          selectedModelInfo.contextWindow.toLocaleString()
+                        )
+                      : trans.__(
+                          'Model context window size in tokens (used for context usage estimation)'
+                        )
+                  }
+                  slotProps={{ htmlInput: { min: 1 } }}
+                />
+
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  sx={{ mt: 2, mb: 1 }}
+                >
+                  {trans.__('Completion Options')}
+                </Typography>
+
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={parameters.supportsFillInMiddle ?? false}
+                      onChange={e =>
+                        setParameters({
+                          ...parameters,
+                          supportsFillInMiddle: e.target.checked
+                        })
+                      }
+                    />
+                  }
+                  label={trans.__('Fill-in-the-middle support')}
+                />
+
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={parameters.useFilterText ?? false}
+                      onChange={e =>
+                        setParameters({
+                          ...parameters,
+                          useFilterText: e.target.checked
+                        })
+                      }
+                    />
+                  }
+                  label={trans.__('Use filter text')}
+                />
+
+                {(supportsWebSearch || supportsWebFetch) && (
+                  <>
+                    <Typography
+                      variant="body2"
+                      color="text.secondary"
+                      sx={{ mt: 2, mb: 1 }}
+                    >
+                      {trans.__('Provider Web Tools')}
+                    </Typography>
+
+                    {supportsWebSearch && (
+                      <>
+                        <FormControlLabel
+                          control={
+                            <Switch
+                              checked={webSearchSettings.enabled === true}
+                              onChange={e =>
+                                updateCustomSetting(
+                                  'webSearch',
+                                  'enabled',
+                                  e.target.checked
+                                )
+                              }
+                            />
+                          }
+                          label={trans.__('Enable Web Search')}
+                        />
+
+                        {webSearchSettings.enabled === true && (
+                          <Box
+                            sx={{
+                              pl: 2,
+                              borderLeft: 2,
+                              borderColor: 'divider',
+                              display: 'flex',
+                              flexDirection: 'column',
+                              gap: 1.5
+                            }}
+                          >
+                            {(webSearchImplementation === 'openai' ||
+                              webSearchImplementation === 'anthropic') &&
+                              renderDomainList(
+                                'webSearch.allowedDomains',
+                                trans.__('Allowed Domains'),
+                                trans.__('example.com'),
+                                webSearchSettings.allowedDomains
+                              )}
+
+                            {webSearchImplementation === 'openai' && (
+                              <>
+                                <FormControl fullWidth>
+                                  <InputLabel>
+                                    {trans.__('Search Context Size')}
+                                  </InputLabel>
+                                  <Select
+                                    value={
+                                      webSearchSettings.searchContextSize ??
+                                      'medium'
+                                    }
+                                    label={trans.__('Search Context Size')}
+                                    onChange={e =>
+                                      updateCustomSetting(
+                                        'webSearch',
+                                        'searchContextSize',
+                                        e.target.value
+                                      )
+                                    }
+                                  >
+                                    <MenuItem value="low">
+                                      {trans.__('Low')}
+                                    </MenuItem>
+                                    <MenuItem value="medium">
+                                      {trans.__('Medium')}
+                                    </MenuItem>
+                                    <MenuItem value="high">
+                                      {trans.__('High')}
+                                    </MenuItem>
+                                  </Select>
+                                </FormControl>
+                                <FormControlLabel
+                                  control={
+                                    <Switch
+                                      checked={
+                                        webSearchSettings.externalWebAccess !==
+                                        false
+                                      }
+                                      onChange={e =>
+                                        updateCustomSetting(
+                                          'webSearch',
+                                          'externalWebAccess',
+                                          e.target.checked
+                                        )
+                                      }
+                                    />
+                                  }
+                                  label={trans.__('Use External Web Access')}
+                                />
+                              </>
+                            )}
+
+                            {webSearchImplementation === 'anthropic' && (
+                              <>
+                                <TextField
+                                  fullWidth
+                                  label={trans.__('Web Search Max Uses')}
+                                  type="number"
+                                  value={webSearchSettings.maxUses ?? ''}
+                                  onChange={e =>
+                                    updateCustomSetting(
+                                      'webSearch',
+                                      'maxUses',
+                                      e.target.value
+                                        ? Number(e.target.value)
+                                        : undefined
+                                    )
+                                  }
+                                  slotProps={{ htmlInput: { min: 1 } }}
+                                />
+                                {renderDomainList(
+                                  'webSearch.blockedDomains',
+                                  trans.__('Blocked Domains'),
+                                  trans.__('spam.example.com'),
+                                  webSearchSettings.blockedDomains
+                                )}
+                              </>
+                            )}
+                          </Box>
+                        )}
+                      </>
+                    )}
+
+                    {supportsWebFetch && (
+                      <>
+                        <FormControlLabel
+                          control={
+                            <Switch
+                              checked={webFetchSettings.enabled === true}
+                              onChange={e =>
+                                updateCustomSetting(
+                                  'webFetch',
+                                  'enabled',
+                                  e.target.checked
+                                )
+                              }
+                            />
+                          }
+                          label={trans.__('Enable Web Fetch')}
+                        />
+
+                        {webFetchSettings.enabled === true && (
+                          <Box
+                            sx={{
+                              pl: 2,
+                              borderLeft: 2,
+                              borderColor: 'divider',
+                              display: 'flex',
+                              flexDirection: 'column',
+                              gap: 1.5
+                            }}
+                          >
+                            <TextField
+                              fullWidth
+                              label={trans.__('Web Fetch Max Uses')}
+                              type="number"
+                              value={webFetchSettings.maxUses ?? ''}
+                              onChange={e =>
+                                updateCustomSetting(
+                                  'webFetch',
+                                  'maxUses',
+                                  e.target.value
+                                    ? Number(e.target.value)
+                                    : undefined
+                                )
+                              }
+                              slotProps={{ htmlInput: { min: 1 } }}
+                            />
+                            <TextField
+                              fullWidth
+                              label={trans.__('Web Fetch Max Content Tokens')}
+                              type="number"
+                              value={webFetchSettings.maxContentTokens ?? ''}
+                              onChange={e =>
+                                updateCustomSetting(
+                                  'webFetch',
+                                  'maxContentTokens',
+                                  e.target.value
+                                    ? Number(e.target.value)
+                                    : undefined
+                                )
+                              }
+                              slotProps={{ htmlInput: { min: 1 } }}
+                            />
+                            {renderDomainList(
+                              'webFetch.allowedDomains',
+                              trans.__('Allowed Domains'),
+                              trans.__('docs.example.com'),
+                              webFetchSettings.allowedDomains
+                            )}
+                            {renderDomainList(
+                              'webFetch.blockedDomains',
+                              trans.__('Blocked Domains'),
+                              trans.__('spam.example.com'),
+                              webFetchSettings.blockedDomains
+                            )}
+                            <FormControlLabel
+                              control={
+                                <Switch
+                                  checked={
+                                    webFetchSettings.citationsEnabled === true
+                                  }
+                                  onChange={e =>
+                                    updateCustomSetting(
+                                      'webFetch',
+                                      'citationsEnabled',
+                                      e.target.checked
+                                    )
+                                  }
+                                />
+                              }
+                              label={trans.__('Enable Citations')}
+                            />
+                          </Box>
+                        )}
+                      </>
+                    )}
+                  </>
+                )}
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>{trans.__('Cancel')}</Button>
+        <Button onClick={handleSave} variant="contained" disabled={!isValid}>
+          {mode === 'add' ? trans.__('Add Provider') : trans.__('Save Changes')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};