From a55cfeba1d38af8f548d38e813485aeeea9e39b5 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 15 Aug 2024 12:24:19 -0500
Subject: [PATCH] refine knowledge page and agent page

---
 src/lib/scss/custom/pages/_agent.scss         |  5 +-
 src/routes/page/agent/[agentId]/+page.svelte  | 24 +++++-----
 .../agent/[agentId]/agent-function.svelte     |  4 +-
 src/routes/page/knowledge-base/+page.svelte   |  8 +++-
 .../knowledge-table/knowledge-item.svelte     | 47 ++++++++++---------
 5 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 51e5eab..a7a484e 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -42,13 +42,10 @@
 
 .agent-detail-sections {
     .section-min-width {
-        min-width: 200px;
+        min-width: 300px;
     }
 
     .agent-detail-section {
-        height: 800px;
-        margin-top: 10px;
-
         @media (max-width: 423px) {
             height: fit-content;
         }
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 80af24a..3a98674 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -132,28 +132,26 @@
 
 {#if agent}
     <Row class="agent-detail-sections">
-        <Col class="section-min-width" style="flex: 30%;">
-            <div class="agent-detail-section agent-detail-overflow">
+        <Col class="section-min-width agent-overview" style="flex: 35%;">
+            <div class="agent-detail-section">
                 <AgentOverview agent={agent} profiles={agent.profiles || []} utilities={agent.utilities || []} />
             </div>
-        </Col>
-        <Col class="section-min-width" style="flex: 40%; ">
+
             <div class="agent-detail-section">
-                <AgentPrompt agent={agent} />
-            </div>
-        </Col>
-        <Col class="section-min-width" style="flex: 30%;">
-            <div class="agent-detail-section agent-detail-overflow">
                 <AgentLlmConfig agent={agent} />
                 {#if agent.routing_rules?.length > 0}
                     <AgentRouting agent={agent} />
                 {/if}
             </div>
         </Col>
-    </Row>
-
-    <Row class="mt-3">
-        <AgentFunction bind:this={agentFunctionCmp} agent={agent} />
+        <Col class="section-min-width" style="flex: 65%;">
+            <div class="agent-detail-section">
+                <AgentPrompt agent={agent} />
+            </div>
+            <div class="agent-detail-section">
+                <AgentFunction bind:this={agentFunctionCmp} agent={agent} />
+            </div>
+        </Col>
     </Row>
 
     {#if !!agent?.editable}
diff --git a/src/routes/page/agent/[agentId]/agent-function.svelte b/src/routes/page/agent/[agentId]/agent-function.svelte
index 077b9d0..487eea6 100644
--- a/src/routes/page/agent/[agentId]/agent-function.svelte
+++ b/src/routes/page/agent/[agentId]/agent-function.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { JSONEditor } from 'svelte-jsoneditor';
+    import { JSONEditor, Mode } from 'svelte-jsoneditor';
     import { onMount } from 'svelte';
 
     /** @type {import('$types').AgentModel} */
@@ -35,7 +35,7 @@
 </script>
 
 <div class="my-json-editor">
-    <JSONEditor content={content} onChange={handleChange} />
+    <JSONEditor mode={Mode.table} content={content} onChange={handleChange} />
 </div>
 
 <style>
diff --git a/src/routes/page/knowledge-base/+page.svelte b/src/routes/page/knowledge-base/+page.svelte
index bbb2ea3..0ba1937 100644
--- a/src/routes/page/knowledge-base/+page.svelte
+++ b/src/routes/page/knowledge-base/+page.svelte
@@ -24,6 +24,7 @@
 	let text = "";
 	let isSearching = false;
 	let searchDone = false;
+	let isFromSearch = false;
 	let successText = "Done";
 	let errorText = "Error";
 
@@ -58,11 +59,13 @@
 		items = [];
 		isSearching = true;
 		searchDone = false;
+		isFromSearch = false;
 		searchKnowledge({
 			text: util.trim(text),
 			confidence: confidence
 		}, selectedCollection).then(res => {
 			items = res || [];
+			isFromSearch = true;
 		}).finally(() => {
 			isSearching = false;
 			searchDone = true;
@@ -88,6 +91,7 @@
 		nextId = null;
 		isSearching = false;
 		searchDone = false;
+		isFromSearch = false;
 		initData(nextId, true);
 	}
 
@@ -324,8 +328,8 @@
 										</tr>
 									</thead>
 									<tbody>
-										{#each items as item}
-											<KnowledgeItem data={item} on:delete={(e) => afterKnowledgeDeleted(e)} />
+										{#each items as item, idx (idx)}
+											<KnowledgeItem data={item} open={isFromSearch && idx === 0} on:delete={(e) => afterKnowledgeDeleted(e)} />
 										{/each}
 									</tbody>
 								</Table>
diff --git a/src/routes/page/knowledge-base/knowledge-table/knowledge-item.svelte b/src/routes/page/knowledge-base/knowledge-table/knowledge-item.svelte
index e60e99b..df46102 100644
--- a/src/routes/page/knowledge-base/knowledge-table/knowledge-item.svelte
+++ b/src/routes/page/knowledge-base/knowledge-table/knowledge-item.svelte
@@ -13,7 +13,8 @@
     export let data;
 
     /** @type {boolean} */
-    let open = false;
+    export let open = false;
+
     let isLoading = false;
 
     function toggleItem() {
@@ -102,28 +103,28 @@
 {#if open}
 <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
     <td colspan="3">
-    <div class="knowledge-detail">
-        <ul>
-        {#if data?.data?.question || data?.data?.text}
-            <li>
-                <div class="wrappable fw-bold text-primary">Question:</div>
-                <div class="wrappable">{data?.data?.question || data?.data?.text || ''}</div>
-            </li>
-        {/if}
-        {#if data?.data?.answer}
-            <li>
-                <div class="wrappable fw-bold text-primary">Answer:</div>
-                <div class="wrappable">{data?.data?.answer || ''}</div>
-            </li>
-        {/if}
-        {#if data?.score}
-            <li>
-                <div class="wrappable fw-bold text-primary">Score:</div>
-                <div class="wrappable">{data?.score?.toFixed(3)}</div>
-            </li>
-        {/if}
-        </ul>
-    </div>
+        <div class="knowledge-detail">
+            <ul>
+            {#if data?.data?.question || data?.data?.text}
+                <li>
+                    <div class="wrappable fw-bold text-primary">Question:</div>
+                    <div class="wrappable">{data?.data?.question || data?.data?.text || ''}</div>
+                </li>
+            {/if}
+            {#if data?.data?.answer}
+                <li>
+                    <div class="wrappable fw-bold text-primary">Answer:</div>
+                    <div class="wrappable">{data?.data?.answer || ''}</div>
+                </li>
+            {/if}
+            {#if data?.score}
+                <li>
+                    <div class="wrappable fw-bold text-primary">Score:</div>
+                    <div class="wrappable">{data?.score?.toFixed(3)}</div>
+                </li>
+            {/if}
+            </ul>
+        </div>
     </td>
 </tr>
 {/if}
\ No newline at end of file