diff --git a/components/SmartChatBox/InputBar.tsx b/components/SmartChatBox/InputBar.tsx index cf8b1b5..ea3cde8 100644 --- a/components/SmartChatBox/InputBar.tsx +++ b/components/SmartChatBox/InputBar.tsx @@ -23,9 +23,10 @@ interface InputBarProps { setVideoPreview?: (url: string, id: string) => void; initialVideoUrl?: string; initialVideoId?: string; + setIsFocusChatInput?: (v: boolean) => void; } -export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVideoId }: InputBarProps) { +export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVideoId, setIsFocusChatInput }: InputBarProps) { const [text, setText] = useState(""); const [isUploading, setIsUploading] = useState(false); const [uploadProgress, setUploadProgress] = useState(0); @@ -91,6 +92,22 @@ export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVide debouncedAdjustHeight(); }, [text, debouncedAdjustHeight]); + // 布局切换时保持输入框焦点并将光标移到末尾 + useEffect(() => { + // 等待布局动画完成后再聚焦,避免动画过程中的视觉跳动 + const focusTimeout = setTimeout(() => { + const textarea = textareaRef.current; + if (textarea) { + textarea.focus(); + // 将光标移动到文本末尾 + const length = textarea.value.length; + textarea.setSelectionRange(length, length); + } + }, 200); // 与布局动画时长保持一致 + + return () => clearTimeout(focusTimeout); + }, [isMultiline]); + const handleSend = () => { const blocks: MessageBlock[] = []; if (text.trim()) blocks.push({ type: "text" as const, text: text.trim() }); @@ -229,6 +246,7 @@ export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVide {/* 图片上传按钮 - 单行时显示在左侧 */} {!isMultiline && ( +