Skip to main content

ChatViewBubble

Simplify Development: Instantly Integrate Pre-built Chat Bubble UI for Your Dapp

ChatViewBubble serves as the fundamental building block for a chat view, allowing users to showcase individual chat messages while formatting them based on the provided payload. This essential component facilitates the presentation and customization of single chat messages with ease.

Usage

import { ChatViewBubble } from "@pushprotocol/uiweb";

const ChatViewBubbleTest = () => {
const msg = {
fromCAIP10: "eip155:0xAC5d2aE3b4307D8F4304C0292D11de8968eB9DFd",
toCAIP10:
"b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1",
fromDID: "eip155:0xAC5d2aE3b4307D8F4304C0292D11de8968eB9DFd",
toDID: "b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1",
messageObj: {
content: "heyyy",
},
messageContent: "heyyy",
messageType: "Text",
timestamp: 1695170770877,
encType: "PlainText",
encryptedSecret: "",
signature:
"-----BEGIN PGP SIGNATURE-----\n\nwsBzBAEBCAAnBQJlCkDSCRB79EVvuUuFJxYhBKgXzyQx/165mhxKK3v0RW+5\nS4UnAAD+pgf+PFVDOzs8dP5wrzVQZdNf8t/jXEMqqYF00VFzVwsirVJY8YEm\nN0eXNB5Ndk99g4+k1aPxR1ToKk67nJxnUvZi6lqFFcqaOfsIzgxPNO0dtkw/\nvDNaVJIAE2B6YqdLQmv7kjbPUXZD1vQjzxR/8qusQWqt0IeO8c2SXTciT6uI\ndsjiJgZctH6VINz8I6H9gf35aPrDf3f4VqhgHDgwhtjyfQXLBMPh1vZ78sAB\noOKVNQN464llAsCjK7Q8zTANgAwT/G14V7IiHdDX0ZRRqH38AKRstX1y44l8\nQYQRlQXqGGwz3n3upnT5ZXpPNkdO/btuoNj8W8npic8CIc9rBRoTXg==\n=Xmu2\n-----END PGP SIGNATURE-----\n",
sigType: "pgpv2",
verificationProof:
"pgpv2:-----BEGIN PGP SIGNATURE-----\n\nwsBzBAEBCAAnBQJlCkDSCRB79EVvuUuFJxYhBKgXzyQx/165mhxKK3v0RW+5\nS4UnAAC1mwf/Ydi97nNrk7y58tO8Pmw6i7bGHbie7KNEEvH5aL3sMgzeOWTX\nAozDvWXuQI0/InVhqAe8l7VR6/mXEaWsewn1S/gcPkIxHSTaD0UIVbXHcoq3\nNcuCzZaXL6n1mhx+wJSKCsAaa7Z/L7+4Ru6yj9LGEAzRpDQrY7RfgQP6ezSz\nxNLz2XavBMmIEwMS/wuC5nvT4Xl8amQlmPkFxZK6+2sfDxxzKMPVVewlFIwh\n4yHd2EYpIlVfuhQh/2KidLg9LAlqHUUgmrE0GU1aCV8bwKl/4hyjzREPahGc\nJ0wB1059rCMaJBXI+YbE0Z1bhX/G+4nM095QBsWDajAWmwnDUQYmFA==\n=BiZz\n-----END PGP SIGNATURE-----\n",
link: "bafyreianm5wnvhdhm2dymbykleoi4w54z2et7q4gbkxogaax5life7btqi",
cid: "bafyreihzt35ubpsq2vsi4swfnuq4mjaiufpnwt6nx2ngthtu5wk5h2z6ca",
};

return (
<div>
<ChatViewBubble decryptedMessagePayload={msg} />
</div>
);
};

export default ChatViewBubbleTest;

Customization Parameters

ParamTypeDefaultRemarks
decryptedMessagePayloadIMessagePayload-It is a decrypted message payload object

Note: Parameters in this style are mandatory.

Note: Refer ChatUIProvider for details on its paramters.

Live playground

LIVE PREVIEW