Bytemalte/marstemedia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Fixed the message loading for allready sendet messages (bug for loading self sended messages)

Browse Source
This commit is contained in:
Bytemalte
2026-01-16 22:00:19 +01:00
parent c164a4ed1b
commit 881363e703
3 changed files with 113 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/chat.rs
View File

@@ -1,10 +1,10 @@
use gloo_timers::callback::Interval;
use js_sys::Date;
use serde::{Deserialize, Serialize};
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
use web_sys::HtmlInputElement;
use yew::prelude::*;
use gloo_timers::callback::Interval;
use js_sys::Date;
#[wasm_bindgen]
extern "C" {
@@ -15,6 +15,7 @@ extern "C" {
#[derive(Serialize, Deserialize, Clone, PartialEq, Debug)]
#[serde(rename_all = "camelCase")]
pub struct ChatMessage {
pub id: Option<String>, // ID ist None für optimistische Nachrichten
pub content: String,
pub is_incoming: bool,
pub created_at: u64,
@@ -22,58 +23,81 @@ pub struct ChatMessage {
#[derive(Serialize)]
#[serde(rename_all = "camelCase")]
struct ChatArgs { content: String, receiver_npub: String }
struct ChatArgs {
content: String,
receiver_npub: String,
}
#[derive(Serialize)]
#[serde(rename_all = "camelCase")]
struct GetArgs { receiver_npub: String }
struct GetArgs {
receiver_npub: String,
}
#[function_component(Chat)]
pub fn chat() -> Html {
let messages = use_state(|| Vec::<ChatMessage>::new());
let relay_connected = use_state(|| false); // Status für den Punkt
let relay_connected = use_state(|| false);
let recipient_ref = use_node_ref();
let input_ref = use_node_ref();
let chat_bottom_ref = use_node_ref();
// Polling Logik & Status Check
// --- Polling Logic mit Smart Merge ---
{
let messages = messages.clone();
let relay_connected = relay_connected.clone();
let recipient_ref = recipient_ref.clone();
use_effect(move || {
let interval = Interval::new(3000, move || {
let messages = messages.clone();
let relay_connected = relay_connected.clone();
if let Some(recipient) = recipient_ref.cast::<HtmlInputElement>() {
let npub = recipient.value();
let npub_clean = npub.trim().to_string();
let npub = recipient.value().trim().to_string();
if npub.is_empty() {
return;
}
spawn_local(async move {
if !npub_clean.is_empty() {
let args = serde_wasm_bindgen::to_value(&GetArgs {
receiver_npub: npub_clean
}).unwrap();
let fetched: JsValue = invoke("get_nostr_messages", args).await;
if let Ok(mut new_msgs) = serde_wasm_bindgen::from_value::<Vec<ChatMessage>>(fetched) {
new_msgs.sort_by_key(|m| m.created_at);
// WICHTIG FÜR NEUSTART:
// Wenn lokal 0, aber Relay > 0 -> Sofort laden
let current_len = (*messages).len();
if current_len == 0 && !new_msgs.is_empty() {
messages.set(new_msgs);
relay_connected.set(true);
} else if new_msgs.len() > current_len {
messages.set(new_msgs);
relay_connected.set(true);
} else if !new_msgs.is_empty() {
relay_connected.set(true);
let args = serde_wasm_bindgen::to_value(&GetArgs {
receiver_npub: npub,
})
.unwrap();
let fetched: JsValue = invoke("get_nostr_messages", args).await;
if let Ok(relay_msgs) =
serde_wasm_bindgen::from_value::<Vec<ChatMessage>>(fetched)
{
if !relay_msgs.is_empty() {
relay_connected.set(true);
}
let current_local_msgs = (*messages).clone();
// SMART MERGE LOGIC:
// 1. Take all messages from the relay.
// 2. Add local "optimistic" messages (id == None) that haven't appeared in relay_msgs yet.
let mut merged = relay_msgs.clone();
for local_msg in current_local_msgs.iter().filter(|m| m.id.is_none()) {
// Check if this message is now confirmed (by matching content)
let already_confirmed =
relay_msgs.iter().any(|rm| rm.content == local_msg.content);
if !already_confirmed {
merged.push(local_msg.clone());
}
}
merged.sort_by_key(|m| m.created_at);
// Only update state if something actually changed to avoid flickering
if merged.len() != current_local_msgs.len()
|| merged.last().map(|m| &m.id)
!= current_local_msgs.last().map(|m| &m.id)
{
messages.set(merged);
}
}
});
}
@@ -82,7 +106,7 @@ pub fn chat() -> Html {
});
}
// Autoscroll
// --- Autoscroll ---
{
let chat_bottom_ref = chat_bottom_ref.clone();
let messages_len = messages.len();
@@ -102,13 +126,15 @@ pub fn chat() -> Html {
e.prevent_default();
let input = input_ref.cast::<HtmlInputElement>().unwrap();
let recipient = recipient_ref.cast::<HtmlInputElement>().unwrap();
let content = input.value();
let receiver_npub = recipient.value();
if !content.trim().is_empty() && !receiver_npub.trim().is_empty() {
// Optimistic UI Update: Nachricht sofort ohne ID anzeigen
let mut current = (*messages).clone();
current.push(ChatMessage {
id: None,
content: content.clone(),
is_incoming: false,
created_at: (Date::now() / 1000.0) as u64,
@@ -117,7 +143,11 @@ pub fn chat() -> Html {
input.set_value("");
spawn_local(async move {
let args = serde_wasm_bindgen::to_value(&ChatArgs { content, receiver_npub }).unwrap();
let args = serde_wasm_bindgen::to_value(&ChatArgs {
content,
receiver_npub,
})
.unwrap();
let _ = invoke("send_nostr_message", args).await;
});
}
@@ -133,36 +163,26 @@ pub fn chat() -> Html {
<small>{if *relay_connected { " Relays aktiv" } else { " Verbinde..." }}</small>
</div>
</header>
<div class="recipient-box">
<input
ref={recipient_ref}
type="text"
placeholder="Empfänger npub..."
class="recipient-input"
/>
<input ref={recipient_ref} type="text" placeholder="Empfänger npub..." class="recipient-input" />
</div>
<div class="chat-list">
{ for (*messages).iter().map(|msg| html! {
<div class={if msg.is_incoming { "chat-item incoming" } else { "chat-item outgoing" }}>
<div class={classes!(
if msg.is_incoming { "chat-item incoming" } else { "chat-item outgoing" },
if msg.id.is_none() { "pending" } else { "confirmed" } // Optional: CSS für "Sende..." Status
)}>
<div class="chat-meta">
{ if msg.is_incoming { "Empfangen" } else { "Du" } }
{ if msg.id.is_none() { " (sendet...)" } else { "" } }
</div>
<div class="chat-content">{ &msg.content }</div>
</div>
}) }
<div ref={chat_bottom_ref}></div>
</div>
<form class="chat-input-container" onsubmit={on_send}>
<input
ref={input_ref}
type="text"
placeholder="Nachricht schreiben..."
class="chat-input"
autocomplete="off"
/>
<input ref={input_ref} type="text" placeholder="Nachricht schreiben..." class="chat-input" autocomplete="off" />
<button type="submit" class="chat-send-btn">{"↑"}</button>
</form>
</div>