Fix Tool Call Positioning and Step Loader Animation in Message UI

[kevinwmerritt]

trafficstars

Describe the bug

• Tool calls appear below the result message
• Step loader "skeleton" continues to animate after run is complete
• The result message appears as a second message rather than as part of the initial tool message as the image in the README would suggest.

To Reproduce

All examples use this demo code from the README

import chainlit as cl


@cl.step(type="tool")
async def tool():
    # Fake tool
    await cl.sleep(2)
    return "Response from the tool!"


@cl.on_message  # this function will be called every time a user inputs a message in the UI
async def main(message: cl.Message):
    """
    This function is called every time a user inputs a message in the UI.
    It sends back an intermediate response from the tool, followed by the final answer.

    Args:
        message: The user's message.

    Returns:
        None.
    """

    final_answer = await cl.Message(content="").send()

    # Call the tool
    final_answer.content = await tool()

    await final_answer.update()

Using default config:

cot = "full"

Using default config:

cot = "tool_call"

Expected behavior Message UI looks like what is described in the documentation here.

Desktop (please complete the following information):

• Mac 14.7 (23H124)
• Chrome 128.0.6613.138 (Official Build)

Additional context More test cases are needed to to help lock in the expected behavior given the variety of ways to compose steps and messages. The message UI has changed considerably in 2024. I hope it can start to stabilize and have some tests so that regressions can be caught as it adds friction to staying up to date.

Possibly related:

• https://github.com/Chainlit/chainlit/issues/1230
• https://github.com/Chainlit/chainlit/issues/1254
• https://github.com/Chainlit/chainlit/issues/1228