integrate chat completion endpoint

Author: Jicheng Lu

src/lib/helpers/http.js

@@ -74,7 +74,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/(.*?)/search', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/create', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
-        new RegExp('http(s*)://(.*?)/users', 'g')
+        new RegExp('http(s*)://(.*?)/users', 'g'),
+        new RegExp('http(s*)://(.*?)/instruct/chat-completion', 'g')
     ];
 
     /** @type {RegExp[]} */

src/lib/helpers/types/conversationTypes.js

@@ -1,9 +1,3 @@
-/**
- * @typedef {Object} InstructMessageModel
- * @property {string} [instruction] - User provided prompt instead of predefined template.
- * @property {string} [template] - The template name.
- */
-
 /**
  * @typedef {Object} MessageConfig
  * @property {string} [taskId] - Optional task id.

src/lib/helpers/types/instructTypes.js

@@ -0,0 +1,17 @@
+/**
+ * @typedef {Object} InstructMessageModel
+ * @property {string} [instruction] - User provided prompt instead of predefined template.
+ * @property {string} [template] - The template name.
+ */
+
+/**
+ * @typedef {Object} IncomingInstructRequest
+ * @property {string} text
+ * @property {string} [agentId]
+ * @property {string} [instruction]
+ * @property {string} [provider]
+ * @property {string} [model]
+ * @property {import('$conversationTypes').ConversationStateModel[]} [states]
+ */
+
+export default {};

src/lib/scss/app.scss

@@ -95,6 +95,7 @@ File: Main Css File
 @import "custom/pages/knowledgebase";
 @import "custom/pages/users";
 @import "custom/pages/roles";
+@import "custom/pages/instruction";
 
 // Common
 @import "custom/common/animation";

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

@@ -0,0 +1,85 @@
+.instruction-container {
+    .text-count {
+        margin-top: 2px;
+        font-size: 10px;
+    }
+
+    .instruction-result-container {
+        .instruction-result-body {
+            font-size: 15px;
+            padding: 5px 10px;
+            overflow-y: auto;
+            max-height: 500px;
+            scrollbar-width: thin;
+        }
+    }
+}
+
+.instruction-border {
+    border: 1px dashed var(--bs-primary);
+    border-radius: 5px;
+}
+
+.instruct-header {
+    font-size: 17px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.instruct-text-header {
+    font-size: 17px;
+    display: flex;
+    gap: 5px;
+}
+
+.instruct-setting-container {
+    display: flex;
+    flex-wrap: wrap;
+
+    .instruct-setting-section {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    @media (max-width: 992px) {
+        .instruct-setting-section {
+            margin-top: 10px;
+        }
+
+        .instruction-gap {
+            margin-top: 10px;
+        }
+    }
+
+    .instruct-setting-item {
+        display: flex;
+        justify-content: center;
+
+        .instruct-setting-dropdown {
+            width: 60%;
+        }
+
+        @media (max-width: 992px) {
+            .instruct-setting-dropdown {
+                width: 100%;
+            }
+        }
+    }
+}
+
+.instruct-setting-padding {
+    padding: 20px 10px;
+}
+
+.instruct-state-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .instruct-state-item {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+    }
+}

src/lib/services/api-endpoints.js

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

src/lib/services/instruct-service.js

@@ -5,9 +5,20 @@ import axios from 'axios';
 /**
  * Execute agent instruction by template or user provided prompt.
  * @param {string} agentId
- * @param {import('$conversationTypes').InstructMessageModel} instruction
+ * @param {import('$instructTypes').InstructMessageModel} instruction
  */
 export async function executeAgentInstruction(agentId, instruction) {
     let url = replaceUrl(endpoints.instructCompletionUrl, {agentId: agentId});
     await axios.post(url, instruction);
-}
+}
+
+
+/**
+ * Execute chat completion.
+ * @param {import('$instructTypes').IncomingInstructRequest} request
+ */
+export async function sendChatCompletion(request) {
+    const url = endpoints.chatCompletionUrl;
+    const response = await axios.post(url, request);
+    return response.data;
+}

src/routes/page/conversation/state-search.svelte

@@ -53,7 +53,7 @@
                     placeholder="Enter a value"
                 />
             </div>
-            <div class="state-delete line-align-center" style="flex: 0 0 13px;">
+            <div class="line-align-center" style="flex: 0 0 13px;">
                 <div>
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-no-static-element-interactions -->