From 720939d0ba694a9eea8f0eedb66a2bed8af92722 Mon Sep 17 00:00:00 2001
From: Jean-Marc SEVIN <jean-marc.sevin@learningplanetinstitute.org>
Date: Fri, 5 Jun 2026 12:00:36 +0200
Subject: [PATCH 1/8] Stream agent answer, with processing steps

---
 src/components/ChatArea.vue         |   1 +
 src/components/ChatComponent.vue    |   3 +-
 src/components/LoadingComponent.vue |  38 +++-
 src/localisation/en.ts              |   6 +
 src/localisation/fr.ts              |   6 +
 src/stores/chat.ts                  | 295 +++++++++++++++++++++++++++-
 src/types/index.ts                  |   6 +
 src/utils/fetch.ts                  |  42 ++--
 tsconfig.app.json                   |   1 -
 9 files changed, 359 insertions(+), 39 deletions(-)

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 47121a9..1ffaa1d 100644
--- a/src/localisation/en.ts
+++ b/src/localisation/en.ts
@@ -300,6 +300,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 4ac5839..8b7057c 100644
--- a/src/localisation/fr.ts
+++ b/src/localisation/fr.ts
@@ -304,6 +304,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 04b2857..c63ae16 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -1,7 +1,7 @@
 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 i18n from '@/localisation/i18n';
@@ -24,6 +24,66 @@ export const CHAT_STATUS = {
 
 type CHAT_STATUSES_TYPE = keyof typeof CHAT_STATUS;
 
+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() : undefined;
+  const statusAsStep = normalizeProcessingStep(rawStatus);
+  const step = normalizeProcessingStep(value.step) ?? (rawStatus === 'processing' ? undefined : statusAsStep);
+  const label = typeof value.label === 'string' ? value.label : undefined;
+
+  const isProcessingEvent = rawStatus === 'processing' || Boolean(step);
+  if (!isProcessingEvent) {
+    return null;
+  }
+
+  if (!step && !label) {
+    return null;
+  }
+
+  return {
+    status: 'processing',
+    step,
+    label
+  };
+};
+
+const extractProcessingMetadata = (parsed: unknown): ChatProcessingMetadata | null => {
+  if (!isRecord(parsed)) {
+    return null;
+  }
+
+  return (
+    toProcessingMetadata(parsed) ??
+    toProcessingMetadata(parsed.data) ??
+    toProcessingMetadata(parsed.meta) ??
+    toProcessingMetadata(parsed.metadata)
+  );
+};
+
 export const useChatStore = defineStore('chat', () => {
   const chatInput: Ref<string> = ref('');
   const chatMessagesList: Ref<ChatMessage[]> = ref(getFromStorage('chat') || []);
@@ -37,6 +97,47 @@ 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 customLabel = metadata?.label?.trim();
+
+    if (customLabel) {
+      return customLabel;
+    }
+
+    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 +146,6 @@ export const useChatStore = defineStore('chat', () => {
 
     if (chatThread.length > 0) {
       chatStatus.value = CHAT_STATUS.DONE;
-      isChatEmpty.value = false;
     }
 
     chatMessagesList.value = chatThread;
@@ -118,6 +218,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 +242,8 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   async function getAgentAnswer(userMsg: string) {
+    clearProcessingMetadata();
+
     const { sdgFilters, sourcesFilters: selectedCorpus } = useFiltersStore();
     const body = {
       query: userMsg,
@@ -149,16 +252,186 @@ 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 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);
+        }
+
+        if (Array.isArray(parsed?.docs)) {
+          sourcesList.value = parsed.docs;
+          saveToStorage('chatSources', sourcesList.value);
+          if (parsed.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;
+    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;
   }
 
@@ -189,6 +462,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;
@@ -204,6 +478,7 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   function $reset() {
+    clearProcessingMetadata();
     chatStatus.value = CHAT_STATUS.EMPTY;
     chatInput.value = '';
     chatMessagesList.value = [];
@@ -225,6 +500,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/fetch.ts b/src/utils/fetch.ts
index 0401ae9..a98b8bf 100644
--- a/src/utils/fetch.ts
+++ b/src/utils/fetch.ts
@@ -4,10 +4,26 @@ export const API_BASE = import.meta.env.VITE_API_BASE;
 const API_VERSION = import.meta.env.VITE_API_VERSION || '/api/v1';
 export const WL_API_KEY = import.meta.env.VITE_WL_API_KEY;
 
-export const baseGetAxios = async (endpoint: string) => {
-  if (!API_BASE) throw new Error('API_BASE not defined');
+const DEV_PROXY_BASE = '/__welearn_api_proxy__';
+const isLocalApiBase =
+  typeof API_BASE === 'string' && /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/i.test(API_BASE);
+
+const getApiRoot = () => {
+  if (import.meta.env.DEV && isLocalApiBase) {
+    return `${DEV_PROXY_BASE}${API_VERSION}`;
+  }
+
+  if (!API_BASE) {
+    throw new Error('API_BASE not defined');
+  }
+
+  return `${API_BASE}${API_VERSION}`;
+};
 
-  const response = await axios.get(`${API_BASE}${API_VERSION}${endpoint}`, {
+const buildApiUrl = (endpoint: string) => `${getApiRoot()}${endpoint}`;
+
+export const baseGetAxios = async (endpoint: string) => {
+  const response = await axios.get(buildApiUrl(endpoint), {
     withCredentials: true,
     headers: {
       'X-API-Key': WL_API_KEY
@@ -24,8 +40,6 @@ export const basePostAxios = async (
   options: Record<string, any> = {},
   config?: AxiosRequestConfig
 ) => {
-  if (!API_BASE) throw new Error('API_BASE not defined');
-
   const enhancedConfig = {
     ...config,
     withCredentials: true,
@@ -35,11 +49,7 @@ export const basePostAxios = async (
   };
 
   try {
-    const response = await axios.post(
-      `${API_BASE}${API_VERSION}${endpoint}`,
-      options,
-      enhancedConfig
-    );
+    const response = await axios.post(buildApiUrl(endpoint), options, enhancedConfig);
 
     if (!(response.status >= 200) && !(response.status <= 300)) {
       throw new Error('Error fetching data');
@@ -53,8 +63,6 @@ export const basePostAxios = async (
 };
 
 export const baseDeleteAxios = async (endpoint: string, config?: AxiosRequestConfig) => {
-  if (!API_BASE) throw new Error('API_BASE not defined');
-
   const enhancedConfig = {
     ...config,
     withCredentials: true,
@@ -64,7 +72,7 @@ export const baseDeleteAxios = async (endpoint: string, config?: AxiosRequestCon
   };
 
   try {
-    const response = await axios.delete(`${API_BASE}${API_VERSION}${endpoint}`, enhancedConfig);
+    const response = await axios.delete(buildApiUrl(endpoint), enhancedConfig);
 
     if (!(response.status >= 200) && !(response.status <= 300)) {
       throw new Error('Error deleting data');
@@ -120,9 +128,7 @@ export const fetchStream = async (
   endpoint: string,
   body: { bodyContent: string }
 ): Promise<Response['body']> => {
-  if (!API_BASE) throw new Error('API_BASE not defined');
-
-  const response = await fetch(`${API_BASE}${API_VERSION}${endpoint}`, {
+  const response = await fetch(buildApiUrl(endpoint), {
     method: 'POST',
     body: body.bodyContent,
     credentials: 'include',
@@ -145,7 +151,7 @@ export const postBookmark = async (documentId: string) => {
 
 export const deleteBookmark = async (documentId: string) => {
   const resp = await axios.delete(
-    `${API_BASE}${API_VERSION}/user/bookmarks/:document_id?document_id=${documentId}`,
+    buildApiUrl(`/user/bookmarks/:document_id?document_id=${documentId}`),
     {
       withCredentials: true,
       headers: {
@@ -157,7 +163,7 @@ export const deleteBookmark = async (documentId: string) => {
 };
 
 export const deleteAllBookmarks = async () => {
-  await axios.delete(`${API_BASE}${API_VERSION}/user/bookmarks`, {
+  await axios.delete(buildApiUrl('/user/bookmarks'), {
     withCredentials: true,
     headers: {
       'X-API-Key': WL_API_KEY
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/*"]
     }

From 7d26a2aadb23db56e6e95f4f66f0d6620e077043 Mon Sep 17 00:00:00 2001
From: Jean-Marc SEVIN <jean-marc.sevin@learningplanetinstitute.org>
Date: Fri, 5 Jun 2026 12:16:51 +0200
Subject: [PATCH 2/8] Fix format issues

---
 src/stores/chat.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index c63ae16..481f363 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -33,7 +33,10 @@ const normalizeProcessingStep = (value: unknown): string | undefined => {
     return undefined;
   }
 
-  const normalized = value.trim().toLowerCase().replace(/[-\s]+/g, '_');
+  const normalized = value
+    .trim()
+    .toLowerCase()
+    .replace(/[-\s]+/g, '_');
   if (!normalized) {
     return undefined;
   }
@@ -50,9 +53,11 @@ const toProcessingMetadata = (value: unknown): ChatProcessingMetadata | null =>
     return null;
   }
 
-  const rawStatus = typeof value.status === 'string' ? value.status.trim().toLowerCase() : undefined;
+  const rawStatus =
+    typeof value.status === 'string' ? value.status.trim().toLowerCase() : undefined;
   const statusAsStep = normalizeProcessingStep(rawStatus);
-  const step = normalizeProcessingStep(value.step) ?? (rawStatus === 'processing' ? undefined : statusAsStep);
+  const step =
+    normalizeProcessingStep(value.step) ?? (rawStatus === 'processing' ? undefined : statusAsStep);
   const label = typeof value.label === 'string' ? value.label : undefined;
 
   const isProcessingEvent = rawStatus === 'processing' || Boolean(step);

From 644e4ebb459e4f40bae6de34c34b868db7385e5c Mon Sep 17 00:00:00 2001
From: Jean-Marc SEVIN <jean-marc.sevin@learningplanetinstitute.org>
Date: Thu, 18 Jun 2026 18:05:00 +0200
Subject: [PATCH 3/8] Remove useless const

---
 src/stores/chat.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 481f363..9ae620d 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -58,21 +58,19 @@ const toProcessingMetadata = (value: unknown): ChatProcessingMetadata | null =>
   const statusAsStep = normalizeProcessingStep(rawStatus);
   const step =
     normalizeProcessingStep(value.step) ?? (rawStatus === 'processing' ? undefined : statusAsStep);
-  const label = typeof value.label === 'string' ? value.label : undefined;
 
   const isProcessingEvent = rawStatus === 'processing' || Boolean(step);
   if (!isProcessingEvent) {
     return null;
   }
 
-  if (!step && !label) {
+  if (!step) {
     return null;
   }
 
   return {
     status: 'processing',
     step,
-    label
   };
 };
 
@@ -106,11 +104,6 @@ export const useChatStore = defineStore('chat', () => {
 
   const processingStatusLabel: ComputedRef<string> = computed(() => {
     const metadata = processingMetadata.value;
-    const customLabel = metadata?.label?.trim();
-
-    if (customLabel) {
-      return customLabel;
-    }
 
     const stepTranslationMap: Record<string, string> = {
       fetching_resources: 'chatProcessingSteps.fetching_resources',

From 840b693c139f08bc6bae0a6de055d13bb73f2d2a Mon Sep 17 00:00:00 2001
From: Jean-Marc SEVIN <jean-marc.sevin@learningplanetinstitute.org>
Date: Thu, 18 Jun 2026 18:19:48 +0200
Subject: [PATCH 4/8] Refacto

---
 src/stores/chat.ts          | 64 +------------------------------------
 src/utils/chatProcessing.ts | 64 +++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 63 deletions(-)
 create mode 100644 src/utils/chatProcessing.ts

diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 9ae620d..1e901f0 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -4,6 +4,7 @@ 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';
@@ -24,69 +25,6 @@ export const CHAT_STATUS = {
 
 type CHAT_STATUSES_TYPE = keyof typeof CHAT_STATUS;
 
-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() : undefined;
-  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,
-  };
-};
-
-const extractProcessingMetadata = (parsed: unknown): ChatProcessingMetadata | null => {
-  if (!isRecord(parsed)) {
-    return null;
-  }
-
-  return (
-    toProcessingMetadata(parsed) ??
-    toProcessingMetadata(parsed.data) ??
-    toProcessingMetadata(parsed.meta) ??
-    toProcessingMetadata(parsed.metadata)
-  );
-};
-
 export const useChatStore = defineStore('chat', () => {
   const chatInput: Ref<string> = ref('');
   const chatMessagesList: Ref<ChatMessage[]> = ref(getFromStorage('chat') || []);
diff --git a/src/utils/chatProcessing.ts b/src/utils/chatProcessing.ts
new file mode 100644
index 0000000..8285a06
--- /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)
+  );
+};
\ No newline at end of file

From 8f8e34a0ff5bfca1fa5c3470350c263daed8d6f3 Mon Sep 17 00:00:00 2001
From: Jean-Marc SEVIN <jmsevin@users.noreply.github.com>
Date: Thu, 18 Jun 2026 18:22:10 +0200
Subject: [PATCH 5/8] Update src/stores/chat.ts

Co-authored-by: Sandra Guerreiro  <sandragjacinto@gmail.com>
---
 src/stores/chat.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 1e901f0..41770b5 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -64,7 +64,7 @@ export const useChatStore = defineStore('chat', () => {
     processingMetadata.value = metadata;
 
     if (
-      ['fetching_resources', 'analyzing_resources'].includes(metadata.step || '') &&
+      ['fetching_resources', 'analyzing_resources'].includes(metadata?.step) &&
       !sourcesList.value.length
     ) {
       chatStatus.value = CHAT_STATUS.SEARCHING;

From 7064bc70d8c30651b45e0803c1869ac24b8e3695 Mon Sep 17 00:00:00 2001
From: Jean-Marc SEVIN <jean-marc.sevin@learningplanetinstitute.org>
Date: Fri, 19 Jun 2026 09:09:23 +0200
Subject: [PATCH 6/8] Undo settings for local testing

---
 src/utils/fetch.ts | 66 ++++++++++++++++++++++++++--------------------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/utils/fetch.ts b/src/utils/fetch.ts
index a98b8bf..d5b685b 100644
--- a/src/utils/fetch.ts
+++ b/src/utils/fetch.ts
@@ -4,29 +4,24 @@ export const API_BASE = import.meta.env.VITE_API_BASE;
 const API_VERSION = import.meta.env.VITE_API_VERSION || '/api/v1';
 export const WL_API_KEY = import.meta.env.VITE_WL_API_KEY;
 
-const DEV_PROXY_BASE = '/__welearn_api_proxy__';
-const isLocalApiBase =
-  typeof API_BASE === 'string' && /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/i.test(API_BASE);
-
-const getApiRoot = () => {
-  if (import.meta.env.DEV && isLocalApiBase) {
-    return `${DEV_PROXY_BASE}${API_VERSION}`;
-  }
-
-  if (!API_BASE) {
-    throw new Error('API_BASE not defined');
+const getSessionIdFromStorage = () => {
+  try {
+    const sessionId = localStorage.getItem('sessionId');
+    return sessionId ? JSON.parse(sessionId) : '';
+  } catch (error) {
+    console.error('Error parsing sessionId from localStorage:', error);
+    return '';
   }
-
-  return `${API_BASE}${API_VERSION}`;
 };
 
-const buildApiUrl = (endpoint: string) => `${getApiRoot()}${endpoint}`;
-
 export const baseGetAxios = async (endpoint: string) => {
-  const response = await axios.get(buildApiUrl(endpoint), {
+  if (!API_BASE) throw new Error('API_BASE not defined');
+
+  const response = await axios.get(`${API_BASE}${API_VERSION}${endpoint}`, {
     withCredentials: true,
     headers: {
-      'X-API-Key': WL_API_KEY
+      'X-API-Key': WL_API_KEY,
+      'X-Session-Id': getSessionIdFromStorage()
     }
   });
 
@@ -40,16 +35,23 @@ export const basePostAxios = async (
   options: Record<string, any> = {},
   config?: AxiosRequestConfig
 ) => {
+  if (!API_BASE) throw new Error('API_BASE not defined');
+
   const enhancedConfig = {
     ...config,
     withCredentials: true,
     headers: {
-      'X-API-Key': WL_API_KEY
+      'X-API-Key': WL_API_KEY,
+      'X-Session-Id': getSessionIdFromStorage()
     }
   };
 
   try {
-    const response = await axios.post(buildApiUrl(endpoint), options, enhancedConfig);
+    const response = await axios.post(
+      `${API_BASE}${API_VERSION}${endpoint}`,
+      options,
+      enhancedConfig
+    );
 
     if (!(response.status >= 200) && !(response.status <= 300)) {
       throw new Error('Error fetching data');
@@ -63,16 +65,19 @@ export const basePostAxios = async (
 };
 
 export const baseDeleteAxios = async (endpoint: string, config?: AxiosRequestConfig) => {
+  if (!API_BASE) throw new Error('API_BASE not defined');
+
   const enhancedConfig = {
     ...config,
     withCredentials: true,
     headers: {
-      'X-API-Key': WL_API_KEY
+      'X-API-Key': WL_API_KEY,
+      'X-Session-Id': getSessionIdFromStorage()
     }
   };
 
   try {
-    const response = await axios.delete(buildApiUrl(endpoint), enhancedConfig);
+    const response = await axios.delete(`${API_BASE}${API_VERSION}${endpoint}`, enhancedConfig);
 
     if (!(response.status >= 200) && !(response.status <= 300)) {
       throw new Error('Error deleting data');
@@ -128,14 +133,17 @@ export const fetchStream = async (
   endpoint: string,
   body: { bodyContent: string }
 ): Promise<Response['body']> => {
-  const response = await fetch(buildApiUrl(endpoint), {
+  if (!API_BASE) throw new Error('API_BASE not defined');
+
+  const response = await fetch(`${API_BASE}${API_VERSION}${endpoint}`, {
     method: 'POST',
     body: body.bodyContent,
     credentials: 'include',
     headers: {
       Accept: '*/*',
       'Content-Type': 'application/json',
-      'X-API-Key': WL_API_KEY
+      'X-API-Key': WL_API_KEY,
+      'X-Session-Id': getSessionIdFromStorage()
     }
   });
 
@@ -151,11 +159,12 @@ export const postBookmark = async (documentId: string) => {
 
 export const deleteBookmark = async (documentId: string) => {
   const resp = await axios.delete(
-    buildApiUrl(`/user/bookmarks/:document_id?document_id=${documentId}`),
+    `${API_BASE}${API_VERSION}/user/bookmarks/:document_id?document_id=${documentId}`,
     {
       withCredentials: true,
       headers: {
-        'X-API-Key': WL_API_KEY
+        'X-API-Key': WL_API_KEY,
+        'X-Session-Id': getSessionIdFromStorage()
       }
     }
   );
@@ -163,10 +172,11 @@ export const deleteBookmark = async (documentId: string) => {
 };
 
 export const deleteAllBookmarks = async () => {
-  await axios.delete(buildApiUrl('/user/bookmarks'), {
+  await axios.delete(`${API_BASE}${API_VERSION}/user/bookmarks`, {
     withCredentials: true,
     headers: {
-      'X-API-Key': WL_API_KEY
+      'X-API-Key': WL_API_KEY,
+      'X-Session-Id': getSessionIdFromStorage()
     }
   });
 };
@@ -179,4 +189,4 @@ export const getBookmarks = async () => {
   }, []);
   const docsPayloads = await basePostAxios('/search/documents/by_ids', ids);
   return docsPayloads;
-};
+};
\ No newline at end of file

From e1596ce303f70c14cd79f7a930e4ce787a45739e Mon Sep 17 00:00:00 2001
From: Jean-Marc SEVIN <jean-marc.sevin@learningplanetinstitute.org>
Date: Fri, 19 Jun 2026 10:57:20 +0200
Subject: [PATCH 7/8] Resolve merge conflict

---
 src/stores/chat.ts | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 41770b5..4b2cea3 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -269,6 +269,22 @@ export const useChatStore = defineStore('chat', () => {
       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;
@@ -295,10 +311,11 @@ export const useChatStore = defineStore('chat', () => {
           appendToAssistantMessage(contentChunk);
         }
 
-        if (Array.isArray(parsed?.docs)) {
-          sourcesList.value = parsed.docs;
-          saveToStorage('chatSources', sourcesList.value);
-          if (parsed.docs.length > 0) {
+        const docs = extractDocs(parsed);
+        if (docs) {
+          sourcesList.value = docs;
+          saveToStorage('chatSources', docs);
+          if (docs.length > 0) {
             chatStatus.value = CHAT_STATUS.SEARCHED;
           }
         }

From 0f78b861213403419dca216432dfec31b555afe3 Mon Sep 17 00:00:00 2001
From: Jean-Marc SEVIN <jean-marc.sevin@learningplanetinstitute.org>
Date: Fri, 19 Jun 2026 11:37:33 +0200
Subject: [PATCH 8/8] Fix lint issue

---
 src/utils/chatProcessing.ts | 4 ++--
 src/utils/fetch.ts          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/chatProcessing.ts b/src/utils/chatProcessing.ts
index 8285a06..c060049 100644
--- a/src/utils/chatProcessing.ts
+++ b/src/utils/chatProcessing.ts
@@ -46,7 +46,7 @@ const toProcessingMetadata = (value: unknown): ChatProcessingMetadata | null =>
 
   return {
     status: 'processing',
-    step,
+    step
   };
 };
 
@@ -61,4 +61,4 @@ export const extractProcessingMetadata = (parsed: unknown): ChatProcessingMetada
     toProcessingMetadata(parsed.meta) ??
     toProcessingMetadata(parsed.metadata)
   );
-};
\ No newline at end of file
+};
diff --git a/src/utils/fetch.ts b/src/utils/fetch.ts
index d5b685b..4216a9b 100644
--- a/src/utils/fetch.ts
+++ b/src/utils/fetch.ts
@@ -189,4 +189,4 @@ export const getBookmarks = async () => {
   }, []);
   const docsPayloads = await basePostAxios('/search/documents/by_ids', ids);
   return docsPayloads;
-};
\ No newline at end of file
+};