|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>RAG Chatbot</title> |
|
<style> |
|
:root { |
|
--primary-color: #a0a0a0; |
|
--background-color: #1a1a1a; |
|
--card-background: #2d2d2d; |
|
--text-color: #e0e0e0; |
|
--border-radius: 6px; |
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3); |
|
--input-background: #363636; |
|
--input-border: #404040; |
|
} |
|
|
|
body { |
|
font-family: 'Segoe UI', Arial, sans-serif; |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
background-color: var(--background-color); |
|
color: var(--text-color); |
|
} |
|
|
|
.card { |
|
background: var(--card-background); |
|
border-radius: var(--border-radius); |
|
box-shadow: var(--shadow); |
|
padding: 2rem; |
|
margin: 2rem 0; |
|
} |
|
|
|
.chat-container { |
|
background: var(--card-background); |
|
border-radius: var(--border-radius); |
|
padding: 1.5rem; |
|
height: 700px; |
|
overflow-y: auto; |
|
margin-bottom: 1.5rem; |
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); |
|
border: 1px solid var(--input-border); |
|
} |
|
|
|
.message { |
|
margin-bottom: 1rem; |
|
padding: 1rem; |
|
border-radius: 4px; |
|
max-width: 70%; |
|
animation: fadeIn 0.3s ease; |
|
} |
|
|
|
@keyframes fadeIn { |
|
from { |
|
opacity: 0; |
|
transform: translateY(10px); |
|
} |
|
|
|
to { |
|
opacity: 1; |
|
transform: translateY(0); |
|
} |
|
} |
|
|
|
.user-message { |
|
background-color: #808080; |
|
margin-left: auto; |
|
color: #ffffff; |
|
box-shadow: 0 2px 4px rgba(128, 128, 128, 0.2); |
|
} |
|
|
|
.bot-message { |
|
background-color: #363636; |
|
margin-right: auto; |
|
color: #e0e0e0; |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
.loading-dots { |
|
display: inline-block; |
|
} |
|
|
|
@keyframes dots { |
|
0% { |
|
content: ''; |
|
} |
|
|
|
25% { |
|
content: '.'; |
|
} |
|
|
|
50% { |
|
content: '..'; |
|
} |
|
|
|
75% { |
|
content: '...'; |
|
} |
|
|
|
100% { |
|
content: ''; |
|
} |
|
} |
|
|
|
.loading-dots::after { |
|
content: ''; |
|
animation: dots 2s infinite; |
|
display: inline-block; |
|
width: 1em; |
|
} |
|
|
|
.input-container { |
|
display: flex; |
|
gap: 12px; |
|
padding: 1rem; |
|
background: var(--card-background); |
|
border-radius: var(--border-radius); |
|
box-shadow: var(--shadow); |
|
} |
|
|
|
.nav { |
|
background: var(--card-background); |
|
padding: 1rem; |
|
border-radius: var(--border-radius); |
|
box-shadow: var(--shadow); |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.nav a { |
|
margin-right: 20px; |
|
text-decoration: none; |
|
color: var(--primary-color); |
|
font-weight: 500; |
|
padding: 0.5rem 1rem; |
|
border-radius: 4px; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.nav a:hover { |
|
background: #363636; |
|
} |
|
|
|
#messageInput { |
|
flex-grow: 1; |
|
padding: 12px; |
|
border: 2px solid var(--input-border); |
|
border-radius: 4px; |
|
font-size: 1rem; |
|
transition: all 0.3s ease; |
|
background: var(--input-background); |
|
color: var(--text-color); |
|
} |
|
|
|
#messageInput:focus { |
|
outline: none; |
|
border-color: var(--primary-color); |
|
box-shadow: 0 0 0 3px rgba(114, 137, 218, 0.1); |
|
} |
|
|
|
button { |
|
background: var(--primary-color); |
|
color: white; |
|
border: none; |
|
padding: 12px 24px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
font-size: 1rem; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
button:hover { |
|
background: #909090; |
|
transform: translateY(-2px); |
|
} |
|
|
|
h1 { |
|
color: var(--primary-color); |
|
text-align: center; |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
|
|
.chat-container::-webkit-scrollbar { |
|
width: 8px; |
|
} |
|
|
|
.chat-container::-webkit-scrollbar-track { |
|
background: #363636; |
|
} |
|
|
|
.chat-container::-webkit-scrollbar-thumb { |
|
background: #4a4a4a; |
|
} |
|
|
|
.chat-container::-webkit-scrollbar-thumb:hover { |
|
background: #5a5a5a; |
|
} |
|
|
|
|
|
.main-container { |
|
display: flex; |
|
gap: 20px; |
|
height: calc(100vh - 100px); |
|
|
|
} |
|
|
|
.chat-card { |
|
flex: 3; |
|
background: var(--card-background); |
|
border-radius: var(--border-radius); |
|
box-shadow: var(--shadow); |
|
padding: 2rem; |
|
margin: 1rem 0; |
|
display: flex; |
|
flex-direction: column; |
|
height: fit-content; |
|
} |
|
|
|
.sources-card { |
|
flex: 1; |
|
background: var(--card-background); |
|
border-radius: var(--border-radius); |
|
box-shadow: var(--shadow); |
|
padding: 2rem; |
|
margin: 1rem 0; |
|
min-width: 250px; |
|
display: flex; |
|
flex-direction: column; |
|
height: auto; |
|
} |
|
|
|
.source-item { |
|
padding: 10px; |
|
margin-bottom: 10px; |
|
background: var(--input-background); |
|
border-radius: var(--border-radius); |
|
font-size: 0.9rem; |
|
border: 1px solid var(--input-border); |
|
} |
|
|
|
.sources-title { |
|
color: var(--text-color); |
|
font-size: 1.2rem; |
|
margin-bottom: 1rem; |
|
padding-bottom: 0.5rem; |
|
border-bottom: 1px solid var(--input-border); |
|
} |
|
|
|
#sourcesContainer { |
|
flex: 1; |
|
overflow-y: auto; |
|
} |
|
|
|
.logo-container { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin-bottom: 1rem; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div class="nav"> |
|
<a href="/">Upload</a> |
|
<a href="/chat">Chat</a> |
|
</div> |
|
<div class="main-container"> |
|
<div class="chat-card"> |
|
<div class="chat-container" id="chatContainer"> |
|
</div> |
|
<div class="input-container"> |
|
<input type="text" id="messageInput" placeholder="Type your message..."> |
|
<button onclick="sendMessage()">Send</button> |
|
</div> |
|
</div> |
|
<div class="sources-card"> |
|
<h2 class="sources-title">Sources</h2> |
|
<div id="sourcesContainer"></div> |
|
</div> |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
|
<script> |
|
const chatContainer = document.getElementById('chatContainer'); |
|
const messageInput = document.getElementById('messageInput'); |
|
const sourcesContainer = document.getElementById('sourcesContainer'); |
|
|
|
function addMessage(message, isUser) { |
|
const messageDiv = document.createElement('div'); |
|
messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`; |
|
messageDiv.textContent = message; |
|
chatContainer.appendChild(messageDiv); |
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
return messageDiv; |
|
} |
|
|
|
function updateSources(sources) { |
|
sourcesContainer.innerHTML = ''; |
|
if (sources && sources.length > 0) { |
|
sources.forEach(source => { |
|
const sourceDiv = document.createElement('div'); |
|
sourceDiv.className = 'source-item'; |
|
sourceDiv.textContent = source; |
|
sourcesContainer.appendChild(sourceDiv); |
|
}); |
|
} |
|
} |
|
|
|
async function sendMessage() { |
|
const message = messageInput.value.trim(); |
|
if (!message) return; |
|
|
|
addMessage(message, true); |
|
messageInput.value = ''; |
|
|
|
|
|
const loadingDiv = document.createElement('div'); |
|
loadingDiv.className = 'message bot-message'; |
|
const loadingSpan = document.createElement('span'); |
|
loadingSpan.className = 'loading-dots'; |
|
loadingSpan.textContent = 'Thinking'; |
|
loadingDiv.appendChild(loadingSpan); |
|
chatContainer.appendChild(loadingDiv); |
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
try { |
|
const response = await fetch('/chat', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify({ question: message }), |
|
}); |
|
|
|
const data = await response.json(); |
|
|
|
|
|
chatContainer.removeChild(loadingDiv); |
|
|
|
if (data.error) { |
|
addMessage(data.error, false); |
|
return; |
|
} |
|
|
|
|
|
const tempDiv = document.createElement('div'); |
|
tempDiv.innerHTML = marked.parse(data.answer[0]); |
|
|
|
|
|
const messageDiv = document.createElement('div'); |
|
messageDiv.className = 'message bot-message'; |
|
messageDiv.innerHTML = tempDiv.innerHTML; |
|
|
|
chatContainer.appendChild(messageDiv); |
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
if (data.answer[1]) { |
|
updateSources(data.answer[1]); |
|
} |
|
} catch (error) { |
|
|
|
chatContainer.removeChild(loadingDiv); |
|
console.error('Error:', error); |
|
addMessage('Sorry, there was an error processing your message.', false); |
|
} |
|
} |
|
|
|
messageInput.addEventListener('keypress', function (e) { |
|
if (e.key === 'Enter') { |
|
sendMessage(); |
|
} |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |
