From 576becceff0991e0b8eb00f9ebba43c565315173 Mon Sep 17 00:00:00 2001
From: wm <wm@botkonzept.de>
Date: Tue, 17 Mar 2026 13:48:05 +0100
Subject: [PATCH] fix: Seitenscroll beim Chat-Senden behoben
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

scrollIntoView durch scrollTop = scrollHeight auf dem Container-Ref ersetzt,
damit nur der Chatbereich scrollt. type="button" am Send-Button ergänzt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/HeroSalesChat.tsx          | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/landing-react/src/components/HeroSalesChat.tsx b/landing-react/src/components/HeroSalesChat.tsx
index 5717cb4..44579c7 100644
--- a/landing-react/src/components/HeroSalesChat.tsx
+++ b/landing-react/src/components/HeroSalesChat.tsx
@@ -3,7 +3,7 @@ import { Bot, Circle, Send, AlertCircle } from 'lucide-react'
 import { useChatSession } from '../hooks/useChatSession'
 
 // ─── Webhook-Endpunkt ────────────────────────────────────────────────────────
-const WEBHOOK_URL = 'HIER_N8N_CHAT_WEBHOOK_EINTRAGEN'
+const WEBHOOK_URL = 'https://n8n.zq0.de/webhook-test/chat-echo'
 // ────────────────────────────────────────────────────────────────────────────
 
 interface Message {
@@ -24,11 +24,14 @@ export default function HeroSalesChat() {
   const [input, setInput] = useState('')
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const bottomRef = useRef<HTMLDivElement>(null)
 
-  // Automatisch zum neuesten Eintrag scrollen
+  // Ref auf den scrollbaren Container – nicht auf einen inneren Anker.
+  // scrollTop = scrollHeight scrollt nur diesen Container, nicht die Seite.
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+    const el = scrollAreaRef.current
+    if (el) el.scrollTop = el.scrollHeight
   }, [messages, isLoading])
 
   const sendMessage = async () => {
@@ -56,7 +59,6 @@ export default function HeroSalesChat() {
 
       if (contentType.includes('application/json')) {
         const data = await res.json()
-        // Bekannte Antwortformate abfangen
         botText =
           data?.message ??
           data?.text ??
@@ -101,7 +103,10 @@ export default function HeroSalesChat() {
       </div>
 
       {/* ── Nachrichtenbereich ── */}
-      <div className="px-5 py-5 flex flex-col gap-3 overflow-y-auto min-h-[280px] max-h-[320px]">
+      <div
+        ref={scrollAreaRef}
+        className="px-5 py-5 flex flex-col gap-3 overflow-y-auto min-h-[280px] max-h-[320px]"
+      >
         {messages.map((msg) =>
           msg.role === 'bot' ? (
             <div
@@ -136,9 +141,6 @@ export default function HeroSalesChat() {
             <span>{error}</span>
           </div>
         )}
-
-        {/* Scroll-Anker */}
-        <div ref={bottomRef} />
       </div>
 
       {/* ── Eingabe ── */}
@@ -153,6 +155,7 @@ export default function HeroSalesChat() {
           className="flex-1 px-4 py-3 border border-gray-300 rounded-full text-[0.9375rem] outline-none focus:border-primary transition-colors disabled:opacity-50"
         />
         <button
+          type="button"
           onClick={sendMessage}
           disabled={isLoading || !input.trim()}
           className="w-11 h-11 rounded-full text-white flex items-center justify-center flex-shrink-0 transition-transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"