import React, { useState } from 'react';
const PersonaGenerator = () => {
// States für Formularfelder
const [position, setPosition] = useState('');
const [positionCustom, setPositionCustom] = useState('');
const [fachbereich, setFachbereich] = useState('');
const [fachbereichCustom, setFachbereichCustom] = useState('');
const [name, setName] = useState('');
const [anrede, setAnrede] = useState('siezen');
const [tonalitaet, setTonalitaet] = useState([]);
const [sprachstil, setSprachstil] = useState('Professionell');
const [antwortlaenge, setAntwortlaenge] = useState('mittel');
const [fachkenntnisse, setFachkenntnisse] = useState([]);
const [weitereFachkenntnisse, setWeitereFachkenntnisse] = useState('');
const [lokalwissen, setLokalwissen] = useState('gut');
const [verwaltungsprozesse, setVerwaltungsprozesse] = useState('fortgeschritten');
const [persoenlichkeit, setPersoenlichkeit] = useState([]);
const [zusatzhinweise, setZusatzhinweise] = useState('');
// State für Tabs
const [activeTab, setActiveTab] = useState('form');
// State für Kopiermeldung
const [showCopySuccess, setShowCopySuccess] = useState(false);
// Generierter Prompt
const [generatedPrompt, setGeneratedPrompt] = useState('');
// Positionen
const positionen = [
{ value: '', label: 'Bitte auswählen...' },
{ value: 'Bürgermeister', label: 'Bürgermeister' },
{ value: 'Erster Stadtrat', label: 'Erster Stadtrat' },
{ value: 'Stadtrat', label: 'Stadtrat' },
{ value: 'Fachbereichsleiter', label: 'Fachbereichsleiter' },
{ value: 'Sachbearbeiter', label: 'Sachbearbeiter' },
{ value: 'Technischer Mitarbeiter', label: 'Technischer Mitarbeiter' },
{ value: 'Verwaltungsangestellter', label: 'Verwaltungsangestellter' },
{ value: 'Auszubildender', label: 'Auszubildender' },
{ value: 'andere', label: 'Andere (bitte spezifizieren)' }
];
// Fachbereiche
const fachbereiche = [
{ value: '', label: 'Bitte auswählen...' },
{ value: 'Allgemeine Verwaltung', label: 'Allgemeine Verwaltung' },
{ value: 'Hauptamt', label: 'Hauptamt' },
{ value: 'Ordnungsamt', label: 'Ordnungsamt' },
{ value: 'Bauamt', label: 'Bauamt' },
{ value: 'Kämmerei', label: 'Kämmerei' },
{ value: 'Standesamt', label: 'Standesamt' },
{ value: 'Sozialamt', label: 'Sozialamt' },
{ value: 'Kulturamt', label: 'Kulturamt' },
{ value: 'Stadtplanung', label: 'Stadtplanung' },
{ value: 'Umweltamt', label: 'Umweltamt' },
{ value: 'Bürgerbüro', label: 'Bürgerbüro' },
{ value: 'andere', label: 'Andere (bitte spezifizieren)' }
];
// Tonalitäten
const tonalitaeten = [
{ id: 'formell', value: 'formell', label: 'Formell' },
{ id: 'freundlich', value: 'freundlich', label: 'Freundlich' },
{ id: 'sachlich', value: 'sachlich', label: 'Sachlich' },
{ id: 'praezise', value: 'präzise', label: 'Präzise' },
{ id: 'direkt', value: 'direkt', label: 'Direkt' },
{ id: 'hilfsbereit', value: 'hilfsbereit', label: 'Hilfsbereit' },
{ id: 'verstaendlich', value: 'verständlich', label: 'Verständlich (für Laien)' }
];
// Sprachstile
const sprachstile = [
{ value: 'Behördendeutsch', label: 'Behördendeutsch' },
{ value: 'Einfache Sprache', label: 'Einfache Sprache' },
{ value: 'Professionell', label: 'Professionell' },
{ value: 'Bürgerfreundlich', label: 'Bürgerfreundlich' },
{ value: 'Technisch/Fachspezifisch', label: 'Technisch/Fachspezifisch' }
];
// Antwortlängen
const antwortlaengen = [
{ value: 'kurz', label: 'Kurz und bündig' },
{ value: 'mittel', label: 'Mittel' },
{ value: 'ausführlich', label: 'Ausführlich' },
{ value: 'variabel', label: 'Variabel (kontextabhängig)' }
];
// Fachkenntnisse
const alleFachkenntnisse = [
{ id: 'verwaltungsrecht', value: 'Verwaltungsrecht', label: 'Verwaltungsrecht' },
{ id: 'baurecht', value: 'Baurecht', label: 'Baurecht' },
{ id: 'finanzwesen', value: 'Finanzwesen/Haushalt', label: 'Finanzwesen/Haushalt' },
{ id: 'umweltrecht', value: 'Umweltrecht', label: 'Umweltrecht' },
{ id: 'sozialrecht', value: 'Sozialrecht', label: 'Sozialrecht' },
{ id: 'personalwesen', value: 'Personalwesen', label: 'Personalwesen' },
{ id: 'buergerservice', value: 'Bürgerservice', label: 'Bürgerservice' },
{ id: 'kulturwesen', value: 'Kultur und Tourismus', label: 'Kultur und Tourismus' },
{ id: 'stadtplanung', value: 'Stadtplanung', label: 'Stadtplanung' }
];
// Lokalwissen
const lokalwissenOptionen = [
{ value: 'umfassend', label: 'Umfassend' },
{ value: 'gut', label: 'Gut' },
{ value: 'grundlegend', label: 'Grundlegend' },
{ value: 'minimal', label: 'Minimal' }
];
// Verwaltungsprozesse
const verwaltungsprozesseOptionen = [
{ value: 'Experte', label: 'Experte' },
{ value: 'fortgeschritten', label: 'Fortgeschritten' },
{ value: 'grundlegend', label: 'Grundlegend' },
{ value: 'lernend', label: 'Lernend/In Ausbildung' }
];
// Persönlichkeitsmerkmale
const persoenlichkeitsmerkmale = [
{ id: 'geduldig', value: 'geduldig', label: 'Geduldig' },
{ id: 'detailorientiert', value: 'detailorientiert', label: 'Detailorientiert' },
{ id: 'loesungsorientiert', value: 'lösungsorientiert', label: 'Lösungsorientiert' },
{ id: 'serviceorientiert', value: 'serviceorientiert', label: 'Serviceorientiert' },
{ id: 'innovativ', value: 'innovativ', label: 'Innovativ' },
{ id: 'traditionsbewusst', value: 'traditionsbewusst', label: 'Traditionsbewusst' }
];
// Handler für Änderungen bei Checkboxgruppen
const handleCheckboxChange = (setter, current, value) => {
if (current.includes(value)) {
setter(current.filter(item => item !== value));
} else {
setter([...current, value]);
}
};
// Fachbereich-Änderung mit Vorauswahl von Fachkenntnissen
const handleFachbereichChange = (e) => {
const value = e.target.value;
setFachbereich(value);
// Vorauswahl von Fachkenntnissen basierend auf Fachbereich
let neueKenntnisse = [];
switch(value) {
case 'Bauamt':
neueKenntnisse = ['Baurecht', 'Stadtplanung'];
break;
case 'Kämmerei':
neueKenntnisse = ['Finanzwesen/Haushalt'];
break;
case 'Ordnungsamt':
neueKenntnisse = ['Verwaltungsrecht'];
break;
case 'Sozialamt':
neueKenntnisse = ['Sozialrecht'];
break;
case 'Umweltamt':
neueKenntnisse = ['Umweltrecht'];
break;
case 'Bürgerbüro':
neueKenntnisse = ['Bürgerservice'];
break;
case 'Kulturamt':
neueKenntnisse = ['Kultur und Tourismus'];
break;
default:
neueKenntnisse = [];
}
setFachkenntnisse(neueKenntnisse);
};
// Prompt generieren
const generatePrompt = () => {
// Grundlegende Informationen sammeln
let finalPosition = position;
if (position === 'andere') {
finalPosition = positionCustom || 'Mitarbeiter';
}
let finalFachbereich = fachbereich;
if (fachbereich === 'andere') {
finalFachbereich = fachbereichCustom || 'allgemeiner Verwaltung';
}
const finalName = name || '[Name]';
// Fachkenntnisse mit weiteren Kenntnissen kombinieren
let alleFachkenntnisseArray = [...fachkenntnisse];
if (weitereFachkenntnisse) {
const zusätzlicheKenntnisse = weitereFachkenntnisse.split(',').map(item => item.trim());
alleFachkenntnisseArray = [...alleFachkenntnisseArray, ...zusätzlicheKenntnisse];
}
// Prompt-Generierung
let prompt = `# ChatGPT-Persona: ${finalName} - ${finalPosition} beim Magistrat der Stadt Oestrich-Winkel\n\n`;
prompt += `## Rollenidentität\n`;
prompt += `Du bist ${finalName}, ${finalPosition} im Fachbereich ${finalFachbereich} des Magistrats der Stadt Oestrich-Winkel. `;
// Fachliche Expertise
if (alleFachkenntnisseArray.length > 0) {
prompt += `Du verfügst über besondere Expertise in den Bereichen ${alleFachkenntnisseArray.join(', ')}. `;
}
prompt += `Deine Kenntnis der Verwaltungsprozesse ist auf ${verwaltungsprozesse}em Niveau und dein Lokalwissen zu Oestrich-Winkel ist ${lokalwissen}.\n\n`;
// Kommunikationsstil
prompt += `## Kommunikationsstil\n`;
if (anrede === 'siezen') {
prompt += `- Du sprichst die Bürgerinnen und Bürger stets mit 'Sie' an.\n`;
} else if (anrede === 'duzen') {
prompt += `- Du sprichst die Bürgerinnen und Bürger mit 'Du' an.\n`;
} else {
prompt += `- Du vermeidest direkte Anreden und formulierst neutral.\n`;
}
if (tonalitaet.length > 0) {
prompt += `- Dein Ton ist ${tonalitaet.join(', ')}.\n`;
}
prompt += `- Du verwendest einen ${sprachstil} Sprachstil.\n`;
if (antwortlaenge === 'kurz') {
prompt += `- Deine Antworten sind kurz und bündig gehalten.\n`;
} else if (antwortlaenge === 'mittel') {
prompt += `- Deine Antworten sind von mittlerer Länge und enthalten alle wichtigen Informationen.\n`;
} else if (antwortlaenge === 'ausführlich') {
prompt += `- Deine Antworten sind ausführlich mit allen Details und Hintergrundinformationen.\n`;
} else {
prompt += `- Die Länge deiner Antworten passt du dem jeweiligen Kontext an.\n`;
}
// Persönlichkeitsmerkmale
if (persoenlichkeit.length > 0) {
prompt += `\n## Persönlichkeitsmerkmale\n`;
prompt += `Du bist ${persoenlichkeit.join(', ')}.\n`;
}
// Zusätzliche Hinweise
if (zusatzhinweise) {
prompt += `\n## Zusätzliche Hinweise\n`;
prompt += `${zusatzhinweise}\n`;
}
// Allgemeine Richtlinien
prompt += `\n## Allgemeine Richtlinien\n`;
prompt += `- Du repräsentierst die Stadt Oestrich-Winkel und den Magistrat in deiner Kommunikation.\n`;
prompt += `- Deine Informationen basieren auf dem geltenden Recht und den Verordnungen der Stadt Oestrich-Winkel.\n`;
prompt += `- Bei Unklarheiten weist du darauf hin, dass du keine rechtsverbindlichen Auskünfte erteilen kannst.\n`;
prompt += `- Du beachtest den Datenschutz und gibst keine personenbezogenen Daten preis.\n`;
prompt += `- Du hilfst Bürgerinnen und Bürgern, sich im Behördendschungel zurechtzufinden.\n`;
prompt += `- Du bemühst dich, Verwaltungsprozesse transparent und verständlich zu erklären.\n`;
setGeneratedPrompt(prompt);
setActiveTab('output');
};
// Formular zurücksetzen
const resetForm = () => {
setPosition('');
setPositionCustom('');
setFachbereich('');
setFachbereichCustom('');
setName('');
setAnrede('siezen');
setTonalitaet([]);
setSprachstil('Professionell');
setAntwortlaenge('mittel');
setFachkenntnisse([]);
setWeitereFachkenntnisse('');
setLokalwissen('gut');
setVerwaltungsprozesse('fortgeschritten');
setPersoenlichkeit([]);
setZusatzhinweise('');
};
// In Zwischenablage kopieren
const copyToClipboard = () => {
navigator.clipboard.writeText(generatedPrompt).then(() => {
setShowCopySuccess(true);
setTimeout(() => setShowCopySuccess(false), 3000);
});
};
return (
{activeTab === 'form' ? (
OW
Persona-Generator für ChatGPT
Magistrat der Stadt Oestrich-Winkel
{/* Grundlegende Informationen */}
{/* Kommunikationsstil */}
{/* Fachliche Expertise */}
{/* Zusätzliche Einstellungen */}
Grundlegende Informationen
{position === 'andere' && (
setPositionCustom(e.target.value)}
/>
)}
{fachbereich === 'andere' && (
setFachbereichCustom(e.target.value)}
/>
)}
setName(e.target.value)}
/>
Kommunikationsstil
{tonalitaeten.map(option => (
handleCheckboxChange(setTonalitaet, tonalitaet, option.value)}
className="mr-2"
/>
))}
Fachliche Expertise
{alleFachkenntnisse.map(option => (
handleCheckboxChange(setFachkenntnisse, fachkenntnisse, option.value)}
className="mr-2"
/>
))}
setWeitereFachkenntnisse(e.target.value)}
/>
Zusätzliche Einstellungen
{persoenlichkeitsmerkmale.map(option => (
handleCheckboxChange(setPersoenlichkeit, persoenlichkeit, option.value)}
className="mr-2"
/>
))}