import { useState, useEffect } from 'react'; import { Button } from '../../ui/button'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../ui/dialog'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card'; import { QRCodeSVG } from 'qrcode.react'; import { Loader2, Copy, Check, ChevronDown, ChevronUp, Info, ExternalLink, QrCode, } from 'lucide-react'; import { errorMessage } from '../../../utils/conversionUtils'; import { startTunnel, stopTunnel, getTunnelStatus } from '../../../api/sdk.gen'; import type { TunnelInfo } from '../../../api/types.gen'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ statusIdle: { id: 'tunnelSection.statusIdle', defaultMessage: 'Tunnel is not running', }, statusStarting: { id: 'tunnelSection.statusStarting', defaultMessage: 'Starting tunnel...', }, statusRunning: { id: 'tunnelSection.statusRunning', defaultMessage: 'Tunnel is active', }, statusError: { id: 'tunnelSection.statusError', defaultMessage: 'Tunnel encountered an error', }, statusDisabled: { id: 'tunnelSection.statusDisabled', defaultMessage: 'Tunnel is disabled', }, mobileApp: { id: 'tunnelSection.mobileApp', defaultMessage: 'Mobile App', }, previewFeature: { id: 'tunnelSection.previewFeature', defaultMessage: 'Preview feature:', }, previewDescription: { id: 'tunnelSection.previewDescription', defaultMessage: 'Enable remote access to goose from mobile devices using secure tunneling.', }, getIosApp: { id: 'tunnelSection.getIosApp', defaultMessage: 'Get the iOS app', }, or: { id: 'tunnelSection.or', defaultMessage: 'or', }, scanQrCode: { id: 'tunnelSection.scanQrCode', defaultMessage: 'scan QR code', }, tunnelStatus: { id: 'tunnelSection.tunnelStatus', defaultMessage: 'Tunnel Status', }, starting: { id: 'tunnelSection.starting', defaultMessage: 'Starting...', }, showQrCode: { id: 'tunnelSection.showQrCode', defaultMessage: 'Show QR Code', }, stopTunnel: { id: 'tunnelSection.stopTunnel', defaultMessage: 'Stop Tunnel', }, retry: { id: 'tunnelSection.retry', defaultMessage: 'Retry', }, startTunnel: { id: 'tunnelSection.startTunnel', defaultMessage: 'Start Tunnel', }, url: { id: 'tunnelSection.url', defaultMessage: 'URL:', }, mobileAppConnection: { id: 'tunnelSection.mobileAppConnection', defaultMessage: 'Mobile App Connection', }, qrCodeInstructions: { id: 'tunnelSection.qrCodeInstructions', defaultMessage: 'Scan this QR code with the goose mobile app. Do not share this code with anyone else as it is for your personal access.', }, connectionDetails: { id: 'tunnelSection.connectionDetails', defaultMessage: 'Connection Details', }, tunnelUrl: { id: 'tunnelSection.tunnelUrl', defaultMessage: 'Tunnel URL', }, secretKey: { id: 'tunnelSection.secretKey', defaultMessage: 'Secret Key', }, close: { id: 'tunnelSection.close', defaultMessage: 'Close', }, downloadIosApp: { id: 'tunnelSection.downloadIosApp', defaultMessage: 'Download goose iOS App', }, appStoreQrInstructions: { id: 'tunnelSection.appStoreQrInstructions', defaultMessage: 'Scan this QR code with your iPhone camera to install the goose mobile app from the App Store', }, openInAppStore: { id: 'tunnelSection.openInAppStore', defaultMessage: 'Open in App Store', }, failedToLoadStatus: { id: 'tunnelSection.failedToLoadStatus', defaultMessage: 'Failed to load tunnel status', }, failedToStopTunnel: { id: 'tunnelSection.failedToStopTunnel', defaultMessage: 'Failed to stop tunnel', }, failedToStartTunnel: { id: 'tunnelSection.failedToStartTunnel', defaultMessage: 'Failed to start tunnel', }, }); const IOS_APP_STORE_URL = 'https://apps.apple.com/us/app/goose-ai/id6752889295'; const STATUS_MESSAGE_KEYS = { idle: 'statusIdle', starting: 'statusStarting', running: 'statusRunning', error: 'statusError', disabled: 'statusDisabled', } as const; export default function TunnelSection() { const intl = useIntl(); const [tunnelInfo, setTunnelInfo] = useState({ state: 'idle', url: '', hostname: '', secret: '', }); const [showQRModal, setShowQRModal] = useState(false); const [showAppStoreQRModal, setShowAppStoreQRModal] = useState(false); const [error, setError] = useState(null); const [copiedUrl, setCopiedUrl] = useState(false); const [copiedSecret, setCopiedSecret] = useState(false); const [showDetails, setShowDetails] = useState(false); useEffect(() => { const loadTunnelInfo = async () => { try { const { data } = await getTunnelStatus(); if (data) { setTunnelInfo(data); } } catch (err) { const errorMsg = errorMessage(err, intl.formatMessage(i18n.failedToLoadStatus)); setError(errorMsg); setTunnelInfo({ state: 'error', url: '', hostname: '', secret: '' }); } }; loadTunnelInfo(); }, [intl]); const handleToggleTunnel = async () => { if (tunnelInfo.state === 'running') { try { await stopTunnel(); setTunnelInfo({ state: 'idle', url: '', hostname: '', secret: '' }); setShowQRModal(false); } catch (err) { setError(errorMessage(err, intl.formatMessage(i18n.failedToStopTunnel))); try { const { data } = await getTunnelStatus(); if (data) { setTunnelInfo(data); } } catch (statusErr) { console.error('Failed to fetch tunnel status after stop error:', statusErr); } } } else { setError(null); setTunnelInfo({ state: 'starting', url: '', hostname: '', secret: '' }); try { const { data } = await startTunnel(); if (data) { setTunnelInfo(data); setShowQRModal(true); } } catch (err) { const errorMsg = errorMessage(err, intl.formatMessage(i18n.failedToStartTunnel)); setError(errorMsg); setTunnelInfo({ state: 'error', url: '', hostname: '', secret: '' }); } } }; const copyToClipboard = async (text: string, type: 'url' | 'secret') => { try { await navigator.clipboard.writeText(text); if (type === 'url') { setCopiedUrl(true); setTimeout(() => setCopiedUrl(false), 2000); } else { setCopiedSecret(true); setTimeout(() => setCopiedSecret(false), 2000); } } catch (err) { console.error('Failed to copy to clipboard:', err); } }; const getQRCodeData = () => { if (tunnelInfo.state !== 'running') return ''; const configJson = JSON.stringify({ url: tunnelInfo.url, secret: tunnelInfo.secret, }); const urlEncodedConfig = encodeURIComponent(configJson); return `goosechat://configure?data=${urlEncodedConfig}`; }; if (tunnelInfo.state === 'disabled') { return null; } return ( <> {intl.formatMessage(i18n.mobileApp)}

{intl.formatMessage(i18n.previewFeature)} {intl.formatMessage(i18n.previewDescription)}{' '} {intl.formatMessage(i18n.getIosApp)} {' '}{intl.formatMessage(i18n.or)}{' '}

{error && (

{error}

)}

{intl.formatMessage(i18n.tunnelStatus)}

{intl.formatMessage(i18n[STATUS_MESSAGE_KEYS[tunnelInfo.state]])}

{tunnelInfo.state === 'starting' ? ( ) : tunnelInfo.state === 'running' ? ( <> ) : ( )}

{tunnelInfo.state === 'running' && (

{intl.formatMessage(i18n.url)} {tunnelInfo.url}

)} ); }

{intl.formatMessage(i18n.tunnelStatus)}

{intl.formatMessage(i18n.tunnelUrl)}

{intl.formatMessage(i18n.secretKey)}