Skip to main content

ChatProfile

Empower User Interaction: Showcase Wallet Addresses, Group Names, and Member Management with ChatProfile in Your Dapp.

The ChatProfile feature empowers you to autonomously construct the header of a chat view component with minimal effort, requiring just the inclusion of a chatId. It extends beyond the fundamental profile view, offering additional capabilities such as a group management modal, enhancing your chat experience.

Usage​

import ChatProfile from "@pushprotocol/uiweb";

export const ChatProfileTest () => {
return (
    <ChatProfile chatId={'330cae5f963f2df3d6d692a7075317c906468e3fe60bfb8280a7e125208939e1'} style='Info' />
  )
}

Customization parameters​

ParamTypeDefaultRemarks
chatIdstring-Chat id for a particular chat
groupInfoModalBackgroundModalBackgroundType-Default value is "OVERLAY", decides the group info modal background, possible values are "OVERLAY" &#124 "BLUR" &#124 "TRANSPARENT"
groupInfoModalPositionModalBackgroundType-Default value is "GLOBAL", decides the group info modal position, it can be either relative to immediate parent(RELATIVE) or the entire screen(GLOBAL), possible values are "RELATIVE" &#124 "GLOBAL"
chatProfileRightHelperComponentReact.ReactNode-Custom React component that will be displayed on the right side of chat profile header
chatProfileLeftHelperComponentReact.ReactNode-Custom React component that will be displayed on the left side of chat profile header

Note: Parameters in this style are mandatory.

Note: Refer ChatUIProvider for details on its paramters.

Live playground​

// DO NOT FORGET TO IMPORT LIBRARIES// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatProfile } from @pushprotocol/uiweb;
function App(props) {
  return (
    <>
      <h2>Interact with ChatProfile by changing the chatId.</h2>
      <ChatUIProvider>
        <ChatProfile
          chatId='0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666'
          style='Info'
        />
      </ChatUIProvider>
    </>
  );
}
LIVE PREVIEW