diff --git a/docs/deployment/helm.mdx b/docs/deployment/helm.mdx index 2644b6273..62af5591a 100644 --- a/docs/deployment/helm.mdx +++ b/docs/deployment/helm.mdx @@ -5,7 +5,7 @@ description: "Deploy Bytebot on Kubernetes using Helm charts" # Deploy Bytebot on Kubernetes with Helm -Helm provides a simple way to deploy Bytebot on Kubernetes clusters, with full control over resource allocation and configuration. +Helm provides a simple way to deploy Bytebot on Kubernetes clusters. ## Prerequisites @@ -13,49 +13,30 @@ Helm provides a simple way to deploy Bytebot on Kubernetes clusters, with full c - Helm 3.x installed - kubectl configured - 8GB+ available memory in cluster -- StorageClass for persistent volumes ## Quick Start - + ```bash git clone https://github.com/bytebot-ai/bytebot.git cd bytebot ``` - - Create a `values.yaml` file with your settings: + + Create a `values.yaml` file with at least one API key: ```yaml - # values.yaml bytebot-agent: - # Set your API keys (one or more) apiKeys: anthropic: value: "sk-ant-your-key-here" - openai: - value: "sk-your-key-here" - gemini: - value: "your-key-here" - - # Resource limits - desktop: - resources: - requests: - memory: "2Gi" - cpu: "1" - limits: - memory: "4Gi" - cpu: "2" - - # Enable ingress for external access - ui: - ingress: - enabled: true - hostname: bytebot.your-domain.com - # tls: true # Enable for HTTPS + # Optional: Add more providers + # openai: + # value: "sk-your-key-here" + # gemini: + # value: "your-key-here" ``` @@ -68,118 +49,39 @@ Helm provides a simple way to deploy Bytebot on Kubernetes clusters, with full c ``` - - ```bash - # Watch pods come up - kubectl get pods -n bytebot -w - - # Check service endpoints - kubectl get svc -n bytebot - ``` - - - If using ingress: - ```bash - # Your Bytebot UI will be available at: - https://bytebot.your-domain.com - ``` - - Or use port-forward for local access: ```bash + # Port-forward for local access kubectl port-forward -n bytebot svc/bytebot-ui 9992:9992 + # Access at http://localhost:9992 ``` -## Configuration Options +## Basic Configuration -### AI Provider Configuration +### API Keys - - - ```yaml - bytebot-agent: - # Method 1: Using the new apiKeys structure (recommended) - apiKeys: - anthropic: - useExisting: false - value: "sk-ant-your-key-here" - openai: - useExisting: false - value: "sk-your-key-here" - gemini: - useExisting: false - value: "your-key-here" - - # Method 2: Legacy approach (backward compatible) - env: - ANTHROPIC_API_KEY: "sk-ant-your-key-here" - OPENAI_API_KEY: "sk-your-key-here" - GEMINI_API_KEY: "your-key-here" - ``` - - Bytebot automatically detects available providers based on which API keys are set. Models are pre-configured within Bytebot. - - - If you're using a secrets management solution (e.g., Vault, Sealed Secrets, External Secrets Operator), you can reference existing secrets: - - ```yaml - bytebot-agent: - apiKeys: - anthropic: - useExisting: true - secretName: "my-api-keys" # Name of your existing secret - secretKey: "anthropic-key" # Key within the secret - openai: - useExisting: true - secretName: "my-api-keys" - secretKey: "openai-key" - gemini: - useExisting: true - secretName: "my-api-keys" - secretKey: "gemini-key" - ``` - - Example of creating the external secret manually: - ```bash - kubectl create secret generic my-api-keys \ - --namespace bytebot \ - --from-literal=anthropic-key="sk-ant-your-key-here" \ - --from-literal=openai-key="sk-your-key-here" \ - --from-literal=gemini-key="your-key-here" - ``` - - - ```yaml - agent: - env: - BYTEBOT_LLM_PROXY_URL: "http://litellm-proxy:4000" - - # Deploy LiteLLM separately with your model configuration - litellm: - config: | - model_list: - - model_name: claude-3-5-sonnet - litellm_params: - model: claude-3-5-sonnet-20241022 - api_key: ${ANTHROPIC_API_KEY} - - model_name: gpt-4o - litellm_params: - model: azure/gpt-4o - api_base: https://your-azure.openai.azure.com/ - api_key: ${AZURE_API_KEY} - ``` - - See our [LiteLLM guide](/deployment/litellm) for detailed setup. - - +Configure at least one AI provider: -### Resource Configuration +```yaml +bytebot-agent: + apiKeys: + anthropic: + value: "sk-ant-your-key-here" + openai: + value: "sk-your-key-here" + gemini: + value: "your-key-here" +``` + +### Resource Limits (Optional) + +Adjust resources based on your needs: ```yaml -# Desktop container resources +# Desktop container (where automation runs) desktop: resources: requests: @@ -188,268 +90,97 @@ desktop: limits: memory: "4Gi" cpu: "2" - - # Persistent storage for desktop - persistence: - enabled: true - size: "10Gi" - storageClass: "standard" # Your storage class -# Agent resources +# Agent (AI orchestration) agent: resources: requests: memory: "1Gi" cpu: "500m" - limits: - memory: "2Gi" - cpu: "1" - - replicaCount: 1 # Always 1 - agent manages a single desktop - -# UI resources -ui: - resources: - requests: - memory: "256Mi" - cpu: "100m" - limits: - memory: "512Mi" - cpu: "500m" - -# PostgreSQL resources -postgresql: - resources: - requests: - memory: "256Mi" - cpu: "250m" - limits: - memory: "1Gi" - cpu: "1" - persistence: - enabled: true - size: "8Gi" ``` -### Networking & Security +### External Access (Optional) + +Enable ingress for domain-based access: ```yaml -# Ingress configuration ui: ingress: enabled: true - className: "nginx" # Your ingress class - hostname: bytebot.example.com + hostname: bytebot.your-domain.com tls: true - annotations: - cert-manager.io/cluster-issuer: "letsencrypt-prod" - nginx.ingress.kubernetes.io/proxy-body-size: "100m" - -# Network policies -networkPolicy: - enabled: true - allowExternal: true - -# Pod security -podSecurityContext: - runAsNonRoot: true - runAsUser: 1000 - fsGroup: 1000 - -# Enable authentication -auth: - enabled: true - type: "basic" # or "oauth" - username: "admin" - password: "changeme" # Change this! ``` -### Production Configuration - -```yaml -# Single instance deployment -agent: - replicaCount: 1 # Agent handles one desktop +## Accessing Bytebot -desktop: - # Single desktop instance - replicaCount: 1 +### Local Access (Recommended) -# PostgreSQL with backups -postgresql: - persistence: - enabled: true - size: "20Gi" - backup: - enabled: true - schedule: "0 2 * * *" # Daily at 2 AM +```bash +kubectl port-forward -n bytebot svc/bytebot-ui 9992:9992 ``` -## Advanced Deployment Scenarios +Access at: http://localhost:9992 -### GPU Support +### External Access -Enable GPU for AI acceleration: +If you configured ingress: +- Access at: https://bytebot.your-domain.com -```yaml -desktop: - gpu: - enabled: true - type: "nvidia" # or "amd" - resources: - limits: - nvidia.com/gpu: 1 -``` - - -### Custom Images +## Verifying Deployment -Use your own container images: +Check that all pods are running: -```yaml -images: - desktop: - repository: "your-registry/bytebot-desktop" - tag: "custom-1.0" - pullPolicy: "Always" - agent: - repository: "your-registry/bytebot-agent" - tag: "custom-1.0" - ui: - repository: "your-registry/bytebot-ui" - tag: "custom-1.0" - -imagePullSecrets: - - name: "your-registry-secret" +```bash +kubectl get pods -n bytebot ``` -## Monitoring & Observability - -### Prometheus Metrics - -```yaml -metrics: - enabled: true - serviceMonitor: - enabled: true - namespace: "monitoring" - - # Grafana dashboards - dashboards: - enabled: true - namespace: "monitoring" +Expected output: ``` - -### Logging - -```yaml -logging: - level: "info" # debug, info, warn, error - format: "json" - - # Send to external logging - fluentd: - enabled: true - host: "fluentd.logging.svc.cluster.local" - port: 24224 +NAME READY STATUS RESTARTS AGE +bytebot-agent-xxxxx 1/1 Running 0 2m +bytebot-desktop-xxxxx 1/1 Running 0 2m +bytebot-postgresql-0 1/1 Running 0 2m +bytebot-ui-xxxxx 1/1 Running 0 2m ``` -## Backup & Restore - -### Automated Backups - -```yaml -backup: - enabled: true - schedule: "0 2 * * *" # Daily at 2 AM - retention: 7 # Keep 7 days - destination: - type: "s3" - bucket: "bytebot-backups" - region: "us-east-1" -``` +## Troubleshooting -### Manual Backup +### Pods Not Starting +Check pod status: ```bash -# Backup database -kubectl exec -n bytebot bytebot-postgresql-0 -- pg_dump -U postgres bytebot > backup.sql - -# Backup desktop data -kubectl cp bytebot/bytebot-desktop-0:/home/user ./desktop-backup +kubectl describe pod -n bytebot ``` -## Troubleshooting +Common issues: +- Insufficient memory/CPU: Check node resources with `kubectl top nodes` +- Missing API keys: Verify your values.yaml configuration -### Common Issues - - - - Check resource availability: - ```bash - kubectl describe pod -n bytebot - kubectl top nodes - ``` - - Common causes: - - Insufficient CPU/memory - - No nodes match node selector - - PVC cannot be provisioned - - - - Check service connectivity: - ```bash - kubectl logs -n bytebot deployment/bytebot-desktop - kubectl exec -n bytebot deployment/bytebot-ui -- curl http://bytebot-desktop:9990/health - ``` - - - - Verify API keys and connectivity: - ```bash - kubectl logs -n bytebot deployment/bytebot-agent - kubectl get secret -n bytebot bytebot-agent -o yaml - ``` - - - -### Debug Commands +### Connection Issues +Test service connectivity: ```bash -# Get all resources -kubectl get all -n bytebot - -# Describe problematic pod -kubectl describe pod -n bytebot +kubectl logs -n bytebot deployment/bytebot-agent +``` -# Check events -kubectl get events -n bytebot --sort-by='.lastTimestamp' +### View Logs -# View logs +```bash +# All logs kubectl logs -n bytebot -l app=bytebot --tail=100 -# Check persistent volumes -kubectl get pv,pvc -n bytebot +# Specific component +kubectl logs -n bytebot deployment/bytebot-agent ``` ## Upgrading ```bash -# Update repo -helm repo update - -# Check changes -helm diff upgrade bytebot ./helm -n bytebot -f values.yaml - -# Perform upgrade +# Update your values.yaml as needed, then: helm upgrade bytebot ./helm -n bytebot -f values.yaml - -# Rollback if needed -helm rollback bytebot -n bytebot ``` -## Uninstall +## Uninstalling ```bash # Remove Bytebot @@ -457,22 +188,98 @@ helm uninstall bytebot -n bytebot # Clean up namespace kubectl delete namespace bytebot - -# Remove PVCs (careful - this deletes data!) -kubectl delete pvc -n bytebot --all ``` +## Advanced Configuration + + + + If using Kubernetes secret management (Vault, Sealed Secrets, etc.): + + ```yaml + bytebot-agent: + apiKeys: + anthropic: + useExisting: true + secretName: "my-api-keys" + secretKey: "anthropic-key" + ``` + + Create the secret manually: + ```bash + kubectl create secret generic my-api-keys \ + --namespace bytebot \ + --from-literal=anthropic-key="sk-ant-your-key" + ``` + + + + For centralized LLM management, use the included LiteLLM proxy: + + ```bash + helm install bytebot ./helm \ + -f values-proxy.yaml \ + --namespace bytebot \ + --create-namespace \ + --set bytebot-llm-proxy.env.ANTHROPIC_API_KEY="your-key" + ``` + + This provides: + - Centralized API key management + - Request routing and load balancing + - Rate limiting and retry logic + + + + Configure persistent storage: + + ```yaml + desktop: + persistence: + enabled: true + size: "20Gi" + storageClass: "fast-ssd" + + postgresql: + persistence: + size: "20Gi" + storageClass: "fast-ssd" + ``` + + + + ```yaml + # Network policies + networkPolicy: + enabled: true + + # Pod security + podSecurityContext: + runAsNonRoot: true + runAsUser: 1000 + fsGroup: 1000 + + # Enable authentication + auth: + enabled: true + type: "basic" + username: "admin" + password: "changeme" # Use secrets in production! + ``` + + + ## Next Steps - - Use any LLM with Bytebot - - Integrate with your apps + Integrate Bytebot with your applications + + + Use any LLM provider with Bytebot - **Need help?** Join our [Discord community](https://discord.com/invite/d9ewZkWPTP) for Kubernetes-specific support. + **Need help?** Join our [Discord community](https://discord.com/invite/d9ewZkWPTP) or check our [GitHub discussions](https://github.com/bytebot-ai/bytebot/discussions). \ No newline at end of file diff --git a/helm/README.md b/helm/README.md index ab2d93d4d..a2e918908 100644 --- a/helm/README.md +++ b/helm/README.md @@ -2,211 +2,47 @@ This directory contains Helm charts for deploying Bytebot on Kubernetes. -## Structure - -``` -helm/ -├── Chart.yaml # Main chart definition -├── values.yaml # Default configuration values -├── templates/ # Kubernetes manifests templates -│ ├── NOTES.txt # Post-installation notes -│ └── ingress.yaml # Optional ingress configuration -└── charts/ # Individual service charts - ├── bytebot-desktop/ # Desktop VNC service - ├── bytebot-agent/ # Backend API service - ├── bytebot-ui/ # Frontend UI service - └── postgresql/ # PostgreSQL database - -``` - -## Prerequisites - -- Kubernetes 1.19+ -- Helm 3.0+ -- PV provisioner support (for PostgreSQL persistence) - -## Installation - -1. **Add required Helm repositories** (for PostgreSQL dependency): - ```bash - helm repo add bitnami https://charts.bitnami.com/bitnami - helm repo update - ``` - -2. **Standard Installation** (API keys on agent): - ```bash - cd helm - helm dependency update - helm install bytebot . --namespace bytebot --create-namespace \ - --set bytebot-agent.env.ANTHROPIC_API_KEY="your-api-key" \ - --set bytebot-agent.env.OPENAI_API_KEY="your-api-key" \ - --set bytebot-agent.env.GEMINI_API_KEY="your-api-key" - ``` - -3. **Installation with LiteLLM Proxy** (recommended for production): - ```bash - cd helm - helm dependency update - helm install bytebot . -f values-proxy.yaml \ - --namespace bytebot \ - --create-namespace \ - --set bytebot-llm-proxy.env.ANTHROPIC_API_KEY="your-api-key" \ - --set bytebot-llm-proxy.env.OPENAI_API_KEY="your-api-key" \ - --set bytebot-llm-proxy.env.GEMINI_API_KEY="your-api-key" - ``` - - The proxy setup provides: - - Centralized API key management - - Request routing and load balancing - - Rate limiting and retry logic - - Support for multiple LLM providers - -## Configuration - -### Key Configuration Options - -| Parameter | Description | Default | -|-----------|-------------|---------| -| `postgresql.enabled` | Enable PostgreSQL subchart | `true` | -| `postgresql.auth.password` | PostgreSQL password | `postgres` | -| `postgresql.auth.database` | PostgreSQL database name | `bytebotdb` | -| `bytebot-desktop.image.tag` | Desktop service image tag | `edge` | -| `bytebot-agent.env.ANTHROPIC_API_KEY` | Anthropic API key (standard mode) | `""` | -| `bytebot-agent.env.OPENAI_API_KEY` | OpenAI API key (standard mode) | `""` | -| `bytebot-agent.env.GEMINI_API_KEY` | Gemini API key (standard mode) | `""` | -| `bytebot-llm-proxy.enabled` | Enable LiteLLM proxy | `false` | -| `bytebot-llm-proxy.env.ANTHROPIC_API_KEY` | Anthropic API key (proxy mode) | `""` | -| `bytebot-llm-proxy.env.OPENAI_API_KEY` | OpenAI API key (proxy mode) | `""` | -| `bytebot-llm-proxy.env.GEMINI_API_KEY` | Gemini API key (proxy mode) | `""` | -| `bytebot-ui.service.type` | UI service type | `ClusterIP` | -| `ingress.enabled` | Enable ingress | `false` | -| `ingress.host` | Ingress hostname | `bytebot.example.com` | - -### Using External PostgreSQL - -To use an external PostgreSQL database instead of the included one: - -```yaml -postgresql: - enabled: false - -bytebot-agent: - externalDatabase: - host: "your-postgres-host" - port: 5432 - database: "bytebotdb" - username: "postgres" - password: "your-password" -``` - -### Exposing Services - -#### Using LoadBalancer: -```yaml -bytebot-ui: - service: - type: LoadBalancer -``` - -#### Using Ingress: -```yaml -ingress: - enabled: true - className: "nginx" - host: bytebot.yourdomain.com - tls: - enabled: true - secretName: bytebot-tls - annotations: - cert-manager.io/cluster-issuer: "letsencrypt-prod" -``` +## Documentation -## Accessing Bytebot +For complete deployment instructions, see: +**[Helm Deployment Guide](https://docs.bytebot.ai/deployment/helm)** -After installation, follow the notes displayed by Helm or use: +## Quick Start ```bash -helm status bytebot -n bytebot -``` - -### Port Forwarding (for local access): - -```bash -# All services at once -kubectl port-forward -n bytebot svc/bytebot-ui 9992:9992 & -kubectl port-forward -n bytebot svc/bytebot-agent 9991:9991 & -kubectl port-forward -n bytebot svc/bytebot-desktop 9990:9990 & - -# If using LiteLLM proxy, also forward: -kubectl port-forward -n bytebot svc/bytebot-llm-proxy 4000:4000 & -``` - -Then access: -- UI: http://localhost:9992 -- Agent API: http://localhost:9991 -- Desktop VNC: http://localhost:9990 -- LiteLLM Proxy (if enabled): http://localhost:4000 - -## Upgrading +# Clone repository +git clone https://github.com/bytebot-ai/bytebot.git +cd bytebot -```bash -helm upgrade bytebot . -n bytebot -``` +# Create values.yaml with your API key(s) +cat > values.yaml < - ``` +Access at: http://localhost:9992 -## Deployment Modes - -### Standard Mode -In standard mode, API keys are configured directly on the agent service. This is simpler but requires updating the agent deployment to change API keys. - -### Proxy Mode (Recommended) -In proxy mode, the LiteLLM proxy handles all LLM API calls. Benefits include: -- Centralized API key management -- Easy switching between LLM providers -- Built-in rate limiting and retry logic -- Request logging and monitoring capabilities +## Structure -To switch from standard to proxy mode: -```bash -helm upgrade bytebot . -f values-proxy.yaml -n bytebot \ - --set bytebot-llm-proxy.env.ANTHROPIC_API_KEY="your-key" \ - --set bytebot-llm-proxy.env.OPENAI_API_KEY="your-key" \ - --set bytebot-llm-proxy.env.GEMINI_API_KEY="your-key" ``` - -## Individual Chart Usage - -Each service can also be deployed independently: - -```bash -# Deploy only the desktop service -helm install bytebot-desktop ./charts/bytebot-desktop - -# Deploy only the agent service -helm install bytebot-agent ./charts/bytebot-agent - -# Deploy only the LiteLLM proxy -helm install bytebot-llm-proxy ./charts/bytebot-llm-proxy +helm/ +├── Chart.yaml # Main chart +├── values.yaml # Default values +├── values-proxy.yaml # LiteLLM proxy configuration +├── templates/ # Kubernetes templates +└── charts/ # Subcharts + ├── bytebot-desktop/ # Desktop VNC service + ├── bytebot-agent/ # Backend API service + ├── bytebot-ui/ # Frontend UI service + ├── bytebot-llm-proxy/ # Optional LiteLLM proxy + └── postgresql/ # PostgreSQL database ``` \ No newline at end of file diff --git a/helm/templates/NOTES.txt b/helm/templates/NOTES.txt index 191534b48..64da56198 100644 --- a/helm/templates/NOTES.txt +++ b/helm/templates/NOTES.txt @@ -1,44 +1,21 @@ -Thank you for installing {{ .Chart.Name }}. +Thank you for installing {{ .Chart.Name }}! -Your release is named {{ .Release.Name }}. +To access Bytebot: -To get started with Bytebot: +1. Port-forward the UI service: + kubectl port-forward -n {{ .Release.Namespace }} service/bytebot-ui 9992:9992 -1. Get the application URLs by running these commands: +2. Open your browser: + http://localhost:9992 {{- if .Values.ingress.enabled }} - Bytebot UI: http{{ if .Values.ingress.tls.enabled }}s{{ end }}://{{ .Values.ingress.host }} -{{- else }} - # Quick start - Forward all services: - kubectl port-forward -n {{ .Release.Namespace }} service/bytebot-ui 9992:9992 & - kubectl port-forward -n {{ .Release.Namespace }} service/bytebot-agent 9991:9991 & - kubectl port-forward -n {{ .Release.Namespace }} service/bytebot-desktop 9990:9990 & - - Then access: - - Bytebot UI: http://localhost:9992 - - Bytebot Agent API: http://localhost:9991 - - Bytebot Desktop (noVNC): http://localhost:9990 - - # Or forward services individually: - - Bytebot UI: - kubectl port-forward -n {{ .Release.Namespace }} service/bytebot-ui 9992:9992 - - Bytebot Agent API: - kubectl port-forward -n {{ .Release.Namespace }} service/bytebot-agent 9991:9991 - - Bytebot Desktop (noVNC): - kubectl port-forward -n {{ .Release.Namespace }} service/bytebot-desktop 9990:9990 +External access is configured at: +http{{ if .Values.ingress.tls.enabled }}s{{ end }}://{{ .Values.ingress.host }} {{- end }} -2. Configure API Keys: - Make sure to set your API keys in the values.yaml file or via --set flags: - - ANTHROPIC_API_KEY - - OPENAI_API_KEY - - GEMINI_API_KEY - -3. Check the deployment status: - kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/instance={{ .Release.Name }}" +To check deployment status: +kubectl get pods -n {{ .Release.Namespace }} -For more information, visit: https://github.com/bytebot-ai/bytebot \ No newline at end of file +For documentation: +https://docs.bytebot.ai/deployment/helm \ No newline at end of file diff --git a/helm/values-simple.yaml b/helm/values-simple.yaml new file mode 100644 index 000000000..f72e127bc --- /dev/null +++ b/helm/values-simple.yaml @@ -0,0 +1,18 @@ +# Simple Bytebot configuration example +# Copy this file and add your API key(s) + +bytebot-agent: + # Configure at least one API key + apiKeys: + anthropic: + value: "sk-ant-your-key-here" + + # Optional: Add more providers + # openai: + # value: "sk-your-key-here" + # gemini: + # value: "your-key-here" + +# That's it! The defaults handle everything else. +# +# For more options, see the full values.yaml file. \ No newline at end of file diff --git a/packages/bytebot-agent/src/agent/agent.computer-use.ts b/packages/bytebot-agent/src/agent/agent.computer-use.ts index e82cafe46..ec5d7f8ce 100644 --- a/packages/bytebot-agent/src/agent/agent.computer-use.ts +++ b/packages/bytebot-agent/src/agent/agent.computer-use.ts @@ -183,6 +183,11 @@ export async function handleComputerToolUse( let image: string | null = null; try { + // Wait before taking screenshot to allow UI to settle + const delayMs = 750; // 750ms delay + logger.debug(`Waiting ${delayMs}ms before taking screenshot`); + await new Promise((resolve) => setTimeout(resolve, delayMs)); + logger.debug('Taking screenshot'); image = await screenshot(); logger.debug('Screenshot captured successfully'); diff --git a/packages/bytebot-agent/src/anthropic/anthropic.constants.ts b/packages/bytebot-agent/src/anthropic/anthropic.constants.ts index 8ab95e817..03b2aa176 100644 --- a/packages/bytebot-agent/src/anthropic/anthropic.constants.ts +++ b/packages/bytebot-agent/src/anthropic/anthropic.constants.ts @@ -3,8 +3,8 @@ import { BytebotAgentModel } from '../agent/agent.types'; export const ANTHROPIC_MODELS: BytebotAgentModel[] = [ { provider: 'anthropic', - name: 'claude-opus-4-20250514', - title: 'Claude Opus 4', + name: 'claude-opus-4-1-20250805', + title: 'Claude Opus 4.1', contextWindow: 200000, }, { diff --git a/packages/bytebot-ui/src/components/ui/desktop-container.tsx b/packages/bytebot-ui/src/components/ui/desktop-container.tsx index 986c756cc..2d4360033 100644 --- a/packages/bytebot-ui/src/components/ui/desktop-container.tsx +++ b/packages/bytebot-ui/src/components/ui/desktop-container.tsx @@ -23,6 +23,7 @@ export const DesktopContainer: React.FC = ({ status = "running", }) => { const containerRef = useRef(null); + const vncContainerRef = useRef(null); // Ref for the VNC container const [containerSize, setContainerSize] = useState({ width: 0, height: 0 }); const [isMounted, setIsMounted] = useState(false); @@ -50,11 +51,11 @@ export const DesktopContainer: React.FC = ({ const aspectRatio = 1280 / 960; if (parentWidth / parentHeight > aspectRatio) { - // Width is the limiting factor + // Height is the limiting factor height = parentHeight; width = height * aspectRatio; } else { - // Height is the limiting factor + // Width is the limiting factor width = parentWidth; height = width / aspectRatio; } @@ -71,6 +72,16 @@ export const DesktopContainer: React.FC = ({ return () => window.removeEventListener("resize", updateSize); }, [isMounted]); + const handleFullScreen = () => { + if (vncContainerRef.current) { + vncContainerRef.current.requestFullscreen().catch((err) => { + console.error( + `Error attempting to enable full-screen mode: ${err.message} (${err.name})` + ); + }); + } + }; + return (
= ({
{/* Actions */} -
{children}
+
+ {children} + +
= ({
); -}; +}; \ No newline at end of file