Merge pull request #36 from hchen2020/main

Oceania2018 · web-flow · commit 08f3d04f95f2 · 2024-01-30T16:22:31.000-06:00
add base url.
diff --git a/.env b/.env
@@ -1,12 +1,12 @@
 # Public
 PUBLIC_SERVICE_URL=https://botsharp.azurewebsites.net
 PUBLIC_LIVECHAT_HOST=https://victorious-moss-007e11310.4.azurestaticapps.net
-PUBLIC_LIVECHAT_ENTRY_ICON=/images/users/bot.png
-PUBLIC_HOME_IMAGE=/images/megamenu-img.png
+PUBLIC_LIVECHAT_ENTRY_ICON=images/users/bot.png
+PUBLIC_HOME_IMAGE=images/megamenu-img.png
 PUBLIC_HOME_SLOGAN=A central workspace for building, testing and evaluating your AI Agents.
-PUBLIC_LOGO_URL=/images/logo.png
-PUBLIC_LOGIN_IMAGE=/images/profile-img.png
-PUBLIC_FAVICON_URL=/icons/favicon.ico
+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=admin@gmail.com
 PUBLIC_ADMIN_PASSWORD=123456
diff --git a/src/app.html b/src/app.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 	<head>
+		<base href="/" />
 		<meta charset="utf-8" />
 		<!--<link rel="icon" href="%sveltekit.assets%/icons/favicon.ico" />-->
 		<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1" />
diff --git a/src/lib/common/LanguageDropdown.svelte b/src/lib/common/LanguageDropdown.svelte
@@ -29,7 +29,7 @@
 <Dropdown {isOpen} toggle={() => (isOpen = !isOpen)} class="d-inline-block">
 	<DropdownToggle class="btn header-item" tag="button" color="">
 		<img
-			src='/images/flags/us.jpg'
+			src='images/flags/us.jpg'
 			alt="Samply"
 			height="16"
 		/>
diff --git a/src/lib/common/ProfileDropdown.svelte b/src/lib/common/ProfileDropdown.svelte
@@ -21,13 +21,13 @@
 		class="btn header-item waves-effect"
 		id="page-header-user-dropdown"
 	>
-		<img class="rounded-circle header-profile-user" src='/images/users/user-dummy.jpg' alt="Header Avatar" />
+		<img class="rounded-circle header-profile-user" src='images/users/user-dummy.jpg' alt="Header Avatar" />
 		<span class="d-none d-xl-inline-block ms-1" key="t-fullname">{user?.full_name}</span>
 		<i class="mdi mdi-chevron-down d-none d-xl-inline-block" />
 	</DropdownToggle>
 	<DropdownMenu end>
 		<!-- item-->
-		<DropdownItem href="/page/user/me"
+		<DropdownItem href="page/user/me"
 			><i class="bx bx-user font-size-16 align-middle me-1" />
 			<span>Profile</span>
 		</DropdownItem>
diff --git a/src/lib/common/data/languages.js b/src/lib/common/data/languages.js
@@ -1,12 +1,12 @@
 const languages = [
   {
     label: "English",
-    flag: '/images/flags/us.jpg',
+    flag: 'images/flags/us.jpg',
     value: 'en'
   },
   {
     label: "Chinese",
-    flag: '/images/flags/china.png',
+    flag: 'images/flags/china.png',
     value: 'zh'
   },  
 ]
diff --git a/src/lib/common/errors/error-500.svelte b/src/lib/common/errors/error-500.svelte
@@ -28,7 +28,7 @@
 	  <Row class="justify-content-center">
 		<Col md="8" xl="6">
 		  <div>
-			<img src='/images/error-img.png' alt="" class="img-fluid" />
+			<img src='images/error-img.png' alt="" class="img-fluid" />
 		  </div>
 		</Col>
 	  </Row>
diff --git a/src/routes/(authentication)/recoverpw/+page.svelte b/src/routes/(authentication)/recoverpw/+page.svelte
@@ -21,7 +21,7 @@
 								</div>
 							</Col>
 							<Col xs={5} class="align-self-end">
-								<img src='/images/profile-img.png' alt="" class="img-fluid" />
+								<img src='images/profile-img.png' alt="" class="img-fluid" />
 							</Col>
 						</Row>
 					</div>
diff --git a/src/routes/(authentication)/register/+page.svelte b/src/routes/(authentication)/register/+page.svelte
@@ -70,7 +70,7 @@
 								</div>
 							</Col>
 							<Col class="col-5 align-self-end">
-								<img src='/images/profile-img.png' alt="" class="img-fluid" />
+								<img src='images/profile-img.png' alt="" class="img-fluid" />
 							</Col>
 						</Row>
 					</div>
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
@@ -53,7 +53,7 @@
         <Col>
             <p class="section-subtitle text-muted text-center pt-4 font-secondary">Select a bot you want to start chatting with and click the Start button.</p>
             <div class="d-flex justify-content-center">
-                <a href="/chat/{agentId}" class="btn btn-primary">
+                <a href="chat/{agentId}" class="btn btn-primary">
                     <i class="mdi mdi-chat" />
                     <span>Start Conversation</span>
                 </a>
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
@@ -49,7 +49,7 @@
                 <span class="sr-only">Loading...</span>
             </div>
             <h3>Initializing a conversation, wait a moment please...</h3>
-            <a href={`/chat/${agentId}/${conversationId}`}>Click here if the browser doesn't redirect correctly.</a>
+            <a href={`chat/${agentId}/${conversationId}`}>Click here if the browser doesn't redirect correctly.</a>
         </Col>
     </Row>
 </Container>
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -137,7 +137,7 @@
 	async function newConversationHandler() {
 		const conversation = await newConversation(params.agentId);
         conversationStore.set(conversation);
-		window.location.href = `/chat/${params.agentId}/${conversation.id}`;
+		window.location.href = `chat/${params.agentId}/${conversation.id}`;
 	}
 
     async function sendTextMessage() {
@@ -368,7 +368,7 @@
 										{:else}
 										<div class="cicon-wrap float-start">
 											{#if message.sender.role == "client"}
-											<img src="/images/users/user-dummy.jpg" class="rounded-circle avatar-xs" alt="avatar">
+											<img src="images/users/user-dummy.jpg" class="rounded-circle avatar-xs" alt="avatar">
 											{:else}
 											<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
 											{/if}
diff --git a/src/routes/page/agent/[agentId]/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
@@ -30,7 +30,7 @@
     <CardBody>
         <div class="text-center">
             <h5 class="mt-1 mb-3">LLM Config</h5>
-            <img src="/images/brands/azure-openai-logo.avif" alt="" height="50" />
+            <img src="images/brands/azure-openai-logo.avif" alt="" height="50" />
             {#if agent.llm_config?.is_inherit}
             <i class="bx bx-copy"></i> <span class="text-muted">Inherited</span>    
             {/if}
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -12,7 +12,7 @@
 <Card>
     <CardHeader>
         <div class="text-center">
-            <img src="/images/users/bot.png" alt="" height="50" class="mx-auto d-block" />
+            <img src="images/users/bot.png" alt="" height="50" class="mx-auto d-block" />
             <h5 class="mt-1 mb-1"><InPlaceEdit bind:value={agent.name}/></h5>
             <p class="text-muted mb-0">Updated at {format(agent.updated_datetime, 'time')}</p>
         </div>
diff --git a/src/routes/page/agent/[agentId]/task/task-flow.svelte b/src/routes/page/agent/[agentId]/task/task-flow.svelte
@@ -5,21 +5,27 @@
     import { onMount, createEventDispatcher } from 'svelte';
     import { replaceNewLine } from '$lib/helpers/http';
     import { newConversation } from '$lib/services/conversation-service';
-    import { conversationStore, getConversationStore } from '$lib/helpers/store.js';
-    
+    import { conversationStore } from '$lib/helpers/store.js';
+    import { sendMessageToHub } from '$lib/services/conversation-service.js';
+
     /** @type {import('$types').AgentModel} */
     export let agent;
     /** @type {import('$types').AgentTemplate[]} */
     let taskNodes = [];
+
+    /** @type {Drawflow} */
+    let editor;
     /** @type {DrawflowNode} */
     let selectedNode;
 
+    let lastPosX = 0;
+
     const dispatch = createEventDispatcher();
     
     onMount(async () => {
         const container = document.getElementById("drawflow");
         if (container) {
-            const editor = new Drawflow(container);
+            editor = new Drawflow(container);
             editor.reroute = true;
             editor.reroute_fix_curvature = true;
             editor.start();
@@ -60,19 +66,22 @@
 
         // render tasks
         templates.forEach(template => {
-            const actionLink = `/page/agent/${agent.id}/task/${template.name}`;
+            const actionLink = `page/agent/${agent.id}/task/${template.name}`;
             let html = `<span class="h6">${template.name}</span>`;
             html += `<hr/><div style="max-height: 50px; overflow: hidden;">${replaceNewLine(template.content)}</div>`;
             
             const data = {
                 agent: agent.name,
                 task: template.name,
+                content: template.content
             };
             let nid = editor.addNode('agent', 1, 0, posX, posY, 'enabled-node', data, html, false);
             editor.addConnection(agentNodeId, nid, "output_1", "input_1");
 
             posY += nodeSpaceY;
         });
+
+        lastPosX = posX + nodeSpaceX;
     }
     
     /** @param {import('$types').AgentModel} agent */
@@ -82,12 +91,23 @@
     }
 
     async function handleTestInChat() {
-        window.location.href = `/chat/${agent.id}`;
+        window.location.href = `chat/${agent.id}`;
     }
 
     async function handleRunTask() {
+        // new conversation
         const conversation = await newConversation(agent.id);
         conversationStore.set(conversation);
+
+        // draw conversation node
+        let posX = lastPosX, posY = 100;
+        const html = "New task conversation";
+        editor.addNodeOutput(selectedNode.id);
+        let cid = editor.addNode('conversation', 1, 0, posX, posY, 'conversation', {}, html, false);
+        editor.addConnection(selectedNode.id, cid, "output_1", "input_1");
+        
+        // send message
+        await sendMessageToHub(agent.id, conversation.id, selectedNode.data.content);
     }
 </script>
 
@@ -103,5 +123,6 @@
         {/if}
     </button>
 </div>
+
 <div id="drawflow" style="height: 75vh; width: 100%">
 </div>
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
@@ -17,14 +17,14 @@
               {#if agent.icon_url}
               <img src={agent.icon_url} alt="" height="60" />
               {:else}
-              <img src="/images/users/bot.png" alt="" height="60" />
+              <img src="images/users/bot.png" alt="" height="60" />
               {/if}
             </span>
           </div>
 
           <div class="flex-grow-1 overflow-hidden">
             <h5 class="text-truncate font-size-15">
-              <Link href= "/page/agent/{agent.id}" class="text-dark">
+              <Link href= "page/agent/{agent.id}" class="text-dark">
                 {agent.name}
               </Link>
             </h5>
@@ -33,18 +33,18 @@
             <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"/>
+                  <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"/>
+                  <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}>
-                    <img src="/images/function.png" class="rounded-circle avatar-xs" alt={fn.name}/>
+                    <img src="images/function.png" class="rounded-circle avatar-xs" alt={fn.name}/>
                 </Link>
                 </div>
               {/each}
@@ -65,17 +65,17 @@
             {format(agent.updated_datetime, 'short-date')}
           </li>
           <li class="list-inline-item me-1" id="comments">
-            <a href= "/page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank">
+            <a href= "page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank">
               <i class="bx bx-wrench" /> Build
             </a>
           </li>          
           <li class="list-inline-item me-1" id="comments">
-            <a href= "/page/agent/{agent.id}/train" class="btn btn-primary btn-sm" target="_blank">
+            <a href= "page/agent/{agent.id}/train" class="btn btn-primary btn-sm" target="_blank">
               <i class="bx bx-book-open" /> Train
             </a>
           </li>
           <li class="list-inline-item me-1" id="comments">
-            <a href= "/chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank">
+            <a href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank">
               <i class="bx bx-chat" /> Test
             </a>
           </li>
diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte
@@ -67,7 +67,7 @@
         routers.forEach(router => {
             let profiles = [];
             const planner = getPlannerName(router);
-            const chatTestLinkHtml = `<a href= "/chat/${router.id}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-chat"></i></a>`;
+            const chatTestLinkHtml = `<a href= "chat/${router.id}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-chat"></i></a>`;
             let html = `<span class="h5">${router.name} ${chatTestLinkHtml}</span><span class="text-info">Routing with ${planner}</span>`;
             if (router.profiles.length > 0) {
                 profiles = router.profiles;
@@ -82,7 +82,7 @@
             };
 
             if (router.is_host) {
-                html =`<img src="/images/users/bot.png" height="30">${html}`;
+                html =`<img src="images/users/bot.png" height="30">${html}`;
             }
             let nodeId = editor.addNode('router', 1, 1, posX, routerPosY, 'router', data, `${html}`, false);;
             // connect user and router
@@ -94,10 +94,10 @@
         posX += nodeSpaceX;
         agents.forEach(agent => {       
             let profiles = [];
-            const chatTestLinkHtml = `<a href= "/chat/${agent.id}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-chat"></i></a>`;
+            const chatTestLinkHtml = `<a href= "chat/${agent.id}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-chat"></i></a>`;
             let html = `<span class="h6">${agent.name}</span>${chatTestLinkHtml}`;
             if (agent.type == "static") {
-                const taskLinkHtml = `<a href= "/page/agent/${agent.id}/task" class="btn btn-primary float-end" target="_blank"><i class="bx bx-task"></i></a>`;
+                const taskLinkHtml = `<a href= "page/agent/${agent.id}/task" class="btn btn-primary float-end" target="_blank"><i class="bx bx-task"></i></a>`;
                 html += taskLinkHtml;
             }
             if (agent.profiles.length > 0) {
@@ -106,7 +106,7 @@
             }
 
             if (agent.is_host) {
-                html =`<img src="/images/users/bot.png" height="30">${html}`;
+                html =`<img src="images/users/bot.png" height="30">${html}`;
             }
             
             const data = {
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
@@ -226,7 +226,7 @@
 							{#each conversations.items as conv}
 							<tr>
 								<td scope="row">
-									<a href="/page/conversation/{conv.id}">{conv.title}</a></td>
+									<a href="page/conversation/{conv.id}">{conv.title}</a></td>
 								<td>{conv.user.full_name}</td>
 								<td>{conv.agent_name}</td>
 								<td><span class="badge badge-soft-success">{conv.channel}</span></td>
@@ -236,12 +236,12 @@
 								<td>
 									<ul class="list-unstyled hstack gap-1 mb-0">
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="View Detail">
-											<Link href="/page/conversation/{conv.id}" class="btn btn-sm btn-soft-primary">
+											<Link href="page/conversation/{conv.id}" class="btn btn-sm btn-soft-primary">
                                                 <i class="mdi mdi-eye-outline" />
                                             </Link>
 										</li>
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Chat">
-											<Link href="/chat/{conv.agent_id}/{conv.id}" target="_blank" class="btn btn-sm btn-soft-info">
+											<Link href="chat/{conv.agent_id}/{conv.id}" target="_blank" class="btn btn-sm btn-soft-info">
                                                 <i class="mdi mdi-chat" />
                                             </Link>
 										</li>
diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -33,7 +33,7 @@
         }).then(async (result) => {
             if (result.value) {
                 await deleteConversation(conversation.id);
-                window.location.href = "/page/conversation";
+                window.location.href = "page/conversation";
             }
         });
     }
diff --git a/src/routes/page/dashboard/+page.svelte b/src/routes/page/dashboard/+page.svelte
@@ -68,7 +68,7 @@
 				<Row>
 					<Col sm={4}>
 						<div class="avatar-md profile-user-wid mb-4">
-							<Image src='/images/users/user-dummy.jpg' alt="" class="img-thumbnail rounded-circle" />
+							<Image src='images/users/user-dummy.jpg' alt="" class="img-thumbnail rounded-circle" />
 						</div>
 						<h5 class="font-size-15 text-truncate">{user?.full_name}</h5>
 						<p class="text-muted mb-0 text-truncate">Agent Manager</p>
@@ -86,7 +86,7 @@
 								</Col>
 							</Row>
 							<div class="mt-4">
-								<Link href="/page/user/me" class="btn btn-primary waves-effect waves-light btn-sm">
+								<Link href="page/user/me" class="btn btn-primary waves-effect waves-light btn-sm">
 									View Profile <i class="mdi mdi-arrow-right ms-1" />
 								</Link>
 							</div>
diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
@@ -79,7 +79,7 @@
 	/** @param {import('$types').PluginDefModel} plugin */
 	function getIconUrl(plugin) {
 		if (plugin.is_core) {
-			return '/images/logo.png';
+			return 'images/logo.png';
 		} else {
 			return plugin.icon_url ? plugin.icon_url : PUBLIC_PLUGIN_DEFAULT_ICON;
 		}
diff --git a/src/routes/page/plugin/plugin-list.svelte b/src/routes/page/plugin/plugin-list.svelte
diff --git a/src/routes/page/user/me/+page.svelte b/src/routes/page/user/me/+page.svelte

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,12 @@`
`1`	`1`	`const languages = [`
`2`	`2`	`{`
`3`	`3`	`label: "English",`
`4`		`- flag: '/images/flags/us.jpg',`
	`4`	`+ flag: 'images/flags/us.jpg',`
`5`	`5`	`value: 'en'`
`6`	`6`	`},`
`7`	`7`	`{`
`8`	`8`	`label: "Chinese",`
`9`		`- flag: '/images/flags/china.png',`
	`9`	`+ flag: 'images/flags/china.png',`
`10`	`10`	`value: 'zh'`
`11`	`11`	`},`
`12`	`12`	`]`