Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 3 additions & 98 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,62 +1,19 @@
import { useState, useEffect } from 'react'
import './App.css'

// Import the OpenHands SDK
import {
RemoteConversation,
RemoteWorkspace,
HttpClient,
AgentExecutionStatus,
EventSortOrder
} from '@openhands/agent-server-typescript-client'

// Import settings components
import { SettingsModal } from './components/SettingsModal'
import { ConversationManager } from './components/ConversationManager'
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
try {
// Check that all main classes are available
const classes = {
RemoteConversation: typeof RemoteConversation,
RemoteWorkspace: typeof RemoteWorkspace,
HttpClient: typeof HttpClient,
AgentExecutionStatus: typeof AgentExecutionStatus,
EventSortOrder: typeof EventSortOrder,
}

// Check that enums have expected values
const enumValues = {
AgentExecutionStatus: Object.keys(AgentExecutionStatus),
EventSortOrder: Object.keys(EventSortOrder),
}

setSdkInfo({
classes,
enumValues,
importTime: new Date().toISOString(),
})

setSdkStatus('βœ… SDK imported successfully!')
} catch (error) {
setSdkStatus(`❌ SDK import failed: ${error}`)
console.error('SDK import error:', error)
}
}, [])

return (
<div className="App">
<div>
<div className="app-header">
<h1>OpenHands SDK Example</h1>
<h1>OpenHands Conversation Manager</h1>
<button className="settings-button" onClick={openModal}>
βš™οΈ Settings
</button>
Expand All @@ -68,59 +25,7 @@ function App() {
</div>
)}

<div className="card">
<h2>SDK Import Status</h2>
<p className="status">{sdkStatus}</p>

{sdkInfo && (
<div className="sdk-info">
<h3>Available Classes:</h3>
<ul>
{Object.entries(sdkInfo.classes).map(([name, type]) => (
<li key={name}>
<strong>{name}</strong>: {type as string}
</li>
))}
</ul>

<h3>Enum Values:</h3>
<div className="enums">
<div>
<strong>AgentExecutionStatus:</strong>
<ul>
{sdkInfo.enumValues.AgentExecutionStatus.map((value: string) => (
<li key={value}>{value}</li>
))}
</ul>
</div>
<div>
<strong>EventSortOrder:</strong>
<ul>
{sdkInfo.enumValues.EventSortOrder.map((value: string) => (
<li key={value}>{value}</li>
))}
</ul>
</div>
</div>

<p className="import-time">
<small>Imported at: {sdkInfo.importTime}</small>
</p>
</div>
)}
</div>

<div className="card">
<h2>Hello World from React + TypeScript + OpenHands SDK!</h2>
<p>
This is a basic React application that successfully imports and uses the
OpenHands Agent Server TypeScript Client SDK.
</p>
<p>
The SDK is built locally and linked as a file dependency, demonstrating
that the build process works correctly.
</p>
</div>
<ConversationManager />

<SettingsModal
isOpen={isModalOpen}
Expand Down
Loading