Features/refine chat window

src/lib/helpers/store.js

@@ -20,6 +20,17 @@ const createGlobalEventStore = () => {
 
 export const globalEventStore = createGlobalEventStore();
 
+/** @type {Writable<import('$pluginTypes').PluginMenuDefModel[]>} */
+const createGlobalMenuStore = () => {
+    const { set, subscribe } = writable([]);
+    return {
+        set,
+        subscribe
+    };
+}
+
+export const globalMenuStore = createGlobalMenuStore();
+
 
 /** @type {Writable<import('$userTypes').UserModel>} */
 export const userStore = writable({ id: "", full_name: "", expires: 0, token: null });

src/lib/helpers/types/pluginTypes.js

@@ -16,6 +16,7 @@
  * @property {string} label
  * @property {string} icon
  * @property {string} link
+ * @property {string?} [embedUrl]
  * @property {boolean} isHeader
  */
 

src/routes/VerticalLayout/Index.svelte

@@ -1,18 +1,18 @@
 <script>
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 	import RightSidebar from '$lib/common/RightSidebar.svelte';
+	import { getPluginMenu } from '$lib/services/plugin-service';
+	import { myInfo } from '$lib/services/auth-service';
+	import { globalMenuStore } from '$lib/helpers/store';
 	import Header from './Header.svelte';
 	import Sidebar from './Sidebar.svelte';
-	import { browser } from '$app/environment';
 	import Footer from './Footer.svelte';
-	import { onMount } from 'svelte';
-	import { getPluginMenu } from '$lib/services/plugin-service';
-	import { myInfo } from '$lib/services/auth-service';
-
+
 	/** @type {import('$pluginTypes').PluginMenuDefModel[]} */
 	let menu;
-	/**
-	 * @type {import("$userTypes").UserModel}
-	 */
+
+	/** @type {import("$userTypes").UserModel} */
 	let user;
 
 	const toggleRightBar = () => {
@@ -31,6 +31,7 @@
 
 	onMount(async () => {
 		menu = await getPluginMenu();
+		globalMenuStore.set(menu || []);
 		user = await myInfo();
 		if (browser) {
 			document.body.setAttribute('data-layout', 'vertical');

src/routes/page/agent/+page.svelte

@@ -1,20 +1,20 @@
 <script>
 	import { onDestroy, onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { goto } from '$app/navigation';
+	import Swal from 'sweetalert2';
 	import { Button, Col, Row } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import CardAgent from './card-agent.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-  	import { createAgent, getAgentLabels, getAgents } from '$lib/services/agent-service.js';
-  	import { myInfo } from '$lib/services/auth-service';
 	import PlainPagination from '$lib/common/PlainPagination.svelte';
-	import { _ } from 'svelte-i18n'
-	import { goto } from '$app/navigation';
-	import Swal from 'sweetalert2';
+	import MultiSelect from '$lib/common/MultiSelect.svelte';
+  	import { createAgent, getAgentLabels, getAgents } from '$lib/services/agent-service.js';
 	import { AgentType, GlobalEvent, UserPermission } from '$lib/helpers/enums';
+  	import { myInfo } from '$lib/services/auth-service';
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { globalEventStore } from '$lib/helpers/store';
-	import MultiSelect from '$lib/common/MultiSelect.svelte';
+	import CardAgent from './card-agent.svelte';
 
 
   	const firstPage = 1;

src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte

@@ -269,24 +269,26 @@
         </div>
 
         <div class="agent-utility-container">
-            <div class="merge-utility">
-                <Input
-					type="checkbox"
-					checked={agent?.merge_utility || false}
-					on:change={e => { toggleMergeUtility(e); handleAgentChange(); }}
-				/>
-                <div class="fw-bold">
-                    Merge utilities
-                </div>
-                <div
-                    class="line-align-center"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    title="Merge with entry agent utilities"
-                >
-                    <i class="bx bx-info-circle" />
+            {#if !agent?.is_router}
+                <div class="merge-utility">
+                    <Input
+                        type="checkbox"
+                        checked={agent?.merge_utility || false}
+                        on:change={e => { toggleMergeUtility(e); handleAgentChange(); }}
+                    />
+                    <div class="fw-bold">
+                        Merge utilities
+                    </div>
+                    <div
+                        class="line-align-center"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        title="Merge with entry agent utilities"
+                    >
+                        <i class="bx bx-info-circle" />
+                    </div>
                 </div>
-            </div>
+            {/if}
 
             {#each innerUtilities as utility, uid (uid)}
                 <div class="utility-wrapper">

src/routes/page/agent/metrics/+page.svelte

@@ -0,0 +1,45 @@
+<script>
+    import { onDestroy } from 'svelte';
+    import { page } from '$app/stores';
+    import { _ } from 'svelte-i18n';
+    import { Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
+	import HeadTitle from "$lib/common/HeadTitle.svelte";
+	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	import { globalMenuStore } from '$lib/helpers/store';
+
+    /** @type {string} */
+    let embedUrl = '';
+
+    const unsubscriber = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
+        const url = $page.url.pathname;
+        const pageInfo = menu.find(x => x.link === url) || null;
+        embedUrl = pageInfo?.embedUrl || '';
+    });
+
+    onDestroy(() => {
+        unsubscriber?.();
+    });
+</script>
+
+<HeadTitle title="{$_('Metrics')}" />
+<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Metrics')}" />
+
+{#if embedUrl}
+<Row>
+	<Col lg="12">
+		<Card>
+			<CardBody>
+                <iframe
+                    title="agent-metrics"
+                    height="100%"
+                    width="100%"
+                    src={embedUrl}
+                    frameborder="0"
+                    allowfullscreen
+                >
+                </iframe>
+            </CardBody>
+        </Card>
+    </Col>
+</Row>
+{/if}

svelte.config.js

@@ -49,6 +49,7 @@ const config = {
 				"/page/agent",
 				"/page/agent/router",
 				"/page/agent/evaluator",
+				"/page/agent/metrics",
 				"/page/agent/[agentId]",
 				"/page/agent/[agentId]/build",
 				"/page/agent/[agentId]/train",