Add files via upload
This commit is contained in:
fcarraUniSa
43
Dockerfile.txt
Normal file
43
Dockerfile.txt
Normal 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
22
README.md
@@ -1,2 +1,20 @@
|
||||
# EmailManager
|
||||
Email manager UniSa
|
||||
<div align="center">
|
||||
<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
206
components/RichTextEditor.tsx
Normal 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
440
components/TemplateEditor.tsx
Normal 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>© 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">×</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
158
components/TemplateList.tsx
Normal 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 →
|
||||
</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
19
docker-compose.yml
Normal 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
75
index.html
Normal 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
15
index.tsx
Normal 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
5
metadata.json
Normal 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
32
package.json
Normal 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
194
server.js
Normal 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
53
services/geminiService.ts
Normal 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
106
services/storage.ts
Normal 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
29
tsconfig.json
Normal 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
35
types.ts
Normal 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
23
vite.config.ts
Normal 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, '.'),
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user