Features/refine chat window

src/lib/common/AudioGallery.svelte

@@ -4,6 +4,9 @@
   /** @type {import('$types').AudioFileModel[]} */
   export let audios = [];
 
+  /** @type {string} */
+  export let id;
+
   /** @type {string} */
   export let containerClasses = "";
 
@@ -20,6 +23,6 @@
   class="{disableDefaultStyles ? '' : 'audio-gallery-list'} {containerClasses}"
   style={`${containerStyles}`}
 >
-  <AudioPlayer audio={audios} />
+  <AudioPlayer id={id} audio={audios} />
 </div>
 {/if}

src/lib/common/MessageFileGallery.svelte

@@ -13,6 +13,9 @@
     /** @type {string} */
     export let galleryStyles = '';
 
+    /** @type {string} */
+    export let messageId;
+
     /** @type {() => Promise<any>} */
     export let fetchFiles = () => Promise.resolve([]);
 
@@ -56,6 +59,7 @@
     files={textFiles}
 />
 <AudioGallery
+    id={messageId}
     containerClasses={galleryClasses}
     containerStyles={galleryStyles}
     audios={audioFiles}

src/lib/common/audio-player/AudioPlayer.svelte

@@ -2,6 +2,7 @@
   import {
     initPlayer,
     stopAll,
+    clearAudioInstantce,
     useAudioStore
   } from "./store";
   import { volumeEventHandlers, progressEventHandlers } from "./handlers";
@@ -46,6 +47,9 @@
   /** @type {import('$types').AudioFileModel[]} */
   export let audio;
 
+  /** @type {string} */
+  export let id;
+
   /** @type {"list" | "random"} */
   export let order = 'list';
 
@@ -182,11 +186,12 @@
 
   onDestroy(() => {
     dispatch("destroy");
+    clearAudioInstantce(id);
   });
 
   const init = () => {
     const audioPlayer = document.createElement("audio");
-    initPlayer(audioPlayer, dispatch);
+    initPlayer({ id: id, player: audioPlayer }, dispatch);
     isShowList = !propsBool($$props, "list_folded") && $audioList.length > 1;
     volume = Math.max(volume, 0);
     volume = Math.min(volume, 1);

src/lib/common/audio-player/AudioSpeaker.svelte

@@ -1,10 +1,13 @@
 <script>
-	import { initSpeech, stopAll } from "$lib/common/audio-player/store";
-	import { onMount } from "svelte";
+	import { initSpeech, stopAll, clearSpeakerInstantce } from "$lib/common/audio-player/store";
+	import { onMount, onDestroy } from "svelte";
 
   /** @type {string} */
   export let text;
 
+  /** @type {string} */
+  export let id;
+
   /** @type {boolean} */
   export let mutex = true;
 
@@ -30,9 +33,11 @@
     utterThis.onend = (e) => { stop(); };
 
     speech = {
+      id: id,
       synth: window?.speechSynthesis,
       utterThis: utterThis,
-      stop: () => stop()
+      stop: () => stop(),
+      isSpeaking: () => isSpeaking()
     };
     initSpeech(speech);
   });
@@ -59,10 +64,18 @@
 
   const stop = () => {
     speaking = false;
-    if (speech?.synth) {
+    if (speech?.synth && speech.synth.speaking) {
       speech.synth.cancel();
     }
   }
+
+  const isSpeaking = () => {
+    return speaking;
+  }
+
+  onDestroy(() => {
+    clearSpeakerInstantce(id);
+  });
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

src/lib/common/audio-player/store.js

@@ -2,19 +2,19 @@ import { derived, writable } from "svelte/store";
 import { secondToTime } from "./utils";
 import { SPEECH_VOICES } from "$lib/services/web-speech";
 
-/** @type {HTMLAudioElement[]} */
-export const instances = [];
+/** @type {import('$types').AudioModel[]} */
+export const audioInstances = [];
 
 /** @type {import('$types').SpeechModel[]} */
 export const speechInstances = [];
 
 /**
- * @param {HTMLAudioElement} player
+ * @param {import('$types').AudioModel} audio
  * @param {(name: string, detail?: any) => void} dispatch
  */
-export function initPlayer(player, dispatch) {
-  instances.push(player);
-  bindAudioEvent(player, dispatch);
+export function initPlayer(audio, dispatch) {
+  audioInstances.push(audio);
+  bindAudioEvent(audio.player, dispatch);
 }
 
 /** @param {import('$types').SpeechModel} speech */
@@ -26,9 +26,31 @@ export function initSpeech(speech) {
   speechInstances.push(speech);
 }
 
+/** @param {string} id */
+export function clearAudioInstantce(id) {
+  const foundIdx = audioInstances.findIndex(x => x.id === id);
+  if (foundIdx > -1) {
+    if (!audioInstances[foundIdx].player?.paused) {
+      audioInstances[foundIdx].player?.pause();
+    }
+    audioInstances.splice(foundIdx, 1);
+  }
+}
+
+/** @param {string} id */
+export function clearSpeakerInstantce(id) {
+  const foundIdx = speechInstances.findIndex(x => x.id === id);
+  if (foundIdx > -1) {
+    if (speechInstances[foundIdx].isSpeaking()) {
+      speechInstances[foundIdx].stop();
+    }
+    speechInstances.splice(foundIdx, 1);
+  }
+}
+
 export function stopAll() {
-  if (instances?.length > 0) {
-    instances.forEach(player => player.pause());
+  if (audioInstances?.length > 0) {
+    audioInstances.forEach(audio => audio.player?.pause());
   }
   if (speechInstances?.length > 0) {
     speechInstances.forEach(sp => sp.stop());

src/lib/helpers/types/types.js

@@ -236,10 +236,17 @@
 // Speech
 /**
  * @typedef {Object} SpeechModel
- * @property {string} [id]
+ * @property {string} id
  * @property {SpeechSynthesis} synth
  * @property {SpeechSynthesisUtterance} utterThis
  * @property {() => void} stop
+ * @property {() => boolean} isSpeaking
+ */
+
+/**
+ * @typedef {Object} AudioModel
+ * @property {string} id
+ * @property {HTMLAudioElement} player
  */
 
 

src/routes/+layout.svelte

@@ -17,6 +17,7 @@
 	 */
 	let isLoading;
 	onMount(() => {
+		window?.speechSynthesis?.cancel();
 		const subscribe = loaderStore.subscribe(value => {
 			isLoading = value;
 		});

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

@@ -601,7 +601,7 @@
 	 * @param {any[]} files
 	 */
 	function buildFilePayload(files) {
-		if (!files) return '';
+		if (!files || files.length === 0) return '';
 
 		const excelCount = files.filter(x => isExcel(x.file_type || x.file_name)).length;
 		const pdfCount = files.filter(x => isPdf(x.file_type || x.file_name)).length;
@@ -1084,6 +1084,7 @@
 											{/if}
 											{#if !!message.is_chat_message || !!message.has_message_files}
 												<MessageFileGallery
+													messageId={message?.message_id}
 													galleryStyles={'justify-content: flex-end;'}
 													fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.User)}
 												/>
@@ -1111,9 +1112,13 @@
 										</div>
 										<div class="msg-container">
 											<RcMessage message={message} />
-											<AudioSpeaker text={message?.rich_content?.message?.text || message?.text} />
+											<AudioSpeaker
+												id={message?.message_id} 
+												text={message?.rich_content?.message?.text || message?.text}
+											/>
 											{#if !!message.is_chat_message || !!message.has_message_files}
 												<MessageFileGallery
+													messageId={message?.message_id}
 													galleryStyles={'justify-content: flex-start;'}
 													fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.Bot)}
 												/>

src/routes/page/conversation/[conversationId]/conv-dialogs.svelte

@@ -71,6 +71,7 @@
                                 </p>
                                 {#if !!dialog.has_message_files}
                                     <MessageFileGallery
+                                        messageId={dialog?.message_id}
                                         galleryClasses={'dialog-file-display'}
                                         fetchFiles={() => getConversationFiles(conversation.id, dialog.message_id, showInRight(dialog) ? FileSourceType.User : FileSourceType.Bot)}
                                     />