Features/refine conversation elements

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}

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>

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.

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";

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 {

src/lib/scss/custom/pages/_conversation.scss

@@ -0,0 +1,6 @@
+.conv-delete-modal {
+    button {
+        outline: none !important;
+        box-shadow: none !important;
+    }
+}

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;
 }
 

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;
 }
 

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -19,6 +19,9 @@
 	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";
+	import { replaceNewLine } from '$lib/helpers/http';
 
 	const options = {
 		scrollbars: {
@@ -135,12 +138,26 @@
 
 	/** @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 close() {
-		window.parent.postMessage({ action: "close" }, "*");
+	function endChat() {
+		// @ts-ignore
+		Swal.fire({
+            title: 'Are you sure?',
+            text: "You will exit this conversation.",
+            icon: 'warning',
+			customClass: 'conv-delete-modal',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+			cancelButtonText: 'No'
+        // @ts-ignore
+        }).then((result) => {
+            if (result.value) {
+				window.close();
+            }
+        });
 	}
 
 	function closeLog() {
@@ -176,7 +193,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>
@@ -186,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>
@@ -221,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')} -->
@@ -252,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
@@ -264,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">

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">

src/routes/page/conversation/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import LoadingToResult from './../../../lib/common/LoadingToResult.svelte';
 	import {
 		Button,
 		Card,
@@ -10,27 +11,21 @@
 		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';
 	import Pagination from '$lib/common/Pager.svelte';
 	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;
@@ -39,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} */
@@ -54,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
 		};
 	}
@@ -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>