diff --git a/src/components/ChatArea.vue b/src/components/ChatArea.vue
index 8cb5ca0..75a2ac2 100644
--- a/src/components/ChatArea.vue
+++ b/src/components/ChatArea.vue
@@ -11,6 +11,7 @@ defineProps({
 
 onUpdated(() => {
   setState();
+  scrollToBottom();
 });
 
 onMounted(() => {
diff --git a/src/components/ChatComponent.vue b/src/components/ChatComponent.vue
index 20ec695..061bcb2 100644
--- a/src/components/ChatComponent.vue
+++ b/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>
diff --git a/src/components/LoadingComponent.vue b/src/components/LoadingComponent.vue
index 23da87d..ddaf0ed 100644
--- a/src/components/LoadingComponent.vue
+++ b/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 {
diff --git a/src/localisation/en.ts b/src/localisation/en.ts
index ea89f7f..513ad5e 100644
--- a/src/localisation/en.ts
+++ b/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...',
diff --git a/src/localisation/fr.ts b/src/localisation/fr.ts
index 0930d04..72ddd66 100644
--- a/src/localisation/fr.ts
+++ b/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...',
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 383a304..4b2cea3 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -1,9 +1,10 @@
 import { defineStore } from 'pinia';
 import { computed, ref, type ComputedRef, type Ref } from 'vue';
-import type { Document, ChatMessage } from '@/types';
-import { baseGetAxios, basePostAxios } from '@/utils/fetch';
+import type { Document, ChatMessage, ChatProcessingMetadata } from '@/types';
+import { baseGetAxios, basePostAxios, fetchStream } from '@/utils/fetch';
 import { getQueryParamValue } from '@/utils/urlsUtils';
 import { getFromStorage, saveToStorage, clearFromStorage } from '@/utils/storage';
+import { extractProcessingMetadata } from '@/utils/chatProcessing';
 import i18n from '@/localisation/i18n';
 import type { AxiosResponse } from 'axios';
 import { useFiltersStore } from '@/stores/filters';
@@ -37,6 +38,42 @@ export const useChatStore = defineStore('chat', () => {
   const chatStatus: Ref<(typeof CHAT_STATUS)[CHAT_STATUSES_TYPE]> = ref(
     isChatEmpty.value ? CHAT_STATUS.EMPTY : CHAT_STATUS.DONE
   );
+  const processingMetadata: Ref<ChatProcessingMetadata | null> = ref(null);
+
+  const processingStatusLabel: ComputedRef<string> = computed(() => {
+    const metadata = processingMetadata.value;
+
+    const stepTranslationMap: Record<string, string> = {
+      fetching_resources: 'chatProcessingSteps.fetching_resources',
+      analyzing_resources: 'chatProcessingSteps.analyzing_resources',
+      generating_answer: 'chatProcessingSteps.generating_answer'
+    };
+
+    if (metadata?.step && stepTranslationMap[metadata.step]) {
+      return i18n.global.t(stepTranslationMap[metadata.step]);
+    }
+
+    return i18n.global.t('sourcesList.formulatingAnswer');
+  });
+
+  const clearProcessingMetadata = () => {
+    processingMetadata.value = null;
+  };
+
+  const setProcessingMetadata = (metadata: ChatProcessingMetadata) => {
+    processingMetadata.value = metadata;
+
+    if (
+      ['fetching_resources', 'analyzing_resources'].includes(metadata?.step) &&
+      !sourcesList.value.length
+    ) {
+      chatStatus.value = CHAT_STATUS.SEARCHING;
+      return;
+    }
+
+    chatStatus.value = CHAT_STATUS.FORMULATING_ANSWER;
+  };
+
   const initializeChat = async () => {
     if (!storedThreadId.value) {
       return;
@@ -45,7 +82,6 @@ export const useChatStore = defineStore('chat', () => {
 
     if (chatThread.length > 0) {
       chatStatus.value = CHAT_STATUS.DONE;
-      isChatEmpty.value = false;
     }
 
     chatMessagesList.value = chatThread;
@@ -118,6 +154,7 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   async function fetchRephrase() {
+    clearProcessingMetadata();
     chatStatus.value = CHAT_STATUS.FORMULATING_ANSWER;
     // get the content of the message which the role is assistant
     const lastAssistantMessage = [...chatMessagesList.value]
@@ -141,6 +178,8 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   async function getAgentAnswer(userMsg: string) {
+    clearProcessingMetadata();
+
     const { sdgFilters, sourcesFilters: selectedCorpus } = useFiltersStore();
     const body = {
       query: userMsg,
@@ -149,17 +188,203 @@ export const useChatStore = defineStore('chat', () => {
       sdg_filter: sdgFilters
     };
 
-    const { data } = await basePostAxios('/qna/chat/agent', body);
+    const stream = await fetchStream('/qna/chat/agent_stream', {
+      bodyContent: JSON.stringify(body)
+    });
+    if (!stream) {
+      throw new Error('Unable to create stream reader');
+    }
+    const reader = stream.getReader();
+    const decoder = new TextDecoder();
+
+    const assistantMessage: ChatMessage = { role: 'assistant', content: '' };
+    chatMessagesList.value.push(assistantMessage);
+    const assistantMessageIndex = chatMessagesList.value.length - 1;
+
+    let streamBuffer = '';
+    let lastPersistTimestamp = 0;
+
+    const persistChat = (force = false) => {
+      const now = Date.now();
+      if (force || now - lastPersistTimestamp >= 250) {
+        saveToStorage('chat', chatMessagesList.value);
+        lastPersistTimestamp = now;
+      }
+    };
+
+    const appendToAssistantMessage = (chunk: string) => {
+      const currentMessage = chatMessagesList.value[assistantMessageIndex];
+      if (!currentMessage) {
+        return;
+      }
+
+      chatMessagesList.value[assistantMessageIndex] = {
+        ...currentMessage,
+        content: `${currentMessage.content}${chunk}`
+      };
+      persistChat();
+    };
+
+    const extractContentChunk = (parsed: any): string => {
+      if (!parsed || typeof parsed !== 'object') {
+        return '';
+      }
+
+      const directContent = parsed?.content ?? parsed?.delta ?? parsed?.chunk ?? parsed?.token;
+      if (typeof directContent === 'string') {
+        return directContent;
+      }
+
+      if (typeof parsed?.data === 'string') {
+        return parsed.data;
+      }
+
+      if (typeof parsed?.data?.content === 'string') {
+        return parsed.data.content;
+      }
+
+      if (typeof parsed?.delta?.content === 'string') {
+        return parsed.delta.content;
+      }
+
+      if (typeof parsed?.message?.content === 'string') {
+        return parsed.message.content;
+      }
+
+      if (typeof parsed?.answer === 'string') {
+        return parsed.answer;
+      }
+
+      if (Array.isArray(parsed?.choices)) {
+        for (const choice of parsed.choices) {
+          if (typeof choice?.delta?.content === 'string') {
+            return choice.delta.content;
+          }
+          if (typeof choice?.text === 'string') {
+            return choice.text;
+          }
+        }
+      }
+
+      return '';
+    };
+
+    const extractDocs = (parsed: any): Document[] | null => {
+      if (!parsed || typeof parsed !== 'object') {
+        return null;
+      }
+
+      if (Array.isArray(parsed?.docs)) {
+        return parsed.docs;
+      }
+
+      if (Array.isArray(parsed?.data?.docs)) {
+        return parsed.data.docs;
+      }
+
+      return null;
+    };
+
+    const handleStreamPayload = (payload: string) => {
+      if (!payload || payload === '[DONE]') {
+        return;
+      }
+
+      try {
+        const parsed = JSON.parse(payload);
+        const parsedProcessingMetadata = extractProcessingMetadata(parsed);
+
+        if (parsedProcessingMetadata) {
+          setProcessingMetadata(parsedProcessingMetadata);
+        }
+
+        const contentChunk = extractContentChunk(parsed);
+
+        if (contentChunk) {
+          if (processingMetadata.value?.step !== 'generating_answer') {
+            setProcessingMetadata({
+              status: 'processing',
+              step: 'generating_answer'
+            });
+          }
+          chatStatus.value = CHAT_STATUS.FORMULATING_ANSWER;
+          appendToAssistantMessage(contentChunk);
+        }
+
+        const docs = extractDocs(parsed);
+        if (docs) {
+          sourcesList.value = docs;
+          saveToStorage('chatSources', docs);
+          if (docs.length > 0) {
+            chatStatus.value = CHAT_STATUS.SEARCHED;
+          }
+        }
+
+        if (typeof parsed?.thread_id === 'string') {
+          storeThreadId(parsed.thread_id);
+        }
+
+        if (typeof parsed?.message_id === 'string') {
+          storeMessageId(parsed.message_id);
+        }
+      } catch {
+        if (!payload.startsWith('event:')) {
+          appendToAssistantMessage(payload);
+        }
+      }
+    };
+
+    const handleStreamEvent = (rawEvent: string) => {
+      const event = rawEvent.trim();
+      if (!event) {
+        return;
+      }
+
+      if (!event.includes('\n') && !event.startsWith('data:')) {
+        handleStreamPayload(event);
+        return;
+      }
+
+      const dataLines = event
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line.startsWith('data:'))
+        .map((line) => line.slice(5).trim());
+
+      if (!dataLines.length) {
+        return;
+      }
+
+      for (const payload of dataLines) {
+        handleStreamPayload(payload);
+      }
+    };
+
+    let isDone = false;
+    while (!isDone) {
+      const { done: readerDone, value } = await reader.read();
+      if (readerDone) {
+        isDone = true;
+        break;
+      }
+
+      streamBuffer += decoder.decode(value, { stream: true });
+      const events = streamBuffer.split('\n\n');
+      streamBuffer = events.pop() || '';
+
+      for (const event of events) {
+        handleStreamEvent(event);
+      }
+    }
 
-    chatMessagesList.value.push({ role: 'assistant', content: data.content });
-    if (data.docs) {
-      sourcesList.value = data.docs;
-      saveToStorage('chatSources', data.docs);
+    const remaining = streamBuffer.trim();
+    if (remaining) {
+      handleStreamEvent(remaining);
     }
 
-    storeThreadId(data.thread_id);
-    storeMessageId(data.message_id);
+    persistChat(true);
 
+    clearProcessingMetadata();
     chatStatus.value = CHAT_STATUS.FORMULATED_ANSWER;
   }
 
@@ -190,6 +415,7 @@ export const useChatStore = defineStore('chat', () => {
       chatStatus.value = CHAT_STATUS.FORMULATING_ANSWER;
       await getAgentAnswer(message);
     } catch (error) {
+      clearProcessingMetadata();
       chatStatus.value = CHAT_STATUS.ERROR;
       console.error(error);
       return;
@@ -205,6 +431,7 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   function $reset() {
+    clearProcessingMetadata();
     chatStatus.value = CHAT_STATUS.EMPTY;
     chatInput.value = '';
     chatMessagesList.value = [];
@@ -226,6 +453,8 @@ export const useChatStore = defineStore('chat', () => {
 
   return {
     chatStatus,
+    processingMetadata,
+    processingStatusLabel,
     initializeChat,
     chatInput,
     chatMessagesList,
diff --git a/src/types/index.ts b/src/types/index.ts
index 6431b99..6aee73a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -49,6 +49,12 @@ export interface ChatMessage {
   content: string;
 }
 
+export interface ChatProcessingMetadata {
+  status: 'processing';
+  step?: string;
+  label?: string;
+}
+
 export type ReformulateResponse = {
   STANDALONE_QUESTION_EN: string;
   STANDALONE_QUESTION_FR: string;
diff --git a/src/utils/chatProcessing.ts b/src/utils/chatProcessing.ts
new file mode 100644
index 0000000..c060049
--- /dev/null
+++ b/src/utils/chatProcessing.ts
@@ -0,0 +1,64 @@
+import type { ChatProcessingMetadata } from '@/types';
+
+const isRecord = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+
+const normalizeProcessingStep = (value: unknown): string | undefined => {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+
+  const normalized = value
+    .trim()
+    .toLowerCase()
+    .replace(/[-\s]+/g, '_');
+
+  if (!normalized) {
+    return undefined;
+  }
+
+  if (['fetching_resources', 'analyzing_resources', 'generating_answer'].includes(normalized)) {
+    return normalized;
+  }
+
+  return undefined;
+};
+
+const toProcessingMetadata = (value: unknown): ChatProcessingMetadata | null => {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  const rawStatus = typeof value.status === 'string' ? value.status.trim().toLowerCase() : '';
+  const statusAsStep = normalizeProcessingStep(rawStatus);
+  const step =
+    normalizeProcessingStep(value.step) ?? (rawStatus === 'processing' ? undefined : statusAsStep);
+
+  const isProcessingEvent = rawStatus === 'processing' || Boolean(step);
+  if (!isProcessingEvent) {
+    return null;
+  }
+
+  if (!step) {
+    return null;
+  }
+
+  return {
+    status: 'processing',
+    step
+  };
+};
+
+export const extractProcessingMetadata = (parsed: unknown): ChatProcessingMetadata | null => {
+  if (!isRecord(parsed)) {
+    return null;
+  }
+
+  return (
+    toProcessingMetadata(parsed) ??
+    toProcessingMetadata(parsed.data) ??
+    toProcessingMetadata(parsed.meta) ??
+    toProcessingMetadata(parsed.metadata)
+  );
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 3e5b621..654a960 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -4,7 +4,6 @@
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }