DevDen/script.js

const welcomeScreen = document.getElementById("welcomeScreen");
const chatScreen = document.getElementById("chatScreen");
const chatMessages = document.getElementById("chatMessages");
const welcomeInput = document.getElementById("welcomeInput");
const chatInput = document.getElementById("chatInput");

const API_URL = "http://localhost:8000/api/chat";

let isInChat = false;

function switchToChat() {
  welcomeScreen.classList.add("hidden");
  chatScreen.classList.remove("hidden");
  chatInput.focus();
  isInChat = true;
}

function addMessage(text, type = "user") {
  const msg = document.createElement("div");
  msg.className = `message ${type}`;
  msg.innerHTML = `<div class="message-text">${escapeHtml(text)}</div>`;
  chatMessages.appendChild(msg);
  scrollToBottom();
}

function showTyping() {
  const typing = document.createElement("div");
  typing.className = "message assistant";
  typing.id = "typing";
  typing.innerHTML = `
        <div class="message-text">
            <div class="typing">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    `;
  chatMessages.appendChild(typing);
  scrollToBottom();
}

function hideTyping() {
  const typing = document.getElementById("typing");
  if (typing) typing.remove();
}

function scrollToBottom() {
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

async function sendMessage(text) {
  if (!text.trim()) return;

  if (!isInChat) {
    switchToChat();
  }

  addMessage(text, "user");
  chatInput.value = "";
  chatInput.disabled = true;

  showTyping();

  try {
    const response = await fetch(`${API_URL}/stream`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        message: text,
        provider: null,
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    hideTyping();

    // Create message element for streaming
    const msgDiv = document.createElement("div");
    msgDiv.className = "message assistant";
    const textDiv = document.createElement("div");
    textDiv.className = "message-text";
    msgDiv.appendChild(textDiv);
    chatMessages.appendChild(msgDiv);

    // Read stream
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let assistantMessage = "";

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value);
      const lines = chunk.split("\n");

      for (const line of lines) {
        if (line.startsWith("data: ")) {
          const data = JSON.parse(line.slice(6));

          if (data.error) {
            textDiv.textContent = `Error: ${data.error}`;
            break;
          }

          if (data.chunk) {
            assistantMessage += data.chunk;
            textDiv.textContent = assistantMessage;
            scrollToBottom();
          }

          if (data.done) {
            break;
          }
        }
      }
    }
  } catch (error) {
    hideTyping();
    addMessage(`Error: ${error.message}`, "assistant");
  } finally {
    chatInput.disabled = false;
    chatInput.focus();
  }
}

// Welcome screen input handler
welcomeInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    e.preventDefault();
    const text = welcomeInput.value.trim();
    if (text) {
      sendMessage(text);
    }
  }
});

// Chat input handler
chatInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    e.preventDefault();
    sendMessage(chatInput.value);
  }
});