refine styling

Author: Jicheng Lu

src/lib/common/LoadingToComplete.svelte

@@ -18,15 +18,15 @@
 
 {#if isComplete}
     <div class="alert-container">
-        <Alert class="success">
+        <Alert color="success">
             <div>{successText}</div>
         </Alert>
     </div>
 {/if}
 
 {#if isError}
     <div class="alert-container">
-        <Alert class="error">
+        <Alert color="danger">
             <div>{errorText}</div>
         </Alert>
     </div>

src/lib/scss/custom/components/_alert.scss

@@ -6,7 +6,6 @@
     z-index: 8888;
 
     .alert {
-        color: white;
         text-align: center;
     }
 

src/lib/scss/custom/pages/_chat.scss

@@ -207,7 +207,7 @@
                 }
             }
 
-            .button-group-container {
+            .plain-option-container {
                 display: flex;
                 flex-wrap: wrap;
 
@@ -230,7 +230,7 @@
                 }
             }
 
-            .card-group-container {
+            .complex-option-container {
                 display: flex;
                 flex-wrap: wrap;
                 gap: 5px;

src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte

@@ -66,7 +66,7 @@
 </script>
 
 {#if cards.length > 0}
-    <div class="card-group-container">
+    <div class="complex-option-container">
         {#each cards as card, idx (idx)}
         <Card class="card-element">
             <CardBody>

src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte

@@ -131,7 +131,7 @@
 {/if}
 
 {#if plainOptions.length > 0}
-<div class="button-group-container">
+<div class="plain-option-container">
     {#each plainOptions as option, index}
         <button
             class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}

src/routes/page/mongodb/+page.svelte

@@ -5,12 +5,31 @@
 	import { refreshAgents } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
   import { _ } from 'svelte-i18n';
+  import Swal from 'sweetalert2/dist/sweetalert2.js';
+	import "sweetalert2/src/sweetalert2.scss";
 
   let isLoading = false;
   let isComplete = false;
   let isError = false;
   const duration = 3000;
 
+  function readyToRefresh() {
+		// @ts-ignore
+    Swal.fire({
+				title: 'Are you sure?',
+				text: "You will migrate all agents data to mongoDb.",
+				icon: 'warning',
+				showCancelButton: true,
+				confirmButtonText: 'Yes',
+				cancelButtonText: 'No'
+			// @ts-ignore
+			}).then((result) => {
+				if (result.value) {
+					refreshAgentData();
+				}
+			});
+	}
+
   const refreshAgentData = () => {
     isLoading = true;
     refreshAgents().then(res => {
@@ -28,14 +47,13 @@
       }, duration);
     });
   };
-
 </script>
 
 <HeadTitle title="MongoDB" />
 <Breadcrumb title="MongoDB" pagetitle="{$_('Setting')}" />
 <LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} />
 
 <h3>{$_('Migrate agents from file repository to MongoDB')}</h3>
-<Button color="primary" on:click={() => refreshAgentData()} disabled={isLoading}>
+<Button color="primary" on:click={() => readyToRefresh()} disabled={isLoading}>
   <i class="bx bx-copy" /> {$_('Start Migration')}
 </Button>