<html>
<head>
  <base href="https://aicodingyourwebsitefull.com/design-new-tailwind-mdel">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced AI Chat Interface (GPT/Claude/Gemini)</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js" defer></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.6.2/dist/index.min.js"></script>
  <style>
    body.dark {
      background-color: #1f2937;
      color: #f3f4f6;
    }
    .chat-container {
      height: calc(100vh - 160px);
    }
    .message-bubble {
      max-width: 80%;
      animation: fadeIn 0.5s ease-in-out;
    }
    .message-bubble p {
      margin-bottom: 1rem; 
      line-height: 1.6; 
    }
    .gpt-icon { background-color: #10a37f; }
    .claude-icon { background-color: #6f42c1; }
    .gemini-icon { background-color: #4285f4; }
    .user-icon { background-color: #5436da; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .toggle-switch {
      transition: background-color 0.3s;
    }
    .toggle-switch input:checked ~ .slider {
      background-color: #4ade80;
    }
    .toggle-switch input:checked ~ .slider:before {
      transform: translateX(26px);
    }
    #user-input {
      padding: 1.2rem; 
      margin-bottom: 1rem; 
    }
    .dark .message-bubble {
      background-color: #374151; 
    }
    .dark .emoji {
      filter: brightness(0) invert(1); 
    }
    button:hover {
      transform: scale(1.05);
      transition: transform 0.2s;
    }
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .message-bubble {
      animation: fadeInUp 0.5s ease forwards;
    }
    .toggle-switch .slider {
      transition: background-color 0.3s, transform 0.3s;
    }
  </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  
  <div class="flex h-screen">
    <!-- Sidebar -->
    <aside class="w-64 bg-gray-900 text-white p-4 hidden md:block relative">
      <div class="mb-6 flex justify-between items-center">
        <h2 class="text-xl font-semibold">AI Chats</h2>
        <div class="flex items-center space-x-2">
          <span class="text-sm">Dark Mode</span>
          <label class="toggle-switch relative inline-block w-10 h-6">
            <input type="checkbox" id="dark-mode-toggle" class="hidden">
            <span class="slider absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-600 rounded-full"></span>
          </label>
        </div>
      </div>
      <div class="mb-4">
        <a href="https://example.com/new-chat" class="w-full flex items-center text-left px-3 py-2 rounded-md bg-white/10 hover:bg-white/20 transition">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
          </svg>
          <span>New Chat</span>
        </a>
      </div>
      <nav>
        <ul class="space-y-2">
          <li><a href="https://example.com/chat/1" class="block px-3 py-2 text-sm rounded-md hover:bg-white/10 transition flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path d="M8 9V5m8 4V5m-8 4h8m-8 0L4 19m16-14L12 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Previous Chat 1
          </a></li>
          <li><a href="https://example.com/chat/2" class="block px-3 py-2 text-sm rounded-md hover:bg-white/10 transition flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path d="M8 9V5m8 4V5m-8 4h8m-8 0L4 19m16-14L12 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Previous Chat 2
          </a></li>
          <li><a href="https://example.com/chat/3" class="block px-3 py-2 text-sm rounded-md hover:bg-white/10 transition flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path d="M8 9V5m8 4V5m-8 4h8m-8 0L4 19m16-14L12 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Previous Chat 3
          </a></li>
        </ul>
      </nav>
      <div class="absolute bottom-4 left-4 right-4">
        <a href="https://example.com/logout" class="flex items-center space-x-2 text-sm hover:bg-white/10 rounded-md px-3 py-2 transition">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H3m0 0l6-6m-6 6l6 6M18 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span>Log Out</span>
        </a>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 flex flex-col">
      <!-- Header for Mobile -->
      <header class="md:hidden bg-gray-900 text-white p-4 flex justify-between items-center">
        <h2 class="text-lg font-semibold">AI Chats</h2>
        <button id="mobile-menu-button" class="text-white focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </header>

      <!-- Mobile Menu -->
      <div id="mobile-menu" class="md:hidden hidden absolute top-16 left-0 w-full bg-gray-900 text-white p-4 z-10">
        <nav>
          <ul class="space-y-2">
            <li><a href="https://example.com/chat/1" class="block px-3 py-2 text-sm rounded-md hover:bg-white/10 transition flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path d="M8 9V5m8 4V5m-8 4h8m-8 0L4 19m16-14L12 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Previous Chat 1
            </a></li>
            <li><a href="https://example.com/chat/2" class="block px-3 py-2 text-sm rounded-md hover:bg-white/10 transition flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path d="M8 9V5m8 4V5m-8 4h8m-8 0L4 19m16-14L12 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Previous Chat 2
            </a></li>
            <li><a href="https://example.com/chat/3" class="block px-3 py-2 text-sm rounded-md hover:bg-white/10 transition flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path d="M8 9V5m8 4V5m-8 4h8m-8 0L4 19m16-14L12 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Previous Chat 3
            </a></li>
          </ul>
        </nav>
        <div class="mt-4">
          <a href="https://example.com/logout" class="flex items-center space-x-2 text-sm hover:bg-white/10 rounded-md px-3 py-2 transition">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H3m0 0l6-6m-6 6l6 6M18 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>Log Out</span>
          </a>
        </div>
      </div>

      <!-- Chat Area -->
      <div class="flex-1 overflow-hidden">
        <div id="chat-messages" class="chat-container overflow-y-auto py-8 px-4 sm:px-8 md:px-16 lg:px-24 space-y-6">
          <!-- Messages will be dynamically added here -->
        </div>
      </div>

      <!-- Input Area -->
      <div class="p-4 border-t bg-white dark:bg-gray-800">
        <form id="chat-form" class="max-w-3xl mx-auto">
          <div class="relative">
            <textarea id="user-input" rows="1" class="w-full border rounded-lg p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 resize-none transition" placeholder="Send a message"></textarea>
            <button type="submit" class="absolute right-3 bottom-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
              </svg>
            </button>
          </div>
          <div class="flex items-center space-x-2 mt-2">
            <input type="file" id="image-upload" accept="image/*" class="hidden">
            <label for="image-upload" class="cursor-pointer text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h10a4 4 0 004-4V7a4 4 0 00-4-4H7a4 4 0 00-4 4v8z" />
              </svg>
            </label>
          </div>
          <div class="flex items-center space-x-2 mt-2">
            <button type="button" id="emoji-button" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
              😊
            </button>
          </div>
        </form>
        <div class="flex justify-center items-center mt-4 space-x-4">
          <button id="gpt-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition">GPT</button>
          <button id="claude-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition">Claude</button>
          <button id="gemini-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition">Gemini</button>
          <button id="model1o-mini-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition">Model1o-Mini</button>
          <button id="model1o-preview-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition">Model1o-Preview</button>
        </div>
        <p class="text-xs text-center mt-2 text-gray-500 dark:text-gray-400">AI Chat Interface Demo. Responses are simulated for demonstration purposes.</p>
      </div>
    </main>
  </div>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
    const chatMessages = document.getElementById('chat-messages');
    const chatForm = document.getElementById('chat-form');
    const userInput = document.getElementById('user-input');
    const gptBtn = document.getElementById('gpt-btn');
    const claudeBtn = document.getElementById('claude-btn');
    const geminiBtn = document.getElementById('gemini-btn');
    const model1oMiniBtn = document.getElementById('model1o-mini-btn');
    const model1oPreviewBtn = document.getElementById('model1o-preview-btn');
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const imageUpload = document.getElementById('image-upload');
    const emojiButton = document.getElementById('emoji-button');
    const emojiPicker = new EmojiButton();

    let currentModel = 'gpt';

    function addMessage(content, sender) {
      const messageDiv = document.createElement('div');
      messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
      
      const innerDiv = document.createElement('div');
      innerDiv.className = `flex items-start space-x-4 ${sender === 'user' ? 'flex-row-reverse' : ''}`;

      const iconDiv = document.createElement('div');
      iconDiv.className = `w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold ${sender}-icon`;
      iconDiv.textContent = sender === 'user' ? 'U' : sender.charAt(0).toUpperCase();

      const contentDiv = document.createElement('div');
      contentDiv.className = 'message-bubble bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow';
      contentDiv.innerHTML = `<p>${content}</p>`;

      innerDiv.appendChild(iconDiv);
      innerDiv.appendChild(contentDiv);
      messageDiv.appendChild(innerDiv);
      chatMessages.appendChild(messageDiv);
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function addImageMessage(src, sender) {
      const messageDiv = document.createElement('div');
      messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;

      const innerDiv = document.createElement('div');
      innerDiv.className = `flex items-start space-x-4 ${sender === 'user' ? 'flex-row-reverse' : ''}`;

      const iconDiv = document.createElement('div');
      iconDiv.className = `w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold ${sender}-icon`;
      iconDiv.textContent = sender === 'user' ? 'U' : sender.charAt(0).toUpperCase();

      const contentDiv = document.createElement('div');
      contentDiv.className = 'message-bubble bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow';
      contentDiv.innerHTML = `<img src="${src}" alt="Uploaded image" class="max-w-xs rounded"/>`;

      innerDiv.appendChild(iconDiv);
      innerDiv.appendChild(contentDiv);
      messageDiv.appendChild(innerDiv);
      chatMessages.appendChild(messageDiv);
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function getBotResponse(userMessage, model) {
      const responses = {
        gpt: [
          "As an AI language model, I'd say that's an interesting point. Can you elaborate?",
          "Based on my training data, there are multiple perspectives on this. What's your take?",
          "That's a complex topic. Let me break it down for you based on the information I have.",
        ],
        claude: [
          "Interesting question. I'll do my best to provide an objective analysis based on available information.",
          "I don't actually have personal opinions, but here's what I know about that topic from my training:",
          "To approach this systematically, let's break it down into key components and examine each one.",
        ],
        gemini: [
          "Great question! Let me tap into my multimodal capabilities to give you a comprehensive answer.",
          "I can analyze this from various angles - textual, visual, and even code-based if relevant. What specific aspect interests you most?",
          "As a large language model with diverse training, I can offer insights from multiple domains. Shall we explore this topic further?",
        ],
        'model1o-mini': [
          "Sure! Here's a brief response based on your input.",
          "Let me provide a concise answer to your question.",
          "Absolutely, here's a short explanation for you.",
        ],
        'model1o-preview': [
          "I'd be happy to provide a detailed response. Let's dive into the specifics.",
          "Certainly! Here's an in-depth analysis based on your query.",
          "Of course, let's explore this topic comprehensively.",
        ]
      };
      return responses[model][Math.floor(Math.random() * responses[model].length)];
    }

    chatForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const userMessage = userInput.value.trim();
      const charLimit = {
        gpt: 2000,
        claude: 2000,
        gemini: 2000,
        'model1o-mini': 1000,
        'model1o-preview': 4000,
      };
      if (userMessage.length > charLimit[currentModel]) {
        alert(`Your message exceeds the character limit of ${charLimit[currentModel]} characters for ${currentModel}.`);
        return;
      }
      if (userMessage) {
        addMessage(userMessage, 'user');
        userInput.value = '';
        userInput.style.height = 'auto';

        setTimeout(() => {
          const botResponse = getBotResponse(userMessage, currentModel);
          addMessage(botResponse, currentModel);
        }, 1000);
      }
    });

    userInput.addEventListener('input', function() {
      this.style.height = 'auto';
      this.style.height = (this.scrollHeight) + 'px';
    });

    [gptBtn, claudeBtn, geminiBtn, model1oMiniBtn, model1oPreviewBtn].forEach(btn => {
      btn.addEventListener('click', () => {
        currentModel = btn.id.split('-')[0];
        [gptBtn, claudeBtn, geminiBtn, model1oMiniBtn, model1oPreviewBtn].forEach(b => b.classList.remove('bg-gray-300', 'dark:bg-gray-600'));
        btn.classList.add('bg-gray-300', 'dark:bg-gray-600');
      });
    });

    darkModeToggle.addEventListener('change', () => {
      document.body.classList.toggle('dark');
      if (darkModeToggle.checked) {
        localStorage.setItem('theme', 'dark');
      } else {
        localStorage.setItem('theme', 'light');
      }
    });

    imageUpload.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(event) {
          addImageMessage(event.target.result, 'user');
        };
        reader.readAsDataURL(file);
      }
    });

    emojiPicker.on('emoji', emoji => {
      userInput.value += emoji;
      userInput.dispatchEvent(new Event('input'));
    });

    emojiButton.addEventListener('click', () => {
      emojiPicker.togglePicker(emojiButton);
    });

    // Initialize theme
    if (localStorage.getItem('theme') === 'dark') {
      document.body.classList.add('dark');
      darkModeToggle.checked = true;
    }

    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });

    // Initial Message
    addMessage("Hello! I'm an AI assistant. How can I help you today?", 'gpt');
  });
  </script>

</body>
</html>

melhora este codigo adicionando aparte no javascript o @generative Install the SDK package
npm install @google/generative-ai
Initialize the model
const { GoogleGenerativeAI } = require("@google/generative-ai");

const genAI = new GoogleGenerativeAI(process.env.API_KEY);

const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

melhora o dsign todo pq ta bem feio