Allow more customization.

SciSharp · Jan 9, 2024 · 273e427 · 273e427
1 parent 66ce702
commit 273e427
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 44 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,9 @@
 # Public
-PUBLIC_SERVICE_URL=https://botsharp.azurewebsites.net
+PUBLIC_SERVICE_URL=https://botsharp.azurewebsites.net
+PUBLIC_LOGO_URL=/images/logo.png
+PUBLIC_LOGIN_IMAGE=/images/profile-img.png
+PUBLIC_FAVICON_URL=/icons/favicon.ico
+PUBLIC_BRAND_NAME=BotSharp
+PUBLIC_ADMIN_USERNAME=[email protected]
+PUBLIC_ADMIN_PASSWORD=123456
+PUBLIC_COMPANY_NAME=SciSharp STACK
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<!--<link rel="icon" href="%sveltekit.assets%/icons/favicon.ico" />-->
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/src/lib/common/HeadTitle.svelte b/src/lib/common/HeadTitle.svelte
@@ -1,7 +1,9 @@
 <script>
+	import {PUBLIC_FAVICON_URL, PUBLIC_BRAND_NAME} from '$env/static/public'
 	export let title = 'Home';
 </script>
 
 <svelte:head>
-	<title>{title} | BotSharp - Admin & Dashboard</title>
+	<link rel="icon" type="image/x-icon" href={PUBLIC_FAVICON_URL}>
+	<title>{title} | {PUBLIC_BRAND_NAME} - Admin & Dashboard</title>
 </svelte:head>
diff --git a/src/lib/drawflow/drawflow.css b/src/lib/drawflow/drawflow.css
@@ -1,8 +1,8 @@
 .drawflow .drawflow-node {
-    background: rgb(128, 0, 128);
+    background: var(--bs-primary);
     color: white;
 }
 
 .drawflow .drawflow-node.selected {
-    background: rgb(0, 200, 50);
+    background: var(--bs-success);
 }
diff --git a/src/lib/helpers/datetime.js b/src/lib/helpers/datetime.js
@@ -7,6 +7,9 @@ export function format(datetime, type = 'date') {
     if (type == 'date') {
         const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
         return date.toLocaleString(undefined, options);
+    } else if (type == 'short-date') {
+        const options = { year: 'numeric', month: 'short', day: 'numeric' };
+        return date.toLocaleString(undefined, options);
     } else if (type == 'time') {
         const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
         return date.toLocaleString(undefined, options);

diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
@@ -63,6 +63,7 @@
  * @typedef {Object} AgentFilter
  * @property {boolean} [isRouter]
  * @property {boolean} [isEvaluator]
+ * @property {boolean} [allowRouting]
  */
 
 /**
@@ -73,6 +74,7 @@
  * @property {string} instruction - System prompt
  * @property {boolean} disabled
  * @property {boolean} is_public
+ * @property {boolean} is_router
  * @property {string} icon_url - Icon
  * @property {boolean} allow_routing
  * @property {Date} created_datetime
@@ -100,9 +102,9 @@
 /**
  * @typedef {Object} ConversationFilter
  * @property {Pagination} pager - Pagination
- * @property {string?} agentId - The agent id.
- * @property {string?} channel - The conversation channel.
- * @property {string?} status - The conversation status.
+ * @property {string?} [agentId] - The agent id.
+ * @property {string?} [channel] - The conversation channel.
+ * @property {string?} [status] - The conversation status.
  */
 
 /**

diff --git a/src/routes/(authentication)/login/+page.svelte b/src/routes/(authentication)/login/+page.svelte
@@ -15,9 +15,17 @@
 	import Headtitle from '$lib/common/HeadTitle.svelte';
 	import { getToken } from '$lib/services/auth-service.js'
 	import { goto } from '$app/navigation';
+	import { 
+		PUBLIC_LOGO_URL, 
+		PUBLIC_LOGIN_IMAGE,
+		PUBLIC_BRAND_NAME, 
+		PUBLIC_ADMIN_USERNAME, 
+		PUBLIC_ADMIN_PASSWORD,
+		PUBLIC_COMPANY_NAME 
+	} from '$env/static/public';
 
-	let username = '[email protected]';
-	let password = '123456';
+	let username = PUBLIC_ADMIN_USERNAME;
+	let password = PUBLIC_ADMIN_PASSWORD;
 	let isOpen = false;
 	let msg = '';
 	let status = '';
@@ -44,11 +52,11 @@
 							<Col class="col-7">
 								<div class="text-primary p-4">
 									<h5 class="text-primary">Welcome Back !</h5>
-									<p>Sign in to continue to BotSharp.</p>
+									<p>Sign in to continue to {PUBLIC_BRAND_NAME}.</p>
 								</div>
 							</Col>
 							<Col class="col-5 align-self-end">
-								<img src='/images/profile-img.png' alt="" class="img-fluid" />
+								<img src={PUBLIC_LOGIN_IMAGE} alt="" class="img-fluid" />
 							</Col>
 						</Row>
 					</div>
@@ -57,14 +65,14 @@
 							<Link href="/dashboard" class="auth-logo-light">
 								<div class="avatar-md profile-user-wid mb-4">
 									<span class="avatar-title rounded-circle bg-light">
-										<img src='/images/logo.png' alt="" class="rounded-circle" height="55" />
+										<img src={PUBLIC_LOGO_URL} alt="" class="rounded-circle" height="55" />
 									</span>
 								</div>
 							</Link>
 							<Link href="/dashboard" class="auth-logo-dark">
 								<div class="avatar-md profile-user-wid mb-4">
 									<span class="avatar-title rounded-circle bg-light">
-										<img src='/images/logo.png' alt="" class="rounded-circle" height="55" />
+										<img src={PUBLIC_LOGO_URL} alt="" class="rounded-circle" height="55" />
 									</span>
 								</div>
 							</Link>
@@ -149,7 +157,7 @@
 						<Link href="/register" class="fw-medium text-primary">Signup now</Link>
 					</p>
 					<p>
-						© {new Date().getFullYear()} SciSharp STACK. Crafted with
+						© {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}. Crafted with
 						<i class="mdi mdi-heart text-danger" /> by open source community
 					</p>
 				</div>

diff --git a/src/routes/(authentication)/recoverpw/+page.svelte b/src/routes/(authentication)/recoverpw/+page.svelte
@@ -2,6 +2,7 @@
 	import Link from 'svelte-link';
 	import { Row, Col, CardBody, Card, Container, Form, Label, Input, Button, Alert } from '@sveltestrap/sveltestrap';
 	import Headtitle from '$lib/common/HeadTitle.svelte';
+	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
 </script>
 
 <Headtitle title="Recover Password" />
@@ -29,7 +30,7 @@
 							<Link href="/dashboard">
 								<div class="avatar-md profile-user-wid mb-4">
 									<span class="avatar-title rounded-circle bg-light">
-										<img src='/images/logo.png' alt="" class="rounded-circle" height="34" />
+										<img src={PUBLIC_LOGO_URL} alt="" class="rounded-circle" height="34" />
 									</span>
 								</div>
 							</Link>
@@ -66,8 +67,8 @@
 						<Link href="/login" class="fw-medium text-primary">Sign In here</Link>
 					</p>
 					<p>
-						© {new Date().getFullYear()} SciSharp STACK. Crafted with
-						<i class="mdi mdi-heart text-danger" /> by SciSharp STACK
+						© {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}. Crafted with
+						<i class="mdi mdi-heart text-danger" /> by Open Source community
 					</p>
 				</div>
 			</Col>

diff --git a/src/routes/(authentication)/register/+page.svelte b/src/routes/(authentication)/register/+page.svelte
@@ -3,6 +3,7 @@
 	import { Row, Col, CardBody, Card, Container, Form, Label, Input, Button, Alert } from '@sveltestrap/sveltestrap';
 	import Headtitle from '$lib/common/HeadTitle.svelte';
 	import { goto } from '$app/navigation';
+	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
 
 	let username = '';
 	let emailid = '';
@@ -65,7 +66,7 @@
 							<Col class="col-7">
 								<div class="text-primary p-4">
 									<h5 class="text-primary">Free Register</h5>
-									<p>Get your free SciSharp account now.</p>
+									<p>Get your free account now.</p>
 								</div>
 							</Col>
 							<Col class="col-5 align-self-end">
@@ -78,7 +79,7 @@
 							<Link href="/dashboard">
 								<div class="avatar-md profile-user-wid mb-4">
 									<span class="avatar-title rounded-circle bg-light">
-										<img src='/images/logo.png' alt="" class="rounded-circle" height="34" />
+										<img src={PUBLIC_LOGO_URL} alt="" class="rounded-circle" height="34" />
 									</span>
 								</div>
 							</Link>
@@ -155,7 +156,7 @@
 
 								<div class="mt-4 text-center">
 									<p class="mb-0">
-										By registering you agree to the SciSharp <Link href="#" class="text-primary"
+										By registering you agree to the <Link href="#" class="text-primary"
 											>Terms of Use</Link
 										>
 									</p>
@@ -170,8 +171,8 @@
 						<Link href="/login" class="fw-medium text-primary">Login</Link>
 					</p>
 					<p>
-						© {new Date().getFullYear()} SciSharp STACK. Crafted with
-						<i class="mdi mdi-heart text-danger" /> by SciSharp STACK
+						© {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}. Crafted with
+						<i class="mdi mdi-heart text-danger" /> by Open Source community
 					</p>
 				</div>
 			</Col>

diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
@@ -2,14 +2,15 @@
     import Link from "svelte-link";
     import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import HeadTitle from "$lib/common/HeadTitle.svelte";
+    import { PUBLIC_LOGO_URL, PUBLIC_BRAND_NAME } from '$env/static/public';
   </script>
 
-  <HeadTitle title="BotSharp Workspace" />
+  <HeadTitle title="{PUBLIC_BRAND_NAME} Workspace" />
 
   <div class="home-btn d-none d-sm-block">
     <Link href="/" class="text-dark">              
         <img
-            src="/images/logo.png"
+            src={PUBLIC_LOGO_URL}
             alt="logo"
             height="50"
             class="auth-logo-dark mx-auto"
@@ -29,7 +30,7 @@
                               </div>
                           </Col>
                       </Row>
-                      <h4 class="mt-5">Let&#39;s <a href="/login">get started</a> with BotSharp</h4>
+                      <h4 class="mt-5">Let&#39;s <a href="/login">get started</a> with {PUBLIC_BRAND_NAME}</h4>
                       <p class="text-muted">
                       A central workspace for building, testing and evaluating your AI Agents.
                       </p>

diff --git a/src/routes/(pages)/agent/card-agent.svelte b/src/routes/(pages)/agent/card-agent.svelte
@@ -30,6 +30,16 @@
             </h5>
             <p class="text-muted mb-4" style="height: 35px;">{agent.description}</p>
             <div class="avatar-group" style="height:35px;">
+              {#if agent.is_router}
+              <div class="avatar-group-item me-3">
+                  <img src="/icons/router.png" class="rounded-circle avatar-xs" alt="routing"/>
+              </div>
+              {/if}
+              {#if agent.allow_routing}
+              <div class="avatar-group-item me-3">
+                  <img src="/icons/routing-2.png" class="rounded-circle avatar-xs" alt="routing"/>
+              </div>
+              {/if}
               {#each agent.functions as fn}
                 <div class="avatar-group-item">
                 <Link href="#" class="d-inline-block" id={"member" + fn.name}>
@@ -43,17 +53,17 @@
       </CardBody>
       <div class="px-4 py-3 border-top">
         <ul class="list-inline mb-0">
-          <li class="list-inline-item me-3">
-            <Badge color={agent.disabled ? "warning" : "success"} class={"bg-" + agent.disabled ? "warning" : "success"}
-              >{agent.disabled ? "Disabled" : "Enabled"}</Badge>
+          <li class="list-inline-item me-1">
+            <Badge color={agent.disabled ? "warning" : "success"}>{agent.disabled ? "Disabled" : "Enabled"}</Badge>
+          </li>
+          <li class="list-inline-item me-1">
+            <Badge color={agent.is_public ? "success" : "warning"}>{agent.is_public ? "Public" : "Private"}</Badge>
           </li>
-          {" "}
-          <li class="list-inline-item me-3" id="dueDate">
+          <li class="list-inline-item me-1" id="dueDate">
             <i class="bx bx-calendar me-1" />
-            {format(agent.updated_datetime)}
+            {format(agent.updated_datetime, 'short-date')}
           </li>
-          {" "}
-          <li class="list-inline-item me-3" id="comments">
+          <li class="list-inline-item me-1" id="comments">
             <a href= "/chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank">
               <i class="bx bx-chat" /> Live Chat
             </a>

diff --git a/src/routes/(pages)/agent/router/routing-flow.svelte b/src/routes/(pages)/agent/router/routing-flow.svelte
@@ -15,7 +15,8 @@
     onMount(async () => {
         agents = await getAgents({
             isRouter: false,
-            isEvaluator: false
+            isEvaluator: false,
+            allowRouting: true
         });
 
         const container = document.getElementById("drawflow");

diff --git a/src/routes/(pages)/conversation/+page.svelte b/src/routes/(pages)/conversation/+page.svelte
@@ -25,10 +25,7 @@
 
     /** @type {import('$types').ConversationFilter} */
     let filter = { 
-		pager: { page: 0, size: 20, count: 0 }, 
-		agentId: '01fcc3e5-9af7-49e6-ad7a-a760bd12dc4a', 
-		channel: null, 		
-		status: null 
+		pager: { page: 0, size: 20, count: 0 }
 	};	
 
 	/** @type {import('$types').Pagination} */

diff --git a/src/routes/VerticalLayout/Footer.svelte b/src/routes/VerticalLayout/Footer.svelte
@@ -1,13 +1,14 @@
 <script>
 	import { Col, Container, Row } from '@sveltestrap/sveltestrap';
+    import { PUBLIC_COMPANY_NAME } from '$env/static/public'
 
 </script>
 
 <footer class="footer">
     <Container fluid>
         <Row>
             <Col sm={6}>
-                {new Date().getFullYear()} © SciSharp STACK.
+                {new Date().getFullYear()} © {PUBLIC_COMPANY_NAME}.
             </Col>
             <Col sm={6}>
                 <div class="text-sm-end d-none d-sm-block">

diff --git a/src/routes/VerticalLayout/Header.svelte b/src/routes/VerticalLayout/Header.svelte
@@ -7,6 +7,7 @@
 	import NotificationDropdown from '$lib/common/NotificationDropdown.svelte';
 	import ProfileDropdown from '$lib/common/ProfileDropdown.svelte';
 	import { OverlayScrollbars } from 'overlayscrollbars';
+	import { PUBLIC_LOGO_URL } from '$env/static/public';
 
 	const toggleSideBar = () => {
 		if (browser) {
@@ -44,19 +45,19 @@
 			<div class="navbar-brand-box">
 				<a href="/dashboard" class="logo logo-dark">
 					<span class="logo-sm">
-						<img src='/images/logo.png' alt="" height="25" />
+						<img src={PUBLIC_LOGO_URL} alt="" height="25" />
 					</span>
 					<span class="logo-lg">
-						<img src='/images/logo.png' alt="" height="50" />
+						<img src={PUBLIC_LOGO_URL} alt="" height="40" />
 					</span>
 				</a>
 
 				<a href="/dashboard" class="logo logo-light">
 					<span class="logo-sm">
-						<img src='/images/logo.png' alt="" height="25" />
+						<img src={PUBLIC_LOGO_URL} alt="" height="25" />
 					</span>
 					<span class="logo-lg">
-						<img src='/images/logo.png' alt="" height="50" />
+						<img src={PUBLIC_LOGO_URL} alt="" height="40" />
 					</span>
 				</a>
 			</div>

diff --git a/static/favicon.ico → static/icons/favicon.ico b/static/favicon.ico → static/icons/favicon.ico
diff --git a/static/icons/router.png b/static/icons/router.png
diff --git a/static/icons/routing-1.png b/static/icons/routing-1.png
diff --git a/static/icons/routing-2.png b/static/icons/routing-2.png