display loader only before streaming start

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 ?? "";

src/ui/src/components/core/content/CoreChatbot.vue

@@ -23,7 +23,7 @@ See the stubs for more details.
 					@action-click="handleActionClick($event)"
 				/>
 				<CoreChatbotMessage
-					v-if="isResponsePending"
+					v-if="displayExtraLoader"
 					is-loading
 					:initials="fields.assistantInitials.value"
 				/>
@@ -311,7 +311,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,18 +331,22 @@ const isUploadSizeExceeded = computed(() => {
 	return filesSize >= MAX_FILE_SIZE;
 });
 
+const displayExtraLoader = computed(() => {
+	if (messageIndexLoading.value === undefined) return false;
+	return messageIndexLoading.value >= messages.value.length;
+});
+
 function handleMessageSent() {
-	if (isResponsePending.value) return;
-	isResponsePending.value = true;
+	if (messageIndexLoading.value) return;
+	messageIndexLoading.value = messages.value.length + 1;
 	const event = new CustomEvent("wf-chatbot-message", {
 		detail: {
 			payload: {
 				role: "user",
 				content: outgoingMessage.value,
 			},
 			callback: () => {
-				// TODO: handle start streaming
-				isResponsePending.value = false;
+				messageIndexLoading.value = undefined;
 			},
 		},
 	});