From 4b20b8ad20719212ce2e58cf298470509d8fca2a Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 14 Nov 2024 09:56:53 +0100
Subject: [PATCH] display loader only before streaming start

---
 .../CoreChatBot/CoreChatbotMessage.vue        |  8 +++++--
 .../components/core/content/CoreChatbot.vue   | 22 ++++++++++++++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/ui/src/components/core/content/CoreChatBot/CoreChatbotMessage.vue b/src/ui/src/components/core/content/CoreChatBot/CoreChatbotMessage.vue
index eb23e9386..ad8c48cc5 100644
--- a/src/ui/src/components/core/content/CoreChatBot/CoreChatbotMessage.vue
+++ b/src/ui/src/components/core/content/CoreChatBot/CoreChatbotMessage.vue
@@ -1,11 +1,11 @@
 <template>
-	<div class="CoreChatbotMessage">
+	<div class="CoreChatbotMessage" :aria-busy="isLoading">
 		<CoreChatbotAvatar :initials="initials" />
 		<div
 			class="CoreChatbotMessage__content"
 			:style="{ background: contentBgColor }"
 		>
-			<CoreChatbotLoader v-if="isLoading" />
+			<CoreChatbotLoader v-if="displayLoader" />
 			<div v-else class="CoreChatbotMessage__content__text">
 				<BaseMarkdown v-if="useMarkdown" :raw-text="content">
 				</BaseMarkdown>
@@ -82,6 +82,10 @@ defineEmits({
 
 const actions = computed<Action[]>(() => props.message?.actions ?? []);
 
+const displayLoader = computed(() => {
+	return props.isLoading && !content.value;
+});
+
 const role = computed(() => {
 	if (props.isLoading) return "assistant";
 	return props.message?.role ?? "";
diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
index f8f8ec6a1..4ec63a3ad 100644
--- a/src/ui/src/components/core/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -20,10 +20,11 @@ See the stubs for more details.
 							? fields.assistantInitials.value
 							: fields.userInitials.value
 					"
+					:is-loading="isMessageLoading(messageId)"
 					@action-click="handleActionClick($event)"
 				/>
 				<CoreChatbotMessage
-					v-if="isResponsePending"
+					v-if="displayExtraLoader"
 					is-loading
 					:initials="fields.assistantInitials.value"
 				/>
@@ -311,7 +312,7 @@ import type { Message } from "./CoreChatBot/CoreChatbotMessage.vue";
 const rootEl: Ref<HTMLElement> = ref(null);
 const messageAreaEl: Ref<HTMLElement> = ref(null);
 const messagesEl: Ref<HTMLElement> = ref(null);
-const isResponsePending: Ref<boolean> = ref(false);
+const messageIndexLoading: Ref<number | undefined> = ref(undefined);
 const fields = inject(injectionKeys.evaluatedFields);
 const files: Ref<File[]> = shallowRef([]);
 const isUploadingFiles = ref(false);
@@ -331,9 +332,19 @@ const isUploadSizeExceeded = computed(() => {
 	return filesSize >= MAX_FILE_SIZE;
 });
 
+const displayExtraLoader = computed(() => {
+	if (messageIndexLoading.value === undefined) return false;
+
+	return messageIndexLoading.value >= messages.value.length;
+});
+
+function isMessageLoading(index: number) {
+	return index === messageIndexLoading.value;
+}
+
 function handleMessageSent() {
-	if (isResponsePending.value) return;
-	isResponsePending.value = true;
+	if (messageIndexLoading.value) return;
+	messageIndexLoading.value = messages.value.length;
 	const event = new CustomEvent("wf-chatbot-message", {
 		detail: {
 			payload: {
@@ -341,8 +352,7 @@ function handleMessageSent() {
 				content: outgoingMessage.value,
 			},
 			callback: () => {
-				// TODO: handle start streaming
-				isResponsePending.value = false;
+				messageIndexLoading.value = undefined;
 			},
 		},
 	});