+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web-ui/src/components/app.rs b/web-ui/src/components/app.rs
new file mode 100644
index 0000000..40a3559
--- /dev/null
+++ b/web-ui/src/components/app.rs
@@ -0,0 +1,1762 @@
+use yew::prelude::*;
+use gloo_net::websocket::futures::WebSocket;
+use gloo_net::websocket::Message;
+use futures_util::{StreamExt, SinkExt};
+use wasm_bindgen_futures::spawn_local;
+use async_chat::{FromClient, FromServer};
+use std::sync::Arc;
+use std::rc::Rc;
+use std::cell::RefCell;
+use std::collections::HashMap;
+use futures::channel::mpsc;
+use web_sys::HtmlInputElement;
+use stylist::yew::styled_component;
+use stylist::css;
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::JsCast;
+
+use super::audio;
+
+#[derive(Clone, PartialEq)]
+enum MessageContent {
+ Text(String),
+ File { filename: String, data: String },
+ Voice { duration: f64, data: String },
+}
+
+#[derive(Clone, PartialEq)]
+struct ChatMessage {
+ id: String,
+ author: String,
+ content: MessageContent,
+ is_self: bool,
+ is_error: bool,
+ timestamp: chrono::DateTimeLoading Async Chat...
+
+
+
+
+
+
+
+
+
+
+
+ }
+}
diff --git a/web-ui/src/components/audio.rs b/web-ui/src/components/audio.rs
new file mode 100644
index 0000000..0883d01
--- /dev/null
+++ b/web-ui/src/components/audio.rs
@@ -0,0 +1,97 @@
+use wasm_bindgen::prelude::*;
+use web_sys::{AudioContext, OscillatorType};
+
+/// Play a notification sound using Web Audio API
+pub fn play_notification_sound() {
+ if let Err(e) = play_notification_internal() {
+ web_sys::console::log_1(&format!("Audio error: {:?}", e).into());
+ }
+}
+
+fn play_notification_internal() -> Result<(), JsValue> {
+ let context = AudioContext::new()?;
+
+ // Create oscillator for the tone
+ let oscillator = context.create_oscillator()?;
+ let gain = context.create_gain()?;
+
+ // Connect oscillator -> gain -> destination
+ oscillator.connect_with_audio_node(&gain)?;
+ gain.connect_with_audio_node(&context.destination())?;
+
+ // Configure the sound - pleasant notification tone
+ oscillator.set_type(OscillatorType::Sine);
+ oscillator.frequency().set_value(880.0); // A5 note
+
+ // Envelope: quick fade in, sustain, fade out
+ let now = context.current_time();
+ gain.gain().set_value_at_time(0.0, now)?;
+ gain.gain().linear_ramp_to_value_at_time(0.3, now + 0.05)?; // Fade in
+ gain.gain().linear_ramp_to_value_at_time(0.3, now + 0.1)?; // Sustain
+ gain.gain().linear_ramp_to_value_at_time(0.0, now + 0.3)?; // Fade out
+
+ // Play the sound
+ oscillator.start()?;
+ oscillator.stop_with_when(now + 0.3)?;
+
+ Ok(())
+}
+
+/// Play a simple click sound for UI feedback
+pub fn play_click_sound() {
+ if let Err(_) = play_click_internal() {
+ // Silently fail for click sounds
+ }
+}
+
+fn play_click_internal() -> Result<(), JsValue> {
+ let context = AudioContext::new()?;
+ let oscillator = context.create_oscillator()?;
+ let gain = context.create_gain()?;
+
+ oscillator.connect_with_audio_node(&gain)?;
+ gain.connect_with_audio_node(&context.destination())?;
+
+ oscillator.set_type(OscillatorType::Sine);
+ oscillator.frequency().set_value(1200.0);
+
+ let now = context.current_time();
+ gain.gain().set_value_at_time(0.1, now)?;
+ gain.gain().linear_ramp_to_value_at_time(0.0, now + 0.05)?;
+
+ oscillator.start()?;
+ oscillator.stop_with_when(now + 0.05)?;
+
+ Ok(())
+}
+
+/// Play a send message sound
+pub fn play_send_sound() {
+ if let Err(_) = play_send_internal() {
+ // Silently fail
+ }
+}
+
+fn play_send_internal() -> Result<(), JsValue> {
+ let context = AudioContext::new()?;
+ let oscillator = context.create_oscillator()?;
+ let gain = context.create_gain()?;
+
+ oscillator.connect_with_audio_node(&gain)?;
+ gain.connect_with_audio_node(&context.destination())?;
+
+ oscillator.set_type(OscillatorType::Sine);
+
+ // Rising tone for "sent" feeling
+ let now = context.current_time();
+ oscillator.frequency().set_value_at_time(600.0, now)?;
+ oscillator.frequency().linear_ramp_to_value_at_time(900.0, now + 0.1)?;
+
+ gain.gain().set_value_at_time(0.15, now)?;
+ gain.gain().linear_ramp_to_value_at_time(0.0, now + 0.15)?;
+
+ oscillator.start()?;
+ oscillator.stop_with_when(now + 0.15)?;
+
+ Ok(())
+}
diff --git a/web-ui/src/components/mod.rs b/web-ui/src/components/mod.rs
new file mode 100644
index 0000000..d36be96
--- /dev/null
+++ b/web-ui/src/components/mod.rs
@@ -0,0 +1,2 @@
+pub mod app;
+pub mod audio;
\ No newline at end of file
diff --git a/web-ui/src/main.rs b/web-ui/src/main.rs
new file mode 100644
index 0000000..df79e12
--- /dev/null
+++ b/web-ui/src/main.rs
@@ -0,0 +1,15 @@
+mod components;
+mod services;
+mod styles;
+mod types;
+
+use components::app::App;
+
+fn main() {
+ // Initialize logger for debugging
+ wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+ console_error_panic_hook::set_once();
+
+ // Mount the app to the DOM
+ yew::Renderer::
+ { if !*left_sidebar_visible {
+ html! {
+
+ {"โฐ"}{"Menu"}
+
+ }
+ } else { html! {} }}
+ 
+
+
+
+ {"General Chat"}
+
+
+ { if *connected { "Live Connection" } else { "Disconnected" } }
+
+
+
+ { if *dark_mode { "โ๏ธ" } else { "๐" } }
+
+ { if !*right_sidebar_visible {
+ html! { {"โ "} }
+ } else { html! {} }}
+
+
+
+
+
+
+
+ {"Async History"} +
+
+ { for chat_state.current_messages().iter().enumerate().map(|(idx, m)| {
+ let is_system = m.author == "System" || m.author == "Error" || m.is_error;
+
+ if is_system {
+ let text = match &m.content {
+ MessageContent::Text(t) => t.clone(),
+ _ => "System error".to_string(),
+ };
+ return html! {
+ + {"Async History"} +
+ { text }
+
+ };
+ }
+
+ let bubble_class = if m.is_self {
+ classes!(bubble_base.clone(), my_bubble.clone())
+ } else {
+ classes!(bubble_base.clone(), other_bubble.clone())
+ };
+
+ let formatted_time = m.timestamp.format("%H:%M").to_string();
+ let my_name = (*my_name_state).clone();
+ let msg_idx = idx;
+
+ html! {
+
+ ![]({format!("https://ui-avatars.com/api/?name={}&background=random",)
+
+ }
+ })}
+
+
+
+ { &m.author }
+ { formatted_time }
+
+
+ // Show reply preview if this is a reply
+ { if let Some(ref reply) = m.reply_to {
+ html! {
+
+
+ // Reactions display
+ { if !m.reactions.is_empty() {
+ html! {
+
+
+ }
+ } else { html! {} }}
+ { match &m.content {
+ MessageContent::Text(text) => html! { { text } },
+ MessageContent::File { filename, data } => {
+ if filename.ends_with(".png") || filename.ends_with(".jpg") || filename.ends_with(".jpeg") || filename.ends_with(".gif") {
+ html! {
+
+ {"โฉ Replying to "}{&reply.author}
+
+
+
+ })
+ { filename }
+
+ }
+ } else {
+ html! {
+
+ {"๐"}
+
+ }
+ }
+ }
+ MessageContent::Voice { duration, data } => {
+ html! {
+
+ { filename }
+ {"Download"}
+
+
+ {"๐ค"}
+
+ }
+ }
+ }}
+
+
+
+ {format!("Voice message ({:.1}s)", duration)}
+
+
+
+ { for m.reactions.iter().map(|(emoji, _user)| {
+ html! {
+
+ { emoji }
+
+ }
+ })}
+
+ }
+ } else { html! {} }}
+
+ // Quick reactions
+ { if !m.is_error {
+ let tx_clone = tx.clone();
+ let group_ref_clone = group_ref.clone();
+ let my_name_clone = my_name.clone();
+ let msg_id = m.id.clone();
+ html! {
+
+ { for ["โค๏ธ", "๐", "๐", "๐"].iter().map(|&emoji| {
+ let chat_state_inner = chat_state.clone();
+ let tx_inner = tx_clone.clone();
+ let group_ref_inner = group_ref_clone.clone();
+ let my_name_inner = my_name_clone.clone();
+ let msg_id_inner = msg_id.clone();
+ let emoji_str = emoji.to_string();
+ let msg_idx_inner = msg_idx;
+ let on_react = Callback::from(move |_: MouseEvent| {
+ // Update local state immediately for instant feedback
+ chat_state_inner.dispatch(ChatAction::AddReaction {
+ msg_index: msg_idx_inner,
+ emoji: emoji_str.clone(),
+ user: my_name_inner.clone(),
+ });
+
+ // Send reaction to server for broadcast to other clients
+ if let Some(sender) = &*tx_inner {
+ if let Some(group_el) = group_ref_inner.cast::() {
+ let group_name = group_el.value().trim().to_string();
+ if !group_name.is_empty() {
+ let _ = sender.unbounded_send(FromClient::PostReaction {
+ group_name: Arc::new(group_name),
+ author: Arc::new(my_name_inner.clone()),
+ message_id: msg_id_inner.clone(),
+ emoji: emoji_str.clone(),
+ });
+ }
+ }
+ }
+ });
+ html! {
+
+ { emoji }
+
+ }
+ })}
+
+ }
+ } else { html! {} }}
+