Tightly integrate WhatsApp selectors into existing UIs

core/templates/partials/ai-workspace-person-widget.html

@@ -72,12 +72,13 @@
     {% endif %}
     {% if compose_page_url %}
       <div class="buttons are-small" style="margin-top: 0.45rem; margin-bottom: 0;">
-        <a class="button is-light" href="{{ compose_page_url }}">
+        <a id="ai-manual-link-{{ person.id }}" class="button is-light" href="{{ compose_page_url }}">
           <span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
           <span>Manual Text Mode</span>
         </a>
         {% if compose_widget_url %}
           <button
+            id="ai-manual-widget-btn-{{ person.id }}"
             type="button"
             class="button is-light is-small js-widget-spawn-trigger is-hidden"
             data-widget-url="{{ compose_widget_url }}"
@@ -111,6 +112,26 @@
         {% endif %}
       </div>
     </div>
+    {% if send_target_bundle.options %}
+      <div class="field" style="margin-top: 0.55rem; margin-bottom: 0;">
+        <label class="label is-small" style="margin-bottom: 0.25rem;">Target Platform</label>
+        <div class="control">
+          <div class="select is-small is-fullwidth">
+            <select id="ai-target-select-{{ person.id }}" aria-label="Target platform and identifier">
+              {% for option in send_target_bundle.options %}
+                <option
+                  value="{{ option.id }}"
+                  data-service="{{ option.service }}"
+                  data-identifier="{{ option.identifier }}"
+                  {% if option.id == send_target_bundle.selected_id %}selected{% endif %}>
+                  {{ option.service_label }} · {{ option.identifier }}
+                </option>
+              {% endfor %}
+            </select>
+          </div>
+        </div>
+      </div>
+    {% endif %}
     <div id="draft-top-status-{{ person.id }}" style="margin-top: 0.5rem;"></div>
   </div>
 
@@ -719,6 +740,10 @@
       }
       const payload = new URLSearchParams();
       payload.append("draft_text", text);
+      const targetId = getSelectedTargetId();
+      if (targetId) {
+        payload.append("target_identifier_id", targetId);
+      }
       fetch(queueUrl, {
         method: "POST",
         headers: {
@@ -740,6 +765,74 @@
       });
     };
 
+    function getSelectedTargetId() {
+      const select = document.getElementById("ai-target-select-" + personId);
+      if (!select) {
+        return "";
+      }
+      return String(select.value || "").trim();
+    }
+
+    function syncTargetInputs() {
+      const targetId = getSelectedTargetId();
+      widget.querySelectorAll('input[name="target_identifier_id"]').forEach(function(input) {
+        input.value = targetId;
+      });
+      const engageSelect = document.getElementById("engage-target-select-" + personId);
+      if (engageSelect && targetId) {
+        engageSelect.value = targetId;
+      }
+      syncComposeTargets();
+    }
+
+    function syncComposeTargets() {
+      const targetSelectNode = document.getElementById("ai-target-select-" + personId);
+      if (!targetSelectNode) {
+        return;
+      }
+      const selected = targetSelectNode.options[targetSelectNode.selectedIndex];
+      if (!selected) {
+        return;
+      }
+      const service = String(selected.dataset.service || "").trim();
+      const identifier = String(selected.dataset.identifier || "").trim();
+      if (!service || !identifier) {
+        return;
+      }
+      const params = new URLSearchParams({
+        service: service,
+        identifier: identifier,
+        person: "{{ person.id }}",
+      });
+      const manualLink = document.getElementById("ai-manual-link-" + personId);
+      if (manualLink) {
+        manualLink.href = "{{ compose_page_base_url }}?" + params.toString();
+      }
+      const widgetBtn = document.getElementById("ai-manual-widget-btn-" + personId);
+      if (widgetBtn) {
+        const widgetParams = new URLSearchParams({
+          service: service,
+          identifier: identifier,
+          person: "{{ person.id }}",
+          limit: "{{ limit }}",
+        });
+        const widgetUrl = "{{ compose_widget_base_url }}?" + widgetParams.toString();
+        widgetBtn.dataset.widgetUrl = widgetUrl;
+        widgetBtn.setAttribute("hx-get", widgetUrl);
+      }
+    }
+
+    const targetSelect = document.getElementById("ai-target-select-" + personId);
+    if (targetSelect) {
+      targetSelect.addEventListener("change", function() {
+        syncTargetInputs();
+      });
+    }
+
+    widget.addEventListener("htmx:afterSwap", function() {
+      syncTargetInputs();
+    });
+
     if (typeof window.giaMitigationShowTab !== "function") {
       window.giaMitigationShowTab = function(pid, tabName) {
         const names = ["plan_board", "corrections", "engage", "fundamentals", "ask_ai"];
@@ -839,5 +932,6 @@
     }
 
     window.giaWorkspaceOpenTab(personId, "plan_board", false);
+    syncTargetInputs();
   })();
 </script>