Update title and add ConnectionIndicator component for enhanced user feedback

- Changed the title in index.html to "AlphaHuman" for better branding. - Introduced a new ConnectionIndicator component to provide real-time connection status updates in Home and GetStartedStep pages. - Updated Home and GetStartedStep components to include the ConnectionIndicator, improving user awareness of their connection status and enhancing the onboarding experience.
2026-07-27 21:08:00 +00:00 · 2026-01-28 01:52:14 +05:30
parent f8f5e314d7
commit 0929a3681d
4 changed files with 152 additions and 14 deletions
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + React + Typescript</title>
+    <title>AlphaHuman</title>
  </head>

  <body>
@@ -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 (
+    <div className={`mb-6 ${className}`}>
+      <div className="flex items-center justify-center space-x-2 mb-3">
+        <div className={`w-2 h-2 ${config.color} rounded-full ${status === 'connected' ? 'animate-pulse' : ''}`}></div>
+        <span className={`text-sm ${config.textColor}`}>{config.text}</span>
+      </div>
+      {description && (
+        <p className="text-xs opacity-60 text-center leading-relaxed">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default ConnectionIndicator;
@@ -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}
              </h1>

-              {/* <br /> */}
-
+              {/* Connection indicator */}
+              <ConnectionIndicator />

              {/* Get Access button */}
              <button
                onClick={handleStartCooking}
-                className="btn-primary w-full py-4 text-lg font-semibold rounded-xl flex items-center justify-center space-x-2 hover:shadow-large transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]"
+                className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl"
              >
-                <span>Start Cooking 🧑‍🍳</span>
+                Message AlphaHuman 🔥
+              </button>
+            </div>
+
+            {/* Action buttons */}
+            <div className="glass rounded-3xl p-6 shadow-large animate-fade-up mt-4 space-y-3">
+              {/* Manage Connections */}
+              <button
+                onClick={handleManageConnections}
+                className="w-full flex items-start justify-between p-3 bg-black/50 border border-stone-700 rounded-xl hover:border-stone-600 hover:shadow-medium transition-all duration-200 text-left"
+              >
+                <div className="flex-1">
+                  <div className="font-medium text-sm mb-1">Manage Connections</div>
+                  <p className="opacity-70 text-xs">Add, remove, or update your connected accounts</p>
+                </div>
+                <svg className="w-5 h-5 opacity-60 flex-shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              </button>
+
+              {/* View Encryption Key */}
+              <button
+                onClick={handleViewEncryptionKey}
+                className="w-full flex items-start justify-between p-3 bg-black/50 border border-stone-700 rounded-xl hover:border-stone-600 hover:shadow-medium transition-all duration-200 text-left"
+              >
+                <div className="flex-1">
+                  <div className="font-medium text-sm mb-1">View Encryption Key</div>
+                  <p className="opacity-70 text-xs">Access your encryption key for backup purposes</p>
+                </div>
+                <svg className="w-5 h-5 opacity-60 flex-shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                </svg>
+              </button>
+
+              {/* Delete All Data */}
+              <button
+                onClick={handleDeleteAllData}
+                className="w-full flex items-start justify-between p-3 bg-black/50 border border-coral-500/30 rounded-xl hover:border-coral-500/50 hover:shadow-medium transition-all duration-200 text-left"
+              >
+                <div className="flex-1">
+                  <div className="font-medium text-sm mb-1 text-coral-400">Delete All Data</div>
+                  <p className="opacity-70 text-xs">Permanently delete all your data and reset your account</p>
+                </div>
+                <svg className="w-5 h-5 opacity-60 flex-shrink-0 ml-3 text-coral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </button>
+
+              {/* Logout */}
+              <button
+                onClick={handleLogout}
+                className="w-full flex items-start justify-between p-3 bg-black/50 border border-amber-500/30 rounded-xl hover:border-amber-500/50 hover:shadow-medium transition-all duration-200 text-left"
+              >
+                <div className="flex-1">
+                  <div className="font-medium text-sm mb-1 text-amber-400">Logout</div>
+                  <p className="opacity-70 text-xs">Sign out of your account</p>
+                </div>
+                <svg className="w-5 h-5 opacity-60 flex-shrink-0 ml-3 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                </svg>
              </button>
            </div>
          </div>
@@ -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) => {
        </p>
      </div>

+      <ConnectionIndicator
+        description="Your browser is now connected to the AlphaHuman AI Models. Keep this tab open to keep the connection alive."
+      />
+
      <div className="space-y-3 mb-4">
        <div className="bg-stone-800/50 rounded-xl p-4 border border-stone-700">
          <div className="flex items-start space-x-3">
@@ -47,9 +53,9 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
              <span className="text-white font-bold text-xs">2</span>
            </div>
            <div>
-              <h3 className="font-semibold mb-1 text-sm">Start Messaging</h3>
+              <h3 className="font-semibold mb-1 text-sm">Keep this tab open</h3>
              <p className="opacity-70 text-xs">
-                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.
              </p>
            </div>
          </div>
@@ -61,9 +67,9 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
              <span className="text-white font-bold text-xs">3</span>
            </div>
            <div>
-              <h3 className="font-semibold mb-1 text-sm">Watch the Magic Happen 🪄</h3>
+              <h3 className="font-semibold mb-1 text-sm">Start Messaging</h3>
              <p className="opacity-70 text-xs">
-                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!
              </p>
            </div>
          </div>
@@ -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"
      >
-        <span>I'm Ready to Cook! 🔥</span>
+        <span>I'm Ready! Let's Go! 🔥</span>
      </button>
    </div>
  );