Feed not scrolling down when streaming markdown into it. (Plus an overlap of text when appending more Rows with Markdown)

Panel
1

Hey all,

I’m working on an interface for a project of mine and am experiencing some issues with the pn.Feed.
When I append multiple rows with a markdown object to it

feed.append(pn.Row(pn.pane.Markdown('some_text'))

there’s no issue, and it always scrolls to the latest row at the bottom.

However, when I append a row with markdown to it, then update the object within it, such as a stream:

feed = pn.Feed()

row = pn.Row.pn.pane.Markdown('')
feed.append(row)
for s in 'some long text':
    row[0].object += s
    time.sleep(.01)

it doesn’t scroll to the bottom of the feed.
Also, when I append other rows to that same feed object, they begin to overlap.
I’ve attached a clip of what I mean.

My examples are oversimplified. I’m not using the panel Chat interface because my project requires a large degree of flexibility.

Should I be updating the scroll position of the feed as it streams, or calling something to force the feed to update?
I looked around in the Panel code and didn’t find how it’s handled.

2

For the scrolling, have you tried playing around with the feed params?

For the overlapping, I think you need to adjust the CSS of the markdown.

Also, out of curiosity, what flexibility is the ChatInterface missing?

3

Yeah, I’ve played around with the params with not too much luck.

I’m experiencing the same thing using pn.Column.
Bare minimum example I’ve been able to reproduce it with:

import panel as pn
import time

chat_column = pn.Column(height=200, width=400, scroll=True)
chat_input = pn.widgets.TextInput(placeholder='Type your message here...')
send_button = pn.widgets.Button(name='Send', button_type='primary')

def send_message(event):
    message = chat_input.value
    if message:
        message_pane = pn.pane.Markdown(message, height=200, width=400)
        chat_column.append(message_pane)
        # Concatenate each word to the message pane object
        for word in message.split():
            message_pane.object += word + " "
            time.sleep(0.01)  # Adjust the sleep time as needed
        chat_input.value = ''  # Clear the input field after sending

send_button.on_click(send_message)
pn.Column(chat_column, pn.Row(chat_input, send_button)).servable()

The reason I’m not using ChatInterface is that it’s a bit too rigid for my purposes. I need to be able to send different types of data and visualizations to the feed, as well as manage and style them very granularly, with the async streaming applying to multiple components at a time. ChatInterface does seem like it offers a very white label approach that works in most cases…

edit: Also raised it as an issue Streaming rows of markdown into a ChatFeed, Feed, or Column breaks the styling of subsequent appended rows and leads to overlap of text · Issue #6970 · holoviz/panel · GitHub