import React, { useState } from "react";
|
import {
|
FormDataConsumer,
|
TextInput,
|
useNotify,
|
} 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 [input, setInput] = useState("请帮我总结当前页面能做什么");
|
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("Prompt 预览完成");
|
} catch (error) {
|
setPreview(null);
|
notify(error?.message || "Prompt 预览失败", { type: "error" });
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
return (
|
<>
|
<Grid item xs={12}>
|
<Typography variant="h6">Prompt 预览</Typography>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label="示例输入"
|
value={input}
|
onChange={(event) => setInput(event.target.value)}
|
fullWidth
|
multiline
|
minRows={3}
|
/>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label="示例元数据 JSON"
|
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 ? "预览中..." : "预览渲染"}
|
</Button>
|
<Typography variant="body2" color="text.secondary">
|
用当前表单内容渲染 System Prompt 和 User Prompt。
|
</Typography>
|
</Stack>
|
</Grid>
|
{preview && (
|
<>
|
<Grid item xs={12}>
|
<Alert severity="success">
|
已解析变量：{(preview.resolvedVariables || []).join(", ") || "无"}
|
</Alert>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label="渲染后的 System Prompt"
|
value={preview.renderedSystemPrompt || ""}
|
fullWidth
|
multiline
|
minRows={5}
|
InputProps={{ readOnly: true }}
|
/>
|
</Grid>
|
<Grid item xs={12}>
|
<TextField
|
label="渲染后的 User Prompt"
|
value={preview.renderedUserPrompt || ""}
|
fullWidth
|
multiline
|
minRows={5}
|
InputProps={{ readOnly: true }}
|
/>
|
</Grid>
|
</>
|
)}
|
</>
|
);
|
};
|
|
const AiPromptForm = ({ readOnly = false }) => (
|
<Grid container spacing={2} width={{ xs: "100%", xl: "80%" }}>
|
<Grid item xs={12}>
|
<Typography variant="h6">Prompt 配置</Typography>
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="name" label="名称" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="code" label="编码" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="scene" label="场景" fullWidth disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="systemPrompt" label="System Prompt" fullWidth multiline minRows={6} disabled={readOnly} />
|
</Grid>
|
<Grid item xs={12}>
|
<TextInput source="userPromptTemplate" label="User Prompt Template" 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="备注" fullWidth multiline minRows={3} disabled={readOnly} />
|
</Grid>
|
<FormDataConsumer>
|
{({ formData }) => <AiPromptPreviewSection formData={formData} />}
|
</FormDataConsumer>
|
<Grid item xs={12}>
|
<Typography variant="h6">运行与审计信息</Typography>
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="updateBy" label="最近更新人" fullWidth disabled />
|
</Grid>
|
<Grid item xs={12} md={6}>
|
<TextInput source="updateTime$" label="最近更新时间" fullWidth disabled />
|
</Grid>
|
</Grid>
|
);
|
|
export default AiPromptForm;
|
