fix: Fokus-Problem im Chat und React-Key-Warning behoben

- HeroSalesChat: focus() via useEffect nach isLoading=false,
  damit der Input nicht mehr disabled ist beim Fokussieren
- Steps: Fragment-Key gesetzt, überflüssigen Key auf innerem div entfernt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wm
2026-03-17 14:12:29 +01:00
parent 43c08eafae
commit 9ce734e4f8
2 changed files with 9 additions and 8 deletions
@@ -35,13 +35,17 @@ export default function HeroSalesChat() {
if (el) el.scrollTop = el.scrollHeight if (el) el.scrollTop = el.scrollHeight
}, [messages, isLoading]) }, [messages, isLoading])
// Fokus zurück ins Eingabefeld sobald isLoading endet (Input ist dann wieder aktiv)
useEffect(() => {
if (!isLoading) inputRef.current?.focus()
}, [isLoading])
const sendMessage = async () => { const sendMessage = async () => {
const text = input.trim() const text = input.trim()
if (!text || isLoading) return if (!text || isLoading) return
setInput('') setInput('')
setError(null) setError(null)
inputRef.current?.focus()
const userMsg: Message = { id: crypto.randomUUID(), role: 'user', text } const userMsg: Message = { id: crypto.randomUUID(), role: 'user', text }
setMessages((prev) => [...prev, userMsg]) setMessages((prev) => [...prev, userMsg])
+4 -7
View File
@@ -1,3 +1,4 @@
import { Fragment } from 'react'
import { UserPlus, Upload, Code2 } from 'lucide-react' import { UserPlus, Upload, Code2 } from 'lucide-react'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
@@ -53,9 +54,8 @@ export default function Steps() {
{/* Steps */} {/* Steps */}
<div className="flex flex-col md:flex-row items-start justify-center mb-[60px]"> <div className="flex flex-col md:flex-row items-start justify-center mb-[60px]">
{steps.map((step, idx) => ( {steps.map((step, idx) => (
<> <Fragment key={step.number}>
<div <div
key={step.number}
className="flex flex-col items-center text-center max-w-[280px] px-5" className="flex flex-col items-center text-center max-w-[280px] px-5"
> >
<div <div
@@ -71,12 +71,9 @@ export default function Steps() {
{/* Connector */} {/* Connector */}
{idx < steps.length - 1 && ( {idx < steps.length - 1 && (
<div <div className="hidden md:block w-[100px] h-0.5 bg-gray-300 mt-6 flex-shrink-0" />
key={`connector-${idx}`}
className="hidden md:block w-[100px] h-0.5 bg-gray-300 mt-6 flex-shrink-0"
/>
)} )}
</> </Fragment>
))} ))}
</div> </div>