chore(deps): update rust crate axum to 0.8

.helix/languages.toml

@@ -0,0 +1,31 @@
+[language-server.tailwindcss-ls]
+command = "tailwindcss-language-server"
+args = ["--stdio"]
+config = { userLanguages = { rust = "html", "*.rs" = "html" } }
+
+[[language]]
+name = "html"
+language-servers = ["vscode-html-language-server", "tailwindcss-ls"]
+
+[[language]]
+name = "css"
+language-servers = ["vscode-css-language-server", "tailwindcss-ls"]
+
+[[language]]
+name = "jsx"
+language-servers = ["typescript-language-server", "tailwindcss-ls"]
+
+[[language]]
+name = "tsx"
+language-servers = ["typescript-language-server", "tailwindcss-ls"]
+
+[[language]]
+name = "svelte"
+language-servers = ["svelteserver", "tailwindcss-ls"]
+
+[[language]]
+name = "rust"
+language-servers = ["rust-analyzer", "tailwindcss-ls"]
+
+[language-server.rust-analyzer.config.rustfmt]
+overrideCommand = ["leptosfmt", "--stdin", "--rustfmt"]

Cargo.lock

@@ -75,6 +75,7 @@ dependencies = [
  "serde_json",
  "server_fn",
  "thiserror 2.0.11",
+ "web-sys",
 ]
 
 [[package]]

crates/app/Cargo.toml

@@ -20,6 +20,10 @@ cfg-if.workspace = true
 thiserror.workspace = true
 reqwest = { version = "0.12.11", optional = true, features = ["json"] }
 serde_json = { version = "1.0.134", optional = true }
+web-sys = { version = "0.3.76", features = [
+  "ScrollBehavior",
+  "ScrollToOptions",
+] }
 
 [features]
 default = []

crates/app/src/lib.rs

@@ -1,8 +1,9 @@
 use crate::error_template::{AppError, ErrorTemplate};
 
-use leptos::prelude::*;
+use leptos::{ev::SubmitEvent, html, prelude::*};
 use leptos_meta::*;
 use leptos_router::{components::*, StaticSegment};
+use message::Message;
 
 pub mod error_template;
 
@@ -55,45 +56,92 @@ pub fn App() -> impl IntoView {
     }
 }
 
+fn smooth_scroll_to_bottom() {
+    if let Some(window) = web_sys::window() {
+        if let Some(document) = window.document() {
+            if let Some(body) = document.get_element_by_id("messages") {
+                body.set_scroll_top(body.scroll_height());
+
+                leptos::logging::log!("moving to top");
+            }
+        }
+    }
+}
 
 #[component]
 pub fn HomePage() -> impl IntoView {
-    let messages = message::get_messages();
+    let (messages, set_messages) = signal(
+        message::get_messages()
+            .into_iter()
+            .enumerate()
+            .map(|(index, value)| (index, ArcRwSignal::new(value)))
+            .collect::<Vec<_>>(),
+    );
+    let (input, set_input) = signal("".to_string());
+
+    let on_submit = move |ev: SubmitEvent| {
+        // stop the page from reloading!
+        ev.prevent_default();
+
+        let messages_len = messages.get().len();
+        let mut messages = set_messages.write();
+        messages.push((
+            messages_len,
+            ArcRwSignal::new(Message {
+                role: "user".into(),
+                content: input.get().into(),
+            }),
+        ));
+
+        set_input.set("".into());
+
+        request_animation_frame(move || {
+            smooth_scroll_to_bottom();
+        });
+    };
 
     view! {
         <div class="flex flex-col h-screen bg-gray-50">
-      <header class="bg-white border-b border-gray-200 px-4 py-4 flex items-center">
-        <div class="max-w-5xl mx-auto w-full flex items-center justify-between">
+            <header class="flex items-center py-4 px-4 bg-white border-b border-gray-200">
+                <div class="flex justify-between items-center mx-auto w-full max-w-5xl">
                     <h1 class="text-xl font-semibold text-gray-800">Medical Assistant</h1>
-          <button class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 bg-white border border-gray-200 rounded-sm hover:bg-gray-50">
+                    <button class="flex gap-2 items-center py-2 px-4 text-sm text-gray-600 bg-white rounded-sm border border-gray-200 hover:bg-gray-50">
                         New Chat
                     </button>
                 </div>
             </header>
 
-      <div class="flex-1 overflow-y-auto px-4">
-        <div class="max-w-5xl mx-auto py-6 space-y-6">
-          {
-            messages.iter().map(|message| view!{
-            <div
-              class={format!("flex {}", if message.role == "assistant" { "justify-start"} else {"justify-end"})}
-            >
-              <div
-                class=format!("max-w-[80%] rounded-sm px-4 py-3 {}", if message.role == "assistant" {
+            <div class="overflow-y-auto flex-1 px-4" id="messages">
+                <div class="py-6 mx-auto space-y-6 max-w-5xl">
+                    <For
+                        each=move || messages.get()
+                        key=|message| message.0
+                        children=move |(_id, message)| {
+                            let message = message.read();
+
+                            view! {
+                                <div class=format!(
+                                    "flex {}",
+                                    if message.role == "assistant" {
+                                        "justify-start"
+                                    } else {
+                                        "justify-end"
+                                    },
+                                )>
+                                    <div class=format!(
+                                        "max-w-[80%] rounded-sm px-4 py-3 {}",
+                                        if message.role == "assistant" {
                                             "bg-white border border-gray-200"
                                         } else {
                                             "bg-blue-500 text-white"
-                  })
-              >
-                {message.content.clone()}
+                                        },
+                                    )>{message.content.clone()}</div>
                                 </div>
-            </div>
-          }).collect_view()
                             }
-
-         
+                        }
+                    />
                     <div class="flex justify-start">
-              <div class="max-w-[80%] rounded-sm px-4 py-3 bg-white border border-gray-200">
+                        <div class="py-3 px-4 bg-white rounded-sm border border-gray-200 max-w-[80%]">
                             "Loading..."
                         </div>
                     </div>
@@ -101,17 +149,19 @@ pub fn HomePage() -> impl IntoView {
                 </div>
             </div>
 
-      <div class="border-t border-gray-200 bg-white px-4 py-4">
-        <form class="max-w-5xl mx-auto">
+            <div class="py-4 px-4 bg-white border-t border-gray-200">
+                <form class="mx-auto max-w-5xl" on:submit=on_submit>
                     <div class="flex gap-4">
                         <input
                             type="text"
                             placeholder="Type your medical question here..."
-              class="flex-1 rounded-sm border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            class="flex-1 py-2 px-4 rounded-sm border border-gray-200 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                            bind:value=(input, set_input)
                         />
+
                         <button
                             type="submit"
-              class="px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                            class="flex gap-2 items-center py-2 px-4 text-white bg-blue-500 rounded-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                             Send
                         </button>

crates/app/src/message.rs

@@ -7,35 +7,43 @@ pub fn get_messages() -> Vec<Message> {
     vec![
         Message {
             role: "assistant".into(),
-        content: "Hello doctor, I've been experiencing severe headaches several times a month. They usually come with nausea and sensitivity to light. Sometimes I see flickering lights before they start. I've tried over-the-counter painkillers but they don't help much.".into()
+            #[rustfmt::skip]
+        content: "Hello doctor, I've been experiencing severe headaches several times a month. They usually come with nausea and sensitivity to light. Sometimes I see flickering lights before they start. I've tried over-the-counter painkillers but they don't help much.".into(),
         },
         Message {
             role: "user".into(),
-        content: "I understand how difficult migraines can be. From what you're describing - the visual aura, nausea, and light sensitivity - this sounds like classic migraine. Can you tell me how long these episodes typically last?".into()
+            #[rustfmt::skip]
+        content: "I understand how difficult migraines can be. From what you're describing - the visual aura, nausea, and light sensitivity - this sounds like classic migraine. Can you tell me how long these episodes typically last?".into(),
         },
         Message {
             role: "assistant".into(),
-        content: "They usually last anywhere from 4 to 24 hours. The worst part is that I have to stay in a dark room and can't work during these episodes. They seem to happen more often when I'm stressed at work.".into()
+            #[rustfmt::skip]
+        content: "They usually last anywhere from 4 to 24 hours. The worst part is that I have to stay in a dark room and can't work during these episodes. They seem to happen more often when I'm stressed at work.".into(),
         },
         Message {
             role: "user".into(),
-        content: "Thank you for those details. Stress is indeed a common trigger for migraines. I'd like to suggest a two-pronged approach: first, a preventive medication like propranolol to reduce frequency, and second, a triptan medication to take when you feel a migraine coming on. We should also start a headache diary to track your triggers. Would you be comfortable trying this treatment plan?".into()
+            #[rustfmt::skip]
+        content: "Thank you for those details. Stress is indeed a common trigger for migraines. I'd like to suggest a two-pronged approach: first, a preventive medication like propranolol to reduce frequency, and second, a triptan medication to take when you feel a migraine coming on. We should also start a headache diary to track your triggers. Would you be comfortable trying this treatment plan?".into(),
         },
         Message {
             role: "assistant".into(),
-        content: "Yes, I'd be willing to try that. I've heard about headache diaries - what exactly should I record in it?".into()
+            #[rustfmt::skip]
+        content: "Yes, I'd be willing to try that. I've heard about headache diaries - what exactly should I record in it?".into(),
         },
         Message {
             role: "user".into(),
-        content: "In your headache diary, please record: the date and time of each migraine, what you ate that day, stress levels, sleep patterns, and any other symptoms. This will help us identify patterns and triggers. Use your phone to note these details. I'll prescribe sumatriptan 50mg - take one tablet at the first sign of a migraine. For prevention, start with propranolol 40mg daily. Let's schedule a follow-up in 4 weeks to assess how you're responding to the treatment.".into()
+            #[rustfmt::skip]
+        content: "In your headache diary, please record: the date and time of each migraine, what you ate that day, stress levels, sleep patterns, and any other symptoms. This will help us identify patterns and triggers. Use your phone to note these details. I'll prescribe sumatriptan 50mg - take one tablet at the first sign of a migraine. For prevention, start with propranolol 40mg daily. Let's schedule a follow-up in 4 weeks to assess how you're responding to the treatment.".into(),
         },
         Message {
             role: "assistant".into(),
-        content: "That sounds good. Should I be aware of any side effects from these medications? And should I continue with my regular exercise routine?".into()
+            #[rustfmt::skip]
+        content: "That sounds good. Should I be aware of any side effects from these medications? And should I continue with my regular exercise routine?".into(),
         },
         Message {
             role: "user".into(),
-        content: "Common side effects of sumatriptan can include mild nausea, dizziness, or chest tightness. With propranolol, you might notice slight fatigue initially. Both are generally well-tolerated. Regular exercise is actually beneficial for migraine prevention - continue your routine but stay hydrated and avoid very intense workouts during a migraine attack. If you experience any concerning side effects, contact me immediately. Also, remember to avoid common migraine triggers like irregular meals and poor sleep patterns.".into()
+            #[rustfmt::skip]
+        content: "Common side effects of sumatriptan can include mild nausea, dizziness, or chest tightness. With propranolol, you might notice slight fatigue initially. Both are generally well-tolerated. Regular exercise is actually beneficial for migraine prevention - continue your routine but stay hydrated and avoid very intense workouts during a migraine attack. If you experience any concerning side effects, contact me immediately. Also, remember to avoid common migraine triggers like irregular meals and poor sleep patterns.".into(),
         },
     ]
 }