Custom components for message

[no-1ne]

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]

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)?

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

[no-1ne]

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]

@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]

When are you releasing this feature @supersnager ?

[supersnager]

@GhazanfarKhan Today/tommorow depending on your timezone ;)

[supersnager]

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

I will add some documentation later.

[no-1ne]

Awesome and thank you :)

[GhazanfarKhan]

Awesome work.

[supersnager]

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]

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]

@startupgurukul I will add it.