From 81ef133cae97f7153cdfb7fd16fdae397f57c257 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 27 Feb 2026 16:33:40 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20"Scroll=20to=20?=
 =?UTF-8?q?Bottom"=20button=20to=20chat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a helpful "Scroll to Bottom" button that appears when the user scrolls up in the chat messages container. This makes it easier to quickly return to the latest message.

♿ Accessibility: Added ARIA label and title to the icon-only button.
✨ Micro-UX: Fixed positioning and smooth scrolling back to the bottom.

Co-authored-by: Flopsky <75791840+Flopsky@users.noreply.github.com>
---
 frontend/src/components/chat/ChatMessages.jsx | 13 ++++++-
 frontend/src/styles/opendeepwiki-theme.css    | 39 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/chat/ChatMessages.jsx b/frontend/src/components/chat/ChatMessages.jsx
index 32b83f2..d52c712 100644
--- a/frontend/src/components/chat/ChatMessages.jsx
+++ b/frontend/src/components/chat/ChatMessages.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { FiUser, FiCpu, FiCopy, FiCheck, FiInfo } from 'react-icons/fi';
+import { FiUser, FiCpu, FiCopy, FiCheck, FiInfo, FiChevronDown } from 'react-icons/fi';
 
 const ChatMessages = ({ messages }) => {
   const [hoveredMessage, setHoveredMessage] = useState(null);
@@ -374,6 +374,17 @@ const ChatMessages = ({ messages }) => {
         </div>
       ))}
       <div ref={messagesEndRef} style={{ height: '1px', width: '100%' }} />
+
+      {userScrolled && (
+        <button
+          className="scroll-to-bottom-btn"
+          onClick={scrollToBottom}
+          aria-label="Scroll to bottom"
+          title="Scroll to bottom"
+        >
+          <FiChevronDown size={18} />
+        </button>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/styles/opendeepwiki-theme.css b/frontend/src/styles/opendeepwiki-theme.css
index ff4ca74..37fd64b 100644
--- a/frontend/src/styles/opendeepwiki-theme.css
+++ b/frontend/src/styles/opendeepwiki-theme.css
@@ -1259,4 +1259,41 @@ img {
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-}
\ No newline at end of file
+}
+/* Scroll to Bottom Button */
+.scroll-to-bottom-btn {
+  position: fixed;
+  bottom: 120px;
+  right: 2rem;
+  z-index: 100;
+  background-color: var(--chatgpt-sidebar-bg);
+  border: 1px solid var(--chatgpt-border);
+  color: var(--chatgpt-text);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+  transition: all 0.2s ease;
+  opacity: 0.8;
+}
+
+.scroll-to-bottom-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  transform: scale(1.1);
+  opacity: 1;
+}
+
+.scroll-to-bottom-btn:active {
+  transform: scale(0.95);
+}
+
+@media (max-width: 768px) {
+  .scroll-to-bottom-btn {
+    bottom: 110px;
+    right: 1rem;
+  }
+}