SciSharp · Oceania2018 · Mar 22, 2024 · Mar 21, 2024 · Mar 22, 2024 · Mar 22, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
 		"overlayscrollbars": "^2.4.4",
 		"overlayscrollbars-svelte": "^0.5.2",
 		"svelte-awesome-color-picker": "^2.4.7",
+		"svelte-collapse": "^0.1.2",
 		"svelte-file-dropzone": "^2.0.2",
 		"svelte-flatpickr": "^3.3.3",
 		"svelte-i18n": "^4.0.0",

diff --git a/src/lib/common/CollapsibleCard.svelte b/src/lib/common/CollapsibleCard.svelte
@@ -0,0 +1,52 @@
+<script>
+    import { createEventDispatcher } from 'svelte'
+    import collapse from 'svelte-collapse';
+
+    /** @type {boolean} */
+    export let open = true;
+
+    /** @type {number} */
+    export let duration = 0.2;
+
+    /** @type {string} */
+    export let easing = 'ease';
+
+    const dispatch = createEventDispatcher()
+
+    function handleToggle () {
+        open = !open;
+        if (open) {
+            dispatch('open');
+        }
+        else {
+            dispatch('close');
+        }
+    }
+</script>
+
+<div class='collapsible-card' class:open aria-expanded={open}>
+    <button type="button" class='collapsible-card-header' on:click={handleToggle}>
+        <slot name='header'/>
+    </button>
+
+    <div class='collapsible-card-body' use:collapse={{open, duration, easing}}>
+        <slot name='body'/>
+    </div>
+</div>
+
+<style>
+    .collapsible-card {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    .collapsible-card-header {
+        cursor: pointer;
+        user-select: none;
+        width: 100%;
+        text-align: left;
+    }
+    button {
+        background: transparent;
+        border: none !important;
+    }
+</style>
diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
@@ -19,7 +19,8 @@ const richType = {
     Text: 'text',
     QuickReply: 'quick_reply',
     Button: 'button_template',
-    MultiSelect: 'multi-select_template'
+    MultiSelect: 'multi-select_template',
+    Generic: 'generic_template'
 }
 export const RichType = Object.freeze(richType);
 

diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
@@ -172,6 +172,7 @@
  * @property {string} fieldType
  * @property {boolean} required
  * @property {string} redirectTo
+ * @property {string?} [redirectToAgentName]
  */
 
 /**

diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
@@ -85,6 +85,7 @@ File: Main Css File
 @import "custom/pages/extras-pages";
 @import "custom/pages/jobs";
 @import "custom/pages/conversation";
+@import "custom/pages/agent";
 
 //RTL
 // @import "custom/rtl/bootstrap-rtl";

diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
@@ -0,0 +1,33 @@
+.agent-prop-key {
+    width: 45%;
+}
+
+.agent-profile-container {
+    .profile-name {
+        font-size: 1.1em;
+    }
+}
+
+.routing-rule-container {
+    .rule-header {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        padding-left: 10px;
+    }
+
+    .rule-title {
+        border: none;
+        padding-bottom: 0;
+    }
+
+    .rule-body {
+        padding: 0px 10px;
+
+        table tbody tr:last-child {
+            border: none;
+            th, td {
+                border: none;
+            }
+        }
+    }
+}
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-options.svelte
@@ -25,14 +25,41 @@
 
     onMount(() => {
         answers = [];
-        localOptions = options?.map(op => {
-            return {
-                ...op,
-                isClicked: false
-            }
-        }) || [];
+        localOptions = collectOptions(options);
     });
 
+    /** @param {any[]} options */
+    function collectOptions(options) {
+        /** @type {any[]} */
+        let res = [];
+        options?.map(op => {
+            if (!!!op.title || !!!op.payload) {
+                return;
+            }
+
+            if (op.buttons?.length > 0) {
+                // @ts-ignore
+                op.buttons?.map(x => {
+                    if (!!x.title && !!x.payload) {
+                        res.push({
+                            title: x.title,
+                            payload: x.payload,
+                            isClicked: false
+                        });
+                    }
+                });
+            } else {
+                res.push({
+                    title: op.title,
+                    payload: op.payload,
+                    isClicked: false
+                });
+            }
+        });
+
+        return res;
+    }
+
     /**
 	 * @param {any} e
      * @param {string} payload

diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte
@@ -36,5 +36,7 @@
     <RcOptions options={message?.rich_content?.message?.buttons} disableOption={disableOption} onConfirm={handleConfirm} />
     {:else if message?.rich_content?.message?.rich_type === RichType.MultiSelect}
     <RcOptions options={message?.rich_content?.message?.options} isMultiSelect disableOption={disableOption} onConfirm={handleConfirm} />
+    {:else if message?.rich_content?.message?.rich_type === RichType.Generic}
+    <RcOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} />
     {/if}
 {/if}
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
@@ -9,6 +9,7 @@
     import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import AgentPrompt from './agent-prompt.svelte';
 	import AgentOverview from './agent-overview.svelte';
+    import AgentRouting from './agent-routing.svelte';
     import AgentFunction from './agent-function.svelte';
     import AgentLlmConfig from './agent-llm-config.svelte';
     import { page } from '$app/stores';
@@ -17,6 +18,7 @@
     const params = $page.params;
     import { _ } from 'svelte-i18n'  
 
+
     /** @type {import('$types').AgentModel} */
     let agent;
     /** @type {any} */
@@ -73,6 +75,9 @@
     <Col style="flex: 30%;">
         <AgentOverview agent={agent} />
         <AgentLlmConfig agent={agent} />
+        {#if agent.routing_rules?.length > 0}
+        <AgentRouting agent={agent} />
+        {/if}
     </Col>
     <Col style="flex: 40%;">
         <AgentPrompt agent={agent} />

diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -1,9 +1,7 @@
 <script>
-    import Link from 'svelte-link';
     import { Button, Card, CardBody, CardHeader, Col, Table } from '@sveltestrap/sveltestrap';
     import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
     import { format } from '$lib/helpers/datetime';
-	import AgentLlmConfig from './agent-llm-config.svelte';
 
     /** @type {import('$types').AgentModel} */
     export let agent;
@@ -22,17 +20,17 @@
             <Table >
                 <tbody>
                     <tr>
-                        <th>Type</th>
+                        <th class="agent-prop-key">Type</th>
                         <td>
                             {#if agent.is_router}
                                 Routing Agent
                             {:else}
                                 Task Agent
                             {/if}
                         </td>
-                    </tr>                    
+                    </tr>
                     <tr>
-                        <th>Visibility</th>
+                        <th class="agent-prop-key">Visibility</th>
                         <td>
                             <div class="form-check mb-3">
                                 <input class="form-check-input" type="checkbox" bind:checked={agent.is_public} id="is_public" />
@@ -41,38 +39,35 @@
                         </td>
                     </tr>
                     <tr>
-                        <th>Routable</th>
+                        <th class="agent-prop-key">Routable</th>
                         <td>
                             <div class="form-check mb-3">
                                 <input class="form-check-input" type="checkbox" bind:checked={agent.allow_routing} id="allow_routing" />
-                                <label class="form-check-label" for="allow_routing"> Allow </label>
-                            </div>                                
+                                <label class="form-check-label" for="allow_routing">Allow</label>
+                            </div>
                         </td>
                     </tr>
                     <tr>
-                        <th>Profiles</th>
+                        <th class="agent-prop-key">Profiles</th>
                         <td>
-                            {#each agent.profiles as profile}
-                            <div style="display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px;">
-                                <input class="form-control" style="flex: 0.9;" type="text" value={profile} />
-                                <div style="flex: 0.1; display: flex; align-items: center; cursor: pointer; font-size: 18px; color: red;">
-                                    <i class="bx bxs-no-entry " />
-                                </div>
+                            <div class="agent-profile-container">
+                                {#each agent.profiles as profile}
+                                <div class="profile-name">{profile}</div>
+                                {/each}
                             </div>
-                            {/each}
                         </td>
                     </tr>
                     <tr>
-                        <th>Status</th>
+                        <th class="agent-prop-key">Status</th>
                         <td>							
                             <div class="form-check mb-3">
                                 <input class="form-check-input" type="checkbox" bind:checked={agent.disabled} id="disabled" />
-                                <label class="form-check-label" for="disabled"> Disabled </label>
+                                <label class="form-check-label" for="disabled">Disabled</label>
                             </div>
                         </td>
                     </tr>
                     <tr>
-                        <th>Created Date</th>
+                        <th class="agent-prop-key">Created Date</th>
                         <td>{format(agent.created_datetime, 'time')}</td>
                     </tr>
                 </tbody>

diff --git a/src/routes/page/agent/[agentId]/agent-prompt.svelte b/src/routes/page/agent/[agentId]/agent-prompt.svelte
@@ -1,5 +1,4 @@
 <script>
-    import Link from 'svelte-link'
     import { Card, CardBody, Col, FormGroup, Label, Input } from '@sveltestrap/sveltestrap';
 
     /** @type {import('$types').AgentModel} */
@@ -21,7 +20,7 @@
                 type="textarea"
                 id="formmessage"
                 class="form-control"
-                rows="3"
+                rows="4"
                 bind:value={agent.description}
                 placeholder="Enter your Message"
             />

diff --git a/src/routes/page/agent/[agentId]/agent-routing.svelte b/src/routes/page/agent/[agentId]/agent-routing.svelte
@@ -0,0 +1,71 @@
+<script>
+	import CollapsibleCard from "$lib/common/CollapsibleCard.svelte";
+	import { Card, CardBody, Table } from "@sveltestrap/sveltestrap";
+
+    /** @type {import('$types').AgentModel} */
+    export let agent;
+
+    /** @param {string} agentId */
+    function redirectToAgent(agentId) {
+        window.open(`/page/agent/${agentId}`);
+    }
+
+</script>
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">Routing Rules</h5>
+        </div>
+
+        {#each agent.routing_rules as rule, idx (idx)}
+        <div class="routing-rule-container">
+            <CollapsibleCard>
+                <div slot='header'>
+                    <h5 class="rule-header">{`Rule #${idx + 1}`}</h5>
+                </div>
+                <div slot='body'>
+                    <div class="table-responsive rule-body">
+                        <Table>
+                            <tbody>
+                                <tr>
+                                    <th class="agent-prop-key">Field</th>
+                                    <td>{rule.field}</td>
+                                </tr>
+                                <tr>
+                                    <th class="agent-prop-key">Description</th>
+                                    <td>{rule.description}</td>
+                                </tr>
+                                {#if !!rule.fieldType}
+                                <tr>
+                                    <th class="agent-prop-key">Field Type</th>
+                                    <td>{rule.fieldType}</td>
+                                </tr>
+                                {/if}
+                                <tr>
+                                    <th class="agent-prop-key">Required</th>
+                                    <td>{!!rule.required ? `Yes` : `No`}</td>
+                                </tr>
+                                {#if !!rule.redirectTo}
+                                <tr>
+                                    <th class="agent-prop-key">Redirect to Agent</th>
+                                    <td style="cursor: pointer;" on:click={() => redirectToAgent(rule.redirectTo)}>
+                                        {rule.redirectToAgentName}
+                                    </td>
+                                </tr>
+                                {/if}
+                                {#if !!rule.type}
+                                <tr>
+                                    <th class="agent-prop-key">Type</th>
+                                    <td>{rule.type}</td>
+                                </tr>
+                                {/if}
+                            </tbody>
+                        </Table>
+                    </div>
+                </div>
+            </CollapsibleCard>
+        </div>
+        {/each}
+    </CardBody>
+</Card>