830 lines
27 KiB
HTML
830 lines
27 KiB
HTML
<div id="{{ panel_id }}" class="compose-shell">
|
|
<div class="is-flex is-justify-content-space-between is-align-items-center" style="gap: 0.5rem; flex-wrap: wrap;">
|
|
<div>
|
|
<p class="is-size-7 has-text-weight-semibold" style="margin-bottom: 0.2rem;">Manual Text Mode</p>
|
|
<p class="is-size-6" style="margin-bottom: 0;">
|
|
{% if person %}
|
|
{{ person.name }}
|
|
{% else %}
|
|
{{ identifier }}
|
|
{% endif %}
|
|
</p>
|
|
<p class="is-size-7 compose-meta-line" style="margin-bottom: 0;">
|
|
{{ service|title }} · {{ identifier }}
|
|
</p>
|
|
</div>
|
|
<div class="buttons are-small" style="margin: 0;">
|
|
<button type="button" class="button is-light is-rounded js-ai-trigger" data-kind="drafts">
|
|
<span class="icon is-small"><i class="fa-solid fa-pen"></i></span>
|
|
<span>Drafts</span>
|
|
</button>
|
|
<button type="button" class="button is-light is-rounded js-ai-trigger" data-kind="summary">
|
|
<span class="icon is-small"><i class="fa-solid fa-list"></i></span>
|
|
<span>Summary</span>
|
|
</button>
|
|
<button type="button" class="button is-light is-rounded js-ai-trigger" data-kind="engage">
|
|
<span class="icon is-small"><i class="fa-solid fa-handshake"></i></span>
|
|
<span>Engage</span>
|
|
</button>
|
|
<a class="button is-light is-rounded" href="{{ ai_workspace_url }}">
|
|
<span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
|
|
<span>AI Workspace</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="{{ panel_id }}-status" class="compose-status">
|
|
{% include "partials/compose-send-status.html" %}
|
|
</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>
|
|
<div class="compose-ai-loading">
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
</div>
|
|
<div class="compose-ai-content"></div>
|
|
</div>
|
|
<div class="compose-ai-card" data-kind="summary">
|
|
<p class="compose-ai-title">Conversation Summary</p>
|
|
<div class="compose-ai-loading">
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
</div>
|
|
<div class="compose-ai-content"></div>
|
|
</div>
|
|
<div class="compose-ai-card" data-kind="engage">
|
|
<p class="compose-ai-title">Quick Engage (Shared Framing)</p>
|
|
<div class="compose-ai-loading">
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
</div>
|
|
<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
|
|
</label>
|
|
<button type="button" class="button is-link is-light is-small engage-send-btn" disabled>
|
|
Send Engage
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="{{ panel_id }}-thread"
|
|
class="compose-thread"
|
|
data-poll-url="{% url 'compose_thread' %}"
|
|
data-service="{{ service }}"
|
|
data-identifier="{{ identifier }}"
|
|
data-person="{% if person %}{{ person.id }}{% endif %}"
|
|
data-limit="{{ limit }}"
|
|
data-last-ts="{{ last_ts }}"
|
|
data-ws-url="{{ compose_ws_url }}"
|
|
data-drafts-url="{{ compose_drafts_url }}"
|
|
data-summary-url="{{ compose_summary_url }}"
|
|
data-engage-preview-url="{{ compose_engage_preview_url }}"
|
|
data-engage-send-url="{{ compose_engage_send_url }}">
|
|
{% for msg in serialized_messages %}
|
|
<div class="compose-row {% if msg.outgoing %}is-out{% else %}is-in{% endif %}" data-ts="{{ msg.ts }}">
|
|
<article class="compose-bubble {% if msg.outgoing %}is-out{% else %}is-in{% endif %}">
|
|
<p class="compose-body">{{ msg.text|default:"(no text)" }}</p>
|
|
<p class="compose-msg-meta">
|
|
{{ msg.display_ts }}{% if msg.author %} · {{ msg.author }}{% endif %}
|
|
</p>
|
|
</article>
|
|
</div>
|
|
{% empty %}
|
|
<p class="compose-empty">No stored messages for this contact yet.</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<form
|
|
id="{{ panel_id }}-form"
|
|
class="compose-form"
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-post="{% url 'compose_send' %}"
|
|
hx-target="#{{ panel_id }}-status"
|
|
hx-swap="innerHTML">
|
|
<input type="hidden" name="service" value="{{ service }}">
|
|
<input type="hidden" name="identifier" value="{{ identifier }}">
|
|
<input type="hidden" name="render_mode" value="{{ render_mode }}">
|
|
<input type="hidden" name="limit" value="{{ limit }}">
|
|
<input type="hidden" name="failsafe_arm" value="0">
|
|
<input type="hidden" name="failsafe_confirm" value="0">
|
|
{% if person %}
|
|
<input type="hidden" name="person" value="{{ person.id }}">
|
|
{% 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
|
|
</label>
|
|
</div>
|
|
<div class="compose-composer-capsule">
|
|
<textarea
|
|
id="{{ panel_id }}-textarea"
|
|
class="compose-textarea"
|
|
name="text"
|
|
rows="1"
|
|
placeholder="Type a message. Enter to send, Shift+Enter for newline."></textarea>
|
|
<button class="button is-link is-light compose-send-btn" type="submit" disabled>
|
|
<span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
|
|
<span>Send</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<style>
|
|
#{{ panel_id }}.compose-shell {
|
|
position: relative;
|
|
border: 1px solid rgba(0, 0, 0, 0.16);
|
|
border-radius: 8px;
|
|
box-shadow: none;
|
|
padding: 0.7rem;
|
|
background: #fff;
|
|
}
|
|
#{{ panel_id }} .compose-thread {
|
|
margin-top: 0.55rem;
|
|
margin-bottom: 0.55rem;
|
|
min-height: 16rem;
|
|
max-height: 62vh;
|
|
overflow-y: auto;
|
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
border-radius: 8px;
|
|
padding: 0.65rem;
|
|
background: linear-gradient(180deg, rgba(248, 250, 252, 0.7), rgba(255, 255, 255, 0.98));
|
|
}
|
|
#{{ panel_id }} .compose-row {
|
|
display: flex;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-in {
|
|
justify-content: flex-start;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-out {
|
|
justify-content: flex-end;
|
|
}
|
|
#{{ panel_id }} .compose-bubble {
|
|
max-width: min(85%, 46rem);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 0, 0, 0.13);
|
|
padding: 0.52rem 0.62rem;
|
|
box-shadow: none;
|
|
}
|
|
#{{ panel_id }} .compose-bubble.is-in {
|
|
background: rgba(255, 255, 255, 0.96);
|
|
}
|
|
#{{ panel_id }} .compose-bubble.is-out {
|
|
background: #eef6ff;
|
|
}
|
|
#{{ panel_id }} .compose-body {
|
|
margin: 0 0 0.2rem 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
#{{ panel_id }} .compose-msg-meta,
|
|
#{{ panel_id }} .compose-meta-line {
|
|
color: #616161;
|
|
font-size: 0.72rem;
|
|
}
|
|
#{{ panel_id }} .compose-msg-meta {
|
|
margin: 0;
|
|
}
|
|
#{{ panel_id }} .compose-empty {
|
|
margin: 0;
|
|
color: #6f6f6f;
|
|
font-size: 0.78rem;
|
|
}
|
|
#{{ panel_id }} .compose-composer-capsule {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 0.45rem;
|
|
border: 1px solid rgba(0, 0, 0, 0.16);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
padding: 0.35rem;
|
|
}
|
|
#{{ panel_id }} .compose-textarea {
|
|
flex: 1 1 auto;
|
|
min-height: 2.45rem;
|
|
max-height: 8rem;
|
|
resize: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
background: transparent;
|
|
line-height: 1.35;
|
|
font-size: 0.98rem;
|
|
padding: 0.45rem 0.5rem;
|
|
}
|
|
#{{ panel_id }} .compose-send-btn {
|
|
height: 2.45rem;
|
|
border-radius: 8px;
|
|
margin: 0;
|
|
}
|
|
#{{ panel_id }} .compose-send-btn[disabled] {
|
|
opacity: 0.55;
|
|
}
|
|
#{{ panel_id }} .compose-send-safety {
|
|
display: flex;
|
|
gap: 0.85rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0.45rem;
|
|
color: #505050;
|
|
}
|
|
#{{ panel_id }} .compose-status {
|
|
margin-top: 0.55rem;
|
|
min-height: 1.1rem;
|
|
}
|
|
#{{ panel_id }} .compose-ai-popover {
|
|
position: absolute;
|
|
top: 4.2rem;
|
|
right: 0.7rem;
|
|
width: min(34rem, calc(100% - 1.4rem));
|
|
z-index: 25;
|
|
}
|
|
#{{ panel_id }} .compose-ai-popover.is-hidden {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }} .compose-ai-card {
|
|
display: none;
|
|
border: 1px solid rgba(0, 0, 0, 0.16);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
padding: 0.65rem;
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
|
|
}
|
|
#{{ panel_id }} .compose-ai-card.is-active {
|
|
display: block;
|
|
animation: composeFadeIn 160ms ease-out;
|
|
}
|
|
#{{ panel_id }} .compose-ai-title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.45rem;
|
|
}
|
|
#{{ panel_id }} .compose-ai-loading.is-hidden {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }} .compose-ai-skel {
|
|
height: 0.7rem;
|
|
border-radius: 999px;
|
|
margin-bottom: 0.4rem;
|
|
background: linear-gradient(90deg, rgba(233, 236, 239, 0.8), rgba(210, 214, 218, 0.95), rgba(233, 236, 239, 0.8));
|
|
background-size: 200% 100%;
|
|
animation: composePulse 1s ease-in-out infinite;
|
|
}
|
|
#{{ panel_id }} .compose-ai-skel:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
#{{ panel_id }} .compose-ai-content {
|
|
white-space: pre-wrap;
|
|
}
|
|
#{{ panel_id }} .compose-draft-option {
|
|
width: 100%;
|
|
text-align: left;
|
|
margin-bottom: 0.45rem;
|
|
border-radius: 8px;
|
|
}
|
|
#{{ panel_id }} .compose-draft-option:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
#{{ panel_id }} .compose-ai-safety {
|
|
margin-top: 0.55rem;
|
|
display: flex;
|
|
gap: 0.65rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
@keyframes composePulse {
|
|
0% { background-position: 100% 0; }
|
|
100% { background-position: 0 0; }
|
|
}
|
|
@keyframes composeFadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@media (max-width: 768px) {
|
|
#{{ panel_id }} .compose-thread {
|
|
max-height: 52vh;
|
|
}
|
|
#{{ panel_id }} .compose-send-btn span:last-child {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }} .compose-ai-popover {
|
|
left: 0.7rem;
|
|
right: 0.7rem;
|
|
width: auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function () {
|
|
const panelId = "{{ panel_id }}";
|
|
const panel = document.getElementById(panelId);
|
|
if (!panel) {
|
|
return;
|
|
}
|
|
const thread = document.getElementById(panelId + "-thread");
|
|
const form = document.getElementById(panelId + "-form");
|
|
const textarea = document.getElementById(panelId + "-textarea");
|
|
if (!thread || !form || !textarea) {
|
|
return;
|
|
}
|
|
|
|
const statusBox = document.getElementById(panelId + "-status");
|
|
const popover = document.getElementById(panelId + "-popover");
|
|
const csrfToken = "{{ csrf_token }}";
|
|
|
|
window.giaComposePanels = window.giaComposePanels || {};
|
|
const previousState = window.giaComposePanels[panelId];
|
|
if (previousState && previousState.timer) {
|
|
clearInterval(previousState.timer);
|
|
}
|
|
if (previousState && previousState.eventHandler) {
|
|
document.body.removeEventListener("composeMessageSent", previousState.eventHandler);
|
|
}
|
|
if (previousState && previousState.docClickHandler) {
|
|
document.removeEventListener("mousedown", previousState.docClickHandler);
|
|
}
|
|
const panelState = {
|
|
timer: null,
|
|
polling: false,
|
|
socket: null,
|
|
websocketReady: false,
|
|
activePanel: null,
|
|
engageToken: ""
|
|
};
|
|
window.giaComposePanels[panelId] = panelState;
|
|
|
|
const toInt = function (value) {
|
|
const parsed = parseInt(value || "0", 10);
|
|
return Number.isFinite(parsed) ? parsed : 0;
|
|
};
|
|
|
|
let lastTs = toInt(thread.dataset.lastTs);
|
|
|
|
const autosize = function () {
|
|
textarea.style.height = "auto";
|
|
const targetHeight = Math.min(Math.max(textarea.scrollHeight, 40), 128);
|
|
textarea.style.height = targetHeight + "px";
|
|
};
|
|
textarea.addEventListener("input", autosize);
|
|
autosize();
|
|
|
|
const nearBottom = function () {
|
|
return thread.scrollHeight - thread.scrollTop - thread.clientHeight < 100;
|
|
};
|
|
|
|
const scrollToBottom = function (force) {
|
|
if (force || nearBottom()) {
|
|
thread.scrollTop = thread.scrollHeight;
|
|
}
|
|
};
|
|
|
|
const appendBubble = function (msg) {
|
|
const row = document.createElement("div");
|
|
const outgoing = !!msg.outgoing;
|
|
row.className = "compose-row " + (outgoing ? "is-out" : "is-in");
|
|
row.dataset.ts = String(msg.ts || 0);
|
|
|
|
const bubble = document.createElement("article");
|
|
bubble.className = "compose-bubble " + (outgoing ? "is-out" : "is-in");
|
|
|
|
const body = document.createElement("p");
|
|
body.className = "compose-body";
|
|
body.textContent = String(msg.text || "(no text)");
|
|
bubble.appendChild(body);
|
|
|
|
const meta = document.createElement("p");
|
|
meta.className = "compose-msg-meta";
|
|
let metaText = String(msg.display_ts || msg.ts || "");
|
|
if (msg.author) {
|
|
metaText += " · " + String(msg.author);
|
|
}
|
|
meta.textContent = metaText;
|
|
bubble.appendChild(meta);
|
|
|
|
row.appendChild(bubble);
|
|
const empty = thread.querySelector(".compose-empty");
|
|
if (empty) {
|
|
empty.remove();
|
|
}
|
|
thread.appendChild(row);
|
|
};
|
|
|
|
const appendMessages = function (messages, forceScroll) {
|
|
const shouldStick = nearBottom() || forceScroll;
|
|
(messages || []).forEach(function (msg) {
|
|
appendBubble(msg);
|
|
lastTs = Math.max(lastTs, toInt(msg.ts));
|
|
});
|
|
thread.dataset.lastTs = String(lastTs);
|
|
if ((messages || []).length > 0) {
|
|
scrollToBottom(shouldStick);
|
|
}
|
|
};
|
|
|
|
const poll = async function (forceScroll) {
|
|
if (panelState.polling || panelState.websocketReady) {
|
|
return;
|
|
}
|
|
panelState.polling = true;
|
|
try {
|
|
const params = new URLSearchParams();
|
|
params.set("service", thread.dataset.service || "");
|
|
params.set("identifier", thread.dataset.identifier || "");
|
|
if (thread.dataset.person) {
|
|
params.set("person", thread.dataset.person);
|
|
}
|
|
params.set("limit", thread.dataset.limit || "60");
|
|
params.set("after_ts", String(lastTs));
|
|
const response = await fetch(thread.dataset.pollUrl + "?" + params.toString(), {
|
|
method: "GET",
|
|
credentials: "same-origin",
|
|
headers: { Accept: "application/json" }
|
|
});
|
|
if (!response.ok) {
|
|
return;
|
|
}
|
|
const payload = await response.json();
|
|
appendMessages(payload.messages || [], forceScroll);
|
|
if (payload.last_ts !== undefined && payload.last_ts !== null) {
|
|
lastTs = Math.max(lastTs, toInt(payload.last_ts));
|
|
thread.dataset.lastTs = String(lastTs);
|
|
}
|
|
} catch (err) {
|
|
console.debug("compose poll error", err);
|
|
} finally {
|
|
panelState.polling = false;
|
|
}
|
|
};
|
|
|
|
const setupWebSocket = function () {
|
|
const wsPath = thread.dataset.wsUrl || "";
|
|
if (!wsPath || !window.WebSocket) {
|
|
return;
|
|
}
|
|
const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
|
|
const socketUrl = protocol + window.location.host + wsPath;
|
|
try {
|
|
const socket = new WebSocket(socketUrl);
|
|
panelState.socket = socket;
|
|
socket.onopen = function () {
|
|
panelState.websocketReady = true;
|
|
try {
|
|
socket.send(JSON.stringify({ kind: "sync", last_ts: lastTs }));
|
|
} catch (err) {
|
|
// Ignore.
|
|
}
|
|
};
|
|
socket.onmessage = function (event) {
|
|
try {
|
|
const payload = JSON.parse(event.data || "{}");
|
|
appendMessages(payload.messages || [], false);
|
|
if (payload.last_ts !== undefined && payload.last_ts !== null) {
|
|
lastTs = Math.max(lastTs, toInt(payload.last_ts));
|
|
thread.dataset.lastTs = String(lastTs);
|
|
}
|
|
} catch (err) {
|
|
console.debug("compose websocket payload error", err);
|
|
}
|
|
};
|
|
socket.onclose = function () {
|
|
panelState.websocketReady = false;
|
|
};
|
|
socket.onerror = function () {
|
|
panelState.websocketReady = false;
|
|
};
|
|
} catch (err) {
|
|
panelState.websocketReady = false;
|
|
}
|
|
};
|
|
|
|
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";
|
|
}
|
|
if (confirmInput) {
|
|
confirmInput.value = confirm ? "1" : "0";
|
|
}
|
|
if (sendButton) {
|
|
sendButton.disabled = !(arm && confirm);
|
|
}
|
|
};
|
|
if (manualArm) {
|
|
manualArm.addEventListener("change", updateManualSafety);
|
|
}
|
|
if (manualConfirm) {
|
|
manualConfirm.addEventListener("change", updateManualSafety);
|
|
}
|
|
updateManualSafety();
|
|
|
|
const setStatus = function (message, level) {
|
|
if (!statusBox) {
|
|
return;
|
|
}
|
|
if (!message) {
|
|
statusBox.innerHTML = "";
|
|
return;
|
|
}
|
|
statusBox.innerHTML = '<article class="notification is-' + (level || "info") + ' is-light" style="padding:0.45rem 0.65rem; margin:0;">' + message + "</article>";
|
|
};
|
|
|
|
const hideAllCards = function () {
|
|
if (!popover) {
|
|
return;
|
|
}
|
|
popover.classList.add("is-hidden");
|
|
popover.querySelectorAll(".compose-ai-card").forEach(function (card) {
|
|
card.classList.remove("is-active");
|
|
});
|
|
panelState.activePanel = null;
|
|
};
|
|
|
|
const showCard = function (kind) {
|
|
if (!popover) {
|
|
return null;
|
|
}
|
|
popover.classList.remove("is-hidden");
|
|
let active = null;
|
|
popover.querySelectorAll(".compose-ai-card").forEach(function (card) {
|
|
const isActive = card.dataset.kind === kind;
|
|
card.classList.toggle("is-active", isActive);
|
|
if (isActive) {
|
|
active = card;
|
|
}
|
|
});
|
|
panelState.activePanel = kind;
|
|
return active;
|
|
};
|
|
|
|
const queryParams = function () {
|
|
const params = new URLSearchParams();
|
|
params.set("service", thread.dataset.service || "");
|
|
params.set("identifier", thread.dataset.identifier || "");
|
|
if (thread.dataset.person) {
|
|
params.set("person", thread.dataset.person);
|
|
}
|
|
params.set("limit", thread.dataset.limit || "60");
|
|
return params;
|
|
};
|
|
|
|
const setCardLoading = function (card, loading) {
|
|
const loadingNode = card.querySelector(".compose-ai-loading");
|
|
const contentNode = card.querySelector(".compose-ai-content");
|
|
if (loadingNode) {
|
|
loadingNode.classList.toggle("is-hidden", !loading);
|
|
}
|
|
if (contentNode && loading) {
|
|
contentNode.innerHTML = "";
|
|
}
|
|
};
|
|
|
|
const loadDrafts = async function () {
|
|
const card = showCard("drafts");
|
|
if (!card) {
|
|
return;
|
|
}
|
|
setCardLoading(card, true);
|
|
try {
|
|
const response = await fetch(thread.dataset.draftsUrl + "?" + 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 drafts.";
|
|
return;
|
|
}
|
|
const drafts = Array.isArray(payload.drafts) ? payload.drafts : [];
|
|
const container = card.querySelector(".compose-ai-content");
|
|
container.innerHTML = "";
|
|
drafts.forEach(function (item) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "button is-light compose-draft-option";
|
|
const strong = document.createElement("strong");
|
|
strong.textContent = String(item.label || "Option") + ": ";
|
|
const span = document.createElement("span");
|
|
span.textContent = String(item.text || "");
|
|
button.appendChild(strong);
|
|
button.appendChild(span);
|
|
button.addEventListener("click", function () {
|
|
textarea.value = String(item.text || "");
|
|
autosize();
|
|
textarea.focus();
|
|
hideAllCards();
|
|
});
|
|
container.appendChild(button);
|
|
});
|
|
} catch (err) {
|
|
setCardLoading(card, false);
|
|
card.querySelector(".compose-ai-content").textContent = "Failed to load drafts.";
|
|
}
|
|
};
|
|
|
|
const loadSummary = async function () {
|
|
const card = showCard("summary");
|
|
if (!card) {
|
|
return;
|
|
}
|
|
setCardLoading(card, true);
|
|
try {
|
|
const response = await fetch(thread.dataset.summaryUrl + "?" + 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 summary.";
|
|
return;
|
|
}
|
|
card.querySelector(".compose-ai-content").textContent = String(payload.summary || "");
|
|
} catch (err) {
|
|
setCardLoading(card, false);
|
|
card.querySelector(".compose-ai-content").textContent = "Failed to load summary.";
|
|
}
|
|
};
|
|
|
|
const bindEngageControls = function (card) {
|
|
const arm = card.querySelector(".engage-arm");
|
|
const confirm = card.querySelector(".engage-confirm");
|
|
const send = card.querySelector(".engage-send-btn");
|
|
const sync = function () {
|
|
send.disabled = !(arm.checked && confirm.checked && panelState.engageToken);
|
|
};
|
|
arm.addEventListener("change", sync);
|
|
confirm.addEventListener("change", sync);
|
|
send.addEventListener("click", async function () {
|
|
if (!panelState.engageToken) {
|
|
return;
|
|
}
|
|
const formData = new URLSearchParams();
|
|
formData.set("service", thread.dataset.service || "");
|
|
formData.set("identifier", thread.dataset.identifier || "");
|
|
if (thread.dataset.person) {
|
|
formData.set("person", thread.dataset.person);
|
|
}
|
|
formData.set("engage_token", panelState.engageToken);
|
|
formData.set("failsafe_arm", arm.checked ? "1" : "0");
|
|
formData.set("failsafe_confirm", confirm.checked ? "1" : "0");
|
|
try {
|
|
const response = await fetch(thread.dataset.engageSendUrl, {
|
|
method: "POST",
|
|
credentials: "same-origin",
|
|
headers: {
|
|
"X-CSRFToken": csrfToken,
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
Accept: "application/json"
|
|
},
|
|
body: formData.toString()
|
|
});
|
|
const payload = await response.json();
|
|
if (!payload.ok) {
|
|
setStatus(payload.error || "Engage send failed.", "danger");
|
|
return;
|
|
}
|
|
setStatus(payload.message || "Shared engage sent.", "success");
|
|
hideAllCards();
|
|
poll(true);
|
|
} catch (err) {
|
|
setStatus("Engage send failed.", "danger");
|
|
}
|
|
});
|
|
};
|
|
|
|
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;
|
|
if (panelState.activePanel === kind) {
|
|
hideAllCards();
|
|
return;
|
|
}
|
|
if (kind === "drafts") {
|
|
loadDrafts();
|
|
} else if (kind === "summary") {
|
|
loadSummary();
|
|
} else if (kind === "engage") {
|
|
loadEngage();
|
|
}
|
|
});
|
|
});
|
|
|
|
panelState.docClickHandler = function (event) {
|
|
if (!panel.contains(event.target)) {
|
|
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");
|
|
return;
|
|
}
|
|
form.requestSubmit();
|
|
}
|
|
});
|
|
|
|
form.addEventListener("htmx:afterRequest", function (event) {
|
|
if (event.detail && event.detail.successful) {
|
|
textarea.value = "";
|
|
autosize();
|
|
poll(true);
|
|
textarea.focus();
|
|
}
|
|
});
|
|
|
|
panelState.eventHandler = function () {
|
|
poll(true);
|
|
};
|
|
document.body.addEventListener("composeMessageSent", panelState.eventHandler);
|
|
|
|
scrollToBottom(true);
|
|
setupWebSocket();
|
|
panelState.timer = setInterval(function () {
|
|
if (!document.getElementById(panelId)) {
|
|
clearInterval(panelState.timer);
|
|
document.body.removeEventListener("composeMessageSent", panelState.eventHandler);
|
|
document.removeEventListener("mousedown", panelState.docClickHandler);
|
|
if (panelState.socket) {
|
|
try {
|
|
panelState.socket.close();
|
|
} catch (err) {
|
|
// Ignore.
|
|
}
|
|
}
|
|
delete window.giaComposePanels[panelId];
|
|
return;
|
|
}
|
|
poll(false);
|
|
}, 4000);
|
|
})();
|
|
</script>
|