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

refine state key search

Author: iceljc

src/lib/common/StateModal.svelte

@@ -196,14 +196,16 @@
                     </FormGroup>
                 </div>
                 {/if}
-                <div class="state-delete mb-3 line-align-center">
-                    {#if idx !== 0}
-                    <div>
+                <div class="state-delete mb-3 line-align-center" style={`padding-top: ${idx === 0 ? '28px' : '0px'}`}>
+                    <div class="line-align-center">
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-no-static-element-interactions -->
-                        <span><i class="bx bx-no-entry clickable" on:click={() => remove(idx)} /></span>
+                        <i
+                            class="bx bx-no-entry clickable"
+                            class:hide={states.length === 1}
+                            on:click={() => remove(idx)}
+                        />
                     </div>
-                    {/if}
                 </div>
             </Row>
             {/each}

src/lib/helpers/http.js

@@ -108,6 +108,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
         new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
+        new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

src/lib/helpers/types/conversationTypes.js

@@ -37,6 +37,7 @@
  * @property {number?} [keyLimit] - The key limit.
  * @property {number?} [convLimit] - The conversation limit.
  * @property {boolean?} [preload] - Whether it is preloading or not.
+ * @property {string[]?} [agentIds]
  */
 
 

src/lib/helpers/types/instructTypes.js

@@ -42,4 +42,13 @@
  * @property {Date} created_time
  */
 
+/**
+ * @typedef {Object} StateSearchQuery
+ * @property {string} query - The search query.
+ * @property {number?} [keyLimit] - The key limit.
+ * @property {number?} [logLimit] - The log limit.
+ * @property {boolean?} [preload] - Whether it is preloading or not.
+ * @property {string[]?} [agentIds]
+ */
+
 export default {};

src/lib/scss/custom/pages/_chat.scss

@@ -671,7 +671,7 @@
     .state-delete {
         flex: 0.1;
         color: var(--bs-danger);
-        font-size: 17px;
+        font-size: 12px;
     }
 
     .invalid {

src/lib/services/api-endpoints.js

@@ -46,6 +46,7 @@ export const endpoints = {
     instructCompletionUrl: `${host}/instruct/{agentId}`,
     chatCompletionUrl: `${host}/instruct/chat-completion`,
     instructLogUrl: `${host}/logger/instruction/log`,
+    instructLogSearchKeysUrl: `${host}/logger/instruction/log/keys`,
 
     // agent realtime interaction
     agentInitRealtimeSessionUrl: `${host}/agent/{agentId}/realtime/session`,

src/lib/services/conversation-service.js

@@ -1,7 +1,8 @@
-import { replaceUrl } from '$lib/helpers/http';
 import axios from 'axios';
-import { endpoints } from './api-endpoints.js';
+import qs from 'qs';
+import { replaceUrl } from '$lib/helpers/http';
 import { conversationUserStateStore } from '$lib/helpers/store.js';
+import { endpoints } from './api-endpoints.js';
 
 /**
  * New conversation
@@ -44,7 +45,12 @@ export async function getConversationUser(id) {
  */
 export async function getConversations(filter) {
     let url = endpoints.conversationsUrl;
-    const response = await axios.post(url, { ...filter});
+    const response = await axios.get(url, {
+        params: {
+            ...filter
+        },
+        paramsSerializer: (params) => qs.stringify(params, { encode: false, allowDots: true, arrayFormat: "indices" })
+    });
     return response.data;
 }
 
@@ -304,6 +310,10 @@ export async function getConversationStateSearchKeys(request) {
         params: {
             ...request
         },
+        paramsSerializer: {
+            dots: true,
+            indexes: null,
+        },
         signal: controller.signal
     });
     return response.data;

src/lib/services/instruct-service.js

@@ -40,3 +40,22 @@ export async function getInstructionLogs(filter) {
     });
     return response.data;
 }
+
+/**
+ * get instruction log search keys
+ * @param {import('$instructTypes').StateSearchQuery} request
+ * @returns {Promise<string[]>}
+ */
+export async function getInstructionLogSearchKeys(request) {
+    let url = endpoints.instructLogSearchKeysUrl;
+    const response = await axios.get(url, {
+        params: {
+            ...request
+        },
+        paramsSerializer: {
+            dots: true,
+            indexes: null,
+        }
+    });
+    return response.data;
+}

src/routes/page/conversation/+page.svelte

@@ -335,7 +335,8 @@
 		return new Promise((resolve) => {
 			getConversationStateSearchKeys({
 				query: query,
-				keyLimit: 20
+				keyLimit: 20,
+				agentIds: searchOption.agentId ? [searchOption.agentId] : null
 			}).then(res => {
 				resolve(res || []);
 			}).catch(() => resolve([]));

src/routes/page/instruction/log/+page.svelte

@@ -8,7 +8,7 @@
 	import TablePagination from '$lib/common/TablePagination.svelte';
 	import { getAgentOptions } from '$lib/services/agent-service';
 	import { getLlmConfigs } from '$lib/services/llm-provider-service';
-	import { getInstructionLogs } from '$lib/services/instruct-service';
+	import { getInstructionLogs, getInstructionLogSearchKeys } from '$lib/services/instruct-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import LogItem from './log-item.svelte';
 	import { removeDuplicates } from '$lib/helpers/utils/common';
@@ -218,6 +218,19 @@
 		};
 		getPagedInstructionLogs();
 	}
+
+	/** @param {string} query */
+	function handleStateSearch(query) {
+		return new Promise((resolve) => {
+			getInstructionLogSearchKeys({
+				query: query,
+				keyLimit: 20,
+				agentIds: searchOption.agentId ? [searchOption.agentId] : null
+			}).then(res => {
+				resolve(res || []);
+			}).catch(() => resolve([]));
+		});
+	}
 </script>
 
 
@@ -256,7 +269,7 @@
 				<CardBody class="border-bottom">
 					<Row class="g-3 justify-content-end">
 						<Col lg="6">
-							<StateSearch bind:states={states} />
+							<StateSearch bind:states={states} onSearch={(query) => handleStateSearch(query)} />
 						</Col>
 					</Row>
 				</CardBody>