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

Update TemplateEditor.tsx

Browse Source
This commit is contained in:
fcarraUniSa
2025-12-11 14:09:35 +01:00
committed by GitHub
parent 6caaa06576
commit 646276698e
1 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
components/TemplateEditor.tsx
View File

@@ -15,22 +15,22 @@ interface Props {
} }
const DEFAULT_HEADER = `<div style="background-color: #f8fafc; padding: 20px; text-align: center;"> const DEFAULT_HEADER = `<div style="background-color: #f8fafc; padding: 20px; text-align: center;">
<h1 style="color: #334155; margin: 0;">My Company</h1> <h1 style="color: #334155; margin: 0;">La Mia Azienda</h1>
</div>`; </div>`;
const DEFAULT_BODY = `<div style="padding: 20px; color: #334155; font-family: sans-serif;"> const DEFAULT_BODY = `<div style="padding: 20px; color: #334155; font-family: sans-serif;">
<p>Gentile {{first_name}},</p> <p>Gentile {{first_name}},</p>
<p>This is a default message body.</p> <p>Questo è un messaggio di default.</p>
</div>`; </div>`;
const DEFAULT_FOOTER = `<div style="background-color: #f1f5f9; padding: 15px; text-align: center; font-size: 12px; color: #64748b;"> 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> <p>&copy; 2024 La Mia Azienda. Tutti i diritti riservati.</p>
</div>`; </div>`;
const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => { const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
const [name, setName] = useState(initialTemplate?.name || 'New Template'); const [name, setName] = useState(initialTemplate?.name || 'Nuovo Template');
const [description, setDescription] = useState(initialTemplate?.description || ''); const [description, setDescription] = useState(initialTemplate?.description || '');
const [subject, setSubject] = useState(initialTemplate?.subject || 'Welcome to our service'); const [subject, setSubject] = useState(initialTemplate?.subject || 'Benvenuti nel nostro servizio');
const [header, setHeader] = useState(initialTemplate?.header || DEFAULT_HEADER); const [header, setHeader] = useState(initialTemplate?.header || DEFAULT_HEADER);
const [body, setBody] = useState(initialTemplate?.body || DEFAULT_BODY); const [body, setBody] = useState(initialTemplate?.body || DEFAULT_BODY);
@@ -67,8 +67,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
const newKey = generateTemplateKey(name); const newKey = generateTemplateKey(name);
if (!newKey) { if (!newKey) {
setNameError('Template name cannot be empty or symbols only.'); setNameError('Il nome del template non può essere vuoto o contenere solo simboli.');
alert('Template name cannot be empty.'); alert('Il nome del template non può essere vuoto.');
return; return;
} }
@@ -83,8 +83,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
}); });
if (isDuplicate) { if (isDuplicate) {
setNameError('A template with this name already exists.'); setNameError('Esiste già un template con questo nome.');
alert('A template with this name (or resulting ID) already exists. Please choose a unique name.'); alert('Un template con questo nome (o ID risultante) esiste già. Per favore scegli un nome univoco.');
setIsSaving(false); setIsSaving(false);
return; return;
} }
@@ -103,7 +103,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
await saveTemplate(newTemplate); await saveTemplate(newTemplate);
onSave(); onSave();
} catch (e) { } catch (e) {
alert("Failed to save template. Check server logs."); alert("Impossibile salvare il template. Controlla i log del server.");
} finally { } finally {
setIsSaving(false); setIsSaving(false);
} }
@@ -120,14 +120,14 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
setShowAiModal(false); setShowAiModal(false);
setAiPrompt(''); setAiPrompt('');
} catch (e) { } catch (e) {
alert("Error generating content. Please check API Key configuration."); alert("Errore nella generazione del contenuto. Controlla la configurazione della API Key.");
} finally { } finally {
setIsGenerating(false); setIsGenerating(false);
} }
}; };
const tempTemplateObj = { const tempTemplateObj = {
id: initialTemplate?.id || 'PREVIEW', id: initialTemplate?.id || 'ANTEPRIMA',
name, name,
description, description,
subject, subject,
@@ -158,6 +158,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
} }
}; };
// Maps internal tab keys to Italian display names
const tabNames: Record<string, string> = {
header: 'Testata',
body: 'Corpo',
footer: 'Piè di pagina'
};
return ( return (
<div className="flex flex-col h-screen bg-slate-50"> <div className="flex flex-col h-screen bg-slate-50">
{/* Top Bar */} {/* Top Bar */}
@@ -168,7 +175,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
</button> </button>
<div> <div>
<h1 className="text-xl font-bold text-slate-800"> <h1 className="text-xl font-bold text-slate-800">
{initialTemplate ? 'Edit Template' : 'Create Template'} {initialTemplate ? 'Modifica Template' : 'Crea Template'}
</h1> </h1>
</div> </div>
</div> </div>
@@ -178,7 +185,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
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" 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} /> <Database size={18} />
Integration Integrazione
</button> </button>
<button <button
onClick={handleSave} onClick={handleSave}
@@ -186,7 +193,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
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' : ''}`} 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} /> <Save size={18} />
{isSaving ? 'Saving...' : 'Save Template'} {isSaving ? 'Salvataggio...' : 'Salva Template'}
</button> </button>
</div> </div>
</header> </header>
@@ -199,25 +206,25 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
{/* Metadata */} {/* Metadata */}
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-sm font-semibold text-slate-700 mb-1">Template Name</label> <label className="block text-sm font-semibold text-slate-700 mb-1">Nome Template</label>
<input <input
type="text" type="text"
value={name} value={name}
onChange={e => setName(e.target.value)} 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'}`} 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" placeholder="es. Email di Benvenuto"
/> />
{nameError && <p className="text-red-500 text-xs mt-1">{nameError}</p>} {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> <p className="text-xs text-slate-400 mt-1">Deve essere univoco. Usato per generare la chiave DB: <span className="font-mono bg-slate-100 px-1">{generateTemplateKey(name) || '...'}</span></p>
</div> </div>
<div> <div>
<label className="block text-sm font-semibold text-slate-700 mb-1">Email Subject</label> <label className="block text-sm font-semibold text-slate-700 mb-1">Oggetto Email</label>
<input <input
type="text" type="text"
value={subject} value={subject}
onChange={e => setSubject(e.target.value)} 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" 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}})" placeholder="Oggetto... (supporta {{placeholder}})"
/> />
</div> </div>
</div> </div>
@@ -225,11 +232,11 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
{/* Variable Manager */} {/* Variable Manager */}
<div className="bg-slate-50 p-4 rounded-lg border border-slate-200"> <div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
<div className="flex items-center justify-between mb-2"> <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 font-bold text-slate-500 uppercase tracking-wider">Variabili Attive</span>
<span className="text-xs text-slate-400">Auto-detected from text</span> <span className="text-xs text-slate-400">Rilevate automaticamente dal testo</span>
</div> </div>
<div className="flex flex-wrap gap-2"> <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.length === 0 && <span className="text-sm text-slate-400 italic">Nessuna variabile rilevata. Scrivi {'{{nome}}'} per aggiungerne una.</span>}
{detectedVars.map(v => ( {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"> <span key={v} className="px-2 py-1 bg-brand-100 text-brand-700 text-sm rounded border border-brand-200 font-mono">
{`{{${v}}}`} {`{{${v}}}`}
@@ -250,7 +257,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
: 'text-slate-500 hover:text-slate-700' : 'text-slate-500 hover:text-slate-700'
}`} }`}
> >
{tab} {tabNames[tab]}
</button> </button>
))} ))}
</div> </div>
@@ -258,14 +265,14 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
{/* Editor Area */} {/* Editor Area */}
<div className="relative"> <div className="relative">
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<label className="text-sm font-semibold text-slate-700">Content Editor</label> <label className="text-sm font-semibold text-slate-700">Editor Contenuti</label>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
onClick={() => setShowAiModal(true)} 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" 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} /> <Wand2 size={14} />
Generate with AI Genera con IA
</button> </button>
</div> </div>
</div> </div>
@@ -275,13 +282,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
key={activeTab} // Force remount on tab change to sync contentEditable key={activeTab} // Force remount on tab change to sync contentEditable
value={getActiveContent()} value={getActiveContent()}
onChange={setActiveContent} onChange={setActiveContent}
placeholder={`Design your ${activeTab} here...`} placeholder={`Crea qui la sezione ${tabNames[activeTab]}...`}
className="h-full shadow-sm" className="h-full shadow-sm"
/> />
</div> </div>
<p className="mt-2 text-xs text-slate-500"> <p className="mt-2 text-xs text-slate-500">
Use the "Variable" button in the toolbar to insert placeholders like {'{{name}}'}. Usa il pulsante "Variabile" nella toolbar per inserire placeholder come {'{{nome}}'}.
</p> </p>
</div> </div>
</div> </div>
@@ -291,10 +298,10 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
<div className="w-1/2 bg-slate-100 flex flex-col overflow-hidden"> <div className="w-1/2 bg-slate-100 flex flex-col overflow-hidden">
<div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10 shrink-0"> <div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10 shrink-0">
<span className="font-semibold text-slate-600 flex items-center gap-2"> <span className="font-semibold text-slate-600 flex items-center gap-2">
<Eye size={18} /> Live Preview <Eye size={18} /> Anteprima Live
</span> </span>
<div className="text-xs text-slate-400"> <div className="text-xs text-slate-400">
Renders as standard HTML Renderizzato come HTML standard
</div> </div>
</div> </div>
{/* Scrollable container: flex-1 ensures it takes available space, overflow-y-auto enables scrolling */} {/* Scrollable container: flex-1 ensures it takes available space, overflow-y-auto enables scrolling */}
@@ -303,7 +310,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
<div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col mx-auto"> <div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col mx-auto">
{/* Simulate Subject Line in Preview */} {/* Simulate Subject Line in Preview */}
<div className="bg-slate-50 border-b border-slate-100 p-4"> <div className="bg-slate-50 border-b border-slate-100 p-4">
<span className="text-xs font-bold text-slate-400 uppercase">Subject:</span> <span className="text-xs font-bold text-slate-400 uppercase">Oggetto:</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> <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> </div>
@@ -323,7 +330,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-bold text-slate-800 flex items-center gap-2"> <h3 className="text-lg font-bold text-slate-800 flex items-center gap-2">
<Database size={20} className="text-brand-600"/> <Database size={20} className="text-brand-600"/>
Integration Details Dettagli Integrazione
</h3> </h3>
<button onClick={() => setShowSqlModal(false)} className="text-slate-400 hover:text-slate-600"> <button onClick={() => setShowSqlModal(false)} className="text-slate-400 hover:text-slate-600">
<span className="text-2xl">&times;</span> <span className="text-2xl">&times;</span>
@@ -334,7 +341,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
{/* INSERT Section */} {/* INSERT Section */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div> <div>
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">1. Setup (Run once in DB)</label> <label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">1. Setup (Esegui una volta nel DB)</label>
<div className="relative"> <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"> <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
{currentInsertSql} {currentInsertSql}
@@ -342,7 +349,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
<button <button
onClick={() => navigator.clipboard.writeText(currentInsertSql)} onClick={() => navigator.clipboard.writeText(currentInsertSql)}
className="absolute top-2 right-2 p-2 bg-slate-700 text-white rounded hover:bg-slate-600" className="absolute top-2 right-2 p-2 bg-slate-700 text-white rounded hover:bg-slate-600"
title="Copy INSERT SQL" title="Copia SQL INSERT"
> >
<Copy size={16} /> <Copy size={16} />
</button> </button>
@@ -350,7 +357,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
</div> </div>
<div> <div>
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">2. Fetch (n8n SQL Node)</label> <label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">2. Recupero (Nodo SQL n8n)</label>
<div className="relative"> <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"> <pre className="bg-slate-800 text-slate-50 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
{currentSelectSql} {currentSelectSql}
@@ -358,7 +365,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
<button <button
onClick={() => navigator.clipboard.writeText(currentSelectSql)} onClick={() => navigator.clipboard.writeText(currentSelectSql)}
className="absolute top-2 right-2 p-2 bg-slate-600 text-white rounded hover:bg-slate-500" className="absolute top-2 right-2 p-2 bg-slate-600 text-white rounded hover:bg-slate-500"
title="Copy SELECT SQL" title="Copia SQL SELECT"
> >
<Copy size={16} /> <Copy size={16} />
</button> </button>
@@ -370,7 +377,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
<div> <div>
<label className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2 flex items-center gap-2"> <label className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2 flex items-center gap-2">
<Code size={16} /> <Code size={16} />
3. Populate (n8n Code Node) 3. Popolamento (Nodo Codice n8n)
</label> </label>
<div className="relative"> <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"> <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">
@@ -379,13 +386,13 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
<button <button
onClick={() => navigator.clipboard.writeText(currentN8nCode)} 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" 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" title="Copia Codice JS"
> >
<Copy size={16} /> <Copy size={16} />
</button> </button>
</div> </div>
<p className="text-xs text-slate-500 mt-2"> <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>). Incolla questo codice in un <strong>Nodo Code</strong> collegato dopo il tuo nodo SQL. Sostituisci <code>REPLACE_WITH_VALUE</code> con le variabili reali (es. <code>$('NodeName').item.json.name</code>).
</p> </p>
</div> </div>
</div> </div>
@@ -399,15 +406,15 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
<div className="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6"> <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"> <h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
<Wand2 className="text-purple-600"/> <Wand2 className="text-purple-600"/>
AI Content Generator Generatore Contenuti IA
</h3> </h3>
<p className="text-sm text-slate-600 mb-4"> <p className="text-sm text-slate-600 mb-4">
Describe what you want for the <strong>{activeTab}</strong> section. Descrivi cosa vuoi per la sezione <strong>{tabNames[activeTab]}</strong>.
The AI will generate HTML code with placeholders. L'IA genererà il codice HTML con i placeholder necessari.
</p> </p>
<textarea <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" 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." placeholder="es. Scrivi una notifica gentile che avvisi l'utente del cambio password avvenuto con successo. Includi un placeholder per il nome utente."
value={aiPrompt} value={aiPrompt}
onChange={(e) => setAiPrompt(e.target.value)} onChange={(e) => setAiPrompt(e.target.value)}
/> />
@@ -416,20 +423,20 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
onClick={() => setShowAiModal(false)} onClick={() => setShowAiModal(false)}
className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded" className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded"
> >
Cancel Annulla
</button> </button>
<button <button
onClick={handleAiGenerate} onClick={handleAiGenerate}
disabled={isGenerating || !aiPrompt} 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' : ''}`} 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 ? 'Generazione...' : 'Genera HTML'}
{!isGenerating && <Wand2 size={16} />} {!isGenerating && <Wand2 size={16} />}
</button> </button>
</div> </div>
{!process.env.API_KEY && ( {!process.env.API_KEY && (
<p className="mt-3 text-xs text-red-500"> <p className="mt-3 text-xs text-red-500">
Note: API_KEY not detected in environment. This feature requires a Gemini API key. Nota: API_KEY non rilevata nell'ambiente. Questa funzione richiede una chiave API Gemini.
</p> </p>
)} )}
</div> </div>