How to add custom action menu for ChatMessage

[Joe Chiu (joe-chiu)]

Is there any way to customize the action menu for ChatMessage, so I can replicate or approximate the functionality for Teams app like allow adding reactions to the messages? The FluentChatMessage from fluentui-ctontrib has no actions slot and I don't see ways to customize the actions menu popover for messages from MessageThread components.

[John (jpeng-ms)]

Hi Joe Chiu (@joe-chiu) , thanks for you message, this is John and I will be helping you this week. Please allow me to check with our team and I will get you back shortly.

[John (jpeng-ms)]

Hi Joe Chiu (@joe-chiu), thanks for your patience. The action menu you are referring to is ChatMessageActionFlyout component. Unfortunately , we currently don't have a way for you to provide custom actions via ChatMessageActionFlyoutProps. I have created a backlog item for us and we will let you know once it's implemented.

In the meanwhile, unfortunately you would need to have a custom component implemented for ChatMessage with custom action menu to unblock you. And you are also right that the Fluent UI component doesn't have action menu built-in, so it might not be too helpful for your use case.

That being said, we appreciate your feedback. Please let us know if there's anything else I can help you with : )

[Joe Chiu (joe-chiu)]

Thanks John, I made some progress, so I would share my findings and see if we could find some easy way to enable more flexibility. I am using the MessageThread component and passing in an array of messages via the messages prop. I am using the sample code from the story book.

Depending on whether the chat message is from self or others, a FluentChatMessage or FluentChatMyMessage would be created. FluentChatMessage has no built-in action menu, so I can use onRenderMessage prop on MessageThread to override message rendering, and wrap with message within a Popover with hover trigger, so that worked. The problem now is the FluentChatMyMessage type - this component has a built in actions slot, but as you mentioned in your investigation, it can not be configured from my code. I wonder if there is a reasonable way to disable this built-in action menu, so I can provide my own via the custom message renderer. The custom message renderer has a MessageProps for each of the message. There is already an disableEditing prop, perhaps we can add another prop here to indicate that we don't want the built in action menu?

Would that be a simpler problem to solve? Thanks for considering.

[John (jpeng-ms)]

Thanks Joe Chiu (@joe-chiu) , sorry for the late reply.

Would you mind to clarify few things for me please?

When you set disableEditing Prop to true, the built-in action menu from UI library should be disabled, is it the case?

When you use ChatMyMessage from Fluent UI, you don't see a way to disable actionSlots which prevented you to implement a custom action menu?

Do I understand this correctly?

[ckeisc]

You are right! The doc actually says so - that "disableEditing - This removes the action menu on messages."
I didn't make the connection because the action menu also contains Delete operation, but anyways, it solved my problem, thank you very much for your help!

[John (jpeng-ms)]

np glad i can help! feel free to let us know if anything else we can help you with!

[Raven Hoang (lovedota)]

Hi John (@jpeng-ms)
Do we have any example on how we can show emoji in Chat ?