#AI.国际化

zhou zhou

17 小时以前 287a666e1b2bb155e86aa88ebace201d1e8a51f6

 rsf-admin/src/page/system/aiPrompt/AiPromptForm.jsx

@@ -1,37 +1,154 @@
import React from "react";
import React, { useState } from "react";
import {
    FormDataConsumer,
    TextInput,
    useNotify,
    useTranslate,
} from "react-admin";
import { Grid, Typography } from "@mui/material";
import { Alert, Button, Grid, Stack, TextField, Typography } from "@mui/material";
import StatusSelectInput from "@/page/components/StatusSelectInput";
import { renderAiPromptPreview } from "@/api/ai/configCenter";

const AiPromptForm = ({ readOnly = false }) => (
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">Prompt 配置</Typography>
            <Typography variant="h6">{translate("ai.prompt.form.sections.main")}</Typography>
        </Grid>
        <Grid item xs={12} md={6}>
            <TextInput source="name" label="名称" fullWidth disabled={readOnly} />
            <TextInput source="name" label="common.field.name" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12} md={6}>
            <TextInput source="code" label="编码" fullWidth disabled={readOnly} />
            <TextInput source="code" label="ai.prompt.fields.code" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12}>
            <TextInput source="scene" label="场景" fullWidth disabled={readOnly} />
            <TextInput source="scene" label="ai.prompt.fields.scene" fullWidth disabled={readOnly} />
        </Grid>
        <Grid item xs={12}>
            <TextInput source="systemPrompt" label="System Prompt" fullWidth multiline minRows={6} disabled={readOnly} />
            <TextInput source="systemPrompt" label="ai.prompt.fields.systemPrompt" fullWidth multiline minRows={6} disabled={readOnly} />
        </Grid>
        <Grid item xs={12}>
            <TextInput source="userPromptTemplate" label="User Prompt Template" fullWidth multiline minRows={5} disabled={readOnly} />
            <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="备注" fullWidth multiline minRows={3} disabled={readOnly} />
            <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;