import React, { useState, useEffect, useRef } from ‚react‘;
import {
Users,
BookOpen,
CheckCircle,
MessageSquare,
Send,
X,
ChevronRight,
Award,
Calendar,
ShieldCheck,
Sparkles,
Menu,
Phone,
FileText,
Clock,
ChevronDown,
Info,
ExternalLink,
ShoppingBag,
Mail,
Search
} from ‚lucide-react‘;
const apiKey = „“;
const OFFICIAL_HOTLINE = „0800 13 50 13 5“;
const SEMINAR_URL = „https://www.betriebsrat-aktuell.de/start-up-workshop-fuer-das-neue-gremium/“;
// Komponente für strukturierte und interaktive Nachrichten
const FormattedMessage = ({ content }) => {
const lines = content.split(‚\n‘);
return (
Wachsen Sie als
{/* Benefits Bar */}
{/* Main Info Section */}
Handlungsfähig
{/* Modal: Agenda Configurator */}
{showAgendaTool && (
{lines.map((line, index) => {
// Logik für Action-Buttons [ACTION_BTN:Label](URL)
const btnMatch = line.match(/\[ACTION_BTN:(.*?)\]\((.*?)\)/);
if (btnMatch) {
const label = btnMatch[1];
const url = btnMatch[2];
return (
);
}
// Hotline-Box Logik
if (line.includes(‚Hotline:‘)) {
return (
);
};
const App = () => {
const [isAiOpen, setIsAiOpen] = useState(true);
const [chatMessages, setChatMessages] = useState([
{
role: ‚assistant‘,
content: `**Herzlich willkommen!**\n\nIch bin Ihr KI-Experte für den **Start-up-Workshop**. Wie kann ich Ihr Gremium heute unterstützen?\n\nHotline: ${OFFICIAL_HOTLINE}\n\n[ACTION_BTN:Seminarinhalt](${SEMINAR_URL})\n[ACTION_BTN:Angebot anfordern](https://www.betriebsrat-aktuell.de/inhouse-anfrage/)`
}
]);
const [userInput, setUserInput] = useState(“);
const [isLoading, setIsLoading] = useState(false);
const [showAgendaTool, setShowAgendaTool] = useState(false);
const [agendaInput, setAgendaInput] = useState(“);
const [generatedAgenda, setGeneratedAgenda] = useState(“);
const [isGeneratingAgenda, setIsGeneratingAgenda] = useState(false);
const [showLetterTool, setShowLetterTool] = useState(false);
const [letterData, setLetterData] = useState({ brName: “, employer: “, date: “ });
const [generatedLetter, setGeneratedLetter] = useState(“);
const [isGeneratingLetter, setIsGeneratingLetter] = useState(false);
const scrollRef = useRef(null);
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [chatMessages]);
const callGemini = async (query, systemPrompt) => {
let retries = 0;
const maxRetries = 5;
while (retries < maxRetries) {
try {
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
contents: [{ parts: [{ text: query }] }],
systemInstruction: { parts: [{ text: systemPrompt }] }
})
});
if (!response.ok) throw new Error('API Error');
const data = await response.json();
return data.candidates?.[0]?.content?.parts?.[0]?.text || "Fehler bei der Kommunikation.";
} catch (error) {
retries++;
await new Promise(resolve => setTimeout(resolve, Math.pow(2, retries) * 1000));
}
}
return „Verbindung fehlgeschlagen.“;
};
const handleSendMessage = async () => {
if (!userInput.trim()) return;
const newMessages = […chatMessages, { role: ‚user‘, content: userInput }];
setChatMessages(newMessages);
setUserInput(“);
setIsLoading(true);
const systemPrompt = `Du bist der offizielle KI-Seminarberater von ‚betriebsrat-aktuell.de‘.
Ziel: Beratung für den ‚Start-up-Workshop für das neue Gremium‘.
WICHTIGE REGELN:
1. HOTLINE: Inkludiere IMMER am Ende: „Hotline: ${OFFICIAL_HOTLINE}“.
2. BUTTONS:
– Falls du Termine (Webinar/Präsenz) nennst, nutze [ACTION_BTN:Seminar buchen](${SEMINAR_URL}).
– Falls KEINE Termine genannt werden, nutze [ACTION_BTN:Seminarinhalt](${SEMINAR_URL}).
– In JEDER Antwort: [ACTION_BTN:Angebot anfordern](https://www.betriebsrat-aktuell.de/inhouse-anfrage/).
3. STRUKTUR: Nutze Überschriften (mit : am Ende), Listen und Fettdruck. Bleib kompakt.
Sprache: Deutsch. Professionell und zielorientiert.`;
const aiResponse = await callGemini(userInput, systemPrompt);
setChatMessages([…newMessages, { role: ‚assistant‘, content: aiResponse }]);
setIsLoading(false);
};
const generateCustomAgenda = async () => {
setIsGeneratingAgenda(true);
const systemPrompt = `Erstelle einen kompakten 2-Tage-Workshop-Ablaufplan. Nutze Zeitangaben und Stichpunkte. Sprache: Deutsch.`;
const response = await callGemini(`Herausforderungen: ${agendaInput}`, systemPrompt);
setGeneratedAgenda(response);
setIsGeneratingAgenda(false);
};
const generateLegalLetter = async () => {
setIsGeneratingLetter(true);
const systemPrompt = `Erstelle ein formelles Schreiben nach § 37 Abs. 6 BetrVG. Sprache: Deutsch.`;
const query = `BR: ${letterData.brName}, AG: ${letterData.employer}, Datum: ${letterData.date}`;
const response = await callGemini(query, systemPrompt);
setGeneratedLetter(response);
setIsGeneratingLetter(false);
};
return (
Persönliche Beratung
{OFFICIAL_HOTLINE}
{renderLineContent}
);
}
if (line.trim().endsWith(‚:‘) && line.length < 50) {
return {renderLineContent}
;
}
return {renderLineContent}
; })}
Wachsen Sie als
Team zusammen
Der Start-up-Workshop ist der wichtigste Termin für Ihr neu gewähltes Gremium. Wir machen Sie handlungsfähig.
Workshop-KI
Custom Agenda Planer
{[
{ icon:
{item.icon}
{item.title}
{item.desc}
Handlungsfähig
ab dem ersten Tag.
Gehen Sie keine Kompromisse ein. Ein neu gewähltes Gremium braucht Struktur. Unser Workshop bietet den geschützten Rahmen für Ihre Zukunftsplanung.
{[
{t: „Rechtssichere Beschlussfassung“, d: „Fehler am Anfang können teuer werden.“},
{t: „Gemeinsame Jahresstrategie“, d: „Ziele definieren und Erfolge messbar machen.“},
{t: „Starke Team-Identität“, d: „Vertrauen aufbauen, Differenzen klären.“}
].map((item, i) => (
{item.t}
{item.d}
Beschreiben Sie Ihre aktuelle Situation (Gremiumsgröße, Branche, Schwerpunkte), damit die KI eine maßgeschneiderte Agenda erstellen kann.