From 96e6b79f779562a8882a9a53795f880425736902 Mon Sep 17 00:00:00 2001
From: Arjun <6592213+arkml@users.noreply.github.com>
Date: Tue, 7 Apr 2026 08:39:39 +0530
Subject: [PATCH] scroll button

---
 apps/x/apps/renderer/src/App.tsx              |  2 ++
 .../components/ai-elements/conversation.tsx   |  8 ++++----
 .../renderer/src/components/chat-sidebar.tsx  | 20 ++++++++++---------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/x/apps/renderer/src/App.tsx b/apps/x/apps/renderer/src/App.tsx
index afb3f8b6..f3bfed02 100644
--- a/apps/x/apps/renderer/src/App.tsx
+++ b/apps/x/apps/renderer/src/App.tsx
@@ -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>
                     )
diff --git a/apps/x/apps/renderer/src/components/ai-elements/conversation.tsx b/apps/x/apps/renderer/src/components/ai-elements/conversation.tsx
index 775b7ee6..cc9f7172 100644
--- a/apps/x/apps/renderer/src/components/ai-elements/conversation.tsx
+++ b/apps/x/apps/renderer/src/components/ai-elements/conversation.tsx
@@ -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>
     )
   );
diff --git a/apps/x/apps/renderer/src/components/chat-sidebar.tsx b/apps/x/apps/renderer/src/components/chat-sidebar.tsx
index 9cc7a598..64b1e843 100644
--- a/apps/x/apps/renderer/src/components/chat-sidebar.tsx
+++ b/apps/x/apps/renderer/src/components/chat-sidebar.tsx
@@ -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>