mesh-network-project/desktop_app/ui/widgets/chat_window.py

from textual.containers import Vertical, VerticalScroll, VerticalGroup, HorizontalGroup
from textual.widgets import Input, Button, Static
from api.message import Message
from api.node import MeshNode


class MessageView(VerticalGroup):
    DEFAULT_CSS = """
    MessageView {
        margin-bottom: 1;
        
        #message-text {
            background: $surface;
            padding: 1;
            width: auto;
            max-width: 25;
        }
        
        #triangle {
            color: $surface;
            width: auto;
        }
        
        &.right {
            align-horizontal: right;
        }
        
        
    }
    """
    
    def __init__(self, message: Message):
        super().__init__()
        self.message = message
        
        if self.message.sender != self.app.mesh_node:
            self.notify("right side")
            self.add_class("right")
        
    def compose(self):
        user_name = self.message.sender.name
        if self.message.sender == self.app.mesh_node:
            user_name += " (You)"
        
        yield Static(f"[b u cyan]{user_name}[/]\n{self.message.content}", id="message-text")
        yield Static("", id="triangle")

class ChatWindow(Vertical):
    DEFAULT_CSS = """
    ChatWindow {
        #message-history {
            padding: 1;
        }
        
        #message-box {
            margin-right: 2;
            align: left middle;
            
            #message-input {
                margin: 1;
                width: 90%;
            }
            
            #send-btn {
                max-width: 10%;
                margin: 1 0;
            }
        }
    }
    """
    
    def compose(self):
        with VerticalScroll(id="message-history"):
            fake = MeshNode(None, self.app)
            fake.name = "billy"
            yield MessageView(Message("hi!!!", fake))
            yield MessageView(Message("hi!!!", fake))
            yield MessageView(Message("hi!!!", self.app.mesh_node))
        
        with HorizontalGroup(id="message-box"):
            yield Input(placeholder="Send a message", id="message-input")
            yield Button("", flat=True, id="send-btn")