chat-assistant-dit/src/ui.js

A lightweight, customizable chat assistant widget for web and React apps.

export function createChatWidget(options = {}) {
  if (document.getElementById("chat-widget-container")) return;

  const container = document.createElement("div");
  container.id = "chat-widget-container";
  document.body.appendChild(container);

  container.innerHTML = `
    <div class="chat-button" id="chat-toggle">&#128172;</div>

    <div class="chat-box hidden" id="chat-box">
      <div class="chat-header">
        <span>AI Assistant</span>
        <button id="chat-close">&times;</button>
      </div>
      <div class="chat-messages" id="chat-messages"></div>
      <form class="chat-form" id="chat-form">
        <input type="text" id="chat-input" placeholder="Type your message..." />
        <button type="submit">Send</button>
      </form>
    </div>
  `;

  const toggle = container.querySelector("#chat-toggle");
  const box = container.querySelector("#chat-box");
  const close = container.querySelector("#chat-close");
  const form = container.querySelector("#chat-form");
  const input = container.querySelector("#chat-input");
  const messages = container.querySelector("#chat-messages");

  toggle.addEventListener("click", () => {
    box.classList.remove("hidden");

    // ✅ Add welcome message when opened (only once)
    if (!messages.dataset.welcomeShown) {
      const welcomeText =
        options.welcomeMessage || "👋 Hello! How can I help you today?";
      addMessage("Bot", welcomeText);
      messages.dataset.welcomeShown = "true";
    }
  });

  close.addEventListener("click", () => box.classList.add("hidden"));

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const text = input.value.trim();
    if (!text) return;
    addMessage("You", text);
    input.value = "";

    // Simulate AI response
    setTimeout(() => {
      addMessage("Bot", `You said: "${text}"`);
    }, 600);
  });

  function addMessage(sender, text) {
    const msg = document.createElement("div");
    msg.className = `chat-message ${sender === "You" ? "user" : "bot"}`;
    msg.textContent = `${sender}: ${text}`;
    messages.appendChild(msg);
    messages.scrollTop = messages.scrollHeight;
  }
}


















// export function createChatWidget() {
//   if (document.getElementById('chat-widget-container')) return;

//   const container = document.createElement('div');
//   container.id = 'chat-widget-container';
//   document.body.appendChild(container);

//   container.innerHTML = `
//     <div class="chat-button" id="chat-toggle">&#128172;</div>

//     <div class="chat-box hidden" id="chat-box">
//       <div class="chat-header">
//         <span>AI Assistant</span>
//         <button id="chat-close">&times;</button>
//       </div>
//       <div class="chat-messages" id="chat-messages"></div>
//       <form class="chat-form" id="chat-form">
//         <input type="text" id="chat-input" placeholder="Type your message..." />
//         <button type="submit">Send</button>
//       </form>
//     </div>
//   `;

//   const toggle = container.querySelector('#chat-toggle');
//   const box = container.querySelector('#chat-box');
//   const close = container.querySelector('#chat-close');
//   const form = container.querySelector('#chat-form');
//   const input = container.querySelector('#chat-input');
//   const messages = container.querySelector('#chat-messages');

//   toggle.addEventListener('click', () => box.classList.remove('hidden'));
//   close.addEventListener('click', () => box.classList.add('hidden'));

//   form.addEventListener('submit', (e) => {
//     e.preventDefault();
//     const text = input.value.trim();
//     if (!text) return;
//     addMessage('You', text);
//     input.value = '';

//     // Simulate AI response
//     setTimeout(() => {
//       addMessage('Bot', `You said: "${text}"`);
//     }, 600);
//   });

//   function addMessage(sender, text) {
//     const msg = document.createElement('div');
//     msg.className = `chat-message ${sender === 'You' ? 'user' : 'bot'}`;
//     msg.textContent = `${sender}: ${text}`;
//     messages.appendChild(msg);
//     messages.scrollTop = messages.scrollHeight;
//   }
// }