300 lines
No EOL
12 KiB
HTML
300 lines
No EOL
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chat Interface Test</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
padding: 20px;
|
|
}
|
|
.header {
|
|
border-bottom: 1px solid #e0e0e0;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin: 10px 0;
|
|
}
|
|
.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
|
.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
|
|
.warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
|
|
.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 5px;
|
|
}
|
|
.test-button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.test-button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.test-button:disabled {
|
|
background-color: #6c757d;
|
|
cursor: not-allowed;
|
|
}
|
|
.result {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
background-color: #f8f9fa;
|
|
white-space: pre-wrap;
|
|
}
|
|
.links {
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #e0e0e0;
|
|
}
|
|
.links a {
|
|
display: inline-block;
|
|
margin: 5px 10px 5px 0;
|
|
padding: 10px 15px;
|
|
background-color: #28a745;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
}
|
|
.links a:hover {
|
|
background-color: #218838;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>RAG Contract Analysis - Chat Interface Test</h1>
|
|
<p>This page tests the chat functionality with the Acrisure contract document.</p>
|
|
</div>
|
|
|
|
<div class="status success">
|
|
✅ Backend server running on: <strong>http://localhost:8000</strong>
|
|
</div>
|
|
|
|
<div class="status success">
|
|
✅ Frontend server running on: <strong>http://localhost:3000</strong>
|
|
</div>
|
|
|
|
<div class="status info">
|
|
📄 <strong>Document:</strong> Acrisure MSA Extension Contract<br>
|
|
🔗 <strong>Index ID:</strong> ff0a0e4d-51e2-4085-bb21-9b40ff49e52f<br>
|
|
👤 <strong>User Access:</strong> Admin and User accounts have access
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>🔐 Authentication Test</h3>
|
|
<button class="test-button" onclick="testLogin()">Test Admin Login</button>
|
|
<button class="test-button" onclick="testUserLogin()">Test User Login</button>
|
|
<div id="auth-result" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>💬 Chat API Test</h3>
|
|
<button class="test-button" onclick="testChatQuery()">Test Chat Query</button>
|
|
<button class="test-button" onclick="testChatHistory()">Test Chat History</button>
|
|
<div id="chat-result" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>📊 Index Status Test</h3>
|
|
<button class="test-button" onclick="testIndexStatus()">Check Index Status</button>
|
|
<div id="index-result" class="result"></div>
|
|
</div>
|
|
|
|
<div class="links">
|
|
<h3>🔗 Quick Links</h3>
|
|
<a href="http://localhost:3000" target="_blank">Frontend Application</a>
|
|
<a href="http://localhost:8000/docs" target="_blank">API Documentation</a>
|
|
<a href="http://localhost:3000/login" target="_blank">Login Page</a>
|
|
<a href="http://localhost:3000/dashboard/chat/ff0a0e4d-51e2-4085-bb21-9b40ff49e52f" target="_blank">Chat Interface</a>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>📋 Test Instructions</h3>
|
|
<ol>
|
|
<li>Click "Test Admin Login" to authenticate</li>
|
|
<li>Click "Test Chat Query" to test the chat functionality</li>
|
|
<li>Click the "Chat Interface" link above to test the UI</li>
|
|
<li>Login with: <strong>admin@oliver.agency</strong> / <strong>admin123</strong></li>
|
|
<li>Or login with: <strong>user@oliver.agency</strong> / <strong>user123</strong></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let authToken = null;
|
|
|
|
async function testLogin() {
|
|
const resultDiv = document.getElementById('auth-result');
|
|
resultDiv.textContent = 'Testing admin login...';
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:8000/api/v1/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: 'admin@oliver.agency',
|
|
password: 'admin123'
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
authToken = data.access_token;
|
|
resultDiv.textContent = `✅ Admin login successful!\nUser: ${data.user.email}\nRole: ${data.user.role}\nToken: ${authToken.substring(0, 50)}...`;
|
|
} else {
|
|
resultDiv.textContent = `❌ Login failed: ${data.detail}`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.textContent = `❌ Error: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
async function testUserLogin() {
|
|
const resultDiv = document.getElementById('auth-result');
|
|
resultDiv.textContent = 'Testing user login...';
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:8000/api/v1/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: 'user@oliver.agency',
|
|
password: 'user123'
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
authToken = data.access_token;
|
|
resultDiv.textContent = `✅ User login successful!\nUser: ${data.user.email}\nRole: ${data.user.role}\nIndex Access: ${data.user.index_access.join(', ')}\nToken: ${authToken.substring(0, 50)}...`;
|
|
} else {
|
|
resultDiv.textContent = `❌ Login failed: ${data.detail}`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.textContent = `❌ Error: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
async function testChatQuery() {
|
|
const resultDiv = document.getElementById('chat-result');
|
|
|
|
if (!authToken) {
|
|
resultDiv.textContent = '❌ Please login first';
|
|
return;
|
|
}
|
|
|
|
resultDiv.textContent = 'Testing chat query...';
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:8000/api/v1/chat/query', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${authToken}`
|
|
},
|
|
body: JSON.stringify({
|
|
query: 'What is the effective date of this contract extension?',
|
|
index_id: 'ff0a0e4d-51e2-4085-bb21-9b40ff49e52f'
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
resultDiv.textContent = `✅ Chat query successful!\n\nResponse: ${data.response}\n\nResponse Time: ${data.response_time.toFixed(2)}s\nCached: ${data.cached}\nContext Used: ${data.debug_info.context_messages_count || 0} messages`;
|
|
} else {
|
|
resultDiv.textContent = `❌ Chat query failed: ${data.detail}`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.textContent = `❌ Error: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
async function testChatHistory() {
|
|
const resultDiv = document.getElementById('chat-result');
|
|
|
|
if (!authToken) {
|
|
resultDiv.textContent = '❌ Please login first';
|
|
return;
|
|
}
|
|
|
|
resultDiv.textContent = 'Testing chat history...';
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:8000/api/v1/chat/history/ff0a0e4d-51e2-4085-bb21-9b40ff49e52f', {
|
|
headers: {
|
|
'Authorization': `Bearer ${authToken}`
|
|
}
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
resultDiv.textContent = `✅ Chat history retrieved!\n\nMessages: ${data.messages.length}\n\nLast message: ${data.messages[data.messages.length - 1]?.response?.substring(0, 100) || 'No messages'}...`;
|
|
} else {
|
|
resultDiv.textContent = `❌ Chat history failed: ${data.detail}`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.textContent = `❌ Error: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
async function testIndexStatus() {
|
|
const resultDiv = document.getElementById('index-result');
|
|
|
|
if (!authToken) {
|
|
resultDiv.textContent = '❌ Please login first';
|
|
return;
|
|
}
|
|
|
|
resultDiv.textContent = 'Testing index status...';
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:8000/api/v1/chat/index-status/ff0a0e4d-51e2-4085-bb21-9b40ff49e52f', {
|
|
headers: {
|
|
'Authorization': `Bearer ${authToken}`
|
|
}
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
resultDiv.textContent = `✅ Index status retrieved!\n\nReady: ${data.ready}\nReason: ${data.reason}\nTotal Documents: ${data.details.total_documents}\nProcessed: ${data.details.processed_documents}\nCollection Count: ${data.details.collection_count}`;
|
|
} else {
|
|
resultDiv.textContent = `❌ Index status failed: ${data.detail}`;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.textContent = `❌ Error: ${error.message}`;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |