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

Features/refine chat window

Author: iceljc

src/lib/helpers/types/conversationTypes.js

@@ -168,6 +168,8 @@ IRichContent.prototype.language;
  * @property {boolean} has_message_files
  * @property {boolean} is_chat_message
  * @property {boolean} is_streaming
+ * @property {boolean} is_dummy
+ * @property {boolean} is_appended
  * @property {string} [indication]
  */
 

src/lib/scss/custom/pages/_knowledgebase.scss

@@ -288,6 +288,7 @@
         display: flex;
         gap: 5px;
         justify-content: flex-end;
+        min-width: 300px;
 
         .collection-dropdown {
             width: 100%;
@@ -305,6 +306,12 @@
         }
     }
 
+    .collection-add-container {
+        display: flex;
+        gap: 5px;
+        justify-content: flex-end;
+    }
+
     @media (max-width: 600px) {
         justify-content: center !important;
 

src/lib/services/signalr-service.js

@@ -21,6 +21,9 @@ export const signalr = {
   /** @type {import('$conversationTypes').OnMessageReceived} */
   onMessageReceivedFromAssistant: () => {},
 
+  /** @type {import('$conversationTypes').OnMessageReceived} */
+  onIntermediateMessageReceivedFromAssistant: () => {},
+
   /** @type {import('$conversationTypes').OnMessageReceived} */
   onNotificationGenerated: () => {},
 
@@ -109,6 +112,15 @@ export const signalr = {
       }
     });
 
+    connection.on('OnIntermediateMessageReceivedFromAssistant', (message) => {
+      // do something when receiving a message, such as updating the UI or showing a notification
+      const obj = JSON.parse(message);
+      if (conversationId === obj?.conversation_id) {
+        console.log(`[OnIntermediateMessageReceivedFromAssistant] ${obj.sender.role}: ${obj.text}`);
+        this.onIntermediateMessageReceivedFromAssistant(obj);
+      }
+    });
+
     connection.on('OnNotificationGenerated', (message) => {
       const obj = JSON.parse(message);
       if (conversationId === obj?.conversation_id) {

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -244,6 +244,7 @@
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromCsr = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromAssistant = onMessageReceivedFromAssistant;
+		signalr.onIntermediateMessageReceivedFromAssistant = onIntermediateMessageReceivedFromAssistant;
 
 		signalr.beforeReceiveLlmStreamMessage = beforeReceiveLlmStreamMessage;
 		signalr.onReceiveLlmStreamMessage = onReceiveLlmStreamMessage;
@@ -522,6 +523,7 @@
 		if (!message.is_streaming) {
 			if (dialogs[dialogs.length - 1]?.message_id === message.message_id
 				&& dialogs[dialogs.length - 1]?.sender?.role === UserRole.Assistant
+				&& !dialogs[dialogs.length - 1]?.is_appended
 			) {
 				dialogs[dialogs.length - 1] = {
 					...message,
@@ -544,6 +546,30 @@
 		}
     }
 
+	/** @param {import('$conversationTypes').ChatResponseModel} message */
+    function onIntermediateMessageReceivedFromAssistant(message) {
+		const idx = dialogs.findLastIndex(x => x.is_dummy);
+		if (idx >= 0) {
+			dialogs.splice(idx, 0, {
+				...message,
+				is_chat_message: true,
+				is_appended: true
+			});
+		} else {
+			dialogs.push({
+				...message,
+				is_chat_message: true,
+				is_appended: true
+			});
+		}
+		
+		refresh();
+
+		if (isFrame) {
+			window.parent.postMessage(message, "*");
+		}
+    }
+
 	/** @param {import('$conversationTypes').ChatResponseModel} message */
 	function beforeReceiveLlmStreamMessage(message) {
 		isStreaming = true;
@@ -552,7 +578,8 @@
 		) {
 			dialogs.push({
 				...message,
-				is_chat_message: false
+				is_chat_message: false,
+				is_dummy: true
 			});
 		}
 		refresh();
@@ -566,7 +593,7 @@
 
 		if (!USE_MESSAGE_QUEUE) {
 			if (lastMsg?.sender?.role === UserRole.Assistant
-				&& lastMsg?.message_id === message.message_id
+				&& lastMsg?.is_dummy
 			) {
 				setTimeout(() => {
 					dialogs[dialogs.length - 1].text += message.text;
@@ -593,7 +620,7 @@
 
 			const lastMsg = dialogs[dialogs.length - 1];
 			if (lastMsg?.sender?.role !== UserRole.Assistant
-				|| lastMsg?.message_id !== message.message_id
+				|| !lastMsg?.is_dummy
 			) {
 				continue;
 			}

src/routes/page/knowledge-base/documents/+page.svelte

@@ -1108,6 +1108,8 @@
 												on:select={e => changeCollection(e)}
 											/>
 										</div>
+									</div>
+									<div class="collection-add-container">
 										<div
 											class="line-align-center"
 											data-bs-toggle="tooltip"

src/routes/page/knowledge-base/question-answer/+page.svelte

@@ -1078,6 +1078,8 @@
 												on:select={e => changeCollection(e)}
 											/>
 										</div>
+									</div>
+									<div class="collection-add-container">
 										<div
 											class="line-align-center"
 											data-bs-toggle="tooltip"