From 3593acbc68742c58747cffb35a767a0a11272539 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 22 Jan 2024 14:39:46 -0600
Subject: [PATCH 1/3] refine ui elements

---
 src/lib/common/LoadingToResult.svelte         | 24 ++++++
 src/lib/scss/app.scss                         |  2 +-
 src/lib/scss/custom/pages/_conversation.scss  |  6 ++
 .../[conversationId]/chat-box.svelte          | 20 ++++-
 src/routes/page/conversation/+page.svelte     | 80 ++++---------------
 .../[conversationId]/+page.svelte             |  1 +
 src/routes/page/mongodb/+page.svelte          | 18 +----
 7 files changed, 68 insertions(+), 83 deletions(-)
 create mode 100644 src/lib/common/LoadingToResult.svelte
 create mode 100644 src/lib/scss/custom/pages/_conversation.scss

diff --git a/src/lib/common/LoadingToResult.svelte b/src/lib/common/LoadingToResult.svelte
new file mode 100644
index 00000000..53ef7ae5
--- /dev/null
+++ b/src/lib/common/LoadingToResult.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { Alert } from "@sveltestrap/sveltestrap";
+	import Loader from "./Loader.svelte";
+
+    export let isLoading = false;
+    export let isComplete = false;
+    export let isError = false;
+</script>
+
+{#if isLoading}
+  <Loader />
+{/if}
+
+{#if isComplete}
+  <Alert color="success">
+    <div>Update completed!</div>
+  </Alert>
+{/if}
+
+{#if isError}
+  <Alert color="danger">
+    <div>Error!</div>
+  </Alert>
+{/if}
\ No newline at end of file
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index b4512012..1873c1bd 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -83,7 +83,7 @@ File: Main Css File
 @import "custom/pages/timeline";
 @import "custom/pages/extras-pages";
 @import "custom/pages/jobs";
-
+@import "custom/pages/conversation";
 
 //RTL
 // @import "custom/rtl/bootstrap-rtl";
diff --git a/src/lib/scss/custom/pages/_conversation.scss b/src/lib/scss/custom/pages/_conversation.scss
new file mode 100644
index 00000000..972693ee
--- /dev/null
+++ b/src/lib/scss/custom/pages/_conversation.scss
@@ -0,0 +1,6 @@
+.conv-delete-modal {
+    button {
+        outline: none !important;
+        box-shadow: none !important;
+    }
+}
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 547c9c30..07681614 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -19,6 +19,8 @@
 	import RcQuickReply from './rc-quick-reply.svelte';
 	import { PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
 	import ContentLog from './content-log.svelte';
+	import Swal from 'sweetalert2/dist/sweetalert2.js';
+	import "sweetalert2/src/sweetalert2.scss";
 
 	const options = {
 		scrollbars: {
@@ -139,8 +141,20 @@
 		await sendMessageToHub(params.agentId, params.conversationId, text);
 	}
 
-	function close() {
-		window.parent.postMessage({ action: "close" }, "*");
+	function endChat() {
+		Swal.fire({
+            title: 'Are you sure?',
+            text: "You will exit this conversation.",
+            icon: 'warning',
+			customClass: 'conv-delete-modal',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+			cancelButtonText: 'No'
+        }).then((result) => {
+            if (result.value) {
+				window.close();
+            }
+        });
 	}
 
 	function closeLog() {
@@ -176,7 +190,7 @@
 							{/if}
 							<li class="list-inline-item d-sm-inline-block">
 								<button type="submit" class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
-									on:click={close}
+									on:click={() => endChat()}
 								>
 									<span class="d-none d-sm-inline-block me-2" >End Conversation</span> <i class="mdi mdi-window-close"></i>
 								</button>
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 52a63b69..0b5dcca1 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import LoadingToResult from './../../../lib/common/LoadingToResult.svelte';
 	import {
 		Button,
 		Card,
@@ -10,12 +11,7 @@
 		DropdownToggle,
 		Input,
 		Row,
-		Table,
-		Alert,
-		Modal,
-		ModalHeader,
-		ModalBody,
-		ModalFooter
+		Table
 	} from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
@@ -23,14 +19,13 @@
 	import { onMount } from 'svelte';
 	import Link from 'svelte-link';
     import { getConversations, deleteConversation } from '$lib/services/conversation-service.js';
-	import Loader from '$lib/common/Loader.svelte';
 	import { utcToLocal } from '$lib/helpers/datetime';
+	import Swal from 'sweetalert2/dist/sweetalert2.js';
+	import "sweetalert2/src/sweetalert2.scss";
 
 	let isLoading = false;
 	let isComplete = false;
 	let isError = false;
-	let isOpenDeleteModal = false;
-	let deleteConversationId = '';
 	const duration = 3000;
 	const firstPage = 1;
 	const pageSize = 10;
@@ -76,7 +71,6 @@
     /** @param {string} conversationId */
     function handleConversationDeletion(conversationId) {
 		isLoading = true;
-		isOpenDeleteModal = false;
         deleteConversation(conversationId).then(async () => {
 			isLoading = false;
 			isComplete = true;
@@ -88,7 +82,6 @@
 			isLoading = false;
 			isComplete = false;
 			isError = true;
-			isOpenDeleteModal = false;
 			setTimeout(() => {
 				isError = false;
 			}, duration);
@@ -109,63 +102,26 @@
 		getConversationList();
 	}
 
-	function confirmDeleteConversation() {
-		!!deleteConversationId && handleConversationDeletion(deleteConversationId);
-	}
-
 	/** @param {string} conversationId */
 	function openDeleteModal(conversationId) {
-		deleteConversationId = conversationId;
-		isOpenDeleteModal = true;
-	}
-
-	function closeDeleteModal() {
-		isOpenDeleteModal = false;
-		deleteConversationId = '';
+		Swal.fire({
+            title: 'Are you sure?',
+            text: "You won't be able to revert this!",
+            icon: 'warning',
+			customClass: 'conv-delete-modal',
+            showCancelButton: true,
+            confirmButtonText: 'Yes, delete it!'
+        }).then((result) => {
+            if (result.value) {
+				handleConversationDeletion(conversationId);
+            }
+        });
 	}
-
-	const toggle = () => {
-		isOpenDeleteModal = !isOpenDeleteModal;
-	};
-
 </script>
 
 <HeadTitle title="Conversation List" />
 <Breadcrumb title="Communication" pagetitle="Conversations" />
-
-<Modal
-	isOpen={isOpenDeleteModal}
-	fade
-	centered
-	keyboard
-	unmountOnClose
-	toggle={() => toggle()}
->
-	<ModalHeader>Delete Conversation</ModalHeader>
-    <ModalBody style="font-size: 15px; margin-top: 10px; margin-bottom: 30px;">
-		Are you sure you want to delete this conversation?
-    </ModalBody>
-    <ModalFooter>
-      <Button color="primary" on:click={() => confirmDeleteConversation()}>Yes</Button>
-      <Button color="secondary" on:click={() => closeDeleteModal()}>No</Button>
-    </ModalFooter>
-</Modal>
-
-{#if isLoading}
-  <Loader />
-{/if}
-
-{#if isComplete}
-  <Alert color="success">
-    <div>Update completed!</div>
-  </Alert>
-{/if}
-
-{#if isError}
-  <Alert color="danger">
-    <div>Error!</div>
-  </Alert>
-{/if}
+<LoadingToResult isLoading={isLoading} isComplete={isComplete} isError={isError} />
 
 <Row>
 	<Col lg="12">
@@ -273,9 +229,7 @@
 						</tbody>
 					</Table>
 				</div>
-
 				<Pagination pagination={pager} pageTo={pageTo} />
-
 			</CardBody>
 		</Card>
 	</Col>
diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
index 42dc6f2e..24ed7833 100644
--- a/src/routes/page/conversation/[conversationId]/+page.svelte
+++ b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -26,6 +26,7 @@
             text: "You won't be able to revert this!",
             icon: 'warning',
             showCancelButton: true,
+            customClass: 'conv-delete-modal',
             confirmButtonText: 'Yes, delete it!'
         }).then(async (result) => {
             if (result.value) {
diff --git a/src/routes/page/mongodb/+page.svelte b/src/routes/page/mongodb/+page.svelte
index dfe4754a..60abed56 100644
--- a/src/routes/page/mongodb/+page.svelte
+++ b/src/routes/page/mongodb/+page.svelte
@@ -4,6 +4,7 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import { refreshAgents } from '$lib/services/agent-service';
 	import Loader from '$lib/common/Loader.svelte';
+	import LoadingToResult from '$lib/common/LoadingToResult.svelte';
 
   let isLoading = false;
   let isComplete = false;
@@ -32,22 +33,7 @@
 
 <HeadTitle title="MongoDB" />
 <Breadcrumb title="MongoDB" pagetitle="Setting" />
-
-{#if isLoading}
-  <Loader />
-{/if}
-
-{#if isComplete}
-  <Alert color="success">
-    <div>Update completed!</div>
-  </Alert>
-{/if}
-
-{#if isError}
-  <Alert color="danger">
-    <div>Error!</div>
-  </Alert>
-{/if}
+<LoadingToResult isLoading={isLoading} isComplete={isComplete} isError={isError} />
 
 <h3>Migrate agents from file repository to MongoDB</h3>
 <Button color="primary" on:click={() => refreshAgentData()} disabled={isLoading}>

From c539aacb6305d081af395dea919b20e83961a978 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 22 Jan 2024 17:25:18 -0600
Subject: [PATCH 2/3] add plugin pagination

---
 src/lib/common/Pager.svelte                   | 12 ++-
 src/lib/helpers/types.js                      |  5 ++
 src/lib/scss/custom/pages/_chat.scss          |  3 +-
 src/lib/services/conversation-service.js      |  4 +-
 src/lib/services/plugin-service.js            |  7 +-
 .../[conversationId]/chat-box.svelte          | 13 ++--
 .../[conversationId]/content-log.svelte       |  2 +-
 src/routes/page/conversation/+page.svelte     |  8 +-
 src/routes/page/plugin/+page.svelte           | 76 ++++++++++++++++---
 src/routes/page/plugin/plugin-list.svelte     | 33 +-------
 .../page/plugin/plugin-pagination.svelte      | 63 +++++++++++++++
 11 files changed, 167 insertions(+), 59 deletions(-)
 create mode 100644 src/routes/page/plugin/plugin-pagination.svelte

diff --git a/src/lib/common/Pager.svelte b/src/lib/common/Pager.svelte
index 92343d38..d72048c5 100644
--- a/src/lib/common/Pager.svelte
+++ b/src/lib/common/Pager.svelte
@@ -22,6 +22,10 @@
     $: maxPage = Math.min(Math.max(pagination.page + offSet, firstPage + 2 * offSet), totalPages);
     /** @type {number[]} */
     $: pages = Array.from({ length: maxPage - minPage + 1 }, (_, i) => minPage + i);
+    /** @type {boolean} */
+    $: disableBackward = pagination.page === firstPage;
+    /** @type {boolean} */
+    $: disableForward = pagination.page === totalPages;
 
     /**
 	 * @param {any} e
@@ -48,12 +52,12 @@
                 <nav aria-label="Page navigation example" class="mb-0">
                     <ul class="pagination mb-0">
                         <li class="page-item">
-                            <Link class="page-link" aria-label="Begin" on:click={(e) => handlePageTo(e, firstPage)}>
+                            <Link class={`page-link ${disableBackward ? 'disabled' : ''}`} aria-label="Begin" on:click={(e) => handlePageTo(e, firstPage)}>
                                 <span aria-hidden="true">&laquo;&laquo;</span>
                             </Link>
                         </li>
                         <li class="page-item">
-                            <Link class="page-link" aria-label="Previous" on:click={(e) => handlePageTo(e, pagination.page - 1)}>
+                            <Link class={`page-link ${disableBackward ? 'disabled' : ''}`} aria-label="Previous" on:click={(e) => handlePageTo(e, pagination.page - 1)}>
                                 <span aria-hidden="true">&laquo;</span>
                             </Link>
                         </li>
@@ -65,12 +69,12 @@
                         {/each}
                 
                         <li class="page-item">
-                            <Link class="page-link" aria-label="Next" on:click={(e) => handlePageTo(e, pagination.page + 1)}>
+                            <Link class={`page-link ${disableForward ? 'disabled' : ''}`} aria-label="Next" on:click={(e) => handlePageTo(e, pagination.page + 1)}>
                                 <span aria-hidden="true">&raquo;</span>
                             </Link>
                         </li>
                         <li class="page-item">
-                            <Link class="page-link" aria-label="Last" on:click={(e) => handlePageTo(e, totalPages)}>
+                            <Link class={`page-link ${disableForward ? 'disabled' : ''}`} aria-label="Last" on:click={(e) => handlePageTo(e, totalPages)}>
                                 <span aria-hidden="true">&raquo;&raquo;</span>
                             </Link>
                         </li>
diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
index adc84e59..c21c7aa2 100644
--- a/src/lib/helpers/types.js
+++ b/src/lib/helpers/types.js
@@ -47,6 +47,11 @@
  * @property {boolean} isHeader
  */
 
+/**
+ * @typedef {Object} PluginFilter
+ * @property {Pagination} pager - Pagination
+ */
+
 /**
  * @typedef {Object} AgentWelcomeInfo
  * @property {string[]} messages - The welcome messages in Rich content format.
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index 92a25a78..ab4fcd3c 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -220,9 +220,10 @@
 }
 
 .chat-input {
-    border-radius: 30px;
+    border-radius: 5px;
     background-color: var(--#{$prefix}light) !important;
     border-color: var(--#{$prefix}light) !important;
+    resize: none;
 }
 
 .chat-input-links {
diff --git a/src/lib/services/conversation-service.js b/src/lib/services/conversation-service.js
index 557ae766..dfffb481 100644
--- a/src/lib/services/conversation-service.js
+++ b/src/lib/services/conversation-service.js
@@ -31,9 +31,7 @@ export async function getConversation(id) {
  */
 export async function getConversations(filter) {
     let url = endpoints.conversationsUrl;
-    const response = await axios.post(url, {
-        ...filter
-    });
+    const response = await axios.post(url, { ...filter });
     return response.data;
 }
 
diff --git a/src/lib/services/plugin-service.js b/src/lib/services/plugin-service.js
index e1898d12..7ab71227 100644
--- a/src/lib/services/plugin-service.js
+++ b/src/lib/services/plugin-service.js
@@ -4,11 +4,12 @@ import axios from 'axios';
 
 /**
  * Get plugin list
- * @returns {Promise<import('$types').PluginDefModel[]>}
+ * @param {import('$types').PluginFilter} filter
+ * @returns {Promise<import('$types').PagedItems<import('$types').PluginDefModel>>}
  */
-export async function getPlugins() {
+export async function getPlugins(filter) {
     let url = endpoints.pluginListUrl;
-    const response = await axios.get(url);
+    const response = await axios.post(url, { ...filter });
     return response.data;
 }
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 07681614..b56b0581 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -21,6 +21,7 @@
 	import ContentLog from './content-log.svelte';
 	import Swal from 'sweetalert2/dist/sweetalert2.js';
 	import "sweetalert2/src/sweetalert2.scss";
+	import { replaceNewLine } from '$lib/helpers/http';
 
 	const options = {
 		scrollbars: {
@@ -137,11 +138,12 @@
 
 	/** @param {any} e */
 	async function onSendMessage(e) {
-		if (e.key !== 'Enter') return;
+		if ((e.key === 'Enter' && !!e.shiftKey) || e.key !== 'Enter') return;
 		await sendMessageToHub(params.agentId, params.conversationId, text);
 	}
 
 	function endChat() {
+		// @ts-ignore
 		Swal.fire({
             title: 'Are you sure?',
             text: "You will exit this conversation.",
@@ -150,6 +152,7 @@
             showCancelButton: true,
             confirmButtonText: 'Yes',
 			cancelButtonText: 'No'
+        // @ts-ignore
         }).then((result) => {
             if (result.value) {
 				window.close();
@@ -200,7 +203,7 @@
 				</div>
 			</div>
 
-			<div class="scrollbar" style="height: 80vh">
+			<div class="scrollbar" style="height: 75vh">
 				<div class="chat-conversation p-3">
 					<ul class="list-unstyled mb-0">
 						<li>
@@ -235,7 +238,7 @@
 								{#if message.sender.id === currentUser.id}
 								<div class="ctext-wrap float-end">
 									<!--<div class="conversation-name">{message.sender.full_name}</div>-->
-									<span>{message.text}</span>
+									<span>{@html replaceNewLine(message.text)}</span>
 									<p class="chat-time mb-0">
 										<i class="bx bx-time-five align-middle me-1" />
 										<!-- {format(message.created_at, 'short-time')} -->
@@ -266,7 +269,7 @@
 				</div>
 			</div>
 
-			<div class="p-3 chat-input-section" style="height: 10vh">
+			<div class="p-3 chat-input-section" style="height: 15vh">
 				<div class="row">
 					<div class="col-auto">
 						<button
@@ -278,7 +281,7 @@
 					</div>
 					<div class="col">
 						<div class="position-relative">						
-							<textarea rows={1} class="form-control chat-input" bind:value={text} on:keydown={e => { onSendMessage(e); }} placeholder="Enter Message..." />
+							<textarea rows={3} maxlength={500} class="form-control chat-input" bind:value={text} on:keydown={e => onSendMessage(e)} placeholder="Enter Message..." />
 							<div class="chat-input-links" id="tooltip-container">
 								<ul class="list-inline mb-0">
 									<li class="list-inline-item">
diff --git a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
index 8d3c9ec3..629f99d9 100644
--- a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte
@@ -68,7 +68,7 @@
                 {#each logs as log}
                     <div class="log-element">
                         <div class="log-content">
-                            <b>{`[${moment.utc(log?.created_at).local().format('MMM DD YYYY, hh:mm:ss A')}]`}</b>
+                            <b>{`[${moment.utc(log?.created_at).local().format('MMM DD YYYY, hh:mm:ss.SSS A')}]`}</b>
                         </div>
                         <br>
                         <div class="log-content">
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 0b5dcca1..7b5ec179 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -34,8 +34,8 @@
     let conversations = { count: 0, items: [] };
 
 	/** @type {import('$types').ConversationFilter} */
-	let initFilter = {
-		pager: { page: 1, size: pageSize, count: 0 }
+	const initFilter = {
+		pager: { page: firstPage, size: pageSize, count: 0 }
 	};
 
     /** @type {import('$types').ConversationFilter} */
@@ -49,10 +49,10 @@
     });
 
 	/** @param {number} totalItemsCount */
-	function refreshPager(totalItemsCount, page = firstPage, size = pageSize) {
+	function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
 		pager = {
 			page: page,
-			size: pageSize,
+			size: pageCount,
 			count: totalItemsCount
 		};
 	}
diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
index 72e5f910..243c0ddc 100644
--- a/src/routes/page/plugin/+page.svelte
+++ b/src/routes/page/plugin/+page.svelte
@@ -5,17 +5,38 @@
     import { onMount } from 'svelte';
     import { getPlugins } from '$lib/services/plugin-service';
 	import { PUBLIC_PLUGIN_DEFAULT_ICON } from '$env/static/public';
+	import PluginPagination from './plugin-pagination.svelte';
 
-    /** @type {import('$types').PluginDefModel[]} */
-    let plugins = [];
+	const firstPage = 1;
+	const pageSize = 12;
+
+	/** @type {import('$types').PagedItems<import('$types').PluginDefModel>} */
+    let plugins = { items: [], count: 0 };
+
+	/** @type {import('$types').PluginFilter} */
+	const initFilter = {
+		pager: { page: firstPage, size: pageSize, count: 0 }
+	};
+
+    /** @type {import('$types').PluginFilter} */
+    let filter = { ... initFilter };
+
+	/** @type {import('$types').Pagination} */
+	let pager = filter.pager;
 
     onMount(async () => {
-        plugins = await getPlugins();
-		plugins.forEach(element => {
-			element.icon_url = getIconUrl(element);
-		});
+		await getPagedPlugins(initFilter);
     });
 
+	/**
+	 * @param {import("$types").PluginFilter} filter
+	 */
+	async function getPagedPlugins(filter) {
+		plugins = await getPlugins(filter);
+		refreshPlugins();
+		refreshPager(plugins.count, filter.pager.page, filter.pager.size);
+	}
+
 	/** @param {import('$types').PluginDefModel} plugin */
 	function getIconUrl(plugin) {
 		if (plugin.is_core) {
@@ -23,11 +44,48 @@
 		} else {
 			return plugin.icon_url ? plugin.icon_url : PUBLIC_PLUGIN_DEFAULT_ICON;
 		}
-	}    
+	}
+
+	function refreshPlugins() {
+		plugins = {
+			items: plugins?.items?.map(t => {
+				return {
+					...t,
+					icon_url: getIconUrl(t)
+				};
+			}) || [],
+			count: plugins?.count || 0
+		};
+	}
+
+	/** @param {number} totalItemsCount */
+	function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
+		pager = {
+			page: page,
+			size: pageCount,
+			count: totalItemsCount
+		};
+	}
+
+	/**
+	 * @param {number} pageNum
+	 */
+	function pageTo(pageNum) {
+		pager = {
+			...pager,
+			page: pageNum
+		};
+
+		filter = {
+			pager: pager
+		};
+
+		getPagedPlugins(filter);
+	}
 </script>
 
 <HeadTitle title="Plugins Grid" />
-
 <Breadcrumb title="Plugin" pagetitle="List" />
 
-<Plugins plugins={plugins} />
\ No newline at end of file
+<Plugins plugins={plugins.items} />
+<PluginPagination pagination={pager} pageTo={pageTo} />
\ No newline at end of file
diff --git a/src/routes/page/plugin/plugin-list.svelte b/src/routes/page/plugin/plugin-list.svelte
index de343771..3d67f903 100644
--- a/src/routes/page/plugin/plugin-list.svelte
+++ b/src/routes/page/plugin/plugin-list.svelte
@@ -4,19 +4,14 @@
 		Card,
 		CardBody,
 		Col,
-		ModalBody,
-		ModalHeader,
 		Row,
-		Label,
-		Input,
-		Button
 	} from '@sveltestrap/sveltestrap';
 	import { enablePlugin, disablePlugin } from '$lib/services/plugin-service';
 	import { goto } from '$app/navigation';
 
     /** @type {import('$types').PluginDefModel[]} */
     export let plugins;
-
+	
 	/** 
 	 * @param {string} id
 	 * @param {boolean} enable
@@ -36,13 +31,13 @@
 
 <Row>
 	{#each plugins as item}
-		<Col xl={3} md={6}>
-			<Card>
+		<Col xl={3} md={6} style="margin-bottom: 10px;">
+			<Card style="height: 100%">
 				<CardBody>
 					<div class="favorite-icon">
 						<Link href="#"><i class="uil uil-heart-alt fs-18" /></Link>
 					</div>
-					<img src={item.icon_url} alt="{item.name}" height="35" class="mb-3" />
+					<img src={item.icon_url} alt="{item.name}" height="35" style="max-width: 100%;" class="mb-3" />
 					<h5 class="fs-17 mb-2">
 						<Link href="#" class="text-dark">{item.name}</Link>
 						<small class="text-muted fw-normal">plugin</small>
@@ -80,23 +75,3 @@
 		</Col>
 	{/each}
 </Row>
-
-<Row class="mb-3">
-	<Col lg="12">
-		<div class="d-flex justify-content-center">
-			<nav aria-label="Page navigation example" id="pagination-element" class="mb-0">
-				<div class="pagination-block pagination pagination-rounded">
-					<Link href="#" class="page-link outline-none disabled" id="page-prev">
-						<i class="bx bx-chevron-left align-middle" />
-					</Link>
-					<span id="page-num" class="outline-none pagination">
-                        <Link class="page-link clickPageNumber " href="#" active>1</Link><Link
-							class="page-link clickPageNumber"
-							href="#">2</Link>
-					</span>
-					<Link href="#" class="page-link outline-none" id="page-next"><i class="bx bx-chevron-right align-middle" /></Link>
-				</div>
-			</nav>
-		</div>
-	</Col>
-</Row>
diff --git a/src/routes/page/plugin/plugin-pagination.svelte b/src/routes/page/plugin/plugin-pagination.svelte
new file mode 100644
index 00000000..0ddbe959
--- /dev/null
+++ b/src/routes/page/plugin/plugin-pagination.svelte
@@ -0,0 +1,63 @@
+<script>
+    import Link from 'svelte-link';
+	import {
+		Col,
+		Row,
+	} from '@sveltestrap/sveltestrap';
+	import { afterUpdate } from 'svelte';
+
+    /** @type {import('$lib/helpers/types').Pagination} */    
+    export let pagination = { page: 1, size: 10, count: 0 };
+    /** @type {(pageNum: number) => void} */  
+    export let pageTo;
+
+	const firstPage = 1;
+    const offSet = 2;
+
+	/** @type {number} */
+    $: totalPages = Math.ceil(pagination.count / pagination.size);
+	/** @type {number} */
+    $: minPage = Math.max(Math.min(pagination.page - offSet, totalPages - 2 * offSet), firstPage);
+    /** @type {number} */
+    $: maxPage = Math.min(Math.max(pagination.page + offSet, firstPage + 2 * offSet), totalPages);
+    /** @type {number[]} */
+    $: pages = Array.from({ length: maxPage - minPage + 1 }, (_, i) => minPage + i);
+    /** @type {boolean} */
+    $: disableBackward = pagination.page === firstPage;
+    /** @type {boolean} */
+    $: disableForward = pagination.page === totalPages;
+
+    /**
+	 * @param {any} e
+	 * @param {number} pageNum
+	 */
+	 function handlePageTo(e, pageNum) {
+        e.preventDefault();
+        if (pagination.page === pageNum || pageNum < firstPage || pageNum > totalPages) return;
+        pageTo(pageNum);
+    }
+</script>
+
+<Row class="mb-3">
+	<Col lg="12">
+		<div class="d-flex justify-content-center">
+			<nav aria-label="Page navigation example" id="pagination-element" class="mb-0">
+				<div class="pagination-block pagination pagination-rounded">
+					<Link class={`page-link outline-none ${disableBackward ? 'disabled' : ''}`} id="page-prev" on:click={(e) => { handlePageTo(e, pagination.page - 1); }}>
+						<i class="bx bx-chevron-left align-middle" />
+					</Link>
+
+					{#each pages as page}
+						<span id="page-num" class="outline-none pagination">
+							<Link class={`page-link clickPageNumber`} active={pagination.page === page} on:click={(e) => handlePageTo(e, page)}>{page}</Link>
+						</span>
+					{/each}
+
+					<Link class={`page-link outline-none ${disableForward ? 'disabled' : ''}`} id="page-next" on:click={(e) => { handlePageTo(e, pagination.page + 1); }}>
+						<i class="bx bx-chevron-right align-middle" />
+					</Link>
+				</div>
+			</nav>
+		</div>
+	</Col>
+</Row>
\ No newline at end of file

From 014634aaeb0d63f55b112b0ccc055230bb70143f Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 22 Jan 2024 17:34:41 -0600
Subject: [PATCH 3/3] minor change

---
 src/routes/page/plugin/+page.svelte | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
index 243c0ddc..501d6713 100644
--- a/src/routes/page/plugin/+page.svelte
+++ b/src/routes/page/plugin/+page.svelte
@@ -25,13 +25,10 @@
 	let pager = filter.pager;
 
     onMount(async () => {
-		await getPagedPlugins(initFilter);
+		await getPagedPlugins();
     });
 
-	/**
-	 * @param {import("$types").PluginFilter} filter
-	 */
-	async function getPagedPlugins(filter) {
+	async function getPagedPlugins() {
 		plugins = await getPlugins(filter);
 		refreshPlugins();
 		refreshPager(plugins.count, filter.pager.page, filter.pager.size);
@@ -80,7 +77,7 @@
 			pager: pager
 		};
 
-		getPagedPlugins(filter);
+		getPagedPlugins();
 	}
 </script>