add profile edit

Author: iceljc

src/lib/helpers/types.js

@@ -118,6 +118,8 @@
  * @property {boolean} disabled
  * @property {boolean} is_public
  * @property {boolean} is_host
+ * @property {boolean} is_router
+ * @property {boolean} allow_routing
  * @property {string} icon_url - Icon
  * @property {string[]} profiles - The agent profiles.
  * @property {Date} created_datetime

src/lib/scss/custom/pages/_agent.scss

@@ -3,6 +3,7 @@
 }
 
 .agent-profile-container {
+    width: 50%;
     .profile-name {
         font-size: 1.1em;
     }

src/routes/page/agent/[agentId]/+page.svelte

@@ -58,8 +58,12 @@
     function handleAgentUpdate() {
         fetchJsonContent();
         isLoading = true;
-        agent.description = agent.description || '';
-        agent.instruction = agent.instruction || '';
+        agent = {
+            ...agent,
+            description: agent.description || '',
+            instruction: agent.instruction || '',
+            profiles: agent.profiles?.filter(x => x?.trim()?.length > 0) || []
+        };
         saveAgent(agent).then(res => {
             isLoading = false;
 			isComplete = true;
@@ -119,7 +123,7 @@
 {#if agent}
 <Row>
     <Col style="flex: 30%;">
-        <AgentOverview agent={agent} />
+        <AgentOverview agent={agent} profiles={agent.profiles || []} />
         <AgentLlmConfig agent={agent} />
         {#if agent.routing_rules?.length > 0}
             <AgentRouting agent={agent} />
@@ -135,8 +139,8 @@
     {#if !!agent?.editable}
     <Row>
         <div class="hstack gap-2 my-4">
-            <Button class="btn btn-soft-primary" on:click={updateCurrentAgent}>{$_('Save Agent')}</Button>
-            <Button class="btn btn-danger" on:click={deleteCurrentAgent}>{$_('Delete Agent')}</Button>
+            <Button class="btn btn-soft-primary" on:click={() => updateCurrentAgent()}>{$_('Save Agent')}</Button>
+            <Button class="btn btn-danger" on:click={() => deleteCurrentAgent()}>{$_('Delete Agent')}</Button>
         </div>
     </Row>
     {/if}

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

@@ -5,12 +5,48 @@
 
     /** @type {import('$types').AgentModel} */
     export let agent;
+
+    /** @type {string[]} */
+    export let profiles = [];
+
+    const profileLimit = 5;
+
+    function addProfile() {
+        if (!!!agent) return;
+
+        profiles = [...profiles, ''];
+        agent.profiles = profiles;
+    }
+
+    /**
+	 * @param {number} index
+	 */
+    function removeProfile(index) {
+        profiles = profiles.filter((x, idx) => idx !== index);
+        agent.profiles = profiles;
+    }
+
+    function chatWithAgent() {
+        if (!!!agent?.id) return;
+        
+        window.open(`/chat/${agent?.id}`, '_blank');
+    }
 </script>
 
 <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"
+                style="cursor: pointer;"
+                tabindex="-1"
+                role=''
+                on:keydown={() => {}}
+                on:click={() => chatWithAgent()}
+            />
             <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>
@@ -51,9 +87,38 @@
                         <th class="agent-prop-key">Profiles</th>
                         <td>
                             <div class="agent-profile-container">
-                                {#each agent.profiles as profile}
-                                <div class="profile-name">{profile}</div>
+                                {#each profiles as profile, index}
+                                <div style="display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px;">
+                                    <input
+                                        class="form-control"
+                                        style="flex: 0.9; border: none; padding-left: 0px;"
+                                        type="text"
+                                        placeholder="Typing here..."
+                                        bind:value={profile} maxlength={30} />
+                                    <div style="flex: 0.1; display: flex; align-items: center;">
+                                        <i
+                                            class="bx bxs-no-entry"
+                                            style="cursor: pointer; font-size: 18px; color: red;"
+                                            role="link"
+                                            tabindex="0"
+                                            on:keydown={() => {}}
+                                            on:click={() => removeProfile(index)}
+                                        />
+                                    </div>
+                                </div>
                                 {/each}
+                                {#if profiles?.length < profileLimit}
+                                <div style="font-size: 20px;">
+                                    <i
+                                        class="bx bx bx-list-plus"
+                                        style="cursor: pointer;"
+                                        role="link"
+                                        tabindex="0"
+                                        on:keydown={() => {}}
+                                        on:click={() => addProfile()}
+                                    />
+                                </div>
+                                {/if}
                             </div>
                         </td>
                     </tr>