Update frontend/script.js

frontend/script.js

@@ -3,7 +3,6 @@ const API_BASE = "";
 
 // ===== DOM Elements =====
 const form = document.getElementById("researchForm");
-const audienceSelect = document.getElementById("targetAudience");
 const categoryInput = document.getElementById("productCategory");
 const descriptionInput = document.getElementById("productDescription");
 const submitBtn = document.getElementById("submitBtn");
@@ -13,7 +12,16 @@ const errorBanner = document.getElementById("errorBanner");
 const resultsDiv = document.getElementById("results");
 const toggleBtns = document.querySelectorAll(".toggle-btn");
 
+// Multi-select elements
+const multiselect = document.getElementById("audienceMultiselect");
+const selectedContainer = document.getElementById("selectedAudiences");
+const dropdown = document.getElementById("audienceDropdown");
+const searchInput = document.getElementById("audienceSearch");
+const optionsContainer = document.getElementById("audienceOptions");
+
 let selectedMethod = "gpt";
+let selectedAudiences = [];
+let allAudiences = [];
 
 // ===== Load Target Audiences =====
 async function loadAudiences() {
@@ -21,20 +29,119 @@ async function loadAudiences() {
     const res = await fetch(`${API_BASE}/api/target-audiences`);
     if (!res.ok) throw new Error("Failed to load audiences");
     const data = await res.json();
-
-    audienceSelect.innerHTML = '<option value="" disabled selected>Select target audience</option>';
-    data.audiences.forEach((audience) => {
-      const opt = document.createElement("option");
-      opt.value = audience;
-      opt.textContent = audience;
-      audienceSelect.appendChild(opt);
-    });
+    allAudiences = data.audiences;
+    renderOptions();
+    renderSelected();
   } catch (err) {
     console.error("Could not load audiences:", err);
-    audienceSelect.innerHTML = '<option value="" disabled selected>⚠ Could not load — is the backend running?</option>';
+    selectedContainer.innerHTML = '<span class="multiselect-placeholder">⚠ Could not load — is the backend running?</span>';
+  }
+}
+
+// ===== Multi-select: Render Options =====
+function renderOptions(filter = "") {
+  const filterLower = filter.toLowerCase();
+  const filtered = allAudiences.filter((a) =>
+    a.toLowerCase().includes(filterLower)
+  );
+
+  optionsContainer.innerHTML = filtered
+    .map((a) => {
+      const isSelected = selectedAudiences.includes(a);
+      return `
+        <div class="multiselect-option ${isSelected ? "selected" : ""}" data-value="${escapeAttr(a)}">
+          <span class="check">${isSelected ? "✓" : ""}</span>
+          <span>${escapeHtml(a)}</span>
+        </div>
+      `;
+    })
+    .join("");
+
+  // Attach click listeners
+  optionsContainer.querySelectorAll(".multiselect-option").forEach((opt) => {
+    opt.addEventListener("click", () => {
+      const val = opt.dataset.value;
+      if (selectedAudiences.includes(val)) {
+        selectedAudiences = selectedAudiences.filter((a) => a !== val);
+      } else {
+        selectedAudiences.push(val);
+      }
+      renderOptions(searchInput.value);
+      renderSelected();
+    });
+  });
+}
+
+// ===== Multi-select: Render Selected Tags =====
+function renderSelected() {
+  if (selectedAudiences.length === 0) {
+    selectedContainer.innerHTML = '<span class="multiselect-placeholder">Select target audiences…</span>';
+    return;
+  }
+
+  selectedContainer.innerHTML = selectedAudiences
+    .map(
+      (a) => `
+      <span class="multiselect-tag">
+        ${escapeHtml(a)}
+        <span class="multiselect-tag-remove" data-value="${escapeAttr(a)}">×</span>
+      </span>
+    `
+    )
+    .join("");
+
+  // Attach remove listeners
+  selectedContainer.querySelectorAll(".multiselect-tag-remove").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const val = btn.dataset.value;
+      selectedAudiences = selectedAudiences.filter((a) => a !== val);
+      renderOptions(searchInput.value);
+      renderSelected();
+    });
+  });
+}
+
+// ===== Multi-select: Toggle Dropdown =====
+selectedContainer.addEventListener("click", () => {
+  const isOpen = !dropdown.classList.contains("hidden");
+  if (isOpen) {
+    closeDropdown();
+  } else {
+    openDropdown();
   }
+});
+
+function openDropdown() {
+  dropdown.classList.remove("hidden");
+  selectedContainer.classList.add("active");
+  searchInput.value = "";
+  renderOptions();
+  searchInput.focus();
+}
+
+function closeDropdown() {
+  dropdown.classList.add("hidden");
+  selectedContainer.classList.remove("active");
 }
 
+// Close on click outside
+document.addEventListener("click", (e) => {
+  if (!multiselect.contains(e.target)) {
+    closeDropdown();
+  }
+});
+
+// Search filter
+searchInput.addEventListener("input", () => {
+  renderOptions(searchInput.value);
+});
+
+// Prevent dropdown close when clicking inside it
+dropdown.addEventListener("click", (e) => {
+  e.stopPropagation();
+});
+
 // ===== Method Toggle =====
 toggleBtns.forEach((btn) => {
   btn.addEventListener("click", () => {
@@ -51,14 +158,14 @@ form.addEventListener("submit", async (e) => {
   hideResults();
 
   const payload = {
-    target_audience: audienceSelect.value,
+    target_audience: selectedAudiences,
     product_category: categoryInput.value.trim(),
     product_description: descriptionInput.value.trim(),
     method: selectedMethod,
   };
 
-  if (!payload.target_audience || !payload.product_category || !payload.product_description) {
-    showError("Please fill in all fields.");
+  if (payload.target_audience.length === 0 || !payload.product_category || !payload.product_description) {
+    showError("Please fill in all fields and select at least one target audience.");
     return;
   }
 
@@ -101,7 +208,7 @@ function renderResults(triggers, method) {
   triggers.forEach((item, idx) => {
     html += `
       <div class="trigger-card">
-        <span class="trigger-label">PsychologicalTrigger ${idx + 1}</span>
+        <span class="trigger-label">Trigger ${idx + 1}</span>
         <h3 class="trigger-name">${escapeHtml(item.phsychologyTriggers)}</h3>
 
         <div class="trigger-section">
@@ -152,5 +259,9 @@ function escapeHtml(str) {
   return div.innerHTML;
 }
 
+function escapeAttr(str) {
+  return str.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
 // ===== Init =====
 loadAudiences();