Monoagent streaming

src/components/ChatArea.vue

@@ -11,6 +11,7 @@ defineProps({
 
 onUpdated(() => {
   setState();
+  scrollToBottom();
 });
 
 onMounted(() => {

src/components/ChatComponent.vue

@@ -31,7 +31,7 @@ const computedStatus = computed(() => store.chatStatus);
         />
         <div class="bubbles-wrapper">
           <ChatBuble
-            :key="JSON.stringify(content)"
+            :key="`${index}-${role}`"
             v-for="({ content, role }, index) in store.chatMessagesList"
             :message="content"
             :isUSer="role === 'user'"
@@ -52,6 +52,7 @@ const computedStatus = computed(() => store.chatStatus);
               CHAT_STATUS.FORMULATING_ANSWER
             ].includes(computedStatus)
           "
+          :label="store.processingStatusLabel"
         />
       </template>
       <template #queues>

src/components/LoadingComponent.vue

@@ -1,18 +1,36 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+}>();
+</script>
+
 <template>
-  <div id="wave">
-    <span class="dot"></span>
-    <span class="dot dot2"></span>
-    <span class="dot dot3"></span>
+  <div class="loading-wrapper">
+    <div id="wave">
+      <span class="dot"></span>
+      <span class="dot dot2"></span>
+      <span class="dot dot3"></span>
+    </div>
+    <p v-if="label" class="loading-label">{{ label }}</p>
   </div>
 </template>
 <style scoped>
+.loading-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.loading-label {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--neutral-80);
+  text-align: center;
+}
+
 #wave {
-  position: absolute;
-  bottom: 0rem;
-  left: 50%;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 0.625rem;
+  margin: 0;
 }
 
 .dot {

src/localisation/en.ts

@@ -313,6 +313,12 @@ export const en = {
   showMoreAuthors: 'Show more',
   showSources: 'Show sources',
 
+  chatProcessingSteps: {
+    fetching_resources: 'Getting resources from WeLearn database',
+    analyzing_resources: 'Analyzing relevant resources',
+    generating_answer: 'Generating your answer'
+  },
+
   sources: 'Sources',
   sourcesList: {
     fetching: 'Searching across {docs_nb} documents...',

src/localisation/fr.ts

@@ -317,6 +317,12 @@ export const fr = {
   showMoreAuthors: 'Afficher plus',
   showSources: 'Afficher les sources',
 
+  chatProcessingSteps: {
+    fetching_resources: 'Recuperation des ressources depuis la base WeLearn',
+    analyzing_resources: 'Analyse des ressources pertinentes',
+    generating_answer: 'Generation de votre reponse'
+  },
+
   sources: 'Sources',
   sourcesList: {
     fetching: 'Recherche parmi {docs_nb} documents...',