DashChatComponent shows initial message twice

Hello,

When one includes an initial message in the chat component, it is displayed twice. Here is a minimal code reproducing the issue:

from dash import Dash, callback, Output, Input, State
from dash_chat import ChatComponent

app = Dash()

@callback(
    Output("chat", "messages"),
    Input("chat", "new_message"),
    State("chat", "messages"),
    prevent_initial_call=True
    )
def handle_chat(new_message, messages):
    if not new_message:
        return messages

    updated_messages = messages + [new_message]

    return updated_messages

app.layout = [
    ChatComponent(id="chat", persistence=False,
                  messages=[{"role": "assistant", "content": "Hello"}])
    ]

app.run(debug=True, port=9000)

Here is the output:

What happens if you pass no_update instead of messages back?

1 Like

This seems to be a bug, or at least there is a different way to display a welcome message. I adapted the example from the package documentation and this reproduces your issue:

import time
import dash
from dash import callback, html, Input, Output, State
from dash_chat import ChatComponent



app = dash.Dash(__name__)

app.layout = html.Div([
    ChatComponent(
        id="chat-component",
        messages=[
            # {"role": "assistant", "content": "Hello"}
        ],
    )
])

@callback(
    Output("chat-component", "messages"),
    Input("chat-component", "new_message"),
    State("chat-component", "messages"),
    prevent_initial_call=True,
)
def handle_chat(new_message, messages):
    if not new_message:
        return messages

    updated_messages = messages + [new_message]

    if new_message["role"] == "user":
        time.sleep(0.2)
        bot_response = {"role": "assistant", "content": "auo response"}
        return updated_messages + [bot_response]

    return updated_messages

if __name__ == "__main__":
    app.run(debug=True)

You might search in this thread: Dash Chat Component

@gbolly

1 Like

doesn’t change the behavior. :hugs:

1 Like