diff --git a/index.html b/index.html index ff93803bb..77171a3b8 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Tauri + React + Typescript + AlphaHuman diff --git a/src/components/ConnectionIndicator.tsx b/src/components/ConnectionIndicator.tsx new file mode 100644 index 000000000..4ce5fbba2 --- /dev/null +++ b/src/components/ConnectionIndicator.tsx @@ -0,0 +1,47 @@ +interface ConnectionIndicatorProps { + status?: 'connected' | 'disconnected' | 'connecting'; + description?: string; + className?: string; +} + +const ConnectionIndicator = ({ + status = 'connected', + description = 'Your browser is now connected to the AlphaHuman AI. Keep this tab open to keep the connection alive. You can message the assistant with the button below.', + className = '', +}: ConnectionIndicatorProps) => { + const statusConfig = { + connected: { + color: 'bg-sage-500', + textColor: 'text-sage-500', + text: 'Connected to AlphaHuman AI 🚀', + }, + disconnected: { + color: 'bg-coral-500', + textColor: 'text-coral-500', + text: 'Disconnected', + }, + connecting: { + color: 'bg-amber-500', + textColor: 'text-amber-500', + text: 'Connecting', + }, + }; + + const config = statusConfig[status]; + + return ( +
+
+
+ {config.text} +
+ {description && ( +

+ {description} +

+ )} +
+ ); +}; + +export default ConnectionIndicator; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 6f97fd645..4e5edbab6 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { openUrl } from '@tauri-apps/plugin-opener'; import { TELEGRAM_BOT_USERNAME } from '../utils/config'; +import ConnectionIndicator from '../components/ConnectionIndicator'; const Home = () => { const [userName] = useState('Cyrus'); @@ -23,7 +24,31 @@ const Home = () => { // Handle Telegram bot link const handleStartCooking = async () => { - await openUrl(`https://t.me/${TELEGRAM_BOT_USERNAME}`); + try { + await openUrl(`https://t.me/${TELEGRAM_BOT_USERNAME}`); + } catch (error) { + console.error('Failed to open Telegram:', error); + } + }; + + const handleManageConnections = () => { + // TODO: Navigate to connections management page + console.log('Manage connections'); + }; + + const handleDeleteAllData = () => { + // TODO: Show confirmation dialog and delete all data + console.log('Delete all data'); + }; + + const handleViewEncryptionKey = () => { + // TODO: Show encryption key in a secure modal + console.log('View encryption key'); + }; + + const handleLogout = () => { + // TODO: Implement logout functionality + console.log('Logout'); }; return ( @@ -45,15 +70,75 @@ const Home = () => { {getGreeting()}, {userName} - {/*
*/} - + {/* Connection indicator */} + {/* Get Access button */} + + + {/* Action buttons */} +
+ {/* Manage Connections */} + + + {/* View Encryption Key */} + + + {/* Delete All Data */} + + + {/* Logout */} +
diff --git a/src/pages/onboarding/steps/GetStartedStep.tsx b/src/pages/onboarding/steps/GetStartedStep.tsx index 015b58a6e..0fe67063b 100644 --- a/src/pages/onboarding/steps/GetStartedStep.tsx +++ b/src/pages/onboarding/steps/GetStartedStep.tsx @@ -1,5 +1,6 @@ import { openUrl } from '@tauri-apps/plugin-opener'; import { TELEGRAM_BOT_USERNAME } from '../../../utils/config'; +import ConnectionIndicator from '../../../components/ConnectionIndicator'; interface GetStartedStepProps { onComplete: () => void; @@ -8,12 +9,13 @@ interface GetStartedStepProps { const GetStartedStep = ({ onComplete }: GetStartedStepProps) => { const handleOpenTelegram = async () => { try { + // Open Telegram and navigate to home immediately await openUrl(`https://t.me/${TELEGRAM_BOT_USERNAME}`); - setTimeout(() => { - onComplete(); - }, 1000); + onComplete(); } catch (error) { console.error('Failed to open Telegram:', error); + // Still navigate to home even if opening Telegram fails + onComplete(); } }; @@ -26,6 +28,10 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {

+ +
@@ -47,9 +53,9 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => { 2
-

Start Messaging

+

Keep this tab open

- Send a message to the bot to get started. Try asking about crypto prices, market trends, or anything about your chats! + Keep this tab open to keep the connection alive. You can message the assistant with the button below.

@@ -61,9 +67,9 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => { 3
-

Watch the Magic Happen 🪄

+

Start Messaging

- Your assistant will automatically start connecting to your accounts and tools to get insights and help you get more done. + Send a message to the bot to get started. Try asking about crypto prices, market trends, or anything about your chats!

@@ -74,7 +80,7 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => { onClick={handleOpenTelegram} className="w-full flex items-center justify-center space-x-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-semibold py-2.5 text-sm rounded-xl transition-all duration-300 hover:shadow-medium mb-3" > - I'm Ready to Cook! 🔥 + I'm Ready! Let's Go! 🔥 );