Custom components for message

no-1ne commented 4 years ago

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

supersnager commented 4 years ago

Hello @startupgurukul thank you for your feedback.

We have this feature on our roadmap. I'd like to hear from you, what approach would be better (and why)?

Dedicated component for each kind of message e.g. ImageMessage, FileMessage
One parametrized Message component

no-1ne commented 3 years ago

Thank you for the reply.

Keeping message structure fixed with keys: type & payload. While rendering logic changes based on type of message . Few message types like image video and file can be pre handled by library while still giving an option to customise for other message types

For example , type: image and payload: path to image type: text and payload: message text type: video, file and payload: path

This keeps message structure simple and based on type of message render components accordingly this enables users to extend it to any type of message they like

Here is how alibabas chat ui handles it

const initialMessages = [ { type: 'text', content: { text: 'message text' }, user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg' }, }, { type: 'image', content: { picUrl: '//img.alicdn.com/tfs/TB1p_nirYr1gK0jSZR0XXbP8XXa-300-300.png', }, }, ];

switch (type) {
  case 'text':
    return <Bubble content={content.text} />;
  case 'image':
    return (
      <Bubble type="image">
        <img src={content.picUrl} alt="" />
      </Bubble>
    );
  default:
    return null;
}

Source: https://chatui.io/components/chat

supersnager commented 3 years ago

@startupgurukul Thank you for your explains. I will add support for new kind of messages. This will be probably divided into few small update steps.

First the <Message /> component should be modified to allow to pass any content as children, or from model.content property - for any custom content messages. Note to myself: add <Message.Content /> Component. For backward compatiblity current message type should have default set to "text" or "default" (or maybe "html" because now it uses dangerouslysetinnerhtml internally) Maybe: new <Message.Content /> component should be typed instead of <Message />?

Next add predefined components for common types like image, video, etc

GhazanfarKhan commented 3 years ago

When are you releasing this feature @supersnager ?

supersnager commented 3 years ago

@GhazanfarKhan Today/tommorow depending on your timezone ;)

supersnager commented 3 years ago

32439f703361ac951522f8892a01982b8e16ccf8 https://github.com/chatscope/chat-ui-kit-react/releases/tag/v1.1.0

I will add some documentation later.

no-1ne commented 3 years ago

Awesome and thank you :)

GhazanfarKhan commented 3 years ago

Awesome work.

supersnager commented 3 years ago

Added some examples to Storybook: https://chatscope.io/storybook/react/?path=/docs/components-message--html-content https://chatscope.io/storybook/react/?path=/docs/components-message--text-content https://chatscope.io/storybook/react/?path=/docs/components-message--image-content https://chatscope.io/storybook/react/?path=/docs/components-message--custom-content

no-1ne commented 3 years ago

it would be perfect if there is an onclick listener for message (to be exact, on click of image thumbnail the flexibility of doing something)

supersnager commented 3 years ago

@startupgurukul I will add it.

chatscope / chat-ui-kit-react

Custom components for message #2