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

1
.gitignore vendored
View File

@@ -47,6 +47,7 @@ pnpm-debug.log*
.cache/
cloned-websites/
storage/
data/postgres/
# Estimation Engine Data
data/crawls/

1
apps/web/next.config.mjs
View File

@@ -13,6 +13,7 @@ const nextConfig = {
'@mintel/content-engine',
'@mintel/concept-engine',
'@mintel/estimation-engine',
'@mintel/payload-ai',
'@mintel/pdf',
'canvas',
'sharp',

4
apps/web/payload.config.ts
View File

@@ -23,7 +23,7 @@ import { CrmInteractions } from "./src/payload/collections/CrmInteractions";
import { CrmTopics } from "./src/payload/collections/CrmTopics";
import { Projects } from "./src/payload/collections/Projects";
import { AiSettings } from "./src/payload/globals/AiSettings";
import { AiSettings } from "@mintel/payload-ai";
const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);
@@ -48,7 +48,7 @@ export default buildConfig({
CrmInteractions,
Projects,
],
globals: [AiSettings],
globals: [AiSettings as any],
email: nodemailerAdapter({
defaultFromAddress: process.env.MAIL_FROM || "info@mintel.me",
defaultFromName: "Mintel.me",

191
apps/web/src/payload/actions/generateField.ts
View File

@@ -1,191 +0,0 @@
"use server";
import { config } from "../../../content-engine.config";
import { getPayloadHMR } from "@payloadcms/next/utilities";
import configPromise from "@payload-config";
import * as fs from "node:fs/promises";
import * as path from "node:path";
import * as os from "node:os";
async function getOrchestrator() {
const OPENROUTER_KEY =
process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
if (!OPENROUTER_KEY) {
throw new Error(
"Missing OPENROUTER_API_KEY in .env (Required for AI generation)",
);
}
const importDynamic = new Function("modulePath", "return import(modulePath)");
const { AiBlogPostOrchestrator } = await importDynamic(
"@mintel/content-engine",
);
return new AiBlogPostOrchestrator({
apiKey: OPENROUTER_KEY,
replicateApiKey: REPLICATE_KEY,
model: "google/gemini-3-flash-preview",
});
}
export async function generateSlugAction(
title: string,
draftContent: string,
oldSlug?: string,
instructions?: string,
) {
try {
const orchestrator = await getOrchestrator();
const newSlug = await orchestrator.generateSlug(
draftContent,
title,
instructions,
);
if (oldSlug && oldSlug !== newSlug) {
const payload = await getPayloadHMR({ config: configPromise });
await payload.create({
collection: "redirects",
data: {
from: oldSlug,
to: newSlug,
},
});
}
return { success: true, slug: newSlug };
} catch (e: any) {
return { success: false, error: e.message };
}
}
export async function generateThumbnailAction(
draftContent: string,
title?: string,
instructions?: string,
) {
try {
const payload = await getPayloadHMR({ config: configPromise });
const OPENROUTER_KEY =
process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
if (!OPENROUTER_KEY) {
throw new Error("Missing OPENROUTER_API_KEY in .env");
}
if (!REPLICATE_KEY) {
throw new Error(
"Missing REPLICATE_API_KEY in .env (Required for Thumbnails)",
);
}
const importDynamic = new Function(
"modulePath",
"return import(modulePath)",
);
const { AiBlogPostOrchestrator } = await importDynamic(
"@mintel/content-engine",
);
const { ThumbnailGenerator } = await importDynamic(
"@mintel/thumbnail-generator",
);
const orchestrator = new AiBlogPostOrchestrator({
apiKey: OPENROUTER_KEY,
replicateApiKey: REPLICATE_KEY,
model: "google/gemini-3-flash-preview",
});
const tg = new ThumbnailGenerator({ replicateApiKey: REPLICATE_KEY });
const prompt = await orchestrator.generateVisualPrompt(
draftContent || title || "Technology",
instructions,
);
const tmpPath = path.join(os.tmpdir(), `mintel-thumb-${Date.now()}.png`);
await tg.generateImage(prompt, tmpPath);
const fileData = await fs.readFile(tmpPath);
const stat = await fs.stat(tmpPath);
const fileName = path.basename(tmpPath);
const newMedia = await payload.create({
collection: "media",
data: {
alt: title ? `Thumbnail for ${title}` : "AI Generated Thumbnail",
},
file: {
data: fileData,
name: fileName,
mimetype: "image/png",
size: stat.size,
},
});
// Cleanup temp file
await fs.unlink(tmpPath).catch(() => {});
return { success: true, mediaId: newMedia.id };
} catch (e: any) {
return { success: false, error: e.message };
}
}
export async function generateSingleFieldAction(
documentTitle: string,
documentContent: string,
fieldName: string,
fieldDescription: string,
instructions?: string,
) {
try {
const OPENROUTER_KEY =
process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
if (!OPENROUTER_KEY) throw new Error("Missing OPENROUTER_API_KEY");
const payload = await getPayloadHMR({ config: configPromise });
// Fetch context documents from DB
const contextDocsData = await payload.find({
collection: "context-files",
limit: 100,
});
const projectContext = contextDocsData.docs
.map((doc) => `--- ${doc.filename} ---\n${doc.content}`)
.join("\n\n");
const prompt = `You are an expert AI assistant perfectly trained for generating exact data values for CMS components.
PROJECT STRATEGY & CONTEXT:
${projectContext}
DOCUMENT TITLE: ${documentTitle}
DOCUMENT DRAFT:\n${documentContent}\n
YOUR TASK: Generate the exact value for a specific field named "${fieldName}".
${fieldDescription ? `FIELD DESCRIPTION / CONSTRAINTS: ${fieldDescription}\n` : ""}
${instructions ? `EDITOR INSTRUCTIONS for this field: ${instructions}\n` : ""}
CRITICAL RULES:
1. Respond ONLY with the requested content value.
2. NO markdown wrapping blocks (like \`\`\`mermaid or \`\`\`html) around the output! Just the raw code or text.
3. If the field implies a diagram or flow, output RAW Mermaid.js code.
4. If it's standard text, write professional B2B German. No quotes, no conversational filler.`;
const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
method: "POST",
headers: {
Authorization: `Bearer ${OPENROUTER_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "google/gemini-3-flash-preview",
messages: [{ role: "user", content: prompt }],
}),
});
const data = await res.json();
const text = data.choices?.[0]?.message?.content?.trim() || "";
return { success: true, text };
} catch (e: any) {
return { success: false, error: e.message };
}
}

88
apps/web/src/payload/actions/optimizePost.ts
View File

@@ -1,88 +0,0 @@
"use server";
import { config } from "../../../content-engine.config";
import { revalidatePath } from "next/cache";
import { parseMarkdownToLexical } from "../utils/lexicalParser";
import { getPayloadHMR } from "@payloadcms/next/utilities";
import configPromise from "@payload-config";
export async function optimizePostText(
draftContent: string,
instructions?: string,
) {
try {
const payload = await getPayloadHMR({ config: configPromise });
const globalAiSettings = await payload.findGlobal({ slug: "ai-settings" });
const customSources =
globalAiSettings?.customSources?.map((s: any) => s.sourceName) || [];
const OPENROUTER_KEY =
process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
if (!OPENROUTER_KEY) {
throw new Error(
"OPENROUTER_KEY or OPENROUTER_API_KEY not found in environment.",
);
}
const importDynamic = new Function(
"modulePath",
"return import(modulePath)",
);
const { AiBlogPostOrchestrator } = await importDynamic(
"@mintel/content-engine",
);
const orchestrator = new AiBlogPostOrchestrator({
apiKey: OPENROUTER_KEY,
replicateApiKey: REPLICATE_KEY,
model: "google/gemini-3-flash-preview",
});
// Fetch context documents purely from DB
const contextDocsData = await payload.find({
collection: "context-files",
limit: 100,
});
const projectContext = contextDocsData.docs.map((doc) => doc.content);
const optimizedMarkdown = await orchestrator.optimizeDocument({
content: draftContent,
projectContext,
availableComponents: config.components,
instructions,
internalLinks: [],
customSources,
});
// The orchestrator currently returns Markdown + JSX tags.
// We convert this mixed string into a basic Lexical AST map.
if (!optimizedMarkdown || typeof optimizedMarkdown !== "string") {
throw new Error("AI returned invalid markup.");
}
const blocks = parseMarkdownToLexical(optimizedMarkdown);
return {
success: true,
lexicalAST: {
root: {
type: "root",
format: "",
indent: 0,
version: 1,
children: blocks,
direction: "ltr",
},
},
};
} catch (error: any) {
console.error("Failed to optimize post:", error);
return {
success: false,
error: error.message || "An unknown error occurred during optimization.",
};
}
}

6
apps/web/src/payload/blocks/ArticleBlockquoteBlock.ts
View File

@@ -25,7 +25,7 @@ export const ArticleBlockquoteBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für quote ein.",
@@ -37,7 +37,7 @@ export const ArticleBlockquoteBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für author ein.",
@@ -49,7 +49,7 @@ export const ArticleBlockquoteBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für role ein.",

4
apps/web/src/payload/blocks/ArticleMemeBlock.ts
View File

@@ -32,7 +32,7 @@ export const ArticleMemeBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für alt ein.",
@@ -44,7 +44,7 @@ export const ArticleMemeBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für caption ein.",

10
apps/web/src/payload/blocks/ArticleQuoteBlock.ts
View File

@@ -26,7 +26,7 @@ export const ArticleQuoteBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für quote ein.",
@@ -39,7 +39,7 @@ export const ArticleQuoteBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für author ein.",
@@ -51,7 +51,7 @@ export const ArticleQuoteBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für role ein.",
@@ -63,7 +63,7 @@ export const ArticleQuoteBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für source ein.",
@@ -75,7 +75,7 @@ export const ArticleQuoteBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für sourceUrl ein.",

8
apps/web/src/payload/blocks/BoldNumberBlock.ts
View File

@@ -26,7 +26,7 @@ export const BoldNumberBlock: MintelBlock = {
description: "e.g. 53% or 2.5M€",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},
@@ -38,7 +38,7 @@ export const BoldNumberBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",
@@ -50,7 +50,7 @@ export const BoldNumberBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für source ein.",
@@ -62,7 +62,7 @@ export const BoldNumberBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für sourceUrl ein.",

2
apps/web/src/payload/blocks/ButtonBlock.ts
View File

@@ -26,7 +26,7 @@ export const ButtonBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",

2
apps/web/src/payload/blocks/CarouselBlock.ts
View File

@@ -35,7 +35,7 @@ export const CarouselBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für caption ein.",

10
apps/web/src/payload/blocks/ComparisonRowBlock.ts
View File

@@ -31,7 +31,7 @@ export const ComparisonRowBlock: MintelBlock = {
description: "Optional overarching description for the comparison.",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},
@@ -44,7 +44,7 @@ export const ComparisonRowBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für negativeLabel ein.",
@@ -57,7 +57,7 @@ export const ComparisonRowBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für negativeText ein.",
@@ -71,7 +71,7 @@ export const ComparisonRowBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für positiveLabel ein.",
@@ -84,7 +84,7 @@ export const ComparisonRowBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für positiveText ein.",

2
apps/web/src/payload/blocks/DiagramFlowBlock.ts
View File

@@ -25,7 +25,7 @@ export const DiagramFlowBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für definition ein.",

2
apps/web/src/payload/blocks/DiagramGanttBlock.ts
View File

@@ -25,7 +25,7 @@ export const DiagramGanttBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für definition ein.",

2
apps/web/src/payload/blocks/DiagramPieBlock.ts
View File

@@ -24,7 +24,7 @@ export const DiagramPieBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für definition ein.",

2
apps/web/src/payload/blocks/DiagramSequenceBlock.ts
View File

@@ -26,7 +26,7 @@ export const DiagramSequenceBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für definition ein.",

2
apps/web/src/payload/blocks/DiagramStateBlock.ts
View File

@@ -25,7 +25,7 @@ export const DiagramStateBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für definition ein.",

2
apps/web/src/payload/blocks/DiagramTimelineBlock.ts
View File

@@ -26,7 +26,7 @@ export const DiagramTimelineBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für definition ein.",

2
apps/web/src/payload/blocks/ExternalLinkBlock.ts
View File

@@ -32,7 +32,7 @@ export const ExternalLinkBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",

2
apps/web/src/payload/blocks/H2Block.ts
View File

@@ -15,7 +15,7 @@ export const H2Block: MintelBlock = {
description: "Geben Sie den Text für die H2-Überschrift ein.",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},

2
apps/web/src/payload/blocks/H3Block.ts
View File

@@ -15,7 +15,7 @@ export const H3Block: MintelBlock = {
description: "Geben Sie den Text für die H3-Überschrift ein.",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},

2
apps/web/src/payload/blocks/HeadingBlock.ts
View File

@@ -25,7 +25,7 @@ export const HeadingBlock: MintelBlock = {
description: "Der Text der Überschrift.",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},

4
apps/web/src/payload/blocks/IconListBlock.ts
View File

@@ -44,7 +44,7 @@ export const IconListBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für title ein.",
@@ -56,7 +56,7 @@ export const IconListBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für description ein.",

2
apps/web/src/payload/blocks/ImageTextBlock.ts
View File

@@ -32,7 +32,7 @@ export const ImageTextBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für text ein.",

6
apps/web/src/payload/blocks/LeadMagnetBlock.ts
View File

@@ -27,7 +27,7 @@ export const LeadMagnetBlock: MintelBlock = {
description: "The strong headline for the Call-to-Action",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},
@@ -40,7 +40,7 @@ export const LeadMagnetBlock: MintelBlock = {
description: "The value proposition text.",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},
@@ -53,7 +53,7 @@ export const LeadMagnetBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für buttonText ein.",

2
apps/web/src/payload/blocks/LeadParagraphBlock.ts
View File

@@ -26,7 +26,7 @@ export const LeadParagraphBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für text ein.",

2
apps/web/src/payload/blocks/MarkerBlock.ts
View File

@@ -25,7 +25,7 @@ export const MarkerBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für text ein.",

4
apps/web/src/payload/blocks/MemeCardBlock.ts
View File

@@ -28,7 +28,7 @@ export const MemeCardBlock: MintelBlock = {
"The template ID from memegen.link (e.g. 'drake', 'disastergirl')",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},
@@ -42,7 +42,7 @@ export const MemeCardBlock: MintelBlock = {
"Pipe-separated captions for the meme (e.g. 'Legacy Code|Mintel Stack'). Maximum 6 words per line.",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},

4
apps/web/src/payload/blocks/MermaidBlock.ts
View File

@@ -36,7 +36,7 @@ export const MermaidBlock: MintelBlock = {
description: "Optional title displayed above the diagram.",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},
@@ -59,7 +59,7 @@ export const MermaidBlock: MintelBlock = {
"The raw Mermaid.js syntax (e.g. graph TD... shadowing, loops, etc.).",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},

4
apps/web/src/payload/blocks/MetricBarBlock.ts
View File

@@ -25,7 +25,7 @@ export const MetricBarBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",
@@ -50,7 +50,7 @@ export const MetricBarBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für unit ein.",

2
apps/web/src/payload/blocks/ParagraphBlock.ts
View File

@@ -26,7 +26,7 @@ export const ParagraphBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den mehrzeiligen Text für text ein.",

2
apps/web/src/payload/blocks/PerformanceChartBlock.ts
View File

@@ -26,7 +26,7 @@ export const PerformanceChartBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für title ein.",

10
apps/web/src/payload/blocks/PremiumComparisonChartBlock.ts
View File

@@ -25,7 +25,7 @@ export const PremiumComparisonChartBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für title ein.",
@@ -37,7 +37,7 @@ export const PremiumComparisonChartBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für subtitle ein.",
@@ -54,7 +54,7 @@ export const PremiumComparisonChartBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",
@@ -82,7 +82,7 @@ export const PremiumComparisonChartBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für unit ein.",
@@ -102,7 +102,7 @@ export const PremiumComparisonChartBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für description ein.",

2
apps/web/src/payload/blocks/RevenueLossCalculatorBlock.ts
View File

@@ -25,7 +25,7 @@ export const RevenueLossCalculatorBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für title ein.",

2
apps/web/src/payload/blocks/SectionBlock.ts
View File

@@ -25,7 +25,7 @@ export const SectionBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für title ein.",

6
apps/web/src/payload/blocks/StatsDisplayBlock.ts
View File

@@ -25,7 +25,7 @@ export const StatsDisplayBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",
@@ -38,7 +38,7 @@ export const StatsDisplayBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für value ein.",
@@ -50,7 +50,7 @@ export const StatsDisplayBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für subtext ein.",

4
apps/web/src/payload/blocks/StatsGridBlock.ts
View File

@@ -30,7 +30,7 @@ export const StatsGridBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",
@@ -43,7 +43,7 @@ export const StatsGridBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für value ein.",

2
apps/web/src/payload/blocks/TLDRBlock.ts
View File

@@ -26,7 +26,7 @@ export const TLDRBlock: MintelBlock = {
description: "The summary content for the TLDR box.",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
},

2
apps/web/src/payload/blocks/TrackedLinkBlock.ts
View File

@@ -32,7 +32,7 @@ export const TrackedLinkBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",

4
apps/web/src/payload/blocks/WaterfallChartBlock.ts
View File

@@ -27,7 +27,7 @@ export const WaterfallChartBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für title ein.",
@@ -44,7 +44,7 @@ export const WaterfallChartBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für label ein.",

2
apps/web/src/payload/blocks/WebVitalsScoreBlock.ts
View File

@@ -42,7 +42,7 @@ export const WebVitalsScoreBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für description ein.",

2
apps/web/src/payload/blocks/YouTubeEmbedBlock.ts
View File

@@ -31,7 +31,7 @@ export const YouTubeEmbedBlock: MintelBlock = {
admin: {
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
"@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
],
},
description: "Geben Sie den Text für title ein.",

17
apps/web/src/payload/collections/Media.ts
View File

@@ -1,6 +1,7 @@
import type { CollectionConfig } from "payload";
import path from "path";
import { fileURLToPath } from "url";
import { replicateMediaHandler } from "@mintel/payload-ai";
const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);
@@ -14,6 +15,13 @@ export const Media: CollectionConfig = {
access: {
read: () => true, // Publicly readable
},
endpoints: [
{
path: "/:id/ai-process",
method: "post",
handler: replicateMediaHandler as any,
},
],
upload: {
staticDir: path.resolve(dirname, "../../../../public/media"),
adminThumbnail: "thumbnail",
@@ -39,6 +47,15 @@ export const Media: CollectionConfig = {
],
},
fields: [
{
name: "aiProcessButtons",
type: "ui",
admin: {
components: {
Field: "@mintel/payload-ai/components/AiMediaButtons#AiMediaButtons",
},
},
},
{
name: "alt",
type: "text",

6
apps/web/src/payload/collections/Posts.ts
View File

@@ -21,7 +21,7 @@ export const Posts: CollectionConfig = {
admin: {
position: "sidebar",
components: {
Field: "@/src/payload/components/OptimizeButton#OptimizeButton",
Field: "@mintel/payload-ai/components/OptimizeButton#OptimizeButton",
},
},
},
@@ -39,7 +39,7 @@ export const Posts: CollectionConfig = {
position: "sidebar",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/GenerateSlugButton#GenerateSlugButton",
"@mintel/payload-ai/components/GenerateSlugButton#GenerateSlugButton",
],
},
},
@@ -100,7 +100,7 @@ export const Posts: CollectionConfig = {
position: "sidebar",
components: {
afterInput: [
"@/src/payload/components/FieldGenerators/GenerateThumbnailButton#GenerateThumbnailButton",
"@mintel/payload-ai/components/GenerateThumbnailButton#GenerateThumbnailButton",
],
},
},

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>
);
}

30
apps/web/src/payload/globals/AiSettings.ts
View File

@@ -1,30 +0,0 @@
import type { GlobalConfig } from "payload";
export const AiSettings: GlobalConfig = {
slug: "ai-settings",
label: "AI Settings",
access: {
read: () => true, // Needed if the Next.js frontend or server actions need to fetch it
},
admin: {
group: "Configuration",
},
fields: [
{
name: "customSources",
type: "array",
label: "Custom Trusted Sources",
admin: {
description:
"List of trusted B2B/Tech sources (e.g. 'Vercel Blog', 'Fireship', 'Theo - t3.gg') the AI should prioritize when researching facts or videos. This overrides the hardcoded defaults.",
},
fields: [
{
name: "sourceName",
type: "text",
required: true,
label: "Channel or Publication Name",
},
],
},
],
};

640
apps/web/src/payload/utils/lexicalParser.ts
View File

@@ -1,640 +0,0 @@
/**
* Converts a Markdown+JSX string into a Lexical AST node array.
* Handles all registered Payload blocks and standard markdown formatting.
*/
function propValue(chunk: string, prop: string): string {
// Match prop="value" or prop='value' or prop={value}
const match =
chunk.match(new RegExp(`${prop}=["']([^"']+)["']`)) ||
chunk.match(new RegExp(`${prop}=\\{([^}]+)\\}`));
return match ? match[1] : "";
}
function innerContent(chunk: string, tag: string): string {
const match = chunk.match(
new RegExp(`<${tag}(?:\\s[^>]*)?>([\\s\\S]*?)<\\/${tag}>`),
);
return match ? match[1].trim() : "";
}
function blockNode(blockType: string, fields: Record<string, any>) {
return {
type: "block",
format: "",
version: 2,
fields: { blockType, ...fields },
};
}
export function parseMarkdownToLexical(markdown: string): any[] {
const textNode = (text: string) => ({
type: "paragraph",
format: "",
indent: 0,
version: 1,
children: [{ mode: "normal", type: "text", text, version: 1 }],
});
const nodes: any[] = [];
// Strip frontmatter
let content = markdown;
const fm = content.match(/^---\s*\n[\s\S]*?\n---/);
if (fm) content = content.replace(fm[0], "").trim();
// Pre-process: reassemble multi-line JSX tags that got split by double-newline chunking.
// This handles tags like <IconList>\n\n<IconListItem ... />\n\n</IconList>
content = reassembleMultiLineJSX(content);
const rawChunks = content.split(/\n\s*\n/);
for (let chunk of rawChunks) {
chunk = chunk.trim();
if (!chunk) continue;
// === Self-closing tags (no children) ===
// ArticleMeme / MemeCard
if (chunk.includes("<ArticleMeme") || chunk.includes("<MemeCard")) {
nodes.push(
blockNode("memeCard", {
template: propValue(chunk, "template"),
captions: propValue(chunk, "captions"),
}),
);
continue;
}
// BoldNumber
if (chunk.includes("<BoldNumber")) {
nodes.push(
blockNode("boldNumber", {
value: propValue(chunk, "value"),
label: propValue(chunk, "label"),
source: propValue(chunk, "source"),
sourceUrl: propValue(chunk, "sourceUrl"),
}),
);
continue;
}
// WebVitalsScore
if (chunk.includes("<WebVitalsScore")) {
nodes.push(
blockNode("webVitalsScore", {
lcp: parseFloat(propValue(chunk, "lcp")) || 0,
inp: parseFloat(propValue(chunk, "inp")) || 0,
cls: parseFloat(propValue(chunk, "cls")) || 0,
description: propValue(chunk, "description"),
}),
);
continue;
}
// LeadMagnet
if (chunk.includes("<LeadMagnet")) {
nodes.push(
blockNode("leadMagnet", {
title: propValue(chunk, "title"),
description: propValue(chunk, "description"),
buttonText: propValue(chunk, "buttonText") || "Jetzt anfragen",
href: propValue(chunk, "href") || "/contact",
variant: propValue(chunk, "variant") || "standard",
}),
);
continue;
}
// ComparisonRow
if (chunk.includes("<ComparisonRow")) {
nodes.push(
blockNode("comparisonRow", {
description: propValue(chunk, "description"),
negativeLabel: propValue(chunk, "negativeLabel"),
negativeText: propValue(chunk, "negativeText"),
positiveLabel: propValue(chunk, "positiveLabel"),
positiveText: propValue(chunk, "positiveText"),
reverse: chunk.includes("reverse={true}"),
}),
);
continue;
}
// StatsDisplay
if (chunk.includes("<StatsDisplay")) {
nodes.push(
blockNode("statsDisplay", {
label: propValue(chunk, "label"),
value: propValue(chunk, "value"),
subtext: propValue(chunk, "subtext"),
}),
);
continue;
}
// MetricBar
if (chunk.includes("<MetricBar")) {
nodes.push(
blockNode("metricBar", {
label: propValue(chunk, "label"),
value: parseFloat(propValue(chunk, "value")) || 0,
max: parseFloat(propValue(chunk, "max")) || 100,
unit: propValue(chunk, "unit") || "%",
}),
);
continue;
}
// ExternalLink
if (chunk.includes("<ExternalLink")) {
nodes.push(
blockNode("externalLink", {
href: propValue(chunk, "href"),
label:
propValue(chunk, "label") || innerContent(chunk, "ExternalLink"),
}),
);
continue;
}
// TrackedLink
if (chunk.includes("<TrackedLink")) {
nodes.push(
blockNode("trackedLink", {
href: propValue(chunk, "href"),
label:
propValue(chunk, "label") || innerContent(chunk, "TrackedLink"),
eventName: propValue(chunk, "eventName"),
}),
);
continue;
}
// YouTube
if (chunk.includes("<YouTubeEmbed")) {
nodes.push(
blockNode("youTubeEmbed", {
videoId: propValue(chunk, "videoId"),
}),
);
continue;
}
// LinkedIn
if (chunk.includes("<LinkedInEmbed")) {
nodes.push(
blockNode("linkedInEmbed", {
url: propValue(chunk, "url"),
}),
);
continue;
}
// Twitter
if (chunk.includes("<TwitterEmbed")) {
nodes.push(
blockNode("twitterEmbed", {
url: propValue(chunk, "url"),
}),
);
continue;
}
// Interactive (self-closing, defaults only)
if (chunk.includes("<RevenueLossCalculator")) {
nodes.push(
blockNode("revenueLossCalculator", {
title: propValue(chunk, "title") || "Performance Revenue Simulator",
}),
);
continue;
}
if (chunk.includes("<PerformanceChart")) {
nodes.push(
blockNode("performanceChart", {
title: propValue(chunk, "title") || "Website Performance",
}),
);
continue;
}
if (chunk.includes("<PerformanceROICalculator")) {
nodes.push(
blockNode("performanceROICalculator", {
baseConversionRate:
parseFloat(propValue(chunk, "baseConversionRate")) || 2.5,
monthlyVisitors:
parseInt(propValue(chunk, "monthlyVisitors")) || 50000,
}),
);
continue;
}
if (chunk.includes("<LoadTimeSimulator")) {
nodes.push(
blockNode("loadTimeSimulator", {
initialLoadTime:
parseFloat(propValue(chunk, "initialLoadTime")) || 3.5,
}),
);
continue;
}
if (chunk.includes("<ArchitectureBuilder")) {
nodes.push(
blockNode("architectureBuilder", {
preset: propValue(chunk, "preset") || "standard",
}),
);
continue;
}
if (chunk.includes("<DigitalAssetVisualizer")) {
nodes.push(
blockNode("digitalAssetVisualizer", {
assetId: propValue(chunk, "assetId"),
}),
);
continue;
}
// === Tags with inner content ===
// TLDR
if (chunk.includes("<TLDR>")) {
const inner = innerContent(chunk, "TLDR");
if (inner) {
nodes.push(blockNode("mintelTldr", { content: inner }));
continue;
}
}
// Paragraph (handles <Paragraph>, <Paragraph ...attrs>)
if (/<Paragraph[\s>]/.test(chunk)) {
const inner = innerContent(chunk, "Paragraph");
if (inner) {
nodes.push(blockNode("mintelP", { text: inner }));
continue;
}
}
// H2 (handles <H2>, <H2 id="...">)
if (/<H2[\s>]/.test(chunk)) {
const inner = innerContent(chunk, "H2");
if (inner) {
nodes.push(
blockNode("mintelHeading", {
text: inner,
seoLevel: "h2",
displayLevel: "h2",
}),
);
continue;
}
}
// H3 (handles <H3>, <H3 id="...">)
if (/<H3[\s>]/.test(chunk)) {
const inner = innerContent(chunk, "H3");
if (inner) {
nodes.push(
blockNode("mintelHeading", {
text: inner,
seoLevel: "h3",
displayLevel: "h3",
}),
);
continue;
}
}
// Marker (inline highlight, usually inside Paragraph – store as standalone block)
if (chunk.includes("<Marker>") && !chunk.includes("<Paragraph")) {
const inner = innerContent(chunk, "Marker");
if (inner) {
nodes.push(blockNode("marker", { text: inner }));
continue;
}
}
// LeadParagraph
if (chunk.includes("<LeadParagraph>")) {
const inner = innerContent(chunk, "LeadParagraph");
if (inner) {
nodes.push(blockNode("leadParagraph", { text: inner }));
continue;
}
}
// ArticleBlockquote
if (chunk.includes("<ArticleBlockquote")) {
nodes.push(
blockNode("articleBlockquote", {
quote: innerContent(chunk, "ArticleBlockquote"),
author: propValue(chunk, "author"),
role: propValue(chunk, "role"),
}),
);
continue;
}
// ArticleQuote
if (chunk.includes("<ArticleQuote")) {
nodes.push(
blockNode("articleQuote", {
quote:
innerContent(chunk, "ArticleQuote") || propValue(chunk, "quote"),
author: propValue(chunk, "author"),
role: propValue(chunk, "role"),
source: propValue(chunk, "source"),
}),
);
continue;
}
// Mermaid
if (chunk.includes("<Mermaid")) {
nodes.push(
blockNode("mermaid", {
id: propValue(chunk, "id") || `chart-${Date.now()}`,
title: propValue(chunk, "title"),
showShare: chunk.includes("showShare={true}"),
chartDefinition: innerContent(chunk, "Mermaid"),
}),
);
continue;
}
// Diagram variants (prefer inner definition, fall back to raw chunk text)
if (chunk.includes("<DiagramFlow")) {
nodes.push(
blockNode("diagramFlow", {
definition:
innerContent(chunk, "DiagramFlow") ||
propValue(chunk, "definition") ||
chunk,
}),
);
continue;
}
if (chunk.includes("<DiagramSequence")) {
nodes.push(
blockNode("diagramSequence", {
definition:
innerContent(chunk, "DiagramSequence") ||
propValue(chunk, "definition") ||
chunk,
}),
);
continue;
}
if (chunk.includes("<DiagramGantt")) {
nodes.push(
blockNode("diagramGantt", {
definition:
innerContent(chunk, "DiagramGantt") ||
propValue(chunk, "definition") ||
chunk,
}),
);
continue;
}
if (chunk.includes("<DiagramPie")) {
nodes.push(
blockNode("diagramPie", {
definition:
innerContent(chunk, "DiagramPie") ||
propValue(chunk, "definition") ||
chunk,
}),
);
continue;
}
if (chunk.includes("<DiagramState")) {
nodes.push(
blockNode("diagramState", {
definition:
innerContent(chunk, "DiagramState") ||
propValue(chunk, "definition") ||
chunk,
}),
);
continue;
}
if (chunk.includes("<DiagramTimeline")) {
nodes.push(
blockNode("diagramTimeline", {
definition:
innerContent(chunk, "DiagramTimeline") ||
propValue(chunk, "definition") ||
chunk,
}),
);
continue;
}
// Section (wrapping container – unwrap and parse inner content as top-level blocks)
if (chunk.includes("<Section")) {
const inner = innerContent(chunk, "Section");
if (inner) {
const innerNodes = parseMarkdownToLexical(inner);
nodes.push(...innerNodes);
}
continue;
}
// FAQSection (wrapping container)
if (chunk.includes("<FAQSection")) {
// FAQSection contains nested H3/Paragraph pairs.
// We extract them as individual blocks instead.
const faqContent = innerContent(chunk, "FAQSection");
if (faqContent) {
// Parse nested content recursively
const innerNodes = parseMarkdownToLexical(faqContent);
nodes.push(...innerNodes);
}
continue;
}
// IconList with IconListItems
if (chunk.includes("<IconList")) {
const items: any[] = [];
// Self-closing: <IconListItem icon="Check" title="..." description="..." />
const itemMatches = chunk.matchAll(/<IconListItem\s+([^>]*?)\/>/g);
for (const m of itemMatches) {
const attrs = m[1];
const title = (attrs.match(/title=["']([^"']+)["']/) || [])[1] || "";
const desc =
(attrs.match(/description=["']([^"']+)["']/) || [])[1] || "";
items.push({
icon: (attrs.match(/icon=["']([^"']+)["']/) || [])[1] || "Check",
title: title || "•",
description: desc,
});
}
// Content-wrapped: <IconListItem check>HTML content</IconListItem>
const itemMatches2 = chunk.matchAll(
/<IconListItem([^>]*)>([\s\S]*?)<\/IconListItem>/g,
);
for (const m of itemMatches2) {
const attrs = m[1] || "";
const innerHtml = m[2].trim();
// Use title attr if present, otherwise use inner HTML (stripped of tags) as title
const titleAttr = (attrs.match(/title=["']([^"']+)["']/) || [])[1];
const strippedInner = innerHtml.replace(/<[^>]+>/g, "").trim();
items.push({
icon: (attrs.match(/icon=["']([^"']+)["']/) || [])[1] || "Check",
title: titleAttr || strippedInner || "•",
description: "",
});
}
if (items.length > 0) {
nodes.push(blockNode("iconList", { items }));
continue;
}
}
// StatsGrid
if (chunk.includes("<StatsGrid")) {
const stats: any[] = [];
const statMatches = chunk.matchAll(/<StatItem\s+([^>]*?)\/>/g);
for (const m of statMatches) {
const attrs = m[1];
stats.push({
label: (attrs.match(/label=["']([^"']+)["']/) || [])[1] || "",
value: (attrs.match(/value=["']([^"']+)["']/) || [])[1] || "",
});
}
// Also try inline props pattern
if (stats.length === 0) {
const innerStats = innerContent(chunk, "StatsGrid");
if (innerStats) {
// fallback: store the raw content
nodes.push(blockNode("statsGrid", { stats: [] }));
continue;
}
}
nodes.push(blockNode("statsGrid", { stats }));
continue;
}
// PremiumComparisonChart
if (chunk.includes("<PremiumComparisonChart")) {
nodes.push(
blockNode("premiumComparisonChart", {
title: propValue(chunk, "title"),
}),
);
continue;
}
// WaterfallChart
if (chunk.includes("<WaterfallChart")) {
nodes.push(
blockNode("waterfallChart", {
title: propValue(chunk, "title"),
}),
);
continue;
}
// Reveal (animation wrapper – just pass through)
if (chunk.includes("<Reveal")) {
const inner = innerContent(chunk, "Reveal");
if (inner) {
// Parse inner content as regular nodes
const innerNodes = parseMarkdownToLexical(inner);
nodes.push(...innerNodes);
continue;
}
}
// Standalone IconListItem (outside IconList context)
if (chunk.includes("<IconListItem")) {
// Skip – these should be inside an IconList
continue;
}
// Skip wrapper divs (like <div className="my-8">)
if (/^<div\s/.test(chunk) || chunk === "</div>") {
continue;
}
// === Standard Markdown ===
// CarouselBlock
if (chunk.includes("<Carousel")) {
const slides: any[] = [];
const slideMatches = chunk.matchAll(/<Slide\s+([^>]*?)\/>/g);
for (const m of slideMatches) {
const attrs = m[1];
slides.push({
image: (attrs.match(/image=["']([^"']+)["']/) || [])[1] || "",
caption: (attrs.match(/caption=["']([^"']+)["']/) || [])[1] || "",
});
}
if (slides.length > 0) {
nodes.push(blockNode("carousel", { slides }));
continue;
}
}
// Headings
const headingMatch = chunk.match(/^(#{1,6})\s+(.*)/);
if (headingMatch) {
nodes.push({
type: "heading",
tag: `h${headingMatch[1].length}`,
format: "",
indent: 0,
version: 1,
direction: "ltr",
children: [
{ mode: "normal", type: "text", text: headingMatch[2], version: 1 },
],
});
continue;
}
// Default: plain text paragraph
nodes.push(textNode(chunk));
}
return nodes;
}
/**
* Reassembles multi-line JSX tags that span across double-newline boundaries.
* E.g. <IconList>\n\n<IconListItem.../>\n\n</IconList> becomes a single chunk.
*/
function reassembleMultiLineJSX(content: string): string {
// Tags that wrap other content across paragraph breaks
const wrapperTags = [
"IconList",
"StatsGrid",
"FAQSection",
"Section",
"Reveal",
"Carousel",
];
for (const tag of wrapperTags) {
const openRegex = new RegExp(`<${tag}[^>]*>`, "g");
let match;
while ((match = openRegex.exec(content)) !== null) {
const openPos = match.index;
const closeTag = `</${tag}>`;
const closePos = content.indexOf(closeTag, openPos);
if (closePos === -1) continue;
const fullEnd = closePos + closeTag.length;
const fullBlock = content.substring(openPos, fullEnd);
// Replace double newlines inside this block with single newlines
// so it stays as one chunk during splitting
const collapsed = fullBlock.replace(/\n\s*\n/g, "\n");
content =
content.substring(0, openPos) + collapsed + content.substring(fullEnd);
// Adjust regex position
openRegex.lastIndex = openPos + collapsed.length;
}
}
return content;
}

3
docker-compose.dev.yml
View File

@@ -57,7 +57,7 @@ services:
POSTGRES_USER: ${postgres_DB_USER:-payload}
POSTGRES_PASSWORD: ${postgres_DB_PASSWORD:-payload}
volumes:
- payload-db-data:/var/lib/postgresql/data
- ./data/postgres:/var/lib/postgresql/data
ports:
- "54321:5432"
@@ -68,7 +68,6 @@ networks:
external: true
volumes:
payload-db-data:
node_modules:
apps_node_modules:
pnpm_store: