ChatInterface bug - automatically enters text in textbox if you leave the panel app page

[Kristada673]

I am building chatbots in panel, and one UI bug I noticed is that if you type something in the textbox and go to another browser tab or window, then whatever you had typed in the textbox will be automatically "enter"ed. Is there any way to avoid this behavior? Ideally, the text should remain in the textbox until and unless the user explicitly presses enter.

Here is a screen recording to illustrate the bug:

[ahuang11]

It’s resolved in Panel 1.4.0 Add chat area input and integrate by ahuang11 · Pull Request #6379 · holoviz/panel · GitHub

[Kristada673]

This shows the latest version of panel as 1.3.8. And in fact when I try pip install panel==1.4.0, it gives an error saying not found. And when I do pip install --upgrade panel, it again tries to install version 1.3.8.

Also, the link that you sent is about a different issue (press enter to send and shift+enter to newline), which is not a bug, bur rather a feature enhancement. Whereas the issue I’m talking about is a bug - if you enter text into the textbox and go to a different browser tab or window, it automatically sends enter.

[ahuang11]

Sorry, I should have clarified, 1.4.0 is not released yet; to install the latest with those changes, you can run pip install git+https://github.com/holoviz/panel.git@main

It’s technically not a bug since that’s how Bokeh TextInput work; the link I shared is a feature enhancement that works around that, thus also fixing the “bug”.

[Kristada673]

I see. Ok, thanks for the clarification and the link to install the latest version.

I tried it out. It does fix the issue, however the UI appear a bit…wonky (for the lack of a better word):

The text box is a bit bigger, the like button is too close to the text, and the grey “bounding box” for the bot response also appears unevenly distributed.

Compare that to the latest publicly available version that I’m using currently (1.3.8), the UI looks much more professional:

Will these UI issues be addressed in the stable release of version 1.4.0? Until then, because of these issues, I will have to keep using version 1.3.8 with the “bug”.

[ahuang11]

The like button will be fixed Hide icon names in ChatReactionIcons by ahuang11 · Pull Request #6433 · holoviz/panel · GitHub

The text box can be changed with passing widgets=pn.chat.ChatAreaInput(rows=1).

[Kristada673]

Is there a way to control the textbox height implicitly using ChatInterface? Because I am simply building a chatbot the following way:

chat_interface = panel.chat.ChatInterface(
    callback=get_response, 
    callback_user="CompactBot",
    sizing_mode="stretch_width", 
    callback_exception='verbose',
    message_params=dict(
                default_avatars={"CompactBot": "C", "User": "U"},
                reaction_icons={"like": "thumb-up"},
            ),
)

chat_interface.send(
    {"user": "CompactBot", "value": '''Welcome to CompactBot'''},
    respond=False,
)

[ahuang11]

Not suree what you mean implicitly, but it works like this:

chat_interface = panel.chat.ChatInterface(
    callback=get_response, 
    callback_user="CompactBot",
    sizing_mode="stretch_width", 
    callback_exception='verbose',
    message_params=dict(
                default_avatars={"CompactBot": "C", "User": "U"},
                reaction_icons={"like": "thumb-up"},
            ),
    widgets=[pn.chat.ChatAreaInput(rows=1)]

[Kristada673]

I meant that in 1.3.8, we don’t explicitly declare widgets=[pn.chat.ChatAreaInput(rows=1)] in chat_interface, it is done implicitly. But ok, thanks for showing how it would be done.

[ahuang11]

If you pull main, ChatAreaInput now defaults to rows=1

[Kristada673]

Thanks. But there are still some instabilities that prevent me from using the 1.4.0 version in production. I’ve tried to capture some of them below:

1. The height of the textbox grows with shift+enter’ing more lines into the message, but it stays like that once the message is sent
2. If I use widgets=[panel.chat.ChatAreaInput(rows=1)] explicitly, the multiple lines sent are not displayed as intended in the user message, but rather compressed into one line, both inside the textbox as well as outside it. This problem does not arise if not using widgets explicitly, but the height of the textbox remains increased from the previous shift+enter’ed user message.

Here is a screenshot without using the widget explicitly:

[ahuang11]

Thanks for testing. The first one is fixed here: Reset ChatAreaInput's textarea rows after send by ahuang11 · Pull Request #6460 · holoviz/panel · GitHub

I don’t understand this one.

If I use widgets=[panel.chat.ChatAreaInput(rows=1)] explicitly, the multiple lines sent are not displayed as intended in the user message, but rather compressed into one line, both inside the textbox as well as outside it. This problem does not arise if not using widgets explicitly, but the height of the textbox remains increased from the previous shift+enter’ed user message.

[Kristada673]

You can see the first screenshot in my previous message. I copied the same code as shown in the second screenshot, but because I use widgets=[panel.chat.ChatAreaInput(rows=1)] explicitly inside ChatInterface, the entered text appears in a single line:

[ahuang11]

I can’t reproduce. Can you share a minimal reproducible example?