Challenge 3 / 3

In my chat application, I have a spot in the page template where I need to render this main chat flow:

<turbo-frame id="chat-messages">
    {% for message in chat.messages %}
    <p>
        <span class="user">{{ message.from }}</span>

        <span class="message">{{ message.text }}</span>
    </p>
    {% endfor %}
</turbo-frame>

<turbo-frame id="chat-input">
    <form method="POST" action="{{ path('app_stream_send_chat_message') }}">
        <input type="text" id="chat-text">

        <button name="chat-submit">Submit!</button>
    </div>
<turbo-frame>

When the user clicks "Submit!", the form submits to a controller where we send a Stream update back to the Browser. The goal of that stream template is to update the chat-messages element to contain the message.

What is the correct way to do that?

<turbo-stream action="append" target="chat-messages">
    <p>
        <span class="user">{{ message.from }}</span>

        <span class="message">{{ message.text }}</span>
    </p>
</turbo-stream>

<turbo-stream action="append" target="chat-messages">
    <template>
        <p>
            <span class="user">{{ message.from }}</span>

            <span class="message">{{ message.text }}</span>
        </p>
    </template>
</turbo-stream>

<turbo-stream>
    <template action="append" target="chat-messages">
        <p>
            <span class="user">{{ message.from }}</span>

            <span class="message">{{ message.text }}</span>
        </p>
    </template>
</turbo-stream>

<turbo-stream target="chat-messages">
    <template action="append">
        <p>
            <span class="user">{{ message.from }}</span>

            <span class="message">{{ message.text }}</span>
        </p>
    </template>
</turbo-stream>

Rewatch the video