chatapp

backend/Cargo.toml

@@ -4,9 +4,11 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
+chrono = { version = "0.4.42", features = ["serde"] }
 futures-util = "0.3.31"
+reqwest = { version = "0.12.23", features = ["json"] }
 rocket = { version = "0.5.1", features = ["json"] }
 rocket_cors = "0.6.0"
-rocket_db_pools = { version = "0.2.0", features = ["sqlx_sqlite"] }
+rocket_db_pools = { version = "0.2.0", features = ["sqlx_postgres"] }
 serde = { version = "1.0.228", features = ["derive"] }
 tokio = { version = "1.47.1", features = ["full"] }

backend/src/auth.rs

@@ -0,0 +1,30 @@
+use rocket::{post, serde::json::Json};
+use rocket_db_pools::{Connection, Database, sqlx};
+use serde::{Deserialize, Serialize};
+
+#[derive(Database)]
+#[database("postgres_db")]
+pub struct DbConn(sqlx::PgPool);
+
+#[derive(Serialize, Deserialize)]
+pub struct UserCredentials {
+    pub username: String,
+    pub password: String,
+}
+
+#[post("/signup", data = "<cred>")]
+pub async fn signup(
+    conn: Connection<DbConn>,
+    cred: Json<UserCredentials>,
+) -> Result<Json<String>, String> {
+    Ok(Json("Signup successful".to_string()))
+}
+
+#[post("/login", data = "<cred>")]
+pub async fn login(
+    conn: Connection<DbConn>,
+    cred: Json<UserCredentials>,
+) -> Result<Json<String>, String> {
+    // TODO: implement actual login logic, e.g. verify password and generate token
+    Ok(Json("Login successful".to_string()))
+}

backend/src/llm.rs

@@ -0,0 +1,48 @@
+// src/llm.rs
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize)]
+struct LlmRequest {
+    model: String,
+    messages: Vec<Message>,
+}
+
+#[derive(Serialize, Deserialize)]
+struct Message {
+    role: String, // "user" or "assistant"
+    content: String,
+}
+
+pub async fn query_llm(text: &str) -> Result<String, String> {
+    let client = reqwest::Client::new();
+
+    // Build the request body
+    let payload = LlmRequest {
+        model: "gemma2-9b-it".into(), // whatever model you run locally
+        messages: vec![Message {
+            role: "user".into(),
+            content: text.into(),
+        }],
+    };
+
+    // POST to lm‑studio (default 127.0.0.1:1234)
+    let resp = client
+        .post("http://127.0.0.1:1234/v1/chat/completions")
+        .json(&payload)
+        .send()
+        .await
+        .unwrap();
+
+    // The API returns a JSON with `choices[].message.content`
+    #[derive(Deserialize)]
+    struct LlmResponse {
+        choices: Vec<Choice>,
+    }
+    #[derive(Deserialize)]
+    struct Choice {
+        message: Message,
+    }
+
+    let llm_resp: LlmResponse = resp.json().await.unwrap();
+    Ok(llm_resp.choices[0].message.content.clone())
+}

backend/src/main.rs

@@ -2,39 +2,47 @@
 #[macro_use]
 extern crate rocket;
 
+use rocket::fairing::Fairing;
 use rocket::http::Method;
 use rocket::response::stream::{Event, EventStream};
 use rocket::serde::json::Json;
 use rocket::{Build, Rocket};
 use rocket_cors::{AllowedOrigins, CorsOptions};
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
 use std::sync::Arc;
 use tokio::sync::broadcast;
 
+use crate::llm::query_llm;
+
+pub mod auth;
+pub mod llm;
+
 /// ---------- shared broadcaster ----------
 struct ChatBroadcaster {
-    sender: broadcast::Sender<String>,
+    sender: broadcast::Sender<ChatMsg>,
 }
 
 impl ChatBroadcaster {
     fn new(buffer_size: usize) -> Self {
-        let (sender, _rx) = broadcast::channel::<String>(buffer_size);
+        let (sender, _rx) = broadcast::channel::<ChatMsg>(buffer_size);
         Self { sender }
     }
 
-    async fn publish(&self, msg: String) {
+    async fn publish(&self, msg: ChatMsg) {
         let _ = self.sender.send(msg);
     }
 
-    fn subscribe(&self) -> broadcast::Receiver<String> {
+    fn subscribe(&self) -> broadcast::Receiver<ChatMsg> {
         self.sender.subscribe()
     }
 }
 
 /// ---------- Rocket routes ----------
-#[derive(Debug, Deserialize)]
+#[derive(Debug, Serialize, Deserialize, Clone)]
 struct ChatMsg {
+    userid: usize,
     text: String,
+    timestamp: usize,
 }
 
 #[post("/chat", format = "json", data = "<msg>")]
@@ -42,8 +50,7 @@ async fn post_message(
     msg: Json<ChatMsg>,
     chat: &rocket::State<Arc<ChatBroadcaster>>,
 ) -> &'static str {
-    let text = msg.text.clone();
+    chat.publish(msg.into_inner()).await;
-    chat.publish(text).await;
     "Message sent"
 }
 
@@ -54,7 +61,7 @@ async fn event_stream(chat: &rocket::State<Arc<ChatBroadcaster>>) -> EventStream
     EventStream! {
         loop {
             match rx.recv().await {
-                Ok(msg) => yield Event::data(msg),
+                Ok(msg) => yield Event::json(&msg),
                 Err(broadcast::error::RecvError::Lagged(_)) => {
                     yield Event::comment("lagged");
                 }
@@ -64,6 +71,68 @@ async fn event_stream(chat: &rocket::State<Arc<ChatBroadcaster>>) -> EventStream
     }
 }
 
+// ---------- LLM worker ----------
+async fn start_llm_worker(chat: Arc<ChatBroadcaster>) {
+    let mut rx = chat.subscribe();
+
+    loop {
+        match rx.recv().await {
+            Ok(msg) => {
+                if msg.userid == 0 {
+                    // ignore bot messages
+                    continue;
+                }
+
+                let user_text = msg.text.clone();
+                let chat_clone = chat.clone();
+
+                rocket::tokio::spawn(async move {
+                    match query_llm(&user_text).await {
+                        Ok(reply) => {
+                            let bot_msg = ChatMsg {
+                                userid: 0,
+                                text: reply,
+                                timestamp: chrono::Local::now().timestamp() as usize,
+                            };
+                            chat_clone.publish(bot_msg).await;
+                        }
+                        Err(e) => eprintln!("LLM error: {}", e),
+                    }
+                });
+            }
+            Err(_) => break, // channel closed
+        }
+    }
+}
+
+pub struct LlmWorkerFairing;
+
+#[rocket::async_trait]
+impl Fairing for LlmWorkerFairing {
+    fn info(&self) -> rocket::fairing::Info {
+        rocket::fairing::Info {
+            name: "LLM background worker",
+            kind: rocket::fairing::Kind::Ignite,
+        }
+    }
+
+    async fn on_ignite(&self, rocket: Rocket<Build>) -> rocket::fairing::Result {
+        // Grab the shared broadcaster from state
+        let chat = rocket
+            .state::<Arc<ChatBroadcaster>>()
+            .expect("ChatBroadcaster not managed");
+        // Clone it so we can move into async block
+        let chat_clone = Arc::clone(chat);
+
+        // Spawn the background worker **inside** on_ignite
+        tokio::spawn(async move {
+            start_llm_worker(chat_clone).await;
+        });
+
+        Ok(rocket)
+    }
+}
+
 /// ---------- launch ----------
 #[launch]
 fn rocket() -> Rocket<Build> {
@@ -82,5 +151,9 @@ fn rocket() -> Rocket<Build> {
     rocket::build()
         .manage(chat)
         .attach(cors.to_cors().unwrap())
-        .mount("/", routes![post_message, event_stream])
+        .attach(LlmWorkerFairing {})
+        .mount(
+            "/",
+            routes![post_message, event_stream, auth::signup, auth::login],
+        )
 }

index.html

@@ -20,10 +20,11 @@
             }
 
             .chat-container {
+
                 display: flex;
                 flex-direction: column;
                 height: 100vh;
-                max-width: 40vh;
+                max-width: 50vh;
                 margin: 0 auto;
                 background: #121212;
                 position: relative;
@@ -32,7 +33,7 @@
 
             /* Chat Header */
             .chat-header {
-                padding: 20px;
+                padding: 10px;
                 background: #1a1a1a;
                 border-bottom: 1px solid #252525;
             }
@@ -76,7 +77,7 @@
                 flex-direction: column;
                 gap: 10px;
                 position: absolute;
-                top: 90px;
+                top: 70px;
                 left: 0;
                 right: 0;
                 z-index: 10;
@@ -357,7 +358,8 @@
                 margin: 8px 20px;
                 padding: 12px 16px;
                 border-radius: 12px;
-                background: #1a1a1a;
+                background: rgba(30, 30, 30, 0.4);
+                backdrop-filter: blur(10px);
                 border: 1px solid #252525;
                 animation: slideIn 0.3s ease-out;
                 transition: all 0.2s ease;
@@ -382,12 +384,14 @@
             }
 
             .user-avatar {
+
                 width: 48px;
                 height: 48px;
                 border-radius: 25%;
-                background: linear-gradient(135deg, #ff4444, #ff6b6b);
+                background-size: cover;
                 border: 2px solid #252525;
                 flex-shrink: 0;
+                background-image: url('assets/profile_pics/default.jpg');
             }
 
             .user-avatar.blue {
@@ -427,7 +431,7 @@
 
             /* Input Container */
             .input-container {
-                padding: 15px 20px 20px 20px;
+                padding: 10px;
                 background: #1a1a1a;
                 border-top: 1px solid #252525;
             }
@@ -435,10 +439,10 @@
             .input-wrapper {
                 display: flex;
                 align-items: center;
-                gap: 12px;
+                gap: 10px;
                 background: #252525;
-                border-radius: 24px;
+                border-radius: 10px;
-                padding: 10px 18px;
+                padding: 5px 5px;
                 border: 1px solid #2a2a2a;
                 transition: all 0.2s ease;
             }
@@ -463,16 +467,15 @@
             }
 
             .send-button {
-                width: 28px;
+                width: 32px;
-                height: 28px;
+                height: 32px;
-                background: linear-gradient(135deg, #6a5acd, #8a7fd4);
+                background: none;
-                border-radius: 8px;
+                border-radius: 10px;
                 border: none;
                 cursor: pointer;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                color: white;
                 font-size: 14px;
                 transition: all 0.2s ease;
                 flex-shrink: 0;
@@ -481,7 +484,7 @@
             .send-button:hover {
                 transform: scale(1.1);
                 box-shadow: 0 4px 15px rgba(106, 90, 205, 0.4);
-                background: linear-gradient(135deg, #7a6add, #9a8fe4);
+                background: rgba(255, 255, 255, 0.4);
             }
 
             .send-button:active {
@@ -509,6 +512,7 @@
     </head>
     <body>
         <div class="chat-container">
+        <!--<div class="chat-container" style="background-image: url('assets/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
             <!-- Chat Header -->
             <div class="chat-header">
                 <div class="chat-title">
@@ -539,6 +543,7 @@
             </div>
 
             <!-- Messages Container -->
+            <!--<div class="messages-container" style="background-image: url('assets/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
             <div class="messages-container">
                 <div class="message">
                     <div class="user-avatar"></div>
@@ -577,13 +582,26 @@
             <!-- Input Container -->
             <div class="input-container">
                 <div class="input-wrapper">
-                    <input type="text" placeholder="typing this message" />
+                    <input type="text" placeholder="Start Typing..." />
-                    <button class="send-button">💬</button>
+                    <button class="send-button">
+                         <img src="icons/send.svg" alt="Send" />
+                    </button>
                 </div>
             </div>
         </div>
 
         <script>
+            const users = [
+              {
+                id: 0,
+                username: "LLM"
+                },
+              {
+                id: 1,
+                username: "/Zxq5 🚀/",
+              }
+            ];
+
             // Location tracker state
             const locationUsers = [
                 { id: 1, color: "linear-gradient(135deg, #ff6b6b, #ff8e8e)" },
@@ -665,16 +683,26 @@
             const messageSource = new EventSource("http://localhost:8001/events");
 
             messageSource.onmessage = (event) => {
+                const message = JSON.parse(event.data);
+                const date = new Date(message.timestamp).toLocaleTimeString("en-US", {
+                    hour: "numeric",
+                    minute: "2-digit",
+                    hour12: true,
+                });
+                console.log(users, message);
+                const user = users.find((u) => u.id == message.userid);
+                console.log(user);
+
                 const messageEl = document.createElement("div");
                 messageEl.className = "message";
                 messageEl.innerHTML = `
-                <div class="user-avatar" style="background: linear-gradient(135deg, #32cd32, #90ee90);"></div>
+                <img class="user-avatar" src="assets/profile_pics/${user.id}.jpg" alt="${user.username}">
                 <div class="message-content">
                     <div class="message-header">
-                        <span class="username">You</span>
+                        <span class="username">${user.username}</span>
-                        <span class="timestamp">${getCurrentTime()}</span>
+                        <span class="timestamp">${date}</span>
                     </div>
-                    <div class="message-text">${event.data}</div>
+                    <div class="message-text">${message.text}</div>
                 </div>
             `;
                 messagesContainer.appendChild(messageEl);
@@ -697,7 +725,9 @@
                     fetch("http://localhost:8001/chat", {
                       method: "POST",
                       body: JSON.stringify({
-                        text: message
+                        userid: users[1].id,
+                        text: message,
+                        timestamp: new Date().getTime(),
                       }),
                       headers: {
                         "Content-type": "application/json; charset=UTF-8"

migrations/20251001212022_prototype-v1.sql

@@ -0,0 +1,47 @@
+-- Add migration script here
+CREATE TABLE users {
+    id SERIAL PRIMARY KEY,
+    username VARCHAR(50) UNIQUE NOT NULL,
+    password VARCHAR(50) NOT NULL,
+    display_name VARCHAR(50),
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+}
+
+CREATE TABLE messages {
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    content TEXT NOT NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    is_edited BOOLEAN DEFAULT FALSE
+}
+
+create table attachments {
+    id SERIAL PRIMARY KEY,
+    message_id INTEGER NOT NULL REFERENCES messages(id) ON DELETE CASCADE,
+    path TEXT NOT NULL
+}
+
+CREATE INDEX idx_users_username ON users(username)
+CREATE INDEX idx_new_messages ON messages(created_at DESC)
+
+-- Create a function to update the updated_at timestamp
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = CURRENT_TIMESTAMP;
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Create trigger for users table
+CREATE TRIGGER update_users_updated_at
+    BEFORE UPDATE ON users
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+-- Create trigger for messages table
+CREATE TRIGGER update_messages_updated_at
+    BEFORE UPDATE ON messages
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();