feat: Implement recent chats feature with API endpoint and UI integration
This commit is contained in:
Andre Beging
@@ -12,11 +12,32 @@ const hooksListEl = document.querySelector("#hooks-list");
|
||||
const hookTemplate = document.querySelector("#hook-template");
|
||||
const createHookForm = document.querySelector("#create-hook-form");
|
||||
const toggleCreateBtn = document.querySelector("#toggle-create");
|
||||
const recentChatsBtn = document.querySelector("#recent-chats-btn");
|
||||
const recentChatsModal = document.querySelector("#recent-chats-modal");
|
||||
const recentChatsListEl = document.querySelector("#recent-chats-list");
|
||||
const closeRecentChatsBtn = document.querySelector("#close-recent-chats");
|
||||
const recentChatsSearchEl = document.querySelector("#recent-chats-search");
|
||||
|
||||
let sessionDetailsVisible = false;
|
||||
let sessionDetailsTouched = false;
|
||||
let createFormVisible = false;
|
||||
let createFormTouched = false;
|
||||
let lastFocusedElement = null;
|
||||
let recentChatsData = [];
|
||||
|
||||
if (recentChatsSearchEl) {
|
||||
recentChatsSearchEl.disabled = true;
|
||||
recentChatsSearchEl.addEventListener("input", () => {
|
||||
applyRecentChatsFilter();
|
||||
});
|
||||
recentChatsSearchEl.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape" && recentChatsSearchEl.value) {
|
||||
event.preventDefault();
|
||||
recentChatsSearchEl.value = "";
|
||||
applyRecentChatsFilter();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setSessionDetailsVisibility(show, { fromUser = false } = {}) {
|
||||
if (!toggleSessionBtn || !sessionDetailsEl) return;
|
||||
@@ -66,10 +87,29 @@ async function fetchJSON(url, options = {}) {
|
||||
...options,
|
||||
});
|
||||
if (!response.ok) {
|
||||
const message = await response.text();
|
||||
const contentType = response.headers.get("content-type") || "";
|
||||
let message = "Request failed";
|
||||
if (contentType.includes("application/json")) {
|
||||
try {
|
||||
const payload = await response.json();
|
||||
if (payload && typeof payload === "object") {
|
||||
message = payload.detail || JSON.stringify(payload);
|
||||
}
|
||||
} catch {
|
||||
message = await response.text();
|
||||
}
|
||||
} else {
|
||||
const text = await response.text();
|
||||
if (text) {
|
||||
message = text;
|
||||
}
|
||||
}
|
||||
throw new Error(message || "Request failed");
|
||||
}
|
||||
return response.status === 204 ? null : response.json();
|
||||
if (response.status === 204) {
|
||||
return null;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
function updateSessionUI(status) {
|
||||
@@ -116,6 +156,10 @@ function updateSessionUI(status) {
|
||||
} else if (shouldShowDetails && !sessionDetailsVisible) {
|
||||
setSessionDetailsVisibility(true);
|
||||
}
|
||||
setRecentChatsAvailability(status.authorized);
|
||||
if (!status.authorized) {
|
||||
closeRecentChatsDialog();
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
@@ -128,6 +172,268 @@ async function refreshAll() {
|
||||
await loadHooks();
|
||||
}
|
||||
|
||||
function setRecentChatsAvailability(isAuthorized) {
|
||||
if (!recentChatsBtn) return;
|
||||
recentChatsBtn.disabled = !isAuthorized;
|
||||
recentChatsBtn.title = isAuthorized
|
||||
? "Browse your recent Telegram chats"
|
||||
: "Authorize the session to view recent chats";
|
||||
if (!isAuthorized && recentChatsSearchEl) {
|
||||
recentChatsSearchEl.value = "";
|
||||
recentChatsSearchEl.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function applyRecentChatsFilter() {
|
||||
if (!recentChatsListEl) return;
|
||||
const query = recentChatsSearchEl ? recentChatsSearchEl.value.trim().toLowerCase() : "";
|
||||
const source = Array.isArray(recentChatsData) ? recentChatsData : [];
|
||||
const filtered = !query
|
||||
? source
|
||||
: source.filter((chat) => {
|
||||
const parts = [
|
||||
chat.display_name,
|
||||
chat.chat_id,
|
||||
chat.username ? `@${chat.username}` : null,
|
||||
chat.phone_number,
|
||||
chat.chat_type,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.map((part) => String(part).toLowerCase());
|
||||
return parts.some((part) => part.includes(query));
|
||||
});
|
||||
renderRecentChats(filtered);
|
||||
}
|
||||
|
||||
async function openRecentChatsDialog() {
|
||||
if (!recentChatsModal || !recentChatsListEl) return;
|
||||
if (recentChatsModal.classList.contains("hidden") && document.activeElement instanceof HTMLElement) {
|
||||
lastFocusedElement = document.activeElement;
|
||||
}
|
||||
recentChatsModal.classList.remove("hidden");
|
||||
recentChatsModal.scrollTop = 0;
|
||||
recentChatsListEl.innerHTML = "";
|
||||
recentChatsData = [];
|
||||
if (recentChatsSearchEl) {
|
||||
recentChatsSearchEl.value = "";
|
||||
recentChatsSearchEl.disabled = true;
|
||||
}
|
||||
const loading = document.createElement("p");
|
||||
loading.className = "feedback";
|
||||
loading.textContent = "Loading recent chats…";
|
||||
recentChatsListEl.appendChild(loading);
|
||||
try {
|
||||
const chats = await fetchJSON("/api/recent-chats");
|
||||
recentChatsData = Array.isArray(chats) ? chats : [];
|
||||
if (recentChatsSearchEl) {
|
||||
recentChatsSearchEl.disabled = false;
|
||||
recentChatsSearchEl.focus();
|
||||
}
|
||||
applyRecentChatsFilter();
|
||||
} catch (error) {
|
||||
recentChatsListEl.innerHTML = "";
|
||||
const message = document.createElement("p");
|
||||
message.className = "feedback";
|
||||
const text = typeof error?.message === "string" ? error.message : "Unable to load recent chats.";
|
||||
message.textContent = text.includes("Session not authorized")
|
||||
? "Authorize the session to view recent chats."
|
||||
: `Unable to load recent chats: ${text}`;
|
||||
recentChatsListEl.appendChild(message);
|
||||
recentChatsData = [];
|
||||
if (recentChatsSearchEl) {
|
||||
recentChatsSearchEl.disabled = true;
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", handleRecentChatsKeydown);
|
||||
if (recentChatsModal && (!recentChatsSearchEl || recentChatsSearchEl.disabled)) {
|
||||
const focusTarget = recentChatsModal.querySelector("button, [href], input, textarea, [tabindex]:not([tabindex='-1'])");
|
||||
if (focusTarget instanceof HTMLElement) {
|
||||
focusTarget.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderRecentChats(chats) {
|
||||
if (!recentChatsListEl) return;
|
||||
recentChatsListEl.innerHTML = "";
|
||||
if (!Array.isArray(chats) || !chats.length) {
|
||||
const empty = document.createElement("p");
|
||||
empty.className = "feedback";
|
||||
empty.textContent = "No recent chats available. Start a conversation in Telegram to see it here.";
|
||||
recentChatsListEl.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
chats.forEach((chat) => {
|
||||
const item = document.createElement("div");
|
||||
item.className = "recent-chat-item";
|
||||
|
||||
const details = document.createElement("div");
|
||||
details.className = "recent-chat-details";
|
||||
|
||||
const nameEl = document.createElement("span");
|
||||
nameEl.className = "recent-chat-name";
|
||||
nameEl.textContent = chat.display_name || chat.chat_id;
|
||||
|
||||
const metaEl = document.createElement("span");
|
||||
metaEl.className = "recent-chat-meta";
|
||||
const metaParts = [];
|
||||
if (chat.chat_type) {
|
||||
metaParts.push(String(chat.chat_type).toUpperCase());
|
||||
}
|
||||
if (chat.last_used_at) {
|
||||
metaParts.push(`Last activity ${new Date(chat.last_used_at).toLocaleString()}`);
|
||||
}
|
||||
metaEl.textContent = metaParts.length ? metaParts.join(" • ") : "Unknown chat";
|
||||
|
||||
const feedbackEl = document.createElement("span");
|
||||
feedbackEl.className = "recent-chat-feedback";
|
||||
let feedbackTimeout;
|
||||
|
||||
const setFeedback = (message, isError = false) => {
|
||||
feedbackEl.textContent = message;
|
||||
feedbackEl.style.color = isError ? "#ffbac7" : message ? "#64dd9b" : "";
|
||||
if (feedbackTimeout) {
|
||||
clearTimeout(feedbackTimeout);
|
||||
feedbackTimeout = undefined;
|
||||
}
|
||||
if (message) {
|
||||
feedbackTimeout = window.setTimeout(() => {
|
||||
feedbackEl.textContent = "";
|
||||
feedbackEl.style.color = "";
|
||||
feedbackTimeout = undefined;
|
||||
}, 2400);
|
||||
}
|
||||
};
|
||||
|
||||
details.appendChild(nameEl);
|
||||
details.appendChild(metaEl);
|
||||
details.appendChild(feedbackEl);
|
||||
item.appendChild(details);
|
||||
|
||||
const appendRow = (labelText, displayValue, copyValue, options = {}) => {
|
||||
const { required = false, valueClasses = [] } = options;
|
||||
const rawValue = displayValue ?? "";
|
||||
const valueString = rawValue !== null && rawValue !== undefined ? String(rawValue) : "";
|
||||
const hasValue = valueString.trim() !== "";
|
||||
if (!required && !hasValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
const row = document.createElement("div");
|
||||
row.className = "recent-chat-row";
|
||||
|
||||
const labelEl = document.createElement("span");
|
||||
labelEl.className = "recent-chat-label";
|
||||
labelEl.textContent = labelText;
|
||||
|
||||
const actionsEl = document.createElement("div");
|
||||
actionsEl.className = "recent-chat-actions";
|
||||
|
||||
const valueButton = document.createElement("button");
|
||||
valueButton.type = "button";
|
||||
valueButton.className = "recent-chat-value-button";
|
||||
if (Array.isArray(valueClasses)) {
|
||||
valueClasses.forEach((cls) => valueButton.classList.add(cls));
|
||||
} else if (typeof valueClasses === "string" && valueClasses) {
|
||||
valueButton.classList.add(valueClasses);
|
||||
}
|
||||
valueButton.setAttribute("aria-label", `Copy ${labelText.toLowerCase()} for ${nameEl.textContent}`);
|
||||
|
||||
const valueTextEl = document.createElement("span");
|
||||
valueTextEl.className = "recent-chat-value";
|
||||
valueTextEl.textContent = hasValue ? valueString : "—";
|
||||
valueButton.appendChild(valueTextEl);
|
||||
|
||||
const iconEl = document.createElement("span");
|
||||
iconEl.className = "recent-chat-copy-icon";
|
||||
iconEl.innerHTML = `
|
||||
<svg class="icon icon-copy" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v16h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 18H8V7h11v16z" />
|
||||
</svg>
|
||||
`;
|
||||
valueButton.appendChild(iconEl);
|
||||
|
||||
const canCopy = hasValue && copyValue !== null && copyValue !== undefined && copyValue !== "";
|
||||
if (canCopy) {
|
||||
valueButton.addEventListener("click", async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(String(copyValue));
|
||||
setFeedback(`${labelText} copied to clipboard.`);
|
||||
} catch (err) {
|
||||
setFeedback(`Copy failed: ${err.message}`, true);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
valueButton.disabled = true;
|
||||
valueButton.setAttribute("aria-disabled", "true");
|
||||
}
|
||||
|
||||
actionsEl.appendChild(valueButton);
|
||||
row.appendChild(labelEl);
|
||||
row.appendChild(actionsEl);
|
||||
item.appendChild(row);
|
||||
};
|
||||
|
||||
appendRow(
|
||||
"Chat ID",
|
||||
typeof chat.chat_id === "number" || typeof chat.chat_id === "bigint" ? String(chat.chat_id) : chat.chat_id,
|
||||
chat.chat_id,
|
||||
{ required: true, valueClasses: ["mono"] },
|
||||
);
|
||||
appendRow(
|
||||
"Username",
|
||||
chat.username ? `@${chat.username}` : "",
|
||||
chat.username ? `@${chat.username}` : "",
|
||||
{},
|
||||
);
|
||||
appendRow(
|
||||
"Phone",
|
||||
chat.phone_number ? String(chat.phone_number) : "",
|
||||
chat.phone_number ? String(chat.phone_number) : "",
|
||||
{},
|
||||
);
|
||||
|
||||
recentChatsListEl.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function closeRecentChatsDialog() {
|
||||
if (!recentChatsModal || recentChatsModal.classList.contains("hidden")) return;
|
||||
recentChatsModal.classList.add("hidden");
|
||||
document.removeEventListener("keydown", handleRecentChatsKeydown);
|
||||
if (lastFocusedElement && typeof lastFocusedElement.focus === "function") {
|
||||
lastFocusedElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handleRecentChatsKeydown(event) {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
closeRecentChatsDialog();
|
||||
}
|
||||
}
|
||||
|
||||
if (recentChatsBtn) {
|
||||
recentChatsBtn.addEventListener("click", () => {
|
||||
openRecentChatsDialog();
|
||||
});
|
||||
}
|
||||
|
||||
if (closeRecentChatsBtn) {
|
||||
closeRecentChatsBtn.addEventListener("click", () => {
|
||||
closeRecentChatsDialog();
|
||||
});
|
||||
}
|
||||
|
||||
if (recentChatsModal) {
|
||||
recentChatsModal.addEventListener("click", (event) => {
|
||||
if (event.target === recentChatsModal) {
|
||||
closeRecentChatsDialog();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadHooks() {
|
||||
try {
|
||||
const hooks = await fetchJSON("/api/hooks");
|
||||
|
||||
@@ -68,6 +68,18 @@ main {
|
||||
padding: 0 clamp(1rem, 6vw, 4rem) 4rem;
|
||||
}
|
||||
|
||||
.helper-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.helper-button {
|
||||
min-width: 14rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(145deg, rgba(23, 30, 50, 0.92), rgba(10, 12, 22, 0.9));
|
||||
border-radius: var(--border-radius);
|
||||
@@ -402,6 +414,172 @@ button:active {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.recent-chats-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(10, 13, 24, 0.78);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: clamp(1rem, 6vw, 3rem);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
background: linear-gradient(145deg, rgba(22, 28, 48, 0.95), rgba(9, 11, 22, 0.92));
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
max-width: min(34rem, 100%);
|
||||
width: 100%;
|
||||
padding: clamp(1.25rem, 4vw, 2.5rem);
|
||||
box-shadow: 0 28px 60px rgba(8, 12, 24, 0.55);
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.recent-chats-description {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.recent-chats-search-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.recent-chats-search {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.recent-chats-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
max-height: min(24rem, 60vh);
|
||||
overflow-y: auto;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.recent-chat-item {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
padding: 0.85rem clamp(0.75rem, 4vw, 1rem);
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.recent-chat-details {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.recent-chat-name {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.recent-chat-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.recent-chat-extra {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.recent-chat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.recent-chat-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
flex: 0 0 auto;
|
||||
min-width: 5.5rem;
|
||||
}
|
||||
|
||||
.recent-chat-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.recent-chat-value-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.55rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
min-height: 2.25rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.recent-chat-value-button:hover:not(:disabled),
|
||||
.recent-chat-value-button:focus-visible {
|
||||
background: rgba(79, 140, 255, 0.12);
|
||||
border-color: rgba(79, 140, 255, 0.35);
|
||||
box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.recent-chat-value-button:disabled,
|
||||
.recent-chat-value-button[aria-disabled="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.recent-chat-value {
|
||||
flex: 1 1 auto;
|
||||
word-break: break-all;
|
||||
user-select: all;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.recent-chat-copy-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.recent-chat-feedback {
|
||||
min-height: 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -416,6 +594,15 @@ button:active {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.recent-chats-modal {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
max-height: 90vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.site-identity {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user