official Demo

conf
OSX
Chrome 57.0.2987.133

``

const styles = theme => ({
ChatFeed: {
height: "1000px",
}
});

return(
<ChatFeed className={ChatFeed}
...
/>

)
``

I tried to apply it this way but it didn't work. What should I do?

It's missing the gulp file.

Please change the overflow rule to auto, as is, the scrollbars look quite bad.

related to #6

I am experiencing an issue for the ChatInput when generated automatically.
In React 16.2 the "default" property is not available you can directly call createElement on react_1.

Is that right?

sadly its not working with react apps created with create-react-app.

it seems the TSC compile target is not compatible...

Setting hasInputField on the component results in an error

Cannot read property 'createElement' of undefined
/react-chat-ui/lib/ChatInput/index.js:24:28

Passing a plain string object doesn't let us do very much! I know someone requested images, but links would be a good place to start? Maybe allow HTML objects?

Gonna modify your existing code to support these :)

I really enjoy your library.
However, the only option to overwrite the properties of a text is global for both 'blue' and 'grey' bubbles (in my case I want different text colors for each bubble). It would be better if we have the option to override text properties for each case alone.
Another solution could be to not set properties for the

inside bubbles, and let them inherit the properties of the bubble.
Thanks

Hi,

I've recently upgraded my react-chat-ui to 0.1.0 and now it returns an error
Warning: Failed prop type: Cannot call a class as a function

Here is my code

import React, { Component } from 'react';
import { ChatFeed, Message } from 'react-chat-ui';

class ChatBox extends Component {
  constructor(props) {
    super(props);

    this.state = {
      messages : [
        (new Message({ id: 1, message: "This is the recipient!" })),
        (new Message({ id: 0, message: "This is me" }))
      ],
    }
  }
  render() {
    return (
      <ChatFeed
        messages={this.state.messages}
        isTyping={true}
        hasInputField={false}
        bubblesCentered={false}
        bubbleStyles={
          {
            text: {
              fontSize: 14
            },
            chatbubble: {
              borderRadius: 70,
              padding: 18
            }
          }
        }
      />
    )
  }
}

export default ChatBox;

Any solution with this? Thank you.

it would be great if the chat history window didn't have scroll bars...should be set to auto or hidden

My plan is to re-write the project into TypeScript. This should not impact anyone that plans to or already uses react-chat-ui.

My reasoning for this is for code readability and type safety.

how to implement pagination with this library

Last commit for this project was 8 months back and no issues are also being replied to?

I really like this library and intend to use it if it is still actively maintained? Does any one have experience with using it long term, so you can shed some light into how well is it supported?

When using react-chat-ui with MobX, it shows warning messages about out of bound.

Warning Messages:

...
[mobx.array] Attempt to read an array index (34) that is out of bounds (34). Please check length first. Out of bound indices will not be tracked by MobX
[mobx.array] Attempt to read an array index (35) that is out of bounds (35). Please check length first. Out of bound indices will not be tracked by MobX

Is this compatible with ReactJS and React Native both or either? Which one?

Does this support managing app state and reconnection logic? Can a feature supporting that be made if it doesn't.

It would be great to customize a chat bubble to be centered. Sometimes you don't want to have the classical chat view, especially if you want to build public chat rooms. Then it's nice to have all the chat bubbles in the middle of the page.

Thank you very much for implementing this improvement!

Hello Brandon, first I want to thank you a lot for your work ;)

I think you should put react and react-dom dependencies to peerDependencies, to avoid loading differents versions of them and having this error : https://reactjs.org/warnings/refs-must-have-owner.html

Have a nice day !

How i can make a line-break in the message? I try use '\n' and '<'br/>' but it can not. Do you have any sollution?

<ChatFeed
messages={messages} // Array: list of message objects
isTyping={false} // Boolean: is the recipient typing
/* hasInputField={} */
showSenderName // show the name of the user who sent the message
bubblesCentered={true} //Boolean should the bubbles be centered in the feed?
// JSON: Custom bubble styles
bubbleStyles={{
text: {
fontSize: 16,
},
chatbubble: {
borderRadius: 70,
padding: 10,
},
}}
/>

This project is written on TypeScript, but there is only JavaScript without declaration file in NPM, so no one can use this library in their TS-projects.

It would be great to have a visual component showing while sending and when sending failed (with the error message) or succeeded.

At the moment there's no way to say, change the colour of different types of chat bubbles.

https://github.com/brandonmowat/react-chat-ui/blob/master/src/ChatBubble/index.tsx

Please add class names to individual components (or props that would allow for this customization).

https://docs.livechatinc.com/react-chat-ui-kit/#messagegroup

Hi, thank you for the cool simple library. Just wondering, can you point me to the implementation of custom bubble style for the sender. Example, if the background color of sender is other than gray and also a custom background color bubble for myself.

Hello. Thank you for the library!

You use Math.random() in react keys. These components will unmount and mount again every time the key changes, even if props stay the same. Is this is by purpose? If not, can we fix this?
If you don't mind I will get into it in a few days.

https://github.com/brandonmowat/react-chat-ui/blob/master/src/ChatFeed/index.js#L61