Improve chat experience and begin search implementation
This commit is contained in:
@@ -212,6 +212,43 @@
|
||||
z-index: 39 !important;
|
||||
}
|
||||
|
||||
.osint-table-shell {
|
||||
border: 1px solid rgba(127, 127, 127, 0.2);
|
||||
border-radius: 14px;
|
||||
padding: 0.9rem;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.osint-table-toolbar {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.osint-results-table-wrap {
|
||||
border-radius: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.osint-results-table th {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.osint-sort-link {
|
||||
color: inherit;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.osint-sort-link:hover {
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.osint-search-form .button.is-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -235,6 +272,9 @@
|
||||
Home
|
||||
</a>
|
||||
{% if user.is_authenticated %}
|
||||
<a class="navbar-item" href="{% url 'osint_search' type='page' %}">
|
||||
Search
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">
|
||||
|
||||
27
core/templates/pages/osint-search.html
Normal file
27
core/templates/pages/osint-search.html
Normal file
@@ -0,0 +1,27 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-11-tablet is-10-desktop is-9-widescreen">
|
||||
<div class="is-flex is-justify-content-space-between is-align-items-center">
|
||||
<div>
|
||||
<h1 class="title is-4">Search</h1>
|
||||
<p class="subtitle is-6">
|
||||
Search across OSINT objects with sortable, paginated results.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="button is-light"
|
||||
hx-get="{{ search_widget_url }}"
|
||||
hx-target="#widgets-here"
|
||||
hx-swap="beforeend"
|
||||
onclick="document.getElementById('widgets-here').style.display = 'block';">
|
||||
Open Widget
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% include "partials/osint/search-panel.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -14,6 +14,18 @@
|
||||
</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>
|
||||
@@ -25,6 +37,46 @@
|
||||
{% 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"
|
||||
@@ -33,7 +85,12 @@
|
||||
data-identifier="{{ identifier }}"
|
||||
data-person="{% if person %}{{ person.id }}{% endif %}"
|
||||
data-limit="{{ limit }}"
|
||||
data-last-ts="{{ last_ts }}">
|
||||
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 %}">
|
||||
@@ -59,9 +116,19 @@
|
||||
<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"
|
||||
@@ -69,7 +136,7 @@
|
||||
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">
|
||||
<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>
|
||||
@@ -79,6 +146,7 @@
|
||||
|
||||
<style>
|
||||
#{{ panel_id }}.compose-shell {
|
||||
position: relative;
|
||||
border: 1px solid rgba(0, 0, 0, 0.16);
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
@@ -164,10 +232,87 @@
|
||||
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;
|
||||
@@ -175,6 +320,11 @@
|
||||
#{{ panel_id }} .compose-send-btn span:last-child {
|
||||
display: none;
|
||||
}
|
||||
#{{ panel_id }} .compose-ai-popover {
|
||||
left: 0.7rem;
|
||||
right: 0.7rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -192,6 +342,10 @@
|
||||
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) {
|
||||
@@ -200,7 +354,17 @@
|
||||
if (previousState && previousState.eventHandler) {
|
||||
document.body.removeEventListener("composeMessageSent", previousState.eventHandler);
|
||||
}
|
||||
const panelState = { timer: null, polling: false };
|
||||
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) {
|
||||
@@ -259,8 +423,20 @@
|
||||
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) {
|
||||
if (panelState.polling || panelState.websocketReady) {
|
||||
return;
|
||||
}
|
||||
panelState.polling = true;
|
||||
@@ -273,28 +449,19 @@
|
||||
}
|
||||
params.set("limit", thread.dataset.limit || "60");
|
||||
params.set("after_ts", String(lastTs));
|
||||
const url = thread.dataset.pollUrl + "?" + params.toString();
|
||||
const response = await fetch(url, {
|
||||
const response = await fetch(thread.dataset.pollUrl + "?" + params.toString(), {
|
||||
method: "GET",
|
||||
credentials: "same-origin",
|
||||
headers: { Accept: "application/json" },
|
||||
headers: { Accept: "application/json" }
|
||||
});
|
||||
if (!response.ok) {
|
||||
return;
|
||||
}
|
||||
const payload = await response.json();
|
||||
const messages = Array.isArray(payload.messages) ? payload.messages : [];
|
||||
const shouldStick = nearBottom() || forceScroll;
|
||||
messages.forEach(function (msg) {
|
||||
appendBubble(msg);
|
||||
lastTs = Math.max(lastTs, toInt(msg.ts));
|
||||
});
|
||||
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);
|
||||
if (messages.length > 0) {
|
||||
scrollToBottom(shouldStick);
|
||||
thread.dataset.lastTs = String(lastTs);
|
||||
}
|
||||
} catch (err) {
|
||||
console.debug("compose poll error", err);
|
||||
@@ -303,9 +470,324 @@
|
||||
}
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
@@ -325,17 +807,23 @@
|
||||
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.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);
|
||||
}, 1800);
|
||||
}, 4000);
|
||||
})();
|
||||
</script>
|
||||
|
||||
225
core/templates/partials/osint/list-table.html
Normal file
225
core/templates/partials/osint/list-table.html
Normal file
@@ -0,0 +1,225 @@
|
||||
{% include 'mixins/partials/notify.html' %}
|
||||
<div
|
||||
id="{{ osint_table_id }}"
|
||||
class="osint-table-shell"
|
||||
hx-get="{{ osint_refresh_url }}"
|
||||
hx-target="#{{ osint_table_id }}"
|
||||
hx-swap="outerHTML"
|
||||
{% if osint_event_name %}hx-trigger="{{ osint_event_name }} from:body"{% endif %}>
|
||||
|
||||
{% if osint_show_search %}
|
||||
<form
|
||||
method="get"
|
||||
action="{{ osint_search_url }}"
|
||||
class="osint-table-toolbar"
|
||||
hx-get="{{ osint_search_url }}"
|
||||
hx-target="#{{ osint_table_id }}"
|
||||
hx-swap="outerHTML">
|
||||
<div class="field has-addons is-flex-wrap-wrap">
|
||||
<div class="control is-expanded" style="min-width: 14rem;">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ osint_search_query }}"
|
||||
placeholder="Search {{ osint_title|lower }}...">
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select name="field">
|
||||
{% for field in osint_search_fields %}
|
||||
<option
|
||||
value="{{ field.value }}"
|
||||
{% if field.value == osint_search_field %}selected{% endif %}>
|
||||
{{ field.label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-link is-light" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-light" href="{{ osint_search_url }}">
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<div class="table-container osint-results-table-wrap">
|
||||
<table class="table is-fullwidth is-hoverable osint-results-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for column in osint_columns %}
|
||||
<th>
|
||||
{% if column.sortable %}
|
||||
<a
|
||||
class="osint-sort-link"
|
||||
href="{{ column.sort_url }}"
|
||||
hx-get="{{ column.sort_url }}"
|
||||
hx-target="#{{ osint_table_id }}"
|
||||
hx-swap="outerHTML">
|
||||
<span>{{ column.label }}</span>
|
||||
<span class="icon is-small">
|
||||
{% if column.is_sorted and column.is_desc %}
|
||||
<i class="fa-solid fa-sort-down"></i>
|
||||
{% elif column.is_sorted %}
|
||||
<i class="fa-solid fa-sort-up"></i>
|
||||
{% else %}
|
||||
<i class="fa-solid fa-sort"></i>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% else %}
|
||||
{{ column.label }}
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
{% if osint_show_actions %}<th>Actions</th>{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in osint_rows %}
|
||||
<tr>
|
||||
{% for cell in row.cells %}
|
||||
<td>
|
||||
{% if cell.kind == "id_copy" %}
|
||||
<a
|
||||
class="button is-small has-text-grey"
|
||||
onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '{{ cell.value }}');">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-copy"></i>
|
||||
</span>
|
||||
<span>{{ cell.value }}</span>
|
||||
</a>
|
||||
{% elif cell.kind == "bool" %}
|
||||
{% if cell.value %}
|
||||
<span class="icon has-text-success">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="icon has-text-grey">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% elif cell.kind == "datetime" %}
|
||||
{% if cell.value %}
|
||||
{{ cell.value|date:"M j, Y P" }}
|
||||
{% else %}
|
||||
<span class="has-text-grey">-</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if cell.value or cell.value == 0 %}
|
||||
{{ cell.value }}
|
||||
{% else %}
|
||||
<span class="has-text-grey">-</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
{% if osint_show_actions %}
|
||||
<td>
|
||||
<div class="buttons are-small">
|
||||
{% for action in row.actions %}
|
||||
{% if action.mode == "hx-get" %}
|
||||
<button
|
||||
class="button"
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-get="{{ action.url }}"
|
||||
hx-target="{{ action.target }}"
|
||||
hx-swap="innerHTML"
|
||||
title="{{ action.title }}">
|
||||
<span class="icon"><i class="{{ action.icon }}"></i></span>
|
||||
</button>
|
||||
{% elif action.mode == "hx-delete" %}
|
||||
<button
|
||||
class="button"
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-delete="{{ action.url }}"
|
||||
hx-target="{{ action.target }}"
|
||||
hx-swap="innerHTML"
|
||||
{% if action.confirm %}hx-confirm="{{ action.confirm }}"{% endif %}
|
||||
title="{{ action.title }}">
|
||||
<span class="icon"><i class="{{ action.icon }}"></i></span>
|
||||
</button>
|
||||
{% elif action.mode == "link" %}
|
||||
<a class="button" href="{{ action.url }}" title="{{ action.title }}">
|
||||
<span class="icon"><i class="{{ action.icon }}"></i></span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="{% if osint_show_actions %}{{ osint_columns|length|add:'1' }}{% else %}{{ osint_columns|length }}{% endif %}">
|
||||
<p class="has-text-grey">No results found.</p>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% if osint_pagination.enabled %}
|
||||
<nav class="pagination is-small" role="navigation" aria-label="pagination">
|
||||
{% if osint_pagination.has_previous %}
|
||||
<a
|
||||
class="pagination-previous"
|
||||
href="{{ osint_pagination.previous_url }}"
|
||||
hx-get="{{ osint_pagination.previous_url }}"
|
||||
hx-target="#{{ osint_table_id }}"
|
||||
hx-swap="outerHTML">
|
||||
Previous
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="pagination-previous is-disabled">Previous</a>
|
||||
{% endif %}
|
||||
|
||||
{% if osint_pagination.has_next %}
|
||||
<a
|
||||
class="pagination-next"
|
||||
href="{{ osint_pagination.next_url }}"
|
||||
hx-get="{{ osint_pagination.next_url }}"
|
||||
hx-target="#{{ osint_table_id }}"
|
||||
hx-swap="outerHTML">
|
||||
Next
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="pagination-next is-disabled">Next</a>
|
||||
{% endif %}
|
||||
|
||||
<ul class="pagination-list">
|
||||
{% for page in osint_pagination.pages %}
|
||||
{% if page.ellipsis %}
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
{% elif page.current %}
|
||||
<li><a class="pagination-link is-current">{{ page.number }}</a></li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link"
|
||||
href="{{ page.url }}"
|
||||
hx-get="{{ page.url }}"
|
||||
hx-target="#{{ osint_table_id }}"
|
||||
hx-swap="outerHTML">
|
||||
{{ page.number }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<p class="help has-text-grey">
|
||||
{{ osint_result_count }} result{% if osint_result_count != 1 %}s{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
78
core/templates/partials/osint/search-panel.html
Normal file
78
core/templates/partials/osint/search-panel.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<div class="box">
|
||||
<form
|
||||
class="osint-search-form"
|
||||
method="get"
|
||||
action="{{ osint_search_url }}"
|
||||
hx-get="{{ osint_search_url }}"
|
||||
hx-target="#osint-search-results"
|
||||
hx-swap="innerHTML">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-4">
|
||||
<label class="label">Scope</label>
|
||||
<div class="select is-fullwidth">
|
||||
<select name="scope">
|
||||
{% for option in scope_options %}
|
||||
<option
|
||||
value="{{ option.value }}"
|
||||
{% if option.value == selected_scope %}selected{% endif %}>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<label class="label">Field</label>
|
||||
<div class="select is-fullwidth">
|
||||
<select name="field">
|
||||
<option value="__all__" {% if selected_field == "__all__" %}selected{% endif %}>
|
||||
All Fields
|
||||
</option>
|
||||
{% for option in field_options %}
|
||||
<option
|
||||
value="{{ option.value }}"
|
||||
{% if option.value == selected_field %}selected{% endif %}>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<label class="label">Rows Per Page</label>
|
||||
<div class="select is-fullwidth">
|
||||
<select name="per_page">
|
||||
<option value="10" {% if selected_per_page == 10 %}selected{% endif %}>10</option>
|
||||
<option value="20" {% if selected_per_page == 20 %}selected{% endif %}>20</option>
|
||||
<option value="50" {% if selected_per_page == 50 %}selected{% endif %}>50</option>
|
||||
<option value="100" {% if selected_per_page == 100 %}selected{% endif %}>100</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<label class="label">Search Query</label>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ search_query }}"
|
||||
placeholder="Search text, values, or relation names...">
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<label class="label"> </label>
|
||||
<div class="buttons">
|
||||
<button class="button is-link is-light is-fullwidth" type="submit">
|
||||
Search
|
||||
</button>
|
||||
<a class="button is-light is-fullwidth" href="{{ osint_search_url }}">
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="osint-search-results">
|
||||
{% include "partials/results_table.html" %}
|
||||
</div>
|
||||
</div>
|
||||
1
core/templates/partials/results_table.html
Normal file
1
core/templates/partials/results_table.html
Normal file
@@ -0,0 +1 @@
|
||||
{% include "partials/osint/list-table.html" %}
|
||||
14
core/templates/partials/whatsapp-account-add.html
Normal file
14
core/templates/partials/whatsapp-account-add.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% if object.ok %}
|
||||
<img src="data:image/png;base64, {{ object.image_b64 }}" alt="WhatsApp QR code" />
|
||||
{% if object.warning %}
|
||||
<p class="is-size-7" style="margin-top: 0.6rem;">{{ object.warning }}</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<article class="notification is-warning is-light" style="margin-bottom: 0;">
|
||||
<p><strong>WhatsApp QR Not Ready.</strong></p>
|
||||
<p>{{ object.error|default:"No Neonize pairing QR is available yet." }}</p>
|
||||
{% if object.warning %}
|
||||
<p style="margin-top: 0.45rem;">{{ object.warning }}</p>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user