Continue AI features and improve protocol support
This commit is contained in:
341
core/templates/partials/compose-panel.html
Normal file
341
core/templates/partials/compose-panel.html
Normal file
@@ -0,0 +1,341 @@
|
||||
<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;">
|
||||
<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 }}-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 }}">
|
||||
{% 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 }}">
|
||||
{% if person %}
|
||||
<input type="hidden" name="person" value="{{ person.id }}">
|
||||
{% endif %}
|
||||
<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">
|
||||
<span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
|
||||
<span>Send</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#{{ panel_id }}.compose-shell {
|
||||
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-status {
|
||||
margin-top: 0.55rem;
|
||||
min-height: 1.1rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#{{ panel_id }} .compose-thread {
|
||||
max-height: 52vh;
|
||||
}
|
||||
#{{ panel_id }} .compose-send-btn span:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
const panelState = { timer: null, polling: false };
|
||||
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 poll = async function (forceScroll) {
|
||||
if (panelState.polling) {
|
||||
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 url = thread.dataset.pollUrl + "?" + params.toString();
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
credentials: "same-origin",
|
||||
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));
|
||||
});
|
||||
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);
|
||||
}
|
||||
} catch (err) {
|
||||
console.debug("compose poll error", err);
|
||||
} finally {
|
||||
panelState.polling = false;
|
||||
}
|
||||
};
|
||||
|
||||
textarea.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
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);
|
||||
panelState.timer = setInterval(function () {
|
||||
if (!document.getElementById(panelId)) {
|
||||
clearInterval(panelState.timer);
|
||||
document.body.removeEventListener(
|
||||
"composeMessageSent",
|
||||
panelState.eventHandler
|
||||
);
|
||||
delete window.giaComposePanels[panelId];
|
||||
return;
|
||||
}
|
||||
poll(false);
|
||||
}, 1800);
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user