How to render an ui element with background task?

[RWallan]

Question

I'm creating a chat component to communicate with a llm agent.

I used the examples in the nicegui page but I must to be able to render plots and tables in the chat.

I created the chat component like this:

from nicegui import ui, run

messages: list[tuple[str, bool, ui.element | None]] = [
    ("Hi, I'm a bot", False, None)
]


@ui.refreshable
def chat_messages():
    """Chat history"""
    for message, sent, avatar, element in messages:
        with ui.chat_message(sent=sent, avatar=avatar).style(
            'margin-right: 10px;'
        ):
            ui.label(message)
            if element: # here is where must to render the element
                element


@ui.page('/')
def chat(client):
    async def send():
        if text.value:
            messages.append((text.value, True, None))
            chat_messages.refresh()
            await run.io_bound(response)

    def response():
        """Get llm response"""
        temp = text.value
        text.value = ''
        spinner.set_visibility(True)
        label_response = (1, 'Hi')
        messages.append((
            label_response[1],
            False,
            ui.button('asa') # An example with the element to render
        ))
        spinner.set_visibility(False)
        chat_messages.refresh()

    with ui.element('q-fab'):
        with ui.element('div'):
            with ui.element('nav'):
                with ui.element('div'):
                    ui.label('ChatBot Name')
            with ui.element('div'):
                chat_messages()
                spinner = ui.spinner(type='dots')
                spinner.set_visibility(False)
            with ui.element('div'):
                text = ui.input(label='digite uma mensagem').on('keydown.enter', send)
                ui.button(icon='send', on_click=lambda: send)

ui.run()

I hided the classes and props to make the script more readable.

Running with this script I have the error:

RuntimeError: The current slot cannot be determined because the slot stack for this task is empty.
This may happen if you try to create UI from a background task.
To fix this, enter the target slot explicitly using `with container_element:`.

How can I fix this?

[epmb1n]

Creating ui elements in the background needs to be below the element container that has already been created. For example:

with ui.element('div') as mydiv:
       pass

def yourbackgroundtest():
       with mydiv:
              newelement

[RWallan]

Hm... I tried with:

from nicegui import run, ui


messages: list[tuple[str, bool, ui.element | None]] = [
    ("Hi, I'm a bot", False, None)
]

@ui.page('/')
def chat():
    @ui.refreshable
    def chat_messages():
        for message, sent, element in messages:
            with ui.chat_message(sent=sent, avatar=None).style(
                'margin-right: 10px;'
            ):
                ui.label(message)
                if element:
                    with chat_div:
                        element

    async def send():
        if text.value:
            messages.append((text.value, True, None))
            chat_messages.refresh()
            await run.io_bound(response)

    def response():
        text.value = ''
        spinner.set_visibility(True)
        label_response = (1, 'Hi')
        messages.append((
            label_response[1],
            False,
            ui.button('asa')
        ))
        spinner.set_visibility(False)
        chat_messages.refresh()

    with ui.element('q-fab'):
        # Here is the chat
        with ui.element('div').classes('absolute-center'):
            with ui.element('nav'):
                with ui.element('div'):
                    ui.label('Bot')
            with (
                ui.element('div')
            ) as chat_div:
                chat_messages()
                spinner = ui.spinner(type='dots')
                spinner.set_visibility(False)
            with ui.element('div'):
                text = (
                    ui.input(label='digite uma mensagem')
                    .on('keydown.enter', send)
                )

                ui.button(icon='send', on_click=lambda: send)

ui.run()

And

from nicegui import run, ui


messages: list[tuple[str, bool, ui.element | None]] = [
    ("Hi, I'm a bot", False, None)
]

@ui.refreshable
def chat_messages():
    chat_div = ui.element('div')
    for message, sent, element in messages:
        with ui.chat_message(sent=sent, avatar=None).style(
            'margin-right: 10px;'
        ):
            ui.label(message)
            if element:
                with chat_div:
                    element


@ui.page('/')
def chat():
    async def send():
        if text.value:
            messages.append((text.value, True, None))
            chat_messages.refresh()
            await run.io_bound(response)

    def response():
        text.value = ''
        spinner.set_visibility(True)
        label_response = (1, 'Hi')
        messages.append((
            label_response[1],
            False,
            ui.button('asa')
        ))
        spinner.set_visibility(False)
        chat_messages.refresh()

    with ui.element('q-fab'):
        # Here is the chat
        with ui.element('div').classes('absolute-center'):
            with ui.element('nav'):
                with ui.element('div'):
                    ui.label('Bot')
            with (
                ui.element('div')
            ):
                chat_messages()
                spinner = ui.spinner(type='dots')
                spinner.set_visibility(False)
            with ui.element('div'):
                text = (
                    ui.input(label='digite uma mensagem')
                    .on('keydown.enter', send)
                )

                ui.button(icon='send', on_click=lambda: send)

ui.run()

And I got the same error. Am I doing wrong?

[rodja]

Your code is not executable. Could you please provide a minimal, executable code snippet reproducing the problem. This will allow the community and us to identify and fix it more efficiently.

[RWallan]

I updated the reply ^^ Thanks

[falkoschindler]

I'm struggling to get your example working. I think it needs some cleanup before we can tackle the actual problem. E.g. right now everything is nested under a floating action button, which is pretty strange. And try to remove unnecessary things like the spinner while keeping the things that matter.

In general I would recommend not to create the UI within the response() function. Let it return the data and build the UI after awaiting it:

async def send():
    if text.value:
        messages.append((text.value, True, None))
        chat_messages.refresh()
        message = await run.io_bound(response)
        messages.append((message, False, ui.button('asa')))
        spinner.set_visibility(False)
        chat_messages.refresh()

[RWallan]

Hm... Make sense. Actually is a floating expandable button, sorry for the mistake.

I'll try!

[RWallan]

It works!!!! Thanks <3

[vivekdse]

@falkoschindler while generating the 'response', I would like to provide some notification on what is going on. How can I accomplish that?

[falkoschindler]

@vivekdse You can use a multiprocessing queue like we do in our "Progress" example.