Rohan
User profile
Free user
Rohan
rohanappzoro+3@gmail.com
Latest components
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AUM AI Chat</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
/* Smooth scroll for chat area */
#chatMessages {
scroll-behavior: smooth;
display: flex;
flex-direction: column;
}
/* Typing Indicator Animation */
.typing-indicator {
display: flex;
align-items: center;
}
.typing-dot {
width: 8px;
height: 8px;
margin: 0 4px;
background-color: #666;
border-radius: 50%;
animation: typing 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) {
animation-delay: 0s;
}
.typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing {
0%,
100% {
opacity: 0.4;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-4px);
}
}
/* Custom scrollbar */
#chatMessages::-webkit-scrollbar {
width: 8px;
}
#chatMessages::-webkit-scrollbar-track {
background: hsl(var(--b2));
}
#chatMessages::-webkit-scrollbar-thumb {
background: hsl(var(--p));
border-radius: 4px;
}
/* Custom scrollbar for attachments */
#attachmentsPreview::-webkit-scrollbar {
height: 6px;
}
#attachmentsPreview::-webkit-scrollbar-track {
background: hsl(var(--b2));
}
#attachmentsPreview::-webkit-scrollbar-thumb {
background: hsl(var(--b3));
border-radius: 10px;
}
.file-explorer-transition {
transition: all 0.3s ease-in-out;
}
.spotlight-backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.file-processing-overlay {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
/* Ensure dark mode consistency */
body {
background-color: hsl(var(--b2));
color: hsl(var(--bc));
}
.chat-bubble:before{
inset-inline-start: 0rem !important;
}
</style>
</head>
<body class="h-screen flex overflow-hidden">
<!-- Sidebar -->
<!-- Sidebar with User Icon at Bottom -->
<div class="w-16 bg-base-200 flex flex-col justify-between py-4">
<!-- Top Icons -->
<div class="flex flex-col items-center space-y-4">
<!-- File Icon with Toggle Functionality -->
<button id="folderToggle" class="btn btn-ghost btn-square" aria-label="Files">
<i class="fas fa-folder text-xl"></i>
</button>
<!-- Search Icon -->
<button id="searchToggle" class="btn btn-ghost btn-square" aria-label="Search">
<i class="fas fa-search text-xl text-yellow-500"></i>
</button>
<!-- Tasks Icon -->
<button class="btn btn-ghost btn-square" aria-label="Tasks">
<i class="fas fa-tasks text-xl"></i>
</button>
<!-- Add New Folder Icon -->
<button id="addFolderBtn" class="btn btn-ghost btn-square" aria-label="Add Folder">
<i class="fas fa-plus text-xl"></i>
</button>
</div>
<!-- User Icon at Bottom -->
<div class="flex flex-col items-center space-y-4">
<!-- Theme Toggle -->
<button id="themeToggle" class="btn btn-ghost btn-square" aria-label="Toggle Theme">
<i class="fas fa-moon text-xl"></i>
</button>
<!-- User Profile -->
<div class="dropdown dropdown-top">
<div tabindex="0" role="button" class="btn btn-ghost btn-square">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=custom" alt="User Avatar" />
</div>
</div>
</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mb-2">
<li><a><i class="fas fa-user mr-2"></i>Profile</a></li>
<li><a><i class="fas fa-cog mr-2"></i>Settings</a></li>
<li><a class="text-error"><i class="fas fa-sign-out-alt mr-2"></i>Logout</a></li>
</ul>
</div>
</div>
</div>
<!-- Main Content Area with File Explorer -->
<div id="mainContent" class="flex w-full file-explorer-transition relative">
<!-- File Explorer Sidebar (Initially Hidden) -->
<div id="fileExplorer"
class="w-0 bg-base-100 border-r border-base-300 overflow-hidden file-explorer-transition">
<div class="p-4">
<h2 class="text-xl font-bold mb-4">File Explorer</h2>
<!-- Folder Structure -->
<ul class="menu bg-base-100 w-full p-0">
<li>
<details open>
<summary class="font-semibold">
<i class="fas fa-folder mr-2 text-yellow-500"></i>
Project Root
<span class="badge badge-sm ml-2">12 files</span>
</summary>
<ul>
<li>
<details>
<summary>
<i class="fas fa-folder mr-2 text-yellow-500"></i>
src
<span class="badge badge-sm ml-2">8 files</span>
</summary>
<ul>
<li>
<a>
<i class="fas fa-file mr-2 text-blue-500"></i>
index.js
<span class="text-xs text-gray-500 ml-2">(24 KB)</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</div>
</div>
<div id="chatContainer" class="flex-1 bg-base-100 flex flex-col file-explorer-transition relative">
<!-- Chat Header -->
<div class="navbar bg-base-300">
<div class="flex-1">
<h1 class="text-xl font-bold">AUM - Your Secure Personal Assistant</h1>
</div>
</div>
<!-- Chat Messages Area -->
<div id="chatArea" class="flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center space-y-6">
<!-- Initial Welcome State -->
<div id="welcomeState" class="text-center space-y-6 max-w-2xl">
<h2 class="text-3xl font-bold text-primary">Let's get some work done while you are gone.</h2>
</div>
</div>
<!-- Chat Messages Container -->
<div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4 bg-base-100">
<!-- Welcome Message -->
<!-- <div class="chat chat-start">
<div class="chat-image avatar">
<div
class="w-10 rounded-full bg-secondary text-secondary-content flex items-center justify-center">
<span>AI</span>
</div>
</div>
<div class="chat-bubble chat-bubble-secondary">
Hello! I'm your AI assistant. What project would you like to work on today?
</div>
</div> -->
</div>
<!-- Attachments Preview Section -->
<div id="attachmentsPreview"
class="mb-4 bg-base-200 p-2 rounded-lg overflow-x-auto whitespace-nowrap scroll-smooth hidden">
<div id="attachmentsContainer" class="inline-flex space-x-3">
<!-- Attachment items will be dynamically added here -->
</div>
</div>
<div class="p-4 bg-base-200">
<div class="join w-full">
<input id="messageInput" type="text" placeholder="What do you want to work on?"
class="input input-bordered join-item w-full" />
<input type="file" id="fileAttachmentInput" multiple class="hidden"
accept=".doc,.docx,.xls,.xlsx,.csv,.pdf,.txt" />
<button id="attachFileButton" class="btn btn-ghost join-item">
<i class="fas fa-paperclip"></i>
</button>
<button id="sendButton" class="btn btn-primary join-item" onclick="sendMessage()">Start</button>
</div>
</div>
<!-- Minimized Chat Window -->
<div id="minimizedChat" class="hidden fixed bottom-4 right-4 z-50">
<div class="card w-72 bg-base-100 shadow-xl">
<div class="card-body p-4">
<div class="flex justify-between items-center">
<h3 class="card-title text-sm">AI Chat</h3>
<button id="maximizeChat" class="btn btn-ghost btn-sm">
<i class="fas fa-expand"></i>
</button>
</div>
<div class="overflow-y-auto max-h-40">
<!-- Minimized chat content -->
</div>
</div>
</div>
</div>
</div>
<!-- Spotlight Search Overlay - Enhanced Version -->
<div id="spotlightSearchOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-[100] hidden">
<div class="container mx-auto mt-20 max-w-2xl">
<div class="bg-white rounded-xl shadow-2xl overflow-hidden">
<!-- Search Input -->
<div class="p-4 border-b">
<div class="relative">
<input type="text" id="spotlightSearchInput" placeholder="Search files, add folders..."
class="w-full p-3 pl-10 text-xl border-none focus:outline-none rounded-lg" />
<i
class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<!-- Loader (Right) - Initially Hidden -->
<div id="searchLoader" class="absolute right-3 top-1/2 transform -translate-y-1/2 hidden">
<i class="fas fa-spinner fa-spin text-gray-400"></i>
</div>
</div>
</div>
<div class="flex p-2 bg-gray-100 space-x-2 items-center justify-between">
<span id="search-hints">Enter at least four characters and press Enter</span>
<button id="continue-files"
class="bg-green-500 text-white px-4 py-2 rounded-lg shadow hover:bg-green-600 transition hidden">
Continue
</button>
</div>
<!-- Action Buttons -->
<!-- <div class="flex p-2 bg-gray-100 space-x-2">
<button id="addFolderAction" class="btn btn-ghost btn-sm">
<i class="fas fa-folder-plus mr-2"></i> Add Folder
</button>
<button id="createFileAction" class="btn btn-ghost btn-sm">
<i class="fas fa-file-medical mr-2"></i> Create File
</button>
</div> -->
<!-- Search Results -->
<div id="searchResultsContainer" class="max-h-[500px] overflow-y-auto">
<!-- Dynamic search results will be inserted here -->
</div>
</div>
</div>
</div>
</div>
<!-- Existing Modals and Scripts -->
<dialog id="folder_modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Select Folder</h3>
<div class="py-4">
<div class="form-control">
<label class="label">
<span class="label-text">Choose a folder from your local PC</span>
</label>
<input type="file" class="file-input file-input-bordered w-full" webkitdirectory directory
multiple />
</div>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
<button class="btn btn-primary ml-2">Select</button>
</form>
</div>
</div>
</dialog>
<!-- Add Folder Modal -->
<dialog id="addFolderModal" class="modal">
<div class="modal-box w-11/12 max-w-5xl">
<h3 class="font-bold text-lg mb-4">Select Folders to Add</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="folderSelectionGrid">
<!-- Folder selection items will be dynamically added here -->
<div class="folder-item cursor-pointer hover:bg-base-200 p-4 rounded-lg border">
<div class="flex items-center space-x-4">
<i class="fas fa-folder text-2xl text-yellow-500"></i>
<div>
<h4 class="font-semibold">Project Folder</h4>
<p class="text-sm text-gray-500">C:\Users\YourName\Projects</p>
</div>
<input type="checkbox" class="checkbox ml-auto" />
</div>
</div>
</div>
<div class="modal-action">
<form method="dialog" class="flex space-x-2">
<button class="btn btn-ghost">Cancel</button>
<button id="confirmFolderSelection" class="btn btn-primary">Add Selected Folders</button>
</form>
</div>
</div>
</dialog>
<!-- New File Processing Overlay -->
<div id="fileProcessingOverlay"
class="fixed inset-0 z-[200] file-processing-overlay hidden flex items-center justify-center">
<div class="card w-[500px] bg-base-100 shadow-2xl border border-base-300">
<div class="card-body items-center text-center space-y-4">
<h2 class="card-title text-2xl font-bold">Processing Files</h2>
<!-- Linear Progress Bar -->
<div class="w-full">
<progress id="fileProgressBar" class="progress progress-primary w-full" value="0"
max="100"></progress>
</div>
<!-- Detailed Processing Info -->
<div class="w-full flex justify-between text-sm">
<span id="fileProcessCount" class="text-base-content/70">0/0 Files</span>
<span id="processPercentage" class="text-base-content/70">0%</span>
</div>
<!-- Detailed Status -->
<div class="w-full bg-base-300 rounded-lg p-3">
<p id="processStatus" class="text-sm text-base-content/80">
Initializing file processing...
</p>
</div>
</div>
</div>
</div>
<!-- Success Completion Popup -->
<div id="processCompletionPopup" class="fixed inset-0 z-[250] bg-black/70 hidden flex items-center justify-center">
<div class="card w-[450px] bg-base-100 shadow-2xl border border-base-300">
<div class="card-body items-center text-center space-y-4">
<div class="text-success">
<i class="fas fa-check-circle text-7xl"></i>
</div>
<h2 class="card-title text-2xl">Processing Complete</h2>
<p id="completionDetails" class="text-base-content/70">
8 files processed successfully
</p>
<div class="card-actions w-full">
<button id="continueButton" class="btn btn-primary btn-block">
Continue
<i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM fully loaded and parsed');
// Search Functionality
const searchToggle = document.getElementById('searchToggle');
const spotlightSearchInput = document.getElementById('spotlightSearchInput');
const searchResultsList = document.getElementById('searchResultsList');
const totalResultsCount = document.getElementById('totalResultsCount');
const addFolderBtn = document.getElementById('addFolderBtn');
const addFolderModal = document.getElementById('addFolderModal');
const confirmFolderSelection = document.getElementById('confirmFolderSelection');
const themeToggle = document.getElementById('themeToggle');
// Theme Toggle
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
// Toggle moon/sun icon
themeToggle.innerHTML = newTheme === 'dark'
? '<i class="fas fa-moon text-xl"></i>'
: '<i class="fas fa-sun text-xl"></i>';
});
// addFolderBtn.addEventListener('click', () => {
// addFolderModal.showModal();
// });
confirmFolderSelection.addEventListener('click', (e) => {
e.preventDefault();
const selectedFolders = document.querySelectorAll('#folderSelectionGrid .checkbox:checked');
if (selectedFolders.length > 0) {
// Logic to add selected folders
const folderNames = Array.from(selectedFolders).map(checkbox =>
checkbox.closest('.folder-item').querySelector('h4').textContent
);
// Confirm dialog
const confirmAdd = confirm(`Do you want to add ${folderNames.join(', ')} to your workspace?`);
if (confirmAdd) {
addFolderModal.close();
// Additional logic to process folder addition
}
}
});
// Close add folder when clicking outside or pressing Escape
addFolderModal.addEventListener('click', (e) => {
if (e.target === addFolderModal) {
addFolderModal.classList.add('hidden');
}
});
// Mock search data (replace with actual search implementation)
const mockSearchData = [
{
filename: 'index.js',
path: '/src/components/index.js',
matches: [
{
context: "This is a sample function in the index.js file that demonstrates how to use the search functionality with multiple text matches.",
lineNumber: 10
},
{
context: "Another match in the index.js file showing different search result scenarios.",
lineNumber: 25
}
]
},
{
filename: 'app.js',
path: '/src/app.js',
matches: [
{
context: "Main application logic for handling app-wide search and content management.",
lineNumber: 15
}
]
},
{
filename: 'utils.py',
path: '/src/utils.py',
matches: [
{
context: "Utility functions for searching and processing text data efficiently.",
lineNumber: 5
}
]
}
];
// spotlightSearchOverlay
const spotlightSearchOverlay = document.getElementById('spotlightSearchOverlay');
const searchResultsContainer = document.getElementById('searchResultsContainer');
// const addFolderAction = document.getElementById('addFolderAction');
// const createFileAction = document.getElementById('createFileAction');
// Toggle Spotlight Search
function toggleSpotlightSearch() {
spotlightSearchOverlay.classList.toggle('hidden');
if (!spotlightSearchOverlay.classList.contains('hidden')) {
spotlightSearchInput.focus();
}
}
// Additional Action Buttons
// addFolderAction.addEventListener('click', () => {
// // Trigger folder selection dialog
// document.getElementById('folder_modal').showModal();
// });
// createFileAction.addEventListener('click', () => {
// // Implement file creation logic
// alert('File creation functionality to be implemented');
// });
// spotlightSearchInput.addEventListener('input', (e) => {
// performSearch(e.target.value);
// });
searchToggle.addEventListener('click', toggleSpotlightSearch);
// Close spotlight search when clicking outside or pressing Escape
spotlightSearchOverlay.addEventListener('click', (e) => {
if (e.target === spotlightSearchOverlay) {
spotlightSearchOverlay.classList.add('hidden');
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
spotlightSearchOverlay.classList.add('hidden');
addFolderModal.classList.add('hidden');
}
});
// Close on clicking outside
spotlightSearchOverlay.addEventListener('click', (e) => {
if (e.target === spotlightSearchOverlay) {
spotlightSearchOverlay.classList.add('hidden');
}
});
function updateSearchResults(results) {
// Clear previous results
searchResultsList.innerHTML = '';
// Update total results count
totalResultsCount.textContent = `(${results.length} results)`;
// Populate results
results.forEach(result => {
const resultItem = document.createElement('div');
resultItem.className = 'p-4 hover:bg-base-200 cursor-pointer';
resultItem.innerHTML = `
<div class="flex justify-between items-center">
<div>
<h3 class="font-bold">${result.filename}</h3>
<p class="text-sm text-gray-500">${result.path}</p>
<p class="text-sm mt-2">${highlightSearchTerm(result.content)}</p>
</div>
<span class="badge badge-primary">${result.matches} matches</span>
</div>
`;
searchResultsList.appendChild(resultItem);
});
}
function highlightSearchTerm(text) {
const searchTerm = spotlightSearchInput.value.toLowerCase();
if (!searchTerm) return text;
const regex = new RegExp(`(${searchTerm})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}
// Chat Minimization
const minimizedChat = document.getElementById('minimizedChat');
const maximizeChat = document.getElementById('maximizeChat');
const chatContainer = document.getElementById('chatContainer');
// Minimize chat function
function minimizeChat() {
chatContainer.classList.add('hidden');
minimizedChat.classList.remove('hidden');
}
// Maximize chat function
maximizeChat.addEventListener('click', () => {
minimizedChat.classList.add('hidden');
chatContainer.classList.remove('hidden');
});
// File Explorer Toggle (previous implementation remains the same)
const folderToggle = document.getElementById('folderToggle');
const fileExplorer = document.getElementById('fileExplorer');
let isFileExplorerOpen = false;
folderToggle.addEventListener('click', () => {
isFileExplorerOpen = !isFileExplorerOpen;
if (isFileExplorerOpen) {
fileExplorer.classList.remove('w-0');
fileExplorer.classList.add('w-64');
chatContainer.classList.remove('flex-1');
chatContainer.classList.add('flex-grow');
} else {
fileExplorer.classList.remove('w-64');
fileExplorer.classList.add('w-0');
chatContainer.classList.remove('flex-grow');
chatContainer.classList.add('flex-1');
}
});
});
</script>
<script src="renderer.js"></script>
</body>
</html> - on the chat window below i want two items write in notion and send email and when send email is checked it should ask for email addresses seperated by comma in a popup and show as tags and when clicking clos - in bottom should show x emails selected. make sure to include neccesary components and styling to show the functionality correct in preview
