From fa727d298b74dd956043b74841cb8f36082e004e Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Mon, 10 Feb 2025 17:16:54 -0600 Subject: [PATCH] refine agent detail page --- src/lib/common/RemoteSearchInput.svelte | 56 +++++++------- src/lib/scss/custom/pages/_agent.scss | 7 ++ src/lib/scss/custom/pages/_conversation.scss | 6 ++ .../[conversationId]/chat-box.svelte | 23 +++--- src/routes/page/agent/[agentId]/+page.svelte | 42 +++++++---- .../agent-components/agent-function.svelte | 4 +- .../agent-knowledge-base.svelte | 4 +- .../agent-components/agent-llm-config.svelte | 3 +- .../agent-components/agent-overview.svelte | 24 +++++- .../agent-components/agent-prompt.svelte | 4 +- .../agent-components/agent-rule.svelte | 6 +- .../agent-components/agent-utility.svelte | 4 +- .../page/agent/[agentId]/agent-tabs.svelte | 15 ++-- src/routes/page/conversation/+page.svelte | 73 ++++++------------- 14 files changed, 147 insertions(+), 124 deletions(-) diff --git a/src/lib/common/RemoteSearchInput.svelte b/src/lib/common/RemoteSearchInput.svelte index b69f4635..a38f6d9c 100644 --- a/src/lib/common/RemoteSearchInput.svelte +++ b/src/lib/common/RemoteSearchInput.svelte @@ -53,32 +53,32 @@
- 0 || loading)} toggle={() => isOpen = !isOpen}> - - - - - {#if loading} - - - - {:else} - {#each searchResults as result, index} - selectResult(result)} - title={result.name} - > - {result.name} - - {/each} - {/if} - - + 0 || loading)} toggle={() => isOpen = !isOpen}> + + + + + {#if loading} + + + + {:else} + {#each searchResults as result, index} + selectResult(result)} + title={result.name} + > + {result.name} + + {/each} + {/if} + +
\ No newline at end of file diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss index 9b6bc2aa..f6a862c6 100644 --- a/src/lib/scss/custom/pages/_agent.scss +++ b/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%; diff --git a/src/lib/scss/custom/pages/_conversation.scss b/src/lib/scss/custom/pages/_conversation.scss index e62fb798..fccef864 100644 --- a/src/lib/scss/custom/pages/_conversation.scss +++ b/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; } \ No newline at end of file diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index 4cd7788b..40914570 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/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; diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte index 5a08400b..743ffe2f 100644 --- a/src/routes/page/agent/[agentId]/+page.svelte +++ b/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(); }); } - - @@ -236,24 +236,40 @@ {#if agent}
- {#if agentDraft} - - {/if}
- + agentDraftReset()} + {handleAgentChange} + />
- +
- +
- +
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte index 774db23d..5536c527 100644 --- a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte +++ b/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 diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte index 0664a2a4..837cabb3 100644 --- a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte +++ b/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] diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte index 73d51876..8a40d67d 100644 --- a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte +++ b/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(); } diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte index f7e3dae5..8135eb9c 100644 --- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte +++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte @@ -1,6 +1,7 @@ @@ -397,37 +382,30 @@
-
{$_('Conversation List')}
-
- - - +
{$_('Conversation List')}
+
+
+
- - +
+
- - - - - - +
+
+ +
+
@@ -470,9 +448,6 @@ on:input={e => changeOption(e, "tags")} /> -