feat: handle error when final chunk is received

Author: chriskari

src/components/KymaCompanion/api/getChatResponse.ts

@@ -15,7 +15,7 @@ type GetChatResponseArgs = {
   resourceName?: string;
   sessionID: string;
   handleChatResponse: (chunk: MessageChunk) => void;
-  handleError: (error?: Error) => void;
+  handleError: (error?: string) => void;
   clusterUrl: string;
   clusterAuth: ClusterAuth;
   certificateAuthorityData: string;
@@ -87,7 +87,7 @@ function readChunk(
   reader: ReadableStreamDefaultReader<Uint8Array>,
   decoder: TextDecoder,
   handleChatResponse: (chunk: any) => void,
-  handleError: (error?: Error) => void,
+  handleError: (error?: string) => void,
   sessionID: string,
 ) {
   reader
@@ -98,10 +98,6 @@ function readChunk(
       }
       const receivedString = decoder.decode(value, { stream: true });
       const chunk = JSON.parse(receivedString);
-      if (chunk?.data?.error) {
-        handleError(chunk.data.error);
-        return;
-      }
       handleChatResponse(chunk);
       readChunk(reader, decoder, handleChatResponse, handleError, sessionID);
     })

src/components/KymaCompanion/api/getFollowUpQuestions.ts

@@ -3,7 +3,7 @@ import { getClusterConfig } from 'state/utils/getBackendInfo';
 interface GetFollowUpQuestionsParams {
   sessionID?: string;
   handleFollowUpQuestions: (results: any) => void;
-  handleError: (error?: Error) => void;
+  handleError: (error?: string) => void;
   clusterUrl: string;
   token: string;
   certificateAuthorityData: string;

src/components/KymaCompanion/components/Chat/Chat.tsx

@@ -11,6 +11,7 @@ import { authDataState } from 'state/authDataAtom';
 import getFollowUpQuestions from 'components/KymaCompanion/api/getFollowUpQuestions';
 import getChatResponse from 'components/KymaCompanion/api/getChatResponse';
 import { usePromptSuggestions } from 'components/KymaCompanion/hooks/usePromptSuggestions';
+import { AIError } from '../KymaCompanion';
 import './Chat.scss';
 
 export interface MessageType {
@@ -28,8 +29,8 @@ type ChatProps = {
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
   isReset: boolean;
   setIsReset: React.Dispatch<React.SetStateAction<boolean>>;
-  error: string | null;
-  setError: React.Dispatch<React.SetStateAction<string | null>>;
+  error: AIError;
+  setError: React.Dispatch<React.SetStateAction<AIError>>;
 };
 
 export const Chat = ({
@@ -78,18 +79,33 @@ export const Chat = ({
 
   const handleChatResponse = (response: MessageChunk) => {
     const isLoading = response?.data?.answer?.next !== '__end__';
+
     if (!isLoading) {
-      setFollowUpLoading();
-      getFollowUpQuestions({
-        sessionID,
-        handleFollowUpQuestions,
-        handleError,
-        clusterUrl: cluster.currentContext.cluster.cluster.server,
-        token: authData.token,
-        certificateAuthorityData:
-          cluster.currentContext.cluster.cluster['certificate-authority-data'],
-      });
+      const finalTask = response.data.answer?.tasks?.at(-1);
+      const hasError = finalTask?.status === 'error';
+
+      if (hasError) {
+        const allTasksError =
+          response.data.answer?.tasks?.every(task => task.status === 'error') ??
+          false;
+        const displayRetry = response.data.error !== null || allTasksError;
+        handleError(response.data.answer.content, displayRetry);
+      } else {
+        setFollowUpLoading();
+        getFollowUpQuestions({
+          sessionID,
+          handleFollowUpQuestions,
+          handleError,
+          clusterUrl: cluster.currentContext.cluster.cluster.server,
+          token: authData.token,
+          certificateAuthorityData:
+            cluster.currentContext.cluster.cluster[
+              'certificate-authority-data'
+            ],
+        });
+      }
     }
+
     setChatHistory(prevMessages => {
       const [latestMessage] = prevMessages.slice(-1);
       return prevMessages.slice(0, -1).concat({
@@ -101,7 +117,7 @@ export const Chat = ({
   };
 
   const setFollowUpLoading = () => {
-    setError(null);
+    setError({ message: null, displayRetry: false });
     setLoading(true);
     updateLatestMessage({ suggestionsLoading: true });
   };
@@ -111,14 +127,17 @@ export const Chat = ({
     setLoading(false);
   };
 
-  const handleError = (error?: Error) => {
-    setError(error?.message ?? t('kyma-companion.error.subtitle'));
+  const handleError = (error?: string, displayRetry?: boolean) => {
+    setError({
+      message: error ?? t('kyma-companion.error.subtitle'),
+      displayRetry: displayRetry ?? false,
+    });
     setChatHistory(prevItems => prevItems.slice(0, -1));
     setLoading(false);
   };
 
   const sendPrompt = (query: string) => {
-    setError(null);
+    setError({ message: null, displayRetry: false });
     setLoading(true);
     addMessage({
       author: 'user',
@@ -249,11 +268,11 @@ export const Chat = ({
             />
           );
         })}
-        {error && (
+        {error.message && (
           <ErrorMessage
-            errorMessage={error}
-            errorOnInitialMessage={chatHistory.length === 0}
+            errorMessage={error.message ?? t('kyma-companion.error.subtitle')}
             retryPrompt={() => {}}
+            displayRetry={error.displayRetry}
           />
         )}
       </div>

src/components/KymaCompanion/components/Chat/messages/ErrorMessage.tsx

@@ -3,13 +3,13 @@ import { useTranslation } from 'react-i18next';
 
 interface ErrorMessageProps {
   errorMessage: string;
-  errorOnInitialMessage: boolean;
+  displayRetry: boolean;
   retryPrompt: () => void;
 }
 
 export default function ErrorMessage({
   errorMessage,
-  errorOnInitialMessage,
+  displayRetry,
   retryPrompt,
 }: ErrorMessageProps): JSX.Element {
   const { t } = useTranslation();
@@ -19,12 +19,13 @@ export default function ErrorMessage({
       <Card>
         <IllustratedMessage
           name="Connection"
+          design="Spot"
           key="error-message"
           titleText={t('kyma-companion.error.title')}
           subtitleText={errorMessage}
           className="sap-margin-top-small no-padding"
         >
-          {errorOnInitialMessage && (
+          {displayRetry && (
             <Button
               onClick={retryPrompt}
               design="Emphasized"

src/components/KymaCompanion/components/Chat/messages/Message.tsx

@@ -24,6 +24,7 @@ export interface MessageChunk {
       }[];
       next: string;
     };
+    error?: string | null;
   };
 }
 

src/components/KymaCompanion/components/KymaCompanion.tsx

@@ -9,6 +9,11 @@ import {
 import { Chat, MessageType } from './Chat/Chat';
 import './KymaCompanion.scss';
 
+export interface AIError {
+  message: string | null;
+  displayRetry: boolean;
+}
+
 export default function KymaCompanion() {
   const { t } = useTranslation();
 
@@ -38,13 +43,19 @@ export default function KymaCompanion() {
   const [chatHistory, setChatHistory] = useState<MessageType[]>(
     initialChatHistory,
   );
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<AIError>({
+    message: null,
+    displayRetry: false,
+  });
 
   function handleRefresh() {
     setChatHistory(() => {
       return initialChatHistory;
     });
-    setError(null);
+    setError({
+      message: null,
+      displayRetry: false,
+    });
     setIsReset(true);
   }