FIX: Add Troubleshoot Button to Error Messages

frontend/src/ide/chat-ai/Conversation.jsx

@@ -32,6 +32,15 @@ const Conversation = memo(function Conversation({
     setDetectedAction(actionType);
   }, []);
 
+  // Handle troubleshoot button click from error messages
+  const handleTroubleshoot = useCallback(
+    (errorMessage) => {
+      const prompt = `There was an error encountered. We have the detailed error message below. Please see how we can fix this:\n\n${errorMessage}`;
+      savePrompt(prompt, selectedChatIntent);
+    },
+    [savePrompt, selectedChatIntent]
+  );
+
   // Create UI action object based on detected action
   const uiAction = useMemo(() => {
     if (!detectedAction) return null;
@@ -168,7 +177,7 @@ const Conversation = memo(function Conversation({
           socketError={message?.error_msg}
           promptError={message?.prompt_error_message}
           transformError={message?.transformation_error_message}
-          errorState={message?.error_state}
+          onTroubleshoot={handleTroubleshoot}
         />
       </Space>
       {isLastConversation ? <div className="pad-12" /> : <Divider />}

frontend/src/ide/chat-ai/DisplayErrorMessages.jsx

@@ -1,6 +1,7 @@
 import { memo, useMemo } from "react";
 import PropTypes from "prop-types";
-import { Alert, Space } from "antd";
+import { Alert, Button, Space } from "antd";
+import { ToolOutlined } from "@ant-design/icons";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -16,6 +17,7 @@ const DisplayErrorMessages = memo(function DisplayErrorMessages({
   socketError,
   promptError,
   transformError,
+  onTroubleshoot,
 }) {
   const errors = useMemo(() => {
     const list = [];
@@ -49,6 +51,17 @@ const DisplayErrorMessages = memo(function DisplayErrorMessages({
                   <ReactMarkdown remarkPlugins={[remarkGfm]}>
                     {text}
                   </ReactMarkdown>
+                  {!showAsWarning && onTroubleshoot && text && (
+                    <Button
+                      type="link"
+                      size="small"
+                      icon={<ToolOutlined />}
+                      onClick={() => onTroubleshoot(text)}
+                      style={{ padding: 0, marginTop: 8 }}
+                    >
+                      Troubleshoot this
+                    </Button>
+                  )}
                 </div>
               }
               type={showAsWarning ? "warning" : "error"}
@@ -77,12 +90,14 @@ DisplayErrorMessages.propTypes = {
   transformError: PropTypes.shape({
     error_message: PropTypes.string,
   }),
+  onTroubleshoot: PropTypes.func,
 };
 
 DisplayErrorMessages.defaultProps = {
   socketError: null,
   promptError: null,
   transformError: null,
+  onTroubleshoot: null,
 };
 
 export { DisplayErrorMessages };