livrare lot 2

backend/admin-dashboard/src/components/ProvidersManagement/dialogs/AssignmentDialog.tsx

@@ -0,0 +1,104 @@
+/**
+ * Add/Edit dialog for a ComponentAssignment row.
+ *
+ * Maps a component (techniques/claims_extract/etc) to a primary provider+model
+ * with optional fallback provider+model. Models dropdown filters to only show
+ * models belonging to the currently-selected provider.
+ *
+ * Fallback section is fully optional — empty fallback_provider_id disables
+ * the fallback model dropdown.
+ */
+import React from 'react';
+import {
+  Box, Dialog, DialogTitle, DialogContent, DialogActions, TextField, FormControl,
+  InputLabel, Select, MenuItem, FormControlLabel, Checkbox, Button, Typography,
+} from '@mui/material';
+import type { ComponentAssignment, LlmProvider, LlmModel } from '../ProvidersManagement.types';
+
+interface Props {
+  open: boolean;
+  data: Partial<ComponentAssignment> | null;
+  providers: LlmProvider[];
+  models: LlmModel[];
+  onClose: () => void;
+  onChange: (data: Partial<ComponentAssignment>) => void;
+  onSave: () => void;
+}
+
+export const AssignmentDialog: React.FC<Props> = ({ open, data, providers, models, onClose, onChange, onSave }) => {
+  if (!data) return null;
+  const isEdit = 'assignment_id' in data && !!data.assignment_id;
+
+  const filteredModels = models.filter((m) => m.provider_id === data.provider_id);
+  const filteredFallbackModels = models.filter((m) => m.provider_id === data.fallback_provider_id);
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>{isEdit ? 'Edit Assignment' : 'Add Assignment'}</DialogTitle>
+      <DialogContent>
+        <Box display="flex" flexDirection="column" gap={2} pt={1}>
+          <TextField label="Component Code" value={data.component_code || ''} onChange={(e) => onChange({ ...data, component_code: e.target.value })} required fullWidth placeholder="techniques, claims_extract, etc." />
+          <TextField label="Component Name" value={data.component_name || ''} onChange={(e) => onChange({ ...data, component_name: e.target.value })} required fullWidth />
+
+          <Typography variant="subtitle2" sx={{ mt: 1 }}>Primary Provider/Model</Typography>
+          <Box display="flex" gap={2}>
+            <FormControl sx={{ flex: 1 }} required>
+              <InputLabel>Provider</InputLabel>
+              <Select value={data.provider_id || ''} label="Provider" onChange={(e) => onChange({ ...data, provider_id: Number(e.target.value), model_id: undefined })}>
+                {providers.map((p) => (
+                  <MenuItem key={p.provider_id} value={p.provider_id}>{p.provider_name}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <FormControl sx={{ flex: 1 }} required>
+              <InputLabel>Model</InputLabel>
+              <Select value={data.model_id || ''} label="Model" onChange={(e) => onChange({ ...data, model_id: Number(e.target.value) })}>
+                {filteredModels.map((m) => (
+                  <MenuItem key={m.model_id} value={m.model_id}>{m.model_name}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+
+          <Typography variant="subtitle2" sx={{ mt: 1 }}>Fallback Provider/Model (Optional)</Typography>
+          <Box display="flex" gap={2}>
+            <FormControl sx={{ flex: 1 }}>
+              <InputLabel>Fallback Provider</InputLabel>
+              <Select value={data.fallback_provider_id || ''} label="Fallback Provider" onChange={(e) => onChange({ ...data, fallback_provider_id: e.target.value ? Number(e.target.value) : null, fallback_model_id: null })}>
+                <MenuItem value="">None</MenuItem>
+                {providers.map((p) => (
+                  <MenuItem key={p.provider_id} value={p.provider_id}>{p.provider_name}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <FormControl sx={{ flex: 1 }}>
+              <InputLabel>Fallback Model</InputLabel>
+              <Select value={data.fallback_model_id || ''} label="Fallback Model" onChange={(e) => onChange({ ...data, fallback_model_id: e.target.value ? Number(e.target.value) : null })} disabled={!data.fallback_provider_id}>
+                <MenuItem value="">None</MenuItem>
+                {filteredFallbackModels.map((m) => (
+                  <MenuItem key={m.model_id} value={m.model_id}>{m.model_name}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+
+          <Typography variant="subtitle2" sx={{ mt: 1 }}>Settings</Typography>
+          <Box display="flex" gap={2}>
+            <TextField label="Temperature" type="number" value={data.temperature || 0.3} onChange={(e) => onChange({ ...data, temperature: parseFloat(e.target.value) })} sx={{ flex: 1 }} inputProps={{ step: 0.1, min: 0, max: 2 }} />
+            <TextField label="Max Tokens" type="number" value={data.max_tokens || 4096} onChange={(e) => onChange({ ...data, max_tokens: parseInt(e.target.value) })} sx={{ flex: 1 }} />
+            <TextField label="Timeout (ms)" type="number" value={data.timeout_ms || 120000} onChange={(e) => onChange({ ...data, timeout_ms: parseInt(e.target.value) })} sx={{ flex: 1 }} />
+          </Box>
+
+          <TextField label="Description" value={data.description || ''} onChange={(e) => onChange({ ...data, description: e.target.value })} multiline rows={2} fullWidth />
+          <FormControlLabel control={<Checkbox checked={data.is_enabled !== false} onChange={(e) => onChange({ ...data, is_enabled: e.target.checked })} />} label="Enabled" />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="contained" onClick={onSave} disabled={!data.component_code || !data.component_name || !data.provider_id || !data.model_id}>
+          {isEdit ? 'Update' : 'Create'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};