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

View file

@ -292,16 +292,16 @@ export const ConversationScrollButton = ({
!isAtBottom && ( !isAtBottom && (
<Button <Button
className={cn( 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 className
)} )}
aria-label="Scroll to latest message"
onClick={handleScrollToBottom} onClick={handleScrollToBottom}
size="icon"
type="button" type="button"
variant="outline" variant="ghost"
{...props} {...props}
> >
<ArrowDownIcon className="size-4" /> <ArrowDownIcon className="size-7" strokeWidth={1.75} />
</Button> </Button>
) )
); );

View file

@ -8,6 +8,7 @@ import {
Conversation, Conversation,
ConversationContent, ConversationContent,
ConversationEmptyState, ConversationEmptyState,
ConversationScrollButton,
} from '@/components/ai-elements/conversation' } from '@/components/ai-elements/conversation'
import { import {
Message, Message,
@ -552,6 +553,7 @@ export function ChatSidebar({
</> </>
)} )}
</ConversationContent> </ConversationContent>
<ConversationScrollButton />
</Conversation> </Conversation>
</div> </div>
) )