Skip to main content

MessageInput

Versatile Message Input Integration: Enable Text, Image, File, and Gif Sharing in Your Dapp with MessageInput.

Leveraging this component grants you access to a comprehensive input field equipped with all the necessary features for sending messages. It offers a wide range of customization options, including the inclusion of emojis, GIFs, and file-sharing capabilities. Furthermore, it provides users with the flexibility to set a connection button if the ChatUIProvider lacks wallet connection details. Additionally, the component seamlessly manages the verification failure process for gated groups, allowing for effortless customization of its parameters to suit your specific needs.

Usage​

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

export const MessageInputTest = () => {
  return (
{/* below component won't have gif, file, image option since they've been passed as false */}
    <MessageInput chatId={'330cae5f963f2df3d6d692a7075317c906468e3fe60bfb8280a7e125208939e1'} emoji={false} gif={false} file={false} />
  )
}

Customization parameters​

ParamTypeDefaultRemarks
chatIdstring-Chat id for a particular chat
emojibooleantrueDefault value is true, decides if the input field will have emoji option
gifbooleantrueDefault value is true,decides if the input field will have gif option
filebooleantrueDefault value is true,decides if the input field will have file upload option
isConnectedbooleantrueDefault value is true,shows the connect button if signer, account and pgpPrivateKey is not passed
autoConnectbooleanfalseDefault value is false, decrypts pgpPrivateKey after reload if true, or else disconnects the existing wallet connection
onVerificationFailfunction-Function to perfom any task on gating access verification fail modal
verificationFailModalBackgroundModalBackgroundType-Default value is "OVERLAY", decides the access gating verification fail modal background, possible values are "OVERLAY" &#124 "BLUR" &#124 "TRANSPARENT"
verificationFailModalPositionModalBackgroundType-Default value is "GLOBAL", decides the access gating verification fail 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, MessageInput } from @pushprotocol/uiweb;
function App(props) {
  return (
    <>
      <h2>
        Live chat with pushai.eth, connect your wallet and start sending
        messages. You can customise the input field by changing the paramters
      </h2>
      <ChatUIProvider>
        <MessageInput
          chatId='0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666'
          emoji={true}
          gif={true}
          file={true}
        />
      </ChatUIProvider>
    </>
  );
}
LIVE PREVIEW