From 3c7bf99e214f553fb5111b27066fb5d2ce9d381f Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 20 Nov 2025 17:24:29 -0600
Subject: [PATCH 1/4] relocate spinner

---
 src/lib/common/LoadingToComplete.svelte      | 10 +++++++--
 src/lib/helpers/http.js                      | 23 ++++++++++++++------
 src/lib/services/role-service.js             |  6 ++++-
 src/routes/page/conversation/+page.svelte    |  7 +++++-
 src/routes/page/instruction/log/+page.svelte |  7 +++---
 src/routes/page/roles/+page.svelte           | 10 +++++++--
 src/routes/page/task/+page.svelte            |  6 ++++-
 src/routes/page/users/+page.svelte           | 10 +++++++--
 8 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src/lib/common/LoadingToComplete.svelte b/src/lib/common/LoadingToComplete.svelte
index 40b7f43f..d0d520a8 100644
--- a/src/lib/common/LoadingToComplete.svelte
+++ b/src/lib/common/LoadingToComplete.svelte
@@ -5,14 +5,20 @@
     export let isLoading = false;
     export let isComplete = false;
     export let isError = false;
+    export let spinnerClasses = '';
+    export let spinnerStyles = '';
+    export let spinnerSize = 50;
 
     export let successText = 'Update completed!';
     export let errorText = 'Error!';
-    export let spinnerSize = 50;
 </script>
 
 {#if isLoading}
-    <Loader size={spinnerSize} />
+    <Loader
+        size={spinnerSize}
+        containerClasses={spinnerClasses}
+        containerStyles={spinnerStyles}
+    />
 {/if}
 
 
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 43405900..0d6cca7e 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -208,24 +208,32 @@ function skipLoader(config) {
 
     /** @type {RegExp[]} */
     const getRegexes = [
+        new RegExp('http(s*)://(.*?)/plugin/menu', 'g'),
+        new RegExp('http(s*)://(.*?)/settings', 'g'),
         new RegExp('http(s*)://(.*?)/setting/(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/roles', 'g'),
+        new RegExp('http(s*)://(.*?)/role/options', 'g'),
+        new RegExp('http(s*)://(.*?)/role/(.*?)/details', 'g'),
+        new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
         new RegExp('http(s*)://(.*?)/user/me', 'g'),
-        new RegExp('http(s*)://(.*?)/plugin/menu', 'g'),
         new RegExp('http(s*)://(.*?)/address/options(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/options', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/tasks', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/conversations', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/llm-configs', 'g'),
         new RegExp('http(s*)://(.*?)/llm-provider/(.*?)/models', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/collections', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/exist', 'g'),
-        new RegExp('http(s*)://(.*?)/role/options', 'g'),
-        new RegExp('http(s*)://(.*?)/role/(.*?)/details', 'g'),
-        new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
-        new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
-        new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
+        new RegExp('http(s*)://(.*?)/logger/instruction/log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g'),
         new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g'),
-        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
+        
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
@@ -241,6 +249,7 @@ function skipLoader(config) {
     }
 
     if (config.method === 'get' && getRegexes.some(regex => regex.test(config.url || ''))) {
+        console.log('url', config.url);
         return true;
     }
 
diff --git a/src/lib/services/role-service.js b/src/lib/services/role-service.js
index 15f40116..77033144 100644
--- a/src/lib/services/role-service.js
+++ b/src/lib/services/role-service.js
@@ -1,5 +1,6 @@
 import { endpoints } from './api-endpoints.js';
 import axios from 'axios';
+import qs from 'qs';
 
 /**
  * Get role options
@@ -17,7 +18,10 @@ export async function getRoleOptions() {
  * @returns {Promise<import('$roleTypes').RoleModel[]>}
  */
 export async function getRoles(filter = null) {
-    const response = await axios.post(endpoints.rolesUrl, filter);
+    const response = await axios.get(endpoints.rolesUrl, {
+        params: filter,
+        paramsSerializer: (params) => qs.stringify(params, { encode: false, allowDots: true, arrayFormat: "indices" })
+    });
     return response.data;
 }
 
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 6b1908dd..8d2b1bc1 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -414,7 +414,6 @@
 
 <HeadTitle title="{$_('Conversation List')}" />
 <Breadcrumb title="{$_('Communication')}" pagetitle="{$_('Conversations')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} successText={'Delete completed!'} />
 
 <Row>
 	<Col lg="12">
@@ -529,6 +528,12 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
+					<LoadingToComplete
+						spinnerStyles={'position: absolute;'}
+						isLoading={isLoading}
+						isComplete={isComplete}
+						successText={'Delete completed!'}
+					/>
 					<Table class="align-middle nowrap" bordered>
 						<thead>
 							<tr>
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index d5f5c891..2c0766ac 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -23,6 +23,7 @@
 	import { TimeRange } from '$lib/helpers/enums';
 	import { TIME_RANGE_OPTIONS } from '$lib/helpers/constants';
 	import LogItem from './log-item.svelte';
+	import Loader from '$lib/common/Loader.svelte';
 	
 
     const firstPage = 1;
@@ -291,7 +292,6 @@
 
 <HeadTitle title="{$_('Instruction Log')}" />
 <Breadcrumb pagetitle="{$_('Log')}" title="{$_('Instruction')}"/>
-<LoadingToComplete isLoading={isLoading} />
 
 <Row>
 	<Col lg="12">
@@ -393,6 +393,7 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
+					<LoadingToComplete spinnerStyles={'position: absolute;'} isLoading={isLoading} />
 					<Table class="align-middle nowrap users-table" bordered>
 						<thead>
 							<tr>
@@ -407,9 +408,7 @@
 						</thead>
 						<tbody>
 							{#each logItems as item, idx (idx)}
-                                <LogItem
-                                    item={item}
-                                />
+                                <LogItem item={item} />
                             {/each}
 						</tbody>
 					</Table>
diff --git a/src/routes/page/roles/+page.svelte b/src/routes/page/roles/+page.svelte
index 0923e8b9..1dba9809 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -147,8 +147,6 @@
 
 <HeadTitle title="{$_('Role List')}" />
 <Breadcrumb title="{$_('Management')}" pagetitle="{$_('Roles')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} successText={successText} errorText={errorText} />
-
 
 <Row>
 	<Col lg="12">
@@ -160,6 +158,14 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
+					<LoadingToComplete
+						spinnerStyles={'position: absolute;'}
+						isLoading={isLoading}
+						isComplete={isComplete}
+						isError={isError}
+						successText={successText}
+						errorText={errorText}
+					/>
 					<Table class="align-middle nowrap roles-table" bordered>
 						<thead>
 							<tr>
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index 0943cd95..7d85bda6 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -260,7 +260,6 @@
 
 <HeadTitle title="{$_('Task List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Task')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} />
 
 <Row>
 	<Col lg="12">
@@ -313,6 +312,11 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive">
+					<LoadingToComplete
+						spinnerStyles={'position: absolute;'}
+						isLoading={isLoading}
+						isComplete={isComplete}
+					/>
 					<Table class="align-middle nowrap" bordered>
 						<thead>
 							<tr>
diff --git a/src/routes/page/users/+page.svelte b/src/routes/page/users/+page.svelte
index 7b708bff..1f918159 100644
--- a/src/routes/page/users/+page.svelte
+++ b/src/routes/page/users/+page.svelte
@@ -232,8 +232,6 @@
 
 <HeadTitle title="{$_('User List')}" />
 <Breadcrumb title="{$_('Management')}" pagetitle="{$_('Users')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} successText={successText} errorText={errorText} />
-
 
 <Row>
 	<Col lg="12">
@@ -272,6 +270,14 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
+					<LoadingToComplete
+						spinnerStyles={'position: absolute;'}
+						isLoading={isLoading}
+						isComplete={isComplete}
+						isError={isError}
+						successText={successText}
+						errorText={errorText}
+					/>
 					<Table class="align-middle nowrap users-table" bordered>
 						<thead>
 							<tr>

From 4930c3c409ae01107b2d57b997fda221b9f15557 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 20 Nov 2025 17:54:26 -0600
Subject: [PATCH 2/4] refine spinner in conv page

---
 src/lib/helpers/http.js                       |   6 +-
 .../page/agent/code-scripts/+page.svelte      | 112 +++---
 .../[conversationId]/+page.svelte             |  71 ++--
 .../[conversationId]/conv-dialogs.svelte      |  11 +-
 .../page/instruction/testing/+page.svelte     | 326 +++++++++---------
 5 files changed, 278 insertions(+), 248 deletions(-)

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 0d6cca7e..f33c447f 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -185,7 +185,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/create', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
         new RegExp('http(s*)://(.*?)/users', 'g'),
-        new RegExp('http(s*)://(.*?)/instruct/chat-completion', 'g'),
+        new RegExp('http(s*)://(.*?)/instruct/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-script/generate', 'g'),
         new RegExp('http(s*)://(.*?)/renew-token', 'g')
@@ -217,10 +217,13 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
         new RegExp('http(s*)://(.*?)/user/me', 'g'),
         new RegExp('http(s*)://(.*?)/address/options(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/agents', 'g'),
         new RegExp('http(s*)://(.*?)/agent/options', 'g'),
         new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
         new RegExp('http(s*)://(.*?)/agent/tasks', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation', 'g'),
+        new RegExp('http(s*)://(.*?)/conversations/(.*?)/dialogs', 'g'),
         new RegExp('http(s*)://(.*?)/conversations', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
@@ -249,7 +252,6 @@ function skipLoader(config) {
     }
 
     if (config.method === 'get' && getRegexes.some(regex => regex.test(config.url || ''))) {
-        console.log('url', config.url);
         return true;
     }
 
diff --git a/src/routes/page/agent/code-scripts/+page.svelte b/src/routes/page/agent/code-scripts/+page.svelte
index 61009801..9de78f84 100644
--- a/src/routes/page/agent/code-scripts/+page.svelte
+++ b/src/routes/page/agent/code-scripts/+page.svelte
@@ -174,56 +174,64 @@
 
 <HeadTitle title="{$_('Code Scripts')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Code Scripts')}" />
-<LoadingToComplete {isLoading} {isComplete} {isError} />
-
-<Card>
-    <CardBody class="border-bottom">
-        <Row class="g-3">
-            <Col lg="3" class="d-flex flex-column gap-1">
-                <div class="fw-bold">Agent</div>
-                <Select
-                    tag={'agent-select'}
-                    placeholder={'Select agent'}
-                    selectedText={'agents'}
-                    searchMode
-                    selectedValues={selectedAgentId ? [selectedAgentId] : []}
-                    options={agentOptions}
-                    on:select={e => changeAgent(e)}
-                />
-            </Col>
+
+
+<div style="position: relative;">
+    <LoadingToComplete
+        spinnerStyles={'position: absolute;'}
+        {isLoading}
+        {isComplete}
+        {isError}
+    />
+    <Card>
+        <CardBody class="border-bottom">
+            <Row class="g-3">
+                <Col lg="3" class="d-flex flex-column gap-1">
+                    <div class="fw-bold">Agent</div>
+                    <Select
+                        tag={'agent-select'}
+                        placeholder={'Select agent'}
+                        selectedText={'agents'}
+                        searchMode
+                        selectedValues={selectedAgentId ? [selectedAgentId] : []}
+                        options={agentOptions}
+                        on:select={e => changeAgent(e)}
+                    />
+                </Col>
+            </Row>
+        </CardBody>
+    </Card>
+
+    {#if !!selectedAgentId}
+        <ScriptEditor
+            title={'Source scripts'}
+            scriptType={AgentCodeScriptType.Src}
+            bind:scriptObj={srcScriptObj}
+        />
+        <ScriptEditor
+            title={'Test scripts'}
+            scriptType={AgentCodeScriptType.Test}
+            bind:scriptObj={testScriptObj}
+        />
+
+        {#if ADMIN_ROLES.includes(user?.role || '')}
+        <Row>
+            <div class="hstack gap-2 my-4">
+                <Button
+                    class="btn btn-soft-primary"
+                    disabled={!selectedAgentId}
+                    on:click={() => saveCodeScripts()}
+                >
+                    {$_('Save')}
+                </Button>
+                <Button
+                    class="btn btn-warning"
+                    disabled={!selectedAgentId}
+                    on:click={() => resetCodeScripts()}>
+                    {$_('Reset')}
+                </Button>
+            </div>
         </Row>
-    </CardBody>
-</Card>
-
-{#if !!selectedAgentId}
-<ScriptEditor
-    title={'Source scripts'}
-    scriptType={AgentCodeScriptType.Src}
-    bind:scriptObj={srcScriptObj}
-/>
-<ScriptEditor
-    title={'Test scripts'}
-    scriptType={AgentCodeScriptType.Test}
-    bind:scriptObj={testScriptObj}
-/>
-
-{#if ADMIN_ROLES.includes(user?.role || '')}
-<Row>
-    <div class="hstack gap-2 my-4">
-        <Button
-            class="btn btn-soft-primary"
-            disabled={!selectedAgentId}
-            on:click={() => saveCodeScripts()}
-        >
-            {$_('Save')}
-        </Button>
-        <Button
-            class="btn btn-warning"
-            disabled={!selectedAgentId}
-            on:click={() => resetCodeScripts()}>
-            {$_('Reset')}
-        </Button>
-    </div>
-</Row>
-{/if}
-{/if}
+        {/if}
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
index 30c6813c..d4d68e8d 100644
--- a/src/routes/page/conversation/[conversationId]/+page.svelte
+++ b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -1,23 +1,34 @@
 <script>
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import Swal from 'sweetalert2';
+    import { _ } from 'svelte-i18n';
     import { Col, Row, Button } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import Dialog from './conv-dialogs.svelte';
+    import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+    import { getConversation, deleteConversation, getDialogs } from '$lib/services/conversation-service.js';
     import Overview from './conv-overview.svelte'
     import States from './conv-states.svelte';
-    import { getConversation, deleteConversation } from '$lib/services/conversation-service.js';
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
-    import Swal from 'sweetalert2'
-    import { _ } from 'svelte-i18n'  
+    import Dialog from './conv-dialogs.svelte';
 
     const params = $page.params;
+    const dialogCount = 100;
+
+    let isLoading = false;
 
     /** @type {import('$conversationTypes').ConversationModel} */
     let conversation;
 
+    /** @type {import('$conversationTypes').ChatResponseModel[]} */
+    let dialogs = [];
+
+
     onMount(async () => {
+        isLoading = true;
         conversation = await getConversation(params.conversationId, true);
+        isLoading = false;
+        dialogs = await getDialogs(conversation.id, dialogCount);
     });  
 
     function handleConversationDeletion() {
@@ -42,24 +53,30 @@
 <HeadTitle title={conversation?.title || 'Not found'} />
 <Breadcrumb title="{$_('Conversation')}" pagetitle="{$_('Conversation Detail')}" />
 
-{#if conversation}
-<Row>
-    <Col style="flex: 40%;">
-        <Overview conversation={conversation} />
-        <States conversation={conversation} />
-    </Col>
-    <Col style="flex: 60%;">
-        <Dialog conversation={conversation} />        
-    </Col>
-</Row>
-<Row>
-    <div class="mb-4">
-        <Button
-            class="btn btn-danger btn-hover rounded"
-            on:click={() => handleConversationDeletion()}
-        >
-            <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
-        </Button>
-    </div>
-</Row>
-{/if}
+<div style="position: relative;">
+    <LoadingToComplete
+        spinnerStyles={'position: absolute;'}
+        {isLoading}
+    />
+    {#if conversation}
+        <Row>
+            <Col style="flex: 40%;">
+                <Overview {conversation} />
+                <States {conversation} />
+            </Col>
+            <Col style="flex: 60%;">
+                <Dialog {conversation} {dialogs} />
+            </Col>
+        </Row>
+        <Row>
+            <div class="mb-4">
+                <Button
+                    class="btn btn-danger btn-hover rounded"
+                    on:click={() => handleConversationDeletion()}
+                >
+                    <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
+                </Button>
+            </div>
+        </Row>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
index 9af47d5c..43f64f70 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
@@ -3,7 +3,7 @@
     import { _ } from 'svelte-i18n' 
     import util from "lodash";
     import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
-    import { getDialogs, getConversationFiles, sendNotification } from '$lib/services/conversation-service.js';
+    import { getConversationFiles, sendNotification } from '$lib/services/conversation-service.js';
     import { utcToLocal } from '$lib/helpers/datetime';
 	import { IMAGE_DATA_PREFIX, BOT_SENDERS } from '$lib/helpers/constants';
 	import MessageFileGallery from '$lib/common/MessageFileGallery.svelte';
@@ -14,10 +14,6 @@
 
     const maxTextLength = 4096;
     const duration = 1500;
-    const dialogCount = 100;
-
-    /** @type {import('$conversationTypes').ChatResponseModel[]} */
-    let dialogs = [];
 
     /** @type {boolean} */
     let isOpenNotificationModal = false;
@@ -29,9 +25,8 @@
     /** @type {import('$conversationTypes').ConversationModel} */
     export let conversation;
 
-    onMount(async () => {
-        dialogs = await getDialogs(conversation.id, dialogCount);
-    });
+    /** @type {import('$conversationTypes').ChatResponseModel[]} */
+    export let dialogs = [];
 
     /** 
      * @param {import('$conversationTypes').ChatResponseModel} dialog
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index e2d633d8..02db34b1 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -209,175 +209,183 @@
 
 <HeadTitle title="{$_('Instruction')}" />
 <Breadcrumb pagetitle="{$_('Testing')}" title="{$_('Instruction')}"/>
-<LoadingToComplete isLoading={isLoading} isError={isError} errorText={errorText} />
-
-<div class="d-xl-flex">
-	<div class="w-100">
-        <div class="instruction-container mb-4">
-            <textarea
-                class='form-control knowledge-textarea'
-                rows={8}
-                maxlength={maxLength}
-                disabled={isThinking}
-                placeholder={'Enter input message...'}
-                bind:value={text}
-                on:keydown={(e) => pressKey(e)}
-            />
-            <div class="text-secondary text-count d-flex justify-content-between">
-                <div>
-                    {#if elapsedTime}
-                        {`Elapsed time: ${elapsedTime}`}
-                    {/if}
-                </div>
-                <div>{text?.length || 0}/{maxLength}</div>
-            </div>
-        
-            <div class="mt-2 text-end">
-                <Button
-                    color="primary"
-                    disabled={!text || util.trim(text).length === 0 || isThinking}
-                    on:click={() => sendRequest()}
-                >
-                    {'Send'}
-                </Button>
-            </div>
-        
-            {#if isThinking}
-                <div class="knowledge-loader mt-4">
-                    <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
-                </div>
-            {:else if requestDone && !!result}
-                <div
-                    class="instruction-result-container mt-3"
-                    in:fly={{ y: -10, duration: 500 }}
-                >
-                    <div class="instruct-header text-primary fw-bold">
-                        <div>{'Response'}</div>
-                        <div>
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <i
-                                class="mdi mdi-close-thick text-danger clickable"
-                                on:click={() => closeResponse()}
-                            />
-                        </div>
-                    </div>
-                    <div class="instruction-result-body instruction-section instruction-border mt-2">
-                        <Markdown containerClasses={'markdown-dark text-dark'} text={result} rawText />
+
+
+<div style="position: relative;">
+    <LoadingToComplete
+        spinnerStyles={'position: absolute;'}
+        isLoading={isLoading}
+        isError={isError}
+        errorText={errorText}
+    />
+    <div class="d-xl-flex">
+        <div class="w-100">
+            <div class="instruction-container mb-4">
+                <textarea
+                    class='form-control knowledge-textarea'
+                    rows={8}
+                    maxlength={maxLength}
+                    disabled={isThinking}
+                    placeholder={'Enter input message...'}
+                    bind:value={text}
+                    on:keydown={(e) => pressKey(e)}
+                />
+                <div class="text-secondary text-count d-flex justify-content-between">
+                    <div>
+                        {#if elapsedTime}
+                            {`Elapsed time: ${elapsedTime}`}
+                        {/if}
                     </div>
+                    <div>{text?.length || 0}/{maxLength}</div>
                 </div>
-            {:else if requestDone && !result}
-                <div class="mt-3">
-                    <h4 class="text-secondary text-center">{"Ehhh, no idea..."}</h4>
+            
+                <div class="mt-2 text-end">
+                    <Button
+                        color="primary"
+                        disabled={!text || util.trim(text).length === 0 || isThinking}
+                        on:click={() => sendRequest()}
+                    >
+                        {'Send'}
+                    </Button>
                 </div>
-            {/if}
-        </div>
-    </div>
-</div>
-
-<div class="d-xl-flex mt-4 mb-5">
-	<div class="w-100">
-        <Row>
-            <Col lg="7">
-                <div class="instruct-text-header text-primary fw-bold mb-2">
-                    <div class="line-align-center">
-                        {'Instruction'}
+            
+                {#if isThinking}
+                    <div class="knowledge-loader mt-4">
+                        <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
                     </div>
-                    <div class="line-align-center">
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <!-- svelte-ignore a11y-no-static-element-interactions -->
-                        <!-- <i
-                            class="mdi mdi-refresh text-primary clickable"
-                            data-bs-toggle="tooltip"
-                            data-bs-placement="bottom"
-                            title={'Reset'}
-                            on:click={e => resetInstruction()}
-                        /> -->
-                        <div class="demo-tooltip-icon line-align-center" id="demo-tooltip">
-                            <i class="bx bx-info-circle" />
+                {:else if requestDone && !!result}
+                    <div
+                        class="instruction-result-container mt-3"
+                        in:fly={{ y: -10, duration: 500 }}
+                    >
+                        <div class="instruct-header text-primary fw-bold">
+                            <div>{'Response'}</div>
+                            <div>
+                                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                                <i
+                                    class="mdi mdi-close-thick text-danger clickable"
+                                    on:click={() => closeResponse()}
+                                />
+                            </div>
+                        </div>
+                        <div class="instruction-result-body instruction-section instruction-border mt-2">
+                            <Markdown containerClasses={'markdown-dark text-dark'} text={result} rawText />
                         </div>
-                        <Tooltip target="demo-tooltip" placement="right" class="demo-tooltip-note">
-                            <div>Please select an agent to proceed!</div>
-                        </Tooltip>
                     </div>
-                </div>
-            </Col>
-            <Col lg="5"></Col>
-        </Row>
-        <Row class="instruct-setting-container">
-            <Col lg="7">
-                <div>
-                    <div class="instruct-setting-section" style="gap: 2px;">
-                        <textarea
-                            class='form-control knowledge-textarea'
-                            rows={19}
-                            maxlength={maxLength}
-                            disabled
-                            placeholder={''}
-                            bind:value={instruction}
-                        />
-                        <!-- <div class="text-secondary text-end text-count">
-                            <div>{instruction?.length || 0}/{maxLength}</div>
-                        </div> -->
+                {:else if requestDone && !result}
+                    <div class="mt-3">
+                        <h4 class="text-secondary text-center">{"Ehhh, no idea..."}</h4>
                     </div>
-                </div>
-            </Col>
-            <Col lg="5" class="instruction-gap">
-                <Card>
-                    <CardBody>
-                        <NavBar
-                            id={'instruction-nav-container'}
-                            disableDefaultStyles
-                            containerClasses={'nav-tabs-secondary'}
-                        >
-                            {#each tabs as tab, idx}
-                            <NavItem
-                                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
-                                navBtnStyles={'text-transform: none;'}
-                                navBtnId={`${tab.name}-tab`}
-                                dataBsTarget={`#${tab.name}-tab-pane`}
-                                ariaControls={`${tab.name}-tab-pane`}
-                                navBtnText={tab.displayText}
-                                active={tab.name === selectedTab}
-                                onClick={() => handleTabClick(tab.name)}
-                            />
-                            {/each}
-                        </NavBar>
-                        
-                        <div class:hide={selectedTab !== 'instruction-agent'}>
-                            <InstructionAgent
-                                agents={agents}
-                                disabled={isThinking}
-                                on:selectAgent={e => onAgentSelected(e)}
-                            />
-                        </div>
-                        <div class:hide={selectedTab !== 'instruction-llm'}>
-                            <InstructionLlm
-                                llmConfigs={llmConfigs}
-                                disabled={isThinking}
-                                selectedProvider={selectedProvider}
-                                selectedModel={selectedModel}
-                                on:selectLlm={e => onLlmSelected(e)}
-                            />
+                {/if}
+            </div>
+        </div>
+    </div>
+
+    <div class="d-xl-flex mt-4 mb-5">
+        <div class="w-100">
+            <Row>
+                <Col lg="7">
+                    <div class="instruct-text-header text-primary fw-bold mb-2">
+                        <div class="line-align-center">
+                            {'Instruction'}
                         </div>
-                        <div class:hide={selectedTab !== 'instruction-states'}>
-                            <InstructionState
-                                bind:states={states}
-                                disabled={isThinking}
-                            />
+                        <div class="line-align-center">
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <!-- <i
+                                class="mdi mdi-refresh text-primary clickable"
+                                data-bs-toggle="tooltip"
+                                data-bs-placement="bottom"
+                                title={'Reset'}
+                                on:click={e => resetInstruction()}
+                            /> -->
+                            <div class="demo-tooltip-icon line-align-center" id="demo-tooltip">
+                                <i class="bx bx-info-circle" />
+                            </div>
+                            <Tooltip target="demo-tooltip" placement="right" class="demo-tooltip-note">
+                                <div>Please select an agent to proceed!</div>
+                            </Tooltip>
                         </div>
-                        <div class:hide={selectedTab !== 'instruction-coding'}>
-                            <InstructionCoding
-                                bind:selectedCodeScript={selectedCodeScript}
-                                bind:args={args}
-                                codeScripts={codeScripts}
-                                disabled={isThinking}
+                    </div>
+                </Col>
+                <Col lg="5"></Col>
+            </Row>
+            <Row class="instruct-setting-container">
+                <Col lg="7">
+                    <div>
+                        <div class="instruct-setting-section" style="gap: 2px;">
+                            <textarea
+                                class='form-control knowledge-textarea'
+                                rows={19}
+                                maxlength={maxLength}
+                                disabled
+                                placeholder={''}
+                                bind:value={instruction}
                             />
+                            <!-- <div class="text-secondary text-end text-count">
+                                <div>{instruction?.length || 0}/{maxLength}</div>
+                            </div> -->
                         </div>
-                    </CardBody>
-                </Card>
-                
-            </Col>
-        </Row>
+                    </div>
+                </Col>
+                <Col lg="5" class="instruction-gap">
+                    <Card>
+                        <CardBody>
+                            <NavBar
+                                id={'instruction-nav-container'}
+                                disableDefaultStyles
+                                containerClasses={'nav-tabs-secondary'}
+                            >
+                                {#each tabs as tab, idx}
+                                <NavItem
+                                    containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
+                                    navBtnStyles={'text-transform: none;'}
+                                    navBtnId={`${tab.name}-tab`}
+                                    dataBsTarget={`#${tab.name}-tab-pane`}
+                                    ariaControls={`${tab.name}-tab-pane`}
+                                    navBtnText={tab.displayText}
+                                    active={tab.name === selectedTab}
+                                    onClick={() => handleTabClick(tab.name)}
+                                />
+                                {/each}
+                            </NavBar>
+                            
+                            <div class:hide={selectedTab !== 'instruction-agent'}>
+                                <InstructionAgent
+                                    agents={agents}
+                                    disabled={isThinking}
+                                    on:selectAgent={e => onAgentSelected(e)}
+                                />
+                            </div>
+                            <div class:hide={selectedTab !== 'instruction-llm'}>
+                                <InstructionLlm
+                                    llmConfigs={llmConfigs}
+                                    disabled={isThinking}
+                                    selectedProvider={selectedProvider}
+                                    selectedModel={selectedModel}
+                                    on:selectLlm={e => onLlmSelected(e)}
+                                />
+                            </div>
+                            <div class:hide={selectedTab !== 'instruction-states'}>
+                                <InstructionState
+                                    bind:states={states}
+                                    disabled={isThinking}
+                                />
+                            </div>
+                            <div class:hide={selectedTab !== 'instruction-coding'}>
+                                <InstructionCoding
+                                    bind:selectedCodeScript={selectedCodeScript}
+                                    bind:args={args}
+                                    codeScripts={codeScripts}
+                                    disabled={isThinking}
+                                />
+                            </div>
+                        </CardBody>
+                    </Card>
+                    
+                </Col>
+            </Row>
+        </div>
     </div>
 </div>
\ No newline at end of file

From 97cea81fe90e5897f18272026e9eeeb13188ddb6 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Fri, 21 Nov 2025 16:13:03 -0600
Subject: [PATCH 3/4] refine page loading

---
 src/lib/common/shared/GlobalHeader.svelte     |  29 ++
 src/lib/helpers/http.js                       |  15 +-
 src/lib/helpers/utils/common.js               |  13 +
 src/lib/scss/custom/common/_common.scss       |  14 +
 src/lib/scss/custom/components/_loader.scss   |   2 +-
 src/lib/services/agent-service.js             |   6 +-
 src/routes/+layout.svelte                     |  36 --
 src/routes/VerticalLayout/Index.svelte        |  15 +-
 src/routes/VerticalLayout/Sidebar.svelte      |  65 ++--
 src/routes/chat/+page.svelte                  |   6 +-
 src/routes/chat/[agentId]/+page.svelte        |  10 +-
 .../[conversationId]/chat-box.svelte          |  17 +-
 src/routes/page/+layout.svelte                |   3 +-
 src/routes/page/agent/+page.svelte            |  26 +-
 src/routes/page/agent/[agentId]/+page.svelte  |  25 +-
 .../agent-components/agent-rule.svelte        |   8 +-
 .../page/agent/[agentId]/build/+page.svelte   |  26 +-
 src/routes/page/agent/card-agent.svelte       |  36 +-
 .../page/agent/code-scripts/+page.svelte      | 113 +++---
 src/routes/page/conversation/+page.svelte     |  29 +-
 .../[conversationId]/+page.svelte             |  53 ++-
 .../[conversationId]/conv-dialogs.svelte      |   5 +-
 src/routes/page/instruction/log/+page.svelte  |  12 +-
 .../page/instruction/testing/+page.svelte     | 329 +++++++++---------
 .../knowledge-base/documents/+page.svelte     |  41 ++-
 .../question-answer/+page.svelte              |  22 +-
 src/routes/page/plugin/+page.svelte           |   8 +-
 src/routes/page/roles/+page.svelte            |  15 +-
 src/routes/page/setting/+page.svelte          |   1 +
 src/routes/page/task/+page.svelte             |  21 +-
 src/routes/page/users/+page.svelte            |  24 +-
 31 files changed, 578 insertions(+), 447 deletions(-)
 create mode 100644 src/lib/common/shared/GlobalHeader.svelte

diff --git a/src/lib/common/shared/GlobalHeader.svelte b/src/lib/common/shared/GlobalHeader.svelte
new file mode 100644
index 00000000..d54e0c38
--- /dev/null
+++ b/src/lib/common/shared/GlobalHeader.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { globalErrorStore, loaderStore } from '$lib/helpers/store';
+
+    /** @type {boolean} */
+	export let isLoading = false;
+	export let hasError = false;
+
+	/** @type {any} */
+	let loaderUnsubscriber;
+	/** @type {any} */
+	let errorUnsubscriber;
+
+    onMount(() => {
+        window?.speechSynthesis?.cancel();
+        loaderUnsubscriber = loaderStore.subscribe(value => {
+			isLoading = value;
+		});
+
+		errorUnsubscriber = globalErrorStore.subscribe(value => {
+			hasError = value;
+		});
+    });
+
+    onDestroy(() => {
+        loaderUnsubscriber?.();
+		errorUnsubscriber?.();
+    });
+</script>
\ No newline at end of file
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index f33c447f..8e49d548 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -31,7 +31,7 @@ const retryQueue = {
     /** @param {{config: import('axios').InternalAxiosRequestConfig, resolve: (value: any) => void, reject: (reason?: any) => void}} item */
     enqueue(item) {
         this.queue.push(item);
-
+        console.log('queue', this.queue.length);
         if (!this.isRefreshingToken) {
             const user = getUserStore();
             if (!isTokenExired(user.expires)) {
@@ -130,7 +130,7 @@ axios.interceptors.response.use(
         loaderStore.set(false);
         const originalRequest = error?.config || {};
         const user = getUserStore();
-        console.log("renew token count.", user.renew_token_count);
+
         if (!user?.token || user.renew_token_count >= retryQueue.maxRenewTokenCount) {
             retryQueue.queue = [];
             redirectToLogin();
@@ -209,7 +209,6 @@ function skipLoader(config) {
     /** @type {RegExp[]} */
     const getRegexes = [
         new RegExp('http(s*)://(.*?)/plugin/menu', 'g'),
-        new RegExp('http(s*)://(.*?)/settings', 'g'),
         new RegExp('http(s*)://(.*?)/setting/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/roles', 'g'),
         new RegExp('http(s*)://(.*?)/role/options', 'g'),
@@ -222,9 +221,6 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
         new RegExp('http(s*)://(.*?)/agent/tasks', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
-        new RegExp('http(s*)://(.*?)/conversation', 'g'),
-        new RegExp('http(s*)://(.*?)/conversations/(.*?)/dialogs', 'g'),
-        new RegExp('http(s*)://(.*?)/conversations', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/llm-configs', 'g'),
@@ -235,8 +231,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g'),
-        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g'),
-        
+        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
@@ -287,7 +282,9 @@ function skipGlobalError(config) {
     ];
 
     /** @type {RegExp[]} */
-    const getRegexes = [];
+    const getRegexes = [
+        new RegExp('http(s*)://(.*?)/agents', 'g')
+    ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
         return true;
diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js
index e6170626..75c13a82 100644
--- a/src/lib/helpers/utils/common.js
+++ b/src/lib/helpers/utils/common.js
@@ -175,6 +175,19 @@ export function splitTextByCase(str) {
     return text;
 }
 
+/**
+ * @param {string} url
+ */
+export function getCleanUrl(url) {
+    if (!url) return url;
+
+    if (url.startsWith('/')) {
+        url = url.substring(1);
+    }
+
+    return url;
+}
+
 /**
  * @param {string} timeRange
  * @returns {{ startTime: string | null, endTime: string | null }}
diff --git a/src/lib/scss/custom/common/_common.scss b/src/lib/scss/custom/common/_common.scss
index f23a183f..e4230d5d 100644
--- a/src/lib/scss/custom/common/_common.scss
+++ b/src/lib/scss/custom/common/_common.scss
@@ -204,3 +204,17 @@ button:focus {
     text-overflow: ellipsis;
   }
 }
+
+.text-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+    background: none;
+  }
+}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_loader.scss b/src/lib/scss/custom/components/_loader.scss
index 39c7979d..a095d4ce 100644
--- a/src/lib/scss/custom/components/_loader.scss
+++ b/src/lib/scss/custom/components/_loader.scss
@@ -1,5 +1,5 @@
 .loader {
-    position: fixed;
+    position: absolute;
     z-index: 9999;
     background-color: rgba(255, 255, 255, 0.8);
     top: 0;
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index 4b6d0995..caa9e172 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -16,9 +16,10 @@ export async function getSettings() {
  * Get agent list
  * @param {import('$agentTypes').AgentFilter} filter
  * @param {boolean} checkAuth
+ * @param {AbortSignal | null} signal
  * @returns {Promise<import('$commonTypes').PagedItems<import('$agentTypes').AgentModel>>}
  */
-export async function getAgents(filter, checkAuth = false) {
+export async function getAgents(filter, checkAuth = false, signal = null) {
     let url = endpoints.agentListUrl;
     const response = await axios.get(url, {
         params: {
@@ -28,7 +29,8 @@ export async function getAgents(filter, checkAuth = false) {
         paramsSerializer: {
             dots: true,
             indexes: null,
-        }
+        },
+        signal: signal || undefined
     });
     return response.data;
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e56fb9f1..783b44c7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,6 @@
 <script>
 	import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
 	import en from '$lib/langs/en.json';
-	import '$lib/helpers/http';
-	import { onDestroy, onMount } from 'svelte';
-	import { globalErrorStore, loaderStore } from '$lib/helpers/store';
-	import Loader from '$lib/common/Loader.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 
 	addMessages('en', en);
 
@@ -13,39 +8,8 @@
 		fallbackLocale: 'en',
 		initialLocale: getLocaleFromNavigator()
 	});
-
-	/** @type {boolean} */
-	let isLoading = false;
-	let hasError = false;
-
-	/** @type {any} */
-	let loaderUnsubscriber;
-	/** @type {any} */
-	let errorUnsubscriber;
-
-	onMount(() => {
-		window?.speechSynthesis?.cancel();
-		loaderUnsubscriber = loaderStore.subscribe(value => {
-			isLoading = value;
-		});
-
-		errorUnsubscriber = globalErrorStore.subscribe(value => {
-			hasError = value;
-		});
-	})
-
-	onDestroy(() => {
-		loaderUnsubscriber?.();
-		errorUnsubscriber?.();
-	});
 </script>
 
-{#if isLoading}
-	<Loader size={50}/>
-{/if}
-
-<LoadingToComplete isError={hasError} />
-
 <slot />
 
 <style lang="scss">
diff --git a/src/routes/VerticalLayout/Index.svelte b/src/routes/VerticalLayout/Index.svelte
index 1bc6ea9a..b6beeb54 100644
--- a/src/routes/VerticalLayout/Index.svelte
+++ b/src/routes/VerticalLayout/Index.svelte
@@ -5,6 +5,8 @@
 	import { getPluginMenu } from '$lib/services/plugin-service';
 	import { myInfo } from '$lib/services/auth-service';
 	import { globalMenuStore } from '$lib/helpers/store';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import GlobalHeader from '$lib/common/shared/GlobalHeader.svelte';
 	import Header from './Header.svelte';
 	import Sidebar from './Sidebar.svelte';
 	import Footer from './Footer.svelte';
@@ -15,6 +17,10 @@
 	/** @type {import("$userTypes").UserModel} */
 	let user;
 
+	/** @type {boolean} */
+	let isLoading = false;
+	let hasError = false;
+
 	const toggleRightBar = () => {
 		if (browser) {
 			if (document.body.classList.contains('right-bar-enabled')) {
@@ -39,6 +45,8 @@
 	});
 </script>
 
+<GlobalHeader bind:isLoading={isLoading} bind:hasError={hasError} />
+
 <div id="layout-wrapper">
 	<Header user={user} toggleRightBar={() => toggleRightBar()} />
 	{#if menu}
@@ -46,7 +54,12 @@
 	{/if}
 	<div class="main-content">
 		<div class="page-content">
-			<div class="container-fluid">
+			<div class="container-fluid" style="position: relative;">
+				<LoadingToComplete
+					spinnerSize={50}
+					isLoading={isLoading}
+					isError={hasError}
+				/>
 				<slot />
 			</div>
 		</div>
diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte
index 03dbdd46..610e2605 100644
--- a/src/routes/VerticalLayout/Sidebar.svelte
+++ b/src/routes/VerticalLayout/Sidebar.svelte
@@ -1,14 +1,15 @@
 <script>
-// @ts-nocheck
-
+	// @ts-nocheck
 	import { onMount, afterUpdate } from 'svelte';
-	import 'overlayscrollbars/overlayscrollbars.css';
-	import { OverlayScrollbars } from 'overlayscrollbars';
-	import Link from 'svelte-link';
-	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import { _ } from 'svelte-i18n';
+	import Link from 'svelte-link';
+	import 'overlayscrollbars/overlayscrollbars.css';
+	import { OverlayScrollbars } from 'overlayscrollbars';
 	import { globalEventStore } from '$lib/helpers/store';
+	import { getCleanUrl } from '$lib/helpers/utils/common';
 
 	/** @type {import('$pluginTypes').PluginMenuDefModel[]} */
 	export let menu;
@@ -16,9 +17,9 @@
 	// after routing complete call afterUpdate function
 	afterUpdate(() => {
 		removeActiveDropdown();
-		const curUrl = getPathUrl();
+		const curUrl = getCleanUrl($page.url.pathname);
 		if (curUrl) {
-			let item = document.querySelector(".vertical-menu a[href='" + curUrl + "']");
+			const item = document.querySelector(".vertical-menu a[id='" + curUrl + "']");
 			if (item) {
 				item.classList.add('mm-active');
 				const parent1 = item.parentElement;
@@ -62,12 +63,13 @@
 
 	onMount(async () => {
 		const menuElement = document.querySelector('#vertical-menu');
+		// @ts-ignore
 		OverlayScrollbars(menuElement, options);
 		activeMenu();
 
-		const curUrl = getPathUrl();
+		const curUrl = getCleanUrl($page.url.pathname);
 		if (curUrl) {
-			let item = document.querySelector(".vertical-menu a[href='" + curUrl + "']");
+			const item = document.querySelector(".vertical-menu a[id='" + curUrl + "']");
 			if (item) {
 				item.classList.add('mm-active');
 				item.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -183,26 +185,28 @@
 
 	const menuItemScroll = () => {
 		if (browser) {
-			const curUrl = getPathUrl();
-			let item = document.querySelector(".vertical-menu a[href='" + curUrl + "']")?.offsetTop;
-			if (item && item > 300) {
-				item = item - 300;
+			const curUrl = getCleanUrl($page.url.pathname);
+			const item = document.querySelector(".vertical-menu a[id='" + curUrl + "']");
+			// @ts-ignore
+			let offset = item?.offsetTop;
+			if (offset && offset > 300) {
+				offset = offset - 300;
 				const menuElement = document.getElementById('vertical-menu');
 				menuElement?.scrollTo({
-					top: item,
+					top: offset,
 					behavior: 'smooth'
 				});
 			}
 		}
 	};
 
-	const getPathUrl = () => {
-		const path = $page.url.pathname;
-		return path?.startsWith('/') ? path.substring(1) : path;
-	};
+	/** @param {string} url */
+	const goToPage = (url) => {
+		if (!url) return;
 
-	const goToPage = () => {
+		url = getCleanUrl(url);
 		globalEventStore.reset();
+		goto(url);
 	}
 </script>
 
@@ -217,7 +221,7 @@
 						<li class="menu-title" key="t-menu">{$_(item.label)}</li>
 					{:else if item.subMenu}
 						<li>
-							<Link href={null} class="has-arrow waves-effect">
+							<Link class="has-arrow waves-effect clickable" href={null}>
 								<i class={item.icon} />
 								<span>{$_(item.label)}</span>
 							</Link>
@@ -225,25 +229,34 @@
 								{#each item.subMenu as subMenu}
 									{#if subMenu.isChildItem}
 										<li>
-											<Link href="#" class="has-arrow waves-effect">
+											<Link class="has-arrow waves-effect clickable" href={null}>
 												<span>{$_(subMenu.label)}</span>
 											</Link>
 											<ul class="sub-menu mm-collapse">
 												{#each subMenu.childItems as childItem}
-													<li><Link href={childItem.link} on:click={() => goToPage()}>{$_(childItem.label)}</Link></li>
+													<li>
+														<Link class="clickable" id={getCleanUrl(childItem.link)} href={null} on:click={() => goToPage(childItem.link)}>
+															{$_(childItem.label)}
+														</Link>
+													</li>
 												{/each}
 											</ul>
 										</li>
 									{:else}
-										<li><Link href={subMenu.link} on:click={() => goToPage()}>{$_(subMenu.label)}</Link></li>
+										<li>
+											<Link class="clickable" id={getCleanUrl(subMenu.link)} href={null} on:click={() => goToPage(subMenu.link)}>
+												{$_(subMenu.label)}
+											</Link>
+										</li>
 									{/if}
 								{/each}
 							</ul>
 						</li>
 					{:else}
 						<li>
-							<Link class="waves-effect" href={item.link} on:click={() => goToPage()} >
-								<i class={item.icon} /> <span>{$_(item.label)}</span>
+							<Link class="waves-effect clickable" id={getCleanUrl(item.link)} href={null} on:click={() => goToPage(item.link)} >
+								<i class={item.icon} /> 
+								<span>{$_(item.label)}</span>
 							</Link>
 						</li>
 					{/if}
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 30f02cc0..3d9e8a2e 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -1,11 +1,9 @@
 <script>
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-    import { page } from '$app/stores';
     import { onMount } from 'svelte';
+    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { getSettingDetail } from '$lib/services/setting-service';
     import { getAgents } from '$lib/services/agent-service.js'
-    
-    const params = $page.params;
+
     /** @type {import('$agentTypes').AgentFilter} */
     const filter = {
         pager: { page: 1, size: 10, count: 0 }
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
index 857aefdf..1401029c 100644
--- a/src/routes/chat/[agentId]/+page.svelte
+++ b/src/routes/chat/[agentId]/+page.svelte
@@ -2,6 +2,7 @@
     // This page is used to initialize a new conversation for client
     import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
     import { onMount } from 'svelte';
     import { newConversation } from '$lib/services/conversation-service.js';
     import { getToken, setToken } from '$lib/services/auth-service.js'
@@ -39,15 +40,16 @@
         }
 
         conversationId = conversation.id;
-        const chatUrl = new URL(`chat/${agentId}/${conversationId}`, window.location.origin);
-        
+        const path = `chat/${agentId}/${conversationId}`;
+
         const searchParams = new URLSearchParams();
         if (agentId === LEARNER_AGENT_ID) {
             searchParams.append('mode', TRAINING_MODE);
         }
 
-        chatUrl.search = searchParams?.toString();
-        window.location.href = chatUrl.toString();
+        const search = searchParams?.toString();
+        const url = search ? `${path}?${search}` : path;
+        goto(url);
     });
 </script>
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index e320a73f..bbf0a5a1 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -3,6 +3,7 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import Viewport from 'svelte-viewport-info';
 	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import Swal from 'sweetalert2';
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
@@ -21,7 +22,7 @@
 		conversationUserStateStore,
 		conversationUserMessageStore,
 		conversationUserAttachmentStore,
-		resetStorage
+		resetStorage,
 	} from '$lib/helpers/store.js';
 	import {
 		sendMessageToHub,
@@ -73,6 +74,7 @@
 	import { realtimeChat } from '$lib/services/realtime-chat-service';
 	import { webSpeech } from '$lib/services/web-speech';
 	import { delay } from '$lib/helpers/utils/common';
+	import GlobalHeader from '$lib/common/shared/GlobalHeader.svelte';
 
 	
 	const options = {
@@ -718,10 +720,11 @@
 
 	/** @param {import('$conversationTypes').ConversationModel} conversation */
 	function redirectToNewConversation(conversation) {
-		const url = new URL(`chat/${params.agentId}/${conversation.id}`, window.location.origin);
+		const path = `chat/${params.agentId}/${conversation.id}`;
 		const searchParams = $page.url.searchParams;
-		url.search = searchParams?.toString();
-		window.location.href = url.toString();
+		const search = searchParams?.toString();
+		const url = search ? `${path}?${search}` : path;
+		goto(url);
 	}
 
 	function pinDashboard() {
@@ -1522,7 +1525,13 @@
 
 <svelte:window on:resize={() => resizeChatWindow()}/>
 
+<GlobalHeader
+	bind:isLoading={isLoading}
+	bind:hasError={isError}
+/>
+
 <LoadingToComplete
+	spinnerStyles={'position: fixed;'}
 	spinnerSize={35}
 	isLoading={isLoading}
 	isComplete={isComplete}
diff --git a/src/routes/page/+layout.svelte b/src/routes/page/+layout.svelte
index da0bf972..b707dab6 100644
--- a/src/routes/page/+layout.svelte
+++ b/src/routes/page/+layout.svelte
@@ -5,9 +5,8 @@
 </svelte:head>
 
 <script>
-	import VerticalLayout from '../VerticalLayout/Index.svelte';
-	import '$lib/helpers/http';
 	import LiveChat from '$lib/common/LiveChatEntry.svelte';
+	import VerticalLayout from '../VerticalLayout/Index.svelte';
 
 	let component = VerticalLayout;
 </script>
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index 232607d2..0c9a3d85 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -15,12 +15,12 @@
   	import { myInfo } from '$lib/services/auth-service';
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { globalEventStore } from '$lib/helpers/store';
-	import CardAgent from './card-agent.svelte';
 	import {
 		getPagingQueryParams,
 		setUrlQueryParams,
 		goToUrl
 	} from '$lib/helpers/utils/common';
+	import CardAgent from './card-agent.svelte';
 	
 	
   	const firstPage = 1;
@@ -28,6 +28,10 @@
 
 	/** @type {boolean} */
     let isLoading = false;
+	let isPageMounted = false;
+
+	/** @type {AbortController | null | undefined} */
+	let abortController;
 
 	/** @type {import('$commonTypes').PagedItems<import('$agentTypes').AgentModel>} */
   	let agents = { items: [], count: 0 };
@@ -63,6 +67,7 @@
 	let selectedAgentLabels = [];
 
 	onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -103,16 +108,23 @@
 	});
 
 	onDestroy(() => {
+		isPageMounted = false;
 		unsubscriber?.();
 	});
 
   	function getPagedAgents() {
 		isLoading = true;
+
+		if (abortController) {
+			abortController.abort();
+		}
+		abortController = new AbortController();
+
 		const innerFilter = {
 			...filter,
 			similarName: filter.similarName ? decodeURIComponent(filter.similarName) : null
 		};
-    	getAgents(innerFilter, true).then(data => {
+    	getAgents(innerFilter, true, abortController?.signal).then(data => {
 			agents = data;
 		}).catch(() => {
 			agents = { items: [], count: 0 };
@@ -187,7 +199,10 @@
 			queryParams.push({ key: 'similarName', value: encodeURIComponent(filter.similarName) });
 		}
 
-		setUrlQueryParams($page.url, queryParams, () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		setUrlQueryParams($page.url, queryParams, () => {
+			if (!isPageMounted) return;
+			goToUrl(`${$page.url.pathname}${$page.url.search}`)
+		});
 	}
 
 	/**
@@ -249,7 +264,10 @@
 
 <HeadTitle title="{$_('List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('List')}" />
-<LoadingToComplete isLoading={isLoading} />
+
+<LoadingToComplete
+	isLoading={isLoading}
+/>
 
 <div class="agents-header-container mb-4">
 	<div>
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 7b1e4d3f..41313b85 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -39,20 +39,29 @@
     let isComplete = false;
 
     const duration = 3000;
-    const params = $page.params;
 
-    onMount(async () => {
+    $: agentId = $page.params.agentId;
+
+    $: if (agentId) {
+        loadAgent(agentId);
+    }
+
+    async function loadAgent(/** @type {string} */ id) {
         isLoading = true;
-        user = await myInfo();
-        agent = await getAgent(params.agentId);
+        agent = await getAgent(id);
         isLoading = false;
+    }
+
+    onMount(async () => {
+        user = await myInfo();
 
         unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
 			if (event.name !== GlobalEvent.Search) return;
 
             const similarName = event.payload?.trim();
             if (similarName) {
-                window.location.href = `/page/agent?page=${1}&pageSize=${12}&similarName=${encodeURIComponent(similarName)}`;
+                const url = `page/agent?page=${1}&pageSize=${12}&similarName=${encodeURIComponent(similarName)}`;
+                window.location.href = url;
             }
 		});
     });
@@ -183,7 +192,11 @@
 
 <HeadTitle title="{$_('Agent Overview')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Agent Overview')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} />
+
+<LoadingToComplete
+    isLoading={isLoading}
+    isComplete={isComplete}
+/>
 
 {#if agent}
 <div>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index da5689d0..2744e2a8 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -266,7 +266,13 @@
 
 <svelte:window on:resize={() => resizeWindow()}/>
 
-<LoadingToComplete {isLoading} {isComplete} {isError} {successText} {errorText} />
+<LoadingToComplete
+    {isLoading}
+    {isComplete}
+    {isError}
+    {successText}
+    {errorText}
+/>
 
 <Card>
     <CardBody>
diff --git a/src/routes/page/agent/[agentId]/build/+page.svelte b/src/routes/page/agent/[agentId]/build/+page.svelte
index fe412165..31b4a078 100644
--- a/src/routes/page/agent/[agentId]/build/+page.svelte
+++ b/src/routes/page/agent/[agentId]/build/+page.svelte
@@ -1,20 +1,28 @@
 <script>
+	import { onMount } from 'svelte';
 	import { Svelvet, ThemeToggle, Group } from 'svelvet';
+	import { page } from '$app/stores';
+	import { getAgent } from '$lib/services/agent-service.js';
 	import Thickness from './components/Thickness.svelte';
 	import AzureOpenAI from './components/LlmProviders/AzureOpenAI.svelte';
 	import Agent from './components/Agent.svelte';
-	import { page } from '$app/stores';
-	import { getAgent } from '$lib/services/agent-service.js';
-	import { onMount } from 'svelte';
 
+	/** @type {number} */
 	let zoom = 0.8;
-	const params = $page.params;
 
-    /** @type {import('$agentTypes').AgentModel} */
-    let agent;	
-	onMount(async () => {
-		agent = await getAgent(params.agentId);
-	});
+	/** @type {import('$agentTypes').AgentModel} */
+    let agent;
+
+	$: agentId = $page.params.agentId;
+	$: if (agentId) {
+		loadAgent(agentId);
+	}
+    	
+	onMount(async () => {});
+
+	async function loadAgent(/** @type {string} */ id) {
+		agent = await getAgent(id);
+	}
 </script>
 
 <div id="svelet-agent-build">
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index 9a0bcd77..6eb6f8dc 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -1,14 +1,24 @@
 <script>
-  import Link from "svelte-link";
-  import { Badge, Card, CardBody, Col } from '@sveltestrap/sveltestrap';
-  import { utcToLocal } from '$lib/helpers/datetime';
+  import { goto } from '$app/navigation';
   import { _ } from 'svelte-i18n';
+  import { Badge, Button, Card, CardBody, Col } from '@sveltestrap/sveltestrap';
+  import { utcToLocal } from '$lib/helpers/datetime';
 	import { LEARNER_AGENT_ID } from "$lib/helpers/constants";
 	import { AgentExtensions } from "$lib/helpers/utils/agent";
+	import { globalEventStore } from '$lib/helpers/store';
 
   /** @type {import('$agentTypes').AgentModel[]} */
   export let agents;
 
+  /**
+	 * @param {string} url
+	 */
+  function goToPage(url) {
+    if (!url) return;
+    
+    globalEventStore.reset();
+    goto(url);
+  }
 </script>
 
 {#each agents as agent}
@@ -29,9 +39,9 @@
           <div class="flex-grow-1 overflow-hidden">
             <div class="agent-card-header">
               <h5 class="text-truncate font-size-15 line-align-center mb-0">
-                <Link href= "page/agent/{agent.id}" class="text-dark">
+                <Button class="text-dark text-btn font-size-15" on:click={() => goToPage(`page/agent/${agent.id}`)}>
                   {agent.name}
-                </Link>
+                </Button>
               </h5>
               {#if agent.is_router}
               <div
@@ -40,9 +50,9 @@
                 data-bs-placement="bottom"
                 title="Go to flowchart"
               >
-                <Link href={`page/agent/router?agent_id=${agent.id}`} target="_blank">
+                <Button class="text-dark text-btn font-size-15" on:click={() => goToPage(`page/agent/router?agent_id=${agent.id}`)}>
                   <i class="mdi mdi-sitemap" />
-                </Link>
+                </Button>
               </div>
               {/if}
             </div>
@@ -102,20 +112,20 @@
             {utcToLocal(agent.updated_datetime, 'MMM D, YYYY')}
           </li>
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href="page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank" disabled>
+            <Button class="btn btn-primary btn-sm" on:click={() => goToPage(`page/agent/${agent.id}/build`)} disabled>
               <i class="bx bx-wrench" /> {$_('Build')}
-            </Link>
+            </Button>
           </li>
           {#if agent.is_public }      
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href={`/chat/${LEARNER_AGENT_ID}`} class="btn btn-primary btn-sm" target="_blank" disabled>
+            <Button class="btn btn-primary btn-sm" on:click={() => goToPage(`chat/${LEARNER_AGENT_ID}`)} disabled>
               <i class="bx bx-book-open" /> {$_('Train')}
-            </Link>
+            </Button>
           </li>
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank" disabled={!AgentExtensions.chatable(agent)}>
+            <Button class="btn btn-primary btn-sm" color="primary" on:click={() => goToPage(`chat/${agent.id}`)} disabled={!AgentExtensions.chatable(agent)}>
               <i class="bx bx-chat" /> {$_('Test')}
-            </Link>
+            </Button>
           </li>
           {/if}
         </ul>
diff --git a/src/routes/page/agent/code-scripts/+page.svelte b/src/routes/page/agent/code-scripts/+page.svelte
index 9de78f84..8e5a3c93 100644
--- a/src/routes/page/agent/code-scripts/+page.svelte
+++ b/src/routes/page/agent/code-scripts/+page.svelte
@@ -175,63 +175,60 @@
 <HeadTitle title="{$_('Code Scripts')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Code Scripts')}" />
 
-
-<div style="position: relative;">
-    <LoadingToComplete
-        spinnerStyles={'position: absolute;'}
-        {isLoading}
-        {isComplete}
-        {isError}
-    />
-    <Card>
-        <CardBody class="border-bottom">
-            <Row class="g-3">
-                <Col lg="3" class="d-flex flex-column gap-1">
-                    <div class="fw-bold">Agent</div>
-                    <Select
-                        tag={'agent-select'}
-                        placeholder={'Select agent'}
-                        selectedText={'agents'}
-                        searchMode
-                        selectedValues={selectedAgentId ? [selectedAgentId] : []}
-                        options={agentOptions}
-                        on:select={e => changeAgent(e)}
-                    />
-                </Col>
-            </Row>
-        </CardBody>
-    </Card>
-
-    {#if !!selectedAgentId}
-        <ScriptEditor
-            title={'Source scripts'}
-            scriptType={AgentCodeScriptType.Src}
-            bind:scriptObj={srcScriptObj}
-        />
-        <ScriptEditor
-            title={'Test scripts'}
-            scriptType={AgentCodeScriptType.Test}
-            bind:scriptObj={testScriptObj}
-        />
-
-        {#if ADMIN_ROLES.includes(user?.role || '')}
-        <Row>
-            <div class="hstack gap-2 my-4">
-                <Button
-                    class="btn btn-soft-primary"
-                    disabled={!selectedAgentId}
-                    on:click={() => saveCodeScripts()}
-                >
-                    {$_('Save')}
-                </Button>
-                <Button
-                    class="btn btn-warning"
-                    disabled={!selectedAgentId}
-                    on:click={() => resetCodeScripts()}>
-                    {$_('Reset')}
-                </Button>
-            </div>
+<LoadingToComplete
+    {isLoading}
+    {isComplete}
+    {isError}
+/>
+
+<Card>
+    <CardBody class="border-bottom">
+        <Row class="g-3">
+            <Col lg="3" class="d-flex flex-column gap-1">
+                <div class="fw-bold">Agent</div>
+                <Select
+                    tag={'agent-select'}
+                    placeholder={'Select agent'}
+                    selectedText={'agents'}
+                    searchMode
+                    selectedValues={selectedAgentId ? [selectedAgentId] : []}
+                    options={agentOptions}
+                    on:select={e => changeAgent(e)}
+                />
+            </Col>
         </Row>
-        {/if}
+    </CardBody>
+</Card>
+
+{#if !!selectedAgentId}
+    <ScriptEditor
+        title={'Source scripts'}
+        scriptType={AgentCodeScriptType.Src}
+        bind:scriptObj={srcScriptObj}
+    />
+    <ScriptEditor
+        title={'Test scripts'}
+        scriptType={AgentCodeScriptType.Test}
+        bind:scriptObj={testScriptObj}
+    />
+
+    {#if ADMIN_ROLES.includes(user?.role || '')}
+    <Row>
+        <div class="hstack gap-2 my-4">
+            <Button
+                class="btn btn-soft-primary"
+                disabled={!selectedAgentId}
+                on:click={() => saveCodeScripts()}
+            >
+                {$_('Save')}
+            </Button>
+            <Button
+                class="btn btn-warning"
+                disabled={!selectedAgentId}
+                on:click={() => resetCodeScripts()}>
+                {$_('Reset')}
+            </Button>
+        </div>
+    </Row>
     {/if}
-</div>
\ No newline at end of file
+{/if}
\ No newline at end of file
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 8d2b1bc1..be990d80 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -40,6 +40,7 @@
 	let isLoading = false;
 	let isComplete = false;
 	let showStateSearch = false;
+	let isPageMounted = false;
 
     /** @type {import('$commonTypes').PagedItems<import('$conversationTypes').ConversationModel>} */
     let conversations = { count: 0, items: [] };
@@ -101,6 +102,7 @@
     ];
 
     onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -187,7 +189,10 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		], () => {
+			if (!isPageMounted) return;
+			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+		});
 	}
 
 	/** @param {number} pageNum */
@@ -415,6 +420,12 @@
 <HeadTitle title="{$_('Conversation List')}" />
 <Breadcrumb title="{$_('Communication')}" pagetitle="{$_('Conversations')}" />
 
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+	successText={'Delete completed!'}
+/>
+
 <Row>
 	<Col lg="12">
 		<Card>
@@ -465,16 +476,6 @@
 							on:select={e => changeOption(e, 'agent')}
 						/>
 					</Col>
-					<!-- <Col lg="2">
-						<Select
-							tag={'task-select'}
-							placeholder={'Select Task'}
-							selectedText={'task'}
-							selectedValues={[]}
-							options={[]}
-							on:select={e => changeOption(e, 'task')}
-						/>
-					</Col>					 -->
 					<Col lg="2">
 						<Select
 							tag={'task-select'}
@@ -528,12 +529,6 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
-					<LoadingToComplete
-						spinnerStyles={'position: absolute;'}
-						isLoading={isLoading}
-						isComplete={isComplete}
-						successText={'Delete completed!'}
-					/>
 					<Table class="align-middle nowrap" bordered>
 						<thead>
 							<tr>
diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
index d4d68e8d..d1071cf8 100644
--- a/src/routes/page/conversation/[conversationId]/+page.svelte
+++ b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
     import Swal from 'sweetalert2';
     import { _ } from 'svelte-i18n';
     import { Col, Row, Button } from '@sveltestrap/sveltestrap';
@@ -43,7 +44,7 @@
         }).then(async (result) => {
             if (result.value) {
                 await deleteConversation(conversation.id);
-                window.location.href = "page/conversation";
+                goto("page/conversation");
             }
         });
     }
@@ -53,30 +54,26 @@
 <HeadTitle title={conversation?.title || 'Not found'} />
 <Breadcrumb title="{$_('Conversation')}" pagetitle="{$_('Conversation Detail')}" />
 
-<div style="position: relative;">
-    <LoadingToComplete
-        spinnerStyles={'position: absolute;'}
-        {isLoading}
-    />
-    {#if conversation}
-        <Row>
-            <Col style="flex: 40%;">
-                <Overview {conversation} />
-                <States {conversation} />
-            </Col>
-            <Col style="flex: 60%;">
-                <Dialog {conversation} {dialogs} />
-            </Col>
-        </Row>
-        <Row>
-            <div class="mb-4">
-                <Button
-                    class="btn btn-danger btn-hover rounded"
-                    on:click={() => handleConversationDeletion()}
-                >
-                    <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
-                </Button>
-            </div>
-        </Row>
-    {/if}
-</div>
\ No newline at end of file
+<LoadingToComplete {isLoading} />
+
+{#if conversation}
+    <Row>
+        <Col style="flex: 40%;">
+            <Overview {conversation} />
+            <States {conversation} />
+        </Col>
+        <Col style="flex: 60%;">
+            <Dialog {conversation} {dialogs} />
+        </Col>
+    </Row>
+    <Row>
+        <div class="mb-4">
+            <Button
+                class="btn btn-danger btn-hover rounded"
+                on:click={() => handleConversationDeletion()}
+            >
+                <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
+            </Button>
+        </div>
+    </Row>
+{/if}
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
index 43f64f70..35103396 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
@@ -64,7 +64,10 @@
     }
 </script>
 
-<LoadingToComplete isComplete={isComplete} successText={'Notification sent!'} />
+<LoadingToComplete
+    isComplete={isComplete}
+    successText={'Notification sent!'}
+/>
 
 <DialogModal
     title={'Notification'}
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index 2c0766ac..34590750 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -23,12 +23,11 @@
 	import { TimeRange } from '$lib/helpers/enums';
 	import { TIME_RANGE_OPTIONS } from '$lib/helpers/constants';
 	import LogItem from './log-item.svelte';
-	import Loader from '$lib/common/Loader.svelte';
-	
 
     const firstPage = 1;
 	const pageSize = 15;
     let isLoading = false;
+	let isPageMounted = false;
 
     const initPager = { page: firstPage, size: pageSize };
 
@@ -83,6 +82,7 @@
     ];
 
     onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -180,7 +180,10 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		], () => {
+			if (!isPageMounted) return;
+			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+		});
 	}
 
     /**
@@ -293,6 +296,8 @@
 <HeadTitle title="{$_('Instruction Log')}" />
 <Breadcrumb pagetitle="{$_('Log')}" title="{$_('Instruction')}"/>
 
+<LoadingToComplete isLoading={isLoading} />
+
 <Row>
 	<Col lg="12">
 		<Card>
@@ -393,7 +398,6 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
-					<LoadingToComplete spinnerStyles={'position: absolute;'} isLoading={isLoading} />
 					<Table class="align-middle nowrap users-table" bordered>
 						<thead>
 							<tr>
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index 02db34b1..31404774 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -210,182 +210,179 @@
 <HeadTitle title="{$_('Instruction')}" />
 <Breadcrumb pagetitle="{$_('Testing')}" title="{$_('Instruction')}"/>
 
-
-<div style="position: relative;">
-    <LoadingToComplete
-        spinnerStyles={'position: absolute;'}
-        isLoading={isLoading}
-        isError={isError}
-        errorText={errorText}
-    />
-    <div class="d-xl-flex">
-        <div class="w-100">
-            <div class="instruction-container mb-4">
-                <textarea
-                    class='form-control knowledge-textarea'
-                    rows={8}
-                    maxlength={maxLength}
-                    disabled={isThinking}
-                    placeholder={'Enter input message...'}
-                    bind:value={text}
-                    on:keydown={(e) => pressKey(e)}
-                />
-                <div class="text-secondary text-count d-flex justify-content-between">
-                    <div>
-                        {#if elapsedTime}
-                            {`Elapsed time: ${elapsedTime}`}
-                        {/if}
-                    </div>
-                    <div>{text?.length || 0}/{maxLength}</div>
+<LoadingToComplete
+    isLoading={isLoading}
+    isError={isError}
+    errorText={errorText}
+/>
+
+<div class="d-xl-flex">
+    <div class="w-100">
+        <div class="instruction-container mb-4">
+            <textarea
+                class='form-control knowledge-textarea'
+                rows={8}
+                maxlength={maxLength}
+                disabled={isThinking}
+                placeholder={'Enter input message...'}
+                bind:value={text}
+                on:keydown={(e) => pressKey(e)}
+            />
+            <div class="text-secondary text-count d-flex justify-content-between">
+                <div>
+                    {#if elapsedTime}
+                        {`Elapsed time: ${elapsedTime}`}
+                    {/if}
                 </div>
-            
-                <div class="mt-2 text-end">
-                    <Button
-                        color="primary"
-                        disabled={!text || util.trim(text).length === 0 || isThinking}
-                        on:click={() => sendRequest()}
-                    >
-                        {'Send'}
-                    </Button>
+                <div>{text?.length || 0}/{maxLength}</div>
+            </div>
+        
+            <div class="mt-2 text-end">
+                <Button
+                    color="primary"
+                    disabled={!text || util.trim(text).length === 0 || isThinking}
+                    on:click={() => sendRequest()}
+                >
+                    {'Send'}
+                </Button>
+            </div>
+        
+            {#if isThinking}
+                <div class="knowledge-loader mt-4">
+                    <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
                 </div>
-            
-                {#if isThinking}
-                    <div class="knowledge-loader mt-4">
-                        <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
-                    </div>
-                {:else if requestDone && !!result}
-                    <div
-                        class="instruction-result-container mt-3"
-                        in:fly={{ y: -10, duration: 500 }}
-                    >
-                        <div class="instruct-header text-primary fw-bold">
-                            <div>{'Response'}</div>
-                            <div>
-                                <!-- svelte-ignore a11y-no-static-element-interactions -->
-                                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                <i
-                                    class="mdi mdi-close-thick text-danger clickable"
-                                    on:click={() => closeResponse()}
-                                />
-                            </div>
-                        </div>
-                        <div class="instruction-result-body instruction-section instruction-border mt-2">
-                            <Markdown containerClasses={'markdown-dark text-dark'} text={result} rawText />
+            {:else if requestDone && !!result}
+                <div
+                    class="instruction-result-container mt-3"
+                    in:fly={{ y: -10, duration: 500 }}
+                >
+                    <div class="instruct-header text-primary fw-bold">
+                        <div>{'Response'}</div>
+                        <div>
+                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <i
+                                class="mdi mdi-close-thick text-danger clickable"
+                                on:click={() => closeResponse()}
+                            />
                         </div>
                     </div>
-                {:else if requestDone && !result}
-                    <div class="mt-3">
-                        <h4 class="text-secondary text-center">{"Ehhh, no idea..."}</h4>
+                    <div class="instruction-result-body instruction-section instruction-border mt-2">
+                        <Markdown containerClasses={'markdown-dark text-dark'} text={result} rawText />
                     </div>
-                {/if}
-            </div>
+                </div>
+            {:else if requestDone && !result}
+                <div class="mt-3">
+                    <h4 class="text-secondary text-center">{"Ehhh, no idea..."}</h4>
+                </div>
+            {/if}
         </div>
     </div>
-
-    <div class="d-xl-flex mt-4 mb-5">
-        <div class="w-100">
-            <Row>
-                <Col lg="7">
-                    <div class="instruct-text-header text-primary fw-bold mb-2">
-                        <div class="line-align-center">
-                            {'Instruction'}
-                        </div>
-                        <div class="line-align-center">
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
-                            <!-- <i
-                                class="mdi mdi-refresh text-primary clickable"
-                                data-bs-toggle="tooltip"
-                                data-bs-placement="bottom"
-                                title={'Reset'}
-                                on:click={e => resetInstruction()}
-                            /> -->
-                            <div class="demo-tooltip-icon line-align-center" id="demo-tooltip">
-                                <i class="bx bx-info-circle" />
-                            </div>
-                            <Tooltip target="demo-tooltip" placement="right" class="demo-tooltip-note">
-                                <div>Please select an agent to proceed!</div>
-                            </Tooltip>
+</div>
+
+<div class="d-xl-flex mt-4 mb-5">
+    <div class="w-100">
+        <Row>
+            <Col lg="7">
+                <div class="instruct-text-header text-primary fw-bold mb-2">
+                    <div class="line-align-center">
+                        {'Instruction'}
+                    </div>
+                    <div class="line-align-center">
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <!-- svelte-ignore a11y-no-static-element-interactions -->
+                        <!-- <i
+                            class="mdi mdi-refresh text-primary clickable"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="bottom"
+                            title={'Reset'}
+                            on:click={e => resetInstruction()}
+                        /> -->
+                        <div class="demo-tooltip-icon line-align-center" id="demo-tooltip">
+                            <i class="bx bx-info-circle" />
                         </div>
+                        <Tooltip target="demo-tooltip" placement="right" class="demo-tooltip-note">
+                            <div>Please select an agent to proceed!</div>
+                        </Tooltip>
+                    </div>
+                </div>
+            </Col>
+            <Col lg="5"></Col>
+        </Row>
+        <Row class="instruct-setting-container">
+            <Col lg="7">
+                <div>
+                    <div class="instruct-setting-section" style="gap: 2px;">
+                        <textarea
+                            class='form-control knowledge-textarea'
+                            rows={19}
+                            maxlength={maxLength}
+                            disabled
+                            placeholder={''}
+                            bind:value={instruction}
+                        />
+                        <!-- <div class="text-secondary text-end text-count">
+                            <div>{instruction?.length || 0}/{maxLength}</div>
+                        </div> -->
                     </div>
-                </Col>
-                <Col lg="5"></Col>
-            </Row>
-            <Row class="instruct-setting-container">
-                <Col lg="7">
-                    <div>
-                        <div class="instruct-setting-section" style="gap: 2px;">
-                            <textarea
-                                class='form-control knowledge-textarea'
-                                rows={19}
-                                maxlength={maxLength}
-                                disabled
-                                placeholder={''}
-                                bind:value={instruction}
+                </div>
+            </Col>
+            <Col lg="5" class="instruction-gap">
+                <Card>
+                    <CardBody>
+                        <NavBar
+                            id={'instruction-nav-container'}
+                            disableDefaultStyles
+                            containerClasses={'nav-tabs-secondary'}
+                        >
+                            {#each tabs as tab, idx}
+                            <NavItem
+                                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
+                                navBtnStyles={'text-transform: none;'}
+                                navBtnId={`${tab.name}-tab`}
+                                dataBsTarget={`#${tab.name}-tab-pane`}
+                                ariaControls={`${tab.name}-tab-pane`}
+                                navBtnText={tab.displayText}
+                                active={tab.name === selectedTab}
+                                onClick={() => handleTabClick(tab.name)}
+                            />
+                            {/each}
+                        </NavBar>
+                        
+                        <div class:hide={selectedTab !== 'instruction-agent'}>
+                            <InstructionAgent
+                                agents={agents}
+                                disabled={isThinking}
+                                on:selectAgent={e => onAgentSelected(e)}
                             />
-                            <!-- <div class="text-secondary text-end text-count">
-                                <div>{instruction?.length || 0}/{maxLength}</div>
-                            </div> -->
                         </div>
-                    </div>
-                </Col>
-                <Col lg="5" class="instruction-gap">
-                    <Card>
-                        <CardBody>
-                            <NavBar
-                                id={'instruction-nav-container'}
-                                disableDefaultStyles
-                                containerClasses={'nav-tabs-secondary'}
-                            >
-                                {#each tabs as tab, idx}
-                                <NavItem
-                                    containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
-                                    navBtnStyles={'text-transform: none;'}
-                                    navBtnId={`${tab.name}-tab`}
-                                    dataBsTarget={`#${tab.name}-tab-pane`}
-                                    ariaControls={`${tab.name}-tab-pane`}
-                                    navBtnText={tab.displayText}
-                                    active={tab.name === selectedTab}
-                                    onClick={() => handleTabClick(tab.name)}
-                                />
-                                {/each}
-                            </NavBar>
-                            
-                            <div class:hide={selectedTab !== 'instruction-agent'}>
-                                <InstructionAgent
-                                    agents={agents}
-                                    disabled={isThinking}
-                                    on:selectAgent={e => onAgentSelected(e)}
-                                />
-                            </div>
-                            <div class:hide={selectedTab !== 'instruction-llm'}>
-                                <InstructionLlm
-                                    llmConfigs={llmConfigs}
-                                    disabled={isThinking}
-                                    selectedProvider={selectedProvider}
-                                    selectedModel={selectedModel}
-                                    on:selectLlm={e => onLlmSelected(e)}
-                                />
-                            </div>
-                            <div class:hide={selectedTab !== 'instruction-states'}>
-                                <InstructionState
-                                    bind:states={states}
-                                    disabled={isThinking}
-                                />
-                            </div>
-                            <div class:hide={selectedTab !== 'instruction-coding'}>
-                                <InstructionCoding
-                                    bind:selectedCodeScript={selectedCodeScript}
-                                    bind:args={args}
-                                    codeScripts={codeScripts}
-                                    disabled={isThinking}
-                                />
-                            </div>
-                        </CardBody>
-                    </Card>
-                    
-                </Col>
-            </Row>
-        </div>
+                        <div class:hide={selectedTab !== 'instruction-llm'}>
+                            <InstructionLlm
+                                llmConfigs={llmConfigs}
+                                disabled={isThinking}
+                                selectedProvider={selectedProvider}
+                                selectedModel={selectedModel}
+                                on:selectLlm={e => onLlmSelected(e)}
+                            />
+                        </div>
+                        <div class:hide={selectedTab !== 'instruction-states'}>
+                            <InstructionState
+                                bind:states={states}
+                                disabled={isThinking}
+                            />
+                        </div>
+                        <div class:hide={selectedTab !== 'instruction-coding'}>
+                            <InstructionCoding
+                                bind:selectedCodeScript={selectedCodeScript}
+                                bind:args={args}
+                                codeScripts={codeScripts}
+                                disabled={isThinking}
+                            />
+                        </div>
+                    </CardBody>
+                </Card>
+                
+            </Col>
+        </Row>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/page/knowledge-base/documents/+page.svelte b/src/routes/page/knowledge-base/documents/+page.svelte
index 5469f3a1..744be0fa 100644
--- a/src/routes/page/knowledge-base/documents/+page.svelte
+++ b/src/routes/page/knowledge-base/documents/+page.svelte
@@ -24,7 +24,10 @@
 		deleteAllVectorKnowledgeData,
 		createVectorCollection,
 		createVectorIndexes,
-		deleteVectorIndexes
+		deleteVectorIndexes,
+
+		getVectorCollectionDetails
+
     } from '$lib/services/knowledge-base-service';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
     import HeadTitle from '$lib/common/HeadTitle.svelte';
@@ -64,6 +67,9 @@
     /** @type {string} */
     let selectedCollection;
 
+	/** @type {import('$knowledgeTypes').VectorCollectionDetails | null} */
+	let collectionDetails = null;
+
 	/** @type {import('$knowledgeTypes').KnowledgeSearchViewModel[]} */
 	let items = [];
 
@@ -159,15 +165,18 @@
 	function initData() {
 		isLoading = true;
     	getCollections().then(() => {
-			Promise.all([
-				getData({
-					...defaultParams,
-					isReset: true,
-					skipLoader: true,
-					filterGroups: innerSearchGroups,
-					sort: null
-				})
-			]).finally(() => isLoading = false);
+			if (selectedCollection) {
+				Promise.all([
+					getCollectionDetail(),
+					getData({
+						...defaultParams,
+						isReset: true,
+						skipLoader: true,
+						filterGroups: innerSearchGroups,
+						sort: null
+					})
+				]).finally(() => isLoading = false);
+			}
 		}).finally(() => {
 			isLoading = false;
 		});
@@ -395,6 +404,18 @@
 		});
 	}
 
+	function getCollectionDetail() {
+		return new Promise((resolve, reject) => {
+			getVectorCollectionDetails(selectedCollection).then(res => {
+				collectionDetails = res || null;
+				resolve(collectionDetails);
+			}).catch(err => {
+				collectionDetails = null;
+				resolve(collectionDetails);
+			});
+		});
+	}
+
 	/**
 	 * @param {{
 	 * startId: string | null,
diff --git a/src/routes/page/knowledge-base/question-answer/+page.svelte b/src/routes/page/knowledge-base/question-answer/+page.svelte
index 31283602..42412c38 100644
--- a/src/routes/page/knowledge-base/question-answer/+page.svelte
+++ b/src/routes/page/knowledge-base/question-answer/+page.svelte
@@ -158,16 +158,18 @@
 	function initData() {
 		isLoading = true;
     	getCollections().then(() => {
-			Promise.all([
-				getCollectionDetail(),
-				getData({
-					...defaultParams,
-					isReset: true,
-					skipLoader: true,
-					filterGroups: innerSearchGroups,
-					sort: null
-				})
-			]).finally(() => isLoading = false);
+			if (selectedCollection) {
+				Promise.all([
+					getCollectionDetail(),
+					getData({
+						...defaultParams,
+						isReset: true,
+						skipLoader: true,
+						filterGroups: innerSearchGroups,
+						sort: null
+					})
+				]).finally(() => isLoading = false);
+			}
 		}).finally(() => {
 			isLoading = false;
 		});
diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
index afc1e75c..7a382235 100644
--- a/src/routes/page/plugin/+page.svelte
+++ b/src/routes/page/plugin/+page.svelte
@@ -18,6 +18,7 @@
 
 	const firstPage = 1;
 	const pageSize = 12;
+	let isPageMounted = false;
 
 	/** @type {import('$commonTypes').PagedItems<import('$pluginTypes').PluginDefModel>} */
     let plugins = { items: [], count: 0 };
@@ -37,6 +38,7 @@
 	let unsubscriber;
 
     onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -70,6 +72,7 @@
     });
 
 	onDestroy(() => {
+		isPageMounted = false;
 		unsubscriber?.();
 	});
 
@@ -106,7 +109,10 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		], () => {
+			if (!isPageMounted) return;
+			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+		});
 	}
 
 	/**
diff --git a/src/routes/page/roles/+page.svelte b/src/routes/page/roles/+page.svelte
index 1dba9809..d9f80314 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -147,6 +147,13 @@
 
 <HeadTitle title="{$_('Role List')}" />
 <Breadcrumb title="{$_('Management')}" pagetitle="{$_('Roles')}" />
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+	isError={isError}
+	successText={successText}
+	errorText={errorText}
+/>
 
 <Row>
 	<Col lg="12">
@@ -158,14 +165,6 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
-					<LoadingToComplete
-						spinnerStyles={'position: absolute;'}
-						isLoading={isLoading}
-						isComplete={isComplete}
-						isError={isError}
-						successText={successText}
-						errorText={errorText}
-					/>
 					<Table class="align-middle nowrap roles-table" bordered>
 						<thead>
 							<tr>
diff --git a/src/routes/page/setting/+page.svelte b/src/routes/page/setting/+page.svelte
index b797baba..15203b40 100644
--- a/src/routes/page/setting/+page.svelte
+++ b/src/routes/page/setting/+page.svelte
@@ -94,6 +94,7 @@
 
 <HeadTitle title="{$_('Settings')}" />
 <Breadcrumb title="{$_('Settings')}" pagetitle="{$_('Detail')}" />
+
 <LoadingToComplete
     isLoading={isLoading}
     isComplete={isComplete}
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index 7d85bda6..bfe94940 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -71,7 +71,9 @@
 	));
 
     onMount(async () => {
+		isLoading = true;
 		await getPagedAgentTasks();
+		isLoading = false;
 
 		const scrollElements = document.querySelectorAll('.scrollbar');
 		scrollElements.forEach((item) => {
@@ -80,7 +82,7 @@
     });
 
 	async function getPagedAgentTasks() {
-		tasks = await getAgentTasks( filter);
+		tasks = await getAgentTasks(filter);
 		refresh();
 	}
 
@@ -120,13 +122,6 @@
 		getPagedAgentTasks();
 	}
 
-
-	async function reloadConversations() {
-		filter = { ...initFilter };
-		tasks = await getAgentTasks(filter);
-		refreshPager(tasks.count);
-	}
-
 	/**
 	 * @param {any} e
 	 */
@@ -261,6 +256,11 @@
 <HeadTitle title="{$_('Task List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Task')}" />
 
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+/>
+
 <Row>
 	<Col lg="12">
 		<Card>
@@ -312,11 +312,6 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive">
-					<LoadingToComplete
-						spinnerStyles={'position: absolute;'}
-						isLoading={isLoading}
-						isComplete={isComplete}
-					/>
 					<Table class="align-middle nowrap" bordered>
 						<thead>
 							<tr>
diff --git a/src/routes/page/users/+page.svelte b/src/routes/page/users/+page.svelte
index 1f918159..abe4dfd8 100644
--- a/src/routes/page/users/+page.svelte
+++ b/src/routes/page/users/+page.svelte
@@ -38,6 +38,7 @@
     let isLoading = false;
 	let isComplete = false;
 	let isError = false;
+	let isPageMounted = false;
     let successText = 'User has been updated!';
     let errorText = 'Failed to update user!';
 
@@ -67,6 +68,7 @@
 	};
 
     onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -95,6 +97,7 @@
     });
 
 	onDestroy(() => {
+		isPageMounted = false;
 		unsubscriber?.();
 	});
 
@@ -159,7 +162,10 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		], () => {
+			if (!isPageMounted) return;
+			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+		});
 	}
 
     function search() {
@@ -233,6 +239,14 @@
 <HeadTitle title="{$_('User List')}" />
 <Breadcrumb title="{$_('Management')}" pagetitle="{$_('Users')}" />
 
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+	isError={isError}
+	successText={successText}
+	errorText={errorText}
+/>
+
 <Row>
 	<Col lg="12">
 		<Card>
@@ -270,14 +284,6 @@
 			</CardBody>
 			<CardBody>
 				<div class="table-responsive thin-scrollbar">
-					<LoadingToComplete
-						spinnerStyles={'position: absolute;'}
-						isLoading={isLoading}
-						isComplete={isComplete}
-						isError={isError}
-						successText={successText}
-						errorText={errorText}
-					/>
 					<Table class="align-middle nowrap users-table" bordered>
 						<thead>
 							<tr>

From 1dd7543d9a3dd51c2cca0a65496fd9b71e3f53ad Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Fri, 21 Nov 2025 20:11:21 -0600
Subject: [PATCH 4/4] refine agent header reset

---
 src/lib/helpers/utils/common.js              |  5 ++--
 src/lib/scss/custom/pages/_agent.scss        | 29 +++++++++++++++++++-
 src/routes/VerticalLayout/Sidebar.svelte     |  8 +++++-
 src/routes/page/agent/+page.svelte           | 13 +++++----
 src/routes/page/conversation/+page.svelte    |  4 +--
 src/routes/page/instruction/log/+page.svelte |  4 +--
 src/routes/page/plugin/+page.svelte          |  4 +--
 src/routes/page/users/+page.svelte           |  4 +--
 8 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js
index 75c13a82..5a348daf 100644
--- a/src/lib/helpers/utils/common.js
+++ b/src/lib/helpers/utils/common.js
@@ -120,18 +120,19 @@ export function getPagingQueryParams(args, defaults = { defaultPageSize: 12, max
 /**
  * @param {URL} url
  * @param {import('$commonTypes').KeyValuePair[]} pairs
- * @param {() => void} [callback]
+ * @param {(args0: URL) => void} [callback]
  */
 export function setUrlQueryParams(url, pairs, callback) {
     if (!pairs?.length) {
         return;
     }
 
+    url.search = '';
     pairs?.map(p => {
         url.searchParams.set(p.key, p.value);
     });
     
-    callback?.();
+    callback?.(url);
 }
 
 /**
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index afa4c72d..6cc4c4b1 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -1,10 +1,37 @@
 .agents-header-container {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
+    gap: 15px;
+    align-items: center;
+
+    @media (max-width: 576px) {
+        flex-direction: column;
+        justify-content: center;
+        gap: 12px;
+
+        > div {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
+    }
 
     .agent-filter {
         display: flex;
-        gap: 10px
+        flex-wrap: wrap;
+        gap: 10px;
+        align-items: center;
+
+        @media (max-width: 576px) {
+            width: 100%;
+            flex-direction: column;
+            gap: 8px;
+
+            > * {
+                width: 100%;
+            }
+        }
     }
 }
 
diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte
index 610e2605..65ab4bd1 100644
--- a/src/routes/VerticalLayout/Sidebar.svelte
+++ b/src/routes/VerticalLayout/Sidebar.svelte
@@ -202,9 +202,15 @@
 
 	/** @param {string} url */
 	const goToPage = (url) => {
-		if (!url) return;
+		if (!url) {
+			return;
+		}
 
 		url = getCleanUrl(url);
+		if (url === getCleanUrl($page.url.pathname)) {
+			return;
+		}
+
 		globalEventStore.reset();
 		goto(url);
 	}
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index 0c9a3d85..18b07c3d 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -199,9 +199,9 @@
 			queryParams.push({ key: 'similarName', value: encodeURIComponent(filter.similarName) });
 		}
 
-		setUrlQueryParams($page.url, queryParams, () => {
+		setUrlQueryParams($page.url, queryParams, (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`)
+			goToUrl(`${url.pathname}${url.search}`)
 		});
 	}
 
@@ -243,6 +243,9 @@
 	function reset() {
 		selectedAgentTypes = [];
 		selectedAgentLabels = [];
+
+		filter = { ...initFilter };
+		getPagedAgents();
 	}
 
 	function refreshFilter() {
@@ -273,7 +276,7 @@
 	<div>
 		{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
 		<Button color="primary" on:click={() => createNewAgent()}>
-			<i class="bx bx-copy" /> {$_('New Agent')}
+			<i class="mdi mdi-content-copy" /> {$_('New Agent')}
 		</Button>
 		{/if}
 	</div>
@@ -308,10 +311,10 @@
 			<i class="mdi mdi-magnify" />
 		</Button>
 		<Button
-			class="btn btn-light"
+			class="btn btn-warning"
 			data-bs-toggle="tooltip"
 			data-bs-placement="bottom"
-			title="Reset filters"
+			title="Reset"
 			on:click={(e) => reset()}
 		>
 			<i class="mdi mdi-restore" />
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index be990d80..2b82852f 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -189,9 +189,9 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => {
+		], (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+			goToUrl(`${url.pathname}${url.search}`);
 		});
 	}
 
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index 34590750..db07794b 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -180,9 +180,9 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => {
+		], (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+			goToUrl(`${url.pathname}${url.search}`);
 		});
 	}
 
diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
index 7a382235..f3193051 100644
--- a/src/routes/page/plugin/+page.svelte
+++ b/src/routes/page/plugin/+page.svelte
@@ -109,9 +109,9 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => {
+		], (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+			goToUrl(`${url.pathname}${url.search}`);
 		});
 	}
 
diff --git a/src/routes/page/users/+page.svelte b/src/routes/page/users/+page.svelte
index abe4dfd8..6ef1427c 100644
--- a/src/routes/page/users/+page.svelte
+++ b/src/routes/page/users/+page.svelte
@@ -162,9 +162,9 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => {
+		], (url) => {
 			if (!isPageMounted) return;
-			goToUrl(`${$page.url.pathname}${$page.url.search}`);
+			goToUrl(`${url.pathname}${url.search}`);
 		});
 	}