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​

customPropMinimized = 'true';
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatViewBubble } from @pushprotocol/uiweb;
function App(props) {
  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 (
    <>
      <h2>
        Change the msg object in the Live editor to test different types of
        messages
      </h2>
      <ChatUIProvider>
        <ChatViewBubble decryptedMessagePayload={msg} />
      </ChatUIProvider>
    </>
  );
}
LIVE PREVIEW