A long tab on a message object in the chat view can reveal a list of action items that can be perform on the message. Customize the message's context menu in the Chat View using
On the web-based client app, an option button on a message can reveal a list of action items that can be performed on the message as shown in the image below.
The following code snippets show how to add or remove a Delete button to and from the context menu.
import GroupChannel from '@sendbird/uikit-react/GroupChannel';
import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
import { MessageMenu, MenuItem } from '@sendbird/uikit-react/ui/MessageMenu';
const GroupChannelPage = () => (
<GroupChannel
channelUrl="CHANNEL_URL"
renderMessageContent={(props) => (
<MessageContent {...props} renderMessageMenu={(menuProps) => (
<MessageMenu {...menuProps} renderMenuItems={(props) => {
const { message, channel } = menuProps;
const { DeleteMenuItem } = props.items;
return (
<>
{/* Make your own menu item */}
<MenuItem
onClick={() => {}}>NEW MENU ITEM</MenuItem>
{/* Change the inner content of the menu item */}
<DeleteMenuItem>DELETE</DeleteMenuItem>
</>
);
}} />
)} />
)}
/>
);
function App() {
return (
// The chat interface can expand up to the dimensions of your parent component.
// To achieve a full-screen mode, apply the following CSS rules to the parent element.
<div style={{ width:'100vw', height:'100vh' }}>
<SendbirdProvider
// You can find your Sendbird application ID on the Sendbird dashboard.
appId={'YOUR_APP_ID'}
// Specify the user ID you've created on the dashboard.
// Or you can create a user by specifying a unique userId.
userId={'kat2'}
>
<GroupChannelPage />
</SendbirdProvider>
</div>
)
}
export default App;
props.items in MessageMenu contain a list of long-tab menu items our UIKit for React supports on a mobile device. The following code snippet demonstrates how to move the Copy button to the top of the context menu, followed by a Reply and a Delete button.
import GroupChannel from '@sendbird/uikit-react/GroupChannel';
import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
import { MessageMenu } from '@sendbird/uikit-react/ui/MessageMenu';
const GroupChannelPage = () => (
<GroupChannel
channelUrl="CHANNEL_URL"
renderMessageContent={(contentProps) => (
<MessageContent {...contentProps} renderMessageMenu={(props) => (
<MessageMenu {...props} renderMenuItems={(props) => {
const { message } = contentProps;
const {
CopyMenuItem,
ReplyMenuItem,
ThreadMenuItem,
OpenInChannelMenuItem,
EditMenuItem,
ResendMenuItem,
DeleteMenuItem,
} = props.items;
// Customize your menu items here. For example, Copy -> Reply -> Delete.
return (
<>
{message.messageType === 'user' && (
<><CopyMenuItem /><ReplyMenuItem /></>
)}
<DeleteMenuItem />
</>
);
}} />
)} />
)}
/>
);
function App() {
return (
// The chat interface can expand up to the dimensions of your parent component.
// To achieve a full-screen mode, apply the following CSS rules to the parent element.
<div style={{ width:'100vw', height:'100vh' }}>
<SendbirdProvider
// You can find your Sendbird application ID on the Sendbird dashboard.
appId={'YOUR_APP_ID'}
// Specify the user ID you've created on the dashboard.
// Or you can create a user by specifying a unique userId.
userId={'kat2'}
>
<GroupChannelPage />
</SendbirdProvider>
</div>
)
}
export default App;
On the mobile platform, message menu items can be rendered as a bottom sheet or a box of items triggered by a long tab. For the bottom sheet, use MobileBottomSheet so that the menu list appears at the bottom of the screen. On the other hand, you can utilize MobileContextMenu to customize the context menu that appears in a box.
MobileContextMenuMobileBottomSheet
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import GroupChannel from '@sendbird/uikit-react/GroupChannel';
import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
import { MobileContextMenu } from '@sendbird/uikit-react/ui/MobileMenu';
import { MenuItem } from '@sendbird/uikit-react/ui/MessageMenu';
const GroupChannelPage = () => (
<GroupChannel
channelUrl="CHANNEL_URL"
renderMessageContent={(props) => (
<MessageContent {...props} renderMobileMenuOnLongPress={(menuProps) => (
<MobileContextMenu {...menuProps} renderMenuItems={(props) => {
const { message, channel } = menuProps;
const { DeleteMenuItem } = props.items;
return (
<>
{/* Make your own menu item */}
<MenuItem onClick={() => {}}>NEW MENU ITEM</MenuItem>
{/* Change the inner content of the menu item */}
<DeleteMenuItem>DELETE</DeleteMenuItem>
</>
);
}} />
)} />
)}
/>
);
function App() {
return (
// The chat interface can expand up to the dimensions of your parent component.
// To achieve a full-screen mode, apply the following CSS rules to the parent element.
<div style={{ width:'100vw', height:'100vh' }}>
<SendbirdProvider
// You can find your Sendbird application ID on the Sendbird dashboard.
appId={'YOUR_APP_ID'}
// Specify the user ID you've created on the dashboard.
// Or you can create a user by specifying a unique userId.
userId={'kat2'}
breakpoint={true}
>
<GroupChannelPage />
</SendbirdProvider>
</div>
)
}
export default App;
props.items in MobileMenu contain a list of long-tab menu items our UIKit for React supports on a mobile device. The following code snippet demonstrates how to move the Copy button to the top of the context menu, followed by a Reply and a Delete button.
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import GroupChannel from '@sendbird/uikit-react/GroupChannel';
import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
import { MobileMenu } from '@sendbird/uikit-react/ui/MobileMenu';
const GroupChannelPage = () => (
<GroupChannel
channelUrl="CHANNEL_URL"
renderMessageContent={(contentProps) => (
<MessageContent {...contentProps} renderMobileMenuOnLongPress={(props) => (
<MobileMenu {...props} renderMenuItems={(props) => {
const { message } = contentProps;
const {
CopyMenuItem,
ReplyMenuItem,
ThreadMenuItem,
OpenInChannelMenuItem,
EditMenuItem,
ResendMenuItem,
DeleteMenuItem,
} = props.items;
// Customize your menu items here. For example, Copy -> Reply -> Delete.
return (
<>
{message.messageType === 'user' && (
<><CopyMenuItem /><ReplyMenuItem /></>
)}
<DeleteMenuItem />
</>
);
}} />
)} />
)}
/>
);
function App() {
return (
// The chat interface can expand up to the dimensions of your parent component.
// To achieve a full-screen mode, apply the following CSS rules to the parent element.
<div style={{ width:'100vw', height:'100vh' }}>
<SendbirdProvider
// You can find your Sendbird application ID on the Sendbird dashboard.
appId={'YOUR_APP_ID'}
// Specify the user ID you've created on the dashboard.
// Or you can create a user by specifying a unique userId.
userId={'kat2'}
breakpoint={true}
>
<GroupChannelPage />
</SendbirdProvider>
</div>
)
}
export default App;