Show transform with AI result in a popup window

I have some transformation menu actions that take what's on my clipboard and apply AI instructions to it. I’d like a window to pop up that displays the results in rich text format that once I click outside that window it closes that window. Currently, I’ve found a workaround using a Siri shortcut, but it's not working quite right. When I click outside the display box, it doesn't close, leaving the shortcut in limbo. This causes issues when I try to run the BTT menu item again, as it won’t work properly unless I close that window. Is there anyway to remove the siri shortcut part and do everything in BTT?

I would configure a floating menu that contains a webview with this HTML/JS:

<html>
<head>
<script>
async function loadClipboardContent() {
let result = await get_clipboard_content({format: "NSPasteboardTypeString" /*optional*/, asBase64: false, excludeConcealed: false});
 document.getElementById("clipboard_contents").innerHTML = result;

}
</script>
<style>
        pre {
            white-space: pre-wrap; /* Allows for wrapping while preserving whitespace */
        }
    </style>  
</head>
<body>
<pre id="clipboard_contents">

</pre>
</body>
</html>

Then after your transformation show that floating menu and execute the loadClipboardContents() function in the webview. Here is a full example preset that shows when pressing cmd+opt+ctrl+D:

ai_webview_example.bttpreset (13.3 KB)

Of course you can style the HTML to display the result nicer

would you be able to do a step by step video by any chance tried for a few hours but couldn’t get it to work. thank you in advance.

have you tried to import my preset?

yes i have

And it did not work for you?

It did by itself, the problem is it wont display if clipboard contents have rich text formatting.