feat: extract reusable @mintel/payload-ai package

2026-03-02 21:00:09 +01:00
parent 72556af24c
commit 80eefad5ea
15 changed files with 2943 additions and 0 deletions
--- a/packages/payload-ai/src/components/FieldGenerators/AiFieldButton.tsx
+++ b/packages/payload-ai/src/components/FieldGenerators/AiFieldButton.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState } from "react";
+import { useField, useDocumentInfo, useForm } from "@payloadcms/ui";
+import { generateSingleFieldAction } from "../../actions/generateField.js";
+
+export function AiFieldButton({ path, field }: { path: string; field: any }) {
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [instructions, setInstructions] = useState("");
+    const [showInstructions, setShowInstructions] = useState(false);
+
+    // Payload hooks
+    const { value, setValue } = useField<string>({ path });
+    const { title } = useDocumentInfo();
+    const { fields } = useForm();
+
+    const extractText = (lexicalRoot: any): string => {
+        if (!lexicalRoot) return "";
+        let text = "";
+        const iterate = (node: any) => {
+            if (node.text) text += node.text + " ";
+            if (node.children) node.children.forEach(iterate);
+        };
+        iterate(lexicalRoot);
+        return text;
+    };
+
+    const handleGenerate = async (e: React.MouseEvent) => {
+        e.preventDefault();
+
+        const lexicalValue = fields?.content?.value as any;
+        const legacyValue = fields?.legacyMdx?.value as string;
+        let draftContent = legacyValue || "";
+        if (!draftContent && lexicalValue?.root) {
+            draftContent = extractText(lexicalValue.root);
+        }
+
+        setIsGenerating(true);
+        try {
+            // Field name is passed as a label usually, fallback to path
+            const fieldName = typeof field?.label === "string" ? field.label : path;
+            const fieldDescription =
+                typeof field?.admin?.description === "string"
+                    ? field.admin.description
+                    : "";
+
+            const res = await generateSingleFieldAction(
+                (title as string) || "",
+                draftContent,
+                fieldName,
+                fieldDescription,
+                instructions,
+            );
+            if (res.success && res.text) {
+                setValue(res.text);
+            } else {
+                alert("Fehler: " + res.error);
+            }
+        } catch (e) {
+            alert("Fehler bei der Generierung.");
+        } finally {
+            setIsGenerating(false);
+            setShowInstructions(false);
+        }
+    };
+
+    return (
+        <div
+            style={{
+                marginTop: "8px",
+                marginBottom: "8px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+            }}
+        >
+            <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+                <button
+                    type="button"
+                    onClick={handleGenerate}
+                    disabled={isGenerating}
+                    style={{
+                        background: "var(--theme-elevation-150)",
+                        border: "1px solid var(--theme-elevation-200)",
+                        color: "var(--theme-text)",
+                        padding: "4px 12px",
+                        borderRadius: "4px",
+                        fontSize: "12px",
+                        cursor: isGenerating ? "not-allowed" : "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        opacity: isGenerating ? 0.6 : 1,
+                    }}
+                >
+                    {isGenerating ? "✨ AI arbeitet..." : "✨ AI Ausfüllen"}
+                </button>
+                <button
+                    type="button"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        setShowInstructions(!showInstructions);
+                    }}
+                    style={{
+                        background: "transparent",
+                        border: "none",
+                        color: "var(--theme-elevation-500)",
+                        fontSize: "12px",
+                        cursor: "pointer",
+                        textDecoration: "underline",
+                    }}
+                >
+                    {showInstructions ? "Prompt verbergen" : "Mit Prompt..."}
+                </button>
+            </div>
+            {showInstructions && (
+                <textarea
+                    value={instructions}
+                    onChange={(e) => setInstructions(e.target.value)}
+                    placeholder="Eigene Anweisung an AI (z.B. 'als catchy slogan')"
+                    disabled={isGenerating}
+                    style={{
+                        width: "100%",
+                        padding: "6px 8px",
+                        fontSize: "12px",
+                        borderRadius: "4px",
+                        border: "1px solid var(--theme-elevation-200)",
+                        background: "var(--theme-elevation-50)",
+                        color: "var(--theme-text)",
+                    }}
+                    rows={2}
+                />
+            )}
+        </div>
+    );
+}