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

refine agent detail page

Author: iceljc

src/lib/common/RemoteSearchInput.svelte

@@ -53,32 +53,32 @@
 </script>
 
 <div class="position-relative">
-  <Dropdown class="scrollable-dropdown" isOpen={isOpen && (searchResults.length > 0 || loading)} toggle={() => isOpen = !isOpen}>
-      <DropdownToggle tag="div">
-          <Input
-              type="text"
-              value={selectedValue?.name}
-              on:input={handleInput}
-              {disabled}
-              {placeholder}
-          />
-      </DropdownToggle>
-      <DropdownMenu class="w-100">
-          {#if loading}
-              <DropdownItem>
-                  <Spinner size="sm" />
-              </DropdownItem>
-          {:else}
-              {#each searchResults as result, index}
-                  <DropdownItem
-                      active={selectedValue?.id === result.id}
-                      on:click={() => selectResult(result)}
-                      title={result.name}
-                  >
-                      {result.name}
-                  </DropdownItem>
-              {/each}
-          {/if}
-      </DropdownMenu>
-  </Dropdown>
+    <Dropdown class="scrollable-dropdown" isOpen={isOpen && (searchResults.length > 0 || loading)} toggle={() => isOpen = !isOpen}>
+        <DropdownToggle tag="div">
+            <Input
+                type="text"
+                value={selectedValue?.name}
+                on:input={handleInput}
+                {disabled}
+                {placeholder}
+            />
+        </DropdownToggle>
+        <DropdownMenu class="w-100">
+            {#if loading}
+                <DropdownItem>
+                    <Spinner size="sm" />
+                </DropdownItem>
+            {:else}
+                {#each searchResults as result, index}
+                    <DropdownItem
+                        active={selectedValue?.id === result.id}
+                        on:click={() => selectResult(result)}
+                        title={result.name}
+                    >
+                        {result.name}
+                    </DropdownItem>
+                {/each}
+            {/if}
+        </DropdownMenu>
+    </Dropdown>
 </div>

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

@@ -24,6 +24,13 @@
     }
 }
 
+.agent-reset-container {
+    position: absolute;
+    left: 10px;
+    top: 5px;
+    font-size: 15px;
+}
+
 .agent-prop-list-container {
     width: 95%;
     max-width: 100%;

src/lib/scss/custom/pages/_conversation.scss

@@ -28,4 +28,10 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 10;
     max-height: 300px;
+}
+
+.state-search-container {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
 }

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -91,6 +91,7 @@
 	const chatWidthThreshold = 300;
 	const maxTextLength = 64000;
 	const duration = 2000;
+	const MESSAGE_STORAGE_KEY = 'message_draft_';
 	
 	/** @type {import('$agentTypes').AgentModel} */
 	export let agent;
@@ -224,9 +225,7 @@
 		initUserSentMessages(dialogs);
 		initChatView();
 		const messageDraft = getMessageDraft();
-		if (messageDraft) {
-			text = messageDraft;
-		}
+		text = messageDraft || '';
 		handlePaneResize();
 		
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
@@ -1333,26 +1332,24 @@
 		});
 	}
 
-  /** @param {any} e */
+  	/** @param {any} e */
 	function handleInputBigText(e) {
 		saveMessageDraft(e.target.value);
 	}
 
-	const MESSAGE_STORAGE_KEY = 'message_draft_';
 	function getMessageDraft() {
 		return messageStorage.get(MESSAGE_STORAGE_KEY + params.conversationId);
-  }
+  	}
 
-	/**
-	 * @param {any} message
-	 */
-  function saveMessageDraft(message) {
+	/** @param {any} message */
+	function saveMessageDraft(message) {
 		messageStorage.set(MESSAGE_STORAGE_KEY + params.conversationId, message, 24 * 60 * 60 * 1000);
-  }
+	}
 
-  function deleteMessageDraft() {
+	function deleteMessageDraft() {
 		messageStorage.remove(MESSAGE_STORAGE_KEY + params.conversationId);
-  }
+	}
+
 	function handlePaneResize() {
 		const header = document.querySelector('.chat-head');
 		if (!header) return;

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

@@ -28,6 +28,10 @@
     let agentPromptCmp = null;
     /** @type {any} */
     let agentTabsCmp = null;
+    /** @type {import('$agentTypes').AgentModel} */
+    let originalAgent;
+    /** @type {any} */
+    let agentDraft = null;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -37,18 +41,16 @@
     const duration = 3000;
     const params = $page.params;
     const agentStorage = new LocalStorageManager();
-    let agentDraft = getAgentDraft();
-    /** @type {import('$agentTypes').AgentModel} */
-    let originalAgent;
+    
 
     onMount(() => {
         isLoading = true;
+        agentDraft = getAgentDraft();
         getAgent(params.agentId).then(data => {
             originalAgent = {
                 ...data,
                 llm_config: data.llm_config || {}
             };
-            const agentDraft = getAgentDraft();
             if (agentDraft) {
                 agent = agentDraft;
             } else {
@@ -226,8 +228,6 @@
             agentTabsCmp?.reinit();
         });
     }
-
-
 </script>
 
 <HeadTitle title="{$_('Agent Overview')}" />
@@ -236,24 +236,40 @@
 
 {#if agent}
 <div>
-    {#if agentDraft}
-    <button type="button" class="btn btn-sm btn-primary" on:click={agentDraftReset}>{$_('Reset')}</button>
-    {/if}
     <Row class="agent-detail-sections">
         <Col class="section-min-width agent-col" style="flex: 40%;">
             <div class="agent-detail-section">
-                <AgentOverview agent={agent} profiles={agent.profiles || []} labels={agent.labels || []} {handleAgentChange} />
+                <AgentOverview
+                    agent={agent}
+                    profiles={agent.profiles || []}
+                    labels={agent.labels || []}
+                    resetable={!!agentDraft}
+                    resetAgent={() => agentDraftReset()}
+                    {handleAgentChange}
+                />
             </div>
             <div class="agent-detail-section">
-                <AgentTabs bind:this={agentTabsCmp} agent={agent} {handleAgentChange} />
+                <AgentTabs
+                    bind:this={agentTabsCmp}
+                    agent={agent}
+                    {handleAgentChange}
+                />
             </div>
         </Col>
         <Col class="section-min-width agent-col" style="flex: 60%;">
             <div class="agent-detail-section">
-                <AgentPrompt bind:this={agentPromptCmp} agent={agent} {handleAgentChange} />
+                <AgentPrompt
+                    bind:this={agentPromptCmp}
+                    agent={agent}
+                    {handleAgentChange}
+                />
             </div>
             <div class="agent-detail-section">
-                <AgentFunction bind:this={agentFunctionCmp} agent={agent} {handleAgentChange} />
+                <AgentFunction
+                    bind:this={agentFunctionCmp}
+                    agent={agent}
+                    {handleAgentChange}
+                />
             </div>
         </Col>
     </Row>

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

@@ -12,6 +12,8 @@
         return content;
     }
 
+    export const reinit = () => init();
+
     /** @type {import('svelte-jsoneditor').Content} */
     let content = {
         json: {}
@@ -31,8 +33,6 @@
         };
     }
 
-    export const reinit = () => init();
-
     /**
 	 * @param {import('svelte-jsoneditor').Content} updatedContent
 	 * @param {import('svelte-jsoneditor').Content} previousContent

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

@@ -39,6 +39,8 @@
         return innerKnowledgeBases;
     }
 
+    export const reinit = () => init();
+
     /** @type {any[]} */
     let knowledgeBaseOptions = [];
 
@@ -73,8 +75,6 @@
         refresh(list);
     }
 
-    export const reinit = () => init();
-
     /** @param {import('$agentTypes').AgentKnowledgeBase | any} b */
     function getDisplayOption(b) {
         return `${b.name} ${!!KnowledgeCollectionDisplayType[b.type]

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

@@ -54,7 +54,7 @@
         }
 
         config.is_inherit = false;
-        handleAgentChange();
+        // handleAgentChange();
         models = await getLlmProviderModels(provider);
         config.model = models[0]?.name;
         handleAgentChange();
@@ -85,6 +85,7 @@
     function changeMaxOutputToken(e) {
         const value = Number(e.target.value) || 0;
         config.max_output_tokens = value;
+        handleAgentChange();
     }
 </script>
 

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

@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { Button, Card, CardBody, CardHeader, Input, Table } from '@sveltestrap/sveltestrap';
+    import { _ } from 'svelte-i18n'  
     import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
     import { format } from '$lib/helpers/datetime';
 	import { AgentType } from '$lib/helpers/enums';
@@ -20,6 +21,12 @@
     
     /** @type {() => void} */
     export let handleAgentChange;
+
+    /** @type {boolean} */
+    export let resetable = false;
+
+    /** @type {() => void} */
+    export let resetAgent = () => {};
    
     onMount(() => {});
 
@@ -62,6 +69,19 @@
 
 <Card>
     <CardHeader>
+        {#if resetable}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
+                class="agent-reset-container"
+                data-bs-toggle="tooltip"
+                data-bs-placement="bottom"
+                title={$_('Reset')}
+                on:click={() => resetAgent()}
+            >
+                <i class="mdi mdi-refresh text-primary clickable" />
+            </div>
+        {/if}
         <div class="text-center">
             <div class="agent-overview-header">
                 <img
@@ -80,7 +100,9 @@
                     </Button>
                 {/if}
             </div>
-            <h5 class="mt-1 mb-1 div-center"><InPlaceEdit bind:value={agent.name} /></h5>
+            <h5 class="mt-1 mb-1 div-center">
+                <InPlaceEdit bind:value={agent.name} on:input={handleAgentChange} />
+            </h5>
             <p class="text-muted mb-0">{`Updated at ${format(agent.updated_datetime, 'time')}`}</p>
         </div>
     </CardHeader>

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

@@ -6,6 +6,8 @@
     import { v4 as uuidv4 } from 'uuid';
     import util from "lodash";
 	import { _ } from 'svelte-i18n';
+
+    const defaultChannel = "default";
     
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
@@ -44,8 +46,6 @@
 
     export const refreshChannelPrompts = () => init();
 
-    const defaultChannel = "default";
-
     /** @type {import('$agentTypes').ChannelInstruction} */
     const defaultInstruction = {
         channel: defaultChannel,