Axon 1098 investigate react redux for state management

package.json

@@ -1482,6 +1482,7 @@
         "@mui/material": "^5.18.0",
         "@mui/styles": "^5.18.0",
         "@mui/utils": "^5.17.1",
+        "@reduxjs/toolkit": "^2.9.0",
         "@segment/analytics-node": "^2.1.3",
         "@speed-highlight/core": "^1.2.7",
         "@vscode/codicons": "^0.0.36",
@@ -1538,6 +1539,7 @@
         "react-dropzone": "^14.3.8",
         "react-editext": "7.0.0",
         "react-hook-form": "^7.60.0",
+        "react-redux": "^9.2.0",
         "react-uid": "^2.2.0",
         "scheduler": "^0.19.0",
         "semver": "^7.7.2",

src/react/atlascode/rovo-dev/common/common.tsx

@@ -41,7 +41,6 @@ export const renderChatHistory = (
     msg: ChatMessage,
     index: number,
     openFile: OpenFileFunc,
-    isRetryAfterErrorButtonEnabled: (uid: string) => boolean,
     retryAfterError: () => void,
 ) => {
     switch (msg.source) {
@@ -54,13 +53,7 @@ export const renderChatHistory = (
                 return <ToolReturnParsedItem msg={message} openFile={openFile} />;
             });
         case 'RovoDevError':
-            return (
-                <ErrorMessageItem
-                    msg={msg}
-                    isRetryAfterErrorButtonEnabled={isRetryAfterErrorButtonEnabled}
-                    retryAfterError={retryAfterError}
-                />
-            );
+            return <ErrorMessageItem msg={msg} retryAfterError={retryAfterError} />;
         case 'RovoDev':
         case 'User':
             return <ChatMessageItem msg={msg} />;

src/react/atlascode/rovo-dev/common/errorMessage.tsx

@@ -2,15 +2,17 @@ import StatusErrorIcon from '@atlaskit/icon/core/error';
 import StatusInfoIcon from '@atlaskit/icon/core/information';
 import StatusWarningIcon from '@atlaskit/icon/core/warning';
 import React, { useCallback } from 'react';
+import { useAppSelector } from 'src/react/store/hooks';
 
 import { chatMessageStyles, errorMessageStyles, inChatButtonStyles, messageContentStyles } from '../rovoDevViewStyles';
 import { ErrorMessage } from '../utils';
 
 export const ErrorMessageItem: React.FC<{
     msg: ErrorMessage;
-    isRetryAfterErrorButtonEnabled: (uid: string) => boolean;
     retryAfterError: () => void;
-}> = ({ msg, isRetryAfterErrorButtonEnabled, retryAfterError }) => {
+}> = ({ msg, retryAfterError }) => {
+    const retryAfterErrorEnabled = useAppSelector((state) => state.chatStream.retryAfterErrorEnabled);
+
     const getColor = useCallback(() => {
         switch (msg.type) {
             case 'error':
@@ -33,6 +35,11 @@ export const ErrorMessageItem: React.FC<{
         }
     }, [msg.type, msg.title]);
 
+    const isRetryAfterErrorButtonEnabled = React.useCallback(
+        (uid: string) => retryAfterErrorEnabled === uid,
+        [retryAfterErrorEnabled],
+    );
+
     return (
         <div style={{ ...chatMessageStyles, ...errorMessageStyles }}>
             <div style={{ display: 'flex', flexDirection: 'row' }}>