search

chatscope / chat-ui-kit-react

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
https://chatscope.io
MIT License
1.32k stars 109 forks source link

Avatar isn't displayed when custom content is used #155

Open ClydeDz opened 4 months ago

ClydeDz commented 4 months ago

Hi,

I've been using this library for my chat app, and it's been so easy to get something done really quickly.

I'm stuck with this problem - when displaying custom content like the code snippet below, I cannot get the Avatar to display beside it. I've tried several combinations with no luck. Any idea how to fix this?

This is the code snippet:

 <Message
    key={index}
    model={{
      type: "custom",
      sentTime: message.timestamp,
      sender: message.from,
      direction:  "incoming"
    }}
    children={<Avatar src="image-location.jpg" name="profile name" />}
    avatarSpacer={true}
  >
    <Message.CustomContent>
      <div>
        <Button border>Some action goes here</Button> 
      </div>
    </Message.CustomContent>
  </Message>

This is the output: image