index.html

<script src="resources/@flowfuse/nr-assistant/sharedUtils.js"></script>
<script type="module">
    import { ExpertComms } from './resources/@flowfuse/nr-assistant/expertComms.js'

    /* global FFAssistantUtils */ /* loaded from sharedUtils.js */
    /* global RED, $ */ /* loaded from Node-RED core */
    (function (RED, n) {
        'use strict'

        /**
         * @typedef {Object} PromptOptions
         * @property {string} method - The method used for routing the call in the API (e.g. 'function', 'json').
         * @property {string} lang - The language type to be generated (e.g. 'javascript', 'json', 'yaml').
         * @property {string} type - The type of the node.
         * @property {string} [selectedText] - Any selected text. // future feature
         */

        /**
         * @typedef {Object} MethodBodyData
         * @property {string} prompt - The prompt to be sent to the API.
         * @property {string} transactionId - The transaction ID for the request.
         * @property {MethodBodyDataContext} [context] - Context data to accompany the request.
         */
        /**
         * @typedef {Object} MethodBodyDataContext
         * @property {string} [nodeName] - The nodes label
         * @property {string} [type] - The type of the context (e.g. 'function', 'template').
         * @property {string} [subType] - The sub-type of the context (e.g. 'on-start', 'on-message').
         * @property {string} [codeSection] - The code section of the context (alias for sub-type)
         * @property {string} [scope] - The scope of the context (e.g. 'fim' (Fill-in-the-middle), 'inline' (inline codelens), 'node' (generate a node), 'flow' (generate a flow)).
         * @property {Array<string>} [outputs] - The count of outputs the node has (typically only for function nodes)
         * @property {Boolean} [modulesAllowed] - Whether external modules are allowed in the function node
         * @property {Array<{module:string, var:string}>} [modules] - The list of modules setup/available (typically only for function nodes)
         */

        /**
         * @typedef {Object} PromptUIOptions
         * @property {string} title - The title of the FlowFuse Assistant.
         * @property {string} explanation - The explanation of what the FlowFuse Assistant can help with.
         * @property {string} description - A short description of what you want the FlowFuse Assistant to do.
         */

        const AI_TIMEOUT = 90000 // default request timeout in milliseconds
        const FIM_TIMEOUT = 5000 // A default, hard upper bound timeout for FIM inline completions
        const modulesAllowed = RED.settings.functionExternalModules !== false
        const assistantOptions = {
            enabled: false,
            tablesEnabled: false,
            inlineCompletionsEnabled: false,
            requestTimeout: AI_TIMEOUT,
            assistantVersion: null
        }
        let initialisedInterlock = false
        let mcpReadyInterlock = false
        let assistantInitialised = false
        /** @type {ExpertComms} */
        let FFExpertComms = null
        debug('Loading Node-RED Assistant Plugin...')
        const plugin = {
            type: 'assistant',
            name: 'Node-RED Assistant Plugin',
            icon: 'font-awesome/fa-magic',
            onadd: async function () {
                if (!window.FFAssistantUtils) {
                    console.warn('FFAssistantUtils lib is not loaded. Completions might not work as expected.')
                }
                RED.comms.subscribe('nr-assistant/#', (topic, msg) => {
                    debug('comms', topic, msg)
                    if (topic === 'nr-assistant/initialise') {
                        assistantOptions.assistantVersion = msg?.assistantVersion
                        assistantOptions.standalone = !!msg?.standalone
                        assistantOptions.enabled = !!msg?.enabled
                        assistantOptions.requestTimeout = msg?.requestTimeout || AI_TIMEOUT
                        assistantOptions.tablesEnabled = msg?.tablesEnabled === true
                        assistantOptions.inlineCompletionsEnabled = msg?.inlineCompletionsEnabled === true
                        initAssistant(msg)
                    }
                    if (topic === 'nr-assistant/mcp/ready') {
                        if (!mcpReadyInterlock && !!msg?.enabled) {
                            mcpReadyInterlock = true
                            // Complete first time setup
                            debug('assistant MCP initialised')
                            RED.actions.add('flowfuse-nr-assistant:explain-flows', explainSelectedNodes, { label: '@flowfuse/nr-assistant/flowfuse-nr-assistant:explain-flows.action.label' })
                            const menuEntry = {
                                id: 'ff-assistant-explain-flows',
                                icon: 'ff-assistant-menu-icon explain-flows',
                                label: `<span>${plugin._('explain-flows.menu.label')}</span>`,
                                sublabel: plugin._('explain-flows.menu.description'),
                                onselect: 'flowfuse-nr-assistant:explain-flows',
                                shortcutSpan: $('<span class="red-ui-popover-key"></span>'),
                                visible: true
                            }
                            RED.menu.addItem('red-ui-header-button-ff-ai', menuEntry)
                            setMenuShortcutKey('ff-assistant-explain-flows', 'red-ui-workspace', 'ctrl-alt-e', 'flowfuse-nr-assistant:explain-flows')
                        } else if (mcpReadyInterlock) {
                            if (msg?.enabled) {
                                RED.menu.setVisible('ff-assistant-explain-flows', true)
                            } else {
                                RED.menu.setVisible('ff-assistant-explain-flows', false)
                            }
                        }
                    }
                })
            }
        }
        RED.plugins.registerPlugin('flowfuse-nr-assistant', plugin)

        function createAssistantMenu () {
            const toolbarMenuButton = $('<li><a id="red-ui-header-button-ff-ai" class="button" href="#"></a></li>')
            const toolbarMenuButtonAnchor = toolbarMenuButton.find('a')
            const deployButtonLi = $('#red-ui-header-button-deploy').closest('li')
            if (deployButtonLi.length) {
                deployButtonLi.before(toolbarMenuButton) // add the button before the deploy button
            } else {
                toolbarMenuButton.prependTo('.red-ui-header-toolbar') // add the button leftmost of the toolbar
            }
            RED.popover.tooltip(toolbarMenuButtonAnchor, plugin._('name'))

            /* NOTE: For the menu entries icons' property...
               If `.icon` is a URL (e.g. resource/xxx/icon.svg), the RED.menu API will add it as an <img> tag.
               That makes it impossible to set the fill colour of the SVG PATH via a CSS var.
               So, by not specifying an icon URL, an <i> tag with the class set to <icon> will be created by the API
               This permits us to use CSS classes (defined below) that can set the icon and affect the fill colour
            */
            debug('Building FlowFuse Expert menu')

            const ffAssistantMenu = [
                { id: 'ff-assistant-title', label: plugin._('name'), visible: true }, // header
                null // separator
            ]
            RED.menu.init({ id: 'red-ui-header-button-ff-ai', options: ffAssistantMenu })
        }
        function showLoginPrompt () {
            $.ajax({
                contentType: 'application/json',
                url: 'nr-assistant/auth/start',
                method: 'POST',
                data: JSON.stringify({
                    editorURL: window.location.origin + window.location.pathname
                })
            }).then(data => {
                if (data && data.path && data.state) {
                    const handleAuthCallback = function (evt) {
                        debug('handleAuthCallback', evt)
                        try {
                            const message = JSON.parse(evt.data)
                            if (message.code === 'flowfuse-auth-complete') {
                                showNotification('Connected to FlowFuse', { type: 'success' })
                                if (message.state === data.state) {
                                    RED.menu.setVisible('ff-assistant-login', false)
                                    RED.menu.setVisible('ff-assistant-function-builder', true)
                                }
                            } else if (message.code === 'flowfuse-auth-error') {
                                showNotification('Failed to connect to FlowFuse', { type: 'error' })
                                console.warn('Failed to connect to FlowFuse:', message.error)
                            }
                        } catch (err) {}
                        window.removeEventListener('message', handleAuthCallback, false)
                    }
                    window.open(document.location.toString().replace(/[?#].*$/, '') + data.path, 'FlowFuseNodeREDPluginAuthWindow', 'menubar=no,location=no,toolbar=no,chrome,height=650,width=500')
                    window.addEventListener('message', handleAuthCallback, false)
                } else if (data && data.error) {
                    RED.notify(`Failed to connect to server: ${data.error}`, { type: 'error' })
                }
            })
        }

        function initAssistant (options) {
            debug('initialising...', assistantOptions)
            if (!initialisedInterlock) {
                // Initialiise common UI elements
                initialisedInterlock = true
                createAssistantMenu()
                if (assistantOptions.standalone) {
                    RED.menu.addItem('red-ui-header-button-ff-ai', {
                        id: 'ff-assistant-login',
                        label: `<span>${plugin._('login.menu.label')}</span>`,
                        onselect: showLoginPrompt,
                        visible: !assistantOptions.enabled
                    })
                }
                RED.menu.addItem('red-ui-header-button-ff-ai', {
                    id: 'ff-assistant-function-builder',
                    icon: 'ff-assistant-menu-icon function',
                    label: `<span>${plugin._('function-builder.menu.label')}</span>`,
                    sublabel: plugin._('function-builder.menu.description'),
                    onselect: 'flowfuse-nr-assistant:function-builder',
                    shortcutSpan: $('<span class="red-ui-popover-key"></span>'),
                    visible: assistantOptions.enabled
                })
            }

            if (!assistantOptions.enabled) {
                if (assistantOptions.standalone) {
                    RED.menu.setVisible('ff-assistant-login', true)
                }
                RED.menu.setVisible('ff-assistant-function-builder', false)
                console.warn(plugin._('errors.assistant-not-enabled'))
                return
            } else {
                if (assistantOptions.standalone) {
                    RED.menu.setVisible('ff-assistant-login', false)
                }
                RED.menu.setVisible('ff-assistant-function-builder', true)
            }

            if (!assistantInitialised) {
                FFExpertComms = new ExpertComms()
                FFExpertComms.init(RED, assistantOptions)

                registerMonacoExtensions()
                RED.actions.add('flowfuse-nr-assistant:function-builder', showFunctionBuilderPrompt, { label: '@flowfuse/nr-assistant/flowfuse-nr-assistant:function-builder.action.label' })
                setMenuShortcutKey('ff-assistant-function-builder', 'red-ui-workspace', 'ctrl-alt-f', 'flowfuse-nr-assistant:function-builder')
                assistantInitialised = true
            }
        }

        function registerMonacoExtensions () {
            if (!window.monaco) {
                console.warn('Monaco editor not found. Unable to register code lens provider. Consider using the Monaco editor for a better experience.')
                return
            }
            const funcCommandId = 'nr-assistant-fn-inline'
            const jsonCommandId = 'nr-assistant-json-inline'
            const cssCommandId = 'nr-assistant-css-inline'
            const db2uiTemplateCommandId = 'nr-assistant-html-dashboard2-template-inline'
            const ffTablesNodeCommandId = 'nr-assistant-ff-tables-node-inline'

            debug('registering code lens providers...')

            monaco.languages.registerCodeLensProvider('javascript', {
                provideCodeLenses: function (model, token) {
                    if (!assistantOptions.enabled) {
                        return
                    }
                    const thisEditor = getMonacoEditorForModel(model)
                    if (!thisEditor) {
                        return
                    }
                    const node = RED.view.selection()?.nodes?.[0]

                    // only support function nodes for now
                    if (!node || !node.type === 'function') {
                        return
                    }
                    // Only support the "on message" editor for now
                    // determine which editor is active and if it the "on message" editor
                    // if not, return nothing to prevent the code lens from showing
                    let isFuncTabEditor
                    let el = thisEditor.getDomNode()
                    while (el && el.tagName !== 'FORM') {
                        if (el.id === 'node-input-func-editor' || el.id === 'func-tab-body') {
                            isFuncTabEditor = true
                            break
                        }
                        el = el.parentNode
                    }
                    if (!isFuncTabEditor) {
                        return
                    }

                    return {
                        lenses: [
                            {
                                range: {
                                    startLineNumber: 1,
                                    startColumn: 1,
                                    endLineNumber: 2,
                                    endColumn: 1
                                },
                                id: funcCommandId
                            }
                        ],
                        dispose: () => { }
                    }
                },
                resolveCodeLens: function (model, codeLens, token) {
                    if (codeLens.id !== funcCommandId) {
                        return codeLens
                    }
                    codeLens.command = {
                        id: codeLens.id,
                        title: 'Ask the FlowFuse Expert 🪄',
                        tooltip: 'Click to ask FlowFuse Expert for help writing code',
                        arguments: [model, codeLens, token]
                    }
                    return codeLens
                }
            })

            monaco.languages.registerCodeLensProvider('json', {
                provideCodeLenses: function (model, token) {
                    if (!assistantOptions.enabled) {
                        return
                    }
                    const thisEditor = getMonacoEditorForModel(model)
                    if (!thisEditor) {
                        return
                    }
                    return {
                        lenses: [
                            {
                                range: {
                                    startLineNumber: 1,
                                    startColumn: 1,
                                    endLineNumber: 2,
                                    endColumn: 1
                                },
                                id: jsonCommandId
                            }
                        ],
                        dispose: () => { }
                    }
                },
                resolveCodeLens: function (model, codeLens, token) {
                    if (codeLens.id !== jsonCommandId) {
                        return codeLens
                    }
                    codeLens.command = {
                        id: codeLens.id,
                        title: 'Ask the FlowFuse Expert 🪄',
                        tooltip: 'Click to ask FlowFuse Expert for help with JSON',
                        arguments: [model, codeLens, token]
                    }
                    return codeLens
                }
            })

            monaco.languages.registerCodeLensProvider('css', {
                provideCodeLenses: function (model, token) {
                    if (!assistantOptions.enabled) {
                        return
                    }
                    debug('CSS CodeLens provider called', model, token)
                    const thisEditor = getMonacoEditorForModel(model)
                    const node = RED.view.selection()?.nodes?.[0]
                    if (!thisEditor || !node) {
                        return
                    }

                    return {
                        lenses: [
                            {
                                range: {
                                    startLineNumber: 1,
                                    startColumn: 1,
                                    endLineNumber: 2,
                                    endColumn: 1
                                },
                                id: cssCommandId
                            }
                        ],
                        dispose: () => { }
                    }
                },
                resolveCodeLens: function (model, codeLens, token) {
                    debug('CSS CodeLens resolve called', model, codeLens, token)
                    if (codeLens.id !== cssCommandId) {
                        return codeLens
                    }
                    codeLens.command = {
                        id: codeLens.id,
                        title: 'Ask the FlowFuse Expert 🪄',
                        tooltip: 'Click to ask FlowFuse Expert for help with CSS',
                        arguments: [model, codeLens, token]
                    }
                    return codeLens
                }
            })

            monaco.languages.registerCodeLensProvider('html', {
                provideCodeLenses: function (model, token) {
                    if (!assistantOptions.enabled) {
                        return
                    }
                    debug('HTML CodeLens provider called', model, token)
                    const thisEditor = getMonacoEditorForModel(model)
                    if (!thisEditor) {
                        return
                    }
                    const node = RED.view.selection()?.nodes?.[0]
                    // only support dashboard2 ui-template nodes for now
                    if (!node || node.type !== 'ui-template' || node._def?.set?.id !== '@flowfuse/node-red-dashboard/ui-template') {
                        return
                    }
                    return {
                        lenses: [
                            {
                                range: {
                                    startLineNumber: 1,
                                    startColumn: 1,
                                    endLineNumber: 2,
                                    endColumn: 1
                                },
                                id: db2uiTemplateCommandId
                            }
                        ],
                        dispose: () => { }
                    }
                },
                resolveCodeLens: function (model, codeLens, token) {
                    debug('HTML CodeLens resolve called', model, codeLens, token)
                    if (codeLens.id !== db2uiTemplateCommandId) {
                        return codeLens
                    }
                    codeLens.command = {
                        id: codeLens.id,
                        title: 'Ask the FlowFuse Expert 🪄',
                        tooltip: 'Click to ask FlowFuse Expert for help with VUE or HTML',
                        arguments: [model, codeLens, token]
                    }
                    return codeLens
                }
            })

            assistantOptions.tablesEnabled && monaco.languages.registerCodeLensProvider('sql', {
                provideCodeLenses: function (model, token) {
                    if (!assistantOptions.enabled) {
                        return
                    }
                    debug('SQL CodeLens provider called', model, token)
                    const thisEditor = getMonacoEditorForModel(model)
                    if (!thisEditor) {
                        return
                    }
                    const node = RED.view.selection()?.nodes?.[0]
                    // only support tables query nodes for now
                    if (!node || node.type !== 'tables-query' || node._def?.set?.id !== '@flowfuse/nr-tables-nodes/tables-query') {
                        return
                    }
                    return {
                        lenses: [
                            {
                                range: {
                                    startLineNumber: 1,
                                    startColumn: 1,
                                    endLineNumber: 2,
                                    endColumn: 1
                                },
                                id: ffTablesNodeCommandId
                            }
                        ],
                        dispose: () => { }
                    }
                },
                resolveCodeLens: function (model, codeLens, token) {
                    debug('SQL CodeLens resolve called', model, codeLens, token)
                    if (codeLens.id !== ffTablesNodeCommandId) {
                        return codeLens
                    }
                    codeLens.command = {
                        id: codeLens.id,
                        title: 'Ask the FlowFuse Expert 🪄',
                        tooltip: 'Click to ask FlowFuse Expert for help with PostgreSQL',
                        arguments: [model, codeLens, token]
                    }
                    return codeLens
                }
            })

            debug('registering commands...')

            monaco.editor.registerCommand(funcCommandId, function (accessor, model, codeLens, token) {
                debug('running command', funcCommandId)
                const node = RED.view.selection()?.nodes?.[0]
                if (!node) {
                    console.warn('No node selected') // should not happen
                    return
                }
                if (!assistantOptions.enabled) {
                    RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                    return
                }
                const thisEditor = getMonacoEditorForModel(model)
                if (thisEditor) {
                    if (!document.body.contains(thisEditor.getDomNode())) {
                        console.warn('Editor is no longer in the DOM, cannot proceed.')
                        return
                    }

                    const subType = getFunctionNodeEditorCodeSection(thisEditor)
                    /** @type {PromptOptions} */
                    const promptOptions = {
                        method: 'function',
                        lang: 'javascript',
                        type: 'function',
                        subType,
                        codeSection: subType
                    }
                    /** @type {PromptUIOptions} */
                    const uiOptions = {
                        title: 'FlowFuse Expert : Function Code',
                        explanation: 'The FlowFuse Expert can help you write JavaScript code.',
                        description: 'Enter a short description of what you want it to do.'
                    }
                    doPrompt(node, thisEditor, promptOptions, uiOptions, (error, response) => {
                        if (error) {
                            console.warn('Error processing request', error)
                            return
                        }
                        debug('function response', response)
                        const responseData = response?.data
                        if (responseData?.func?.length > 0) {
                            // ensure the editor is still present in the DOM
                            if (!document.body.contains(thisEditor.getDomNode())) {
                                console.warn('Editor is no longer in the DOM')
                                return
                            }
                            thisEditor.focus()
                            // insert the generated code at the current cursor position overwriting any selected text
                            const currentSelection = thisEditor.getSelection()
                            thisEditor.executeEdits('', [
                                {
                                    range: new monaco.Range(currentSelection.startLineNumber, currentSelection.startColumn, currentSelection.endLineNumber, currentSelection.endColumn),
                                    text: responseData.func
                                }
                            ])
                            // update the nodes output count the AI suggests a different number of outputs
                            if (typeof responseData?.outputs === 'number' && responseData.outputs >= 0) {
                                const outputsField = $('#node-input-outputs')
                                const currentOutputs = parseInt(outputsField.val())
                                if (!isNaN(currentOutputs) && typeof currentOutputs === 'number' && currentOutputs !== responseData.outputs) {
                                    outputsField.val(responseData.outputs)
                                    outputsField.trigger('change')
                                }
                            }

                            // update libs - get the current list of libs then scan the response for any new ones
                            // if the lib is not already in the list, add it
                            if (modulesAllowed) {
                                if (Array.isArray(responseData?.node_modules) && responseData.node_modules.length > 0) {
                                    const currentModulesInSetup = getFunctionNodeModules()
                                    responseData.node_modules.forEach((lib) => {
                                        const existing = currentModulesInSetup.find(l => l.module === lib.module)
                                        if (!existing) {
                                            $('#node-input-libs-container').editableList('addItem', { var: lib.var, module: lib.module })
                                        }
                                    })
                                }
                            }
                        }
                    })
                } else {
                    console.warn('Could not find editor for model', model.uri.toString())
                }
            })

            monaco.editor.registerCommand(jsonCommandId, function (accessor, model, codeLens, token) {
                debug('running command', jsonCommandId)
                const node = RED.view.selection()?.nodes?.[0]
                if (!node) {
                    console.warn('No node selected') // should not happen
                    return
                }
                if (!assistantOptions.enabled) {
                    RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                    return
                }
                const thisEditor = getMonacoEditorForModel(model)
                if (thisEditor) {
                    if (!document.body.contains(thisEditor.getDomNode())) {
                        console.warn('Editor is no longer in the DOM, cannot proceed.')
                        return
                    }

                    // FUTURE: for including selected text in the context for features like "fix my code", "refactor this", "what is this?" etc
                    // const userSelection = triggeredEditor.getSelection()
                    // const selectedText = model.getValueInRange(userSelection)
                    /** @type {PromptOptions} */
                    const promptOptions = {
                        method: 'json',
                        lang: 'json',
                        type: node.type
                        // selectedText: model.getValueInRange(userSelection)
                    }
                    /** @type {PromptUIOptions} */
                    const uiOptions = {
                        title: 'FlowFuse Expert : JSON',
                        explanation: 'The FlowFuse Expert can help you write JSON.',
                        description: 'Enter a short description of what you want it to do.'
                    }
                    doPrompt(node, thisEditor, promptOptions, uiOptions, (error, response) => {
                        if (error) {
                            console.warn('Error processing request', error)
                            return
                        }
                        debug('json response', response)
                        const responseData = response?.data
                        if (responseData && responseData.json) {
                            // ensure the editor is still present in the DOM
                            if (!document.body.contains(thisEditor.getDomNode())) {
                                console.warn('Editor is no longer in the DOM')
                                return
                            }
                            thisEditor.focus()
                            const currentSelection = thisEditor.getSelection()
                            thisEditor.executeEdits('', [
                                {
                                    range: new monaco.Range(currentSelection.startLineNumber, currentSelection.startColumn, currentSelection.endLineNumber, currentSelection.endColumn),
                                    text: responseData.json
                                }
                            ])
                        }
                    })
                } else {
                    console.warn('Could not find editor for model', model.uri.toString())
                }
            })

            monaco.editor.registerCommand(cssCommandId, function (accessor, model, codeLens, token) {
                debug('running command', cssCommandId)
                const node = RED.view.selection()?.nodes?.[0]
                if (!node) {
                    console.warn('No node selected') // should not happen
                    return
                }
                if (!assistantOptions.enabled) {
                    RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                    return
                }
                const thisEditor = getMonacoEditorForModel(model)
                if (thisEditor) {
                    if (!document.body.contains(thisEditor.getDomNode())) {
                        console.warn('Editor is no longer in the DOM, cannot proceed.')
                        return
                    }

                    // FUTURE: for including selected text in the context for features like "fix my code", "refactor this", "what is this?" etc
                    // const userSelection = triggeredEditor.getSelection()
                    // const selectedText = model.getValueInRange(userSelection)
                    /** @type {PromptOptions} */
                    const promptOptions = {
                        method: 'css',
                        lang: 'css',
                        type: node.type
                        // selectedText: model.getValueInRange(userSelection)
                    }
                    /** @type {PromptUIOptions} */
                    const uiOptions = {
                        title: 'FlowFuse Expert : CSS',
                        explanation: 'The FlowFuse Expert can help you write CSS.',
                        description: 'Enter a short description of what you want it to do.'
                    }
                    doPrompt(node, thisEditor, promptOptions, uiOptions, (error, response) => {
                        if (error) {
                            console.warn('Error processing request', error)
                            return
                        }
                        debug('css response', response)
                        const responseData = response?.data
                        if (responseData && responseData.css) {
                            // ensure the editor is still present in the DOM
                            if (!document.body.contains(thisEditor.getDomNode())) {
                                console.warn('Editor is no longer in the DOM')
                                return
                            }
                            thisEditor.focus()
                            const currentSelection = thisEditor.getSelection()
                            thisEditor.executeEdits('', [
                                {
                                    range: new monaco.Range(currentSelection.startLineNumber, currentSelection.startColumn, currentSelection.endLineNumber, currentSelection.endColumn),
                                    text: responseData.css
                                }
                            ])
                        }
                    })
                } else {
                    console.warn('Could not find editor for model', model.uri.toString())
                }
            })

            monaco.editor.registerCommand(db2uiTemplateCommandId, function (accessor, model, codeLens, token) {
                debug('running command', db2uiTemplateCommandId)
                const node = RED.view.selection()?.nodes?.[0]
                if (!node) {
                    console.warn('No node selected') // should not happen
                    return
                }
                if (!assistantOptions.enabled) {
                    RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                    return
                }
                const thisEditor = getMonacoEditorForModel(model)
                if (thisEditor) {
                    if (!document.body.contains(thisEditor.getDomNode())) {
                        console.warn('Editor is no longer in the DOM, cannot proceed.')
                        return
                    }

                    // FUTURE: for including selected text in the context for features like "fix my code", "refactor this", "what is this?" etc
                    // const userSelection = triggeredEditor.getSelection()
                    // const selectedText = model.getValueInRange(userSelection)
                    /** @type {PromptOptions} */
                    const promptOptions = {
                        method: 'dashboard2-template',
                        lang: 'html',
                        type: node.type
                        // selectedText: model.getValueInRange(userSelection)
                    }
                    /** @type {PromptUIOptions} */
                    const uiOptions = {
                        title: 'FlowFuse Expert : Dashboard 2 UI Template',
                        explanation: 'The FlowFuse Expert can help you write HTML, VUE and JavaScript.',
                        description: 'Enter a short description of what you want it to do.'
                    }
                    doPrompt(node, thisEditor, promptOptions, uiOptions, (error, response) => {
                        if (error) {
                            console.warn('Error processing request', error)
                            return
                        }
                        debug('html response', response)
                        const responseData = response?.data
                        if (responseData && responseData.html) {
                            // ensure the editor is still present in the DOM
                            if (!document.body.contains(thisEditor.getDomNode())) {
                                console.warn('Editor is no longer in the DOM')
                                return
                            }
                            thisEditor.focus()
                            const currentSelection = thisEditor.getSelection()
                            thisEditor.executeEdits('', [
                                {
                                    range: new monaco.Range(currentSelection.startLineNumber, currentSelection.startColumn, currentSelection.endLineNumber, currentSelection.endColumn),
                                    text: responseData.html
                                }
                            ])
                        }
                    })
                } else {
                    console.warn('Could not find editor for model', model.uri.toString())
                }
            })

            assistantOptions.tablesEnabled && monaco.editor.registerCommand(ffTablesNodeCommandId, function (accessor, model, codeLens, token) {
                debug('running command', ffTablesNodeCommandId)
                const node = RED.view.selection()?.nodes?.[0]
                if (!node) {
                    console.warn('No node selected') // should not happen
                    return
                }
                if (!assistantOptions.enabled) {
                    RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                    return
                }
                const thisEditor = getMonacoEditorForModel(model)
                if (thisEditor) {
                    if (!document.body.contains(thisEditor.getDomNode())) {
                        console.warn('Editor is no longer in the DOM, cannot proceed.')
                        return
                    }

                    // FUTURE: for including selected text in the context for features like "fix my code", "refactor this", "what is this?" etc
                    // const userSelection = triggeredEditor.getSelection()
                    // const selectedText = model.getValueInRange(userSelection)
                    /** @type {PromptOptions} */
                    const promptOptions = {
                        method: 'flowfuse-tables-query',
                        lang: 'sql',
                        dialect: 'postgres',
                        type: node.type
                        // selectedText: model.getValueInRange(userSelection)
                    }
                    /** @type {PromptUIOptions} */
                    const uiOptions = {
                        title: 'FlowFuse Expert : FlowFuse Query',
                        explanation: 'The FlowFuse Expert can help you write SQL queries.',
                        description: 'Enter a short description of what you want it to do.'
                    }
                    doPrompt(node, thisEditor, promptOptions, uiOptions, (error, response) => {
                        if (error) {
                            console.warn('Error processing request', error)
                            return
                        }
                        debug('sql response', response)
                        const responseData = response?.data
                        if (responseData && responseData.sql) {
                            // ensure the editor is still present in the DOM
                            if (!document.body.contains(thisEditor.getDomNode())) {
                                console.warn('Editor is no longer in the DOM')
                                return
                            }
                            thisEditor.focus()
                            const currentSelection = thisEditor.getSelection()
                            thisEditor.executeEdits('', [
                                {
                                    range: new monaco.Range(currentSelection.startLineNumber, currentSelection.startColumn, currentSelection.endLineNumber, currentSelection.endColumn),
                                    text: responseData.sql
                                }
                            ])
                        }
                    })
                } else {
                    console.warn('Could not find editor for model', model.uri.toString())
                }
            })

            debug('registering inline completions')

            if (assistantOptions.inlineCompletionsEnabled) {
                const stateByLanguage = {}
                const supportedInlineCompletions = [
                    {
                        languageId: 'javascript',
                        nodeType: 'function',
                        nodeModule: 'node-red'
                    },
                    {
                        languageId: 'css',
                        nodeType: 'ui-template',
                        nodeModule: '@flowfuse/node-red-dashboard'
                    },
                    {
                        languageId: 'html',
                        nodeType: 'ui-template',
                        nodeModule: '@flowfuse/node-red-dashboard'
                    },
                    {
                        languageId: 'sql',
                        nodeType: 'tables-query',
                        nodeModule: '@flowfuse/nr-tables-nodes'
                    }
                ]
                const getState = (languageId) => {
                    if (!stateByLanguage[languageId]) {
                        stateByLanguage[languageId] = {
                            MAX_FIFO_SIZE: 1, // MVP - only 1 suggestion is supported
                            suggestions: [],
                            lastSuggestion: null,
                            inflightRequest: null
                        }
                    }
                    return stateByLanguage[languageId]
                }

                const getContext = (node, editor, position) => {
                    const model = editor.getModel()
                    /** @type {MethodBodyDataContext} */
                    const context = {
                        scope: 'fim',
                        languageId: model.getLanguageIdAtPosition(position.lineNumber, position.column),
                        nodeName: node.name || node.type,
                        nodeType: node.type,
                        nodeModule: node._def?.set?.module || 'node-red'
                    }

                    context.outputs = +(node.outputs || 1)
                    if (isNaN(context.outputs) || context.outputs < 1) {
                        context.outputs = 1
                    }
                    if (node.type === 'function') {
                        context.subType = getFunctionNodeEditorCodeSection(editor)
                        context.codeSection = context.subType
                        context.modulesAllowed = modulesAllowed
                        context.modules = modulesAllowed ? getFunctionNodeModules() : []
                    }
                    if (node.type === 'tables-query') {
                        context.dialect = 'postgres'
                    }
                    return context
                }

                // ---------------- Language Strategies ----------------
                const languageStrategies = {
                    javascript: {
                        adjustIndentation (model, position, suggestionText) {
                            const currentIndent = model.getLineContent(position.lineNumber).match(/^\s*/)?.[0] ?? ''
                            return suggestionText.split('\n').map((line, idx) =>
                                idx === 0 ? line : currentIndent + line.trimEnd()
                            ).join('\n')
                        }
                    },
                    css: {
                        adjustIndentation (model, position, suggestionText) {
                            const currentIndent = model.getLineContent(position.lineNumber).match(/^\s*/)?.[0] ?? ''
                            return suggestionText.split('\n').map((line, idx) =>
                                idx === 0 ? line : currentIndent + line.trimEnd()
                            ).join('\n')
                        }
                    },
                    html: {
                        adjustIndentation (model, position, suggestionText) {
                            const lineContent = model.getLineContent(position.lineNumber).trim()
                            const currentIndent = model.getLineContent(position.lineNumber).match(/^\s*/)?.[0] ?? ''
                            const extraIndent =
                                lineContent.endsWith('>') && !lineContent.endsWith('/>')
                                    ? '  '
                                    : ''
                            return suggestionText.split('\n').map((line, idx) =>
                                idx === 0 ? line : currentIndent + extraIndent + line.trimEnd()
                            ).join('\n')
                        }
                    },
                    sql: {
                        adjustIndentation (_model, _position, suggestionText) {
                            // SQL: flat, no indent
                            return suggestionText.split('\n').map((l) => l.trim()).join('\n')
                        }
                    }
                }

                // #region "Inline Completion Helper Functions"
                const computeInlineCompletionRange = (model, position, suggestionText) => {
                    const lineContent = model.getLineContent(position.lineNumber)

                    // Text before and after the cursor
                    const beforeCursor = lineContent.substring(0, position.column - 1)
                    const afterCursor = lineContent.substring(position.column - 1)

                    // 1. Backward overlap (user already typed some of the suggestion)
                    let backOverlap = 0
                    for (let i = 0; i < suggestionText.length; i++) {
                        if (beforeCursor.endsWith(suggestionText.substring(0, i + 1))) {
                            backOverlap = i + 1
                        }
                    }

                    // 2. Forward overlap (document already contains trailing part of suggestion)
                    let forwardOverlap = 0
                    const firstNewline = suggestionText.indexOf('\n')
                    const suggestionEnd = firstNewline === -1 ? suggestionText : suggestionText.substring(0, firstNewline)

                    for (let i = 0; i < suggestionEnd.length; i++) {
                        if (afterCursor.startsWith(suggestionEnd.substring(suggestionEnd.length - (i + 1)))) {
                            forwardOverlap = i + 1
                        }
                    }

                    return new monaco.Range(
                        position.lineNumber,
                        position.column - backOverlap,
                        position.lineNumber,
                        position.column + forwardOverlap
                    )
                }

                const trimDuplicates = (model, position, suggestionText) => {
                    // Grab a small lookahead (e.g. next 3 lines of code after cursor)
                    const lookaheadLines = Math.min(position.lineNumber + 3, model.getLineCount())
                    const lookahead = model.getValueInRange({
                        startLineNumber: position.lineNumber,
                        startColumn: 1,
                        endLineNumber: lookaheadLines,
                        endColumn: model.getLineMaxColumn(lookaheadLines)
                    })
                    const lookaheadNormalized = lookahead.trimStart()
                    let trimmed = suggestionText.trimEnd()

                    // Simple heuristic: if suggestion ends with same text as lookahead, drop it
                    if (lookaheadNormalized.startsWith(trimmed.split('\n').slice(-1)[0])) {
                        debug('Trimming duplicate text from suggestion (end matches lookahead)', { lookaheadNormalized, suggestionText })
                        const lines = trimmed.split('\n')
                        lines.pop() // remove the duplicate trailing line
                        trimmed = lines.join('\n')
                    }

                    return trimmed
                }
                // #endregion "Inline Completion Helper Functions"

                // --------------- Fetch Wrapper ----------------
                const fetchAICompletion = (options, node, editor, model, position, resolve) => {
                    const state = getState(options.languageId)

                    // inhibit new request if one is already running
                    if (state.inflightRequest) {
                        debug('Skipping FIM request, one already in-flight')
                        return
                    }

                    const fullRange = model.getFullModelRange()

                    const fimPrefix = model.getValueInRange({
                        startLineNumber: 1,
                        startColumn: 1,
                        endLineNumber: position.lineNumber,
                        endColumn: position.column
                    })
                    const fimSuffix = model.getValueInRange({
                        startLineNumber: position.lineNumber,
                        startColumn: position.column,
                        endLineNumber: fullRange.endLineNumber,
                        endColumn: fullRange.endColumn
                    })

                    /** @type {MethodBodyData} */
                    const data = {
                        prompt: `${fimPrefix}<|fim_completion|>${fimSuffix}`,
                        transactionId: generateId(8) + '-' + Date.now(),
                        context: getContext(node, editor, position)
                    }

                    const req = $.ajax({
                        url: `nr-assistant/fim/${encodeURIComponent(options.nodeModule)}/${encodeURIComponent(options.nodeType)}`,
                        type: 'POST',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        timeout: FIM_TIMEOUT
                    })

                    state.inflightRequest = req

                    req.then((res) => {
                        const responseData = res?.data?.data
                        if (!responseData?.fim_completion) return

                        // before accessing the model or doing any further processing, lets check that the
                        // editor/model are still in dom/un-disposed. This can happen when the user closes
                        // the node edit panel while a request is in flight
                        if (!model || model.isDisposed()) {
                            debug('Skipping FIM response processing: Model has been disposed')
                            return
                        }
                        const { editor: checkEditor } = getEditorAndNode(model)
                        if (!checkEditor) {
                            debug('Skipping FIM response processing: Editor has been disposed')
                            return
                        }

                        const strategy = languageStrategies[options.languageId] || languageStrategies.javascript
                        let aiText = strategy.adjustIndentation(model, position, responseData.fim_completion)
                        aiText = trimDuplicates(model, position, aiText)

                        const completionRange = computeInlineCompletionRange(model, position, aiText)
                        const suggestion = {
                            insertText: aiText,
                            range: completionRange,
                            meta: { fimPrefix, fimSuffix }
                        }

                        const currentPrefix = model.getValueInRange({
                            startLineNumber: 1,
                            startColumn: 1,
                            endLineNumber: position.lineNumber,
                            endColumn: position.column
                        })

                        const typedSinceRequest = currentPrefix.slice(fimPrefix.length)
                        if (aiText.startsWith(typedSinceRequest)) {
                            state.suggestions.unshift(suggestion)
                            if (state.suggestions.length > state.MAX_FIFO_SIZE) {
                                state.suggestions.pop()
                            }

                            state.lastSuggestion = {
                                fullText: aiText,
                                typedSoFar: typedSinceRequest,
                                startLine: position.lineNumber,
                                startColumn: position.column
                            }

                            resolve({ items: [suggestion] })
                        }
                    })
                        .fail((_xhr, textStatus, errorThrown) => {
                            // completions can fail for many reasons but it is not necessary to log it
                            // to the console just carry on regardless. However, for debugging purposes
                            // you can set flag RED.nrAssistant = { DEBUG: true } in the console
                            debug('FIM AI request failed: ' + textStatus, errorThrown)
                        })
                        .always(() => {
                            state.inflightRequest = null
                        })
                }

                // ---------------- Provider Factory ----------------
                const registerAIInlineCompletions = (options) => {
                    const { languageId, nodeType, nodeModule } = options
                    debug('Registering inline completions for', { languageId, nodeType, nodeModule })
                    monaco.languages.registerInlineCompletionsProvider(languageId, {
                        provideInlineCompletions: (model, position, context, token) =>
                            new Promise((resolve) => {
                                debug('provideInlineCompletions: handling inline completion for languageId ' + languageId, position, context, token)
                                if (!assistantOptions.enabled) {
                                    return
                                }
                                // prep - get the editor and node, exit if not found or not supported
                                const { editor, node } = getEditorAndNode(model)
                                if (!editor || !node) { return }
                                if (node.type !== nodeType) { return }
                                if (!node || node.type !== nodeType || node._def?.set?.module !== nodeModule) {
                                    debug('Node type does not support inline completions. Type:', node?.type, 'def:', node?._def?.set?.id, 'expected def:', `${nodeModule}/${nodeType}`)
                                    return
                                }
                                if (isInsideComment(model, position)) {
                                    debug('Skipping AI completion: cursor is inside a comment')
                                    return resolve({ items: [] })
                                }

                                const state = getState(languageId)

                                if (
                                    context.triggerKind === monaco.languages.InlineCompletionTriggerKind.Automatic &&
                                    context.selectedSuggestionInfo
                                ) {
                                    debug('User just accepted a suggestion, skipping this event')
                                    return
                                }

                                if (context.triggerKind === monaco.languages.InlineCompletionTriggerKind.Automatic) {
                                    // see if the full code now matches the prefix+suggestion+suffix, if yes, then it has just been accepted.
                                    const suggestion = state.suggestions[0]
                                    if (suggestion && (suggestion.meta.fimPrefix + suggestion.insertText + suggestion.meta.fimSuffix) === model.getValue()) {
                                        debug('Alt User just accepted a suggestion, skipping this event')
                                        resolve({ items: [] })
                                        return
                                    }
                                }

                                // reuse last suggestion if possible
                                if (state.lastSuggestion?.fullText) {
                                    const prefix = model.getValueInRange({
                                        startLineNumber: state.lastSuggestion.startLine,
                                        startColumn: state.lastSuggestion.startColumn,
                                        endLineNumber: position.lineNumber,
                                        endColumn: position.column
                                    })

                                    if (state.lastSuggestion.fullText.startsWith(prefix)) {
                                        state.lastSuggestion.typedSoFar = prefix
                                        const remaining = state.lastSuggestion.fullText.slice(prefix.length)
                                        if (remaining) {
                                            resolve({
                                                items: [{
                                                    range: new monaco.Range(
                                                        position.lineNumber,
                                                        position.column,
                                                        position.lineNumber,
                                                        position.column
                                                    ),
                                                    insertText: remaining
                                                }]
                                            })
                                            return
                                        }
                                    }
                                }

                                fetchAICompletion(
                                    options,
                                    node,
                                    editor,
                                    model,
                                    position,
                                    resolve
                                )
                            }),
                        freeInlineCompletions (completions) {
                            getState(languageId).lastSuggestion = null
                        }
                    })
                }
                supportedInlineCompletions.forEach(options => registerAIInlineCompletions(options))
            }
        }
        const previousPrompts = {}

        /**
         * Prompts the user for input and sends the input to the AI for processing
         * @param {import('node-red').Node} node - The node to associate the prompt with
         * @param {import('monaco-editor').editor.IStandaloneCodeEditor} editor - The editor to associate the prompt with
         * @param {PromptOptions} promptOptions - The options to pass to the prompt
         * @param {PromptUIOptions} [uiOptions] - The options to pass to the prompt
         * @param {(error, response) => {}} callback - The callback function to call when the prompt is complete
         * @returns {void}
         */
        function doPrompt (node, editor, promptOptions, uiOptions, callback) {
            const thisEditor = editor
            let xhr = null
            if (!node || !thisEditor) {
                console.warn('No node or editor found')
                callback(null, null)
            }
            const modulesAllowed = RED.settings.functionExternalModules !== false
            promptOptions = promptOptions || {}

            const nodeId = node.id
            const transactionId = `${nodeId}-${Date.now()}` // a unique id for this transaction
            const prevPromptKey = `${promptOptions?.method}-${promptOptions?.subType || 'default'}`
            const defaultInput = Object.prototype.hasOwnProperty.call(uiOptions, 'defaultInput') ? uiOptions.defaultInput : previousPrompts[prevPromptKey] || ''
            debug('doPrompt', promptOptions, uiOptions)
            getUserInput({
                defaultInput: defaultInput || '',
                title: uiOptions?.title || plugin._('name'),
                explanation: uiOptions?.explanation || plugin._('name') + ' can help you write code.',
                description: uiOptions?.description || 'Enter a short description of what you want it to do.'
            }).then((prompt) => {
                if (!prompt) {
                    callback(null, null)
                }
                previousPrompts[prevPromptKey] = prompt
                const data = {
                    prompt,
                    transactionId,
                    context: {
                        type: promptOptions.type,
                        subType: promptOptions.subType,
                        scope: 'inline', // inline denotes that the prompt is for a inline codelens action (i.e. the monaco editor)
                        modulesAllowed,
                        codeSection: promptOptions.subType
                        // selection: selectedText // FUTURE: include the selected text in the context for features like "fix my code", "refactor this", "what is this?" etc
                    }
                }
                const busyNotification = showBusyNotification(plugin._('notifications.busy'), function () {
                    if (xhr) {
                        xhr.abort('abort')
                        xhr = null
                    }
                })
                xhr = $.ajax({
                    url: 'nr-assistant/' + (promptOptions.method || promptOptions.lang), // e.g. 'nr-assistant/json'
                    type: 'POST',
                    data,
                    success: function (reply, textStatus, jqXHR) {
                        debug('doPrompt -> ajax -> success', reply)
                        if (reply?.error) {
                            RED.notify(reply.error, 'error')
                            callback(new Error(reply.error), null)
                            return
                        }
                        if (reply?.data?.transactionId !== transactionId) {
                            callback(new Error('Transaction ID mismatch'), null)
                            return
                        }
                        callback(null, reply?.data)
                    },
                    error: (jqXHR, textStatus, errorThrown) => {
                        debug('doPrompt -> ajax -> error', jqXHR, textStatus, errorThrown)
                        if (textStatus === 'abort' || errorThrown === 'abort' || jqXHR.statusText === 'abort') {
                            // user cancelled
                            callback(null, null)
                            return
                        }
                        processAIErrorResponse(jqXHR, textStatus, errorThrown)
                        callback(new Error('Error processing request'), null)
                    },
                    complete: function () {
                        xhr = null
                        busyNotification.close()
                    }
                })
            })
        }

        function getUserInput ({ title, explanation, description, placeholder, defaultInput } = {
            title: plugin._('name'),
            explanation: 'The FlowFuse Expert can help you create things.',
            description: 'Enter a short description explaining what you want it to do.',
            placeholder: '',
            defaultInput: ''
        }) {
            const bodyText = []
            if (explanation) {
                bodyText.push(`<p style="">${explanation}</p>`)
            }
            if (description) {
                bodyText.push(`<p>${description}</p>`)
            }
            const body = bodyText.join('')
            return new Promise((resolve, reject) => {
                const dialog = $('<div id="ff-nr-ai-dialog-input" class="hide red-ui-editor"></div>')
                const containerDiv = $('<div style="height: 100%;display: flex;flex-direction: column; height: calc(100% - 12px);">')
                if (body) {
                    containerDiv.append('<div style="margin-bottom: 8px; margin-top: -10px">' + body + '</div>')
                }
                const form = $('<form id="ff-nr-ai-dialog-input-fields" style="flex-grow: 1; margin-bottom: 6px;"></form>')
                const input = $('<textarea id="ff-nr-ai-dialog-input-editor" style="height:100%;width:100%; position:relative; resize: none;" maxlength="400" placeholder="' + (placeholder || '') + '">' + (defaultInput || '') + '</textarea>')
                form.append(input)
                containerDiv.append(form)
                dialog.append(containerDiv)
                const minHeight = 260 + (description ? 32 : 0) + (explanation ? 32 : 0)
                const minWidth = 480
                const dialogControl = dialog.dialog({
                    title: title || plugin._('name'),
                    modal: true,
                    closeOnEscape: true,
                    height: minHeight,
                    width: minWidth,
                    minHeight,
                    minWidth,
                    resizable: true,
                    draggable: true,
                    show: { effect: 'fade', duration: 300 },
                    hide: { effect: 'fade', duration: 300 },
                    open: function (event, ui) {
                        RED.keyboard.disable()
                        input.focus()
                        input.select()
                    },
                    close: function (event, ui) {
                        RED.keyboard.enable()
                        dialogControl.remove()
                    },
                    buttons: [
                        {
                            text: 'Ask the FlowFuse Expert 🪄',
                            // class: 'primary',
                            click: function () {
                                const prompt = dialog.find('#ff-nr-ai-dialog-input-editor').val()
                                resolve(prompt)
                                $(this).dialog('close')
                            }
                        }
                    ],
                    cancel: function (event, ui) {
                        resolve(null)
                        $(this).dialog('close')
                    }
                })
            })
        }

        let previousFunctionBuilderPrompt
        function showFunctionBuilderPrompt (title) {
            if (!assistantOptions.enabled) {
                RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                return
            }
            getUserInput({
                defaultInput: previousFunctionBuilderPrompt,
                title: title || 'FlowFuse Expert : Create A Function Node',
                explanation: plugin._('function-builder.dialog-input.explanation'),
                description: plugin._('function-builder.dialog-input.description')
            }).then((prompt) => {
                /** @type {JQueryXHR} */
                let xhr = null
                if (prompt) {
                    previousFunctionBuilderPrompt = prompt
                    const url = 'nr-assistant/function'
                    const transactionId = generateId(8) + '-' + Date.now() // a unique id for this transaction
                    const body = {
                        prompt,
                        transactionId,
                        context: {
                            scope: 'node', // "node" denotes that the prompt is for a generating a function node (as importable JSON flow code)
                            modulesAllowed
                        }
                    }
                    const busyNotification = showBusyNotification(plugin._('notifications.busy'), function () {
                        if (xhr) {
                            xhr.abort('abort')
                            xhr = null
                        }
                    })
                    xhr = $.ajax({
                        url,
                        type: 'POST',
                        data: body,
                        timeout: assistantOptions.requestTimeout,
                        success: (reply, textStatus, jqXHR) => {
                            // console.log('showFunctionBuilderPrompt -> ajax -> success', reply)
                            busyNotification.close()
                            try {
                                const flowJson = typeof reply?.data?.flow === 'string' ? JSON.parse(reply.data.flow) : reply?.data?.flow
                                if (flowJson && Array.isArray(flowJson) && flowJson.length > 0) {
                                    importFlow(flowJson)
                                } else {
                                    processAIErrorResponse(jqXHR, textStatus, 'No data in response from server')
                                }
                            } catch (error) {
                                RED.notify('Sorry, something went wrong, please try again', 'error')
                            }
                        },
                        error: (jqXHR, textStatus, errorThrown) => {
                            // console.log('showFunctionBuilderPrompt -> ajax -> error', jqXHR, textStatus, errorThrown)
                            busyNotification.close()
                            if (textStatus === 'abort' || errorThrown === 'abort' || jqXHR.statusText === 'abort') {
                                // user cancelled
                                return
                            }
                            processAIErrorResponse(jqXHR, textStatus, errorThrown)
                        }
                    })
                }
            })
        }

        /**
         * Show a dialog with the given title and content.
         * * NOTE: Only basic sanitization is performed. Call RED.utils.renderMarkdown or RED.utils.sanitize before passing it in.
         * @param {string} title - The title of the dialog
         * @param {string} content - The content of the dialog, can be HTML
         * @param {'text'|'html'} [renderMode='text'] - Whether the content is HTML or plain text.
         * @param {object} [options] - jQuery UI Options for the dialog
         */
        function showMessage (title, content, renderMode = 'text', options = {}) {
            const window70vw = $(window).width() * 0.70 // 70% of viewport width
            const window70vh = $(window).height() * 0.70 // 70% of viewport height

            // super basic sanitisation for xss in content
            if (typeof content !== 'string' || content.length === 0) {
                console.warn('Content must be a string')
                return
            } else if (renderMode === 'html' && (content.includes('<script>') || content.includes('<' + '/script>'))) {
                content = content.replace(/<script>/g, '```\n').replace(/<\/script>/g, '```') // basic sanitization
            }

            // First some basic sizing calculations to ensure the dialog is not too small/large
            let initialMaxWidth = $('#red-ui-notifications').width() || 500 // start off with 500px as the initial maxWidth
            if (content.length > 3000) {
                initialMaxWidth = 1000
            } else if (content.length > 2000) {
                initialMaxWidth = 850
            } else if (content.length > 1500) {
                initialMaxWidth = 700
            } else if (content.length > 750) {
                initialMaxWidth = 600
            }

            // Now render the content as HTML so later we can gauge its size and dynamically adjust to keep it reasonable
            const $dialog = $('<div>')
            $dialog.css({
                overflow: 'auto',
                height: 'auto',
                width: 'auto',
                minHeight: 200,
                maxHeight: window70vh,
                minWidth: window.innerWidth > 500 ? 500 : initialMaxWidth < window70vw ? initialMaxWidth : window70vw, // minimum width of 500px if possible
                maxWidth: initialMaxWidth,
                display: 'none' // initially hidden
            })
            if (renderMode === 'html') {
                $dialog.html(content) // render as HTML
            } else {
                $dialog.text(content) // render as plain text
            }
            $dialog.appendTo('body')

            const initialWidth = $dialog.width()
            const width = initialWidth > window70vw ? window70vw : initialWidth
            const initialHeight = $dialog.height() + 40 // +40 for padding/grace etc
            const height = initialHeight > window70vh ? window70vh : initialHeight

            // now remove the divs min/max so that it sizes to the maximum size of the jquery dialog
            $dialog.css({ maxWidth: '', minWidth: '', maxHeight: '', minHeight: '' })

            // set the default dialog options
            const defaultOptions = {
                title: title || plugin._('name'),
                modal: true,
                resizable: true,
                width,
                height,
                dialogClass: 'ff-nr-ai-dialog-message',
                closeOnEscape: true,
                draggable: true,
                minHeight: 280,
                minWidth: window.innerWidth > 600 ? 600 : window.innerWidth, // minimum width of 500px if possible
                show: { effect: 'fade', duration: 300 },
                hide: { effect: 'fade', duration: 300 },
                open: function () {
                    RED.keyboard.disable()
                },
                close: function () {
                    RED.keyboard.enable()
                    $(this).dialog('destroy').remove() // clean up
                }
            }

            // create the dialog with any additional options passed in & return it for later programmatic control
            return $dialog.dialog($.extend({}, defaultOptions, options))
        }

        function explainSelectedNodes () {
            if (!assistantOptions.enabled) {
                RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                return
            }
            const selection = RED.view.selection()
            if (!selection || !selection.nodes || selection.nodes.length === 0) {
                RED.notify(plugin._('explain-flows.errors.no-nodes-selected'), 'warning')
                return
            }

            const { flow: nodes, nodeCount: totalNodeCount } = FFAssistantUtils.cleanFlow(selection.nodes)

            if (totalNodeCount > 100) { // TODO: increase or make configurable
                RED.notify(plugin._('explain-flows.errors.too-many-nodes-selected'), 'warning')
                return
            }

            /** @type {JQueryXHR} */
            let xhr = null
            const url = 'nr-assistant/mcp/prompts/explain_flow' // e.g. 'nr-assistant/json'
            const transactionId = generateId(8) + '-' + Date.now() // a unique id for this transaction
            const data = {
                transactionId,
                nodes: JSON.stringify(nodes),
                flowName: '', // FUTURE: include the parent flow name in the context to aid with the explanation
                userContext: '' // FUTURE: include user textual input context for more personalized explanations
            }
            const busyNotification = showBusyNotification(plugin._('notifications.busy'), function () {
                if (xhr) {
                    xhr.abort('abort')
                    xhr = null
                }
            })
            xhr = $.ajax({
                url,
                type: 'POST',
                data,
                timeout: assistantOptions.requestTimeout,
                success: (reply, textStatus, jqXHR) => {
                    busyNotification.close()
                    if (reply?.error) {
                        RED.notify(reply.error, 'error')
                        // callback(new Error(reply.error), null)
                        return
                    }

                    try {
                        const text = reply.data
                        let dlg = null
                        const options = {
                            buttons: [{
                                text: plugin._('explain-flows.dialog-result.close-button'),
                                // icon: 'ui-icon-close',
                                class: 'primary',
                                click: function () {
                                    $(dlg).dialog('close')
                                }
                            }]
                        }
                        if (text && text.length > 0) {
                            // if copy to clipboard is supported, add a button to copy the text
                            const isHttpsOrLocalhost = location.protocol === 'https:' || location.hostname === 'localhost' || location.hostname === '127.0.0.1'
                            if (isHttpsOrLocalhost && navigator.clipboard && navigator.clipboard.writeText) {
                                options.buttons.unshift(
                                    {
                                        text: plugin._('explain-flows.dialog-result.copy-button'),
                                        // icon: 'ui-icon-copy',
                                        click: function () {
                                            navigator.clipboard.writeText(text).then(() => {
                                                showNotification('Copied to clipboard', { type: 'success' })
                                            }).catch((err) => {
                                                console.warn('Failed to copy to clipboard', err)
                                                showNotification(plugin._('errors.copy-failed'), { type: 'error' })
                                            })
                                        }
                                    }
                                )
                            }
                            const isLocked = typeof RED.workspaces.isLocked === 'function' && RED.workspaces.isLocked()
                            if (!isLocked) {
                                options.buttons.unshift(
                                    {
                                        text: plugin._('explain-flows.dialog-result.comment-node-button'),
                                        // icon: 'ui-icon-comment',
                                        // class: 'primary',
                                        click: function () {
                                            const commentNode = {
                                                type: 'comment',
                                                name: plugin._('explain-flows.dialog-result.comment-node-name'),
                                                info: text
                                            }
                                            importFlow(commentNode, false, 'Drop the generated comment node onto the workspace')
                                            $(dlg).dialog('close')
                                        }
                                    }
                                )
                            }
                        }
                        if (!text || text.length === 0) {
                            showNotification('Sorry, no explanation could be generated.', { type: 'warning' })
                            return
                        }
                        dlg = showMessage(plugin._('explain-flows.dialog-result.title'), RED.utils.renderMarkdown(text), 'html', options)
                    } catch (error) {
                        console.warn('Error rendering reply', error)
                        showNotification(plugin._('errors.something-went-wrong'), { type: 'error' })
                    }
                },
                error: (jqXHR, textStatus, errorThrown) => {
                    // console.log('explainSelectedNodes -> ajax -> error', jqXHR, textStatus, errorThrown)
                    busyNotification.close()
                    if (textStatus === 'abort' || errorThrown === 'abort' || jqXHR.statusText === 'abort') {
                        // user cancelled
                        return
                    }
                    processAIErrorResponse(jqXHR, textStatus, errorThrown)
                },
                complete: function () {
                    xhr = null
                    busyNotification.close()
                }
            })
        }

        let previousFlowBuilderPrompt
        // eslint-disable-next-line no-unused-vars
        function showFlowBuilderPrompt (title) {
            if (!assistantOptions.enabled) {
                RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                return
            }
            getUserInput({
                defaultInput: previousFlowBuilderPrompt,
                title: title || 'FlowFuse Expert : Flow Builder',
                explanation: 'The FlowFuse Expert can help you create a new flow.',
                description: 'Enter a short description of what you want the flow to do.'
            }).then((prompt) => {
                /** @type {JQueryXHR} */
                let xhr = null
                if (prompt) {
                    previousFlowBuilderPrompt = prompt
                    const url = 'nr-assistant/flow'
                    const transactionId = generateId(8) + '-' + Date.now() // a unique id for this transaction
                    const body = {
                        prompt,
                        transactionId,
                        context: {
                            modulesAllowed
                        }
                    }
                    const busyNotification = showBusyNotification(plugin._('notifications.busy'), function () {
                        if (xhr) {
                            xhr.abort('abort')
                            xhr = null
                        }
                    })
                    xhr = $.ajax({
                        url,
                        type: 'POST',
                        data: body,
                        timeout: assistantOptions.requestTimeout,
                        success: (reply, textStatus, jqXHR) => {
                            busyNotification.close()
                            try {
                                const flowJson = typeof reply?.data?.flow === 'string' ? JSON.parse(reply.data.flow) : reply?.data?.flow
                                if (flowJson && Array.isArray(flowJson) && flowJson.length > 0) {
                                    importFlow(flowJson)
                                } else {
                                    processAIErrorResponse(jqXHR, textStatus, 'No data in response from server')
                                }
                            } catch (error) {
                                RED.notify('Sorry, something went wrong, please try again', 'error')
                            }
                        },
                        error: (jqXHR, textStatus, errorThrown) => {
                            busyNotification.close()
                            if (textStatus === 'abort' || errorThrown === 'abort' || jqXHR.statusText === 'abort') {
                                // user cancelled
                                return
                            }
                            processAIErrorResponse(jqXHR, textStatus, errorThrown)
                        }
                    })
                }
            })
        }

        /**
         * Shows a busy notification with a cancel button
         * @param {string} [message] - The message to display in the notification
         * @param {function} [onCancel] - The function to call when the cancel button is clicked
         * @param {object} [context] - The context object to pass to the onCancel callback function
         * @returns {{close: () => {}}} - The notification object
         */
        function showBusyNotification (message, onCancel, context, poop) {
            message = message || plugin._('notifications.busy')
            const busyMessage = $('<div>')
            $('<span>').text(message).appendTo(busyMessage)
            $('<i>').addClass('fa fa-spinner fa-spin fa-fw').appendTo(busyMessage)
            // eslint-disable-next-line prefer-const
            let notification
            const buttons = [
                {
                    text: 'cancel',
                    click: function () {
                        if (onCancel) {
                            const result = onCancel(context)
                            if (result === false) {
                                return
                            }
                        }
                        notification.close()
                    }
                }
            ]
            notification = showNotification(busyMessage, { type: 'success', timeout: 0, fixed: true, modal: true, buttons })
            return notification
        }

        /**
         * Shows a notification
         * @param {string} message - The message to display in the notification
         * @param {object} [options] - The options to pass to the notification
         * @param {'error'|'warning'|'success'|'compact'} [options.type] - The type of notification to display
         * @param {Number} [options.timeout] - How long the notification should be shown for, in milliseconds. Default: 5000. This is ignored if the fixed property is set.
         * @param {boolean} [options.fixed] - Do not hide the notification after a timeout. This also prevents the click-to-close default behaviour of the notification.
         * @param {boolean} [options.modal] - Whether the notification should be modal
         * @param {array} [options.buttons] - An array of buttons to display in the notification. Each button should be an object with a text property and a click property. The click property should be a function to call when the button is clicked. The function will be passed the context object.
         * @returns {{close: () => {}}} - The notification object
         */
        function showNotification (message, options) {
            let notification = null
            options = options || {}
            options.type = options.type || 'success'
            options.timeout = Object.prototype.hasOwnProperty.call(options, 'timeout') ? options.timeout : 5000
            options.fixed = options.fixed || false
            options.modal = options.modal || false
            if (options.fixed && !options.buttons?.length) {
                // add a close button if the notification is fixed or has no buttons
                options.buttons = []
                options.buttons.push({
                    text: 'Close',
                    click: function () {
                        notification.close()
                    }
                })
            }
            notification = RED.notify(message, options)
            return notification
        }

        function importFlow (flow, addFlow, notificationMessage = 'Drop the generated node onto the workspace') {
            if (RED.workspaces.isLocked && RED.workspaces.isLocked()) {
                addFlow = true // force import to create a new tab
            }
            let newNodes = flow
            try {
                if (typeof flow === 'string') {
                    try {
                        flow = flow.trim()
                        if (flow.length === 0) {
                            return
                        }
                        newNodes = JSON.parse(flow)
                    } catch (err) {
                        const e = new Error(RED._('clipboard.invalidFlow', { message: err.message }))
                        e.code = 'NODE_RED'
                        throw e
                    }
                }
                const importOptions = { generateIds: true, addFlow }
                if (notificationMessage) {
                    RED.notify(notificationMessage, 'compact')
                }
                RED.view.importNodes(newNodes, importOptions)
            } catch (error) {
                // console.log(error)
                RED.notify('Sorry, something went wrong, please try again', 'error')
            }
        }

        function processAIErrorResponse (jqXHR, textStatus, errorThrown) {
            console.warn('error', jqXHR, textStatus, errorThrown)
            if (jqXHR.status === 429) {
                // get x- rate limit reset header
                const reset = jqXHR.getResponseHeader('x-ratelimit-reset')
                if (reset) {
                    const resetTime = new Date(reset * 1000)
                    const now = new Date()
                    const diff = resetTime - now
                    const seconds = Math.floor(diff / 1000)
                    const minutes = Math.floor(seconds / 60)
                    const remainingSeconds = seconds % 60
                    if (minutes > 0) {
                        RED.notify(`Sorry, the FlowFuse Expert is busy. Please try again in ${minutes} minute${minutes > 1 ? 's' : ''}.`, 'warning')
                    } else {
                        RED.notify(`Sorry, the FlowFuse Expert is busy. Please try again in ${remainingSeconds} second${remainingSeconds > 1 ? 's' : ''}.`, 'warning')
                    }
                    return
                }
                RED.notify('Sorry, the FlowFuse Expert is busy. Please try again later.', 'warning')
                return
            }
            if (jqXHR.status === 404) {
                RED.notify('Sorry, the FlowFuse Expert is not available at the moment', 'warning')
                return
            }
            if (jqXHR.status === 401) {
                RED.notify('Sorry, you are not authorised to use the FlowFuse Expert', 'warning')
                return
            }
            if (jqXHR.status >= 400 && jqXHR.status < 500) {
                let message = 'Sorry, the FlowFuse Expert cannot help with this request'
                if (jqXHR.responseJSON?.body?.code === 'assistant_service_denied' && jqXHR.responseJSON?.body?.error) {
                    message = jqXHR.responseJSON.body.error
                }
                RED.notify(message, 'warning')
                return
            }
            RED.notify('Sorry, something went wrong, please try again', 'error')
        }

        function getMonacoEditorForModel (model) {
            // Get the URI of the model, scan the editors for the model with the same URI
            const modelUri = model.uri.toString()
            const editors = monaco.editor.getEditors()
            return editors.find(editor => editor && document.body.contains(editor.getDomNode()) && editor.getModel()?.uri?.toString() === modelUri)
        }

        function getEditorAndNode (model, { noLogs = false, alertIfNotEnabled = true } = {}) {
            const node = RED.view.selection()?.nodes?.[0]
            if (!node) {
                !noLogs && console.warn('No node selected')
                return null
            }
            if (!assistantOptions.enabled) {
                node.warnIfNotEnabled && RED.notify(plugin._('errors.assistant-not-enabled'), 'warning')
                return null
            }
            const editor = getMonacoEditorForModel(model)
            if (!editor) {
                !noLogs && console.warn('Could not find editor for model', model.uri.toString())
                return null
            }
            const editorElement = editor.getDomNode()
            if (!document.body.contains(editorElement)) {
                !noLogs && console.warn('Editor is no longer in the DOM, cannot proceed.')
                return null
            }
            return { node, editor, editorElement }
        }

        function isInsideComment (model, position) {
            const lineNumber = position.lineNumber
            const column = position.column
            const offset = column - 1
            // Prefer the language at the exact position if API exists
            const languageId = (typeof model.getLanguageIdAtPosition === 'function')
                ? model.getLanguageIdAtPosition(lineNumber, column)
                : model.getLanguageId?.() || 'javascript'
            const line = model.getLineContent(lineNumber)

            const supportedLanguages = ['javascript', 'css', 'sql', 'html']
            if (!supportedLanguages.includes(languageId)) {
                return null // Not supported
            }

            const lineBeforeCursor = line.substring(0, offset)
            const textBeforeCursor = model.getValueInRange({
                startLineNumber: 1,
                startColumn: 1,
                endLineNumber: lineNumber,
                endColumn: column
            })

            const isWithinBlockComment = (startMarker = '/*', endMarker = '*/') => textBeforeCursor.lastIndexOf(startMarker) > textBeforeCursor.lastIndexOf(endMarker)

            if (languageId === 'javascript' || languageId === 'typescript') {
                // `//` single-line comment
                if (lineBeforeCursor.lastIndexOf('//') !== -1) return true
                // `/* */` block comment
                if (isWithinBlockComment()) return true
            } else if (languageId === 'css') {
                if (isWithinBlockComment()) return true
            } else if (languageId === 'sql') {
                // SQL single-line comment `--`
                if (lineBeforeCursor.lastIndexOf('--') !== -1) return true
                // SQL block comment `/* */`
                if (isWithinBlockComment()) return true
            } else if (languageId === 'html') {
                // HTML comment markers: <!-- -->
                if (isWithinBlockComment('<!--', '-->')) return true
            }

            // Not detected as comment
            return false
        }

        function getFunctionNodeEditorCodeSection (editor) {
            if (!editor || typeof editor.getDomNode !== 'function') {
                return 'unknown'
            }
            let subType = 'on message'
            let parent = editor.getDomNode().parentNode
            while (parent?.tagName !== 'FORM') {
                if (parent.id) {
                    break
                }
                parent = parent.parentNode
            }
            switch (parent?.id) {
            case 'func-tab-init':
            case 'node-input-init-editor':
                subType = 'on start'
                break
            case 'func-tab-body':
            case 'node-input-func-editor':
                subType = 'on message'
                break
            case 'func-tab-finalize':
            case 'node-input-finalize-editor':
                subType = 'on stop'
                break
            }
            return subType
        }

        /**
         * Gets the list of modules added to the setup tab.
         * NOTE: This function expects the nodes edit panel to be open.
         * @returns {Array} - The list of modules used by the function node.
         */
        function getFunctionNodeModules () {
            const _libs = []
            const libs = $('#node-input-libs-container').editableList('items')
            libs.each(function (i) {
                const item = $(this)
                const v = item.find('.node-input-libs-var').val()
                let n = item.find('.node-input-libs-val').typedInput('type')
                if (n === '_custom_') {
                    n = item.find('.node-input-libs-val').val()
                }
                if ((!v || (v === '')) ||
                    (!n || (n === ''))) {
                    return
                }
                _libs.push({
                    var: v,
                    module: n
                })
            })
            return _libs
        }

        function generateId (length = 16) {
            if (typeof length !== 'number' || length < 1) {
                throw new Error('Invalid length')
            }
            const iterations = Math.ceil(length / 2)
            const bytes = []
            for (let i = 0; i < iterations; i++) {
                bytes.push(Math.round(0xff * Math.random()).toString(16).padStart(2, '0'))
            }
            return bytes.join('').substring(0, length)
        }

        /**
         * Sets a default shortcut key for an action in the specified scope
         * If the action already has a shortcut key set, it will not be changed.
         * If the key is already set for another action in the same scope, it will not be set.
         * @param {string} id - The ID of the menu item (e.g. 'ff-ai-function-builder')
         * @param {string} scope - The scope of the action (e.g. '*' or 'red-ui-workspace')
         * @param {string} key - The key to set as the shortcut (e.g. 'ctrl-shift-a') (also supports chords like 'ctrl-a x')
         * @param {string} action - The action to set the shortcut for (e.g. 'flowfuse-nr-assistant:function-builder')
         */
        function setMenuShortcutKey (id, scope, key, action) {
            debug('setMenuShortcutKey')
            if (!scope || !key || !action) {
                console.warn('setMenuShortcutKey called with missing parameters', { scope, key, action })
                return
            }
            // first, see if there is already a key set for this action (may have been user set)
            const hasShortcut = RED.keyboard.getShortcut(action)
            if (hasShortcut?.key) {
                debug('setMenuShortcutKey: action already has a shortcut key set', { scope, key, action, hasShortcut })
                return
            }
            // next check if the desired key is already set by scanning the array of RED.actions.list
            const actionList = RED.actions.list()
            const existingAction = actionList.find(a => (a.scope === scope || a.scope === '*') && a.key?.toLowerCase() === key.toLowerCase())
            if (existingAction) {
                debug('setMenuShortcutKey: key is already set for another action', { scope, key, action, existingAction })
                return
            }
            // set the shortcut key
            RED.keyboard.add(scope, key, action)
            // For a menu to show the shortcut key, it needs to have a span with class `red-ui-popover-key` inside the menu item
            const actionItem = $('#' + id + ' > span > span.red-ui-menu-label')
            const hasPopoverSpan = actionItem.find('span.red-ui-popover-key').length > 0
            if (!hasPopoverSpan) {
                debug('setMenuShortcutKey: adding popover span to action item', { id, scope, key, action })
                actionItem.append('<span class="red-ui-popover-key"></span>')
            }
            RED.menu.refreshShortcuts()
        }

        function debug (...args) {
            if (RED.nrAssistant?.DEBUG) {
                const scriptName = 'assistant-index.html.js' // must match the sourceURL set in the script below
                const stackLine = new Error().stack.split('\n')[2].trim()
                const match = stackLine.match(/\(?([^\s)]+):(\d+):(\d+)\)?$/) || stackLine.match(/@?([^@]+):(\d+):(\d+)$/)
                const file = match?.[1] || 'anonymous'
                const line = match?.[2] || '1'
                const col = match?.[3] || '1'
                let link = `${window.location.origin}/${scriptName}:${line}:${col}`
                if (/^VM\d+$/.test(file)) {
                    link = `debugger:///${file}:${line}:${col}`
                } else if (file !== 'anonymous' && file !== '<anonymous>' && file !== scriptName) {
                    link = `${file}:${line}:${col}`
                    if (!link.startsWith('http') && !link.includes('/')) {
                        link = `${window.location.origin}/${link}`
                    }
                }
                // eslint-disable-next-line no-console
                console.log('[nr-assistant]', ...args, `\n   at ${link}`)
            }
        }
    }(RED, $))
    // # sourceURL=assistant-index.html.js
</script>

<style>
    /*
        The node-red styling for width of the menu UL is quite specific and includes !important, so we need to override
        it with an even more specific selector - this is to prevent it wrapping the text elements to underneath the icon
    */
    #red-ui-header ul#red-ui-header-button-ff-ai-submenu.red-ui-menu-dropdown {
        width: 300px !important; /* make the submenu wider to prevent wrapping elements */
    }
    #red-ui-header #red-ui-header-button-ff-ai+ul.red-ui-menu-dropdown li a {
        padding: 8px 16px;
    }

    /* prevent icon color being set to background color when clicked */
    a#red-ui-header-button-ff-ai.button:active, a#red-ui-header-button-ff-ai.button.active {
        background-color: var(--red-ui-header-menu-sublabel-color);
    }
    a#red-ui-header-button-ff-ai.button:hover {
        /* Override the background color when clicked to use this var - prevent it going dark */
        background-color: #8CE2E7;
    }

    #red-ui-header-button-ff-ai-submenu a {
        display: flex;
    }

    #red-ui-header-button-ff-ai-submenu .red-ui-menu-label-container {
        flex-grow: 1;
    }

    /*
        As menu icons are drawn by the (RED.menu.init api) as <img> tags, styling the fill of the path is impossible.
        Instead of using a url (e.g. resource/icon.svg), we add them as a "class name" which node-red then renders as an `<i>` tag.
        The CSS below uses the mask-image property to apply the SVG as a mask, allowing us to set the color via background-color.
    */
    #red-ui-header-button-ff-ai {
        mask-image: url("resources/@flowfuse/nr-assistant/ff-assistant.svg");
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: currentColor;
        height: 30px;
    }
    i.ff-assistant-menu-icon {
        display: inline-block;
        width: 28px;
        height: 28px;
        padding: 4px;
        margin-right: 10px;
        background-color: var(--red-ui-header-menu-color);

        /* Use mask-image to apply the SVG shape */
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain; /* alt 'cover' */
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
    }
    i.ff-assistant-menu-icon.function {
        mask-image: url('resources/@flowfuse/nr-assistant/ff-assistant-function.svg');
        -webkit-mask-image: url('resources/@flowfuse/nr-assistant/ff-assistant-function.svg');
    }
    i.ff-assistant-menu-icon.explain-flows {
        mask-image: url('resources/@flowfuse/nr-assistant/ff-assistant-explain-flows.svg');
        -webkit-mask-image: url('resources/@flowfuse/nr-assistant/ff-assistant-explain-flows.svg');
    }

    /* Header title in the dropdown menu */
    #ff-assistant-title > span.red-ui-menu-label > span {
        color: var(--red-ui-header-menu-color);
        font-size: 16px;
        display: inline-block;
        text-indent: 0px;
        margin-top: 10px;
        font-weight: bold;
    }

    /* styling for showMessage dialog */
    .ff-nr-ai-dialog-message > div.ui-dialog-content {
        padding: 16px;
    }
    .ff-nr-ai-dialog-message  h3 {
        margin: 0 0 12px;
    }
    .ff-nr-ai-dialog-message  p, li {
        line-height: 1.25rem;
    }
    .ff-nr-ai-dialog-message  li {
        margin-bottom: 3px;
    }

    :root {
        --ff-feature--display-debug-log-context: none; /* expert support will unset this as required */
    }
    .red-ui-debug-msg-hover button.ff-expert-debug-context {
        /* only show the button if supported */
        display: var(--ff-feature--display-debug-log-context) !important;
    }
    button.ff-expert-debug-context.selected {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
        filter: brightness(0.9);
    }
    button.ff-expert-debug-context.selected:active, button.ff-expert-debug-context.selected:hover {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        filter: brightness(1);
    }
</style>