Prompt popup implementation

frontend/src/app.rs

@@ -1,15 +1,10 @@
+use crate::bridge::invoke;
+use crate::popup::Popup;
 use leptos::{prelude::*, reactive::spawn_local};
 use leptos_router::{
     components::{Route, Router, Routes},
     path,
 };
-use wasm_bindgen::prelude::*;
-
-#[wasm_bindgen]
-extern "C" {
-    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
-    async fn invoke(cmd: &str, args: JsValue) -> JsValue;
-}
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -33,7 +28,9 @@ fn Dashboard() -> impl IntoView {
     };
     let prompt = |_ev: leptos::ev::MouseEvent| {
         spawn_local(async {
-            let prompt = serde_wasm_bindgen::to_value(&serde_json::json!({"prompt": "jee juu juu"})).unwrap();
+            let prompt =
+                serde_wasm_bindgen::to_value(&serde_json::json!({"prompt": "jee juu juu"}))
+                    .unwrap();
             invoke("prompt_llm", prompt).await;
         });
     };
@@ -45,13 +42,3 @@ fn Dashboard() -> impl IntoView {
         </main>
     }
 }
-
-#[component]
-fn Popup() -> impl IntoView {
-    view! {
-        <main class="window-shell rounded-container">
-            <h3>"AI quick action"</h3>
-            <input type="text" placeholder="Ask Gordon AI" autofocus />
-        </main>
-    }
-}

frontend/src/bridge.rs

@@ -0,0 +1,6 @@
+use wasm_bindgen::prelude::*;
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
+    pub async fn invoke(cmd: &str, args: JsValue) -> JsValue;
+}

frontend/src/main.rs

@@ -1,4 +1,6 @@
 mod app;
+mod bridge;
+mod popup;
 
 use app::*;
 use leptos::prelude::*;

frontend/src/popup.rs

@@ -0,0 +1,69 @@
+use crate::bridge::invoke;
+use leptos::{html::Input, prelude::*};
+use wasm_bindgen::{prelude::Closure, JsCast};
+
+#[component]
+pub fn Popup() -> impl IntoView {
+    let prompt_input_ref = NodeRef::<Input>::new();
+    let (prompt_text, set_prompt_text) = signal(String::new());
+    let (prompt_result, set_prompt_result) = signal(String::new());
+
+    let prompt_action = Action::new_local(|prompt: &String| {
+        let prompt = prompt.clone();
+        async move {
+            let response = invoke(
+                "prompt_llm",
+                serde_wasm_bindgen::to_value(&serde_json::json!({"prompt": prompt})).unwrap(),
+            )
+            .await;
+            let result: String = serde_wasm_bindgen::from_value(response).unwrap();
+            result
+        }
+    });
+
+    Effect::new(move |_| {
+        if let Some(result) = prompt_action.value().get() {
+            set_prompt_result.set(result)
+        }
+    });
+
+    Effect::new(move |_| {
+        let Some(input_el) = prompt_input_ref.get() else {
+            return;
+        };
+        let handle_focus = Closure::<dyn FnMut()>::new(move || {
+            let _ = input_el.focus();
+            set_prompt_text.update(|s| *s = "".to_string());
+        });
+
+        window()
+            .add_event_listener_with_callback("focus", handle_focus.as_ref().unchecked_ref())
+            .unwrap();
+
+        handle_focus.forget();
+    });
+
+    view! {
+        <main class="window-shell rounded-container">
+            <h3>"AI quick action"</h3>
+            <input
+                type="text"
+                node_ref=prompt_input_ref
+                placeholder="Ask Gordon AI"
+                autofocus
+                on:input=move |ev| set_prompt_text.set(event_target_value(&ev))
+                on:keydown=move |ev| {
+                    if ev.key() == "Enter" {
+                        prompt_action.dispatch(prompt_text.get());
+                        //set_prompt_result.update(|s| *s = prompt_action.value());
+                        set_prompt_text.update(|s| *s = "".to_string());
+                    }
+                }
+                prop:value=prompt_text
+                />
+            <div class="response-area">
+                <p>{move || prompt_result.get()}</p>
+            </div>
+        </main>
+    }
+}