import React, { useState } from "react";
|
import {
|
FormDataConsumer,
|
TextInput,
|
useNotify,
|
useTranslate,
|
} from "react-admin";
|
import { Alert, Button, Grid, Stack, TextField, Typography } from "@mui/material";
|
import StatusSelectInput from "@/page/components/StatusSelectInput";
|
import { renderAiPromptPreview } from "@/api/ai/configCenter";
|
|
const AiPromptPreviewSection = ({ formData }) => {
|
const notify = useNotify();
|
const translate = useTranslate();
|
const [input, setInput] = useState(() => translate("ai.prompt.preview.defaultInput"));
|
const [metadataText, setMetadataText] = useState("{\"path\":\"/system/aiPrompt\"}");
|
const [preview, setPreview] = useState(null);
|
const [loading, setLoading] = useState(false);
|
|
const handlePreview = async () => {
|
setLoading(true);
|
try {
|
const metadata = metadataText ? JSON.parse(metadataText) : {};
|
const data = await renderAiPromptPreview({
|
...formData,
|
input,
|
metadata,
|
});
|
setPreview(data);
|
notify(translate("ai.prompt.preview.success"));
|
} catch (error) {
|
setPreview(null);
|
notify(error?.message || translate("ai.prompt.preview.failed"), { type: "error" });
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
return (
|
<>
|
<Grid item xs={12}>
|
<Typography variant="h6">{translate("ai.prompt.preview.title")}</Typography>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label={translate("ai.prompt.preview.input")}
|
value={input}
|
onChange={(event) => setInput(event.target.value)}
|
fullWidth
|
multiline
|
minRows={3}
|
/>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label={translate("ai.prompt.preview.metadata")}
|
value={metadataText}
|
onChange={(event) => setMetadataText(event.target.value)}
|
fullWidth
|
multiline
|
minRows={3}
|
/>
|
</Grid>
|
<Grid item xs={12}>
|
<Stack direction="row" spacing={1} alignItems="center">
|
<Button variant="outlined" onClick={handlePreview} disabled={loading}>
|
{loading ? translate("ai.prompt.preview.loading") : translate("ai.prompt.preview.render")}
|
</Button>
|
<Typography variant="body2" color="text.secondary">
|
{translate("ai.prompt.preview.description")}
|
</Typography>
|
</Stack>
|
</Grid>
|
{preview && (
|
<>
|
<Grid item xs={12}>
|
<Alert severity="success">
|
{translate("ai.prompt.preview.resolvedVariables", {
|
value: (preview.resolvedVariables || []).join(", ") || translate("ai.common.none"),
|
})}
|
</Alert>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label={translate("ai.prompt.preview.renderedSystemPrompt")}
|
value={preview.renderedSystemPrompt || ""}
|
fullWidth
|
multiline
|
minRows={5}
|
InputProps={{ readOnly: true }}
|
/>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label={translate("ai.prompt.preview.renderedUserPrompt")}
|
value={preview.renderedUserPrompt || ""}
|
fullWidth
|
multiline
|
minRows={5}
|
InputProps={{ readOnly: true }}
|
/>
|
</Grid>
|
</>
|
)}
|
</>
|
);
|
};
|
|
const AiPromptForm = ({ readOnly = false }) => {
|
const translate = useTranslate();
|
|
return (
|
<Grid container spacing={2} width={{ xs: "100%", xl: "80%" }}>
|
<Grid item xs={12}>
|
<Typography variant="h6">{translate("ai.prompt.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}>
|
<TextInput source="code" label="ai.prompt.fields.code" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="scene" label="ai.prompt.fields.scene" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="systemPrompt" label="ai.prompt.fields.systemPrompt" fullWidth multiline minRows={6} disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="userPromptTemplate" label="ai.prompt.fields.userPromptTemplate" fullWidth multiline minRows={5} 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 }) => <AiPromptPreviewSection formData={formData} />}
|
</FormDataConsumer>
|
<Grid item xs={12}>
|
<Typography variant="h6">{translate("ai.prompt.form.sections.runtime")}</Typography>
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="updateBy" label="ai.common.lastUpdatedBy" fullWidth disabled />
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="updateTime$" label="ai.common.lastUpdatedAt" fullWidth disabled />
|
</Grid>
|
</Grid>
|
);
|
};
|
|
export default AiPromptForm;
|
