Implement deeper analysis of people and access to the underlying data in the database
This commit is contained in:
@@ -37,6 +37,7 @@
|
||||
{% include "partials/compose-send-status.html" %}
|
||||
</div>
|
||||
|
||||
<div id="{{ panel_id }}-popover-backdrop" class="compose-ai-popover-backdrop is-hidden"></div>
|
||||
<div id="{{ panel_id }}-popover" class="compose-ai-popover is-hidden">
|
||||
<div class="compose-ai-card" data-kind="drafts">
|
||||
<p class="compose-ai-title">Draft Suggestions</p>
|
||||
@@ -58,6 +59,22 @@
|
||||
</div>
|
||||
<div class="compose-ai-card" data-kind="engage">
|
||||
<p class="compose-ai-title">Quick Engage (Shared Framing)</p>
|
||||
<div class="compose-engage-source-row">
|
||||
<div class="select is-small is-fullwidth">
|
||||
<select class="engage-source-select">
|
||||
<option value="">Auto</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="button" class="button is-light is-small engage-refresh-btn">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div class="field compose-engage-custom-wrap is-hidden">
|
||||
<textarea
|
||||
class="textarea is-small engage-custom-text"
|
||||
rows="2"
|
||||
placeholder="Write custom engagement text..."></textarea>
|
||||
</div>
|
||||
<div class="compose-ai-loading">
|
||||
<div class="compose-ai-skel"></div>
|
||||
<div class="compose-ai-skel"></div>
|
||||
@@ -65,10 +82,7 @@
|
||||
<div class="compose-ai-content"></div>
|
||||
<div class="compose-ai-safety">
|
||||
<label class="checkbox is-size-7">
|
||||
<input type="checkbox" class="engage-arm"> Arm Send
|
||||
</label>
|
||||
<label class="checkbox is-size-7">
|
||||
<input type="checkbox" class="engage-confirm"> Confirm Share To Other Party
|
||||
<input type="checkbox" class="engage-confirm"> Confirm Send To Other Party
|
||||
</label>
|
||||
<button type="button" class="button is-link is-light is-small engage-send-btn" disabled>
|
||||
Send Engage
|
||||
@@ -123,10 +137,7 @@
|
||||
{% endif %}
|
||||
<div class="compose-send-safety">
|
||||
<label class="checkbox is-size-7">
|
||||
<input type="checkbox" class="manual-arm"> Arm Send
|
||||
</label>
|
||||
<label class="checkbox is-size-7">
|
||||
<input type="checkbox" class="manual-confirm"> Confirm Intent
|
||||
<input type="checkbox" class="manual-confirm"> Confirm Send
|
||||
</label>
|
||||
</div>
|
||||
<div class="compose-composer-capsule">
|
||||
@@ -253,6 +264,20 @@
|
||||
width: min(34rem, calc(100% - 1.4rem));
|
||||
z-index: 25;
|
||||
}
|
||||
#{{ panel_id }} .compose-ai-popover-backdrop {
|
||||
position: absolute;
|
||||
inset: 0.45rem;
|
||||
border-radius: 8px;
|
||||
background: radial-gradient(circle at 100% 0%, rgba(238, 245, 255, 0.42), rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0));
|
||||
z-index: 24;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transition: opacity 140ms ease-out;
|
||||
}
|
||||
#{{ panel_id }} .compose-ai-popover-backdrop.is-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#{{ panel_id }} .compose-ai-popover.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -266,7 +291,7 @@
|
||||
}
|
||||
#{{ panel_id }} .compose-ai-card.is-active {
|
||||
display: block;
|
||||
animation: composeFadeIn 160ms ease-out;
|
||||
animation: composeFadeIn 180ms ease-out;
|
||||
}
|
||||
#{{ panel_id }} .compose-ai-title {
|
||||
font-weight: 600;
|
||||
@@ -294,6 +319,22 @@
|
||||
text-align: left;
|
||||
margin-bottom: 0.45rem;
|
||||
border-radius: 8px;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
height: auto;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
line-height: 1.35;
|
||||
}
|
||||
#{{ panel_id }} .compose-draft-option strong {
|
||||
display: inline;
|
||||
margin-right: 0.2rem;
|
||||
white-space: normal;
|
||||
}
|
||||
#{{ panel_id }} .compose-draft-option span {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
#{{ panel_id }} .compose-draft-option:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -305,6 +346,18 @@
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
#{{ panel_id }} .compose-engage-source-row {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 0.45rem;
|
||||
align-items: center;
|
||||
}
|
||||
#{{ panel_id }} .compose-engage-source-row .select {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
#{{ panel_id }} .compose-engage-custom-wrap {
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
@keyframes composePulse {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
@@ -344,6 +397,7 @@
|
||||
|
||||
const statusBox = document.getElementById(panelId + "-status");
|
||||
const popover = document.getElementById(panelId + "-popover");
|
||||
const popoverBackdrop = document.getElementById(panelId + "-popover-backdrop");
|
||||
const csrfToken = "{{ csrf_token }}";
|
||||
|
||||
window.giaComposePanels = window.giaComposePanels || {};
|
||||
@@ -511,27 +565,22 @@
|
||||
}
|
||||
};
|
||||
|
||||
const manualArm = form.querySelector(".manual-arm");
|
||||
const manualConfirm = form.querySelector(".manual-confirm");
|
||||
const armInput = form.querySelector("input[name='failsafe_arm']");
|
||||
const confirmInput = form.querySelector("input[name='failsafe_confirm']");
|
||||
const sendButton = form.querySelector(".compose-send-btn");
|
||||
const updateManualSafety = function () {
|
||||
const arm = !!(manualArm && manualArm.checked);
|
||||
const confirm = !!(manualConfirm && manualConfirm.checked);
|
||||
if (armInput) {
|
||||
armInput.value = arm ? "1" : "0";
|
||||
armInput.value = confirm ? "1" : "0";
|
||||
}
|
||||
if (confirmInput) {
|
||||
confirmInput.value = confirm ? "1" : "0";
|
||||
}
|
||||
if (sendButton) {
|
||||
sendButton.disabled = !(arm && confirm);
|
||||
sendButton.disabled = !confirm;
|
||||
}
|
||||
};
|
||||
if (manualArm) {
|
||||
manualArm.addEventListener("change", updateManualSafety);
|
||||
}
|
||||
if (manualConfirm) {
|
||||
manualConfirm.addEventListener("change", updateManualSafety);
|
||||
}
|
||||
@@ -552,6 +601,9 @@
|
||||
if (!popover) {
|
||||
return;
|
||||
}
|
||||
if (popoverBackdrop) {
|
||||
popoverBackdrop.classList.add("is-hidden");
|
||||
}
|
||||
popover.classList.add("is-hidden");
|
||||
popover.querySelectorAll(".compose-ai-card").forEach(function (card) {
|
||||
card.classList.remove("is-active");
|
||||
@@ -563,6 +615,9 @@
|
||||
if (!popover) {
|
||||
return null;
|
||||
}
|
||||
if (popoverBackdrop) {
|
||||
popoverBackdrop.classList.remove("is-hidden");
|
||||
}
|
||||
popover.classList.remove("is-hidden");
|
||||
let active = null;
|
||||
popover.querySelectorAll(".compose-ai-card").forEach(function (card) {
|
||||
@@ -668,15 +723,144 @@
|
||||
}
|
||||
};
|
||||
|
||||
const loadEngage = async function (card, preferredSource) {
|
||||
card = card || showCard("engage");
|
||||
if (!card) {
|
||||
return;
|
||||
}
|
||||
setCardLoading(card, true);
|
||||
panelState.engageToken = "";
|
||||
const sourceSelect = card.querySelector(".engage-source-select");
|
||||
const refreshBtn = card.querySelector(".engage-refresh-btn");
|
||||
const sendBtn = card.querySelector(".engage-send-btn");
|
||||
const confirm = card.querySelector(".engage-confirm");
|
||||
const customWrap = card.querySelector(".compose-engage-custom-wrap");
|
||||
const customText = card.querySelector(".engage-custom-text");
|
||||
const selectedSource = (
|
||||
preferredSource !== undefined
|
||||
? preferredSource
|
||||
: (sourceSelect ? sourceSelect.value : "")
|
||||
);
|
||||
const customValue = customText ? String(customText.value || "").trim() : "";
|
||||
const showCustom = selectedSource === "custom";
|
||||
confirm.checked = false;
|
||||
sendBtn.disabled = true;
|
||||
if (customWrap) {
|
||||
customWrap.classList.toggle("is-hidden", !showCustom);
|
||||
}
|
||||
if (refreshBtn) {
|
||||
refreshBtn.classList.add("is-loading");
|
||||
}
|
||||
try {
|
||||
const params = queryParams();
|
||||
if (selectedSource) {
|
||||
params.set("source_ref", selectedSource);
|
||||
}
|
||||
if (showCustom && customValue) {
|
||||
params.set("custom_text", customValue);
|
||||
}
|
||||
const response = await fetch(
|
||||
thread.dataset.engagePreviewUrl + "?" + params.toString(),
|
||||
{
|
||||
method: "GET",
|
||||
credentials: "same-origin",
|
||||
headers: { Accept: "application/json" }
|
||||
}
|
||||
);
|
||||
const payload = await response.json();
|
||||
setCardLoading(card, false);
|
||||
if (!payload.ok) {
|
||||
card.querySelector(".compose-ai-content").textContent = payload.error || "Failed to load engage preview.";
|
||||
panelState.engageToken = "";
|
||||
return;
|
||||
}
|
||||
const options = Array.isArray(payload.options) ? payload.options : [];
|
||||
if (sourceSelect) {
|
||||
const before = sourceSelect.value;
|
||||
sourceSelect.innerHTML = "";
|
||||
options.forEach(function (opt) {
|
||||
const option = document.createElement("option");
|
||||
option.value = String(opt.value || "");
|
||||
option.textContent = String(opt.label || "");
|
||||
sourceSelect.appendChild(option);
|
||||
});
|
||||
const payloadSelected = String(payload.selected_source || "");
|
||||
if (payloadSelected) {
|
||||
sourceSelect.value = payloadSelected;
|
||||
} else if (before) {
|
||||
sourceSelect.value = before;
|
||||
}
|
||||
if (!sourceSelect.value && sourceSelect.options.length > 0) {
|
||||
sourceSelect.selectedIndex = 0;
|
||||
}
|
||||
}
|
||||
if (customText && payload.custom_text !== undefined) {
|
||||
customText.value = String(payload.custom_text || "");
|
||||
}
|
||||
if (customWrap && sourceSelect) {
|
||||
customWrap.classList.toggle("is-hidden", sourceSelect.value !== "custom");
|
||||
}
|
||||
panelState.engageToken = String(payload.token || "");
|
||||
let text = String(payload.preview || "");
|
||||
if (payload.artifact) {
|
||||
text = text + "\n\nSource: " + String(payload.artifact);
|
||||
}
|
||||
card.querySelector(".compose-ai-content").textContent = text;
|
||||
sendBtn.disabled = !(confirm.checked && panelState.engageToken);
|
||||
} catch (err) {
|
||||
setCardLoading(card, false);
|
||||
card.querySelector(".compose-ai-content").textContent = "Failed to load engage preview.";
|
||||
panelState.engageToken = "";
|
||||
} finally {
|
||||
if (refreshBtn) {
|
||||
refreshBtn.classList.remove("is-loading");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const bindEngageControls = function (card) {
|
||||
const arm = card.querySelector(".engage-arm");
|
||||
const confirm = card.querySelector(".engage-confirm");
|
||||
const send = card.querySelector(".engage-send-btn");
|
||||
const sourceSelect = card.querySelector(".engage-source-select");
|
||||
const refreshBtn = card.querySelector(".engage-refresh-btn");
|
||||
const customText = card.querySelector(".engage-custom-text");
|
||||
const customWrap = card.querySelector(".compose-engage-custom-wrap");
|
||||
let customDebounce = null;
|
||||
|
||||
const sync = function () {
|
||||
send.disabled = !(arm.checked && confirm.checked && panelState.engageToken);
|
||||
send.disabled = !(confirm.checked && panelState.engageToken);
|
||||
};
|
||||
arm.addEventListener("change", sync);
|
||||
confirm.addEventListener("change", sync);
|
||||
|
||||
if (sourceSelect) {
|
||||
sourceSelect.addEventListener("change", function () {
|
||||
if (customWrap) {
|
||||
customWrap.classList.toggle("is-hidden", sourceSelect.value !== "custom");
|
||||
}
|
||||
loadEngage(card, sourceSelect.value);
|
||||
});
|
||||
}
|
||||
|
||||
if (customText) {
|
||||
customText.addEventListener("input", function () {
|
||||
if (!sourceSelect || sourceSelect.value !== "custom") {
|
||||
return;
|
||||
}
|
||||
if (customDebounce) {
|
||||
clearTimeout(customDebounce);
|
||||
}
|
||||
customDebounce = setTimeout(function () {
|
||||
loadEngage(card, "custom");
|
||||
}, 260);
|
||||
});
|
||||
}
|
||||
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener("click", function () {
|
||||
loadEngage(card, sourceSelect ? sourceSelect.value : "");
|
||||
});
|
||||
}
|
||||
|
||||
send.addEventListener("click", async function () {
|
||||
if (!panelState.engageToken) {
|
||||
return;
|
||||
@@ -688,7 +872,7 @@
|
||||
formData.set("person", thread.dataset.person);
|
||||
}
|
||||
formData.set("engage_token", panelState.engageToken);
|
||||
formData.set("failsafe_arm", arm.checked ? "1" : "0");
|
||||
formData.set("failsafe_arm", confirm.checked ? "1" : "0");
|
||||
formData.set("failsafe_confirm", confirm.checked ? "1" : "0");
|
||||
try {
|
||||
const response = await fetch(thread.dataset.engageSendUrl, {
|
||||
@@ -715,48 +899,6 @@
|
||||
});
|
||||
};
|
||||
|
||||
const loadEngage = async function () {
|
||||
const card = showCard("engage");
|
||||
if (!card) {
|
||||
return;
|
||||
}
|
||||
setCardLoading(card, true);
|
||||
panelState.engageToken = "";
|
||||
const sendBtn = card.querySelector(".engage-send-btn");
|
||||
const arm = card.querySelector(".engage-arm");
|
||||
const confirm = card.querySelector(".engage-confirm");
|
||||
arm.checked = false;
|
||||
confirm.checked = false;
|
||||
sendBtn.disabled = true;
|
||||
try {
|
||||
const response = await fetch(thread.dataset.engagePreviewUrl + "?" + queryParams().toString(), {
|
||||
method: "GET",
|
||||
credentials: "same-origin",
|
||||
headers: { Accept: "application/json" }
|
||||
});
|
||||
const payload = await response.json();
|
||||
setCardLoading(card, false);
|
||||
if (!payload.ok) {
|
||||
card.querySelector(".compose-ai-content").textContent = payload.error || "Failed to load engage preview.";
|
||||
return;
|
||||
}
|
||||
panelState.engageToken = String(payload.token || "");
|
||||
let text = String(payload.preview || "");
|
||||
if (payload.artifact) {
|
||||
text = text + "\n\nSource: " + String(payload.artifact);
|
||||
}
|
||||
card.querySelector(".compose-ai-content").textContent = text;
|
||||
sendBtn.disabled = true;
|
||||
} catch (err) {
|
||||
setCardLoading(card, false);
|
||||
card.querySelector(".compose-ai-content").textContent = "Failed to load engage preview.";
|
||||
}
|
||||
if (!card.dataset.bound) {
|
||||
bindEngageControls(card);
|
||||
card.dataset.bound = "1";
|
||||
}
|
||||
};
|
||||
|
||||
panel.querySelectorAll(".js-ai-trigger").forEach(function (button) {
|
||||
button.addEventListener("click", function () {
|
||||
const kind = button.dataset.kind;
|
||||
@@ -769,7 +911,12 @@
|
||||
} else if (kind === "summary") {
|
||||
loadSummary();
|
||||
} else if (kind === "engage") {
|
||||
loadEngage();
|
||||
const card = showCard("engage");
|
||||
if (card && !card.dataset.bound) {
|
||||
bindEngageControls(card);
|
||||
card.dataset.bound = "1";
|
||||
}
|
||||
loadEngage(card);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -777,15 +924,30 @@
|
||||
panelState.docClickHandler = function (event) {
|
||||
if (!panel.contains(event.target)) {
|
||||
hideAllCards();
|
||||
return;
|
||||
}
|
||||
const clickedTrigger = event.target.closest(".js-ai-trigger");
|
||||
if (clickedTrigger) {
|
||||
return;
|
||||
}
|
||||
if (popover && !popover.classList.contains("is-hidden")) {
|
||||
if (!popover.contains(event.target)) {
|
||||
hideAllCards();
|
||||
}
|
||||
}
|
||||
};
|
||||
if (popoverBackdrop) {
|
||||
popoverBackdrop.addEventListener("click", function () {
|
||||
hideAllCards();
|
||||
});
|
||||
}
|
||||
document.addEventListener("mousedown", panelState.docClickHandler);
|
||||
|
||||
textarea.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
if (sendButton && sendButton.disabled) {
|
||||
setStatus("Enable both send safety switches before sending.", "warning");
|
||||
setStatus("Enable send confirmation before sending.", "warning");
|
||||
return;
|
||||
}
|
||||
form.requestSubmit();
|
||||
|
||||
Reference in New Issue
Block a user