[Agent Builder] persist error steps basic example (#245743)

Author: chrisbmar

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_rounds/round_error/round_error.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useState } from 'react';
+import type { ConversationRoundStep } from '@kbn/onechat-common';
 import { isContextLengthExceededAgentError } from '@kbn/onechat-common';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@@ -14,9 +15,11 @@ import { RoundErrorThinkingTitle } from './round_error_thinking_title';
 import { ContextExceededRoundError } from './context_exceeded_round_error';
 import { GenericRoundError } from './generic_round_error';
 import { RoundErrorThinkingPanel } from './round_error_thinking_panel';
+import { RoundSteps } from '../round_thinking/steps/round_steps';
 
 interface RoundErrorProps {
   error: unknown;
+  errorSteps: ConversationRoundStep[];
   onRetry: () => void;
 }
 
@@ -29,7 +32,7 @@ const labels = {
   }),
 };
 
-export const RoundError: React.FC<RoundErrorProps> = ({ error, onRetry }) => {
+export const RoundError: React.FC<RoundErrorProps> = ({ error, errorSteps, onRetry }) => {
   const { euiTheme } = useEuiTheme();
   const [showErrorThinkingPanel, setShowErrorThinkingPanel] = useState(false);
 
@@ -52,6 +55,7 @@ export const RoundError: React.FC<RoundErrorProps> = ({ error, onRetry }) => {
     >
       {showErrorThinkingPanel ? (
         <RoundErrorThinkingPanel onClose={toggleErrorThinkingPanel}>
+          <RoundSteps isLoading={false} steps={errorSteps} />
           {errorContent}
         </RoundErrorThinkingPanel>
       ) : (

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_rounds/round_layout.tsx

@@ -38,21 +38,21 @@ export const RoundLayout: React.FC<RoundLayoutProps> = ({
 
   const { isResponseLoading, error, retry: retrySendMessage } = useSendMessage();
 
+  const isLoadingCurrentRound = isResponseLoading && isCurrentRound;
+  const isErrorCurrentRound = Boolean(error) && isCurrentRound;
+
   useEffect(() => {
-    if (isCurrentRound && isResponseLoading) {
+    // Pending rounds and error rounds should have a min-height to match the scroll container height
+    if ((isCurrentRound && isResponseLoading) || isErrorCurrentRound) {
       setRoundContainerMinHeight(scrollContainerHeight);
-    } else if (!isCurrentRound) {
+    } else {
       setRoundContainerMinHeight(0);
     }
-  }, [isCurrentRound, isResponseLoading, scrollContainerHeight]);
+  }, [isCurrentRound, isResponseLoading, scrollContainerHeight, isErrorCurrentRound]);
 
   const roundContainerStyles = css`
     ${roundContainerMinHeight > 0 ? `min-height: ${roundContainerMinHeight}px;` : 'flex-grow: 0;'};
   `;
-
-  const isLoadingCurrentRound = isResponseLoading && isCurrentRound;
-  const isErrorCurrentRound = Boolean(error) && isCurrentRound;
-
   return (
     <EuiFlexGroup
       direction="column"
@@ -68,7 +68,7 @@ export const RoundLayout: React.FC<RoundLayoutProps> = ({
       {/* Thinking */}
       <EuiFlexItem grow={false}>
         {isErrorCurrentRound ? (
-          <RoundError error={error} onRetry={retrySendMessage} />
+          <RoundError error={error} errorSteps={rawRound.steps} onRetry={retrySendMessage} />
         ) : (
           <RoundThinking steps={steps} isLoading={isLoadingCurrentRound} rawRound={rawRound} />
         )}

x-pack/platform/plugins/shared/onechat/public/application/context/send_message/send_message_context.tsx

@@ -6,14 +6,16 @@
  */
 
 import React, { createContext, useContext } from 'react';
+import type { ConversationRoundStep } from '@kbn/onechat-common';
 import { useSendMessageMutation } from './use_send_message_mutation';
 import { useConnectorSelection } from '../../hooks/chat/use_connector_selection';
 
 interface SendMessageState {
   sendMessage: ({ message }: { message: string }) => void;
   isResponseLoading: boolean;
-  error: unknown;
   pendingMessage: string | undefined;
+  error: unknown;
+  errorSteps: ConversationRoundStep[];
   agentReasoning: string | null;
   retry: () => void;
   canCancel: boolean;
@@ -34,8 +36,9 @@ export const SendMessageProvider = ({ children }: { children: React.ReactNode })
   const {
     sendMessage,
     isResponseLoading,
-    error,
     pendingMessage,
+    error,
+    errorSteps,
     agentReasoning,
     retry,
     canCancel,
@@ -48,8 +51,9 @@ export const SendMessageProvider = ({ children }: { children: React.ReactNode })
       value={{
         sendMessage,
         isResponseLoading,
-        error,
         pendingMessage,
+        error,
+        errorSteps,
         agentReasoning,
         retry,
         canCancel,

x-pack/platform/plugins/shared/onechat/public/application/context/send_message/use_pending_message_state.ts

@@ -10,7 +10,6 @@ import { useState } from 'react';
 import { newConversationId } from '../../utils/new_conversation';
 
 interface PendingMessageState {
-  error?: unknown;
   pendingMessage?: string;
 }
 
@@ -44,15 +43,5 @@ export const usePendingMessageState = ({ conversationId }: { conversationId?: st
         delete state.pendingMessage;
       });
     },
-    setError: (error: unknown) => {
-      updateState((state) => {
-        state.error = error;
-      });
-    },
-    removeError: () => {
-      updateState((state) => {
-        delete state.error;
-      });
-    },
   };
 };

x-pack/platform/plugins/shared/onechat/public/application/context/send_message/use_send_message_mutation.ts

@@ -6,10 +6,11 @@
  */
 
 import { useMutation } from '@kbn/react-query';
-import { useRef, useState, useMemo } from 'react';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { toToolMetadata } from '@kbn/onechat-browser/tools/browser_api_tool';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useAgentId } from '../../hooks/use_conversation';
+import type { ConversationRoundStep } from '@kbn/onechat-common/chat/conversation';
+import { useAgentId, useConversation } from '../../hooks/use_conversation';
 import { useConversationContext } from '../conversation/conversation_context';
 import { useConversationId } from '../conversation/use_conversation_id';
 import { useOnechatServices } from '../../hooks/use_onechat_service';
@@ -32,10 +33,26 @@ export const useSendMessageMutation = ({ connectorId }: UseSendMessageMutationPr
   const [isResponseLoading, setIsResponseLoading] = useState(false);
   const [agentReasoning, setAgentReasoning] = useState<string | null>(null);
   const conversationId = useConversationId();
+  const { conversation } = useConversation();
   const isMutatingNewConversationRef = useRef(false);
   const agentId = useAgentId();
   const messageControllerRef = useRef<AbortController | null>(null);
 
+  const [error, setError] = useState<unknown | null>(null);
+  const [errorSteps, setErrorSteps] = useState<ConversationRoundStep[]>([]);
+
+  const removeError = useCallback(() => {
+    setError(null);
+    setErrorSteps([]);
+  }, []);
+
+  useEffect(() => {
+    // Clear errors any time conversation id changes - we do not persist it.
+    if (conversationId) {
+      removeError();
+    }
+  }, [conversationId, removeError]);
+
   const browserApiToolsMetadata = useMemo(() => {
     if (!browserApiTools) return undefined;
     return browserApiTools.map(toToolMetadata);
@@ -46,11 +63,9 @@ export const useSendMessageMutation = ({ connectorId }: UseSendMessageMutationPr
   }, [services.notifications?.toasts]);
 
   const {
-    pendingMessageState: { error, pendingMessage },
+    pendingMessageState: { pendingMessage },
     setPendingMessage,
     removePendingMessage,
-    setError,
-    removeError,
   } = usePendingMessageState({ conversationId });
   const subscribeToChatEvents = useSubscribeToChatEvents({
     setAgentReasoning,
@@ -115,6 +130,10 @@ export const useSendMessageMutation = ({ connectorId }: UseSendMessageMutationPr
       setIsResponseLoading(false);
       reportConverseError(err, { connectorId });
       setError(err);
+      const steps = conversation?.rounds?.at(-1)?.steps;
+      if (steps) {
+        setErrorSteps(steps);
+      }
       // When we error, we should immediately remove the round rather than waiting for a refetch after invalidation
       // Otherwise, the error round and the optimistic round will be visible together.
       conversationActions.removeOptimisticRound();
@@ -134,6 +153,7 @@ export const useSendMessageMutation = ({ connectorId }: UseSendMessageMutationPr
     sendMessage: mutate,
     isResponseLoading,
     error,
+    errorSteps,
     pendingMessage,
     agentReasoning,
     retry: () => {

x-pack/platform/plugins/shared/onechat/public/application/hooks/use_conversation.ts

@@ -96,16 +96,20 @@ export const useConversationTitle = () => {
 
 export const useConversationRounds = () => {
   const { conversation } = useConversation();
-  const { pendingMessage, error } = useSendMessage();
+  const { pendingMessage, error, errorSteps } = useSendMessage();
 
   const conversationRounds = useMemo(() => {
     const rounds = conversation?.rounds ?? [];
     if (Boolean(error) && pendingMessage) {
-      const pendingRound = createNewRound({ userMessage: pendingMessage, roundId: '' });
+      const pendingRound = createNewRound({
+        userMessage: pendingMessage,
+        roundId: '',
+        steps: errorSteps,
+      });
       return [...rounds, pendingRound];
     }
     return rounds;
-  }, [conversation?.rounds, error, pendingMessage]);
+  }, [conversation?.rounds, error, errorSteps, pendingMessage]);
 
   return conversationRounds;
 };

x-pack/platform/plugins/shared/onechat/public/application/utils/new_conversation.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { Conversation, ConversationRound } from '@kbn/onechat-common';
+import type { Conversation, ConversationRound, ConversationRoundStep } from '@kbn/onechat-common';
 import type { Attachment } from '@kbn/onechat-common/attachments';
 import { oneChatDefaultAgentId } from '@kbn/onechat-common';
 
@@ -29,16 +29,18 @@ export const createNewRound = ({
   userMessage,
   attachments,
   roundId = pendingRoundId,
+  steps = [],
 }: {
   userMessage: string;
   attachments?: Attachment[];
   roundId?: string;
+  steps?: ConversationRoundStep[];
 }): ConversationRound => {
   return {
     id: roundId,
     input: { message: userMessage, attachments },
     response: { message: '' },
-    steps: [],
+    steps,
     started_at: new Date().toISOString(),
     time_to_first_token: 0,
     time_to_last_token: 0,