<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enhanced Chat Interface</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
    }

    #chat-container {
      max-width: 600px;
      margin: 20px auto;
      border: 1px solid #ddd;
      border-radius: 12px;
      background-color: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    #messages {
      max-height: 500px;
      overflow-y: auto;
      padding: 20px;
      border-bottom: 1px solid #eee;
    }

    .message {
      margin: 12px 0;
      padding: 12px 16px;
      border-radius: 12px;
      max-width: 80%;
      word-wrap: break-word;
    }

    .message-wrapper {
      display: flex;
      margin: 8px 0;
    }

    .user-message-wrapper {
      justify-content: flex-end;
    }

    .user-message {
      background-color: #2196f3;
      color: white;
      margin-left: auto;
    }

    .bot-message {
      background-color: #f1f1f1;
      color: #333;
    }

    #input-area {
      display: flex;
      padding: 16px;
      gap: 12px;
      background-color: #fff;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
    }

    #user-input {
      flex: 1;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
      transition: border-color 0.3s;
    }

    #user-input:focus {
      outline: none;
      border-color: #2196f3;
    }

    #send-button {
      padding: 12px 24px;
      border: none;
      background-color: #2196f3;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
    }

    #send-button:hover {
      background-color: #1976d2;
    }

    #send-button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }

    .typing-indicator {
      display: flex;
      gap: 4px;
      padding: 12px 16px;
      background-color: #f1f1f1;
      border-radius: 12px;
      width: fit-content;
    }

    .typing-dot {
      width: 8px;
      height: 8px;
      background-color: #666;
      border-radius: 50%;
      animation: typing 1s infinite;
    }

    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typing {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    .error-message {
      background-color: #ffebee;
      color: #c62828;
      padding: 8px;
      margin: 8px 0;
      border-radius: 4px;
    }
  </style>


  <div id="chat-container">
    <div id="messages"></div>
    <div id="input-area">
      <input 
        id="user-input" 
        type="text" 
        placeholder="Type your message..."
        aria-label="Message input"
      >
      <button id="send-button">Send</button>
    </div>
  </div>

  <script>
    const API_URL = "https://langflow.wncp.ai/api/v1/run/e9cbcf64-0392-4d1a-88c5-60396c53adca?stream=false";
    const API_KEY = "sk-bnYxGra2rQRGaz1YojBNadorA9y_O1o8mN1UB7u3UAU";
    
    const messagesContainer = document.getElementById('messages');
    const userInput = document.getElementById('user-input');
    const sendButton = document.getElementById('send-button');

    let isWaitingForResponse = false;

    function createMessageElement(text, type) {
      const wrapper = document.createElement('div');
      wrapper.classList.add('message-wrapper');
      if (type === 'user') wrapper.classList.add('user-message-wrapper');

      const messageDiv = document.createElement('div');
      messageDiv.classList.add('message', `${type}-message`);
      messageDiv.textContent = text;

      wrapper.appendChild(messageDiv);
      return wrapper;
    }

    function showTypingIndicator() {
      const wrapper = document.createElement('div');
      wrapper.classList.add('message-wrapper');
      wrapper.id = 'typing-wrapper';

      const indicator = document.createElement('div');
      indicator.classList.add('typing-indicator');
      
      for (let i = 0; i < 3; i++) {
        const dot = document.createElement('div');
        dot.classList.add('typing-dot');
        indicator.appendChild(dot);
      }

      wrapper.appendChild(indicator);
      messagesContainer.appendChild(wrapper);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    function removeTypingIndicator() {
      const typingWrapper = document.getElementById('typing-wrapper');
      if (typingWrapper) {
        typingWrapper.remove();
      }
    }

    function showError(message) {
      const errorDiv = document.createElement('div');
      errorDiv.classList.add('error-message');
      errorDiv.textContent = message;
      messagesContainer.appendChild(errorDiv);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    async function sendMessage() {
      const userMessage = userInput.value.trim();
      if (!userMessage || isWaitingForResponse) return;

      isWaitingForResponse = true;
      sendButton.disabled = true;
      userInput.value = '';

      // Display user message
      messagesContainer.appendChild(createMessageElement(userMessage, 'user'));
      showTypingIndicator();

      try {
        const response = await fetch(API_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'x-api-key': API_KEY
          },
          body: JSON.stringify({
            input_value: userMessage,
            output_type: "chat",
            input_type: "chat",
            tweaks: {
              "ChatInput-k2rY0": {},
              "Prompt-kCAbD": {},
              "Memory-oPKnd": {},
              "OpenAIModel-vlmqs": {},
              "ChatOutput-qkr7L": {},
              "Chroma-orNlB": {},
              "File-YyqAo": {},
              "SplitText-bWeQ6": {},
              "OpenAIEmbeddings-FievY": {},
              "Chroma-5En3W": {},
              "ParseData-jiVZX": {},
              "OpenAIEmbeddings-CrufR": {}
            }
          })
        });

        const data = await response.json();
        removeTypingIndicator();

        if (response.ok) {
          try {
            // Navigate the nested structure to get the message
            const botResponse = data.outputs?.[0]?.outputs?.[0]?.messages?.[0]?.message;
            
            if (botResponse) {
              messagesContainer.appendChild(
                createMessageElement(String(botResponse), 'bot')
              );
            } else {
              console.error('Message path not found in response:', data);
              showError('Unable to get response from API');
            }
          } catch (error) {
            console.error('Error extracting message:', error);
            showError('Error processing API response');
          }
        } else {
          showError(`Error: ${data.detail || 'Something went wrong'}`);
        }
      } catch (error) {
        removeTypingIndicator();
        showError(`Error: ${error.message}`);
      } finally {
        isWaitingForResponse = false;
        sendButton.disabled = false;
        userInput.focus();
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
      }
    }

    sendButton.addEventListener('click', sendMessage);
    userInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') sendMessage();
    });

    // Focus input on page load
    userInput.focus();
  </script>