<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Chat by AR</title>
  <link rel="icon" href="https://ar-hosting.pages.dev/1734980950600.jpeg" type="image/x-icon">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
      color: #333;
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    .container {
      max-width: 600px;
      width: 100%;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .container:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }
    .chatbox {
      background-color: #f9f9f9;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
      max-height: 400px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .chatbox .message {
      padding: 10px;
      border-radius: 10px;
      max-width: 80%;
      word-wrap: break-word;
      white-space: pre-wrap;
      transition: background-color 0.2s;
    }
    .chatbox .message.user {
      background-color: #dcf8c6;
      align-self: flex-end;
    }
    .chatbox .message.ai {
      background-color: #f1f0f0;
      align-self: flex-start;
    }
    .chatbox .message:hover {
      background-color: #e6f7ff;
    }
    .input-box {
      display: flex;
      gap: 10px;
      width: 100%;
    }
    .input-box textarea {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #ccc;
      resize: none;
      max-height: 100px;
      transition: border-color 0.2s;
    }
    .input-box textarea:focus {
      border-color: #4CAF50;
      outline: none;
    }
    .input-box button {
      padding: 10px;
      border-radius: 10px;
      border: none;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }
    .input-box button:hover {
      background-color: #45a049;
      transform: scale(1.05);
    }
    .notice {
      margin-top: 10px;
      color: red;
      text-align: center;
      font-size: 0.9em;
    }
    .new-topic {
      margin-top: 20px;
      padding: 10px;
      border-radius: 10px;
      border: none;
      background-color: #f44336;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }
    .new-topic:hover {
      background-color: #e53935;
      transform: scale(1.05);
    }
    .header {
      text-align: center;
      margin-bottom: 20px;
    }
    .header h1 {
      margin: 0;
      font-size: 2em;
      color: #333;
    }
    .header p {
      margin: 5px 0;
      color: #666;
    }
    .loading {
      text-align: center;
      margin-top: 10px;
    }
    .loading span {
      display: inline-block;
      margin: 0 2px;
      animation: bounce 0.6s infinite alternate;
    }
    .loading span:nth-child(2) {
      animation-delay: 0.2s;
    }
    .loading span:nth-child(3) {
      animation-delay: 0.4s;
    }
    @keyframes bounce {
      to { transform: translateY(-10px); }
    }
    .mode-selector {
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .mode-selector select {
      padding: 5px;
      border-radius: 5px;
      border: 1px solid #ccc;
      transition: border-color 0.2s;
    }
    .mode-selector select:focus {
      border-color: #4CAF50;
      outline: none;
    }
    @media (max-width: 768px) {
      .input-box, .mode-selector {
        flex-direction: column;
      }
      .input-box button {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>AI Chat</h1>
      <p class="notice">This site uses AI, it may display inaccurate info, so double-check its responses.</p>
      <p class="notice">This site will not save any data.</p>
    </div>
    <div class="chatbox" id="chatbox"></div>
    <div class="input-box">
      <textarea id="userInput" placeholder="Type your message here..."></textarea>
      <button id="sendButton" disabled>Send</button>
    </div>
    <button class="new-topic" id="newTopicButton">New Topic</button>
    <div class="mode-selector">
      <label for="mode">Model:</label>
      <select id="mode">
        <option value="gpt-4o-mini">gpt-4o-mini</option>
        <option value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
        <option value="meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo">Meta-Llama-3.1-70B</option>
        <option value="mistralai/Mixtral-8x7B-Instruct-v0.1">Mixtral-8x7B</option>
      </select>
    </div>
  </div>

  <script>
    let isResponding = false;
    const chatbox = document.getElementById('chatbox');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');
    const newTopicButton = document.getElementById('newTopicButton');
    const modeSelector = document.getElementById('mode');

    userInput.addEventListener('input', () => {
      sendButton.disabled = !userInput.value.trim();
    });

    sendButton.addEventListener('click', sendMessage);
    userInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
      }
    });

    newTopicButton.addEventListener('click', () => {
      chatbox.innerHTML = '';
      userInput.value = '';
    });

    async function sendMessage() {
      if (isResponding) return;

      const userText = userInput.value.trim();
      if (!userText) return;

      chatbox.innerHTML += `<div class="message user">${userText}</div>`;
      userInput.value = '';
      sendButton.disabled = true;

      const loading = document.createElement('div');
      loading.className = 'message ai loading';
      loading.innerHTML = 'AI is generating<span>.</span><span>.</span><span>.</span>';
      chatbox.appendChild(loading);
      chatbox.scrollTop = chatbox.scrollHeight;

      isResponding = true;

      try {
        const selectedModel = modeSelector.value;
        const response = await fetch(`https://aichat.itz-ashlynn.workers.dev/chat/?prompt=${encodeURIComponent(userText)}&model=${selectedModel}`);
        const data = await response.json();

        chatbox.removeChild(loading);
        chatbox.innerHTML += `<div class="message ai">${data.response}</div>`;
        chatbox.scrollTop = chatbox.scrollHeight;
      } catch (error) {
        chatbox.removeChild(loading);
        chatbox.innerHTML += `<div class="message ai">Error: Unable to fetch response.</div>`;
      } finally {
        isResponding = false;
        sendButton.disabled = false;
      }
    }
  </script>
</body>
</html>
