universal-chatbot-saas 1.0.0

package/public/portal/admin-users.js

@@ -0,0 +1,286 @@
+let users = [];
+let bots = [];
+let selectedUser = null;
+let isNewUser = false;
+let searchTerm = '';
+let activeFilter = 'all';
+let currentPage = 1;
+let pageSize = 10;
+
+const el = {
+  status: document.getElementById('status'),
+  usersTableBody: document.getElementById('usersTableBody'),
+  modalBackdrop: document.getElementById('modalBackdrop'),
+  closeModalBtn: document.getElementById('closeModalBtn'),
+  formTitle: document.getElementById('formTitle'),
+  username: document.getElementById('username'),
+  password: document.getElementById('password'),
+  passwordHint: document.getElementById('passwordHint'),
+  isActive: document.getElementById('isActive'),
+  botChecklist: document.getElementById('botChecklist'),
+  newUserBtn: document.getElementById('newUserBtn'),
+  refreshBtn: document.getElementById('refreshBtn'),
+  searchInput: document.getElementById('searchInput'),
+  activeFilter: document.getElementById('activeFilter'),
+  pageSize: document.getElementById('pageSize'),
+  prevPageBtn: document.getElementById('prevPageBtn'),
+  nextPageBtn: document.getElementById('nextPageBtn'),
+  pageIndicator: document.getElementById('pageIndicator'),
+  pagerInfo: document.getElementById('pagerInfo'),
+  saveBtn: document.getElementById('saveBtn'),
+  cancelBtn: document.getElementById('cancelBtn'),
+  deleteBtn: document.getElementById('deleteBtn')
+};
+
+function showStatus(message, type = 'success') {
+  el.status.textContent = message;
+  el.status.className = `status ${type}`;
+  if (type === 'success') {
+    setTimeout(() => { el.status.className = 'status'; }, 4000);
+  }
+}
+
+function escapeHtml(text) {
+  if (!text) return '';
+  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+  return String(text).replace(/[&<>"']/g, (m) => map[m]);
+}
+
+function selectedBotIdsFromForm() {
+  return Array.from(el.botChecklist.querySelectorAll('input[type="checkbox"]:checked')).map((node) => node.value);
+}
+
+function renderBotChecklist(selectedIds) {
+  if (!bots.length) {
+    el.botChecklist.innerHTML = '<div class="muted">No bots found. Create bots first.</div>';
+    return;
+  }
+
+  const selected = new Set(selectedIds || []);
+  el.botChecklist.innerHTML = bots.map((bot) => {
+    const checked = selected.has(bot.id) ? 'checked' : '';
+    return `<label class="bot-item"><input type="checkbox" value="${escapeHtml(bot.id)}" ${checked} /> <span>${escapeHtml(bot.name || bot.id)}</span> <span class="muted">(${escapeHtml(bot.id)})</span></label>`;
+  }).join('');
+}
+
+function renderUsers() {
+  const filtered = users.filter((user) => {
+    if (activeFilter === 'active' && !user.is_active) return false;
+    if (activeFilter === 'inactive' && user.is_active) return false;
+    if (!searchTerm) return true;
+    const haystack = [String(user.username || '').toLowerCase(), ...(Array.isArray(user.bot_ids) ? user.bot_ids.map((id) => String(id || '').toLowerCase()) : [])].join(' ');
+    return haystack.includes(searchTerm);
+  });
+
+  const total = filtered.length;
+  const totalPages = Math.max(Math.ceil(total / pageSize), 1);
+  if (currentPage > totalPages) currentPage = totalPages;
+  const start = (currentPage - 1) * pageSize;
+  const pageRows = filtered.slice(start, start + pageSize);
+
+  el.pageIndicator.textContent = `Page ${currentPage} of ${totalPages}`;
+  el.pagerInfo.textContent = total ? `Showing ${start + 1}-${Math.min(start + pageSize, total)} of ${total} users` : 'Showing 0 users';
+  el.prevPageBtn.disabled = currentPage <= 1;
+  el.nextPageBtn.disabled = currentPage >= totalPages;
+
+  if (!pageRows.length) {
+    el.usersTableBody.innerHTML = '<tr><td colspan="4"><div class="empty">No users available</div></td></tr>';
+    return;
+  }
+
+  el.usersTableBody.innerHTML = pageRows.map((user) => {
+    const chips = (user.bot_ids || []).map((botId) => `<span class="chip">${escapeHtml(botId)}</span>`).join('');
+    return `
+      <tr data-id="${user.id}">
+        <td>${escapeHtml(user.username)}</td>
+        <td>${user.is_active ? 'Yes' : 'No'}</td>
+        <td><div class="chips">${chips || '<span class="muted">None</span>'}</div></td>
+        <td>
+          <div class="actions">
+            <button class="secondary action-btn" data-action="edit" data-id="${user.id}">Edit</button>
+            <button class="danger action-btn" data-action="delete" data-id="${user.id}">Delete</button>
+          </div>
+        </td>
+      </tr>
+    `;
+  }).join('');
+
+  Array.from(el.usersTableBody.querySelectorAll('button[data-action]')).forEach((button) => {
+    button.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const id = Number(button.getAttribute('data-id'));
+      const action = button.getAttribute('data-action');
+      const user = users.find((item) => item.id === id);
+      if (!user) return;
+      if (action === 'edit') {
+        openEditUser(user);
+      } else if (action === 'delete') {
+        deleteUser(user).catch((error) => showStatus(error.message, 'error'));
+      }
+    });
+  });
+}
+
+async function loadBots() {
+  const response = await fetch('/admin/bots');
+  if (!response.ok) throw new Error(`Failed to load bots (${response.status})`);
+  bots = await response.json();
+}
+
+async function loadUsers() {
+  const response = await fetch('/admin/users');
+  if (!response.ok) {
+    const errorBody = await response.json().catch(() => ({}));
+    throw new Error(errorBody.error || `Failed to load users (${response.status})`);
+  }
+  users = await response.json();
+}
+
+async function refreshAll() {
+  try {
+    el.refreshBtn.disabled = true;
+    await Promise.all([loadBots(), loadUsers()]);
+    currentPage = 1;
+    renderUsers();
+    if (selectedUser) {
+      const latest = users.find((u) => u.id === selectedUser.id);
+      if (latest) openEditUser(latest);
+      else cancelForm();
+    }
+    showStatus('Users loaded', 'success');
+  } catch (error) {
+    showStatus(error.message, 'error');
+  } finally {
+    el.refreshBtn.disabled = false;
+  }
+}
+
+function openNewUser() {
+  isNewUser = true;
+  selectedUser = null;
+  el.formTitle.textContent = 'New User';
+  el.username.value = '';
+  el.password.value = '';
+  el.password.placeholder = 'Enter password';
+  el.passwordHint.textContent = '*';
+  el.isActive.checked = true;
+  el.deleteBtn.style.display = 'none';
+  renderBotChecklist([]);
+  openModal();
+}
+
+function openEditUser(user) {
+  isNewUser = false;
+  selectedUser = user;
+  el.formTitle.textContent = `Edit User: ${user.username}`;
+  el.username.value = user.username || '';
+  el.password.value = '';
+  el.password.placeholder = 'Leave blank to keep current password';
+  el.passwordHint.textContent = '(optional on edit)';
+  el.isActive.checked = Boolean(user.is_active);
+  el.deleteBtn.style.display = 'inline-block';
+  renderBotChecklist(user.bot_ids || []);
+  openModal();
+}
+
+function openModal() {
+  el.modalBackdrop.classList.add('visible');
+  el.modalBackdrop.setAttribute('aria-hidden', 'false');
+}
+
+function closeModal() {
+  el.modalBackdrop.classList.remove('visible');
+  el.modalBackdrop.setAttribute('aria-hidden', 'true');
+}
+
+function cancelForm() {
+  selectedUser = null;
+  isNewUser = false;
+  closeModal();
+  renderUsers();
+}
+
+async function saveUser() {
+  const username = el.username.value.trim();
+  const password = el.password.value.trim();
+  const payload = {
+    username,
+    is_active: el.isActive.checked,
+    bot_ids: selectedBotIdsFromForm()
+  };
+
+  if (!username) {
+    showStatus('Username is required', 'error');
+    return;
+  }
+  if (isNewUser && !password) {
+    showStatus('Password is required for new user', 'error');
+    return;
+  }
+  if (password) payload.password = password;
+
+  try {
+    el.saveBtn.disabled = true;
+    const response = isNewUser
+      ? await fetch('/admin/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+      : await fetch(`/admin/users/${selectedUser.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
+
+    if (!response.ok) {
+      const errorBody = await response.json().catch(() => ({}));
+      throw new Error(errorBody.error || `Request failed (${response.status})`);
+    }
+
+    showStatus(isNewUser ? 'User created' : 'User updated', 'success');
+    await refreshAll();
+    cancelForm();
+  } catch (error) {
+    showStatus(error.message, 'error');
+  } finally {
+    el.saveBtn.disabled = false;
+  }
+}
+
+async function deleteUser(userArg) {
+  const user = userArg || selectedUser;
+  if (!user) return;
+  const confirmed = confirm(`Delete user ${user.username}?`);
+  if (!confirmed) return;
+
+  try {
+    el.deleteBtn.disabled = true;
+    const response = await fetch(`/admin/users/${user.id}`, { method: 'DELETE' });
+    if (!response.ok) {
+      const errorBody = await response.json().catch(() => ({}));
+      throw new Error(errorBody.error || `Delete failed (${response.status})`);
+    }
+    showStatus('User deleted', 'success');
+    await refreshAll();
+    cancelForm();
+  } catch (error) {
+    showStatus(error.message, 'error');
+  } finally {
+    el.deleteBtn.disabled = false;
+  }
+}
+
+el.newUserBtn.addEventListener('click', openNewUser);
+el.refreshBtn.addEventListener('click', refreshAll);
+el.saveBtn.addEventListener('click', saveUser);
+el.cancelBtn.addEventListener('click', cancelForm);
+el.deleteBtn.addEventListener('click', deleteUser);
+el.closeModalBtn.addEventListener('click', cancelForm);
+el.searchInput.addEventListener('input', (event) => { searchTerm = String(event.target.value || '').trim().toLowerCase(); currentPage = 1; renderUsers(); });
+el.activeFilter.addEventListener('change', (event) => { activeFilter = String(event.target.value || 'all'); currentPage = 1; renderUsers(); });
+el.pageSize.addEventListener('change', (event) => { pageSize = Number(event.target.value || 10); currentPage = 1; renderUsers(); });
+el.prevPageBtn.addEventListener('click', () => { if (currentPage > 1) { currentPage -= 1; renderUsers(); } });
+el.nextPageBtn.addEventListener('click', () => { currentPage += 1; renderUsers(); });
+el.modalBackdrop.addEventListener('click', (event) => {
+  if (event.target === el.modalBackdrop) cancelForm();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && el.modalBackdrop.classList.contains('visible')) {
+    cancelForm();
+  }
+});
+
+document.addEventListener('DOMContentLoaded', refreshAll);

package/public/portal/login.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Portal Login</title>
+  <style>
+    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:linear-gradient(135deg,#0f172a,#134e4a);min-height:100vh;display:grid;place-items:center;color:#0f172a}
+    .card{width:min(420px,calc(100vw - 32px));background:#fff;border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
+    h1{margin:0 0 8px;color:#0ea5a4}.sub{margin:0 0 18px;color:#64748b;font-size:14px}
+    label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
+    input{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;padding:12px 14px;font-size:14px}
+    button{width:100%;border:none;border-radius:10px;padding:12px 14px;background:#0ea5a4;color:#fff;font-size:14px;font-weight:700;cursor:pointer;margin-top:18px}
+    .msg{display:none;margin-top:14px;padding:10px 12px;border-radius:10px;font-size:14px}.msg.ok{display:block;background:#dcfce7;color:#166534}.msg.err{display:block;background:#fee2e2;color:#991b1b}
+    .small{color:#64748b;font-size:12px;margin-top:10px}
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Portal Login</h1>
+    <p class="sub">Sign in to access the bot knowledge portal.</p>
+    <form id="form">
+      <label for="username">Username</label>
+      <input id="username" autocomplete="username">
+      <label for="password">Password</label>
+      <input id="password" type="password" autocomplete="current-password">
+      <button type="submit">Login</button>
+      <div id="msg" class="msg"></div>
+      <div class="small" id="botInfo"></div>
+    </form>
+  </div>
+  <script>
+    const params = new URLSearchParams(location.search);
+    const botId = params.get('botId') || '';
+    document.getElementById('botInfo').textContent = botId ? `Bot: ${botId}` : 'Bot id is required.';
+    const msg = document.getElementById('msg');
+    document.getElementById('form').addEventListener('submit', async (event) => {
+      event.preventDefault();
+      try {
+        const response = await fetch('/portal/api/auth/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            username: document.getElementById('username').value,
+            password: document.getElementById('password').value,
+            botId
+          })
+        });
+        const body = await response.json().catch(() => ({}));
+        if (!response.ok) {
+          msg.className = 'msg err';
+          msg.textContent = body.error || `Login failed (${response.status})`;
+          return;
+        }
+        msg.className = 'msg ok';
+        msg.textContent = 'Login successful. Redirecting...';
+        setTimeout(() => { location.href = `/portal/index.html?botId=${encodeURIComponent(botId)}`; }, 600);
+      } catch (error) {
+        msg.className = 'msg err';
+        msg.textContent = error.message || String(error);
+      }
+    });
+  </script>
+</body>
+</html>

package/public/portal/portal.js

@@ -0,0 +1,266 @@
+let items = [];
+let selectedId = null;
+let editingId = null;
+let currentPage = 1;
+let pageSize = 10;
+
+const el = {
+  status: document.getElementById('status'),
+  botId: document.getElementById('botId'),
+  search: document.getElementById('search'),
+  pageSize: document.getElementById('pageSize'),
+  loadBtn: document.getElementById('loadBtn'),
+  newBtn: document.getElementById('newBtn'),
+  rows: document.getElementById('rows'),
+  countInfo: document.getElementById('countInfo'),
+  pageInfo: document.getElementById('pageInfo'),
+  prevBtn: document.getElementById('prevBtn'),
+  nextBtn: document.getElementById('nextBtn'),
+  modalBackdrop: document.getElementById('modalBackdrop'),
+  closeModalBtn: document.getElementById('closeModalBtn'),
+  formTitle: document.getElementById('formTitle'),
+  question: document.getElementById('question'),
+  answer: document.getElementById('answer'),
+  tags: document.getElementById('tags'),
+  source: document.getElementById('source'),
+  saveBtn: document.getElementById('saveBtn'),
+  cancelBtn: document.getElementById('cancelBtn'),
+  deleteBtn: document.getElementById('deleteBtn')
+};
+
+function showStatus(message, ok = true) {
+  el.status.className = `status ${ok ? 'ok' : 'err'}`;
+  el.status.textContent = message;
+}
+
+function escapeHtml(text) {
+  return String(text || '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function tagsFromInput(value) {
+  return String(value || '')
+    .split(',')
+    .map((tag) => tag.trim())
+    .filter(Boolean);
+}
+
+function getRequiredBotId() {
+  const botId = String(el.botId.value || '').trim();
+  if (!botId) {
+    throw new Error('bot id is required');
+  }
+  return botId;
+}
+
+function getVisibleItems() {
+  const query = String(el.search.value || '').trim().toLowerCase();
+  return items.filter((item) => {
+    if (!query) return true;
+    const haystack = [item.keyword, item.title, item.answer, item.content, item.source, ...(item.tags || [])]
+      .join(' ')
+      .toLowerCase();
+    return haystack.includes(query);
+  });
+}
+
+function render() {
+  const filtered = getVisibleItems();
+  const total = filtered.length;
+  const totalPages = Math.max(Math.ceil(total / pageSize), 1);
+  if (currentPage > totalPages) currentPage = totalPages;
+  const start = (currentPage - 1) * pageSize;
+  const pageItems = filtered.slice(start, start + pageSize);
+
+  el.countInfo.textContent = total ? `Showing ${start + 1}-${Math.min(start + pageSize, total)} of ${total}` : 'No knowledge entries';
+  el.pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
+  el.prevBtn.disabled = currentPage <= 1;
+  el.nextBtn.disabled = currentPage >= totalPages;
+
+  if (!pageItems.length) {
+    el.rows.innerHTML = '<tr><td colspan="5"><div class="empty">No matching entries found.</div></td></tr>';
+    return;
+  }
+
+  el.rows.innerHTML = pageItems.map((item) => {
+    const answerText = String(item.answer || item.content || '');
+    const tags = Array.isArray(item.tags) ? item.tags : [];
+    return `
+      <tr data-id="${item.id}">
+        <td>${escapeHtml(item.keyword || item.title || '')}</td>
+        <td>${escapeHtml(answerText.slice(0, 140))}${answerText.length > 140 ? '…' : ''}</td>
+        <td><div class="chips">${tags.map((tag) => `<span class="chip">${escapeHtml(tag)}</span>`).join('')}</div></td>
+        <td>${escapeHtml(item.source || '')}</td>
+        <td>
+          <div class="actions">
+            <button class="btn secondary action-btn" data-action="edit" data-id="${item.id}">Edit</button>
+            <button class="btn danger action-btn" data-action="delete" data-id="${item.id}">Delete</button>
+          </div>
+        </td>
+      </tr>
+    `;
+  }).join('');
+
+  Array.from(el.rows.querySelectorAll('button[data-action]')).forEach((button) => {
+    button.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const id = Number(button.getAttribute('data-id'));
+      const action = button.getAttribute('data-action');
+      if (action === 'edit') {
+        openModalForEdit(id);
+      } else if (action === 'delete') {
+        deleteItem(id).catch((error) => showStatus(error.message, false));
+      }
+    });
+  });
+}
+
+function openModal() {
+  el.modalBackdrop.classList.add('visible');
+  el.modalBackdrop.setAttribute('aria-hidden', 'false');
+}
+
+function closeModal() {
+  el.modalBackdrop.classList.remove('visible');
+  el.modalBackdrop.setAttribute('aria-hidden', 'true');
+  el.deleteBtn.style.display = 'none';
+  editingId = null;
+  selectedId = null;
+}
+
+function fillForm(item) {
+  el.question.value = item?.keyword || item?.title || '';
+  el.answer.value = item?.answer || item?.content || '';
+  el.tags.value = Array.isArray(item?.tags) ? item.tags.join(', ') : '';
+  el.source.value = item?.source || 'portal';
+}
+
+function openModalForNew() {
+  try {
+    getRequiredBotId();
+  } catch (error) {
+    showStatus(error.message, false);
+    return;
+  }
+
+  editingId = null;
+  selectedId = null;
+  el.formTitle.textContent = 'New Entry';
+  fillForm({ source: 'portal' });
+  el.deleteBtn.style.display = 'none';
+  openModal();
+}
+
+function openModalForEdit(id) {
+  const item = items.find((entry) => Number(entry.id) === Number(id));
+  if (!item) return;
+  editingId = item.id;
+  selectedId = item.id;
+  el.formTitle.textContent = `Edit Entry #${item.id}`;
+  fillForm(item);
+  el.deleteBtn.style.display = 'inline-flex';
+  openModal();
+}
+
+async function loadItems() {
+  const botId = getRequiredBotId();
+
+  const response = await fetch(`/portal/api/knowledge?botId=${encodeURIComponent(botId)}`);
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({}));
+    throw new Error(error.error || `Failed to load knowledge (${response.status})`);
+  }
+
+  const payload = await response.json();
+  items = Array.isArray(payload.items) ? payload.items : [];
+  currentPage = 1;
+  render();
+  showStatus(`Loaded ${items.length} entries`);
+}
+
+async function saveItem() {
+  const botId = getRequiredBotId();
+  const answer = String(el.answer.value || '').trim();
+  const question = String(el.question.value || '').trim();
+  if (!answer) throw new Error('answer is required');
+
+  const payload = {
+    botId,
+    question,
+    answer,
+    tags: tagsFromInput(el.tags.value),
+    source: String(el.source.value || 'portal').trim() || 'portal'
+  };
+
+  const response = editingId
+    ? await fetch(`/portal/api/knowledge/${editingId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      })
+    : await fetch('/portal/api/knowledge', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({}));
+    throw new Error(error.error || `Request failed (${response.status})`);
+  }
+
+  showStatus(editingId ? 'Entry updated' : 'Entry created');
+  closeModal();
+  await loadItems();
+}
+
+async function deleteItem(id = selectedId) {
+  if (!id) return;
+  if (!confirm('Delete this entry?')) return;
+
+  const botId = getRequiredBotId();
+
+  const response = await fetch(`/portal/api/knowledge/${id}?botId=${encodeURIComponent(botId)}`, { method: 'DELETE' });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({}));
+    throw new Error(error.error || `Request failed (${response.status})`);
+  }
+
+  showStatus('Entry deleted');
+  closeModal();
+  await loadItems();
+}
+
+el.loadBtn.addEventListener('click', () => loadItems().catch((error) => showStatus(error.message, false)));
+el.newBtn.addEventListener('click', openModalForNew);
+el.saveBtn.addEventListener('click', () => saveItem().catch((error) => showStatus(error.message, false)));
+el.cancelBtn.addEventListener('click', closeModal);
+el.closeModalBtn.addEventListener('click', closeModal);
+el.deleteBtn.addEventListener('click', () => deleteItem().catch((error) => showStatus(error.message, false)));
+el.search.addEventListener('input', () => { currentPage = 1; render(); });
+el.pageSize.addEventListener('change', () => { pageSize = Number(el.pageSize.value || 10); currentPage = 1; render(); });
+el.prevBtn.addEventListener('click', () => { if (currentPage > 1) { currentPage -= 1; render(); } });
+el.nextBtn.addEventListener('click', () => { currentPage += 1; render(); });
+el.modalBackdrop.addEventListener('click', (event) => {
+  if (event.target === el.modalBackdrop) closeModal();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && el.modalBackdrop.classList.contains('visible')) {
+    closeModal();
+  }
+});
+
+const params = new URLSearchParams(location.search);
+const botIdFromQuery = params.get('botId');
+if (botIdFromQuery) {
+  el.botId.value = botIdFromQuery;
+  loadItems().catch((error) => showStatus(error.message, false));
+} else {
+  showStatus('Add botId to the URL query string to load records.');
+}
+
+el.botId.readOnly = true;

package/react-wrapper/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vengadesh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/react-wrapper/README.md

@@ -0,0 +1,48 @@
+# universal_ai_chatbot
+
+Production-ready React wrapper for the chatbot embed script.
+
+## Install
+
+```bash
+npm install universal_ai_chatbot
+```
+
+## Use
+
+```tsx
+import ChatbotEmbed from "universal_ai_chatbot";
+
+export default function App() {
+  return (
+    <ChatbotEmbed
+      src="https://your-domain.com/embed/chatbot.js"
+      apiBase="https://your-domain.com"
+      botId="sb009"
+      botApiKey="your-bot-api-key"
+      aiApikey="your-provider-api-key"
+      provider="groq"
+      model="llama-3.3-70b-versatile"
+      botName="Support Assistant"
+      color="#0ea5a4"
+      welcome="Hi! How can I help you today?"
+      position="bottom-right"
+      visitorId="visitor-123"
+      sessionId="session-456"
+    />
+  );
+}
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+## Publish
+
+```bash
+npm login
+npm publish --access public
+```