fix: Handle partial response error correctly (#4051)

* fix: hotfix, buffer incomplete JSON objects before parsing

* test: adjust mocked response to exactly equal real-world response

* fix: small adjustment to backend error handling

* fix: display backend's errr titlw

* add test cases for buffered streaming in edge cases

* fix: context label being covered by code panel

* fix: move helpers to separate file

* fix: display error notice and full responses for partial AI failure

* test: cover code changes in tests

* fix: code clean-up, bug fix and increased test coverage

Author: chriskari

public/i18n/en.yaml

@@ -786,6 +786,7 @@ kyma-companion:
     internal_server_error-message: Couldn't fetch response from Joule because of network errors.
     chat-error: An error occurred
     suggestions-error: No suggestions available
+    partial-ai-failure: Some tasks encountered errors. The results might be incomplete or not fully actionable.
     http-error: Response status code is {{statusCode}}. Retrying {{attempt}}.
     http-error-no-retry: Response status code is {{statusCode}}.
   input-tokens:

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

@@ -22,8 +22,8 @@ import {
   ErrorType,
   MessageChunk,
   Message as MessageType,
-  chatGroupHelpers,
 } from './types';
+import { chatHelpers } from './chatHelper';
 import './Chat.scss';
 import FeedbackMessage from './FeedbackMessage/FeedbackMessage';
 
@@ -80,13 +80,13 @@ export const Chat = ({
   const addMessage = (message: MessageType) => {
     const currentContext = getCurrentContext();
     setChatHistory(prevGroups =>
-      chatGroupHelpers.addMessage(prevGroups, message, currentContext),
+      chatHelpers.addMessage(prevGroups, message, currentContext),
     );
   };
 
   const updateLatestMessage = (updates: Partial<MessageType>) => {
     setChatHistory(prevGroups =>
-      chatGroupHelpers.updateLatestMessage(prevGroups, updates),
+      chatHelpers.updateLatestMessage(prevGroups, updates),
     );
   };
 
@@ -96,7 +96,7 @@ export const Chat = ({
     isFeedback: boolean,
   ) => {
     setChatHistory(prevGroups =>
-      chatGroupHelpers.concatMsgToLatestMessage(
+      chatHelpers.concatMsgToLatestMessage(
         prevGroups,
         response,
         isLoading,
@@ -106,39 +106,53 @@ export const Chat = ({
   };
 
   const removeLastMessage = () => {
-    setChatHistory(prevGroups =>
-      chatGroupHelpers.removeLastMessage(prevGroups),
-    );
+    setChatHistory(prevGroups => chatHelpers.removeLastMessage(prevGroups));
   };
 
   const setErrorOnLastUserMsg = () => {
-    setChatHistory(prevGroups =>
-      chatGroupHelpers.setErrorOnLastUserMsg(prevGroups),
-    );
+    setChatHistory(prevGroups => chatHelpers.setErrorOnLastUserMsg(prevGroups));
   };
 
   const handleChatResponse = (response: MessageChunk) => {
     const isLoading = response?.data?.answer?.next !== '__end__';
     const isFeedback = response?.data?.answer?.is_feedback === true;
 
     if (!isLoading) {
-      const finalTask = response.data.answer?.tasks?.at(-1);
-      const hasError = finalTask?.status === 'error';
+      const hasError =
+        response.data.answer?.tasks?.some(task => task.status === 'error') ??
+        false;
 
       if (hasError) {
         const allTasksError =
           response.data.answer?.tasks?.every(task => task.status === 'error') ??
           false;
-        const displayRetry = response.data.error !== null || allTasksError;
-        removeLastMessage();
-        handleError(
-          {
-            type: ErrorType.FATAL,
-            message: response.data.answer.content,
-          },
-          displayRetry,
-        );
-        return;
+        if (!allTasksError) {
+          // handle partial error
+          updateLatestMessage({ partialAIFailure: true });
+          setFollowUpLoading();
+          getFollowUpQuestions({
+            sessionID,
+            handleFollowUpQuestions,
+            handleFollowUpError,
+            clusterUrl: cluster.currentContext.cluster.cluster.server,
+            token: authData.token,
+            certificateAuthorityData:
+              cluster.currentContext.cluster.cluster[
+                'certificate-authority-data'
+              ],
+          });
+        } else {
+          const displayRetry = response.data.error !== null || allTasksError;
+          removeLastMessage();
+          handleError(
+            {
+              type: ErrorType.FATAL,
+              message: response.data.answer.content,
+            },
+            displayRetry,
+          );
+          return;
+        }
       } else if (isFeedback) {
         setLoading(false);
       } else {
@@ -185,7 +199,6 @@ export const Chat = ({
         setLoading(false);
         if (errResponse.maxAttempts === 1) {
           updateLatestMessage({
-            author: Author.AI,
             messageChunks: [
               {
                 data: {
@@ -215,7 +228,6 @@ export const Chat = ({
         });
         setLoading(true);
         updateLatestMessage({
-          author: Author.AI,
           messageChunks: [
             {
               data: {
@@ -234,7 +246,7 @@ export const Chat = ({
   };
 
   const retryPreviousPrompt = () => {
-    const previousPrompt = chatGroupHelpers.findLastUserPrompt(chatHistory);
+    const previousPrompt = chatHelpers.findLastUserPrompt(chatHistory);
     if (previousPrompt) {
       removeLastMessage();
       sendPrompt(previousPrompt);
@@ -311,7 +323,7 @@ export const Chat = ({
         // Update the context of the first group
         const currentContext = getCurrentContext();
         setChatHistory(prevGroups =>
-          chatGroupHelpers.updateFirstGroupContext(prevGroups, currentContext),
+          chatHelpers.updateFirstGroupContext(prevGroups, currentContext),
         );
         updateLatestMessage({
           messageChunks: [
@@ -390,7 +402,8 @@ export const Chat = ({
                             author={message.author}
                             messageChunks={message.messageChunks}
                             isLoading={message.isLoading}
-                            hasError={message.hasError ?? false}
+                            partialAIFailure={message.partialAIFailure}
+                            hasError={message.hasError}
                             isLatestMessage={isLastMessage}
                           />
                           {isLastMessage && !message.isLoading && (
@@ -409,7 +422,7 @@ export const Chat = ({
                       key={`${groupIndex}-${messageIndex}`}
                       messageChunks={message.messageChunks}
                       isLoading={message.isLoading}
-                      hasError={message.hasError ?? false}
+                      hasError={message.hasError}
                       isLatestMessage={isLastMessage}
                     />
                   );

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

@@ -12,7 +12,8 @@ interface MessageProps {
   author: Author;
   messageChunks: MessageChunk[];
   isLoading: boolean;
-  hasError: boolean;
+  partialAIFailure?: boolean;
+  hasError?: boolean;
   isLatestMessage: boolean;
   disableFormatting?: boolean;
 }
@@ -21,7 +22,8 @@ export default function Message({
   author,
   messageChunks,
   isLoading,
-  hasError,
+  partialAIFailure = false,
+  hasError = false,
   isLatestMessage,
 }: MessageProps): JSX.Element {
   const currentTheme = useRecoilValue(themeState);
@@ -53,6 +55,14 @@ export default function Message({
       >
         {segmentedText}
       </div>
+      {partialAIFailure && (
+        <div className={'message-error ' + className}>
+          <Text className="error-text">
+            {t('kyma-companion.error.partial-ai-failure')}
+          </Text>
+          <Icon name="error" design="Negative" className="error-icon" />
+        </div>
+      )}
       {displayError && (
         <div className={'message-error ' + className}>
           <Text className="error-text">