add instruction log page

Author: Jicheng Lu

src/lib/helpers/types/instructTypes.js

@@ -11,7 +11,32 @@
  * @property {string} [instruction]
  * @property {string} [provider]
  * @property {string} [model]
+ * @property {string?} [template]
  * @property {import('$conversationTypes').ConversationStateModel[]} [states]
  */
 
+/**
+ * @typedef {Object} InstructLogFilter
+ * @property {number} page - The page number
+ * @property {number} size - The page size
+ * @property {string[]?} [agentIds]
+ * @property {string[]?} [providers]
+ * @property {string[]?} [models]
+ * @property {string[]?} [templateNames]
+ */
+
+/**
+ * @typedef {Object} InstructionLogModel
+ * @property {string} [id]
+ * @property {string?} [agent_id]
+ * @property {string?} [agent_name]
+ * @property {string} provider
+ * @property {string} model
+ * @property {string?} [template_name]
+ * @property {string} user_message
+ * @property {string?} [system_instruction]
+ * @property {string} completion_text
+ * @property {Date} created_time
+ */
+
 export default {};

src/lib/helpers/utils/common.js

@@ -67,4 +67,13 @@ export function truncateByPrefix(str, prefix) {
     }
 
     return str.replace(prefix, '');
+}
+
+
+/**
+ * @param {any[]} arr
+ * @param {string | number} key
+ */
+export function removeDuplicates(arr, key) {
+    return [...new Map(arr.map(item => [item[key], item])).values()];
 }

src/lib/scss/custom/pages/_instruction.scss

@@ -82,4 +82,21 @@
         gap: 30px;
         justify-content: center;
     }
+}
+
+.instruction-log-col {
+    max-width: 150px;
+}
+
+.instruction-log-detail-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 10px 5px;
+
+    .instruction-log-message {
+        overflow-y: auto;
+        max-height: 350px;
+        scrollbar-width: none;
+    }
 }

src/lib/services/api-endpoints.js

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

src/lib/services/instruct-service.js

@@ -22,3 +22,23 @@ export async function sendChatCompletion(request) {
     const response = await axios.post(url, request);
     return response.data;
 }
+
+
+/**
+ * Get instruction logs
+ * @param {import('$instructTypes').InstructLogFilter} filter
+ * @returns {Promise<import('$commonTypes').PagedItems<import('$instructTypes').InstructionLogModel>>}
+ */
+export async function getInstructionLogs(filter) {
+    const url = endpoints.instructLogUrl;
+    const response = await axios.get(url, {
+        params: {
+            ...filter
+        },
+        paramsSerializer: {
+            dots: true,
+            indexes: null,
+        }
+    });
+    return response.data;
+}

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

@@ -47,6 +47,9 @@
 
     /** @type {string | null} */
     let selectedModel = null;
+
+    /** @type {string | null} */
+    let selectedTemplate = null;
     
     /** @type {import('$agentTypes').AgentModel[]} */
     let agents = [];
@@ -87,6 +90,7 @@
             agentId: selectedAgent?.id,
             provider: selectedProvider?.provider || DEFAULT_PROVIDER,
             model: selectedModel || DEFAULT_MODEL,
+            template: selectedTemplate,
             states: formattedStates
         }).then(res => {
             result = res || '';
@@ -137,6 +141,7 @@
         instruction = selectedAgent?.instruction || '';
 
         const template = e.detail.template || null;
+        selectedTemplate = template?.name || null;
         if (!!template) {
             instruction = template?.content || '';
         }