Git Product home page Git Product logo

Comments (11)

supersnager avatar supersnager commented on July 29, 2024

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

from chat-ui-kit-react.

pateljoel avatar pateljoel commented on July 29, 2024

@supersnager Yep, this is fine with me.

from chat-ui-kit-react.

pateljoel avatar pateljoel commented on July 29, 2024

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

from chat-ui-kit-react.

supersnager avatar supersnager commented on July 29, 2024

Done in v1.4.0
This feature requires @chatscope/[email protected]

New <MessageList /> properties:

  • loadingMorePosition
  • autoScrollToBottom
  • onYReachEnd

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 :)

from chat-ui-kit-react.

pateljoel avatar pateljoel commented on July 29, 2024

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

from chat-ui-kit-react.

supersnager avatar supersnager commented on July 29, 2024

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

from chat-ui-kit-react.

pateljoel avatar pateljoel commented on July 29, 2024

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

from chat-ui-kit-react.

supersnager avatar supersnager commented on July 29, 2024

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

from chat-ui-kit-react.

pateljoel avatar pateljoel commented on July 29, 2024

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

from chat-ui-kit-react.

supersnager avatar supersnager commented on July 29, 2024

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

from chat-ui-kit-react.

supersnager avatar supersnager commented on July 29, 2024

Done in: v1.5.0

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

from chat-ui-kit-react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.