XF/GIA
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement attachment view

Browse Source
This commit is contained in:
Mark Veidemanis
2026-02-15 18:58:58 +00:00
parent e7aac36ef9
commit 4cf75b9923
8 changed files with 914 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
core/templates/partials/compose-panel.html
View File

@@ -62,7 +62,7 @@
<div class="compose-engage-source-row">
<div class="select is-small is-fullwidth">
<select class="engage-source-select">
<option value="">Auto</option>
<option value="auto">Auto</option>
</select>
</div>
<button type="button" class="button is-light is-small engage-refresh-btn">
@@ -108,7 +108,32 @@
{% 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>
{% if msg.image_urls %}
{% for image_url in msg.image_urls %}
<figure class="compose-media">
<img
class="compose-image"
src="{{ image_url }}"
alt="Attachment"
loading="lazy"
decoding="async">
</figure>
{% endfor %}
{% elif msg.image_url %}
<figure class="compose-media">
<img
class="compose-image"
src="{{ msg.image_url }}"
alt="Attachment"
loading="lazy"
decoding="async">
</figure>
{% endif %}
{% if not msg.hide_text %}
<p class="compose-body">{{ msg.display_text|default:"(no text)" }}</p>
{% else %}
<p class="compose-body compose-image-fallback is-hidden">(no text)</p>
{% endif %}
<p class="compose-msg-meta">
{{ msg.display_ts }}{% if msg.author %} · {{ msg.author }}{% endif %}
</p>
@@ -118,6 +143,9 @@
<p class="compose-empty">No stored messages for this contact yet.</p>
{% endfor %}
</div>
<p id="{{ panel_id }}-typing" class="compose-typing is-hidden">
{% if person %}{{ person.name }}{% else %}Contact{% endif %} is typing...
</p>
<form
id="{{ panel_id }}-form"
@@ -198,6 +226,18 @@
#{{ panel_id }} .compose-bubble.is-out {
background: #eef6ff;
}
#{{ panel_id }} .compose-media {
margin: 0 0 0.28rem 0;
}
#{{ panel_id }} .compose-image {
display: block;
max-width: min(100%, 22rem);
max-height: 18rem;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.14);
object-fit: cover;
background: #f8f8f8;
}
#{{ panel_id }} .compose-body {
margin: 0 0 0.2rem 0;
white-space: pre-wrap;
@@ -216,6 +256,15 @@
color: #6f6f6f;
font-size: 0.78rem;
}
#{{ panel_id }} .compose-typing {
margin: 0 0 0.5rem 0.2rem;
font-size: 0.78rem;
color: #4e6381;
min-height: 1rem;
}
#{{ panel_id }} .compose-typing.is-hidden {
visibility: hidden;
}
#{{ panel_id }} .compose-composer-capsule {
display: flex;
align-items: flex-end;
@@ -257,6 +306,18 @@
margin-top: 0.55rem;
min-height: 1.1rem;
}
#{{ panel_id }} .compose-status-line {
margin: 0;
font-size: 0.76rem;
color: #5f6a7a;
}
#{{ panel_id }} .compose-status-line.is-warning,
#{{ panel_id }} .compose-status-line.is-danger {
color: #c0392b;
}
#{{ panel_id }} .compose-status-line.is-success {
color: #2f855a;
}
#{{ panel_id }} .compose-ai-popover {
position: absolute;
top: 4.2rem;
@@ -339,6 +400,40 @@
#{{ panel_id }} .compose-draft-option:last-child {
margin-bottom: 0;
}
#{{ panel_id }} .buttons {
overflow: visible;
}
#{{ panel_id }} .js-ai-trigger {
position: relative;
overflow: visible;
}
#{{ panel_id }} .js-ai-trigger.is-expanded {
background: #eef6ff;
border-color: #8bb2e6;
}
#{{ panel_id }} .js-ai-trigger.is-expanded::after {
content: "";
position: absolute;
left: 50%;
bottom: -0.34rem;
width: 0;
height: 0;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #8bb2e6;
pointer-events: none;
}
#{{ panel_id }} .compose-image-fallback.is-hidden {
display: none;
}
#{{ panel_id }}.is-send-success .compose-composer-capsule {
animation: composeSendFlash 360ms ease-out;
}
#{{ panel_id }}.is-send-fail .compose-composer-capsule {
animation: composeSendShake 330ms ease-out;
border-color: rgba(192, 57, 43, 0.7);
}
#{{ panel_id }} .compose-ai-safety {
margin-top: 0.55rem;
display: flex;
@@ -366,6 +461,17 @@
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes composeSendFlash {
0% { box-shadow: 0 0 0 0 rgba(60, 132, 218, 0); }
25% { box-shadow: 0 0 0 3px rgba(60, 132, 218, 0.25); }
100% { box-shadow: 0 0 0 0 rgba(60, 132, 218, 0); }
}
@keyframes composeSendShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
50% { transform: translateX(2px); }
75% { transform: translateX(-1px); }
}
@media (max-width: 768px) {
#{{ panel_id }} .compose-thread {
max-height: 52vh;
@@ -396,6 +502,7 @@
}
const statusBox = document.getElementById(panelId + "-status");
const typingNode = document.getElementById(panelId + "-typing");
const popover = document.getElementById(panelId + "-popover");
const popoverBackdrop = document.getElementById(panelId + "-popover-backdrop");
const csrfToken = "{{ csrf_token }}";
@@ -420,6 +527,7 @@
engageToken: ""
};
window.giaComposePanels[panelId] = panelState;
const triggerButtons = Array.from(panel.querySelectorAll(".js-ai-trigger"));
const toInt = function (value) {
const parsed = parseInt(value || "0", 10);
@@ -446,6 +554,42 @@
}
};
const wireImageFallbacks = function (rootNode) {
const scope = rootNode || thread;
if (!scope) {
return;
}
scope.querySelectorAll(".compose-bubble").forEach(function (bubble) {
const fallback = bubble.querySelector(".compose-image-fallback");
const refresh = function () {
if (!fallback) {
return;
}
const remaining = bubble.querySelectorAll(".compose-image").length;
fallback.classList.toggle("is-hidden", remaining > 0);
};
bubble.querySelectorAll(".compose-image").forEach(function (img) {
if (img.dataset.fallbackBound === "1") {
return;
}
img.dataset.fallbackBound = "1";
img.addEventListener("error", function () {
const figure = img.closest(".compose-media");
if (figure) {
figure.remove();
}
refresh();
});
img.addEventListener("load", function () {
if (fallback) {
fallback.classList.add("is-hidden");
}
});
});
refresh();
});
};
const appendBubble = function (msg) {
const row = document.createElement("div");
const outgoing = !!msg.outgoing;
@@ -455,10 +599,37 @@
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 imageCandidates = Array.isArray(msg.image_urls) && msg.image_urls.length
? msg.image_urls
: (msg.image_url ? [msg.image_url] : []);
imageCandidates.forEach(function (candidateUrl) {
const figure = document.createElement("figure");
figure.className = "compose-media";
const img = document.createElement("img");
img.className = "compose-image";
img.src = String(candidateUrl);
img.alt = "Attachment";
img.loading = "lazy";
img.decoding = "async";
figure.appendChild(img);
bubble.appendChild(figure);
});
if (!msg.hide_text) {
const body = document.createElement("p");
body.className = "compose-body";
body.textContent = String(
msg.display_text ||
msg.text ||
(msg.image_url ? "" : "(no text)")
);
bubble.appendChild(body);
} else {
const fallback = document.createElement("p");
fallback.className = "compose-body compose-image-fallback is-hidden";
fallback.textContent = "(no text)";
bubble.appendChild(fallback);
}
const meta = document.createElement("p");
meta.className = "compose-msg-meta";
@@ -475,6 +646,7 @@
empty.remove();
}
thread.appendChild(row);
wireImageFallbacks(row);
};
const appendMessages = function (messages, forceScroll) {
@@ -489,6 +661,20 @@
}
};
const applyTyping = function (typingPayload) {
if (!typingNode || !typingPayload || typeof typingPayload !== "object") {
return;
}
const isTyping = !!typingPayload.typing;
if (!isTyping) {
typingNode.classList.add("is-hidden");
return;
}
const displayName = String(typingPayload.display_name || "").trim();
typingNode.textContent = (displayName || "Contact") + " is typing...";
typingNode.classList.remove("is-hidden");
};
const poll = async function (forceScroll) {
if (panelState.polling || panelState.websocketReady) {
return;
@@ -513,6 +699,9 @@
}
const payload = await response.json();
appendMessages(payload.messages || [], forceScroll);
if (payload.typing) {
applyTyping(payload.typing);
}
if (payload.last_ts !== undefined && payload.last_ts !== null) {
lastTs = Math.max(lastTs, toInt(payload.last_ts));
thread.dataset.lastTs = String(lastTs);
@@ -546,6 +735,9 @@
try {
const payload = JSON.parse(event.data || "{}");
appendMessages(payload.messages || [], false);
if (payload.typing) {
applyTyping(payload.typing);
}
if (payload.last_ts !== undefined && payload.last_ts !== null) {
lastTs = Math.max(lastTs, toInt(payload.last_ts));
thread.dataset.lastTs = String(lastTs);
@@ -585,6 +777,12 @@
manualConfirm.addEventListener("change", updateManualSafety);
}
updateManualSafety();
try {
const initialTyping = JSON.parse("{{ typing_state_json|escapejs }}");
applyTyping(initialTyping);
} catch (err) {
// Ignore invalid initial typing state payload.
}
const setStatus = function (message, level) {
if (!statusBox) {
@@ -594,7 +792,26 @@
statusBox.innerHTML = "";
return;
}
statusBox.innerHTML = '<article class="notification is-' + (level || "info") + ' is-light" style="padding:0.45rem 0.65rem; margin:0;">' + message + "</article>";
const row = document.createElement("p");
row.className = "compose-status-line is-" + (level || "info");
row.textContent = String(message);
statusBox.innerHTML = "";
statusBox.appendChild(row);
};
const flashCompose = function (className) {
panel.classList.remove("is-send-success", "is-send-fail");
void panel.offsetWidth;
panel.classList.add(className);
window.setTimeout(function () {
panel.classList.remove(className);
}, 420);
};
const setActiveTrigger = function (kind) {
triggerButtons.forEach(function (button) {
button.classList.toggle("is-expanded", !!kind && button.dataset.kind === kind);
});
};
const hideAllCards = function () {
@@ -609,6 +826,7 @@
card.classList.remove("is-active");
});
panelState.activePanel = null;
setActiveTrigger(null);
};
const showCard = function (kind) {
@@ -628,6 +846,7 @@
}
});
panelState.activePanel = kind;
setActiveTrigger(kind);
return active;
};
@@ -653,6 +872,18 @@
}
};
const openEngage = function (sourceRef) {
const engageCard = showCard("engage");
if (!engageCard) {
return;
}
if (!engageCard.dataset.bound) {
bindEngageControls(engageCard);
engageCard.dataset.bound = "1";
}
loadEngage(engageCard, sourceRef || "auto");
};
const loadDrafts = async function () {
const card = showCard("drafts");
if (!card) {
@@ -674,6 +905,19 @@
const drafts = Array.isArray(payload.drafts) ? payload.drafts : [];
const container = card.querySelector(".compose-ai-content");
container.innerHTML = "";
const engageButton = document.createElement("button");
engageButton.type = "button";
engageButton.className = "button is-link is-light compose-draft-option";
const engageStrong = document.createElement("strong");
engageStrong.textContent = "Custom Engage: ";
const engageText = document.createElement("span");
engageText.textContent = "Choose a source or write your own engagement text.";
engageButton.appendChild(engageStrong);
engageButton.appendChild(engageText);
engageButton.addEventListener("click", function () {
openEngage("custom");
});
container.appendChild(engageButton);
drafts.forEach(function (item) {
const button = document.createElement("button");
button.type = "button";
@@ -887,13 +1131,16 @@
});
const payload = await response.json();
if (!payload.ok) {
flashCompose("is-send-fail");
setStatus(payload.error || "Engage send failed.", "danger");
return;
}
setStatus(payload.message || "Shared engage sent.", "success");
flashCompose("is-send-success");
setStatus("", "success");
hideAllCards();
poll(true);
} catch (err) {
flashCompose("is-send-fail");
setStatus("Engage send failed.", "danger");
}
});
@@ -911,12 +1158,7 @@
} else if (kind === "summary") {
loadSummary();
} else if (kind === "engage") {
const card = showCard("engage");
if (card && !card.dataset.bound) {
bindEngageControls(card);
card.dataset.bound = "1";
}
loadEngage(card);
openEngage("auto");
}
});
});
@@ -954,13 +1196,8 @@
}
});
form.addEventListener("htmx:afterRequest", function (event) {
if (event.detail && event.detail.successful) {
textarea.value = "";
autosize();
poll(true);
textarea.focus();
}
form.addEventListener("htmx:afterRequest", function () {
textarea.focus();
});
panelState.eventHandler = function () {
@@ -968,12 +1205,33 @@
};
document.body.addEventListener("composeMessageSent", panelState.eventHandler);
panelState.sendResultHandler = function (event) {
const detail = (event && event.detail) || {};
const ok = !!detail.ok;
if (ok) {
flashCompose("is-send-success");
setStatus("", "success");
textarea.value = "";
autosize();
poll(true);
} else {
flashCompose("is-send-fail");
if (detail.message) {
setStatus(detail.message, detail.level || "danger");
}
}
textarea.focus();
};
document.body.addEventListener("composeSendResult", panelState.sendResultHandler);
wireImageFallbacks(thread);
scrollToBottom(true);
setupWebSocket();
panelState.timer = setInterval(function () {
if (!document.getElementById(panelId)) {
clearInterval(panelState.timer);
document.body.removeEventListener("composeMessageSent", panelState.eventHandler);
document.body.removeEventListener("composeSendResult", panelState.sendResultHandler);
document.removeEventListener("mousedown", panelState.docClickHandler);
if (panelState.socket) {
try {

4
core/templates/partials/compose-send-status.html
View File

@@ -1,5 +1,5 @@
{% if notice_message %}
<article class="notification is-{{ notice_level|default:'info' }} is-light" style="padding: 0.45rem 0.65rem; margin: 0;">
<p class="compose-status-line is-{{ notice_level|default:'info' }}">
{{ notice_message }}
</article>
</p>
{% endif %}