<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat</title>
    <link rel="icon" href="https://i.ibb.co/McjMCyJ/Leonardo-Phoenix-10-A-simple-and-professional-logo-for-an-AI-a-1-1.jpg" alt="Leonardo-Phoenix-10-A-simple-and-professional-logo-for-an-AI-a-1-1" border="0" type="image/jpg">
    <link rel="apple-touch-icon" href="https://i.ibb.co/McjMCyJ/Leonardo-Phoenix-10-A-simple-and-professional-logo-for-an-AI-a-1-1.jpg" alt="Leonardo-Phoenix-10-A-simple-and-professional-logo-for-an-AI-a-1-1" border="0"">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
  
</head>
<body class="bg-white h-screen flex flex-col justify-between">
    <header class="flex items-center justify-between p-4">
        <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="#">About</a>
            <a href="#">v2 Coming Soon</a>
            <a href="#">Terms of service</a>
            <a href="#">Privacy</a>
          </div>
        <h1 class="text-xl  text-black ">LampyAI</h1>
        <div class="flex space-x-4">
            <div class="bg-purple-100 p-2 rounded-full">
                <i class="fas fa-volume-mute text-black text-xl"></i>
            </div>
        </div>
    </header>
    <main class="flex-1 p-4 overflow-auto" id="chat-container">
        <div class="text-center text-gray-500 mb-4">Today</div>
        <div class="flex items-start space-x-2">
           
            <div class="bg-purple-200 text-black rounded-lg p-2">Hi there!</div>
        </div>
    </main>
    <footer class="p-4">
        <div class="bg-purple-300 p-2 rounded-lg flex items-center space-x-2 max-w-md mx-auto">
            <div class="bg-purple-100 p-2 rounded-full cursor-pointer" onclick="toggleEmojiPicker()">
                <i class="far fa-smile text-black text-xl"></i> <!-- Outlined Smiley Face Icon -->
            </div>
            <input class="flex-1 bg-white text-gray-500 rounded-full p-2" id="user-input" placeholder="Type your message here" type="text">
            <div class="bg-purple-100 p-2 rounded-full cursor-pointer" onclick="sendMessage()">
                <svg class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.20889 10.7327C3.9232 11.0326 3.93475 11.5074 4.23467 11.7931C4.5346 12.0788 5.00933 12.0672 5.29502 11.7673L11.2495 5.516V20.25C11.2495 20.6642 11.5853 21 11.9995 21C12.4137 21 12.7495 20.6642 12.7495 20.25V5.51565L18.7043 11.7673C18.99 12.0672 19.4648 12.0788 19.7647 11.7931C20.0646 11.5074 20.0762 11.0326 19.7905 10.7327L12.7238 3.31379C12.5627 3.14474 12.3573 3.04477 12.1438 3.01386C12.0971 3.00477 12.0489 3 11.9995 3C11.9498 3 11.9012 3.00483 11.8543 3.01406C11.6412 3.04518 11.4363 3.14509 11.2756 3.31379L4.20889 10.7327Z"></path>
                </svg>
            </div>
        </div>
    </footer>

    <!-- Emoji Picker -->
    <div class="emoji-picker" id="emoji-picker">
        <span onclick="addEmoji('😊')">😊</span>
        <span onclick="addEmoji('😂')">😂</span>
        <span onclick="addEmoji('😍')">😍</span>
        <span onclick="addEmoji('😎')">😎</span>
        <span onclick="addEmoji('😜')">😜</span>
        <span onclick="addEmoji('🥺')">🥺</span>
        <span onclick="addEmoji('😢')">😢</span>
        <span onclick="addEmoji('😇')">😇</span>
        <!-- Add more emojis as needed -->
    </div>
    <div class="error-message" id="error-message">Rate limit reached. Please wait a minute before trying again.</div>
    <div class="toast" id="toast">Copied to clipboard!</div>