Add LogScrollHook for auto-scrolling log area

assets/js/hooks/editor-form-hook.js

@@ -116,7 +116,7 @@ const EditorFormHook = {
       let new_state = view.state.update({
         changes: { from: 0, to: view.state.doc.length, insert: event.detail.content }
       });
-      view.dispatch(new_state)
+      view.dispatch(new_state);
     });
   }
 };

assets/js/hooks/index.js

@@ -1,5 +1,8 @@
+import LogScrollHook from "./log-scroll-hook";
 import EditorFormHook from "./editor-form-hook";
 
+
 export default {
+  LogScrollHook,
   EditorFormHook
 };

assets/js/hooks/log-scroll-hook.js

@@ -0,0 +1,16 @@
+const LogScrollHook = {
+  mounted() {
+    this.scheduleScroll();
+  },
+  updated() {
+    this.scheduleScroll();
+  },
+  scheduleScroll() {
+    // Schedule the scroll to happen after the next frame to ensure the DOM is updated
+    requestAnimationFrame(() => {
+      this.el.scrollTop = this.el.scrollHeight;
+    });
+  }
+};
+
+export default LogScrollHook;

lib/compass_admin_web/components/deployment_page.ex

@@ -12,7 +12,7 @@ defmodule CompassAdminWeb.Components.DeploymentPage do
         <div class="grid grid-cols-3 gap-4">
           <div class="col-span-2 bg-white shadow-md rounded-lg p-4 max-h-screen">
             <h2 class="text-xl pb-2"><%= @title %></h2>
-            <div class="overflow-auto h-4/5">
+            <div class="overflow-auto h-4/5" phx-hook="LogScrollHook" id="log-scroll-hook">
               <ul>
                 <%= for log <- Enum.reverse(@agent_state.logs) do %>
                   <li class="text-nowrap text-gray-400 pb-1 pt-1"><%= log %></li>