Chats

components.chats

Real-time chat components using HTMX websockets.

Chat

Bases: Component

Main chat container handling WebSocket connections via HTMX.

Source code in components/chats.py

class Chat(Component):
    """Main chat container handling WebSocket connections via HTMX."""
    def __init__(
        self,
        websocket_url: Callable | str,
        topbar: list[Component] = None,
        title: Optional[str] = None,
        messages: Optional[Component] = None,
        message_input: Optional[Component] = None,
        history: Optional[Component] = None,
        **kwargs,
    ):
        super().__init__(**kwargs)
        topbar = topbar or []
        if messages:
            self.children.append(messages)
        if message_input:
            self.children.append(message_input)
        if history:
            self.children.append(history)
        self.children.extend(topbar)

        self.websocket_url = websocket_url
        self.topbar = topbar
        self.messages = messages
        self.message_input = message_input
        self.history = history
        self.title = title

    def get_websocket_url(self, **kwargs) -> str:
        if callable(self.websocket_url):
            return self.websocket_url(kwargs["request"])
        return str(self.websocket_url)

    def render_html(self, **kwargs) -> str:
        websocket_url = self.get_websocket_url(**kwargs)

        top_components = ""
        if len(self.topbar) > 0:
            top_components += '<div class="flex flex-row gap-1 items-center">'
            for top_component in self.topbar:
                top_components += top_component.render(**kwargs)
            top_components += "</div>"

        return f"""
<div id="{self.uid}" hx-ext="ws" ws-connect="{websocket_url}" class="flex flex-col h-full {self.classes}">
    <div class="flex flex-row justify-between items-center w-full p-2 border-b border-base-300 bg-base-200/50">
        {f'<span class="text-sm font-bold uppercase tracking-wider opacity-50 px-2">{self.title}</span>' if self.title else "<span></span>"}
        {top_components}
    </div>
    {self.messages.render(**kwargs) if self.messages else ""}
    {self.message_input.render(**kwargs) if self.message_input else ""}
</div>
"""

MessagesContainer

Bases: Component

Source code in components/chats.py

class MessagesContainer(Component):
    def __init__(
        self,
        autoscroll: bool = True,
        **kwargs
    ):
        super().__init__(**kwargs)
        self.autoscroll = autoscroll

    def render_messages(self, **kwargs) -> str:
        """Override in subclasses to provide message rendering logic."""
        return kwargs.get("messages_html", "")

    def render_html(self, **kwargs) -> str:
        autoscroll = kwargs.get("autoscroll", self.autoscroll)
        prefix_html = kwargs.get("prefix_html", "")

        messages_html = self.render_messages(**kwargs)

        autoscroll_script = ""
        if autoscroll:
            autoscroll_script = """
x-data="{ autoScroll: true }"
x-init="
    const observer = new MutationObserver(() => {
        if (autoScroll) $el.scrollTop = $el.scrollHeight;
    });
    observer.observe($el, { childList: true, subtree: true });
    $el.scrollTop = $el.scrollHeight;
"
@scroll="autoScroll = ($el.scrollHeight - $el.scrollTop - $el.clientHeight) < 50"
"""

        return f"""
<div id="{self.uid}" class="flex-1 overflow-y-auto {self.classes}" {autoscroll_script}>
    {prefix_html}
    {messages_html}
</div>
"""

render_messages(**kwargs)

Override in subclasses to provide message rendering logic.

Source code in components/chats.py

def render_messages(self, **kwargs) -> str:
    """Override in subclasses to provide message rendering logic."""
    return kwargs.get("messages_html", "")