conversejs overrides is not working when I try to show icon in massages

Question

I am trying to override the renderActions function but it is not working, I am trying to add icons in every massage, I have tried like the below code:

export const restrictUserOnLoadPlugin = () => {
  window.converse.plugins.add('restrict-user', {
    overrides: {
      renderActions: function () {
        console.log('in');
        const kick = {
          i18n_text: 'kick',
          handler: (e: any) => console.log(e),
          button_class: 'chat-msg__action-edit',
          icon_class: 'fa fa-pencil-alt',
          name: 'kick',
        };
        return `<converse-dropdown class="chat-msg__actions" .items=${kick}></converse-dropdown>`;
      },
    },
  });
};

Answer 1

Using overrides is discouraged and should be avoided when possible. They only work with classes or objects that have been set as attributes on the _converse object, which is not the case for web components, which is what you're trying to override here. So it won't work.

Instead you should use the getMessageActionButtons hook to add or update buttons. https://conversejs.org/docs/html/api/-_converse.html#event:getMessageActionButtons

Here is documentation which describes how hooks work: https://github.com/conversejs/converse.js/blob/3b124cfdceb684ccbe3d20f7ea5cde20a1189f0b/docs/source/plugin_development.rst#hooks

So your code would be something like this:

    api.listen.on('getMessageActionButtons', (chatbox, buttons) => {
        buttons.forEach((button) => {
            button.icon_class = "my-icon-class";
        });
        return buttons;
    });