fcarra/EmailManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
fcarraUniSa
2025-12-10 12:10:20 +01:00
committed by GitHub
parent 09e9174e4b
commit 8e7afde9e3
16 changed files with 1453 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
Dockerfile.txt Normal file
View File

@@ -0,0 +1,43 @@
# Stage 1: Build the React Application
FROM node:20-alpine AS builder
WORKDIR /app
# Copy package.json to install dependencies first (better caching)
COPY package.json ./
# Install all dependencies (including devDependencies for the build process)
RUN npm install
# Copy the rest of the application source code
COPY . .
# Build the frontend assets (Vite will output to /app/dist)
RUN npm run build
# Stage 2: Setup the Production Server (Node.js)
FROM node:20-alpine
WORKDIR /app
# Copy package.json again for production dependencies
COPY package.json ./
# Install ONLY production dependencies (skips devDependencies like Vite/Typescript)
RUN npm install --omit=dev
# Copy the built frontend assets from the 'builder' stage
COPY --from=builder /app/dist ./dist
# Copy the server entry point
COPY server.js ./
# Set environment variables (defaults)
ENV NODE_ENV=production
ENV PORT=3000
# Expose the port the app runs on
EXPOSE 3000
# Start the Node.js server
CMD ["npm", "start"]

22
README.md
View File

@@ -1,2 +1,20 @@
# EmailManager <div align="center">
Email manager UniSa <img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
</div>
# Run and deploy your AI Studio app
This contains everything you need to run your app locally.
View your app in AI Studio: https://ai.studio/apps/drive/1PJrPIeFdvYwt0ImdYe7PMH6YCDGTYQxH
## Run Locally
**Prerequisites:** Node.js
1. Install dependencies:
`npm install`
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
3. Run the app:
`npm run dev`

206
components/RichTextEditor.tsx Normal file
View File

@@ -0,0 +1,206 @@
import React, { useRef, useState, useEffect } from 'react';
import {
Bold, Italic, Underline, List, ListOrdered, Link,
Code, Type, Eraser, AlignLeft, AlignCenter, AlignRight, Braces
} from 'lucide-react';
interface Props {
value: string;
onChange: (value: string) => void;
placeholder?: string;
className?: string;
}
const RichTextEditor: React.FC<Props> = ({ value, onChange, placeholder, className = '' }) => {
const [isSourceMode, setIsSourceMode] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);
const selectionRef = useRef<Range | null>(null);
// Sync value to contentEditable div
useEffect(() => {
if (contentRef.current && !isSourceMode) {
if (document.activeElement !== contentRef.current) {
if (contentRef.current.innerHTML !== value) {
contentRef.current.innerHTML = value;
}
}
}
}, [value, isSourceMode]);
const saveSelection = () => {
const sel = window.getSelection();
if (sel && sel.rangeCount > 0) {
const range = sel.getRangeAt(0);
// Ensure the selection is actually inside our editor
if (contentRef.current && contentRef.current.contains(range.commonAncestorContainer)) {
selectionRef.current = range;
}
}
};
const restoreSelection = () => {
if (contentRef.current) {
contentRef.current.focus();
if (selectionRef.current) {
const sel = window.getSelection();
if (sel) {
sel.removeAllRanges();
sel.addRange(selectionRef.current);
}
} else {
// Fallback: move cursor to the end if no selection saved
const range = document.createRange();
range.selectNodeContents(contentRef.current);
range.collapse(false);
const sel = window.getSelection();
sel?.removeAllRanges();
sel?.addRange(range);
}
}
};
const execCommand = (command: string, value: string | undefined = undefined) => {
restoreSelection();
document.execCommand(command, false, value);
handleInput();
};
const handleInput = () => {
if (contentRef.current) {
onChange(contentRef.current.innerHTML);
saveSelection();
}
};
const insertVariable = (e: React.MouseEvent) => {
e.preventDefault(); // Prevent default button behavior
e.stopPropagation();
const varName = prompt("Enter variable name (without brackets):", "variable_name");
if (varName) {
if (isSourceMode) {
alert("Switch to Visual mode to use the inserter, or type {{name}} manually.");
} else {
restoreSelection();
const text = `{{${varName}}}`;
// Try standard command first, fallback to range manipulation
const success = document.execCommand('insertText', false, text);
if (!success) {
const sel = window.getSelection();
if (sel && sel.rangeCount > 0) {
const range = sel.getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
// Move cursor after inserted text
range.setStartAfter(textNode);
range.setEndAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
}
}
handleInput();
}
}
};
const ToolbarButton = ({
icon: Icon,
command,
arg,
active = false,
title
}: { icon: any, command?: string, arg?: string, active?: boolean, title: string }) => (
<button
type="button"
onMouseDown={(e) => e.preventDefault()} // Prevent focus loss from editor
onClick={() => command && execCommand(command, arg)}
className={`p-1.5 rounded hover:bg-slate-200 text-slate-600 transition-colors ${active ? 'bg-slate-200 text-slate-900' : ''}`}
title={title}
>
<Icon size={16} />
</button>
);
return (
<div className={`flex flex-col border border-slate-300 rounded-lg overflow-hidden bg-white ${className}`}>
{/* Toolbar */}
<div className="flex items-center gap-1 p-2 bg-slate-50 border-b border-slate-200 flex-wrap">
<div className="flex items-center gap-1 border-r border-slate-200 pr-2 mr-2">
<button
type="button"
onClick={() => setIsSourceMode(!isSourceMode)}
className={`flex items-center gap-1 px-2 py-1.5 rounded text-xs font-medium transition-colors ${isSourceMode ? 'bg-slate-800 text-white' : 'hover:bg-slate-200 text-slate-600'}`}
>
{isSourceMode ? <><Type size={14} /> Visual</> : <><Code size={14} /> Source</>}
</button>
</div>
{!isSourceMode && (
<>
<ToolbarButton icon={Bold} command="bold" title="Bold" />
<ToolbarButton icon={Italic} command="italic" title="Italic" />
<ToolbarButton icon={Underline} command="underline" title="Underline" />
<div className="w-px h-4 bg-slate-300 mx-1" />
<ToolbarButton icon={AlignLeft} command="justifyLeft" title="Align Left" />
<ToolbarButton icon={AlignCenter} command="justifyCenter" title="Align Center" />
<ToolbarButton icon={AlignRight} command="justifyRight" title="Align Right" />
<div className="w-px h-4 bg-slate-300 mx-1" />
<ToolbarButton icon={List} command="insertUnorderedList" title="Bullet List" />
<ToolbarButton icon={ListOrdered} command="insertOrderedList" title="Numbered List" />
<div className="w-px h-4 bg-slate-300 mx-1" />
<ToolbarButton icon={Eraser} command="removeFormat" title="Clear Formatting" />
<div className="flex-1" />
<button
type="button"
onClick={insertVariable}
className="flex items-center gap-1 px-2 py-1.5 rounded bg-brand-50 text-brand-600 hover:bg-brand-100 text-xs font-medium border border-brand-200"
title="Insert Variable Placeholder"
>
<Braces size={14} />
Variable
</button>
</>
)}
</div>
{/* Editor Area */}
<div className="relative flex-1 min-h-[300px] bg-white">
{isSourceMode ? (
<textarea
value={value}
onChange={(e) => onChange(e.target.value)}
className="w-full h-full p-4 font-mono text-sm text-slate-800 resize-none focus:outline-none bg-slate-50"
spellCheck={false}
/>
) : (
<div
ref={contentRef}
contentEditable
onInput={handleInput}
onKeyUp={saveSelection}
onMouseUp={saveSelection}
onTouchEnd={saveSelection}
suppressContentEditableWarning={true}
className="w-full h-full p-4 focus:outline-none prose prose-sm max-w-none overflow-y-auto"
style={{ minHeight: '300px' }}
/>
)}
{!value && !isSourceMode && (
<div className="absolute top-4 left-4 text-slate-400 pointer-events-none select-none">
{placeholder || "Start typing..."}
</div>
)}
</div>
</div>
);
};
export default RichTextEditor;

440
components/TemplateEditor.tsx Normal file
View File

@@ -0,0 +1,440 @@
import React, { useState, useEffect, useCallback } from 'react';
import { EmailTemplate } from '../types';
import { saveTemplate, generateSQL, generateSelectSQL, getTemplates, generateTemplateKey, generateN8nCode } from '../services/storage';
import { generateEmailContent } from '../services/geminiService';
import RichTextEditor from './RichTextEditor';
import {
Save, ArrowLeft, Eye, Database, Wand2, Copy, Check, Code
} from 'lucide-react';
interface Props {
templateId?: string;
initialTemplate?: EmailTemplate;
onBack: () => void;
onSave: () => void;
}
const DEFAULT_HEADER = `<div style="background-color: #f8fafc; padding: 20px; text-align: center;">
<h1 style="color: #334155; margin: 0;">My Company</h1>
</div>`;
const DEFAULT_BODY = `<div style="padding: 20px; color: #334155; font-family: sans-serif;">
<p>Gentile {{first_name}},</p>
<p>This is a default message body.</p>
</div>`;
const DEFAULT_FOOTER = `<div style="background-color: #f1f5f9; padding: 15px; text-align: center; font-size: 12px; color: #64748b;">
<p>&copy; 2024 My Company. All rights reserved.</p>
</div>`;
const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
const [name, setName] = useState(initialTemplate?.name || 'New Template');
const [description, setDescription] = useState(initialTemplate?.description || '');
const [subject, setSubject] = useState(initialTemplate?.subject || 'Welcome to our service');
const [header, setHeader] = useState(initialTemplate?.header || DEFAULT_HEADER);
const [body, setBody] = useState(initialTemplate?.body || DEFAULT_BODY);
const [footer, setFooter] = useState(initialTemplate?.footer || DEFAULT_FOOTER);
const [activeTab, setActiveTab] = useState<'header' | 'body' | 'footer'>('body');
const [showSqlModal, setShowSqlModal] = useState(false);
const [detectedVars, setDetectedVars] = useState<string[]>([]);
const [isGenerating, setIsGenerating] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [aiPrompt, setAiPrompt] = useState('');
const [showAiModal, setShowAiModal] = useState(false);
const [nameError, setNameError] = useState('');
// Variable detection logic
const detectVariables = useCallback(() => {
const regex = /\{\{([\w\d_-]+)\}\}/g;
const allText = `${subject} ${header} ${body} ${footer}`;
const matches = [...allText.matchAll(regex)];
const uniqueVars = Array.from(new Set(matches.map(m => m[1])));
setDetectedVars(uniqueVars);
}, [header, body, footer, subject]);
useEffect(() => {
detectVariables();
}, [detectVariables]);
// Clear name error when typing
useEffect(() => {
if (nameError) setNameError('');
}, [name]);
const handleSave = async () => {
const newKey = generateTemplateKey(name);
if (!newKey) {
setNameError('Template name cannot be empty or symbols only.');
alert('Template name cannot be empty.');
return;
}
setIsSaving(true);
try {
// Check for duplicates
const allTemplates = await getTemplates();
const isDuplicate = allTemplates.some(t => {
// Exclude current template if we are editing
if (initialTemplate && t.id === initialTemplate.id) return false;
return generateTemplateKey(t.name) === newKey;
});
if (isDuplicate) {
setNameError('A template with this name already exists.');
alert('A template with this name (or resulting ID) already exists. Please choose a unique name.');
setIsSaving(false);
return;
}
const newTemplate: EmailTemplate = {
id: initialTemplate?.id || crypto.randomUUID(),
name,
description,
subject,
header,
body,
footer,
variables: detectedVars,
updatedAt: new Date().toISOString()
};
await saveTemplate(newTemplate);
onSave();
} catch (e) {
alert("Failed to save template. Check server logs.");
} finally {
setIsSaving(false);
}
};
const handleAiGenerate = async () => {
if (!aiPrompt.trim()) return;
setIsGenerating(true);
try {
const generated = await generateEmailContent(aiPrompt, activeTab);
if (activeTab === 'header') setHeader(generated);
if (activeTab === 'body') setBody(generated);
if (activeTab === 'footer') setFooter(generated);
setShowAiModal(false);
setAiPrompt('');
} catch (e) {
alert("Error generating content. Please check API Key configuration.");
} finally {
setIsGenerating(false);
}
};
const tempTemplateObj = {
id: initialTemplate?.id || 'PREVIEW',
name,
description,
subject,
header,
body,
footer,
variables: detectedVars,
updatedAt: ''
};
const currentInsertSql = showSqlModal ? generateSQL(tempTemplateObj) : '';
const currentSelectSql = showSqlModal ? generateSelectSQL(tempTemplateObj) : '';
const currentN8nCode = showSqlModal ? generateN8nCode(tempTemplateObj) : '';
const getActiveContent = () => {
switch (activeTab) {
case 'header': return header;
case 'body': return body;
case 'footer': return footer;
}
};
const setActiveContent = (val: string) => {
switch (activeTab) {
case 'header': setHeader(val); break;
case 'body': setBody(val); break;
case 'footer': setFooter(val); break;
}
};
return (
<div className="flex flex-col h-screen bg-slate-50">
{/* Top Bar */}
<header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between sticky top-0 z-20">
<div className="flex items-center gap-4">
<button onClick={onBack} className="p-2 hover:bg-slate-100 rounded-full text-slate-500">
<ArrowLeft size={20} />
</button>
<div>
<h1 className="text-xl font-bold text-slate-800">
{initialTemplate ? 'Edit Template' : 'Create Template'}
</h1>
</div>
</div>
<div className="flex items-center gap-3">
<button
onClick={() => setShowSqlModal(true)}
className="flex items-center gap-2 px-4 py-2 text-slate-600 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 font-medium transition-colors"
>
<Database size={18} />
Integration
</button>
<button
onClick={handleSave}
disabled={isSaving}
className={`flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 font-medium transition-colors shadow-sm ${isSaving ? 'opacity-70 cursor-wait' : ''}`}
>
<Save size={18} />
{isSaving ? 'Saving...' : 'Save Template'}
</button>
</div>
</header>
<div className="flex flex-1 overflow-hidden">
{/* Left: Inputs */}
<div className="w-1/2 flex flex-col border-r border-slate-200 bg-white overflow-y-auto custom-scrollbar">
<div className="p-6 space-y-6">
{/* Metadata */}
<div className="space-y-4">
<div>
<label className="block text-sm font-semibold text-slate-700 mb-1">Template Name</label>
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-brand-500 outline-none bg-white ${nameError ? 'border-red-500 focus:border-red-500' : 'border-slate-300 focus:border-brand-500'}`}
placeholder="e.g., Welcome Email"
/>
{nameError && <p className="text-red-500 text-xs mt-1">{nameError}</p>}
<p className="text-xs text-slate-400 mt-1">Must be unique. Used to generate the database key: <span className="font-mono bg-slate-100 px-1">{generateTemplateKey(name) || '...'}</span></p>
</div>
<div>
<label className="block text-sm font-semibold text-slate-700 mb-1">Email Subject</label>
<input
type="text"
value={subject}
onChange={e => setSubject(e.target.value)}
className="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none bg-white"
placeholder="Subject line... (supports {{placeholders}})"
/>
</div>
</div>
{/* Variable Manager */}
<div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
<div className="flex items-center justify-between mb-2">
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Active Variables</span>
<span className="text-xs text-slate-400">Auto-detected from text</span>
</div>
<div className="flex flex-wrap gap-2">
{detectedVars.length === 0 && <span className="text-sm text-slate-400 italic">No variables detected yet. Type {'{{name}}'} to add one.</span>}
{detectedVars.map(v => (
<span key={v} className="px-2 py-1 bg-brand-100 text-brand-700 text-sm rounded border border-brand-200 font-mono">
{`{{${v}}}`}
</span>
))}
</div>
</div>
{/* Tabs */}
<div className="flex border-b border-slate-200">
{(['header', 'body', 'footer'] as const).map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`px-4 py-2 font-medium text-sm capitalize ${
activeTab === tab
? 'text-brand-600 border-b-2 border-brand-600'
: 'text-slate-500 hover:text-slate-700'
}`}
>
{tab}
</button>
))}
</div>
{/* Editor Area */}
<div className="relative">
<div className="flex justify-between items-center mb-2">
<label className="text-sm font-semibold text-slate-700">Content Editor</label>
<div className="flex gap-2">
<button
onClick={() => setShowAiModal(true)}
className="text-xs flex items-center gap-1 text-purple-600 hover:text-purple-700 font-medium bg-purple-50 px-2 py-1 rounded"
>
<Wand2 size={14} />
Generate with AI
</button>
</div>
</div>
<div className="h-[400px]">
<RichTextEditor
key={activeTab} // Force remount on tab change to sync contentEditable
value={getActiveContent()}
onChange={setActiveContent}
placeholder={`Design your ${activeTab} here...`}
className="h-full shadow-sm"
/>
</div>
<p className="mt-2 text-xs text-slate-500">
Use the "Variable" button in the toolbar to insert placeholders like {'{{name}}'}.
</p>
</div>
</div>
</div>
{/* Right: Live Preview */}
<div className="w-1/2 bg-slate-100 flex flex-col">
<div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10">
<span className="font-semibold text-slate-600 flex items-center gap-2">
<Eye size={18} /> Live Preview
</span>
<div className="text-xs text-slate-400">
Renders as standard HTML
</div>
</div>
<div className="flex-1 p-8 overflow-y-auto flex justify-center">
<div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col">
{/* Simulate Subject Line in Preview */}
<div className="bg-slate-50 border-b border-slate-100 p-4">
<span className="text-xs font-bold text-slate-400 uppercase">Subject:</span>
<p className="text-sm font-medium text-slate-800">{subject.replace(/\{\{([\w\d_-]+)\}\}/g, (match, p1) => `<span class="bg-yellow-100 text-yellow-800 px-1 rounded">${match}</span>`)}</p>
</div>
{/* Email Content */}
<div dangerouslySetInnerHTML={{ __html: header }} />
<div dangerouslySetInnerHTML={{ __html: body }} className="flex-1" />
<div dangerouslySetInnerHTML={{ __html: footer }} />
</div>
</div>
</div>
</div>
{/* SQL Modal */}
{showSqlModal && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6 flex flex-col max-h-[90vh]">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-bold text-slate-800 flex items-center gap-2">
<Database size={20} className="text-brand-600"/>
Integration Details
</h3>
<button onClick={() => setShowSqlModal(false)} className="text-slate-400 hover:text-slate-600">
<span className="text-2xl">&times;</span>
</button>
</div>
<div className="space-y-8 overflow-y-auto px-1 pb-4">
{/* INSERT Section */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">1. Setup (Run once in DB)</label>
<div className="relative">
<pre className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
{currentInsertSql}
</pre>
<button
onClick={() => navigator.clipboard.writeText(currentInsertSql)}
className="absolute top-2 right-2 p-2 bg-slate-700 text-white rounded hover:bg-slate-600"
title="Copy INSERT SQL"
>
<Copy size={16} />
</button>
</div>
</div>
<div>
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">2. Fetch (n8n SQL Node)</label>
<div className="relative">
<pre className="bg-slate-800 text-slate-50 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
{currentSelectSql}
</pre>
<button
onClick={() => navigator.clipboard.writeText(currentSelectSql)}
className="absolute top-2 right-2 p-2 bg-slate-600 text-white rounded hover:bg-slate-500"
title="Copy SELECT SQL"
>
<Copy size={16} />
</button>
</div>
</div>
</div>
{/* n8n Code Section */}
<div>
<label className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2 flex items-center gap-2">
<Code size={16} />
3. Populate (n8n Code Node)
</label>
<div className="relative">
<pre className="bg-slate-50 border border-slate-200 text-slate-700 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar max-h-60">
{currentN8nCode}
</pre>
<button
onClick={() => navigator.clipboard.writeText(currentN8nCode)}
className="absolute top-2 right-2 p-2 bg-white border border-slate-200 text-slate-600 rounded hover:bg-slate-50 shadow-sm"
title="Copy JS Code"
>
<Copy size={16} />
</button>
</div>
<p className="text-xs text-slate-500 mt-2">
Paste this into a <strong>Code Node</strong> connected after your SQL node. Replace <code>REPLACE_WITH_VALUE</code> with your actual data variables (e.g. <code>$('NodeName').item.json.name</code>).
</p>
</div>
</div>
</div>
</div>
)}
{/* AI Modal */}
{showAiModal && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6">
<h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
<Wand2 className="text-purple-600"/>
AI Content Generator
</h3>
<p className="text-sm text-slate-600 mb-4">
Describe what you want for the <strong>{activeTab}</strong> section.
The AI will generate HTML code with placeholders.
</p>
<textarea
className="w-full h-32 border border-slate-300 rounded p-3 text-sm focus:ring-2 focus:ring-purple-500 outline-none mb-4"
placeholder="e.g., Write a polite notification that the user's password has been changed successfully. Include a placeholder for the user's name."
value={aiPrompt}
onChange={(e) => setAiPrompt(e.target.value)}
/>
<div className="flex justify-end gap-3">
<button
onClick={() => setShowAiModal(false)}
className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded"
>
Cancel
</button>
<button
onClick={handleAiGenerate}
disabled={isGenerating || !aiPrompt}
className={`px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 flex items-center gap-2 ${isGenerating ? 'opacity-70' : ''}`}
>
{isGenerating ? 'Generating...' : 'Generate HTML'}
{!isGenerating && <Wand2 size={16} />}
</button>
</div>
{!process.env.API_KEY && (
<p className="mt-3 text-xs text-red-500">
Note: API_KEY not detected in environment. This feature requires a Gemini API key.
</p>
)}
</div>
</div>
)}
</div>
);
};
export default Editor;

158
components/TemplateList.tsx Normal file
View File

@@ -0,0 +1,158 @@
import React from 'react';
import { EmailTemplate } from '../types';
import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code } from 'lucide-react';
import { generateSelectSQL, generateN8nCode } from '../services/storage';
interface Props {
templates: EmailTemplate[];
onCreate: () => void;
onEdit: (t: EmailTemplate) => void;
onDelete: (id: string) => void;
}
const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onDelete }) => {
const [search, setSearch] = React.useState('');
const filtered = templates.filter(t =>
t.name.toLowerCase().includes(search.toLowerCase()) ||
t.subject.toLowerCase().includes(search.toLowerCase())
);
const copySelectSQL = (t: EmailTemplate, e: React.MouseEvent) => {
e.stopPropagation();
const sql = generateSelectSQL(t);
navigator.clipboard.writeText(sql);
alert('SELECT query copied! Use this in your n8n SQL node.');
};
const copyN8nCode = (t: EmailTemplate, e: React.MouseEvent) => {
e.stopPropagation();
const code = generateN8nCode(t);
navigator.clipboard.writeText(code);
alert('JS Code copied! Paste this into your n8n Code node.');
};
return (
<div className="p-8 max-w-7xl mx-auto h-screen flex flex-col">
<div className="flex justify-between items-center mb-8">
<div>
<h1 className="text-3xl font-bold text-slate-900 tracking-tight">Email Templates</h1>
<p className="text-slate-500 mt-1">Manage HTML templates for your n8n workflows</p>
</div>
<button
onClick={onCreate}
className="bg-brand-600 hover:bg-brand-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center gap-2 shadow-sm transition-all active:scale-95"
>
<Plus size={20} />
New Template
</button>
</div>
<div className="relative mb-6">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search className="h-5 w-5 text-slate-400" />
</div>
<input
type="text"
placeholder="Search templates..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-10 w-full md:w-96 px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none text-slate-700 bg-white shadow-sm"
/>
</div>
{filtered.length === 0 ? (
<div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50">
<div className="bg-white p-4 rounded-full shadow-sm mb-4">
<FileCode className="h-8 w-8 text-slate-400" />
</div>
<h3 className="text-lg font-medium text-slate-900">No templates found</h3>
<p className="text-slate-500 mt-1 max-w-sm text-center">Get started by creating your first HTML email template for automation.</p>
<button
onClick={onCreate}
className="mt-6 text-brand-600 font-medium hover:text-brand-800"
>
Create one now &rarr;
</button>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 overflow-y-auto pb-8 custom-scrollbar">
{filtered.map(t => (
<div
key={t.id}
onClick={() => onEdit(t)}
className="bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer group flex flex-col h-60"
>
<div className="p-5 flex-1">
<div className="flex justify-between items-start mb-2">
<h3 className="font-bold text-lg text-slate-800 group-hover:text-brand-600 transition-colors line-clamp-1" title={t.name}>
{t.name}
</h3>
<span className="text-xs bg-slate-100 text-slate-500 px-2 py-1 rounded">
{new Date(t.updatedAt).toLocaleDateString()}
</span>
</div>
<p className="text-sm text-slate-500 line-clamp-2 mb-3 h-10">
{t.description || 'No description provided.'}
</p>
<div className="text-xs text-slate-400 mb-1">Subject:</div>
<div className="text-sm text-slate-700 font-medium bg-slate-50 p-2 rounded truncate border border-slate-100">
{t.subject}
</div>
<div className="mt-3 flex flex-wrap gap-1">
{t.variables.slice(0, 3).map(v => (
<span key={v} className="text-[10px] bg-brand-50 text-brand-600 px-1.5 py-0.5 rounded border border-brand-100">
{/* Explicitly building the string to avoid rendering issues */}
{'{{' + v + '}}'}
</span>
))}
{t.variables.length > 3 && (
<span className="text-[10px] text-slate-400 px-1 py-0.5">+ {t.variables.length - 3} more</span>
)}
</div>
</div>
<div className="border-t border-slate-100 p-3 flex justify-between bg-slate-50/50 rounded-b-xl gap-2">
<div className="flex gap-1">
<button
onClick={(e) => copySelectSQL(t, e)}
className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-brand-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
title="Copy SELECT query"
>
<ArrowRightCircle size={14} />
SQL
</button>
<button
onClick={(e) => copyN8nCode(t, e)}
className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-purple-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
title="Copy n8n Code Node JS"
>
<Code size={14} />
JS
</button>
</div>
<div className="flex gap-1">
<button
onClick={(e) => { e.stopPropagation(); onEdit(t); }}
className="p-1.5 text-slate-500 hover:text-brand-600 hover:bg-white rounded shadow-sm transition-all"
title="Edit"
>
<Edit size={16} />
</button>
<button
onClick={(e) => { e.stopPropagation(); onDelete(t.id); }}
className="p-1.5 text-slate-500 hover:text-red-600 hover:bg-white rounded shadow-sm transition-all"
title="Delete"
>
<Trash2 size={16} />
</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
);
};
export default TemplateList;

19
docker-compose.yml Normal file
View File

@@ -0,0 +1,19 @@
version: '3.8'
services:
app:
build: .
ports:
- "3000:3000"
environment:
# Database Connection Configuration
# Define these variables in your .env file or deployment environment
- DB_TYPE=${DB_TYPE:-mysql}
- DB_HOST=${DB_HOST:-host.docker.internal}
- DB_PORT=${DB_PORT:-3306}
- DB_USER=${DB_USER:-user}
- DB_PASSWORD=${DB_PASSWORD:-password}
- DB_NAME=${DB_NAME:-n8n_templates}
# Application Keys
- API_KEY=${API_KEY}

75
index.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>n8n Email Template Manager</title>
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
brand: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
900: '#0c4a6e',
}
}
}
}
}
</script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc;
}
/* Custom scrollbar for editors */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
</style>
<script type="importmap">
{
"imports": {
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.32.0",
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
"react/": "https://aistudiocdn.com/react@^19.2.1/",
"react": "https://aistudiocdn.com/react@^19.2.1",
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.556.0",
"path": "https://aistudiocdn.com/path@^0.12.7",
"cors": "https://aistudiocdn.com/cors@^2.8.5",
"mysql2/": "https://aistudiocdn.com/mysql2@^3.15.3/",
"dotenv": "https://aistudiocdn.com/dotenv@^17.2.3",
"url": "https://aistudiocdn.com/url@^0.11.4",
"express": "https://aistudiocdn.com/express@^5.2.1",
"pg": "https://aistudiocdn.com/pg@^8.16.3"
}
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.tsx"></script>
</body>
</html>

15
index.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
if (!rootElement) {
throw new Error("Could not find root element to mount to");
}
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

5
metadata.json Normal file
View File

@@ -0,0 +1,5 @@
{
"name": "n8n Email Template Builder",
"description": "A visual tool to create, manage, and export HTML email templates with dynamic placeholders for n8n automation workflows.",
"requestFramePermissions": []
}

32
package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "n8n-email-template-builder",
"version": "1.0.0",
"private": true,
"type": "module",
"dependencies": {
"@google/genai": "^0.1.0",
"lucide-react": "^0.294.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"express": "^4.18.2",
"mysql2": "^3.9.1",
"pg": "^8.11.3",
"dotenv": "^16.4.1",
"cors": "^2.8.5"
},
"scripts": {
"start": "node server.js",
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"tailwindcss": "^3.4.0",
"typescript": "^5.3.3",
"vite": "^5.0.10"
}
}

194
server.js Normal file
View File

@@ -0,0 +1,194 @@
import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import mysql from 'mysql2/promise';
import pg from 'pg';
import cors from 'cors';
import dotenv from 'dotenv';
dotenv.config();
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
const PORT = process.env.PORT || 3000;
app.use(cors());
app.use(express.json());
app.use(express.static(path.join(__dirname, 'dist')));
// DB Configuration
const DB_TYPE = process.env.DB_TYPE || 'mysql'; // 'mysql' or 'postgres'
const dbConfig = {
host: process.env.DB_HOST || 'localhost',
user: process.env.DB_USER || 'root',
password: process.env.DB_PASSWORD || '',
database: process.env.DB_NAME || 'n8n_templates',
port: process.env.DB_PORT || (DB_TYPE === 'postgres' ? 5432 : 3306),
};
let pool;
// Initialize DB Connection
const initDB = async () => {
try {
if (DB_TYPE === 'postgres') {
const { Pool } = pg;
pool = new Pool(dbConfig);
// Create table for Postgres
await pool.query(`
CREATE TABLE IF NOT EXISTS email_templates (
id VARCHAR(255) PRIMARY KEY,
template_key VARCHAR(255) UNIQUE NOT NULL,
name VARCHAR(255) NOT NULL,
description TEXT,
subject VARCHAR(255),
header_html TEXT,
body_html TEXT,
footer_html TEXT,
full_html TEXT,
required_variables JSONB,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
`);
} else {
// MySQL
pool = mysql.createPool(dbConfig);
// Create table for MySQL
await pool.query(`
CREATE TABLE IF NOT EXISTS email_templates (
id VARCHAR(255) PRIMARY KEY,
template_key VARCHAR(255) UNIQUE NOT NULL,
name VARCHAR(255) NOT NULL,
description TEXT,
subject VARCHAR(255),
header_html TEXT,
body_html TEXT,
footer_html TEXT,
full_html TEXT,
required_variables JSON,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
`);
}
console.log(`Connected to ${DB_TYPE} database successfully.`);
} catch (err) {
console.error('Database connection failed:', err);
process.exit(1);
}
};
initDB();
// API Routes
// GET All Templates
app.get('/api/templates', async (req, res) => {
try {
let rows;
if (DB_TYPE === 'postgres') {
const result = await pool.query('SELECT * FROM email_templates ORDER BY updated_at DESC');
rows = result.rows;
} else {
const [result] = await pool.query('SELECT * FROM email_templates ORDER BY updated_at DESC');
rows = result;
}
// Map DB fields back to frontend types
const templates = rows.map(row => ({
id: row.id,
name: row.name,
description: row.description,
subject: row.subject,
header: row.header_html,
body: row.body_html,
footer: row.footer_html,
variables: typeof row.required_variables === 'string' ? JSON.parse(row.required_variables) : row.required_variables,
updatedAt: row.updated_at
}));
res.json(templates);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Failed to fetch templates' });
}
});
// SAVE (Upsert) Template
app.post('/api/templates', async (req, res) => {
const t = req.body;
const fullHtml = `${t.header}${t.body}${t.footer}`;
const templateKey = t.name.trim().toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
const variablesJson = JSON.stringify(t.variables);
try {
if (DB_TYPE === 'postgres') {
const query = `
INSERT INTO email_templates (id, template_key, name, description, subject, header_html, body_html, footer_html, full_html, required_variables, updated_at)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, NOW())
ON CONFLICT (id) DO UPDATE SET
template_key = EXCLUDED.template_key,
name = EXCLUDED.name,
description = EXCLUDED.description,
subject = EXCLUDED.subject,
header_html = EXCLUDED.header_html,
body_html = EXCLUDED.body_html,
footer_html = EXCLUDED.footer_html,
full_html = EXCLUDED.full_html,
required_variables = EXCLUDED.required_variables,
updated_at = NOW();
`;
await pool.query(query, [t.id, templateKey, t.name, t.description, t.subject, t.header, t.body, t.footer, fullHtml, variablesJson]);
} else {
const query = `
INSERT INTO email_templates (id, template_key, name, description, subject, header_html, body_html, footer_html, full_html, required_variables, updated_at)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW())
ON DUPLICATE KEY UPDATE
template_key = VALUES(template_key),
name = VALUES(name),
description = VALUES(description),
subject = VALUES(subject),
header_html = VALUES(header_html),
body_html = VALUES(body_html),
footer_html = VALUES(footer_html),
full_html = VALUES(full_html),
required_variables = VALUES(required_variables),
updated_at = NOW();
`;
await pool.query(query, [t.id, templateKey, t.name, t.description, t.subject, t.header, t.body, t.footer, fullHtml, variablesJson]);
}
res.json({ success: true });
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Failed to save template', details: err.message });
}
});
// DELETE Template
app.delete('/api/templates/:id', async (req, res) => {
try {
if (DB_TYPE === 'postgres') {
await pool.query('DELETE FROM email_templates WHERE id = $1', [req.params.id]);
} else {
await pool.query('DELETE FROM email_templates WHERE id = ?', [req.params.id]);
}
res.json({ success: true });
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Failed to delete template' });
}
});
// Handle React Routing
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});

53
services/geminiService.ts Normal file
View File

@@ -0,0 +1,53 @@
import { GoogleGenAI } from "@google/genai";
const getClient = () => {
const apiKey = process.env.API_KEY;
if (!apiKey) return null;
return new GoogleGenAI({ apiKey });
};
export const generateEmailContent = async (
prompt: string,
section: 'header' | 'body' | 'footer'
): Promise<string> => {
const client = getClient();
if (!client) {
throw new Error("API Key not found");
}
// Model selection based on text task complexity
const modelId = 'gemini-2.5-flash';
const systemInstruction = `
You are an expert email marketing developer.
You are generating HTML content for an email template ${section}.
RULES:
1. Return ONLY the HTML code. Do not include markdown ticks, 'html' labels, or explanations.
2. Use inline CSS styles for compatibility.
3. Use the Handlebars syntax for placeholders: {{variable_name}}.
4. If the user asks for a specific variable, format it correctly.
5. For Header: Include logo placeholders or standard menu links if asked.
6. For Footer: Include unsubscribe links and copyright info if asked.
7. For Body: Focus on clean, readable content.
`;
try {
const response = await client.models.generateContent({
model: modelId,
contents: prompt,
config: {
systemInstruction: systemInstruction,
temperature: 0.7,
}
});
let text = response.text || "";
// Cleanup if model adds markdown despite instructions
text = text.replace(/```html/g, '').replace(/```/g, '').trim();
return text;
} catch (error) {
console.error("Gemini API Error:", error);
throw new Error("Failed to generate content");
}
};

106
services/storage.ts Normal file
View File

@@ -0,0 +1,106 @@
import { EmailTemplate } from '../types';
// Helper functions remain synchronous as they are utility functions
export const generateTemplateKey = (name: string): string => {
return name.trim().toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
};
export const generateSQL = (template: EmailTemplate): string => {
const fullHtml = `${template.header}${template.body}${template.footer}`.replace(/'/g, "''");
const header = template.header.replace(/'/g, "''");
const body = template.body.replace(/'/g, "''");
const footer = template.footer.replace(/'/g, "''");
const subject = template.subject.replace(/'/g, "''");
const vars = JSON.stringify(template.variables).replace(/'/g, "''");
const key = generateTemplateKey(template.name);
return `INSERT INTO email_templates (id, template_key, name, description, subject, header_html, body_html, footer_html, full_html, required_variables)
VALUES ('${template.id}', '${key}', '${template.name.replace(/'/g, "''")}', '${template.description?.replace(/'/g, "''") || ''}', '${subject}', '${header}', '${body}', '${footer}', '${fullHtml}', '${vars}')
ON DUPLICATE KEY UPDATE
subject = VALUES(subject),
header_html = VALUES(header_html),
body_html = VALUES(body_html),
footer_html = VALUES(footer_html),
full_html = VALUES(full_html),
required_variables = VALUES(required_variables);`;
};
export const generateSelectSQL = (template: EmailTemplate): string => {
const key = generateTemplateKey(template.name);
return `SELECT * FROM email_templates WHERE template_key = '${key}';`;
};
export const generateN8nCode = (template: EmailTemplate): string => {
const varsMap = template.variables.map(v => ` "${v}": "REPLACE_WITH_VALUE"`).join(',\n');
const hasVars = template.variables.length > 0;
return `// n8n Code Node - Template Populator
// 1. Ensure the previous node (SQL) returns the template with 'full_html' column.
// 2. Adjust the 'item.json.full_html' path if your SQL node output is different.
for (const item of items) {
const templateHtml = item.json.full_html;
// Define your dynamic data here
const replacements = {
${hasVars ? varsMap : ' // No variables detected in this template'}
};
let finalHtml = templateHtml;
// Perform replacement
for (const [key, value] of Object.entries(replacements)) {
// Replaces {{key}} globally
finalHtml = finalHtml.replace(new RegExp('{{' + key + '}}', 'g'), value);
}
// Output the processed HTML
item.json.processed_html = finalHtml;
}
return items;`;
};
// Async API calls to replace synchronous localStorage
export const getTemplates = async (): Promise<EmailTemplate[]> => {
try {
const response = await fetch('/api/templates');
if (!response.ok) throw new Error('Failed to fetch');
return await response.json();
} catch (e) {
console.error("Failed to load templates", e);
return [];
}
};
export const saveTemplate = async (template: EmailTemplate): Promise<void> => {
try {
const response = await fetch('/api/templates', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(template),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.message || 'Failed to save');
}
} catch (e) {
console.error("Failed to save template", e);
throw e;
}
};
export const deleteTemplate = async (id: string): Promise<void> => {
try {
const response = await fetch(`/api/templates/${id}`, {
method: 'DELETE',
});
if (!response.ok) throw new Error('Failed to delete');
} catch (e) {
console.error("Failed to delete template", e);
throw e;
}
};

29
tsconfig.json Normal file
View File

@@ -0,0 +1,29 @@
{
"compilerOptions": {
"target": "ES2022",
"experimentalDecorators": true,
"useDefineForClassFields": false,
"module": "ESNext",
"lib": [
"ES2022",
"DOM",
"DOM.Iterable"
],
"skipLibCheck": true,
"types": [
"node"
],
"moduleResolution": "bundler",
"isolatedModules": true,
"moduleDetection": "force",
"allowJs": true,
"jsx": "react-jsx",
"paths": {
"@/*": [
"./*"
]
},
"allowImportingTsExtensions": true,
"noEmit": true
}
}

35
types.ts Normal file
View File

@@ -0,0 +1,35 @@
export interface EmailTemplate {
id: string;
name: string;
description: string;
subject: string;
header: string;
body: string;
footer: string;
variables: string[]; // List of placeholders found in the text
updatedAt: string;
}
export type ViewState = 'dashboard' | 'editor';
export interface ToastMessage {
id: string;
type: 'success' | 'error' | 'info';
text: string;
}
// Simple schema for n8n SQL generation
export const SQL_SCHEMA = `
CREATE TABLE IF NOT EXISTS email_templates (
id INT AUTO_INCREMENT PRIMARY KEY,
template_key VARCHAR(255) UNIQUE NOT NULL,
subject VARCHAR(255),
header_html TEXT,
body_html TEXT,
footer_html TEXT,
full_html TEXT,
required_variables JSON,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
`;

23
vite.config.ts Normal file
View File

@@ -0,0 +1,23 @@
import path from 'path';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, '.', '');
return {
server: {
port: 3000,
host: '0.0.0.0',
},
plugins: [react()],
define: {
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
},
resolve: {
alias: {
'@': path.resolve(__dirname, '.'),
}
}
};
});