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
style"Info" &#124 "Preview"-Only have Info support as of now,Info is the header that’s visible in ChatView Component, Preview is the one that's visible in ChatListComponent
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"

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