Outlook js plugin - Show an custom alert dialog box instead of the task pane when using my add-in - outlook

Question

I'm currently developing an Office plugin for Outlook using the OnMessageSend and SmartAlerts events that will perform a few simple checks before the email is being sent.
I'm able to display custom alerts on the taskpane but i would love to be able to display them on the send button.
I can't seem to change the default alert msgbox.
On Microsoft official website i found this information regarding Smart Alerts dialog messages:
"The dialog's title bar. Your add-in's name is always displayed there.
The message's format. For example, you can't change the text's font size and color or insert a bulleted list.
The dialog options. For example, the Send Anyway and Don't Send options are fixed and depend on the SendMode option you select.
Event-based activation processing and progress information dialogs. For example, the text and options that appear in the timeout and long-running operation dialogs can't be changed."
Anyone here knows it's possible to display something like this:
Here's my even.completed example:
event.completed({ allowEvent: false, errorMessage: "SAMPLE TEXT TO DISPLAY"});
It's seems i can't use breaks, change colors or size.
Here's my manifest:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
<Id>dac64749-60d7-4579-9036-cb7308b6d444</Id>
<Version>1.0.0.0</Version>
<ProviderName>Validator</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Sample Text"/>
<Description DefaultValue="Sample Text"/>
<IconUrl DefaultValue="https://localhost:3000/assets/icon-64.png"/>
<HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-128.png"/>
<SupportUrl DefaultValue="https://localhost:3000/"/>
<AppDomains>
<AppDomain>https://localhost:3000/</AppDomain>
</AppDomains>
<Hosts>
<Host Name="Mailbox"/>
</Hosts>
<Requirements>
<Sets>
<Set Name="Mailbox" MinVersion="1.1"/>
</Sets>
</Requirements>
<FormSettings>
<Form xsi:type="ItemRead">
<DesktopSettings>
<SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
<RequestedHeight>250</RequestedHeight>
</DesktopSettings>
</Form>
</FormSettings>
<Permissions>ReadWriteMailbox</Permissions>
<Rule xsi:type="RuleCollection" Mode="Or">
<Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
<Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Read"/>
</Rule>
<DisableEntityHighlighting>false</DisableEntityHighlighting>
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
<Requirements>
<bt:Sets DefaultMinVersion="1.12">
<bt:Set Name="Mailbox"/>
</bt:Sets>
</Requirements>
<Hosts>
<Host xsi:type="MailHost">
<!-- Specifies the event-based activation runtime. -->
<!-- For more information, see https://learn.microsoft.com/office/dev/add-ins/outlook/autolaunch. -->
<Runtimes>
<!-- HTML file that references the JavaScript event handlers. This is used by Outlook on the web. -->
<Runtime resid="WebViewRuntime.Url">
<!-- JavaScript file that contains the event handlers. This is used by Outlook on Windows. -->
<Override type="javascript" resid="JSRuntime.Url"/>
</Runtime>
</Runtimes>
<DesktopFormFactor>
<ExtensionPoint xsi:type="MessageComposeCommandSurface">
<OfficeTab id="TabDefault">
<Group id="CategoriesGroupMessageCompose">
<Label resid="CategoriesGroupLabel"/>
<Control xsi:type="Button" id="MessageComposeSelectButton">
<Label resid="SelectButtonLabel"/>
<Supertip>
<Title resid="SelectButtonLabel"/>
<Description resid="SelectButtonDescription"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16" />
<bt:Image size="32" resid="Icon.32x32" />
<bt:Image size="80" resid="Icon.80x80" />
</Icon>
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="Taskpane.Url"/>
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
<ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">
<OfficeTab id="TabDefault">
<Group id="CategoriesGroupAppointmentOrganizer">
<Label resid="CategoriesGroupLabel"/>
<Control xsi:type="Button" id="AppointmentOrganizerSelectButton">
<Label resid="SelectButtonLabel"/>
<Supertip>
<Title resid="SelectButtonLabel"/>
<Description resid="SelectButtonDescription"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16" />
<bt:Image size="32" resid="Icon.32x32" />
<bt:Image size="80" resid="Icon.80x80" />
</Icon>
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="Taskpane.Url"/>
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
<!-- Enables the add-in on specified events. -->
<ExtensionPoint xsi:type="LaunchEvent">
<LaunchEvents>
<LaunchEvent Type="OnMessageSend" FunctionName="onMessageSendHandler" SendMode="PromptUser"/>
</LaunchEvents>
<!-- Identifies the runtime to be used by the add-in (also referenced by the Runtime element). -->
<SourceLocation resid="WebViewRuntime.Url"/>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<Resources>
<bt:Images>
<bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
<bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
<bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
</bt:Images>
<bt:Urls>
<bt:Url id="JSRuntime.Url" DefaultValue="https://localhost:3000/commands.js"/>
<bt:Url id="WebViewRuntime.Url" DefaultValue="https://localhost:3000/commands.html"/>
<bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
</bt:Urls>
<bt:ShortStrings>
<bt:String id="CategoriesGroupLabel" DefaultValue="Sample Name"/>
<bt:String id="SelectButtonLabel" DefaultValue="Sample Name"/>
</bt:ShortStrings>
<bt:LongStrings>
<bt:String id="SelectButtonDescription" DefaultValue="Sample Name"/>
</bt:LongStrings>
</Resources>
</VersionOverrides>
</VersionOverrides>
</OfficeApp>

Answer 1

That is not possible with smart alerts. You need to use the on-send feature and use the Dialog API for displaying a rich UI for the dialogs, see Use the Office dialog API in Office Add-ins for more information.
Read more about the on-send feature in the On-send feature for Outlook add-ins article.
Note, you can also post or vote for an existing feature request on Tech Community where they are considered when the Office dev team goes through the planning process.