From 06b00f3ed80b2f187b477b0350b178c8abfd53db Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Mon, 25 Mar 2024 02:44:04 -0500
Subject: [PATCH] refine agent page

---
 src/lib/common/LoadingToComplete.svelte       | 21 ++++++++++++-------
 src/lib/helpers/types.js                      |  2 +-
 src/lib/scss/app.scss                         |  1 +
 src/lib/scss/custom/components/_alert.scss    | 20 ++++++++++++++++++
 .../page/agent/[agentId]/agent-routing.svelte |  4 +++-
 5 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/scss/custom/components/_alert.scss

diff --git a/src/lib/common/LoadingToComplete.svelte b/src/lib/common/LoadingToComplete.svelte
index 02afc8c2..dda3b858 100644
--- a/src/lib/common/LoadingToComplete.svelte
+++ b/src/lib/common/LoadingToComplete.svelte
@@ -12,17 +12,22 @@
 </script>
 
 {#if isLoading}
-  <Loader size={spinnerSize} />
+    <Loader size={spinnerSize} />
 {/if}
 
+
 {#if isComplete}
-  <Alert color="success">
-    <div>{successText}</div>
-  </Alert>
+    <div class="alert-container">
+        <Alert class="success">
+            <div>{successText}</div>
+        </Alert>
+    </div>
 {/if}
 
 {#if isError}
-  <Alert color="danger">
-    <div>{errorText}</div>
-  </Alert>
-{/if}
\ No newline at end of file
+    <div class="alert-container">
+        <Alert class="error">
+            <div>{errorText}</div>
+        </Alert>
+    </div>
+{/if}
diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
index 9d9fccde..7aa025cb 100644
--- a/src/lib/helpers/types.js
+++ b/src/lib/helpers/types.js
@@ -172,7 +172,7 @@
  * @property {string} fieldType
  * @property {boolean} required
  * @property {string} redirectTo
- * @property {string?} [redirectToAgentName]
+ * @property {string?} [redirect_to_agent]
  */
 
 /**
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index fabe5544..c231d278 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -39,6 +39,7 @@ File: Main Css File
 @import "custom/components/print";
 @import "custom/components/loader";
 @import "custom/components/chat";
+@import "custom/components/alert";
 
 // Plugins
 @import "custom/plugins/custom-scrollbar";
diff --git a/src/lib/scss/custom/components/_alert.scss b/src/lib/scss/custom/components/_alert.scss
new file mode 100644
index 00000000..b86bdde2
--- /dev/null
+++ b/src/lib/scss/custom/components/_alert.scss
@@ -0,0 +1,20 @@
+.alert-container {
+    position: fixed;
+    top: 10%;
+    left: 35%;
+    right: 35%;
+    z-index: 8888;
+
+    .alert {
+        color: white;
+        text-align: center;
+    }
+
+    .success {
+        background-color: rgba(52, 195, 143, 0.9) !important;
+    }
+    
+    .error {
+        background-color: rgba(244, 106, 106, 0.9) !important;
+    }
+}
diff --git a/src/routes/page/agent/[agentId]/agent-routing.svelte b/src/routes/page/agent/[agentId]/agent-routing.svelte
index e8446e25..c5816455 100644
--- a/src/routes/page/agent/[agentId]/agent-routing.svelte
+++ b/src/routes/page/agent/[agentId]/agent-routing.svelte
@@ -28,10 +28,12 @@
                     <div class="table-responsive rule-body">
                         <Table>
                             <tbody>
+                                {#if !!rule.field}
                                 <tr>
                                     <th class="agent-prop-key">Field</th>
                                     <td>{rule.field}</td>
                                 </tr>
+                                {/if}
                                 {#if !!rule.description}
                                 <tr>
                                     <th class="agent-prop-key">Description</th>
@@ -52,7 +54,7 @@
                                 <tr>
                                     <th class="agent-prop-key">Redirect to Agent</th>
                                     <td style="cursor: pointer;" on:click={() => redirectToAgent(rule.redirectTo)}>
-                                        {rule.redirectToAgentName}
+                                        {rule.redirect_to_agent || ''}
                                     </td>
                                 </tr>
                                 {/if}