from nicegui import ui
from components import AsyncElement
from living_agents import Character


class ConversationHistory(AsyncElement):

    chat_container: ui.column

    async def build(self) -> None:

        self.classes('w-full')
        with self:
            with ui.column().classes('flex-1 gap-4'):

                # Conversation History (takes full height)
                with ui.card().classes('w-full flex-1'):
                    with ui.row().classes('w-full items-center mb-2'):
                        ui.label('🗨️ Conversation History').classes('text-lg font-bold')
                        ui.space()
                        ui.button(icon='delete').props('flat round size=sm')

                    # Scrollable chat container - takes remaining height
                    with ui.scroll_area().classes('w-full').style('height: calc(100% - 3rem)'):
                        self.chat_container = ui.column().classes('w-full gap-2')
                        with self.chat_container:
                            # Welcome message
                            with ui.chat_message(name='System', sent=False).classes('w-full'):
                                ui.label(
                                    'Welcome to the Living Agents roleplay system! '
                                    'Select a character and start interacting.'
                                ).classes('text-sm')