@flowfuse/nr-assistant 0.1.1-cc561a2-202407081555.0 → 0.1.2-91d5229-202407160719.0

package/README.md

@@ -25,7 +25,7 @@ The capabilities it adds to Node-RED can be found in Node-RED editor on the main
 {
     "flowforge": {
         "assistant": {
-            "enabled": true
+            "enabled": true,
             "url": "https://", // URL of the AI service
             "token": "", // API token for the AI service
             "requestTimeout": 60000 // Timeout value for the AI service request

package/index.html

@@ -1,6 +1,22 @@
 <script>
     (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} 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 modulesAllowed = RED.settings.functionExternalModules !== false
         const assistantOptions = {
@@ -8,7 +24,7 @@
             requestTimeout: AI_TIMEOUT
         }
         let assistantInitialised = false
-        debug('nr-assistant loading...')
+        debug('loading...')
         RED.plugins.registerPlugin('flowfuse-nr-assistant', {
             type: 'assistant',
             name: 'Node-RED Assistant Plugin',
@@ -29,7 +45,7 @@
             if (assistantInitialised) {
                 return
             }
-            debug('nr-assistant initialising...')
+            debug('initialising...')
             if (!assistantOptions.enabled) {
                 console.warn('The FlowFuse Assistant is not enabled')
                 return
@@ -39,7 +55,11 @@
                 console.warn('Monaco editor not found. Unable to register code lens provider. Consider using the Monaco editor for a better experience.')
                 return
             } else {
-                const commandId = 'nr-assistant-fn-inline'
+                const funcCommandId = 'nr-assistant-fn-inline'
+                const jsonCommandId = 'nr-assistant-json-inline'
+
+                debug('registering code lens providers...')
+
                 monaco.languages.registerCodeLensProvider('javascript', {
                     provideCodeLenses: function (model, token) {
                         const thisEditor = getMonacoEditorForModel(model)
@@ -77,14 +97,14 @@
                                         endLineNumber: 2,
                                         endColumn: 1
                                     },
-                                    id: commandId
+                                    id: funcCommandId
                                 }
                             ],
                             dispose: () => { }
                         }
                     },
                     resolveCodeLens: function (model, codeLens, token) {
-                        if (codeLens.id !== commandId) {
+                        if (codeLens.id !== funcCommandId) {
                             return codeLens
                         }
                         codeLens.command = {
@@ -97,8 +117,45 @@
                     }
                 })
 
-                let previousPrompt = null
-                monaco.editor.registerCommand(commandId, function (accessor, model, codeLens, token) {
+                monaco.languages.registerCodeLensProvider('json', {
+                    provideCodeLenses: function (model, token) {
+                        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 Assistant 🪄',
+                            tooltip: 'Click to ask FlowFuse Assistant for help with JSON',
+                            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
@@ -108,16 +165,15 @@
                         RED.notify('The FlowFuse Assistant is not enabled', 'warning')
                         return
                     }
-                    let xhr = null
-                    const nodeId = node.id
-                    const transactionId = `${nodeId}-${Date.now()}` // a unique id for this transaction
                     const thisEditor = getMonacoEditorForModel(model)
                     if (thisEditor) {
                         if (!document.body.contains(thisEditor.getDomNode())) {
                             console.warn('Editor is no longer in the DOM, cannot proceed.')
                             return
                         }
+
                         // walk up the tree to find the parent div with an id and include that in context
+                        let subType = 'on message'
                         let parent = thisEditor.getDomNode().parentNode
                         while (parent?.tagName !== 'FORM') {
                             if (parent.id) {
@@ -125,113 +181,163 @@
                             }
                             parent = parent.parentNode
                         }
-                        // const editorSection = parent?.id || '' // FUTURE: determine the code section users code lens was triggered in. Will be used to help the assistant understand the context of the code
-                        const editorSection = 'on message' // hard coded for now since the code lens is only available in the "on message" editor in this first iteration
+                        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 message'
+                            break
+                        }
 
                         // 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)
-
-                        getUserInput({
-                            defaultInput: previousPrompt,
+                        /** @type {PromptOptions} */
+                        const promptOptions = {
+                            method: 'function',
+                            lang: 'javascript',
+                            type: 'function',
+                            subType
+                            // selectedText: model.getValueInRange(userSelection)
+                        }
+                        /** @type {PromptUIOptions} */
+                        const uiOptions = {
                             title: 'FlowFuse Assistant : Function Code',
-                            explanation: 'The FlowFuse Assistant can help you write code.',
-                            description: 'Enter a short description of what you want the function to do.'
-                        }).then((prompt) => {
-                            if (prompt) {
-                                previousPrompt = prompt
-                                const data = {
-                                    prompt,
-                                    transactionId,
-                                    context: {
-                                        scope: 'inline', // inline denotes that the prompt is for a inline code (i.e. the monaco editor)
-                                        modulesAllowed,
-                                        codeSection: editorSection
-                                        // selection: selectedText // FUTURE: include the selected text in the context for features like "fix my code", "refactor this", "what is this?" etc
-                                    }
+                            explanation: 'The FlowFuse Assistant 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
                                 }
-                                const busyNotification = showBusyNotification('Busy processing your request. Please wait...', function () {
-                                    if (xhr) {
-                                        xhr.abort('abort')
-                                        xhr = null
+                                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
                                     }
-                                })
-                                xhr = $.ajax({
-                                    url: 'nr-assistant/function', // /function denotes this is a request for NODE JavaScript code
-                                    type: 'POST',
-                                    data,
-                                    success: function (reply, textStatus, jqXHR) {
-                                        const responseData = reply?.data?.data
-                                        if (responseData?.func?.length > 0) {
-                                            const currentSelection = thisEditor.getSelection()
-                                            // 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
+                                ])
+                                // 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 _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()
                                             }
-                                            busyNotification.close()
-                                            thisEditor.focus()
-                                            // insert the generated code at the current cursor position overwriting any selected text
-                                            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')
-                                                }
+                                            if ((!v || (v === '')) ||
+                                                (!n || (n === ''))) {
+                                                return
                                             }
+                                            _libs.push({
+                                                var: v,
+                                                module: n
+                                            })
+                                        })
 
-                                            // 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 _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
-                                                        })
-                                                    })
-
-                                                    responseData.node_modules.forEach((lib) => {
-                                                        const existing = _libs.find(l => l.module === lib.module)
-                                                        if (!existing) {
-                                                            $('#node-input-libs-container').editableList('addItem', { var: lib.var, module: lib.module })
-                                                        }
-                                                    })
-                                                }
+                                        responseData.node_modules.forEach((lib) => {
+                                            const existing = _libs.find(l => l.module === lib.module)
+                                            if (!existing) {
+                                                $('#node-input-libs-container').editableList('addItem', { var: lib.var, module: lib.module })
                                             }
-                                        } else {
-                                            processAIErrorResponse(jqXHR, textStatus, 'No response from server')
-                                        }
-                                    },
-                                    error: (jqXHR, textStatus, errorThrown) => {
-                                        busyNotification.close()
-                                        if (textStatus === 'abort' || errorThrown === 'abort' || jqXHR.statusText === 'abort') {
-                                            // user cancelled
-                                            return
-                                        }
-                                        processAIErrorResponse(jqXHR, textStatus, errorThrown)
+                                        })
+                                    }
+                                }
+                            }
+                        })
+                    } 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('The FlowFuse Assistant is 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 Assistant : JSON',
+                            explanation: 'The FlowFuse Assistant 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 {
@@ -248,16 +354,114 @@
             // const flowBuilderTitle = 'FlowFuse Flow Assistant'
             // RED.actions.add('ff:nr-assistant-flow-builder', showFlowBuilderPrompt, { label: flowBuilderTitle })
 
-            // Add toolbar button
-            const toolbarMenuButton = $('<li><a id="red-ui-header-button-ff-ai" class="button fa fa-magic" href="#"></a></li>')
-            toolbarMenuButton.prependTo('.red-ui-header-toolbar')
-            toolbarMenuButton.on('click', function (e) {
+            const toolbarMenuButton = $('<li><a id="red-ui-header-button-ff-ai" class="button" href="#"></a></li>')
+            const toolbarMenuButtonAnchor = toolbarMenuButton.find('a')
+            toolbarMenuButtonAnchor.css('mask-image', 'url("/resources/@flowfuse/nr-assistant/assistant-button.svg")')
+            toolbarMenuButtonAnchor.css('mask-repeat', 'no-repeat')
+            toolbarMenuButtonAnchor.css('mask-position', 'center')
+            toolbarMenuButtonAnchor.css('background-color', 'currentColor')
+            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
+            }
+            toolbarMenuButtonAnchor.on('click', function (e) {
                 RED.actions.invoke('ff:nr-assistant-function-builder')
             })
-            RED.popover.tooltip(toolbarMenuButton, 'FlowFuse Assistant')
+            RED.popover.tooltip(toolbarMenuButtonAnchor, 'FlowFuse Assistant')
             assistantInitialised = true
         }
 
+        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 || 'FlowFuse Assistant',
+                explanation: uiOptions?.explanation || 'The FlowFuse Assistant 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 code (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('Busy processing your request. Please wait...', 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: 'FlowFuse Assistant',
             explanation: 'The FlowFuse Assistant can help you create things.',
@@ -369,7 +573,7 @@
                                 if (flowJson && Array.isArray(flowJson) && flowJson.length > 0) {
                                     importFlow(flowJson)
                                 } else {
-                                    processAIErrorResponse(jqXHR, textStatus, 'No response from server')
+                                    processAIErrorResponse(jqXHR, textStatus, 'No data in response from server')
                                 }
                             } catch (error) {
                                 RED.notify('Sorry, something went wrong, please try again', 'error')
@@ -433,7 +637,7 @@
                                 if (flowJson && Array.isArray(flowJson) && flowJson.length > 0) {
                                     importFlow(flowJson)
                                 } else {
-                                    processAIErrorResponse(jqXHR, textStatus, 'No response from server')
+                                    processAIErrorResponse(jqXHR, textStatus, 'No data in response from server')
                                 }
                             } catch (error) {
                                 RED.notify('Sorry, something went wrong, please try again', 'error')
@@ -506,6 +710,9 @@
         }
 
         function importFlow (flow, addFlow) {
+            if (RED.workspaces.isLocked && RED.workspaces.isLocked()) {
+                addFlow = true // force import to create a new tab
+            }
             let newNodes = flow
             try {
                 if (typeof flow === 'string') {
@@ -560,4 +767,4 @@
             }
         }
     }(RED, $))
-</script>
+</script>

package/index.js

@@ -27,22 +27,21 @@ module.exports = (RED) => {
             RED.log.info('FlowFuse Assistant Plugin loaded')
 
             RED.httpAdmin.post('/nr-assistant/:method', RED.auth.needsPermission('write'), function (req, res) {
-                const method = req.params.method || 'fn'
+                const method = req.params.method
                 // limit method to prevent path traversal
-                if (/[^a-zA-Z0-9-_]/.test(method)) {
+                if (!method || typeof method !== 'string' || /[^a-z0-9-_]/.test(method)) {
                     res.status(400)
                     res.json({ status: 'error', message: 'Invalid method' })
                     return
                 }
                 const input = req.body
-                const prompt = input.prompt
-                if (!input.prompt) {
+                if (!input || !input.prompt || typeof input.prompt !== 'string') {
                     res.status(400)
                     res.json({ status: 'error', message: 'prompt is required' })
                     return
                 }
                 const body = {
-                    prompt, // this is the prompt to the AI
+                    prompt: input.prompt, // this is the prompt to the AI
                     promptHint: input.promptHint, // this is used to let the AI know what we are generating (`function node? Node JavaScript? flow?)
                     context: input.context, // this is used to provide additional context to the AI (e.g. the selected text of the function node)
                     transactionId: input.transactionId // used to correlate the request with the response

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/nr-assistant",
-    "version": "0.1.1-cc561a2-202407081555.0",
+    "version": "0.1.2-91d5229-202407160719.0",
     "description": "FlowFuse Node-RED assistant plugin",
     "main": "index.js",
     "scripts": {

package/resources/assistant-button.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" style="" xmlns="http://www.w3.org/2000/svg">
+    <path d="M26.9949 12.5515C26.5792 12.5515 26.2437 12.8871 26.2437 13.3028V19.6387H19.6674C18.4903 19.6437 17.4836 20.4751 17.3734 21.6321C16.5019 21.5219 15.971 21.2815 15.5903 20.9309C15.1396 20.5202 14.834 19.9342 14.4584 19.253C14.0828 18.5719 13.622 17.7905 12.7805 17.2145C12.1044 16.7487 11.1026 16.5183 9.93062 16.4582V16.0525C9.93062 14.7954 8.95394 13.7836 7.69678 13.7836H1.81166V4.82323C1.81166 4.12703 2.37764 3.55605 3.07884 3.55605H16.7624C17.1781 3.55605 17.5137 3.22047 17.5137 2.80476C17.5137 2.38904 17.1781 2.05347 16.7624 2.05347H3.07884C1.55122 2.05347 0.309082 3.2956 0.309082 4.82323V26.7209C0.309082 28.2485 1.55122 29.4906 3.07884 29.4906H24.9815C26.5091 29.4906 27.7512 28.2485 27.7512 26.7209V13.2978C27.7512 12.8821 27.4157 12.5465 27 12.5465L26.9949 12.5515ZM18.9311 21.8425C18.9311 21.4167 19.2466 21.0661 19.6724 21.0661H26.2437V24.7775H19.6724C19.2466 24.7775 18.9311 24.497 18.9311 24.0713V21.8425ZM7.69678 15.3563C8.12251 15.3563 8.46811 15.6268 8.46811 16.0525V18.2864C8.46811 18.7071 8.12251 18.9976 7.70179 18.9976H1.81166V15.3563H7.69678ZM24.9765 27.988H3.07884C2.38265 27.988 1.81166 27.4221 1.81166 26.7209V20.5603H7.70179C8.95394 20.5603 9.93062 19.5335 9.93062 18.2814V17.9909C10.8171 18.0409 11.5033 18.2062 11.904 18.4817C12.4199 18.8373 12.7455 19.3482 13.1011 19.9943C13.4316 20.5953 13.8023 21.3016 14.4233 21.9226H14.4283C14.4885 21.9977 14.9893 22.5437 15.6505 22.8542C16.2765 23.1547 17.3283 23.2198 17.3283 23.2198V24.0663C17.3283 25.3235 18.4152 26.3402 19.6674 26.3402H26.2437V26.7209C26.2437 27.4171 25.6777 27.988 24.9765 27.988Z" fill="var(--red-ui-header-menu-color)"></path>
+    <path d="M29.5043 4.97859L27.1402 4.10208C26.4691 3.85666 25.9432 3.32575 25.6978 2.6596L24.8213 0.295539C24.676 -0.100141 24.115 -0.100141 23.9698 0.295539L23.0933 2.6596C22.8479 3.33076 22.317 3.85666 21.6508 4.10208L19.2868 4.97859C18.8911 5.12384 18.8911 5.6848 19.2868 5.83005L21.6508 6.70656C22.322 6.95198 22.8479 7.48289 23.0933 8.14904L23.9698 10.5131C24.115 10.9088 24.676 10.9088 24.8213 10.5131L25.6978 8.14904C25.9432 7.47788 26.4741 6.95198 27.1402 6.70656L29.5043 5.83005C29.9 5.6848 29.9 5.12384 29.5043 4.97859Z" style="fill: var(--red-ui-header-menu-color);"></path>
+    <path d="M16.6822 11.2944L17.8643 11.7302C18.1998 11.8554 18.4603 12.1158 18.5855 12.4514L19.0213 13.6334C19.0964 13.8338 19.3719 13.8338 19.447 13.6334L19.8827 12.4514C20.008 12.1158 20.2684 11.8554 20.604 11.7302L21.786 11.2944C21.9864 11.2193 21.9864 10.9438 21.786 10.8687L20.604 10.4329C20.2684 10.3077 20.008 10.0473 19.8827 9.71168L19.447 8.52965C19.3719 8.32931 19.0914 8.32931 19.0213 8.52965L18.5855 9.71168C18.4603 10.0473 18.1998 10.3077 17.8643 10.4329L16.6822 10.8687C16.4819 10.9438 16.4819 11.2193 16.6822 11.2944Z" style="fill: var(--red-ui-header-menu-color);"></path>
+</svg>