design: neobrutalist_theme into main

html-router/templates/chat/base.html

@@ -9,94 +9,40 @@
 {% block main %}
 <div class="flex grow relative justify-center mt-2 sm:mt-4">
   <div class="container">
-    <div class="overflow-auto hide-scrollbar">
+    <section class="mb-3">
+      <div class="nb-panel p-3 flex items-center justify-between">
+        <h1 class="text-xl font-extrabold tracking-tight">Chat</h1>
+        <div class="text-xs opacity-70">Converse with your knowledge</div>
+      </div>
+    </section>
+    <div id="chat-scroll-container" class="overflow-auto hide-scrollbar">
       {% include "chat/history.html" %}
       {% include "chat/new_message_form.html" %}
     </div>
   </div>
 </div>
-<style>
-  .hide-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  .hide-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-
-  .markdown-content p {
-    margin-bottom: 0.75em;
-  }
-
-  .markdown-content p:last-child {
-    margin-bottom: 0;
-  }
-
-  .markdown-content ul,
-  .markdown-content ol {
-    margin-top: 0.5em;
-    margin-bottom: 0.75em;
-    padding-left: 2em;
-  }
-
-  .markdown-content li {
-    margin-bottom: 0.25em;
-  }
-
-  .markdown-content pre {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 0.5em;
-    border-radius: 4px;
-    overflow-x: auto;
-  }
-
-  .markdown-content code {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 0.2em 0.4em;
-    border-radius: 3px;
-    font-size: 0.9em;
-  }
-
-  .markdown-content {
-    line-height: 1.5;
-    word-wrap: break-word;
-  }
-
-  .markdown-content table {
-    border-collapse: collapse;
-    margin: 0.75em 0;
-    width: 100%;
-  }
-
-  .markdown-content th,
-  .markdown-content td {
-    border: 1px solid #ddd;
-    padding: 6px 12px;
-    text-align: left;
-  }
-
-  .markdown-content blockquote {
-    border-left: 4px solid #ddd;
-    padding-left: 10px;
-    margin: 0.5em 0 0.5em 0.5em;
-    color: #666;
-  }
-
-  .markdown-content hr {
-    border: none;
-    border-top: 1px solid #ddd;
-    margin: 0.75em 0;
-  }
-</style>
 
 <script>
   function scrollChatToBottom() {
-    const chatContainer = document.getElementById('chat_container');
-    if (chatContainer) chatContainer.scrollTop = chatContainer.scrollHeight;
+    requestAnimationFrame(() => {
+      const mainScroll = document.querySelector('main');
+      if (mainScroll) mainScroll.scrollTop = mainScroll.scrollHeight;
+
+      const chatScroll = document.getElementById('chat-scroll-container');
+      if (chatScroll) chatScroll.scrollTop = chatScroll.scrollHeight;
+
+      const chatContainer = document.getElementById('chat_container');
+      if (chatContainer) chatContainer.scrollTop = chatContainer.scrollHeight;
+
+      window.scrollTo(0, document.body.scrollHeight);
+    });
   }
 
+  window.scrollChatToBottom = scrollChatToBottom;
+
   document.addEventListener('DOMContentLoaded', scrollChatToBottom);
+
+  document.body.addEventListener('htmx:afterSwap', scrollChatToBottom);
   document.body.addEventListener('htmx:afterSettle', scrollChatToBottom);
 </script>
-{% endblock %}
+{% endblock %}