Prompt popup implementation

frontend/src-tauri/src/main.rs

@@ -3,10 +3,10 @@
 
 use tokio::sync::Mutex;
 
-use tauri::{Manager, State, WindowEvent};
+use tauri::{Emitter, Manager, State, WindowEvent};
 use tauri_plugin_global_shortcut::{Code, GlobalShortcutExt, Modifiers, Shortcut, ShortcutState};
 
-use shared::ai::{PromptRequest, ai_daemon_client::AiDaemonClient};
+use shared::ai::{ai_daemon_client::AiDaemonClient, PromptRequest};
 
 struct AppState {
     grpc_client: Mutex<AiDaemonClient<tonic::transport::Channel>>,
@@ -22,6 +22,7 @@ fn toggle_popup(app_handle: tauri::AppHandle) {
             } else {
                 window.show().unwrap();
                 window.set_focus().unwrap();
+                let _ = window.emit("window-focused", ());
             }
         }
         None => {
@@ -32,6 +33,7 @@ fn toggle_popup(app_handle: tauri::AppHandle) {
 
 #[tauri::command]
 async fn prompt_llm(state: State<'_, AppState>, prompt: String) -> Result<String, String> {
+    println!(">>>> {}", prompt);
     let mut client = state.grpc_client.lock().await;
     let request = tonic::Request::new(PromptRequest { prompt });
     match client.prompt(request).await {
@@ -42,7 +44,6 @@ async fn prompt_llm(state: State<'_, AppState>, prompt: String) -> Result<String
 
 #[tokio::main]
 async fn main() {
-
     let channel = tonic::transport::Channel::from_static("http://[::1]:50051")
         .connect()
         .await
@@ -51,7 +52,9 @@ async fn main() {
     let client = AiDaemonClient::new(channel);
 
     tauri::Builder::default()
-        .manage(AppState { grpc_client: Mutex::new(client) })
+        .manage(AppState {
+            grpc_client: Mutex::new(client),
+        })
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
         .invoke_handler(tauri::generate_handler![toggle_popup, prompt_llm])
         .setup(|app| {
@@ -66,7 +69,8 @@ async fn main() {
                 })
             }
             let shortcut = Shortcut::new(Some(Modifiers::META), Code::Space);
-            app.global_shortcut().on_shortcut(shortcut, move |app, _shortcut, event| {
+            app.global_shortcut()
+                .on_shortcut(shortcut, move |app, _shortcut, event| {
                     if event.state() == ShortcutState::Pressed {
                         toggle_popup(app.clone());
                     }

frontend/src-tauri/tauri.conf.json

@@ -23,7 +23,7 @@
         "title": "AI Quick Action",
         "url": "/popup",
         "width": 600,
-        "height": 100,
+        "height": 260,
         "decorations": false,
         "transparent": true,
         "alwaysOnTop": true,

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>
+    }
+}