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

Features/refine chat window
SciSharp · Oct 18, 2024 · dbe8445 · dbe8445
2 parents 7768db2 + fdfaaad
commit dbe8445
Show file tree

Hide file tree

Showing 13 changed files with 316 additions and 58 deletions.
diff --git a/src/lib/common/MultiSelect.svelte b/src/lib/common/MultiSelect.svelte
@@ -17,6 +17,9 @@
     /** @type {string} */
     export let searchPlaceholder = '';
 
+    /** @type {string} */
+    export let placeholder = '';
+
     /** @type {string} */
     export let containerClasses = "";
 
@@ -26,9 +29,13 @@
     /** @type {boolean} */
     export let disableDefaultStyles = false;
 
+    /** @type {boolean} */
+    export let searchMode = false;
+
     /** @type {null | undefined | (() => Promise<any>)} */
     export let onScrollMoreOptions = null;
 
+
     /** @type {string} */
     let searchValue = '';
 
@@ -179,7 +186,7 @@
 
     function sendEvent() {
         svelteDispatch("select", {
-            selecteds: refOptions.filter(x => !!x.checked)
+            selecteds: refOptions.filter(x => !!x.checked).map(x => ({ key: x.key, value: x.value }))
         });
     }
 
@@ -261,6 +268,7 @@
             type="text"
             class='clickable'
             value={displayText}
+            placeholder={placeholder}
             readonly
         />
         <div class={`display-suffix ${showOptionList ? 'show-list' : ''}`}>
@@ -269,17 +277,19 @@
     </ul>
     {#if showOptionList}
         <ul class="option-list" id={`multiselect-list-${tag}`} on:scroll={() => innerScroll()}>
-            <div class="search-box">
-                <div class="search-prefix">
-                    <i class="bx bx-search-alt" />
+            {#if searchMode}
+                <div class="search-box">
+                    <div class="search-prefix">
+                        <i class="bx bx-search-alt" />
+                    </div>
+                    <Input
+                        type="text"
+                        value={searchValue}
+                        placeholder={searchPlaceholder}
+                        on:input={e => changeSearchValue(e)}
+                    />
                 </div>
-                <Input
-                    type="text"
-                    value={searchValue}
-                    placeholder={searchPlaceholder}
-                    on:input={e => changeSearchValue(e)}
-                />
-            </div>
+            {/if}
             {#if innerOptions.length > 0}
                 {#if selectAll}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->

diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
@@ -109,4 +109,10 @@ const chatAction = {
     NewChat: 'new-chat',
     ReceiveNotification: 'receive-notification'
 };
-export const ChatAction = Object.freeze(chatAction);
+export const ChatAction = Object.freeze(chatAction);
+
+const conversationTag = {
+    Evaluation: "evaluation-set",
+    Test: "test-set"
+};
+export const ConversationTag = Object.freeze(conversationTag);
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
@@ -66,6 +66,7 @@ function skipLoader(config) {
     const putRegexes = [
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/update', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/update-message', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation/(.*?)/update-tags', 'g'),
     ];
 
     const deleteRegexes = [

diff --git a/src/lib/helpers/store.js b/src/lib/helpers/store.js
@@ -186,7 +186,6 @@ export const knowledgeBaseDocumentStore = createKnowledgeBaseDocumentStore();
 
 export function resetLocalStorage(resetUser = false) {
     conversationUserStateStore.resetAll();
-    conversationSearchOptionStore.reset();
     conversationUserMessageStore.reset();
     conversationUserAttachmentStore.reset();
     localStorage.removeItem('conversation');

diff --git a/src/lib/helpers/types/conversationTypes.js b/src/lib/helpers/types/conversationTypes.js
@@ -17,6 +17,7 @@
  * @property {string?} [status] - The conversation status.
  * @property {string?} [taskId] - The task id.
  * @property {import('$commonTypes').KeyValuePair[]} [states] - The conversation status.
+ * @property {string[]} [tags] - The tags.
  */
 
 /**
@@ -29,7 +30,8 @@
  * @property {string} channel - The conversation status.
  * @property {string} [task_id] - Optional task id.
  * @property {string} status - The conversation status.
- * @property {Object[]} states - The conversation states. 
+ * @property {Object[]} states - The conversation states.
+ * @property {string[]} tags - The conversation tags.
  * @property {Date} updated_time - The conversation updated time.
  * @property {Date} created_time - The conversation created time.
  */
@@ -259,7 +261,21 @@ IRichContent.prototype.quick_replies;
  * @property {number} innerIndex
  */
 
+/**
+ * @typedef {Object} UpdateTagsRequest
+ * @property {string[]} tags
+ */
+
 
+/**
+ * @typedef {Object} ConversationSearchOption
+ * @property {string?} [agentId]
+ * @property {string?} [channel]
+ * @property {string?} [taskId]
+ * @property {string?} [status]
+ * @property {UserStateDetailModel[]} states
+ * @property {string[]} tags
+ */
 
 /**
  * Invoked when a new conersation is created.

diff --git a/src/lib/scss/custom/components/_multiselect.scss b/src/lib/scss/custom/components/_multiselect.scss
@@ -26,7 +26,7 @@
 
     .option-list {
         padding: 5px 2px;
-        border: 2px solid var(--bs-border-color-translucent);
+        border: 1px solid var(--bs-border-color-translucent);
         border-radius: 5px;
 
         overflow-x: auto;

diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
@@ -81,9 +81,12 @@
 
     .chat-row {
         height: 100%;
+        flex-wrap: nowrap;
+        justify-content: space-between;
 
         .chat-head-info {
             display: flex;
+            flex: 0 0 fit-content;
             flex-direction: column;
             height: 100%;
 
@@ -152,6 +155,25 @@
             border: 1px solid var(--#{$prefix}border-color);
         }
     }
+
+    .large-btn {
+        width: 40px;
+        height: 40px;
+    }
+
+    .btn-pair {
+        display: flex;
+
+        .btn-left {
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+
+        .btn-right {
+            border-top-left-radius: 0px;
+            border-bottom-left-radius: 0px;
+        }
+    }
 }
 
 .chat-conversation {
@@ -765,4 +787,22 @@
             }
         }
     }
+}
+
+.conv-tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    overflow-y: auto;
+    scrollbar-width: none;
+    min-height: 100px;
+    max-height: 180px;
+
+    .conv-tag-unit {
+        flex: 0 0 50%;
+
+        label {
+            font-size: 14px;
+            font-weight: 400;
+        }
+    }
 }
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
@@ -49,6 +49,7 @@ export const endpoints = {
     dialogsUrl: `${host}/conversation/{conversationId}/dialogs`,
     conversationMessageDeletionUrl: `${host}/conversation/{conversationId}/message/{messageId}`,
     conversationMessageUpdateUrl: `${host}/conversation/{conversationId}/update-message`,
+    conversationTagsUpdateUrl: `${host}/conversation/{conversationId}/update-tags`,
     fileUploadUrl: `${host}/agent/{agentId}/conversation/{conversationId}/upload`,
 
     // LLM provider

diff --git a/src/lib/services/conversation-service.js b/src/lib/services/conversation-service.js
@@ -76,7 +76,7 @@ export async function deleteConversation(conversationId) {
  * @param {string} conversationId 
  * @returns {Promise<import('$conversationTypes').ChatResponseModel[]>}
  */
-export async function GetDialogs(conversationId) {
+export async function getDialogs(conversationId) {
     let url = replaceUrl(endpoints.dialogsUrl, {conversationId: conversationId});
     const response = await axios.get(url);
     return response.data;
@@ -170,6 +170,30 @@ export async function deleteConversationMessage(conversationId, messageId, isNew
     });
 }
 
+/**
+ * delete a message in conversation
+ * @param {string} conversationId The conversation id
+ * @param {import('$conversationTypes').UpdateTagsRequest} request
+ * @returns {Promise<boolean>}
+ */
+export async function updateConversationTags(conversationId, request) {
+    let url = replaceUrl(endpoints.conversationTagsUpdateUrl, {
+        conversationId: conversationId
+    });
+
+    const data = {
+        tags: request.tags || []
+    };
+
+    return new Promise((resolve, reject) => {
+        axios.put(url, {...data}).then(response => {
+            resolve(response.data);
+        }).catch(err => {
+            reject(err)
+        });
+    });
+}
+
 /**
  * delete a message in conversation
  * @param {string} conversationId The conversation id