feat: moved components to their own module, use ollama for the chat.
This commit is contained in:
@@ -7,7 +7,7 @@ use tokio::fs;
|
|||||||
use tonic::async_trait;
|
use tonic::async_trait;
|
||||||
|
|
||||||
#[derive(Debug, sqlx::FromRow)]
|
#[derive(Debug, sqlx::FromRow)]
|
||||||
pub struct ChatMessage {
|
pub struct ChatMessageData {
|
||||||
pub id: i64,
|
pub id: i64,
|
||||||
pub text: String,
|
pub text: String,
|
||||||
pub is_user: bool,
|
pub is_user: bool,
|
||||||
@@ -15,8 +15,8 @@ pub struct ChatMessage {
|
|||||||
|
|
||||||
#[async_trait]
|
#[async_trait]
|
||||||
pub trait ChatRepository {
|
pub trait ChatRepository {
|
||||||
async fn save_message(&self, text: &str, is_user: &bool) -> Result<ChatMessage>;
|
async fn save_message(&self, text: &str, is_user: &bool) -> Result<ChatMessageData>;
|
||||||
async fn get_latest_messages(&self) -> Result<Vec<ChatMessage>>;
|
async fn get_latest_messages(&self) -> Result<Vec<ChatMessageData>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
pub struct SqliteChatRepository {
|
pub struct SqliteChatRepository {
|
||||||
@@ -51,8 +51,8 @@ impl SqliteChatRepository {
|
|||||||
|
|
||||||
#[async_trait]
|
#[async_trait]
|
||||||
impl ChatRepository for SqliteChatRepository {
|
impl ChatRepository for SqliteChatRepository {
|
||||||
async fn save_message(&self, text: &str, is_user: &bool) -> Result<ChatMessage> {
|
async fn save_message(&self, text: &str, is_user: &bool) -> Result<ChatMessageData> {
|
||||||
let result = sqlx::query_as::<_, ChatMessage>(
|
let result = sqlx::query_as::<_, ChatMessageData>(
|
||||||
r#"
|
r#"
|
||||||
INSERT INTO messages (text, is_user)
|
INSERT INTO messages (text, is_user)
|
||||||
VALUES (?, ?)
|
VALUES (?, ?)
|
||||||
@@ -67,7 +67,7 @@ impl ChatRepository for SqliteChatRepository {
|
|||||||
Ok(result)
|
Ok(result)
|
||||||
}
|
}
|
||||||
|
|
||||||
async fn get_latest_messages(&self) -> Result<Vec<ChatMessage>> {
|
async fn get_latest_messages(&self) -> Result<Vec<ChatMessageData>> {
|
||||||
let rows = sqlx::query(
|
let rows = sqlx::query(
|
||||||
r#"
|
r#"
|
||||||
SELECT * FROM (
|
SELECT * FROM (
|
||||||
@@ -83,7 +83,7 @@ impl ChatRepository for SqliteChatRepository {
|
|||||||
|
|
||||||
let messages = rows
|
let messages = rows
|
||||||
.into_iter()
|
.into_iter()
|
||||||
.map(|row| ChatMessage {
|
.map(|row| ChatMessageData {
|
||||||
id: row.get(0),
|
id: row.get(0),
|
||||||
text: row.get(1),
|
text: row.get(1),
|
||||||
is_user: row.get(2),
|
is_user: row.get(2),
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
use crate::chatpersistence::{ChatMessage, ChatRepository};
|
use crate::chatpersistence::{ChatMessageData, ChatRepository};
|
||||||
|
use anyhow::Result;
|
||||||
|
use genai::chat::{ChatMessage, ChatRequest};
|
||||||
|
use genai::Client;
|
||||||
use shared::ai::ai_daemon_server::AiDaemon;
|
use shared::ai::ai_daemon_server::AiDaemon;
|
||||||
use shared::ai::{
|
use shared::ai::{
|
||||||
ChatHistoryRequest, ChatHistoryResponse, ChatMessage as CMessage, ChatRequest as CRequest,
|
ChatHistoryRequest, ChatHistoryResponse, ChatMessage as CMessage, ChatRequest as CRequest,
|
||||||
@@ -9,11 +12,15 @@ use tonic::{Code, Request, Response, Status};
|
|||||||
|
|
||||||
pub struct DaemonServer {
|
pub struct DaemonServer {
|
||||||
repo: Arc<dyn ChatRepository + Send + Sync>,
|
repo: Arc<dyn ChatRepository + Send + Sync>,
|
||||||
|
client: Client,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl DaemonServer {
|
impl DaemonServer {
|
||||||
pub fn new(repo: Arc<dyn ChatRepository + Send + Sync>) -> Self {
|
pub fn new(repo: Arc<dyn ChatRepository + Send + Sync>, client: Client) -> Self {
|
||||||
Self { repo }
|
Self {
|
||||||
|
repo: repo,
|
||||||
|
client: client,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -21,6 +28,17 @@ impl DaemonServer {
|
|||||||
impl AiDaemon for DaemonServer {
|
impl AiDaemon for DaemonServer {
|
||||||
async fn chat(&self, request: Request<CRequest>) -> Result<Response<CResponse>, Status> {
|
async fn chat(&self, request: Request<CRequest>) -> Result<Response<CResponse>, Status> {
|
||||||
let r = request.into_inner();
|
let r = request.into_inner();
|
||||||
|
let mut messages = gather_history(self.repo.clone())
|
||||||
|
.await
|
||||||
|
.map_err(|e| Status::new(Code::Internal, e.to_string()))?;
|
||||||
|
messages.push(ChatMessage::user(r.text()));
|
||||||
|
let model = "llama3.2:latest";
|
||||||
|
let response = self
|
||||||
|
.client
|
||||||
|
.exec_chat(model, ChatRequest::new(messages), None)
|
||||||
|
.await
|
||||||
|
.map_err(|e| Status::new(Code::Internal, e.to_string()))?;
|
||||||
|
|
||||||
let user_message = message_to_dto(
|
let user_message = message_to_dto(
|
||||||
&self
|
&self
|
||||||
.repo
|
.repo
|
||||||
@@ -28,11 +46,18 @@ impl AiDaemon for DaemonServer {
|
|||||||
.await
|
.await
|
||||||
.map_err(|e| Status::new(Code::Internal, e.to_string()))?,
|
.map_err(|e| Status::new(Code::Internal, e.to_string()))?,
|
||||||
);
|
);
|
||||||
let response_text = format!("Pong: {}", r.text());
|
let response_text = match response.first_text() {
|
||||||
|
Some(t) => t,
|
||||||
|
None => "[No response from AI]",
|
||||||
|
};
|
||||||
|
|
||||||
|
println!("User: {}", r.text());
|
||||||
|
println!("AI: {}", response_text.clone());
|
||||||
|
|
||||||
let ai_message = message_to_dto(
|
let ai_message = message_to_dto(
|
||||||
&self
|
&self
|
||||||
.repo
|
.repo
|
||||||
.save_message(response_text.as_str(), &false)
|
.save_message(response_text, &false)
|
||||||
.await
|
.await
|
||||||
.map_err(|e| Status::new(Code::Internal, e.to_string()))?,
|
.map_err(|e| Status::new(Code::Internal, e.to_string()))?,
|
||||||
);
|
);
|
||||||
@@ -73,10 +98,21 @@ impl AiDaemon for DaemonServer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn message_to_dto(msg: &ChatMessage) -> CMessage {
|
pub fn message_to_dto(msg: &ChatMessageData) -> CMessage {
|
||||||
CMessage {
|
CMessage {
|
||||||
id: msg.id,
|
id: msg.id,
|
||||||
text: msg.text.clone(),
|
text: msg.text.clone(),
|
||||||
is_user: msg.is_user,
|
is_user: msg.is_user,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async fn gather_history(repo: Arc<dyn ChatRepository + Send + Sync>) -> Result<Vec<ChatMessage>> {
|
||||||
|
let messages = repo.get_latest_messages().await?;
|
||||||
|
Ok(messages
|
||||||
|
.iter()
|
||||||
|
.map(|m| match m.is_user {
|
||||||
|
true => ChatMessage::assistant(m.text.clone()),
|
||||||
|
false => ChatMessage::user(m.text.clone()),
|
||||||
|
})
|
||||||
|
.collect())
|
||||||
|
}
|
||||||
|
|||||||
@@ -29,9 +29,11 @@ async fn prompt_ollama(
|
|||||||
async fn main() -> Result<(), Box<dyn std::error::Error>> {
|
async fn main() -> Result<(), Box<dyn std::error::Error>> {
|
||||||
let chat_repo = SqliteChatRepository::new().await?;
|
let chat_repo = SqliteChatRepository::new().await?;
|
||||||
|
|
||||||
|
let client = Client::default();
|
||||||
|
|
||||||
let addr_s = "[::1]:50051";
|
let addr_s = "[::1]:50051";
|
||||||
let addr = addr_s.parse().unwrap();
|
let addr = addr_s.parse().unwrap();
|
||||||
let daemon = DaemonServer::new(Arc::new(chat_repo));
|
let daemon = DaemonServer::new(Arc::new(chat_repo), client);
|
||||||
let reflection_service = tonic_reflection::server::Builder::configure()
|
let reflection_service = tonic_reflection::server::Builder::configure()
|
||||||
.register_encoded_file_descriptor_set(shared::ai::FILE_DESCRIPTOR_SET)
|
.register_encoded_file_descriptor_set(shared::ai::FILE_DESCRIPTOR_SET)
|
||||||
.build_v1()?;
|
.build_v1()?;
|
||||||
|
|||||||
@@ -1,17 +1,19 @@
|
|||||||
use std::time::Duration;
|
use std::time::Duration;
|
||||||
|
|
||||||
use feshared::daemon::DaemonState;
|
use feshared::daemon::DaemonState;
|
||||||
use leptos::logging::log;
|
|
||||||
use leptos::{prelude::*, reactive::spawn_local};
|
use leptos::{prelude::*, reactive::spawn_local};
|
||||||
use leptos_router::{
|
use leptos_router::{
|
||||||
components::{Route, Router, Routes},
|
components::{Route, Router, Routes},
|
||||||
path,
|
path,
|
||||||
};
|
};
|
||||||
use serde::{Deserialize, Serialize};
|
use wasm_bindgen::JsValue;
|
||||||
use wasm_bindgen::{prelude::Closure, JsValue};
|
|
||||||
|
|
||||||
use crate::bridge::{invoke, listen};
|
|
||||||
use crate::popup::PopupView;
|
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";
|
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;
|
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! {
|
view! {
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
<DaemonProvider>
|
<DaemonProvider>
|
||||||
<div class="min-h-screen w-screen bg-white dark:bg-zinc-900 text-gray-950 dark:text-white">
|
<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=on_click>Open chat</button>
|
||||||
<button class=BTN_PRIMARY on:click=toggle_dark_mode>asdf?</button>
|
|
||||||
</div>
|
</div>
|
||||||
</DaemonProvider>
|
</DaemonProvider>
|
||||||
<div class="fixed bottom-0 right-0 p-2">
|
<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]
|
#[component]
|
||||||
pub fn DaemonStatusIndicator() -> impl IntoView {
|
pub fn DaemonStatusIndicator() -> impl IntoView {
|
||||||
let (poll_count, set_pool_count) = signal(0);
|
let (poll_count, set_pool_count) = signal(0);
|
||||||
@@ -81,8 +60,7 @@ pub fn DaemonStatusIndicator() -> impl IntoView {
|
|||||||
);
|
);
|
||||||
let status = LocalResource::new(move || async move {
|
let status = LocalResource::new(move || async move {
|
||||||
poll_count.get();
|
poll_count.get();
|
||||||
let val = invoke("daemon_state", JsValue::NULL).await;
|
let s: DaemonState = invoke_typed("daemon_state", JsValue::NULL).await;
|
||||||
let s: DaemonState = serde_wasm_bindgen::from_value(val).unwrap();
|
|
||||||
s
|
s
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -115,82 +93,3 @@ pub fn DaemonStatusIndicator() -> impl IntoView {
|
|||||||
</div>
|
</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()}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
use serde::{de::DeserializeOwned, Deserialize};
|
||||||
use wasm_bindgen::prelude::*;
|
use wasm_bindgen::prelude::*;
|
||||||
#[wasm_bindgen]
|
#[wasm_bindgen]
|
||||||
extern "C" {
|
extern "C" {
|
||||||
@@ -7,3 +8,29 @@ extern "C" {
|
|||||||
#[wasm_bindgen(js_namespace = ["window", "__TAURI__", "event"])]
|
#[wasm_bindgen(js_namespace = ["window", "__TAURI__", "event"])]
|
||||||
pub async fn listen(event: &str, handler: &Closure<dyn FnMut(JsValue)>) -> JsValue;
|
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
101
frontend/src/components.rs
Normal 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,5 +1,6 @@
|
|||||||
mod app;
|
mod app;
|
||||||
mod bridge;
|
mod bridge;
|
||||||
|
mod components;
|
||||||
mod popup;
|
mod popup;
|
||||||
|
|
||||||
use app::*;
|
use app::*;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
use crate::{
|
use crate::{
|
||||||
app::{DaemonProvider, DarkModeToggle, ThemeProvider},
|
bridge::{invoke, invoke_typed},
|
||||||
bridge::invoke,
|
components::{DaemonProvider, DarkModeToggle, ThemeProvider},
|
||||||
};
|
};
|
||||||
use feshared::{
|
use feshared::{
|
||||||
chatmessage::{Message, MessageHistory},
|
chatmessage::{Message, MessageHistory},
|
||||||
@@ -14,7 +14,7 @@ use wasm_bindgen_futures::spawn_local;
|
|||||||
pub fn PopupView() -> impl IntoView {
|
pub fn PopupView() -> impl IntoView {
|
||||||
view! {<ThemeProvider>
|
view! {<ThemeProvider>
|
||||||
<DaemonProvider>
|
<DaemonProvider>
|
||||||
<Popup />
|
<Popup />
|
||||||
</DaemonProvider>
|
</DaemonProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
}
|
}
|
||||||
@@ -30,12 +30,11 @@ pub fn Popup() -> impl IntoView {
|
|||||||
use_context::<LocalResource<DaemonState>>().expect("No daemon connection context!");
|
use_context::<LocalResource<DaemonState>>().expect("No daemon connection context!");
|
||||||
|
|
||||||
let init_history = Action::new_local(|(): &()| async move {
|
let init_history = Action::new_local(|(): &()| async move {
|
||||||
let response = invoke(
|
let history: MessageHistory = invoke_typed(
|
||||||
"chat_history",
|
"chat_history",
|
||||||
serde_wasm_bindgen::to_value(&serde_json::json!({"chat_id": 1})).unwrap(),
|
serde_wasm_bindgen::to_value(&serde_json::json!({"chat_id": 1})).unwrap(),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
let history: MessageHistory = serde_wasm_bindgen::from_value(response).unwrap();
|
|
||||||
history
|
history
|
||||||
});
|
});
|
||||||
Effect::new(move |prev_status: Option<bool>| {
|
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_action = Action::new_local(|prompt: &String| {
|
||||||
let prompt = prompt.clone();
|
let prompt = prompt.clone();
|
||||||
async move {
|
async move {
|
||||||
let response = invoke(
|
let result: Vec<Message> = invoke_typed(
|
||||||
"chat",
|
"chat",
|
||||||
serde_wasm_bindgen::to_value(&serde_json::json!({"prompt": prompt})).unwrap(),
|
serde_wasm_bindgen::to_value(&serde_json::json!({"prompt": prompt})).unwrap(),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
let result: Vec<Message> = serde_wasm_bindgen::from_value(response).unwrap();
|
|
||||||
result
|
result
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -588,9 +588,6 @@
|
|||||||
.bottom-0 {
|
.bottom-0 {
|
||||||
bottom: calc(var(--spacing) * 0);
|
bottom: calc(var(--spacing) * 0);
|
||||||
}
|
}
|
||||||
.bottom-4 {
|
|
||||||
bottom: calc(var(--spacing) * 4);
|
|
||||||
}
|
|
||||||
.isolate {
|
.isolate {
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
}
|
}
|
||||||
@@ -771,10 +768,6 @@
|
|||||||
.field-sizing-fixed {
|
.field-sizing-fixed {
|
||||||
field-sizing: fixed;
|
field-sizing: fixed;
|
||||||
}
|
}
|
||||||
.size-3 {
|
|
||||||
width: calc(var(--spacing) * 3);
|
|
||||||
height: calc(var(--spacing) * 3);
|
|
||||||
}
|
|
||||||
.size-3\.5 {
|
.size-3\.5 {
|
||||||
width: calc(var(--spacing) * 3.5);
|
width: calc(var(--spacing) * 3.5);
|
||||||
height: calc(var(--spacing) * 3.5);
|
height: calc(var(--spacing) * 3.5);
|
||||||
@@ -1281,9 +1274,6 @@
|
|||||||
.justify-items-stretch {
|
.justify-items-stretch {
|
||||||
justify-items: stretch;
|
justify-items: stretch;
|
||||||
}
|
}
|
||||||
.gap-1 {
|
|
||||||
gap: calc(var(--spacing) * 1);
|
|
||||||
}
|
|
||||||
.gap-1\.5 {
|
.gap-1\.5 {
|
||||||
gap: calc(var(--spacing) * 1.5);
|
gap: calc(var(--spacing) * 1.5);
|
||||||
}
|
}
|
||||||
@@ -1963,9 +1953,6 @@
|
|||||||
.py-\[0\.2rem\] {
|
.py-\[0\.2rem\] {
|
||||||
padding-block: 0.2rem;
|
padding-block: 0.2rem;
|
||||||
}
|
}
|
||||||
.pt-2 {
|
|
||||||
padding-top: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
.pr-8 {
|
.pr-8 {
|
||||||
padding-right: calc(var(--spacing) * 8);
|
padding-right: calc(var(--spacing) * 8);
|
||||||
}
|
}
|
||||||
@@ -2151,6 +2138,9 @@
|
|||||||
.text-white {
|
.text-white {
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
.text-zinc-100 {
|
||||||
|
color: var(--color-zinc-100);
|
||||||
|
}
|
||||||
.text-zinc-950 {
|
.text-zinc-950 {
|
||||||
color: var(--color-zinc-950);
|
color: var(--color-zinc-950);
|
||||||
}
|
}
|
||||||
@@ -2831,6 +2821,11 @@
|
|||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.dark\:text-zinc-800 {
|
||||||
|
&:where(.dark, .dark *) {
|
||||||
|
color: var(--color-zinc-800);
|
||||||
|
}
|
||||||
|
}
|
||||||
.\[\&_svg\]\:pointer-events-none {
|
.\[\&_svg\]\:pointer-events-none {
|
||||||
& svg {
|
& svg {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user