Is it possible to use the “@” mention feature with the <Channel /> component in the React-based UIKit?
Hey @mwq27,
You should be able to do this by utilizing getSendUserMessage.
Here is an example implementation of that selector:
// getSendUserMessage & getSendFileMessage & getDeleteMessage & getUpdateUserMessage
import {
SendBirdProvider,
withSendBird,
sendBirdSelectors,
} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";
const appId = process.env.APP_ID;
const userId = process.env.USER_ID;
const channelUrl = process.env.CHANNEL_URL;
const CustomComponent = (props) => {
const {
sendMessage,
sendFileMessage,
deleteMessage,
updateLastMessage,
sdk,
} = props;
const [lastMessage, setLastMessage] = useState({});
const lastMessageId = lastMessage.messageId;
return(
<div onSubmit={e => e.preventDefault()}>
{`Last MessageId: ${lastMessageId}`}
<button onClick={() => {
const params = new sdk.UserMessageParams();
params.message = MESSAGE;
sendMessage(channelUrl, params)
.then((pendingMessage) => {
setLastMessage(pendingMessage);
alert('Message is pending', pendingMessage);
return pendingMessage;
})
.then(message => {
alert('Message successfully sent', message);
setLastMessage(message);
console.warn(message);
})
.catch(e => {
console.warn(e);
alert('Couldn\'t send message.');
})
}}
> Send message
</button>
<button disable={!lastMessageId} onClick={() => {
const params = new sdk.UserMessageParams();
params.message = UPDATED_MESSAGE;
updateLastMessage(channelUrl, lastMessageId, params)
.then((message) => {
setLastMessage(message);
alert('Message updated');
})
.catch(e => alert('Couldn\'t update a message.'))
}}
> Update last message
</button>
<button disable={!lastMessageId} onClick={() => {
deleteMessage(channelUrl, lastMessage)
.then(() => {
alert('Message deleted');
})
.catch(e => {
console.warn(e);
alert('Couldn\'t delete a message.')
})
}}
> Delete last message
</button>
<br/>
<input type="file" id="file-upload" />
<button onClick={() => {
const params = new sdk.FileMessageParams();
params.file = document.getElementById('file-upload').files[0];
sendFileMessage(channelUrl, params)
.then((pendingMessage) => {
setLastMessage(pendingMessage);
alert('Message is pending', pendingMessage);
return pendingMessage;
})
.then(message => {
alert('Message successfully sent', message);
setLastMessage(message);
console.warn(message);
})
.catch(e => alert('Couldn\'t delete message.'))
}}
> Send file Message
</button>
</div>
);
};
const CustomComponentWithSendBird = withSendBird(CustomComponent, (state) => {
const sendMessage = sendBirdSelectors.getSendUserMessage(state);
const sendFileMessage = sendBirdSelectors.getSendFileMessage(state);
const deleteMessage = sendBirdSelectors.getDeleteMessage(state);
const updateLastMessage = sendBirdSelectors.getUpdateUserMessage(state);
const sdk = sendBirdSelectors.getSdk(state);
return ({
sendMessage,
sendFileMessage,
deleteMessage,
updateLastMessage,
sdk,
});
});
export const MessageCRUDSelectors = () => (
<SendBirdProvider appId={appId} userId={userId} nickname={userId}>
<CustomComponentWithSendBird />
<div style={{ width: '320px', height: '500px' }}>
<Channel channelUrl={channelUrl} />
</div>
</SendBirdProvider>
);
Gotcha. I wasn’t sure if I could just @username someone in the Channel’s input field. It looks like we can do that, I would just have to provide the @tagging functionality myself, right?
That would be correct. You’d have to build in that functionality using getSendUserMessage. So like if a user @'s someone, then you add the mention parameter to the message.
Something along those lines. Also, in case you were not aware, we’re open sourcing our UIKit around the end of Q1. Just an FYI there.
2 Likes
Great, that’s awesome to hear. Thank you
1 Like
Hey @mwq27,
It is actually! You can see it here: GitHub - sendbird/sendbird-uikit-ios-sources: Build chat in minutes with Sendbird UIKit open source code and samples.
