Crossberry's picture
Crate ai chat interface
42b93cf verified
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuralNest Chat</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="components/navbar.js"></script>
<script src="components/chat-sidebar.js"></script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 h-full flex flex-col">
<custom-navbar></custom-navbar>
<div class="flex flex-1 overflow-hidden">
<custom-chat-sidebar></custom-chat-sidebar>
<main class="flex-1 flex flex-col bg-white dark:bg-gray-800 overflow-hidden">
<!-- Chat header -->
<div class="border-b border-gray-200 dark:border-gray-700 p-4 flex items-center">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center">
<i data-feather="cpu" class="text-indigo-600 dark:text-indigo-300"></i>
</div>
<div>
<h2 class="font-semibold text-gray-800 dark:text-gray-100">AI Assistant</h2>
<p class="text-xs text-gray-500 dark:text-gray-400">Online</p>
</div>
</div>
</div>
<!-- Chat messages -->
<div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4">
<!-- Messages will be inserted here by JavaScript -->
</div>
<!-- Message input -->
<div class="border-t border-gray-200 dark:border-gray-700 p-4">
<form id="message-form" class="flex space-x-2">
<input
type="text"
id="message-input"
placeholder="Type your message..."
class="flex-1 px-4 py-2 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800 dark:text-gray-100"
autocomplete="off"
>
<button
type="submit"
class="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white flex items-center justify-center transition-colors"
>
<i data-feather="send"></i>
</button>
</form>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
NeuralNest may produce inaccurate information about people, places, or facts.
</p>
</div>
</main>
</div>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>