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.
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?
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