Styled Box - Copy this React, Mui Component to your project
"Analyze and modify the provided RagChatBotSettings component to create a dialog that matches the style and theme of OpenAI or RadixUI playground components. Focus on the following aspects: Color Scheme: Background: #ffffff for light mode, #0f172a for dark mode Text: #1a202c for light mode, #e2e8f0 for dark mode Primary: #3b82f6 (blue) Secondary: #64748b (slate) Accent: #22c55e (green) Typography: Font family: Inter, system-ui, sans-serif Font sizes: 14px for body text, 16px for labels, 20px for headings Layout: Use a grid system with 12 columns Implement responsive design for mobile, tablet, and desktop Maintain consistent spacing (8px increments) Input Components: Text fields: Border: 1px solid #e2e8f0 (light mode), #334155 (dark mode) Border radius: 6px Padding: 8px 12px Select: Same styling as text fields Custom dropdown icon Sliders: Track: #e2e8f0 (light mode), #334155 (dark mode) Thumb: #3b82f6 Height: 4px Buttons: Background: #3b82f6 Text color: #ffffff Border radius: 6px Padding: 8px 16px Hover effect: Slight darkening of background color Interactive Styling: Hover: Inputs: Border color changes to #3b82f6 Buttons: Background darkens slightly Focus: Inputs: 2px solid #3b82f6 outline Buttons: 2px solid #3b82f6 outline offset by 2px Modal: Background: Same as main background Box shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) Border radius: 8px Functionality: Implement form validation using react-hook-form Add error messages for invalid inputs Implement dark mode toggle Add animation for modal open/close Implement debounced onChange for sliders Data List for Input Components: Response Format: ['Text', 'JSON Object', 'JSON Schema'] Temperature: Range 0 to 1, step 0.01 Top P: Range 0 to 1, step 0.01 Frequency Penalty: Range 0 to 1, step 0.01 Presence Penalty: Range 0 to 1, step 0.01 Max Tokens: Positive integer Stop Sequences: Comma-separated string Ensure the component is accessible, performant, and follows React best practices. Use styled-components for styling, and consider using a theme provider for easy theme switching."
