chatscope / chat-ui-kit-react Goto Github PK

Hi! Thanks for sharing cool chat kit!

Is there a way to pass wrapped in component chat messages without violating lib proptypes?

function GroupOfFixedMessages() {
  return (
    <>
        <Message model={messageModel} />
        <Message model={messageModel} />
        <Message model={messageModel} />
    </>
  );
}

<MessageList>
  <Message model={messageModel} />
  
  <GroupOfFixedMessages />
 </MessageList> 

The only way to fix proptypes violation that I found is explicitly set as prop to one of valid options but it feels kinda hacky.

<GroupOfFixedMessages as="Message" />

Hey I want to use checkbox before avatar in conversation list page for delete multiple conversation but tag not accept checkbox element. I'm stuck in this issue last 2 days but can't find solution so please give me better solution.

Code:
<Conversation className="multi-select-conversation" active={sid === selected} style={style} key={index} onClick={selectChannel} name={friendlyName} info={lastMessage?.body?.length > 35 ? lastMessage?.body?.substring(0, 35) + '.' : lastMessage.body} unreadCnt={unread_messages_count} lastActivityTime={lastMessage.dateCreated ? moment(lastMessage.dateCreated).fromNow() : ''} > <Avatar src={CUSTOMER_ICON} status="available" /> <Conversation.Operations> <EllipsisButton orientation="vertical" onClick={handleMenuClick} /> </Conversation.Operations> </Conversation>

Don't understand how to attach file to <MessageInput/>. How to open file window? I found property onAttachClick but what's next? Thanks!

Would it be possible to add pinned messages into the chatscopes UI kit?

I looked at the documentation and the storybook docs but I could not see anything about pinning messages, this will be a nice feature to have since most many UI’s have this sort of thing such as discord, telegram, etc.

I am 100% sure that I am doing something wrong, but I can't seem to find any documentation to describe the use of events for the components.
I track the 'selectedConversationId' as a state on the component class.
When the user click the conversation component I need fire an onClick event so I can update the state property, which sould trigger a rerender. Which would use the 'active' tag for that conversation component.

I am using it like this:
<Conversation key={con${this.props.conversations[index].id}} onClick={this.conversationClick}>

The conversationClick() method is called, however the parameter passed to the method give no indication on what converstation was clicked. So, I can't determine what is my new 'selectedConverstationId'.

Your Demo of the 4 conversation windows is great. Providing the source code for that would probably answer most of the questions I have.

Please have an option to make the typing indicator visible when the message input is active or focussed.

hi, how can i add a custom button like voice recording in MessageInput component?
tnx.

Hello all, I'd like to be able to use my own Img component instead of Avatar

I use Antd Avatar (https://ant.design/components/avatar/) but I cannot pass this into a . For some reason, Conversation is configured to only work with , which makes my component disappear

I need a guide on how I can modify the colors of the components

This shows the header:

<Message model={{
  message: "Hello my friend",
  sentTime: "just now",
  sender: "Joe"
}}>
<Message.Header sender="Emily" sentTime="just now" />
</Message>

This one does not:

<Message model={{
  message: "Hello my friend",
  sentTime: "just now",
  sender: "Joe",
  direction: "incoming",
}}>
<Message.Header sender="Emily" sentTime="just now" />
</Message>

First off, great library!

I've been having issues displaying Message.Footer and Message.Header. Looking at the DOM, the elements exist but they're being hidden by the following CSS. The .scss file that generates this is _message.scss.

.cs-message--incoming .cs-message__sent-time { display: none; }

Everything else is styled correct and I'm importing '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'.

Why is the default styling hiding them? What is the recommended approach to changing this?

Both the sender and sentTime display properly at first (when not using the direction property). However, once I applied the direction property (using either outgoing or incoming), the sender & sentTime no longer display. I tried using the sendor & sentTime in either the model object and the Message.Header object. But it will no longer display. Once I remove the direction property from the Message Model object, the sender & sentTime start displaying again.

Thanks

It's great if this library works with react17.
Is there any reason to have peerDependency with React16.14?

I am using Avatar, Name and Unread Count in my Conversation component.
Here is my Converstation code:

    renderAvatar = () => {
        // return <Avatar name='John'/>;
        
        const avtr = require('../../../img/highway.png');
        return avtr;
    }
    
    renderConversation = (index, selected) => {
        const img = this.renderAvatar()

        return (
            <div as Conversation  className='conversation' key={`con${this.props.conversation.conversations[index].id}`}>
                <Conversation 
                        onClick={() => this.conversationClick(this.props.conversation.conversations[index].id)}
                        name={this.props.conversation.conversations[index].name} info="Available" unreadCnt={this.props.conversation.conversations[index].unreadCount}>
                    <Avatar src={img} />
                </Conversation>
            </div>
        );
    }

I find the displaying of the actual Avatar image to be very hit and miss.
I would like to use a custom avatar instead of hardcoded png files.
So far, most of my images I have tried do not work.

Ideally, I would like to use the 'react-avatar' package to display customer avatars on the fly.
But I can't get it to work. You can see in the renderAvatar() method above that I wanted to return the Avatar instead of a png file.

import Avatar from 'react-avatar';
import { Avatar as ChatAvatar } from '@chatscope/chat-ui-kit-react'; // needed to change your name to avoid conflict

<ChatAvatar src={<Avatar name='John'/>} />

Hi there,

I began testing scroll behavior for the component on Firefox and I noticed it was doing this strange thing when I would scroll to the end of my messages. It would let me keep scrolling past the end of my messages, but at a very slow pace:

I dug into the MessageList component to see if I could find anything that would cause this odd behavior.

I did notice there was a few blocks that mentioned a 1px fix for Firefox and thought maybe that had something to do with it.

// 1 px fix for firefox
    const sticky =
      list.scrollHeight === topHeight ||
      list.scrollHeight + 1 === topHeight ||
      list.scrollHeight - 1 === topHeight;

and

// If was sticky because scrollHeight is not changing, so here will be equal to lastHeight plus current scrollTop
          // 1px fix id for firefox
          const sHeight = list.scrollTop + this.lastClientHeight;
          if (
            list.scrollHeight === sHeight ||
            list.scrollHeight + 1 === sHeight ||
            list.scrollHeight - 1 === sHeight
          ) {
            if (autoScrollToBottom === true) {
              this.scrollToEnd(this.props.scrollBehavior);
              this.preventScrollTop = true;
            }
          } else {
            this.preventScrollTop = false;
          }

I decided to set a breakpoint at one of these positions and noticed that, on Firefox, list.scrollHeight is not consistent at all. Every hover over list.scrollHeight resulted in a different height, some as far as 4px off from the topHeight. See my gif below:

Now, I'm not 100% sure what these "1px checks" are doing, but I think its safe to say that even a 1px margin of error is not enough. Ideally there is a way to not rely on these "1px checks." It may also help to specifically check if the scroll position has gone past either end of the content and just reset it then.

Thanks!

Hey there,

I was looking into your platform and it appears to be very well put together so far, nice work!

Is there any plan fo you all to add Typescript definitions to this library? Many of my companies projects are in Typescript and require type definitions to be built properly.

Thanks!

#22 (comment)

ALL of the included samples use hardcoded messages and converstations.

I am struggling to get a real-life example on how to get the data from an array of converstations.messages to appear in the components.

Here is an example of getting the messages out and putting them in the MessageList.
This is the DOM to display the Chat Dialog (converstations are hardcoded for now, as I suspect the same method for getting them from an array would be simular to how it would be done for messages):

            <MainContainer responsive>   
                <Sidebar position="left" scrollable={true}>
                    <ConversationList>                                                     
                        <Conversation>
                            <Conversation.Content>
                                <div>OMT<br/>58SAM</div>
                            </Conversation.Content>
                            <Conversation.Operations />                             
                        </Conversation>
                        <Conversation>
                            <Conversation.Content>
                                <div>MTR<br/>58PETER</div>
                            </Conversation.Content>
                            <Conversation.Operations />                             
                        </Conversation>
                        <Conversation>
                            <Conversation.Content>
                                <div>CTS<br/>58MARK</div>
                            </Conversation.Content>
                            <Conversation.Operations />                             
                        </Conversation>
                    </ConversationList>
                </Sidebar>
                <ChatContainer>
                <ConversationHeader>
                  <ConversationHeader.Back />
                    <Avatar src={require('../../../components/layouts/icons/plus.svg')} name="Zoe" />
                    <ConversationHeader.Content userName="Zoe" info="Active 10 mins ago" />
                    </ConversationHeader>
                            **<ChatMessageList messages={this.props.conversations[selected].messages}/>**
                <MessageInput  attachButton={false} placeholder="Type message here" value={this.state.messageInputValue} onChange={val => this.setMessageInputValue(val)} onSend={this.setMessageSend}/>
              </ChatContainer>                         
            </MainContainer>

I want this to product the MessageList:

class ChatMessageList extends Component {
    render() {
        let messageItems;

        if (this.props.messages) {
            messageItems = this.props.messages.map((message, index) => {
                return <ChatMessage 
                    key={index}
                    isMyMessage={message.isMyMessage}
                    message={message} />;
            });
        }

        return (
            <div as={MessageList}>
                {messageItems}
            </div>            
        );
    }
}
export default ChatMessageList;

Messages are formatted here

import React, { Component } from 'react';
import { Message } from '@chatscope/chat-ui-kit-react';

class ChatMessage extends Component {
    render() {
        return (
            <Message model={{
                message:this.props.message,
                sentTime: this.props.sentTime,
                direction: this.props.direction,
                sender: this.props.sender,
                }}>
            </Message>
        );
    }
}
export default ChatMessage;

Is it possible to customize fancyscroll such that it is visible all the time and not only on hovering?

when i copy and paste some link in message component , by default it is managed as string, it will be really helpful if the message component cannot convert them to string and send them as it is.

Especially for the search function, it would be nice if there is a way to jump to a specific message in the chat list and the chat window shows it directly.

Example: Discord

The MessageInput component works/looks fine on my desktop. However, once I change my browser (Chrome) to render as an IPhone X, the Input text box shrinks down so far I can hardly see it. And anything you type in there is not viewable. The problem seems to be the Attach and Send buttons as the width of those do not shrink.

Note: For now, I am overriding the css class with this code which works fine. I would just prefer not to have to override the components if possible
.cs-button--attachment{
width: 45px;
}

.cs-button--send{
width: 45px;
}

Description

Almost all the props in the Conversation component support node as a child (e.g. info, name) except for the lastActivityTime. I need to use a suspense for the Last Activity Time so it will show skeleton when value is still loading. And it works, but still throws and error to the console. I would be handy to allow node for this field.

I saw some comments reagarding the customised message components, is there any news about this components?

Hi, Thanks for your awesome work. I have a scenario where I have to scroll to bottom when new message arrives. Did their any apis for this.

Thanks

Hi, when you copy a message from message component it will copy html not the actual text. Attaching screenshot.

Hey @supersnager

Got one more, pasting text into that already contains text, replaces it..
If you do concatenation magic via setState, then there is no way to paste in the middle of the string.

Steps:

1. copy text from elsewhere
2. type anything in MessageInput
3. paste copied text
   Actual: written text gets replaced
   Desired: text from clipboard is added after cursor position.

Sandbox here https://codesandbox.io/s/unruffled-booth-de3wb.

Is there a way to have a paste like we get with plain html input ?

Thank you.

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?

Looking at this example:
https://chatscope.io/storybook/react/?path=/docs/components-maincontainer--default-story
If a user clicks one of the conversation objects on the left (E.g. Lilly: Yes I can do that), we want the Message List on the right to be populated with the list of Messages for that Conversation.

I see there is an onClick event for the Conversation object but I can't tell which property to use in the payload that gets passed from the onClick event. And also, how to pass that payload to the MessageList object.

Hi again,

This is not really an issue but more of an opinion. I've noticed some warnings are being shown when embedding "invalid" child elements into some components. Something like:

Warning: Failed prop type: "MyMessage" is not a valid child for MessageList. Allowed types: Message, MessageGroup, MessageSeparator, MessageListContent

My issue here is that this warning is shown if I try to wrap my components for custom logic or even just for cleaner code. For example, the following component would throw this warning.

const MyMessage = (props: MessageProps) => {

    const {} = props;

    //some custom logic here

    return (
        <Message {...props} />
    );
};

Are these warnings shown on the production build as well? Or only the dev build?

Thanks!

Hi again, Thanks for the great work.

My conversation list are large. I need to add load more functionality similar to MessageList one. Is it possible?

In the case of multi device mobile or web, the user is logged in with multiple devices on multiple platforms. Can there be a delivered devices count for delivery receipts.

It ensures that delivered indicator is sent with more precise information if only one device, say receives the message. This is particularly relevant if the message is received at a device that the user does not use frequently or is not using for certain time period. It sets user expectation of message delivery and recipient's response.

Hi, thank you for intuitive and awesome chat-ui library.

I'm using it well, but there are some bugs like following situations.

OnKeyDown event occurs twice when typing in Korean and then hitting enter. So Last Korean Character printed one more time.

I set the disabled prop of messages to true while sending. This caused the input box to not be refocused once reenabled. Would it be possible to refocus the message once the prop disabled is false ?

Hey @supersnager.

Noticed another thing, where leading and tailing spaces displayed as html code &nbps;
They are fine if between words

Leading space =>  Leading space

Ampersands (&) are sent as html code to, no matter where they present in the text.

Tom & Jerry => Tom & Jerry

Space & Ampersand =>  Space & Ampersand 

Same as for < and > and perhaps the rest of HTML Enteties

Both render alright, but when you log the input value, you see code, and that gets sent to server.
updated sandbox

Thank you!

Hi we need to show time in custom outgoing message as well like in incoming. Attached is the screenshot

please advice.

Here is a Screenshot:

#14

hey, thanks for the great package!

i'm using infinite scrolling on the MessageList component like this:

 <MessageList
  onYReachStart={loadMore}
  loadingMore={networkStatus === NetworkStatus.fetchMore}
 >

but when more messages are loaded, the scrollbar is still at the top of the container so it just keeps calling loadMore over and over. ideally the behaviour would be something like this:

before onYReachStart is called:

message4 <-----scroll to here
message5
message6

after onYReachStart is called:

message1
message2
message3
message4 <-----scroll bar is here
message5
message6

so that only the next page of messages is fetched, rather than continually fetching more pages until you manually scroll down. hope that makes sense!

Hello is there any example code for <ConversationHeader.Back> component?

Description

When user selects a conversation first time (and there was no selected conversation before), then scroll in message list scrolls to bottom, it works fine becasue it's first mount. But if user scrolls to the very top of the message list and then open another conversation, scrollbar stays on top which is not good, becasue this will trigger onYReachStart. Unmounting and mounting the entire MessageList helps, because it resets the scrollbar and it automatically scrolls to the bottom, but it is a bad UX where all messages disappear with white screen and then new message list appear.

It would be really useful to have the way to manually trigger scroll to bottom.

Hi, can we make scroll position state so that during page navigation for large list we don't have to scroll from start position.

When displaying received messages work wrap should be used.

Right now when display messages parts of a word will appear on two lines.

ie:
"I think this thing needs to have wo
rd wrap"

I want my message line break on enter press rather than shift + enter..
How do I prevent default behaviour of sending messages on enter pressed!!!

First of all awesome work! 🎉

Have a question, consider this scenario:

• opening chat window
• fetching for messages from api
• getting say 20 old read messages and 40 new unread
• is there a way to open chat window in a way that last read and first unread are sort of in the middle of the screen ?

Thank you.

Hello thank you for sharing your work...

Coming to the issue/feature request, currently message seems to take only string, it would be nice to add custom components like image, video file attachments etc something like this https://chatui.io/components/file-card