scroll button

This commit is contained in:
Arjun 2026-04-07 08:39:39 +05:30
parent a273d0e8b7
commit 96e6b79f77
3 changed files with 17 additions and 13 deletions

View file

@ -20,6 +20,7 @@ import {
Conversation,
ConversationContent,
ConversationEmptyState,
ConversationScrollButton,
} from '@/components/ai-elements/conversation';
import {
Message,
@ -4420,6 +4421,7 @@ function App() {
</>
)}
</ConversationContent>
<ConversationScrollButton />
</Conversation>
</div>
)

View file

@ -292,16 +292,16 @@ export const ConversationScrollButton = ({
!isAtBottom && (
<Button
className={cn(
"absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
"absolute bottom-6 left-[50%] z-10 h-14 w-14 translate-x-[-50%] rounded-full border border-border/70 bg-background/95 text-foreground shadow-lg backdrop-blur-sm transition hover:bg-background",
className
)}
aria-label="Scroll to latest message"
onClick={handleScrollToBottom}
size="icon"
type="button"
variant="outline"
variant="ghost"
{...props}
>
<ArrowDownIcon className="size-4" />
<ArrowDownIcon className="size-7" strokeWidth={1.75} />
</Button>
)
);

View file

@ -8,6 +8,7 @@ import {
Conversation,
ConversationContent,
ConversationEmptyState,
ConversationScrollButton,
} from '@/components/ai-elements/conversation'
import {
Message,
@ -487,11 +488,11 @@ export function ChatSidebar({
)}
data-chat-tab-panel={tab.id}
aria-hidden={!isActive}
>
<Conversation
anchorMessageId={viewportAnchors[tab.id]?.messageId}
anchorRequestKey={viewportAnchors[tab.id]?.requestKey}
className="relative flex-1"
>
<Conversation
anchorMessageId={viewportAnchors[tab.id]?.messageId}
anchorRequestKey={viewportAnchors[tab.id]?.requestKey}
className="relative flex-1"
>
<ConversationContent className={tabHasConversation ? 'mx-auto w-full max-w-4xl px-3 pb-28' : 'mx-auto w-full max-w-4xl min-h-full items-center justify-center px-3 pb-0'}>
{!tabHasConversation ? (
@ -550,10 +551,11 @@ export function ChatSidebar({
</Message>
)}
</>
)}
</ConversationContent>
</Conversation>
</div>
)}
</ConversationContent>
<ConversationScrollButton />
</Conversation>
</div>
)
})}
</div>