📄 Source: index.php
<?php
date_default_timezone_set('Europe/Bucharest');
session_start();
require_once 'vendor/autoload.php';
$baseUrl = "https://createcraftweb.playit.plus/AgentAI";
$client = new Google\Client();
$client->setClientId('1082083393389-c5uekspcp2boc1gd0n0gr3v1a5vbb3jg.apps.googleusercontent.com');
$client->setClientSecret('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');
$client->setRedirectUri("$baseUrl/oauth2callback.php");
$client->addScope('https://www.googleapis.com/auth/gmail.readonly');
$client->setAccessType('offline');
?>
<!DOCTYPE html>
<html>
<head>
<title>InboxZero AI - Email Assistant</title>
<meta charset="UTF-8">
<style>
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 20px; background: #f0f2f5; }
.container { max-width: 1400px; margin: auto; background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px 10px 0 0; }
.status { font-size: 12px; margin-top: 5px; opacity: 0.9; }
.content { display: flex; min-height: 600px; }
.sidebar { width: 350px; background: #f8f9fa; border-right: 1px solid #ddd; padding: 20px; overflow-y: auto; }
.chat-area { flex: 1; display: flex; flex-direction: column; }
.messages { flex: 1; padding: 20px; overflow-y: auto; min-height: 500px; max-height: 600px; background: #fafafa; }
.input-area { padding: 20px; border-top: 1px solid #ddd; display: flex; gap: 10px; background: white; }
.input-area input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
.input-area button { padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
.input-area button:hover { background: #5a67d8; }
.message { margin-bottom: 15px; padding: 12px; border-radius: 10px; max-width: 80%; word-wrap: break-word; white-space: pre-wrap; }
.user-message { background: #667eea; color: white; margin-left: auto; text-align: right; }
.ai-message { background: #f1f3f4; color: #333; margin-right: auto; }
.email-list { list-style: none; padding: 0; }
.email-item { padding: 12px; margin-bottom: 10px; background: white; border-radius: 8px; border: 1px solid #e0e0e0; cursor: pointer; transition: all 0.2s; }
.email-item:hover { background: #e3f2fd; transform: translateX(-2px); }
.email-from { font-weight: bold; color: #333; }
.email-subject { font-size: 13px; color: #666; margin-top: 4px; }
.email-date { font-size: 11px; color: #999; margin-top: 4px; }
.login-btn { background: white; color: #667eea; padding: 12px 24px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; border: 2px solid white; }
.login-btn:hover { background: #667eea; color: white; }
.logout-btn { background: #dc3545; color: white; padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 10px; }
.loading { text-align: center; padding: 20px; color: #999; }
.badge { display: inline-block; background: #28a745; color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; margin-left: 8px; }
select, button { margin-top: 10px; }
.model-select { width: 100%; padding: 8px; margin-top: 10px; border-radius: 5px; border: 1px solid #ddd; }
.email-content { background: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 13px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📧 InboxZero AI <span class="badge">Working Prototype</span></h1>
<p>Your intelligent email assistant - ask anything about your inbox</p>
<div class="status">🔧 Running on XAMPP | <?php echo date('Y-m-d H:i:s'); ?></div>
</div>
<div class="content">
<div class="sidebar">
<h3>📬 Your Inbox</h3>
<?php if (isset($_SESSION['access_token'])): ?>
<button onclick="logout()" class="logout-btn">🚪 Logout</button>
<select id="modelSelect" class="model-select">
<option value="openrouter/auto">Auto (Best Available)</option>
<option value="nousresearch/hermes-3-llama-3.1-405b:free">Hermes 3 405B</option>
</select>
<div id="emailList" style="margin-top: 15px;">
<div class="loading">📥 Loading your emails...</div>
</div>
<?php else: ?>
<p>🔐 Login to access your Gmail inbox</p>
<a href="<?php echo $client->createAuthUrl(); ?>" class="login-btn">🔑 Sign in with Google</a>
<p style="font-size: 12px; color: #666; margin-top: 15px;">
<small>This app only reads your email metadata. No data is stored permanently.</small>
</p>
<?php endif; ?>
</div>
<div class="chat-area">
<div class="messages" id="messages">
<div class="message ai-message">
🤖 <strong>Hello! I'm InboxZero AI.</strong><br><br>
I can help you:<br>
• 📊 Summarize unread emails<br>
• 🔍 Find specific messages<br>
• 📅 Extract important dates<br>
• ⚡ Answer questions about your inbox<br><br>
<em>Try: "Show me emails from today" or "What are my unread messages about?"</em>
</div>
</div>
<?php if (isset($_SESSION['access_token'])): ?>
<div class="input-area">
<input type="text" id="userInput" placeholder="Ask about your emails..." autocomplete="off" onkeypress="if(event.key==='Enter') sendMessage()">
<button onclick="sendMessage()">📤 Send</button>
</div>
<?php endif; ?>
</div>
</div>
</div>
<script>
let currentEmails = [];
async function sendMessage() {
const input = document.getElementById('userInput');
const message = input.value.trim();
if (!message) return;
addMessage('user', message);
input.value = '';
input.disabled = true;
const thinkingMsg = addMessage('ai', '🤔 Thinking...', true);
try {
const response = await fetch('chat_handler.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: message })
});
const data = await response.json();
if (thinkingMsg) thinkingMsg.remove();
addMessage('ai', data.reply);
if (data.emails && data.emails.length > 0) {
currentEmails = data.emails;
displayEmails(currentEmails);
}
} catch (error) {
if (thinkingMsg) thinkingMsg.remove();
addMessage('ai', '❌ Error: ' + error.message);
}
input.disabled = false;
input.focus();
}
function addMessage(role, text, returnElement = false) {
const messagesDiv = document.getElementById('messages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${role === 'user' ? 'user-message' : 'ai-message'}`;
// Convert newlines to <br> for better display
const formattedText = text.replace(/\n/g, '<br>');
messageDiv.innerHTML = role === 'user' ? `👤 ${formattedText}` : `🤖 ${formattedText}`;
messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
if (returnElement) return messageDiv;
return messageDiv;
}
async function loadEmails() {
try {
const response = await fetch('fetch_emails.php');
const emails = await response.json();
if (emails.error) {
document.getElementById('emailList').innerHTML = `<div class="loading">❌ ${emails.error}</div>`;
} else if (emails.length === 0) {
document.getElementById('emailList').innerHTML = '<div class="loading">📭 No emails found</div>';
} else {
currentEmails = emails;
displayEmails(emails);
}
} catch (error) {
document.getElementById('emailList').innerHTML = '<div class="loading">❌ Failed to load emails</div>';
}
}
function displayEmails(emails) {
if (!emails || emails.length === 0) {
document.getElementById('emailList').innerHTML = '<div class="loading">📭 No emails found</div>';
return;
}
let html = '<ul class="email-list" style="max-height: 500px; overflow-y: auto;">';
for (let i = 0; i < Math.min(emails.length, 10); i++) {
const email = emails[i];
const fromShort = email.from.length > 35 ? email.from.substring(0, 32) + '...' : email.from;
const subjectShort = email.subject.length > 45 ? email.subject.substring(0, 42) + '...' : email.subject;
html += `<li class="email-item" onclick="viewEmail('${email.id}')">
<div class="email-from">📨 ${escapeHtml(fromShort)}</div>
<div class="email-subject">${escapeHtml(subjectShort)}</div>
<div class="email-date">📅 ${escapeHtml(email.date.split(' ')[0])}</div>
</li>`;
}
html += '</ul>';
document.getElementById('emailList').innerHTML = html;
}
async function viewEmail(emailId) {
addMessage('ai', '📖 Opening email...');
try {
const response = await fetch('get_email.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email_id: emailId })
});
const data = await response.json();
if (data.content) {
const preview = data.content.substring(0, 1000);
addMessage('ai', `📧 **Email preview:**\n\n${preview}\n\n${data.content.length > 1000 ? '...(truncated)' : ''}`);
} else {
addMessage('ai', '❌ Could not load email content.');
}
} catch (error) {
addMessage('ai', '❌ Failed to load email.');
}
}
function logout() {
fetch('logout.php').then(() => window.location.reload());
}
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
<?php if (isset($_SESSION['access_token'])): ?>
window.onload = loadEmails;
<?php endif; ?>
</script>
</body>
</html>
← Back