Hi everyone,
It's a long one; apologies in advance!
I'm working on a Webex Embedded App using the sample Kitchen Sink App to test a message counter badge within the sidebar. I’ve run into some challenges:
- The app initialised within the sidebar has a default spaceId of 00000000-0000-0000-0000-000000000000, as it’s not associated with a specific space.
- I want to simulate sending messages to the app while I’m not inside the app, so the messages are marked as "unread," so it should trigger the message counter within the sidebar to appear/increase.
To test this, I’ve added a custom getMessage() button. Here’s the logic for the message counter and button:
/**
* Simulates receiving a new message and updates the unread message counter in Webex sidebae
*/
const setUnreadMsgCounterBadge = async (unreadMsgCount) => {
try {
const unreadCount = Object.values(
store.getState()?.roomsPageReducer?.unreadInboxRooms || {},
).reduce((a, c) => a + c, 0);
const count = unreadMessagesCount ?? unreadCount;
if (isNaN(count) || count < 0) {
console.error("Invalid count value:", count);
return;
}
if ("serviceWorker" in navigator) {
return navigator?.serviceWorker?.controller?.postMessage({
type: "set_unread_message_counter",
unreadCount: count,
});
}
const webexSidebar = await webexApplication.context.getSidebar();
const res = await webexSidebar.showBadge({ badgeType: "count", count });
log("Debug: Badge update response", res);
} catch (e) {
console.error(
log("Badge Update Failed", { error: e.message })
);
}
}
webexApplication.onReady().then(async () => {
try {
await setUnreadMsgCounterBadge();
} catch (error) {
console.error("Error invoking setUnreadMsgCounterBadge:", error);
}
});
function handleNewMessage() {
app.context
.getSpace()
.then((space) => {
log("getSpace()", space);
const spaceId = space.id;
const simulatedMessage = {
id: `msg-${Date.now()}`,
spaceId: "spaceId",
text: "This is a test message",
created: new Date().toISOString(),
};
log("New Message Event", simulatedMessage);
try {
const unreadMessagesCount = (window.unreadMessagesCount || 0) + 1;
window.unreadMessagesCount = unreadMessagesCount;
setUnreadMsgCounterBadge(unreadMessagesCount);
log("Updated Message Counter", { unreadMessagesCount });
} catch (error) {
log("Error Handling New Message", { error: error.message });
}
})
.catch((error) => {
log(
"getSpace() promise failed with error",
Webex.Application.ErrorCodes[error]
);
});
}
I can see the simulated messages in the console and so can confirm the handleNewMessage() function is triggered. However, I’m unsure:
- Is this approach with getMessage() reasonable for simulating messages, or is there a better way?
- Are there any tools or APIs available to simulate or test unread messages for apps with the default spaceId?
- Any tips on ensuring the message counter updates accurately for unread messages in this setup?
The link for the github repo is: https://github.com/mozzarelli3/EmbeddedAppKitchenSink
Any guidance would be greatly appreciated, thanks!
