jarno/ws-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: moved components to their own module, use ollama for the chat.

Browse Source
This commit is contained in:
Jarno
2026-02-21 14:59:31 +02:00
parent cafec90019
commit edc425e28f
9 changed files with 201 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
frontend/src/app.rs
View File

@@ -1,17 +1,19 @@
use std::time::Duration;
use feshared::daemon::DaemonState;
use leptos::logging::log;
use leptos::{prelude::*, reactive::spawn_local};
use leptos_router::{
components::{Route, Router, Routes},
path,
};
use serde::{Deserialize, Serialize};
use wasm_bindgen::{prelude::Closure, JsValue};
use wasm_bindgen::JsValue;
use crate::bridge::{invoke, listen};
use crate::popup::PopupView;
use crate::{bridge::invoke, components::DarkModeToggle};
use crate::{
bridge::invoke_typed,
components::{DaemonProvider, ThemeProvider},
};
pub const BTN_PRIMARY: &str = "bg-slate-300 hover:bg-slate-400 dark:bg-slate-800 hover:dark-bg-slate-700 px-4 py-2 rounded-md";
@@ -35,18 +37,11 @@ fn Dashboard() -> impl IntoView {
invoke("toggle_popup", empty_args).await;
});
};
let toggle_dark_mode = |_ev: leptos::ev::MouseEvent| {
spawn_local(async {
let _ = invoke("toggle_dark_mode", JsValue::UNDEFINED).await;
});
};
view! {
<ThemeProvider>
<DaemonProvider>
<div class="min-h-screen w-screen bg-white dark:bg-zinc-900 text-gray-950 dark:text-white">
<button class=BTN_PRIMARY on:click=on_click>Open chat</button>
<button class=BTN_PRIMARY on:click=toggle_dark_mode>asdf?</button>
</div>
</DaemonProvider>
<div class="fixed bottom-0 right-0 p-2">
@@ -56,22 +51,6 @@ fn Dashboard() -> impl IntoView {
}
}
#[component]
pub fn DarkModeToggle() -> impl IntoView {
let toggle_dark_mode = |_ev: leptos::ev::MouseEvent| {
spawn_local(async {
let _ = invoke("toggle_dark_mode", JsValue::UNDEFINED).await;
});
};
view! {
<div on:click=toggle_dark_mode class="text-gray-600 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
</div>
}
}
#[component]
pub fn DaemonStatusIndicator() -> impl IntoView {
let (poll_count, set_pool_count) = signal(0);
@@ -81,8 +60,7 @@ pub fn DaemonStatusIndicator() -> impl IntoView {
);
let status = LocalResource::new(move || async move {
poll_count.get();
let val = invoke("daemon_state", JsValue::NULL).await;
let s: DaemonState = serde_wasm_bindgen::from_value(val).unwrap();
let s: DaemonState = invoke_typed("daemon_state", JsValue::NULL).await;
s
});
@@ -115,82 +93,3 @@ pub fn DaemonStatusIndicator() -> impl IntoView {
</div>
}
}
#[component]
pub fn DaemonProvider(children: ChildrenFn) -> impl IntoView {
let (poll_count, set_pool_count) = signal(0);
set_interval(
move || set_pool_count.update(|v| *v += 1),
Duration::from_secs(1),
);
let status_res = LocalResource::new(move || async move {
poll_count.get();
let val = invoke("daemon_state", JsValue::NULL).await;
let s: DaemonState = serde_wasm_bindgen::from_value(val).unwrap();
s
});
let is_daemon_ok = Memo::new(move |_| status_res.get().map(|s| (s.is_ok, s.error)));
provide_context(status_res);
move || match is_daemon_ok.get() {
Some((true, _)) => children().into_any(),
Some((false, err)) => view! { <DaemonErrorStatus error=err/> }.into_any(),
None => view! { <p>Connecting...</p> }.into_any(),
}
}
#[component]
fn DaemonErrorStatus(error: Option<String>) -> impl IntoView {
view! {
<ThemeProvider>
<div class="w-screen h-screen bg-white dark:bg-zinc-900">
<p>{ error.unwrap_or("Daemon error!".to_string()) } </p>
</div>
</ThemeProvider>
}
}
#[derive(Deserialize, Serialize, Clone)]
struct DarkMode {
is_dark_mode: bool,
}
#[component]
pub fn ThemeProvider(children: Children) -> impl IntoView {
let (is_dark, set_dark) = signal(false);
Effect::new(move |_| {
spawn_local(async move {
let handler = Closure::wrap(Box::new(move |evt: JsValue| {
log!("Received!!!");
#[derive(Deserialize)]
struct TauriEvent<T> {
payload: T,
}
if let Ok(wrapper) = serde_wasm_bindgen::from_value::<TauriEvent<DarkMode>>(evt) {
set_dark.set(wrapper.payload.is_dark_mode);
}
}) as Box<dyn FnMut(JsValue)>);
let unlisten = listen("dark-mode-changed", &handler).await;
// TODO use on_cleanup to call the unlisten JS function.
handler.forget()
});
});
Effect::new(move |_| {
let el = document()
.document_element()
.expect("HTML element not found!");
if is_dark.get() {
let _ = el.set_attribute("class", "dark");
} else {
let _ = el.set_attribute("class", "");
}
});
view! {
{children()}
}
}

27
frontend/src/bridge.rs
View File

@@ -1,3 +1,4 @@
use serde::{de::DeserializeOwned, Deserialize};
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
@@ -7,3 +8,29 @@ extern "C" {
#[wasm_bindgen(js_namespace = ["window", "__TAURI__", "event"])]
pub async fn listen(event: &str, handler: &Closure<dyn FnMut(JsValue)>) -> JsValue;
}
pub async fn invoke_typed<T>(cmd: &str, args: JsValue) -> T
where
T: DeserializeOwned,
{
let response = invoke(cmd, args).await;
let result: T = serde_wasm_bindgen::from_value(response).unwrap();
result
}
pub fn event_handler<T, F>(callback: F) -> Closure<dyn FnMut(JsValue)>
where
T: DeserializeOwned + 'static,
F: Fn(T) + 'static,
{
Closure::new(move |val: JsValue| {
#[derive(Deserialize)]
struct TauriEvent<T> {
payload: T,
}
if let Ok(wrapper) = serde_wasm_bindgen::from_value::<TauriEvent<T>>(val) {
callback(wrapper.payload)
}
})
}

101
frontend/src/components.rs Normal file
View File

@@ -0,0 +1,101 @@
use std::time::Duration;
use feshared::daemon::DaemonState;
use leptos::{component, prelude::*, reactive::spawn_local, view, IntoView};
use serde::{Deserialize, Serialize};
use wasm_bindgen::JsValue;
use crate::bridge::{event_handler, invoke, invoke_typed, listen};
#[component]
pub fn DaemonProvider(children: ChildrenFn) -> impl IntoView {
let (poll_count, set_pool_count) = signal(0);
set_interval(
move || set_pool_count.update(|v| *v += 1),
Duration::from_secs(1),
);
let status_res = LocalResource::new(move || async move {
poll_count.get();
let s: DaemonState = invoke_typed("daemon_state", JsValue::NULL).await;
s
});
let is_daemon_ok = Memo::new(move |_| status_res.get().map(|s| (s.is_ok, s.error)));
provide_context(status_res);
move || match is_daemon_ok.get() {
Some((true, _)) => children().into_any(),
Some((false, err)) => view! { <DaemonErrorStatus error=err/> }.into_any(),
None => view! { <p>Connecting...</p> }.into_any(),
}
}
#[component]
pub fn DaemonErrorStatus(error: Option<String>) -> impl IntoView {
view! {
<div class="w-screen h-screen
text-gray-950 dark:text-white
bg-white dark:bg-zinc-900
flex justify-center items-center">
<div class="text-zinc-100 dark:text-zinc-800 fixed w-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</div>
<span class="fixed">{ error.unwrap_or("Daemon error!".to_string()) } </span>
</div>
}
}
#[derive(Deserialize, Serialize, Clone)]
pub struct DarkMode {
is_dark_mode: bool,
}
#[component]
pub fn ThemeProvider(children: Children) -> impl IntoView {
let (is_dark, set_dark) = signal(true);
Effect::new(move |_| {
spawn_local(async move {
let hndlr = event_handler(move |mode: DarkMode| {
set_dark.set(mode.is_dark_mode);
});
// TODO use on_cleanup to call the unlisten JS function.
let unlisten = listen("dark-mode-changed", &hndlr).await;
hndlr.forget()
});
});
Effect::new(move |_| {
let el = document()
.document_element()
.expect("HTML element not found!");
if is_dark.get() {
let _ = el.set_attribute("class", "dark");
} else {
let _ = el.set_attribute("class", "");
}
});
view! {
{children()}
}
}
#[component]
pub fn DarkModeToggle() -> impl IntoView {
let toggle_dark_mode = |_ev: leptos::ev::MouseEvent| {
spawn_local(async {
let _ = invoke("toggle_dark_mode", JsValue::UNDEFINED).await;
});
};
view! {
<div on:click=toggle_dark_mode class="text-gray-600 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
</div>
}
}

1
frontend/src/main.rs
View File

@@ -1,5 +1,6 @@
mod app;
mod bridge;
mod components;
mod popup;
use app::*;

12
frontend/src/popup.rs
View File

@@ -1,6 +1,6 @@
use crate::{
app::{DaemonProvider, DarkModeToggle, ThemeProvider},
bridge::invoke,
bridge::{invoke, invoke_typed},
components::{DaemonProvider, DarkModeToggle, ThemeProvider},
};
use feshared::{
chatmessage::{Message, MessageHistory},
@@ -14,7 +14,7 @@ use wasm_bindgen_futures::spawn_local;
pub fn PopupView() -> impl IntoView {
view! {<ThemeProvider>
<DaemonProvider>
<Popup />
<Popup />
</DaemonProvider>
</ThemeProvider>
}
@@ -30,12 +30,11 @@ pub fn Popup() -> impl IntoView {
use_context::<LocalResource<DaemonState>>().expect("No daemon connection context!");
let init_history = Action::new_local(|(): &()| async move {
let response = invoke(
let history: MessageHistory = invoke_typed(
"chat_history",
serde_wasm_bindgen::to_value(&serde_json::json!({"chat_id": 1})).unwrap(),
)
.await;
let history: MessageHistory = serde_wasm_bindgen::from_value(response).unwrap();
history
});
Effect::new(move |prev_status: Option<bool>| {
@@ -55,12 +54,11 @@ pub fn Popup() -> impl IntoView {
let prompt_action = Action::new_local(|prompt: &String| {
let prompt = prompt.clone();
async move {
let response = invoke(
let result: Vec<Message> = invoke_typed(
"chat",
serde_wasm_bindgen::to_value(&serde_json::json!({"prompt": prompt})).unwrap(),
)
.await;
let result: Vec<Message> = serde_wasm_bindgen::from_value(response).unwrap();
result
}
});