From 0064c30986d82b87f232fa8cc4d6323fa99baba8 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Fri, 10 Apr 2026 12:48:06 +0530 Subject: [PATCH 1/3] fix: add troubleshoot button to error messages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a "Troubleshoot this" button inside error alerts that sends the error message to AI for troubleshooting assistance. The button only appears for actual errors (not warnings or credit errors). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- frontend/src/ide/chat-ai/Conversation.jsx | 11 ++++++++++- .../src/ide/chat-ai/DisplayErrorMessages.jsx | 19 ++++++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/frontend/src/ide/chat-ai/Conversation.jsx b/frontend/src/ide/chat-ai/Conversation.jsx index 62921cd..5cc70f2 100644 --- a/frontend/src/ide/chat-ai/Conversation.jsx +++ b/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} /> {isLastConversation ?
: } diff --git a/frontend/src/ide/chat-ai/DisplayErrorMessages.jsx b/frontend/src/ide/chat-ai/DisplayErrorMessages.jsx index 5a02727..804b810 100644 --- a/frontend/src/ide/chat-ai/DisplayErrorMessages.jsx +++ b/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 = []; @@ -53,6 +55,19 @@ const DisplayErrorMessages = memo(function DisplayErrorMessages({ } type={showAsWarning ? "warning" : "error"} className="width-100" + description={ + !showAsWarning && onTroubleshoot ? ( + + ) : null + } />
); @@ -77,12 +92,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 }; From 48317c108ac7743559c368e81e13995a7425aa04 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Fri, 10 Apr 2026 13:03:14 +0530 Subject: [PATCH 2/3] fix: add text guard to prevent undefined error in troubleshoot button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Prevent button from rendering when socketError is a plain string, which would result in text being undefined. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- frontend/src/ide/chat-ai/DisplayErrorMessages.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/ide/chat-ai/DisplayErrorMessages.jsx b/frontend/src/ide/chat-ai/DisplayErrorMessages.jsx index 804b810..c85d2a5 100644 --- a/frontend/src/ide/chat-ai/DisplayErrorMessages.jsx +++ b/frontend/src/ide/chat-ai/DisplayErrorMessages.jsx @@ -56,7 +56,7 @@ const DisplayErrorMessages = memo(function DisplayErrorMessages({ type={showAsWarning ? "warning" : "error"} className="width-100" description={ - !showAsWarning && onTroubleshoot ? ( + !showAsWarning && onTroubleshoot && text ? ( + )} } type={showAsWarning ? "warning" : "error"} className="width-100" - description={ - !showAsWarning && onTroubleshoot && text ? ( - - ) : null - } /> );