import React, { useState } from "react";
|
import {
|
BooleanInput,
|
FormDataConsumer,
|
NumberInput,
|
SelectInput,
|
TextInput,
|
useNotify,
|
useTranslate,
|
} from "react-admin";
|
import { Alert, Button, Grid, Stack, Typography } from "@mui/material";
|
import StatusSelectInput from "@/page/components/StatusSelectInput";
|
import { validateAiParamDraft } from "@/api/ai/configCenter";
|
|
const providerChoices = [
|
{ id: "OPENAI_COMPATIBLE", name: "OPENAI_COMPATIBLE" },
|
];
|
|
const AiParamValidateSection = ({ formData, readOnly }) => {
|
const notify = useNotify();
|
const translate = useTranslate();
|
const [loading, setLoading] = useState(false);
|
const [result, setResult] = useState(null);
|
|
const handleValidate = async () => {
|
setLoading(true);
|
try {
|
const data = await validateAiParamDraft(formData);
|
setResult(data);
|
notify(data?.message || translate("ai.param.validate.success"));
|
} catch (error) {
|
const nextResult = {
|
status: "INVALID",
|
message: error?.message || translate("ai.param.validate.failed"),
|
};
|
setResult(nextResult);
|
notify(nextResult.message, { type: "error" });
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
return (
|
<>
|
{!readOnly && (
|
<Grid item xs={12}>
|
<Stack direction="row" spacing={1} alignItems="center">
|
<Button variant="outlined" onClick={handleValidate} disabled={loading}>
|
{loading ? translate("ai.param.validate.loading") : translate("ai.param.validate.beforeSave")}
|
</Button>
|
<Typography variant="body2" color="text.secondary">
|
{translate("ai.param.validate.description")}
|
</Typography>
|
</Stack>
|
</Grid>
|
)}
|
{result && (
|
<Grid item xs={12}>
|
<Alert severity={result.status === "VALID" ? "success" : "error"}>
|
{result.message}
|
{result.elapsedMs ? ` · ${result.elapsedMs} ms` : ""}
|
{result.validatedAt ? ` · ${result.validatedAt}` : ""}
|
</Alert>
|
</Grid>
|
)}
|
</>
|
);
|
};
|
|
const AiParamForm = ({ readOnly = false }) => {
|
const translate = useTranslate();
|
|
return (
|
<Grid container spacing={2} width={{ xs: "100%", xl: "80%" }}>
|
<Grid item xs={12}>
|
<Typography variant="h6">{translate("ai.param.form.sections.main")}</Typography>
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="name" label="common.field.name" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<SelectInput source="providerType" label="ai.param.fields.providerType" choices={providerChoices} fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="baseUrl" label="ai.param.fields.baseUrl" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="apiKey" label="ai.param.fields.apiKey" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="model" label="ai.param.fields.model" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={3}>
|
<NumberInput source="temperature" label="ai.param.fields.temperature" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={3}>
|
<NumberInput source="topP" label="ai.param.fields.topP" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={3}>
|
<NumberInput source="maxTokens" label="ai.param.fields.maxTokens" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={3}>
|
<NumberInput source="timeoutMs" label="ai.param.fields.timeoutMs" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<BooleanInput source="streamingEnabled" label="ai.param.fields.streamingEnabled" disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<StatusSelectInput disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="memo" label="common.field.memo" fullWidth multiline minRows={3} disabled={readOnly} />
|
</Grid>
|
<FormDataConsumer>
|
{({ formData }) => <AiParamValidateSection formData={formData} readOnly={readOnly} />}
|
</FormDataConsumer>
|
<Grid item xs={12}>
|
<Typography variant="h6">{translate("ai.param.form.sections.runtime")}</Typography>
|
</Grid>
|
<Grid item xs={12} md={3}>
|
<TextInput source="validateStatus" label="ai.param.fields.validateStatus" fullWidth disabled />
|
</Grid>
|
<Grid item xs={12} md={3}>
|
<TextInput source="lastValidateElapsedMs" label="ai.param.fields.lastValidateElapsedMs" fullWidth disabled />
|
</Grid>
|
<Grid item xs={12} md={3}>
|
<TextInput source="lastValidateTime$" label="ai.param.fields.lastValidateTime" fullWidth disabled />
|
</Grid>
|
<Grid item xs={12} md={3}>
|
<TextInput source="updateBy" label="ai.common.lastUpdatedBy" fullWidth disabled />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="lastValidateMessage" label="ai.param.fields.lastValidateMessage" fullWidth multiline minRows={3} disabled />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="updateTime$" label="ai.common.lastUpdatedAt" fullWidth disabled />
|
</Grid>
|
</Grid>
|
);
|
};
|
|
export default AiParamForm;
|
