Merge pull request #8 from All-Hands-AI/add-settings-modal

Add settings modal to React example

Author: rbren

example/src/App.css

@@ -1,3 +1,32 @@
+:root {
+  /* Color variables for light mode */
+  --card-bg: #ffffff;
+  --border-color: #e0e0e0;
+  --border-light: #f0f0f0;
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --primary-color: #646cff;
+  --hover-bg: #f5f5f5;
+  --code-bg: #f8f9fa;
+  --error-color: #d32f2f;
+  --warning-color: #f57c00;
+  --info-bg: #e3f2fd;
+  --info-border: #2196f3;
+  --info-text: #1976d2;
+  
+  /* Dark mode variables */
+  --card-bg-dark: #2a2a2a;
+  --border-color-dark: #404040;
+  --border-light-dark: #353535;
+  --text-primary-dark: #ffffff;
+  --text-secondary-dark: #cccccc;
+  --hover-bg-dark: #3a3a3a;
+  --code-bg-dark: #1e1e1e;
+  --info-bg-dark: #1a237e;
+  --info-border-dark: #3f51b5;
+  --info-text-dark: #90caf9;
+}
+
 #root {
   max-width: 1280px;
   margin: 0 auto;
@@ -9,6 +38,49 @@
   padding: 2rem;
 }
 
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.app-header h1 {
+  margin: 0;
+}
+
+.settings-button {
+  background-color: #646cff;
+  color: white;
+  border: none;
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.2s;
+}
+
+.settings-button:hover {
+  background-color: #535bf2;
+}
+
+.welcome-message {
+  background-color: #e3f2fd;
+  border: 1px solid #2196f3;
+  border-radius: 4px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.welcome-message p {
+  margin: 0;
+  color: #1976d2;
+  font-weight: 500;
+}
+
+
+
 .card {
   padding: 2em;
   margin: 1em 0;
@@ -73,4 +145,21 @@
     border-top-color: #333;
     color: #ccc;
   }
+  
+  .welcome-message {
+    background-color: #1a237e;
+    border-color: #3f51b5;
+  }
+  
+  .welcome-message p {
+    color: #90caf9;
+  }
+  
+  .settings-info {
+    background-color: #2a2a2a;
+  }
+  
+  .settings-info h3 {
+    color: #fff;
+  }
 }

example/src/App.tsx

@@ -10,9 +10,16 @@ import {
   EventSortOrder 
 } from '@openhands/agent-server-typescript-client'
 
+// Import settings components
+import { SettingsModal } from './components/SettingsModal'
+import { useSettings } from './contexts/SettingsContext'
+
 function App() {
   const [sdkStatus, setSdkStatus] = useState<string>('Loading...')
   const [sdkInfo, setSdkInfo] = useState<any>(null)
+  
+  // Use settings context
+  const { settings, updateSettings, isModalOpen, openModal, closeModal, isFirstVisit } = useSettings()
 
   useEffect(() => {
     // Test that the SDK imports work correctly
@@ -48,7 +55,19 @@ function App() {
   return (
     <div className="App">
       <div>
-        <h1>OpenHands SDK Example</h1>
+        <div className="app-header">
+          <h1>OpenHands SDK Example</h1>
+          <button className="settings-button" onClick={openModal}>
+            ⚙️ Settings
+          </button>
+        </div>
+        
+        {isFirstVisit && (
+          <div className="welcome-message">
+            <p>👋 Welcome! Please configure your settings to get started.</p>
+          </div>
+        )}
+        
         <div className="card">
           <h2>SDK Import Status</h2>
           <p className="status">{sdkStatus}</p>
@@ -102,6 +121,13 @@ function App() {
             that the build process works correctly.
           </p>
         </div>
+        
+        <SettingsModal
+          isOpen={isModalOpen}
+          onClose={closeModal}
+          onSave={updateSettings}
+          initialSettings={settings}
+        />
       </div>
     </div>
   )