Send message function

src/pages/chat.rs

@@ -1,10 +1,106 @@
+use serde::Serialize;
+use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::spawn_local;
+use web_sys::HtmlInputElement;
 use yew::prelude::*;
 
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
+    async fn invoke(cmd: &str, args: JsValue) -> JsValue;
+}
+
+// DAS HIER IST DIE WICHTIGE ÄNDERUNG:
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct ChatArgs {
+    content: String,
+    receiver_npub: String, // Wird jetzt als "receiverNpub" gesendet
+}
+
 #[function_component(Chat)]
 pub fn chat() -> Html {
+    let messages = use_state(|| vec![]);
+    let input_ref = use_node_ref();
+    let recipient_ref = use_node_ref();
+    let chat_bottom_ref = use_node_ref();
+
+    // Autoscroll
+    {
+        let chat_bottom_ref = chat_bottom_ref.clone();
+        let messages = messages.clone();
+        use_effect_with(messages, move |_| {
+            if let Some(element) = chat_bottom_ref.cast::<web_sys::HtmlElement>() {
+                element.scroll_into_view();
+            }
+            || ()
+        });
+    }
+
+    let on_send = {
+        let messages = messages.clone();
+        let input_ref = input_ref.clone();
+        let recipient_ref = recipient_ref.clone();
+
+        Callback::from(move |e: SubmitEvent| {
+            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
+                let mut current = (*messages).clone();
+                current.push(content.clone());
+                messages.set(current);
+
+                input.set_value("");
+
+                spawn_local(async move {
+                    let args = serde_wasm_bindgen::to_value(&ChatArgs {
+                        content,
+                        receiver_npub,
+                    })
+                    .unwrap();
+
+                    // Der Aufruf wird jetzt funktionieren, da die Keys matchen
+                    invoke("send_nostr_message", args).await;
+                });
+            }
+        })
+    };
+
     html! {
-        <div>
-            <h1>{"Chat Page"}</h1>
+        <div class="chat-wrapper">
+            <header class="feed-header">
+                <h1 class="feed-title">{"💬 Chat"}</h1>
+            </header>
+
+            <div class="recipient-box">
+                <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="chat-item">
+                        <div class="chat-meta">{"Du • Jetzt"}</div>
+                        <div class="chat-content">{ msg }</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..." class="chat-input" />
+                <button type="submit" class="chat-send-btn">{"↑"}</button>
+            </form>
         </div>
     }
 }