chatqna-core: Fix UI issues (open-edge-platform#147)

Signed-off-by: Yeoh, Hoong Tee <[email protected]>
Co-authored-by: Ciprian Goea <[email protected]>

Author: hteeyeoh

sample-applications/chat-question-and-answer-core/ui/src/redux/conversation/conversationSlice.ts

@@ -20,8 +20,10 @@ import {
   uuidv4,
 } from '../../utils/util.ts';
 import store, { RootState } from '../store.ts';
-import { NotificationSeverity } from '../../components/Notification/notify.ts';
-import { notify } from '../../components/Notification/notify.ts';
+import {
+  NotificationSeverity,
+  notify,
+} from '../../components/Notification/notify.ts';
 
 const initialState: ConversationReducer = {
   conversations: [],
@@ -140,6 +142,18 @@ export const conversationSlice = createSlice({
   },
 });
 
+const handleConnectionError = async (message?: string) => {
+  const healthStatus = await checkHealth();
+
+  if (healthStatus.status === 503) {
+    notify(
+      message ||
+        'The backend service is starting up. Please try again in a few moments.',
+      NotificationSeverity.ERROR,
+    );
+  }
+};
+
 export const fetchInitialFiles = createAsyncThunk(
   'conversation/fetchInitialFiles',
   async (_, { rejectWithValue }) => {
@@ -174,6 +188,8 @@ export const uploadFile = createAsyncThunk(
       const body = new FormData();
       body.append('files', file);
 
+      await handleConnectionError();
+
       const response = await client.post(DATA_PREP_URL, body);
 
       if (response.status === 200) {
@@ -211,6 +227,8 @@ export const removeFile = createAsyncThunk(
         throw new Error('File not found');
       }
 
+      await handleConnectionError();
+
       const response = await client.delete(
         `${DATA_PREP_URL}?document=${encodeURIComponent(fileName)}&delete_all=${deleteAll}`,
       );
@@ -246,6 +264,8 @@ export const removeAllFiles = createAsyncThunk(
         throw new Error('No files to delete');
       }
 
+      await handleConnectionError();
+
       const response = await client.delete(
         `${DATA_PREP_URL}?delete_all=${true}`,
       );
@@ -297,6 +317,8 @@ export const doConversation = (conversationRequest: ConversationRequest) => {
     store.dispatch(addMessageToMessages(userPrompt));
   }
 
+  handleConnectionError().catch(console.error);
+
   let result: string = '';
   try {
     fetchEventSource(CHAT_QNA_URL, {
@@ -340,21 +362,6 @@ export const doConversation = (conversationRequest: ConversationRequest) => {
         store.dispatch(setIsGenerating(false));
         store.dispatch(setOnGoingResult(''));
 
-        (async () => {
-          const healthStatus = await checkHealth();
-          if (healthStatus.status !== 200) {
-            notify(
-              healthStatus.message ||
-                'LLM model server is not ready to accept connections. Please try after a few minutes.',
-              NotificationSeverity.ERROR,
-            );
-          } else {
-            notify(
-              err.message || 'Could not connect to backend at this moment',
-              NotificationSeverity.ERROR,
-            );
-          }
-        })();
         throw err;
       },
       onclose() {

sample-applications/chat-question-and-answer-core/ui/src/utils/util.ts

@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { HEALTH_CHECK_URL, MODEL_URL } from '../config';
+import { HEALTH_CHECK_URL, MODEL_URL } from '../config.ts';
 import client from './client.ts';
 
 export const getCurrentTimeStamp = () => {
@@ -76,39 +76,19 @@ export const capitalize = (input: string): string => {
 export const checkHealth = async () => {
   try {
     const response = await client.get(HEALTH_CHECK_URL);
-    if (response.status === 200) {
-      return { status: response.status };
-    } else {
-      return {
-        status: response.status,
-        message:
-          'LLM model server is not ready to accept connections. Please try after a few minutes.',
-      };
-    }
+    return { status: response.status };
   } catch (error) {
-    return {
-      status: 503,
-      message:
-        'LLM model server is not ready to accept connections. Please try after a few minutes.',
-    };
+    return { status: 503 };
   }
 };
 
 export const fetchModelName = async () => {
   try {
-    const response = await client.get(MODEL_URL);
-    if (response.status === 200) {
-      return { status: 200, llmModel: response.data.llm_model };
-    } else {
-      return {
-        status: response.status,
-        message: 'LLM Model is not set',
-      };
-    }
-  } catch (error) {
-    return {
-      status: 503,
-      message: 'LLM Model is not set',
-    };
+    const { status, data } = await client.get(MODEL_URL);
+    return status === 200
+      ? { status, llmModel: data.llm_model }
+      : { status, message: 'LLM Model is not set' };
+  } catch {
+    return { status: 503, message: 'LLM Model is not set' };
   }
 };