feat(scrollToBottom):聊天页新增滚动到底部按钮

This commit is contained in:
肖应宇 2026-04-03 11:25:08 +08:00
parent 1c3f31ac0b
commit 54295642a2
3 changed files with 21 additions and 5 deletions

View File

@ -333,8 +333,7 @@ export default function ChatPage() {
)}
>
<div className="flex size-full justify-center">
{!showWelcomeStyle &&
<MessageList
<MessageList
className={cn(
"size-full",
(!showWelcomeStyle || hasSubmitted) && "pt-[58px]",
@ -347,8 +346,10 @@ export default function ChatPage() {
: thread.messages.slice(historyCutoff)
}
paddingBottom={todoListCollapsed ? 160 : 280}
// !showWelcomeStyle || hasSubmitted
showScrollToBottomButton={!showWelcomeStyle}
scrollButtonClassName="bottom-[112px]"
/>
}
</div>
</main>
</div>

View File

@ -84,7 +84,7 @@ export const ConversationScrollButton = ({
!isAtBottom && (
<Button
className={cn(
"absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
"absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full",
className,
)}
onClick={handleScrollToBottom}

View File

@ -4,6 +4,7 @@ import type { UseStream } from "@langchain/langgraph-sdk/react";
import {
Conversation,
ConversationContent,
ConversationScrollButton,
} from "@/components/ai-elements/conversation";
import { useI18n } from "@/core/i18n/hooks";
import {
@ -37,6 +38,8 @@ export function MessageList({
messagesOverride,
suppressThreadLoading = false,
paddingBottom = 160,
showScrollToBottomButton = false,
scrollButtonClassName,
}: {
className?: string;
threadId?: string;
@ -45,6 +48,8 @@ export function MessageList({
messagesOverride?: Message[];
suppressThreadLoading?: boolean;
paddingBottom?: number;
showScrollToBottomButton?: boolean;
scrollButtonClassName?: string;
}) {
const { t } = useI18n();
const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
@ -205,9 +210,19 @@ export function MessageList({
/>
);
})}
{thread.isLoading && <StreamingIndicator className="my-4" />}
{thread.isLoading && messages.length > 0 && <StreamingIndicator className="my-4" />}
<div style={{ height: `${paddingBottom}px` }} />
</ConversationContent>
{/* showScrollToBottomButton */}
{ showScrollToBottomButton && (
<ConversationScrollButton
className={cn(
"z-20 rounded-full border bg-white/90 shadow-sm backdrop-blur-sm",
scrollButtonClassName,
)}
title="滚动到底部"
/>
)}
</Conversation>
);
}