FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Implement working DMs

Browse Source
This commit is contained in:
denis0001-dev
2025-08-25 17:10:36 +03:00
Unverified
parent a5caf940a6
commit 22f7eb7a62
3 changed files with 72 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+1 -10
View File
@@ -164,16 +164,7 @@
<mdui-tab-panel slot="panel" value="channels">Скоро будет...</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="contacts">Скоро будет...</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="dms">
<mdui-list>
<mdui-list-item>
<div style="display:flex;gap:8px;align-items:center;width:100%">
<mdui-text-field id="dm-username" label="Username" variant="outlined" style="flex:0 0 160px"></mdui-text-field>
<mdui-text-field id="dm-input" label="Сообщение" variant="outlined" style="flex:1"></mdui-text-field>
<mdui-button id="dm-send">Отправить</mdui-button>
</div>
</mdui-list-item>
</mdui-list>
<div class="chat-messages" id="dm-messages" style="margin-top:8px"></div>
<mdui-list id="dm-users"></mdui-list>
</mdui-tab-panel>
</mdui-tabs>
</div>
frontend/src/chat/dm.ts
+54 -20
View File
@@ -70,7 +70,7 @@ export async function decryptDm(envelope: DmEnvelope, senderPublicKeyB64: string
}
function appendDmMessage(text: string, isAuthor: boolean) {
const container = document.getElementById("dm-messages")!;
const container = document.getElementById("chat-messages")!;
const div = document.createElement("div");
div.className = `message ${isAuthor ? "sent" : "received"}`;
const inner = document.createElement("div");
@@ -84,30 +84,64 @@ function appendDmMessage(text: string, isAuthor: boolean) {
container.scrollTop = container.scrollHeight;
}
async function fetchRecipient(userName: string): Promise<{ id: number; publicKey: string | null } | null> {
const res = await fetch(`${API_BASE_URL}/profile/${encodeURIComponent(userName)}`);
if (!res.ok) return null;
// removed unused helper
let activeDm: { userId: number; username: string; publicKey: string | null } | null = null;
let usersLoaded = false;
async function loadUsers() {
const res = await fetch(`${API_BASE_URL}/users`, { headers: getAuthHeaders(true) });
if (!res.ok) return;
const data = await res.json();
// This assumes an endpoint returns profile with id; adapt if different
const pkRes = await fetch(`${API_BASE_URL}/crypto/public-key`, { headers: getAuthHeaders(true) });
// For simplicity, we reuse current user's endpoint; in real case, need GET by userId
// Minimal v1: assume recipient has same endpoint at /profile/public-key?userId=... (not implemented)
return { id: data.id, publicKey: null };
const list = document.getElementById("dm-users")!;
list.innerHTML = "";
(data.users || []).forEach((u: any) => {
const item = document.createElement("mdui-list-item");
item.setAttribute("headline", u.username);
item.addEventListener("click", async () => {
activeDm = { userId: u.id, username: u.username, publicKey: null };
document.getElementById("chat-name")!.textContent = u.username;
(document.getElementById("chat-messages") as HTMLElement).innerHTML = "";
const resPk = await fetch(`${API_BASE_URL}/crypto/public-key/of/${u.id}`, { headers: getAuthHeaders(true) });
if (resPk.ok) {
const pkData = await resPk.json();
activeDm!.publicKey = pkData.publicKey;
}
});
list.appendChild(item);
});
}
document.addEventListener("DOMContentLoaded", () => {
const sendBtn = document.getElementById("dm-send");
if (!sendBtn) return;
sendBtn.addEventListener("click", async () => {
const userEl = document.getElementById("dm-username") as HTMLInputElement;
const textEl = document.getElementById("dm-input") as HTMLInputElement;
const username = userEl.value.trim();
const text = textEl.value.trim();
if (!username || !text) return;
// TODO: replace with real lookup for recipientId and publicKey
appendDmMessage(text, true);
textEl.value = "";
const tabs = document.querySelector(".chat-tabs mdui-tabs");
const dmTab = tabs?.querySelector('mdui-tab[value="dms"]');
function ensureUsersLoaded() {
if (!usersLoaded) {
usersLoaded = true;
loadUsers();
}
}
dmTab?.addEventListener("click", ensureUsersLoaded);
(tabs as any)?.addEventListener("change", (e: any) => {
if (e?.detail?.value === "dms") ensureUsersLoaded();
});
const form = document.getElementById("message-form");
if (form) {
form.addEventListener("submit", async (e) => {
if (!activeDm) return; // Let global chat handler proceed
e.preventDefault();
const input = document.getElementById("message-input") as HTMLInputElement;
const text = input.value.trim();
if (!text) return;
appendDmMessage(text, true);
input.value = "";
if (activeDm.publicKey) {
try {
await sendDm(activeDm.userId, activeDm.publicKey, text);
} catch {}
}
});
}
});