Comments (7)
@GhazanfarKhan Currently there is no api method to scroll to bottom programatically.
Of course you can set scroll position "manually" by searching for scroll container in dom tree, but it does not make sense :)
I will add scrollToBottom method do MessageList component.
If all goes well, this feature will be available today.
from chat-ui-kit-react.
Thank You!. Working fine.
from chat-ui-kit-react.
Hi @GhazanfarKhan thanks for your feedback.
Scroll to bottom should work out of the box. Please share sample of not working code.
from chat-ui-kit-react.
Hi @supersnager if there is a scroll in messages like more than 50 messages and my scroll is on top so when new message arrives and I pushed that message in array then scroll doesn't move to the last message. Is there any way to do that?
from chat-ui-kit-react.
Done in release v1.2.0.
I have also added new prop to MessageList - scrollBehavior. It allows to set default scroll behavior for this component.
For documentation please visit: chat-ui-kit-react MessageList.scrollToBottom method example.
@GhazanfarKhan Please check it and let me know is it ok for you.
I'm also considering to add a property to scroll automatically always when new message will be added.
from chat-ui-kit-react.
Hi,
const scrollBehavior = select(label, options, undefined);
what is select in this?
from chat-ui-kit-react.
@GhazanfarKhan This is only for Storybook knobs.
Value from this select is passed as prop to MessageList.
scrollBehavior property has two posisible values: "auto" or "smooth". It is documented here: https://chatscope.io/storybook/react/?path=/docs/components-messagelist--long-list-with-scrollbar#props
For knobs please see attached screenshot.
You can switch on addon tabs with knobs by pressing "a" on the keyboard in Storybook, or by choosing "Show addons" from Storybook menu in top left corner.
from chat-ui-kit-react.
Related Issues (20)
- MessageGroup.Footer with Avatar looks odd
- Expose onKeyPress for MessageInput
- Allow using send button when there is no message text HOT 3
- Scroll to message on browser-native find
- Regarding Chat Reply UI of one another user HOT 1
- IOS 16 version issue of clicking button as Message.CustomContent HOT 3
- Unexpected overflow on ChatContainer HOT 2
- transitionning between the chatcontainer and the sidebar in mobile display HOT 3
- Simple styling with tailwind
- Unexpected width and height change inside components in Message.HtmlContent. HOT 1
- [HELP] How to use the streaming message feature? HOT 4
- Not working on Next.js HOT 4
- Bug: unable to use scroll bar when using custom css HOT 1
- The requested module '/node_modules/prop-types/index.js' does not provide an export named 'default' HOT 1
- Getting started!
- Warning from FontAwesomeIcon about using defaultProps
- Set message input value from another component HOT 1
- Is there a way to actually set a proper max-length for MessageInput? HOT 1
- Avatar isn't displayed when custom content is used
- Sass deprecation warning HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chat-ui-kit-react.