|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Knowledge Base Assistant</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.message { |
|
|
animation: fadeIn 0.3s ease-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.typing-dot { |
|
|
animation: pulse 1.5s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.typing-dot:nth-child(1) { |
|
|
animation-delay: 0s; |
|
|
} |
|
|
|
|
|
.typing-dot:nth-child(2) { |
|
|
animation-delay: 0.3s; |
|
|
} |
|
|
|
|
|
.typing-dot:nth-child(3) { |
|
|
animation-delay: 0.6s; |
|
|
} |
|
|
|
|
|
|
|
|
.dropzone { |
|
|
border: 2px dashed #cbd5e0; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.dropzone-active { |
|
|
border-color: #4299e1; |
|
|
background-color: #ebf8ff; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeInOut { |
|
|
0% { opacity: 0; transform: translateY(10px); } |
|
|
10% { opacity: 1; transform: translateY(0); } |
|
|
90% { opacity: 1; transform: translateY(0); } |
|
|
100% { opacity: 0; transform: translateY(-10px); } |
|
|
} |
|
|
|
|
|
.animate-toast { |
|
|
animation: fadeInOut 3s ease-in-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.document-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="container mx-auto max-w-6xl p-4"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot text-white text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Knowledge Base Assistant</h1> |
|
|
<p class="text-gray-600">Upload documents and ask me anything</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="clearChat" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700 transition"> |
|
|
<i class="fas fa-trash-alt mr-2"></i>Clear |
|
|
</button> |
|
|
<button id="uploadDocumentsBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition"> |
|
|
<i class="fas fa-upload mr-2"></i>Upload Docs |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="flex h-[70vh]"> |
|
|
|
|
|
<div class="w-64 bg-gray-50 border-r border-gray-200 p-4 hidden md:block"> |
|
|
<div class="mb-6"> |
|
|
<h3 class="font-semibold text-gray-700 mb-3">Your Documents</h3> |
|
|
<div id="documentsList" class="space-y-3"> |
|
|
<div class="text-center text-gray-500 py-4"> |
|
|
<i class="fas fa-folder-open text-2xl mb-2"></i> |
|
|
<p>No documents uploaded</p> |
|
|
<button id="sidebarUploadBtn" class="text-sm text-blue-600 mt-2 hover:underline">Upload documents</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-700 mb-3">Sample Questions</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition"> |
|
|
Summarize the main points from my documents |
|
|
</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition"> |
|
|
What are the key takeaways? |
|
|
</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition"> |
|
|
Find references to specific terms |
|
|
</button> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col"> |
|
|
<div id="chatMessages" class="flex-1 p-6 overflow-y-auto custom-scrollbar"> |
|
|
|
|
|
<div class="message mb-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot text-blue-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="bg-gray-100 rounded-xl p-4 inline-block max-w-3xl"> |
|
|
<h3 class="font-bold text-gray-800 mb-1">Document Analysis Assistant 📄</h3> |
|
|
<p class="text-gray-700">Upload your documents (PDF, Word, Excel, etc.) and I'll help you analyze and answer questions about their content.</p> |
|
|
<div class="mt-4 flex flex-wrap gap-3"> |
|
|
<button id="welcomeUploadBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition text-sm"> |
|
|
<i class="fas fa-upload mr-2"></i>Upload Documents |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700 transition text-sm"> |
|
|
<i class="fas fa-question-circle mr-2"></i>How It Works |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Today at <span id="currentTime"></span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="typingIndicator" class="px-6 pb-4 hidden"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot text-blue-600"></i> |
|
|
</div> |
|
|
<div class="flex items-center space-x-1 bg-gray-100 rounded-xl p-3"> |
|
|
<div class="typing-dot w-2 h-2 bg-gray-500 rounded-full"></div> |
|
|
<div class="typing-dot w-2 h-2 bg-gray-500 rounded-full"></div> |
|
|
<div class="typing-dot w-2 h-2 bg-gray-500 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-200 p-4 bg-gray-50"> |
|
|
<form id="chatForm" class="flex items-center"> |
|
|
<div class="flex-1 relative"> |
|
|
<input |
|
|
id="userInput" |
|
|
type="text" |
|
|
placeholder="Ask a question about your documents..." |
|
|
class="w-full p-4 pr-12 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" |
|
|
autocomplete="off" |
|
|
disabled |
|
|
> |
|
|
<button type="button" id="attachFileBtn" class="absolute right-12 top-4 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-paperclip"></i> |
|
|
</button> |
|
|
<button type="button" id="voiceInput" class="absolute right-4 top-4 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button type="submit" class="ml-3 w-12 h-12 rounded-lg bg-blue-300 text-white flex items-center justify-center" disabled id="submitBtn"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
<div class="mt-2 text-xs text-gray-500 flex justify-between"> |
|
|
<div> |
|
|
<span id="charCount">0</span>/500 characters |
|
|
</div> |
|
|
<div> |
|
|
<button id="suggestQuestions" class="text-blue-600 hover:underline">Need inspiration?</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-2xl"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Upload Documents</h3> |
|
|
<button id="closeUploadModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4 text-sm text-gray-600"> |
|
|
<p>Supported formats: PDF, DOCX, PPTX, XLSX, TXT</p> |
|
|
<p>Maximum file size: 10MB per file</p> |
|
|
</div> |
|
|
<div id="dropzone" class="dropzone p-8 rounded-lg mb-4 text-center cursor-pointer"> |
|
|
<div class="flex flex-col items-center justify-center py-8"> |
|
|
<i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i> |
|
|
<h4 class="font-medium text-gray-700 mb-1">Drag & drop files here</h4> |
|
|
<p class="text-gray-500 text-sm mb-4">or</p> |
|
|
<input type="file" id="fileInput" class="hidden" multiple> |
|
|
<button id="browseFilesBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> |
|
|
Browse Files |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4 hidden" id="uploadProgressContainer"> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Upload Progress</span> |
|
|
<span id="uploadProgressText">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="uploadProgressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div id="selectedFilesContainer" class="hidden"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Selected Files:</h4> |
|
|
<div id="selectedFilesList" class="space-y-2 mb-4 max-h-40 overflow-y-auto"></div> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button id="cancelUploadBtn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition"> |
|
|
Cancel |
|
|
</button> |
|
|
<button id="startUploadBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> |
|
|
Upload Files |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="feedbackModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Was this response helpful?</h3> |
|
|
<button id="closeFeedbackModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex space-x-3 mb-4"> |
|
|
<button class="feedback-btn flex-1 py-2 rounded-lg border border-gray-300 hover:bg-green-50 hover:border-green-500 text-gray-700" data-feedback="yes"> |
|
|
<i class="fas fa-thumbs-up mr-2 text-green-500"></i> Yes |
|
|
</button> |
|
|
<button class="feedback-btn flex-1 py-2 rounded-lg border border-gray-300 hover:bg-red-50 hover:border-red-500 text-gray-700" data-feedback="no"> |
|
|
<i class="fas fa-thumbs-down mr-2 text-red-500"></i> No |
|
|
</button> |
|
|
</div> |
|
|
<div id="feedbackCommentArea" class="hidden"> |
|
|
<textarea class="w-full p-3 border border-gray-300 rounded-lg mb-3" placeholder="What could be improved?"></textarea> |
|
|
<button id="submitFeedback" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Submit Feedback</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const now = new Date(); |
|
|
const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); |
|
|
document.getElementById('currentTime').textContent = timeString; |
|
|
|
|
|
|
|
|
const userInput = document.getElementById('userInput'); |
|
|
const charCount = document.getElementById('charCount'); |
|
|
|
|
|
userInput.addEventListener('input', function() { |
|
|
charCount.textContent = this.value.length; |
|
|
}); |
|
|
|
|
|
|
|
|
const chatForm = document.getElementById('chatForm'); |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const typingIndicator = document.getElementById('typingIndicator'); |
|
|
const submitBtn = document.getElementById('submitBtn'); |
|
|
|
|
|
|
|
|
const uploadModal = document.getElementById('uploadModal'); |
|
|
const uploadDocumentsBtn = document.getElementById('uploadDocumentsBtn'); |
|
|
const sidebarUploadBtn = document.getElementById('sidebarUploadBtn'); |
|
|
const welcomeUploadBtn = document.getElementById('welcomeUploadBtn'); |
|
|
const closeUploadModal = document.getElementById('closeUploadModal'); |
|
|
const dropzone = document.getElementById('dropzone'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const browseFilesBtn = document.getElementById('browseFilesBtn'); |
|
|
const selectedFilesList = document.getElementById('selectedFilesList'); |
|
|
const selectedFilesContainer = document.getElementById('selectedFilesContainer'); |
|
|
const uploadProgressContainer = document.getElementById('uploadProgressContainer'); |
|
|
const uploadProgress |
|
|
</html> |
