feat(dash): improved frontend dashboard (#6)

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #6

src/components/chat_bubble.rs

@@ -0,0 +1,41 @@
+use crate::models::{ChatMessage, ChatRole};
+use dioxus::prelude::*;
+
+/// Renders a single chat message bubble with role-based styling.
+///
+/// User messages are right-aligned; assistant messages are left-aligned.
+///
+/// # Arguments
+///
+/// * `message` - The chat message to render
+#[component]
+pub fn ChatBubble(message: ChatMessage) -> Element {
+    let bubble_class = match message.role {
+        ChatRole::User => "chat-bubble chat-bubble--user",
+        ChatRole::Assistant => "chat-bubble chat-bubble--assistant",
+        ChatRole::System => "chat-bubble chat-bubble--system",
+    };
+
+    let role_label = match message.role {
+        ChatRole::User => "You",
+        ChatRole::Assistant => "Assistant",
+        ChatRole::System => "System",
+    };
+
+    rsx! {
+        div { class: "{bubble_class}",
+            div { class: "chat-bubble-header",
+                span { class: "chat-bubble-role", "{role_label}" }
+                span { class: "chat-bubble-time", "{message.timestamp}" }
+            }
+            div { class: "chat-bubble-content", "{message.content}" }
+            if !message.attachments.is_empty() {
+                div { class: "chat-bubble-attachments",
+                    for att in &message.attachments {
+                        span { class: "chat-attachment", "{att.name}" }
+                    }
+                }
+            }
+        }
+    }
+}