AI Chatbot in 5 Minuten.

import { useState, useRef, useEffect } from "react";

/**
 * Support Bot — AI Chatbot Widget
 * Generated with thenotperfect.de/tools/chatbot-builder
 */
export default function Chatbot() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState([
    { role: "assistant", content: "Hi! Wie kann ich dir heute helfen?" },
  ]);
  const [input, setInput] = useState("");
  const [streaming, setStreaming] = useState(false);
  const [streamText, setStreamText] = useState("");
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, streamText]);

  async function send(content) {
    if (!content.trim() || streaming) return;
    const next = [...messages, { role: "user", content: content.trim() }];
    setMessages(next);
    setInput("");
    setStreaming(true);
    setStreamText("");

    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ messages: next }),
      });
      if (!res.ok || !res.body) throw new Error("Request failed");

      const reader = res.body.getReader();
      const decoder = new TextDecoder();
      let acc = "";
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        acc += decoder.decode(value, { stream: true });
        setStreamText(acc);
      }
      setMessages([...next, { role: "assistant", content: acc }]);
      setStreamText("");
    } catch (err) {
      setMessages([...next, { role: "assistant", content: "Entschuldige, da ging was schief." }]);
    } finally {
      setStreaming(false);
    }
  }

  return (
    <div className="fixed bottom-5 right-5 z-50">
      
      {!open && (
        <button
          onClick={() => setOpen(true)}
          style={{ background: "var(--color-accent-500)", color: "#0a0a0f" }}
          className="flex items-center gap-2 rounded-full px-5 py-3 font-semibold shadow-2xl hover:scale-105 transition-transform"
        >
          💬 Support Bot
        </button>
      )}
      
      {open && (
        <div
          style={{ background: "#ffffff", color: "#0a0a0f" }}
          className="w-[380px] h-[560px] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
          {/* Header */}
          <div
            style={{ background: "var(--color-accent-500)", color: "#0a0a0f" }}
            className="flex items-center justify-between px-4 py-3"
          >
            <div className="font-semibold">Support Bot</div>
            <button onClick={() => setOpen(false)} className="text-lg">×</button>
          </div>

          {/* Messages */}
          <div ref={scrollRef} className="flex-1 overflow-y-auto p-4 space-y-3">
            {messages.map((m, i) => (
              <div key={i} className={`flex ${m.role === "user" ? "justify-end" : "justify-start"}`}>
                <div
                  style={m.role === "user" ? { background: "var(--color-accent-500)", color: "#0a0a0f" } : undefined}
                  className={`max-w-[80%] rounded-2xl px-3 py-2 text-sm ${m.role !== "user" ? "bg-gray-100 text-gray-900" : ""}`}
                >
                  {m.content}
                </div>
              </div>
            ))}
            {streaming && (
              <div className="flex justify-start">
                <div className="max-w-[80%] rounded-2xl px-3 py-2 text-sm bg-gray-100 text-gray-900">
                  {streamText || "..."}
                </div>
              </div>
            )}
          </div>

          {/* Input */}
          <form
            onSubmit={(e) => { e.preventDefault(); send(input); }}
            className="border-t p-3 flex gap-2"
          >
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Deine Frage..."
              disabled={streaming}
              className="flex-1 rounded-lg border px-3 py-2 text-sm outline-none text-gray-900"
            />
            <button
              type="submit"
              disabled={streaming || !input.trim()}
              style={{ background: "var(--color-accent-500)", color: "#0a0a0f" }}
              className="rounded-lg px-4 py-2 text-sm font-semibold disabled:opacity-50"
            >
              →
            </button>
          </form>
        </div>
      )}
    </div>
  );
}

// Support Bot — Next.js App Router API Route
// Datei: app/api/chat/route.ts
// Generated with thenotperfect.de/tools/chatbot-builder

// Install: npm i @anthropic-ai/sdk

import Anthropic from "@anthropic-ai/sdk";

export const runtime = "nodejs";
export const maxDuration = 60;

const SYSTEM_PROMPT = `Du bist der Support-Chatbot von [Firma]. Beantworte Fragen zu:
- Unseren Produkten und Services
- Bestellstatus, Versand, Rückgabe
- Technische Fragen

Regeln:
- Freundlich und hilfsbereit
- Bei komplexen Fragen: Weiterleitung an hello@firma.de
- Keine medizinischen oder rechtlichen Ratschläge
- Antworte kurz und klar (max. 3-4 Sätze)`;

export async function POST(req: Request) {
  const body = await req.json().catch(() => ({}));
  const messages = Array.isArray(body?.messages) ? body.messages.slice(-20) : [];
  if (messages.length === 0) return new Response("No messages", { status: 400 });

  const apiKey = process.env.ANTHROPIC_API_KEY;
  if (!apiKey) return new Response("API-Key nicht konfiguriert", { status: 500 });

  const client = new Anthropic({ apiKey });

  try {
    
    const stream = await client.messages.stream({
      model: "claude-haiku-4-5-20251001",
      max_tokens: 1024,
      system: SYSTEM_PROMPT,
      messages,
    });
    const encoder = new TextEncoder();
    const readable = new ReadableStream({
      async start(controller) {
        for await (const event of stream) {
          if (event.type === "content_block_delta" && event.delta.type === "text_delta") {
            controller.enqueue(encoder.encode(event.delta.text));
          }
        }
        controller.close();
      },
    });
    
    return new Response(readable, {
      headers: { "Content-Type": "text/plain; charset=utf-8", "Cache-Control": "no-cache" },
    });
  } catch (err) {
    return new Response("AI error", { status: 500 });
  }
}