feat(scrollToBottom):聊天页新增滚动到底部按钮
This commit is contained in:
parent
1c3f31ac0b
commit
54295642a2
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue