diff --git a/package-lock.json b/package-lock.json index 3d51519..623c2d6 100755 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "claude-code-ui", - "version": "1.2.0", + "version": "1.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "claude-code-ui", - "version": "1.2.0", + "version": "1.4.0", "license": "MIT", "dependencies": { "@anthropic-ai/claude-code": "^1.0.24", diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx index 2d898eb..d61ddd3 100755 --- a/src/components/ChatInterface.jsx +++ b/src/components/ChatInterface.jsx @@ -26,6 +26,88 @@ import ClaudeStatus from './ClaudeStatus'; import { MicButton } from './MicButton.jsx'; import { api } from '../utils/api'; +// Safe localStorage utility to handle quota exceeded errors +const safeLocalStorage = { + setItem: (key, value) => { + try { + // For chat messages, implement compression and size limits + if (key.startsWith('chat_messages_') && typeof value === 'string') { + try { + const parsed = JSON.parse(value); + // Limit to last 50 messages to prevent storage bloat + if (Array.isArray(parsed) && parsed.length > 50) { + console.warn(`Truncating chat history for ${key} from ${parsed.length} to 50 messages`); + const truncated = parsed.slice(-50); + value = JSON.stringify(truncated); + } + } catch (parseError) { + console.warn('Could not parse chat messages for truncation:', parseError); + } + } + + localStorage.setItem(key, value); + } catch (error) { + if (error.name === 'QuotaExceededError') { + console.warn('localStorage quota exceeded, clearing old data'); + // Clear old chat messages to free up space + const keys = Object.keys(localStorage); + const chatKeys = keys.filter(k => k.startsWith('chat_messages_')).sort(); + + // Remove oldest chat data first, keeping only the 3 most recent projects + if (chatKeys.length > 3) { + chatKeys.slice(0, chatKeys.length - 3).forEach(k => { + localStorage.removeItem(k); + console.log(`Removed old chat data: ${k}`); + }); + } + + // If still failing, clear draft inputs too + const draftKeys = keys.filter(k => k.startsWith('draft_input_')); + draftKeys.forEach(k => { + localStorage.removeItem(k); + }); + + // Try again with reduced data + try { + localStorage.setItem(key, value); + } catch (retryError) { + console.error('Failed to save to localStorage even after cleanup:', retryError); + // Last resort: Try to save just the last 10 messages + if (key.startsWith('chat_messages_') && typeof value === 'string') { + try { + const parsed = JSON.parse(value); + if (Array.isArray(parsed) && parsed.length > 10) { + const minimal = parsed.slice(-10); + localStorage.setItem(key, JSON.stringify(minimal)); + console.warn('Saved only last 10 messages due to quota constraints'); + } + } catch (finalError) { + console.error('Final save attempt failed:', finalError); + } + } + } + } else { + console.error('localStorage error:', error); + } + } + }, + getItem: (key) => { + try { + return localStorage.getItem(key); + } catch (error) { + console.error('localStorage getItem error:', error); + return null; + } + }, + removeItem: (key) => { + try { + localStorage.removeItem(key); + } catch (error) { + console.error('localStorage removeItem error:', error); + } + } +}; + // Memoized message component to prevent unnecessary re-renders const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, autoExpandTools, showRawParameters }) => { const isGrouped = prevMessage && prevMessage.type === message.type && @@ -1019,13 +1101,13 @@ const ImageAttachment = ({ file, onRemove, uploadProgress, error }) => { function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, messages, onFileOpen, onInputFocusChange, onSessionActive, onSessionInactive, onReplaceTemporarySession, onNavigateToSession, onShowSettings, autoExpandTools, showRawParameters, autoScrollToBottom, sendByCtrlEnter }) { const [input, setInput] = useState(() => { if (typeof window !== 'undefined' && selectedProject) { - return localStorage.getItem(`draft_input_${selectedProject.name}`) || ''; + return safeLocalStorage.getItem(`draft_input_${selectedProject.name}`) || ''; } return ''; }); const [chatMessages, setChatMessages] = useState(() => { if (typeof window !== 'undefined' && selectedProject) { - const saved = localStorage.getItem(`chat_messages_${selectedProject.name}`); + const saved = safeLocalStorage.getItem(`chat_messages_${selectedProject.name}`); return saved ? JSON.parse(saved) : []; } return []; @@ -1310,16 +1392,16 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess // Persist input draft to localStorage useEffect(() => { if (selectedProject && input !== '') { - localStorage.setItem(`draft_input_${selectedProject.name}`, input); + safeLocalStorage.setItem(`draft_input_${selectedProject.name}`, input); } else if (selectedProject && input === '') { - localStorage.removeItem(`draft_input_${selectedProject.name}`); + safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`); } }, [input, selectedProject]); // Persist chat messages to localStorage useEffect(() => { if (selectedProject && chatMessages.length > 0) { - localStorage.setItem(`chat_messages_${selectedProject.name}`, JSON.stringify(chatMessages)); + safeLocalStorage.setItem(`chat_messages_${selectedProject.name}`, JSON.stringify(chatMessages)); } }, [chatMessages, selectedProject]); @@ -1327,7 +1409,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess useEffect(() => { if (selectedProject) { // Always load saved input draft for the project - const savedInput = localStorage.getItem(`draft_input_${selectedProject.name}`) || ''; + const savedInput = safeLocalStorage.getItem(`draft_input_${selectedProject.name}`) || ''; if (savedInput !== input) { setInput(savedInput); } @@ -1546,7 +1628,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess // Clear persisted chat messages after successful completion if (selectedProject && latestMessage.exitCode === 0) { - localStorage.removeItem(`chat_messages_${selectedProject.name}`); + safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`); } break; @@ -1803,14 +1885,33 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess // Handle image files from drag & drop or file picker const handleImageFiles = useCallback((files) => { const validFiles = files.filter(file => { - if (!file.type.startsWith('image/')) { + try { + // Validate file object and properties + if (!file || typeof file !== 'object') { + console.warn('Invalid file object:', file); + return false; + } + + if (!file.type || !file.type.startsWith('image/')) { + return false; + } + + if (!file.size || file.size > 5 * 1024 * 1024) { + // Safely get file name with fallback + const fileName = file.name || 'Unknown file'; + setImageErrors(prev => { + const newMap = new Map(prev); + newMap.set(fileName, 'File too large (max 5MB)'); + return newMap; + }); + return false; + } + + return true; + } catch (error) { + console.error('Error validating file:', error, file); return false; } - if (file.size > 5 * 1024 * 1024) { - setImageErrors(prev => new Map(prev).set(file.name, 'File too large (max 5MB)')); - return false; - } - return true; }); if (validFiles.length > 0) { @@ -1866,7 +1967,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess }); try { - const token = localStorage.getItem('auth-token'); + const token = safeLocalStorage.getItem('auth-token'); const headers = {}; if (token) { headers['Authorization'] = `Bearer ${token}`; @@ -1929,7 +2030,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess // Get tools settings from localStorage const getToolsSettings = () => { try { - const savedSettings = localStorage.getItem('claude-tools-settings'); + const savedSettings = safeLocalStorage.getItem('claude-tools-settings'); if (savedSettings) { return JSON.parse(savedSettings); } @@ -1975,7 +2076,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess // Clear the saved draft since message was sent if (selectedProject) { - localStorage.removeItem(`draft_input_${selectedProject.name}`); + safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`); } }; diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx new file mode 100644 index 0000000..5ebe7ca --- /dev/null +++ b/src/components/ErrorBoundary.jsx @@ -0,0 +1,73 @@ +import React from 'react'; + +class ErrorBoundary extends React.Component { + constructor(props) { + super(props); + this.state = { hasError: false, error: null, errorInfo: null }; + } + + static getDerivedStateFromError(error) { + // Update state so the next render will show the fallback UI + return { hasError: true }; + } + + componentDidCatch(error, errorInfo) { + // Log the error details + console.error('ErrorBoundary caught an error:', error, errorInfo); + + // You can also log the error to an error reporting service here + this.setState({ + error: error, + errorInfo: errorInfo + }); + } + + render() { + if (this.state.hasError) { + // Fallback UI + return ( +
+
+
+
+ + + +
+

+ Something went wrong +

+
+
+

An error occurred while loading the chat interface.

+ {this.props.showDetails && this.state.error && ( +
+ Error Details + 
+                    {this.state.error.toString()}
+                    {this.state.errorInfo && this.state.errorInfo.componentStack}
+
+
+ )} +
+
+ +
+
+
+ ); + } + + return this.props.children; + } +} + +export default ErrorBoundary; \ No newline at end of file diff --git a/src/components/MainContent.jsx b/src/components/MainContent.jsx index 30d13a5..52dc236 100755 --- a/src/components/MainContent.jsx +++ b/src/components/MainContent.jsx @@ -17,6 +17,7 @@ import FileTree from './FileTree'; import CodeEditor from './CodeEditor'; import Shell from './Shell'; import GitPanel from './GitPanel'; +import ErrorBoundary from './ErrorBoundary'; function MainContent({ selectedProject, @@ -270,24 +271,26 @@ function MainContent({ {/* Content Area */}
- + + +