Custom components for message about chat-ui-kit-react HOT 11 CLOSED

@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

from chat-ui-kit-react.

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

I will add some documentation later.

from chat-ui-kit-react.

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

from chat-ui-kit-react.

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

from chat-ui-kit-react.

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

from chat-ui-kit-react.

When are you releasing this feature @supersnager ?

from chat-ui-kit-react.

@GhazanfarKhan Today/tommorow depending on your timezone ;)

from chat-ui-kit-react.

Awesome and thank you :)

from chat-ui-kit-react.

Awesome work.

from chat-ui-kit-react.

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)

from chat-ui-kit-react.

@startupgurukul I will add it.

from chat-ui-kit-react.