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:
@@ -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])
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user