Tengo una conversación con websocket y no quiero eliminar el mensaje haciendo clic en el botón.

Cada mensaje se muestra con esta función:

 const displayMessage = (message, author, icon, color, time) => { let url = '{!! route('users.profile', ":name") !!}'.replace(':name', author); let currentUser = '{!! Auth::user()->username !!}' let whoClass = currentUser === author ? "me" : "other" return ` <div class="message ${whoClass}" data-username="${author}"> <p>${message}</p> <span class="sub_message"> <i class="fad ${icon} text-${color}"></i> <a href="` + url + `">${author}</a> - ${time} ${deleteBtn(author)} </span> </div> ` }

Pero uso una política con @can para mostrar el botón solo para el usuario administrador y otras condiciones: el moderador no puede eliminar el mensaje del administrador, pero este no es el problema.

¿Cómo puedo mostrar esta directiva @can en JS? con la variable ${autor}

 const deleteBtn = (author) => { @can('deleteTchatMessage', ${author}) <form class="d-inline" action="{{ route('index') }}" method="POST"> @method('DELETE') @csrf <button class="btn" type="submit" onclick="return confirm('Are you sure you want to delete it ?')"> <i class="fad fa-trash text-red"></i> </button> </form> @endcan }

De momento no reconoce la variable autor, así que debo estar haciéndolo mal