From 8ce3dc2b83ff5cdd0f2930fddbc4b0478185716b Mon Sep 17 00:00:00 2001
From: Brylie Christopher Oxley <brylie@protonmail.com>
Date: Sat, 6 Jul 2024 07:49:36 +0300
Subject: [PATCH] Implement auto-scroll to top of message for new chat messages

---
 app/main.py             | 25 ++++++++++++-------------
 app/static/script.js    | 11 +++++++++++
 app/static/styles.css   |  3 ++-
 app/templates/chat.html | 14 ++++++++++++--
 4 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/app/main.py b/app/main.py
index ab1c77bcf..71b03bbfb 100644
--- a/app/main.py
+++ b/app/main.py
@@ -65,8 +65,11 @@ async def read_root(request: Request) -> HTMLResponse:
     )
 
 
-@app.post("/chat")
+@app.post("/chat", response_class=HTMLResponse)
 async def chat(request: Request, message: str = Form(...)) -> HTMLResponse:
+    user_message_id = str(uuid.uuid4())
+    bot_message_id = str(uuid.uuid4())
+
     # Prepare messages with the correct order
     prepared_messages, citations = await rag_service.prepare_messages_with_sources(
         system_prompt=f"<system-prompt>{SYSTEM_PROMPT}</system-prompt>",
@@ -84,19 +87,15 @@ async def chat(request: Request, message: str = Form(...)) -> HTMLResponse:
     chat_history.append(Message(role=MessageRole.user, content=message))
     chat_history.append(Message(role=MessageRole.assistant, content=bot_response))
 
-    message_id = str(uuid.uuid4())
-
-    response_html = templates.TemplateResponse(
-        "bot_message.html",
-        {
-            "request": request,
-            "bot_response_html": bot_response_html,
-            "citations": citations,
-            "message_id": message_id,
-        },
-    )
+    response_html = f"""
+    <div id="user-message-{user_message_id}" class="user-message">{message}</div>
+    <div id="bot-message-{bot_message_id}" class="bot-message">{bot_response_html}</div>
+    <script>
+    scrollToMessage('bot-message-{bot_message_id}');
+    </script>
+    """
 
-    return response_html
+    return HTMLResponse(content=response_html)
 
 
 @app.get("/api/chat_history")
diff --git a/app/static/script.js b/app/static/script.js
index 5f3323e1d..a1ac4c687 100644
--- a/app/static/script.js
+++ b/app/static/script.js
@@ -20,6 +20,9 @@ document.body.addEventListener('htmx:beforeRequest', function(event) {
     // Append typing indicator
     var typingIndicator = document.getElementById('typing-indicator').content.cloneNode(true);
     chatContainer.appendChild(typingIndicator);
+    
+    // Scroll to bottom after appending user message
+    scrollToBottom();
 });
 
 document.body.addEventListener('htmx:afterSwap', function(event) {
@@ -39,4 +42,12 @@ document.body.addEventListener('htmx:afterSwap', function(event) {
     
     // Add 'show' class to trigger animation
     newMessage.classList.add('show');
+    
+    // Scroll to bottom after appending bot message
+    scrollToBottom();
 });
+
+function scrollToBottom() {
+    var chatContainer = document.getElementById('chat-container');
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+}
diff --git a/app/static/styles.css b/app/static/styles.css
index aea0aa52e..8f66082c6 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -18,6 +18,7 @@ body {
     flex-direction: column;
     background-color: #242424;
     border: 1px solid #3a3a3a;
+    scroll-behavior: smooth;
 }
 
 .message {
@@ -148,4 +149,4 @@ body {
 .citation-content {
     flex-grow: 1;
     word-break: break-word;
-}
\ No newline at end of file
+}
diff --git a/app/templates/chat.html b/app/templates/chat.html
index ea99bbea9..3adde413a 100644
--- a/app/templates/chat.html
+++ b/app/templates/chat.html
@@ -19,7 +19,9 @@ <h1 class="mb-4">{{ chat_title }}</h1>
             </div>
             <!-- Chat messages will be inserted here -->
         </div>
-        <form class="mt-3" hx-post="/chat" hx-target="#chat-container" hx-swap="beforeend" hx-indicator="#typing-indicator">
+        <form class="mt-3" hx-post="/chat" hx-target="#chat-container" hx-swap="beforeend" hx-indicator="#typing-indicator"
+              hx-on::after-request="scrollToMessage('user-message-{{ message_id }}')"
+              hx-on::after-settle="scrollToMessage('bot-message-{{ new_message_id }}')">
             <div class="input-group">
                 <input type="text" name="message" id="message-input" class="form-control" placeholder="Type your message..." required>
                 <button class="btn btn-primary" type="submit">Send</button>
@@ -35,7 +37,15 @@ <h1 class="mb-4">{{ chat_title }}</h1>
         </div>
     </template>
 
+    <script>
+        function scrollToMessage(messageId) {
+            const element = document.getElementById(messageId);
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        }
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script src="/static/script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>