Comments (6)
Hi @yevhen-logosha, thank you for your question. I'm glad you appreciate this library :)
Currently scrolling to a specific point is not supported.
However, I wonder how to achieve this.
I think an option might be to render a custom message that indicates that this is the first unread message.
For example, this could be a hidden div with the data-first-unread-message attribute.
You can also add data-* attribute to a <Message /> or <MessageGroup /> component it will be added to main component div.
Maybe the <Message /> component should have the unread attribute, or perhaps this attribute should be added to the <MessageSeparator /> component. In chat interfaces such a separator is often placed in front of unread messages.
The next step should be to get a reference to this element and scroll the message window to it with element.scrollTo(), element.scrollTop() or element.scrollIntoView().
I will try to implement this feature. However, as long as it's not natively supported, you can try a small workaround by implementing the described technique by yourself. You can access the message list scroll window by "[data-cs-message-list]" css selector.
from chat-ui-kit-react.
@yevhen-logosha Most components in the library are functional components, which don't have refs.
You can use plain JS (as you did) or wrap a component into your own with ref.
from chat-ui-kit-react.
https://github.com/dizco/react-scrollable-feed Can this help
from chat-ui-kit-react.
@startupgurukul One can try a third-party library to handle scrolling. But, keep in mind that the <MessageInput /> has the vertical auto-resize feature that affects vertical size of the <MessageList />.
So it can be hard to deal with it using another scrollable window. However, please let me know if you have had any positive experiences of using a different scrolling component.
from chat-ui-kit-react.
@supersnager thanks for reply!
I was thinking something along your suggestion too, using <MessageList.Content />
rendered conditionally if there is unread count, yet keep getting ref warning
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
thus unable to obtain ref of <MessageList.Content />
Tried using <Message />
too, same warning and ref.current is null
🤔
const Chat = () => {
....
useEffect(() => {
unreadCountRef?.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
}, []);
const getMessageHistory = () => {
return messages.map((message) => {
const hasLastUnread = chatMessagesByTopic.getChatMessageByTopic.lastViewedMessageId === message.id;
const messageDirection = message.ownMessage ? 'outgoing' : 'incoming';
const messageFooterMessage = moment(message.createdAt).format('MMM DD, YYYY [at] h:mma z');
return (
<>
{unreadCount && hasLastUnread && (
<MessageList.Content ref={unreadCountRef}>{unreadCount} Unread Messages</MessageList.Content>
)}
<StyledMessage
$isOwnMessage={message.ownMessage}
key={message.id}
model={{
message: message.messageBody,
direction: messageDirection,
}}
>
<StyledMessage.Footer sender={messageFooterMessage} />
</StyledMessage>
</>
);
});
};
return (
<div style={{ position: 'relative', height: '500px' }}>
<StyledMainContainer>
<StyledChatContainer>
<MessageList loadingMore={loadingMore} onYReachStart={onYReachStart}>
{!chatMessagesByTopic ? <ServiceMessage>No Messages Yet</ServiceMessage> : getMessageHistory()}
</MessageList>
{chatMessagesByTopic && (
<StyledMessageInputGroupContainer as={MessageInput}>
<MessageInput
ref={inputRef}
onChange={(msg) => setMsgInputValue(msg)}
value={msgInputValue}
sendButton={false}
attachButton={false}
onSend={handleSend}
autoFocus
style={{
flexGrow: 1,
borderTop: 0,
}}
/>
<StyledButton isTall onClick={() => handleSend(msgInputValue)} disabled={msgInputValue.length === 0}>
Send
</StyledButton>
</StyledMessageInputGroupContainer>
)}
</StyledChatContainer>
</StyledMainContainer>
</div>
);
}
using styled-components if it matters.. but not for MessageList.Content
from chat-ui-kit-react.
hm.. getting element via JS instead of useRef
did the job.
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
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.