mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(payload): extract ai extensions to @mintel/payload-ai package
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m24s
Details
Build & Deploy / 🏗️ Build (push) Has been skipped
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-03-02 23:00:50 +01:00
parent 2ab5a8a41f
commit b2f6627ec5
51 changed files with 90 additions and 1510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
apps/web/src/payload/components/FieldGenerators/AiFieldButton.tsx
View File

@@ -1,136 +0,0 @@
"use client";
import React, { useState } from "react";
import { useField, useDocumentInfo, useForm } from "@payloadcms/ui";
import { generateSingleFieldAction } from "../../actions/generateField";
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>
);
}

108
apps/web/src/payload/components/FieldGenerators/GenerateSlugButton.tsx
View File

@@ -1,108 +0,0 @@
"use client";
import React, { useState, useEffect } from "react";
import { useForm, useField } from "@payloadcms/ui";
import { generateSlugAction } from "../../actions/generateField";
import { Button } from "@payloadcms/ui";
export function GenerateSlugButton({ path }: { path: string }) {
const [isGenerating, setIsGenerating] = useState(false);
const [instructions, setInstructions] = useState("");
useEffect(() => {
if (!isGenerating) return;
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
e.preventDefault();
e.returnValue =
"Slug-Generierung läuft noch. Wenn Sie neu laden, bricht der Vorgang ab!";
};
window.addEventListener("beforeunload", handleBeforeUnload);
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
}, [isGenerating]);
const { fields, replaceState } = useForm();
const { value, initialValue, setValue } = useField({ path });
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 () => {
const title = (fields?.title?.value as string) || "";
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 {
const res = await generateSlugAction(
title,
draftContent,
initialValue as string,
instructions,
);
if (res.success && res.slug) {
setValue(res.slug);
} else {
alert("Fehler: " + res.error);
}
} catch (e) {
console.error(e);
alert("Unerwarteter Fehler.");
} finally {
setIsGenerating(false);
}
};
return (
<div className="flex gap-2 items-center mb-4">
<textarea
value={instructions}
onChange={(e) => setInstructions(e.target.value)}
placeholder="Optionale AI Anweisung für den Slug..."
disabled={isGenerating}
style={{
width: "100%",
minHeight: "40px",
padding: "8px 12px",
fontSize: "14px",
borderRadius: "4px",
border: "1px solid var(--theme-elevation-200)",
background: "var(--theme-elevation-50)",
color: "var(--theme-text)",
marginBottom: "8px",
}}
/>
<button
type="button"
onClick={handleGenerate}
disabled={isGenerating}
className="btn btn--icon-style-none btn--size-medium ml-auto"
style={{
background: "var(--theme-elevation-150)",
border: "1px solid var(--theme-elevation-200)",
color: "var(--theme-text)",
boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
transition: "all 0.2s ease",
opacity: isGenerating ? 0.6 : 1,
cursor: isGenerating ? "not-allowed" : "pointer",
}}
>
<span className="btn__content">
{isGenerating ? "✨ Generiere (ca 10s)..." : "✨ AI Slug Generieren"}
</span>
</button>
</div>
);
}

109
apps/web/src/payload/components/FieldGenerators/GenerateThumbnailButton.tsx
View File

@@ -1,109 +0,0 @@
"use client";
import React, { useState, useEffect } from "react";
import { useForm, useField } from "@payloadcms/ui";
import { generateThumbnailAction } from "../../actions/generateField";
import { Button } from "@payloadcms/ui";
export function GenerateThumbnailButton({ path }: { path: string }) {
const [isGenerating, setIsGenerating] = useState(false);
const [instructions, setInstructions] = useState("");
useEffect(() => {
if (!isGenerating) return;
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
e.preventDefault();
e.returnValue =
"Bild-Generierung läuft noch (dies dauert bis zu 2 Minuten). Wenn Sie neu laden, bricht der Vorgang ab!";
};
window.addEventListener("beforeunload", handleBeforeUnload);
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
}, [isGenerating]);
const { fields } = useForm();
const { value, setValue } = useField({ path });
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 () => {
const title = (fields?.title?.value as string) || "";
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 {
const res = await generateThumbnailAction(
draftContent,
title,
instructions,
);
if (res.success && res.mediaId) {
setValue(res.mediaId);
} else {
alert("Fehler: " + res.error);
}
} catch (e) {
console.error(e);
alert("Unerwarteter Fehler.");
} finally {
setIsGenerating(false);
}
};
return (
<div className="flex gap-2 items-center mt-2 mb-4">
<textarea
value={instructions}
onChange={(e) => setInstructions(e.target.value)}
placeholder="Optionale Thumbnail-Detailanweisung (Farben, Stimmung, etc.)..."
disabled={isGenerating}
style={{
width: "100%",
minHeight: "40px",
padding: "8px 12px",
fontSize: "14px",
borderRadius: "4px",
border: "1px solid var(--theme-elevation-200)",
background: "var(--theme-elevation-50)",
color: "var(--theme-text)",
marginBottom: "8px",
}}
/>
<button
type="button"
onClick={handleGenerate}
disabled={isGenerating}
className="btn btn--icon-style-none btn--size-medium"
style={{
background: "var(--theme-elevation-150)",
border: "1px solid var(--theme-elevation-200)",
color: "var(--theme-text)",
boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
transition: "all 0.2s ease",
opacity: isGenerating ? 0.6 : 1,
cursor: isGenerating ? "not-allowed" : "pointer",
}}
>
<span className="btn__content">
{isGenerating
? "✨ AI arbeitet (dauert ca. 1-2 Min)..."
: "✨ AI Thumbnail Generieren"}
</span>
</button>
</div>
);
}

136
apps/web/src/payload/components/OptimizeButton.tsx
View File

@@ -1,136 +0,0 @@
"use client";
import React, { useState, useEffect } from "react";
import { useForm, useDocumentInfo } from "@payloadcms/ui";
import { optimizePostText } from "../actions/optimizePost";
import { Button } from "@payloadcms/ui";
export function OptimizeButton() {
const [isOptimizing, setIsOptimizing] = useState(false);
const [instructions, setInstructions] = useState("");
useEffect(() => {
if (!isOptimizing) return;
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
e.preventDefault();
e.returnValue =
"Lexical Block-Optimierung läuft noch (dies dauert bis zu 45 Sekunden). Wenn Sie neu laden, bricht der Vorgang ab!";
};
window.addEventListener("beforeunload", handleBeforeUnload);
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
}, [isOptimizing]);
const { fields, setModified, replaceState } = useForm();
const { title } = useDocumentInfo();
const handleOptimize = async () => {
// ... gathering draftContent logic
const lexicalValue = fields?.content?.value as any;
const legacyValue = fields?.legacyMdx?.value as string;
let draftContent = legacyValue || "";
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;
};
if (!draftContent && lexicalValue?.root) {
draftContent = extractText(lexicalValue.root);
}
if (!draftContent || draftContent.trim().length < 50) {
alert(
"Der Entwurf ist zu kurz. Bitte tippe zuerst ein paar Stichpunkte oder einen Rohling ein.",
);
return;
}
setIsOptimizing(true);
try {
// 2. We inject the title so the AI knows what it's writing about
const payloadText = `---\ntitle: "${title}"\n---\n\n${draftContent}`;
const response = await optimizePostText(payloadText, instructions);
if (response.success && response.lexicalAST) {
// 3. Inject the new Lexical AST directly into the field form state
// We use Payload's useForm hook replacing the value of the 'content' field.
replaceState({
...fields,
content: {
...fields.content,
value: response.lexicalAST,
initialValue: response.lexicalAST,
},
});
setModified(true);
alert(
"🎉 Artikel wurde erfolgreich von der AI optimiert und mit Lexical Components angereichert.",
);
} else {
alert("❌ Fehler: " + response.error);
}
} catch (error) {
console.error("Optimization failed:", error);
alert("Ein unerwarteter Fehler ist aufgetreten.");
} finally {
setIsOptimizing(false);
}
};
return (
<div className="mb-8 p-4 bg-slate-50 border border-slate-200 rounded-md">
<h3 className="text-sm font-semibold mb-2">AI Post Optimizer</h3>
<p className="text-xs text-slate-500 mb-4">
Lass Mintel AI deinen Text-Rohentwurf analysieren und automatisch in
einen voll formatierten Lexical Artikel mit passenden B2B Komponenten
(MemeCards, Mermaids) umwandeln.
</p>
<textarea
value={instructions}
onChange={(e) => setInstructions(e.target.value)}
placeholder="Optionale Anweisungen an die AI (z.B. 'schreibe etwas lockerer' oder 'fokussiere dich auf SEO')..."
disabled={isOptimizing}
style={{
width: "100%",
minHeight: "60px",
padding: "8px 12px",
fontSize: "14px",
borderRadius: "4px",
border: "1px solid var(--theme-elevation-200)",
background: "var(--theme-elevation-50)",
color: "var(--theme-text)",
marginBottom: "16px",
}}
/>
<button
type="button"
onClick={handleOptimize}
disabled={isOptimizing}
className="btn btn--icon-style-none btn--size-medium mt-4"
style={{
background: "var(--theme-elevation-150)",
border: "1px solid var(--theme-elevation-200)",
color: "var(--theme-text)",
boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
transition: "all 0.2s ease",
opacity: isOptimizing ? 0.7 : 1,
cursor: isOptimizing ? "not-allowed" : "pointer",
}}
>
<span className="btn__content" style={{ fontWeight: 600 }}>
{isOptimizing ? "✨ AI arbeitet (ca 30s)..." : "✨ Jetzt optimieren"}
</span>
</button>
</div>
);
}