Merge pull request #158 from iceljc/features/refine-chat-window

direct to agent page

Author: Oceania2018

src/lib/helpers/utils/common.js

@@ -8,4 +8,11 @@ export function range(size = 3, startAt = 0) {
  */
 export function buildUrl(baseUrl, relativePath) {
     return new URL(relativePath, baseUrl);
+}
+
+/** @param {string} agentId */
+export function directToAgentPage(agentId) {
+    if (!agentId) return;
+        
+    window.open(`/page/agent/${agentId}`);
 }

src/routes/chat/[agentId]/[conversationId]/agent-info/chat-agent-info.svelte

@@ -1,32 +1,42 @@
 <script>
+	import { directToAgentPage } from '$lib/helpers/utils/common';
+
     /** @type {import('$types').AgentModel} */
 	export let agent;
 </script>
 
 <div>
     <div class="chat-agent-row">
-        <h3 class="text-primary fw-bold">
-            {agent?.name || ''}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <h3
+            class="text-primary fw-bold"
+            on:click={() => directToAgentPage(agent?.id)}
+        >
+            <span class="clickable">{agent?.name || ''}</span>
         </h3>
     </div>
     <div class="chat-agent-row">
         <div class="text-secondary">
-            {agent?.description || ''}
+            <span>{agent?.description || ''}</span>
         </div>
     </div>
     <div class="chat-agent-row">
         <div>
-            {agent?.llm_config?.provider || ''}{!!agent?.llm_config?.provider ? ',': ''} {agent?.llm_config?.model || ''}
+            <span>{agent?.llm_config?.provider || ''}{!!agent?.llm_config?.provider ? ',': ''} {agent?.llm_config?.model || ''}</span>
         </div>
     </div>
     <div class="chat-agent-row">
         <div>
-            <span>
-                {agent?.profiles?.length || 0} {agent?.profiles?.length > 1 ? 'profiles' : 'profile'}{!!agent?.profiles ? ', ' : ''}
-                {agent?.functions?.length || 0} {agent?.functions?.length > 1 ? 'functions' : 'function'}{!!agent?.functions ? ', ' : ''}
-                {agent?.templates?.length || 0} {agent?.templates?.length > 1 ? 'templates' : 'template'}{!!agent?.templates ? ', ' : ''}
-                {agent?.utilities?.length || 0} {agent?.utilities?.length > 1 ? 'utilities' : 'utility'}
-            </span>
+            {#if !!agent?.profiles}
+            <span>{agent?.profiles?.length || 0} {agent?.profiles?.length > 1 ? 'profiles' : 'profile'}{', '}</span>
+            {/if}
+            {#if !!agent?.functions}
+            <span>{agent?.functions?.length || 0} {agent?.functions?.length > 1 ? 'functions' : 'function'}{', '}</span>
+            {/if}
+            {#if !!agent?.utilities}
+            <span>{agent?.utilities?.length || 0} {agent?.utilities?.length > 1 ? 'utilities' : 'utility'}</span>
+            {/if}
         </div>
     </div>
 </div>

src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte

@@ -4,6 +4,7 @@
     import Markdown from "$lib/common/Markdown.svelte";
 	import { ContentLogSource } from '$lib/helpers/enums';
 	import { utcToLocal } from '$lib/helpers/datetime';
+	import { directToAgentPage } from '$lib/helpers/utils/common';
 
     /** @type {import('$types').ConversationContentLogModel} */
     export let data;
@@ -33,11 +34,6 @@
         e.preventDefault();
         is_collapsed = !is_collapsed;
     }
-
-    /** @param {string} agentId */
-    function directToAgentDetailPage(agentId) {
-        window.open(`/page/agent/${agentId}`);
-    }
 </script>
 
 <div class="log-element rounded" style="padding: 3px;" id={`content-log-${data.message_id}`}>
@@ -46,7 +42,7 @@
             {#if data?.name?.length > 0}
             <span class="h4">
                 {#if data?.agent_id?.length > 0}
-                <Link class="text-white" on:click={() => directToAgentDetailPage(data.agent_id)}>
+                <Link class="text-white" on:click={() => directToAgentPage(data.agent_id)}>
                     {data.name}
                 </Link>
                 {:else}

src/routes/page/agent/[agentId]/agent-routing.svelte

@@ -1,15 +1,10 @@
 <script>
 	import CollapsibleCard from "$lib/common/CollapsibleCard.svelte";
+	import { directToAgentPage } from "$lib/helpers/utils/common";
 	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>
@@ -53,7 +48,7 @@
                                 {#if !!rule.redirectTo}
                                 <tr>
                                     <th class="agent-prop-key">Redirect to Agent</th>
-                                    <td style="cursor: pointer;" on:click={() => redirectToAgent(rule.redirectTo)}>
+                                    <td style="cursor: pointer;" on:click={() => directToAgentPage(rule.redirectTo)}>
                                         {rule.redirect_to_agent || ''}
                                     </td>
                                 </tr>