search

chatscope / chat-ui-kit-react

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
https://chatscope.io
MIT License
1.34k stars 116 forks source link

MessageList Infinite Scroll Bottom with loading spinner #19

Closed pateljoel closed 3 years ago

pateljoel commented 3 years ago

Is there a way to have a message list's infinite scroll work in the similar way to a conversation lists infinite scroll?

Currently the MessageList's infinite scroll is at the top, I would like it at the bottom with a loading spinner like a twitter feed.

Is this possible?

supersnager commented 3 years ago

@pateljoel Thanks for the question.

Displaying the loader on the bottom is not yet supported out of the box.

I can add new property loadingMorePosition = "top"|"bottom", and onYReachEnd to <MessageList />. Will it be ok for you?

pateljoel commented 3 years ago

@supersnager Yep, this is fine with me.

pateljoel commented 3 years ago

@supersnager Also, the other day I tried to join the Discord but the link was invalid.

supersnager commented 3 years ago

Done in v1.4.0 This feature requires @chatscope/chat-ui-kit-styles@1.2.0

New <MessageList /> properties:

Example: https://chatscope.io/storybook/react/?path=/story/components-messagelist--loading-more-at-the-bottom

@pateljoel Please let me know if it works for you. Thanks also for the info about the problem with the link to the Discord :)

pateljoel commented 3 years ago

@supersnager I've tried this out and it looks and works good, but every time I load the message list, the onYReachEnd keeps getting called because the scrollbar knob is by default positioned at the bottom.

Is it possible to position the scrollbar knob at the top of the list instead of the bottom?

supersnager commented 3 years ago

@pateljoel Have you tried to set autoScrollToBottom property of the <MessageList /> to false?

pateljoel commented 3 years ago

@supersnager I've used the prop already, and it still scrolls to the bottom.

supersnager commented 3 years ago

@pateljoel Do you mean it scrolls down automatically after the first render? Or do you scroll down after adding more messages?

pateljoel commented 3 years ago

@supersnager sorry, it scrolls down automatically after the first render.

supersnager commented 3 years ago

@pateljoel Ok thanks for the clarification. I will add a separate property for it.

supersnager commented 3 years ago

Done in: v1.5.0

Doc: https://chatscope.io/storybook/react/?path=/story/components-messagelist--disable-auto-scroll-to-bottom-on-first-render