Merge pull request #383 from iceljc/features/refine-chat-window

allow scrollable

Author: iceljc

src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte

@@ -45,6 +45,9 @@
     /** @type {import('$agentTypes').AgentKnowledgeBase[]} */
     let innerKnowledgeBases = [];
 
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
     onMount(async () =>{
         getVectorKnowledgeCollections().then(data => {
             const list = data?.map(x => {
@@ -142,6 +145,7 @@
                 disabled: false
             }
         ];
+        scrollToBottom();
         handleAgentChange();
     }
 
@@ -178,6 +182,16 @@
         }) || [];
     }
 
+    function scrollToBottom() {
+        if (scrollContainer) {
+            setTimeout(() => {
+                scrollContainer.scrollTo({
+                    top: scrollContainer.scrollHeight,
+                    behavior: 'smooth'
+                });
+            }, 0);
+        }
+    }
 </script>
 
 <Card>
@@ -187,7 +201,7 @@
             <h6 class="mt-1 mb-3">Make your Agent have memory</h6>
         </div>
 
-        <div class="agent-utility-container">
+        <div class="agent-utility-container" bind:this={scrollContainer}>
             {#each innerKnowledgeBases as knowledge, uid (uid)}
                 <div class="utility-wrapper">
                     <div class="utility-row utility-row-primary">

src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte

@@ -54,6 +54,9 @@
     /** @type {import('$agentTypes').AgentMcpTool[]} */
     let innerMcps = [];
 
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
 
     onMount(async () => {
         getServerConfigs().then(res => {
@@ -131,6 +134,7 @@
                 functions: []
             }
         ];
+        scrollToBottom();
         handleAgentChange();
     }
 
@@ -207,6 +211,17 @@
         innerRefresh(innerMcps);
         handleAgentChange();
     }
+
+    function scrollToBottom() {
+        if (scrollContainer) {
+            setTimeout(() => {
+                scrollContainer.scrollTo({
+                    top: scrollContainer.scrollHeight,
+                    behavior: 'smooth'
+                });
+            }, 0);
+        }
+    }
 </script>
 
 <Card>
@@ -216,7 +231,7 @@
             <h6 class="mt-1 mb-3">Tools powered by MCP Servers</h6>
         </div>
 
-        <div class="agent-utility-container">
+        <div class="agent-utility-container" bind:this={scrollContainer}>
             {#each innerMcps as mcp, uid (uid)}
                 <div class="utility-wrapper">
                     <div class="utility-row utility-row-primary">

src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte

@@ -41,6 +41,9 @@
     /** @type {import('$agentTypes').AgentRule[]} */
     let innerRules = [];
 
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
     onMount(async () =>{
         getAgentRuleOptions().then(data => {
             const list = data?.map(x => {
@@ -91,6 +94,7 @@
                 disabled: false
             }
         ];
+        scrollToBottom();
         handleAgentChange();
     }
 
@@ -143,6 +147,16 @@
         }) || [];
     }
 
+    function scrollToBottom() {
+        if (scrollContainer) {
+            setTimeout(() => {
+                scrollContainer.scrollTo({
+                    top: scrollContainer.scrollHeight,
+                    behavior: 'smooth'
+                });
+            }, 0);
+        }
+    }
 </script>
 
 <Card>
@@ -152,7 +166,7 @@
             <h6 class="mt-1 mb-3">Wake-up your agent by rules</h6>
         </div>
 
-        <div class="agent-utility-container">
+        <div class="agent-utility-container" bind:this={scrollContainer}>
             {#each innerRules as rule, uid (uid)}
                 <div class="utility-wrapper">
                     <div class="utility-row utility-row-primary">

src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte

@@ -42,6 +42,9 @@
     /** @type {import('$agentTypes').AgentUtility[]} */
     let innerUtilities = [];
 
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
     onMount(async () =>{
         resizeWindow();
         getAgentUtilityOptions().then(data => {
@@ -127,6 +130,8 @@
                 items: []
             }
         ];
+        scrollToBottom();
+        handleAgentChange();
     }
 
     /** @param {number} idx */
@@ -267,6 +272,17 @@
         innerRefresh(innerUtilities);
         handleAgentChange();
 	}
+
+    function scrollToBottom() {
+        if (scrollContainer) {
+            setTimeout(() => {
+                scrollContainer.scrollTo({
+                    top: scrollContainer.scrollHeight,
+                    behavior: 'smooth'
+                });
+            }, 0);
+        }
+    }
 </script>
 
 <svelte:window on:resize={() => resizeWindow()}/>
@@ -278,7 +294,7 @@
             <h6 class="mt-1 mb-3">Tools shared across plugins</h6>
         </div>
 
-        <div class="agent-utility-container">
+        <div class="agent-utility-container" bind:this={scrollContainer}>
             {#if !agent?.is_router}
                 <div class="merge-utility">
                     <Input