show prompt responses in dialog

frontend/src/popup.rs

@@ -3,12 +3,19 @@ use leptos::{ev::keydown, html::Input, prelude::*};
 use wasm_bindgen::{prelude::Closure, JsCast, JsValue};
 use wasm_bindgen_futures::spawn_local;
 
+#[derive(Clone, Debug)]
+struct Message {
+    id: usize,
+    text: String,
+    is_user: bool,
+}
+
 #[component]
 pub fn Popup() -> impl IntoView {
     // Prompt signals and and action
     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 (messages, set_messages) = signal(Vec::<Message>::new());
     // Action that calls the promp daemon
     let prompt_action = Action::new_local(|prompt: &String| {
         let prompt = prompt.clone();
@@ -25,7 +32,13 @@ pub fn Popup() -> impl IntoView {
     // Update the model response div with the prompt result
     Effect::new(move |_| {
         if let Some(result) = prompt_action.value().get() {
-            set_prompt_result.set(result)
+            set_messages.update(|previous| {
+                previous.push(Message {
+                    id: previous.len(),
+                    text: result,
+                    is_user: false,
+                });
+            });
         }
     });
     // Clear the propt text-input when the window loses focus (and is hidden)
@@ -64,15 +77,26 @@ pub fn Popup() -> impl IntoView {
                 on:input=move |ev| set_prompt_text.set(event_target_value(&ev))
                 on:keydown=move |ev| {
                     if ev.key() == "Enter" {
+                        set_messages.update(|previous| {
+                            previous.push(Message {
+                                id: previous.len(),
+                                text: prompt_text.get(),
+                                is_user: true,
+                            });
+                        });
                         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>
+                <For each=move || messages.get()
+                key=|msg| msg.id
+                let(msg)
+                >
+                <div class=if msg.is_user {"msg msg-user"} else {"msg msg-model"}>{msg.text}</div>
+                </For>
             </div>
         </main>
     }