chatbox 修复自动滚动问题

This commit is contained in:
北枳 2025-08-24 17:03:20 +08:00
parent 670be3cbbb
commit 27fd4b3a14
3 changed files with 34 additions and 20 deletions

View File

@ -44,14 +44,19 @@ export function InputBar({ onSend }: InputBarProps) {
const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
// 保存对 input 元素的引用
const inputElement = e.currentTarget;
if (file) {
if (!file.type.startsWith('image/')) {
alert('请选择图片文件');
inputElement.value = ""; // 重置 input
return;
}
await handleFileUpload(file);
// 使用保存的引用重置 input
inputElement.value = "";
}
e.currentTarget.value = ""; // reset
};
const removeImage = () => {

View File

@ -11,7 +11,7 @@ export function LoadMoreButton({ onClick, loading = false }: LoadMoreButtonProps
<button
onClick={onClick}
disabled={loading}
className="w-full flex items-center justify-center gap-2 text-sm text-gray-400 hover:text-gray-300 hover:bg-gray-800/30 transition-colors disabled:opacity-50"
className="w-full flex items-center justify-center gap-2 text-sm text-gray-400 hover:text-gray-300 hover:bg-gray-800/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
data-alt="load-more-button"
>
{loading ? (

View File

@ -143,6 +143,7 @@ export function useMessages({ config, onMessagesUpdate }: UseMessagesProps): [Me
if (timeoutIdRef.current) {
clearTimeout(timeoutIdRef.current);
}
isPollingRef.current = true; // 设置轮询标志,防止其他轮询启动
try {
// 立即添加用户消息(临时显示)
@ -157,13 +158,19 @@ export function useMessages({ config, onMessagesUpdate }: UseMessagesProps): [Me
// 无论是否在查看历史,发送消息后都切换到最新视图
isViewingHistoryRef.current = false;
setDisplayMessages(prev => mergeMessages(prev, [userMessage]));
setDisplayMessages(prev => {
const newMessages = mergeMessages(prev, [userMessage]);
// 在 setState 的回调中触发滚动,确保消息已更新到界面
setTimeout(() => onMessagesUpdate?.(true), 0);
return newMessages;
});
// 发送到服务器
await sendMessage(blocks, configRef.current);
// 立即获取最新的消息列表
await updateMessages(false);
onMessagesUpdate?.(true);
} catch (err) {
console.error("发送消息失败:", err);
setError(err instanceof Error ? err : new Error("发送消息失败"));
@ -172,9 +179,10 @@ export function useMessages({ config, onMessagesUpdate }: UseMessagesProps): [Me
// 恢复轮询
if (systemPush) {
timeoutIdRef.current = setTimeout(() => {
isPollingRef.current = false;
updateMessages(false);
// 延迟一个轮询间隔后再开始轮询
timeoutIdRef.current = setTimeout(() => {
poll();
}, POLLING_INTERVAL);
}
}
@ -223,11 +231,8 @@ export function useMessages({ config, onMessagesUpdate }: UseMessagesProps): [Me
});
}, [latestMessages, filterMessages]);
// 轮询获取最新消息
useEffect(() => {
if (!systemPush) return;
const poll = async () => {
// 定义轮询函数
const poll = useCallback(async () => {
if (isPollingRef.current) return;
try {
@ -239,7 +244,11 @@ export function useMessages({ config, onMessagesUpdate }: UseMessagesProps): [Me
timeoutIdRef.current = setTimeout(poll, POLLING_INTERVAL);
}
}
};
}, [systemPush, updateMessages]);
// 轮询获取最新消息
useEffect(() => {
if (!systemPush) return;
poll();
@ -248,7 +257,7 @@ export function useMessages({ config, onMessagesUpdate }: UseMessagesProps): [Me
clearTimeout(timeoutIdRef.current);
}
};
}, [systemPush, updateMessages]);
}, [systemPush, poll]);
// 初始加载
useEffect(() => {