Spaces:
Running
Running
Ctrl+K
{ "system_message_tool_implementation": { "html_structure": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>System Message Generator</title>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #4A90E2;\n --secondary-color: #F5A623;\n --accent-color: #7ED321;\n --neutral-light: #F8F9FA;\n --neutral-medium: #CED4DA;\n --neutral-dark: #343A40;\n --background-color: #FFFFFF;\n --text-primary: #212529;\n --text-secondary: #6C757D;\n --font-heading: 'Inter', sans-serif;\n --font-body: 'Inter', sans-serif;\n --base-font-size: 16px;\n --border-radius: 4px;\n }\n\n body {\n font-family: var(--font-body);\n font-size: var(--base-font-size);\n color: var(--text-primary);\n background-color: var(--background-color);\n margin: 0;\n padding: 0;\n display: flex;\n min-height: 100vh;\n flex-direction: column;\n }\n\n .container {\n display: flex;\n flex: 1;\n width: 100%;\n max-width: 1440px;\n margin: 0 auto;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .sidebar {\n width: 250px;\n background-color: var(--neutral-light);\n border-right: 1px solid var(--neutral-medium);\n padding: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n }\n\n .sidebar nav ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .sidebar nav li {\n margin-bottom: 15px;\n }\n\n .sidebar nav a {\n text-decoration: none;\n color: var(--text-secondary);\n font-weight: 500;\n display: flex;\n align-items: center;\n transition: color 0.3s ease;\n }\n \n .sidebar nav a:hover {\n color: var(--primary-color);\n }\n\n .sidebar nav a.active {\n color: var(--primary-color);\n font-weight: 700;\n }\n\n .sidebar nav a i {\n margin-right: 10px;\n color: var(--primary-color);\n }\n\n .main-content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n }\n\n .section-header {\n margin-bottom: 20px;\n border-bottom: 1px solid var(--neutral-medium);\n padding-bottom: 10px;\n }\n\n .section-header h2 {\n font-family: var(--font-heading);\n font-size: 1.75em;\n color: var(--primary-color);\n margin: 0;\n }\n\n .section-header p {\n color: var(--text-secondary);\n font-size: 0.9em;\n margin-top: 5px;\n }\n\n .form-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n .form-group label {\n display: block;\n font-weight: 600;\n margin-bottom: 8px;\n color: var(--text-primary);\n }\n\n .form-group input[type=\"text\"],\n .form-group textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid var(--neutral-medium);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n font-size: 1em;\n font-family: var(--font-body);\n }\n\n .form-group textarea {\n min-height: 100px;\n resize: vertical;\n }\n\n .form-group .tags-input-container {\n position: relative;\n width: 100%;\n }\n\n .form-group .tags-input {\n width: calc(100% - 22px); \n padding: 10px;\n border: 1px solid var(--neutral-medium);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n font-size: 1em;\n font-family: var(--font-body);\n margin-bottom: 5px;\n }\n\n .form-group .tag {\n display: inline-block;\n background-color: var(--primary-color);\n color: white;\n padding: 5px 10px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: var(--border-radius);\n font-size: 0.85em;\n transition: background-color 0.3s ease;\n }\n \n .form-group .tag .remove-tag {\n margin-left: 8px;\n cursor: pointer;\n font-weight: bold;\n }\n\n .form-group .tag:hover {\n background-color: #357ABD;\n }\n\n .form-group .dynamic-list-item {\n background-color: var(--neutral-light);\n border: 1px solid var(--neutral-medium);\n border-radius: var(--border-radius);\n padding: 15px;\n margin-bottom: 15px;\n position: relative;\n }\n\n .form-group .dynamic-list-item .remove-list-item {\n position: absolute;\n top: 10px;\n right: 10px;\n cursor: pointer;\n color: var(--text-secondary);\n font-size: 1.2em;\n font-weight: bold;\n }\n\n .form-group .dynamic-list-item label {\n font-weight: 500;\n margin-bottom: 5px;\n }\n\n .form-group .add-item-button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 8px 15px;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 0.9em;\n transition: background-color 0.3s ease;\n }\n\n .form-group .add-item-button:hover {\n background-color: #357ABD;\n }\n\n .preview-pane {\n flex: 1;\n background-color: var(--neutral-light);\n border-left: 1px solid var(--neutral-medium);\n padding: 20px;\n box-sizing: border-box;\n overflow-y: auto;\n font-family: var(--font-body);\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .preview-pane h3 {\n margin-top: 0;\n color: var(--primary-color);\n font-family: var(--font-heading);\n }\n\n .controls {\n display: flex;\n justify-content: flex-end;\n margin-top: 20px;\n gap: 10px;\n }\n\n .controls button {\n padding: 10px 20px;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1em;\n font-weight: 600;\n transition: background-color 0.3s ease, transform 0.2s ease;\n }\n\n .controls .generate-button {\n background-color: var(--accent-color);\n color: white;\n }\n\n .controls .generate-button:hover {\n background-color: #64B217;\n transform: translateY(-1px);\n }\n \n .controls .save-draft-button {\n background-color: var(--secondary-color);\n color: white;\n }\n\n .controls .save-draft-button:hover {\n background-color: #D9901F;\n transform: translateY(-1px);\n }\n\n /* Responsive adjustments */\n
@media
(max-width: 768px) {\n .container {\n flex-direction: column;\n }\n .sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--neutral-medium);\n height: auto;\n padding-bottom: 10px;\n }\n .sidebar nav {\n display: flex;\n overflow-x: auto;\n padding-bottom: 10px;\n }\n .sidebar nav ul {\n flex-wrap: nowrap;\n padding-left: 10px;\n }\n .sidebar nav li {\n margin-right: 15px;\n margin-bottom: 0;\n }\n .sidebar nav a {\n padding: 10px 0;\n }\n .main-content {\n padding-top: 0;\n }\n .preview-pane {\n border-left: none;\n border-top: 1px solid var(--neutral-medium);\n max-height: 300px;\n margin-top: 20px;\n }\n .controls {\n flex-direction: column;\n gap: 10px;\n }\n .controls button {\n width: 100%;\n }\n }\n\n </style>\n</head>\n<body>\n <div class=\"container\">\n <aside class=\"sidebar\">\n <nav>\n <ul>\n <li><a href=\"#identity\" class=\"active\"><i class=\"fas fa-user-tag\"></i> Identity</a></li>\n <li><a href=\"#goal\"><i class=\"fas fa-bullseye\"></i> Goal</a></li>\n <li><a href=\"#mandate\"><i class=\"fas fa-gavel\"></i> Mandate</a></li>\n <li><a href=\"#constraints\"><i class=\"fas fa-ban\"></i> Constraints</a></li>\n <li><a href=\"#components\"><i class=\"fas fa-puzzle-piece\"></i> Components</a></li>\n <li><a href=\"#interaction_protocols\"><i class=\"fas fa-exchange-alt\"></i> Interaction Protocols</a></li>\n </ul>\n </nav>\n </aside>\n <main class=\"main-content\">\n <div id=\"identity\" class=\"section-wrapper\">\n <div class=\"section-header\">\n <h2>Agent Identity</h2>\n <p>Defines the AI agent's persona, name, and role.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"agent-name\">Agent Name</label>\n <input type=\"text\" id=\"agent-name\" placeholder=\"e.g., CodeMaster\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"agent-persona\">Agent Persona Description</label>\n <textarea id=\"agent-persona\" placeholder=\"e.g., A helpful AI assistant specialized in Python development\" required></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"agent-attributes\">Key Attributes</label>\n <div class=\"tags-input-container\">\n <input type=\"text\" id=\"agent-attributes\" class=\"tags-input\" placeholder=\"e.g., patient, concise, creative\">\n <div id=\"agent-attributes-tags\" class=\"tags-output\"></div>\n </div>\n <p class=\"input-description\">Add multiple attributes, press Enter or comma after each.</p>\n </div>\n </div>\n </div>\n\n <div id=\"goal\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Agent Goal</h2>\n <p>Articulates the primary objective and success metrics.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"primary-objective\">Primary Objective Statement</label>\n <textarea id=\"primary-objective\" placeholder=\"e.g., To assist users in writing and debugging Python code\" required></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"kpis\">Key Performance Indicators (KPIs)</label>\n <div class=\"tags-input-container\">\n <input type=\"text\" id=\"kpis\" class=\"tags-input\" placeholder=\"e.g., Code accuracy > 95%\">\n <div id=\"kpis-tags\" class=\"tags-output\"></div>\n </div>\n <p class=\"input-description\">Add multiple KPIs, press Enter or comma after each.</p>\n </div>\n </div>\n </div>\n\n <div id=\"mandate\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Agent Mandate</h2>\n <p>Outlines the specific tasks and responsibilities.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"authorized-actions\">Authorized Actions</label>\n <textarea id=\"authorized-actions\" placeholder=\"e.g., Can write code snippets, Can query databases\" required></textarea>\n <p class=\"input-description\">List actions, one per line.</p>\n </div>\n <div class=\"form-group\">\n <label for=\"scope-of-authority\">Scope of Authority</label>\n <input type=\"text\" id=\"scope-of-authority\" placeholder=\"e.g., Limited to within the provided context\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"responsibilities\">Areas of Responsibility</label>\n <textarea id=\"responsibilities\" placeholder=\"e.g., Responsible for user interaction logging\"></textarea>\n <p class=\"input-description\">List responsibilities, one per line.</p>\n </div>\n </div>\n </div>\n\n <div id=\"constraints\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Agent Constraints</h2>\n <p>Specifies the limitations, rules, and boundaries.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"operational-boundaries\">Operational Boundaries</label>\n <textarea id=\"operational-boundaries\" placeholder=\"e.g., Cannot generate harmful content\" required></textarea>\n <p class=\"input-description\">List boundaries, one per line.</p>\n </div>\n <div class=\"form-group\">\n <label for=\"ethical-guidelines\">Ethical Guidelines</label>\n <textarea id=\"ethical-guidelines\" placeholder=\"e.g., Always be truthful and unbiased\" required></textarea>\n <p class=\"input-description\">List guidelines, one per line.</p>\n </div>\n <div class=\"form-group\">\n <label for=\"resource-limitations\">Resource Limitations</label>\n <textarea id=\"resource-limitations\" placeholder=\"e.g., Limited to 5 API calls per minute\"></textarea>\n <p class=\"input-description\">List limitations, one per line.</p>\n </div>\n <div class=\"form-group\">\n <label for=\"forbidden-actions\">Forbidden Actions</label>\n <textarea id=\"forbidden-actions\" placeholder=\"e.g., Cannot execute arbitrary code\"></textarea>\n <p class=\"input-description\">List forbidden actions, one per line.</p>\n </div>\n </div>\n </div>\n\n <div id=\"components\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Available Components</h2>\n <p>Details the specific tools, modules, or functionalities.</p>\n </div>\n <div class=\"form-group\">\n <label>Component List</label>\n <div id=\"components-list\">\n \n </div>\n <button class=\"add-item-button\" onclick=\"addComponentItem()\">Add Component</button>\n <p class=\"input-description\">Add multiple components with their details.</p>\n </div>\n </div>\n\n <div id=\"interaction_protocols\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Interaction Protocols</h2>\n <p>Defines how the AI agent should interact with users.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"communication-style\">Communication Style</label>\n <textarea id=\"communication-style\" placeholder=\"e.g., Use clear and concise language\" required></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"error-handling\">Error Handling Procedures</label>\n <textarea id=\"error-handling\" placeholder=\"e.g., If a tool fails, inform the user and suggest alternatives\" required></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"feedback-mechanism\">User Feedback Mechanism</label>\n <input type=\"text\" id=\"feedback-mechanism\" placeholder=\"e.g., Prompt user for feedback after task completion\">\n </div>\n </div>\n </div>\n\n <div class=\"controls\">\n <button class=\"save-draft-button\">Save Draft</button>\n <button class=\"generate-button\" onclick=\"generateSystemMessage()\">Generate Message</button>\n </div>\n </main>\n <aside class=\"preview-pane-container\">\n <div class=\"preview-pane\" id=\"preview-pane\">\n <h3>Generated System Message Preview</h3>\n <pre><code id=\"preview-code\"></code></pre>\n </div>\n </aside>\n </div>\n\n <script>\n const sections = [\n { id: 'identity', title: 'Agent Identity', navLink: 'a[href=\"#identity\"]' },\n { id: 'goal', title: 'Agent Goal', navLink: 'a[href=\"#goal\"]' },\n { id: 'mandate', title: 'Agent Mandate', navLink: 'a[href=\"#mandate\"]' },\n { id: 'constraints', title: 'Agent Constraints', navLink: 'a[href=\"#constraints\"]' },\n { id: 'components', title: 'Available Components', navLink: 'a[href=\"#components\"]' },\n { id: 'interaction_protocols', title: 'Interaction Protocols', navLink: 'a[href=\"#interaction_protocols\"]' }\n ];\n\n document.addEventListener('DOMContentLoaded', () => {\n setupNavigation();\n setupTagsInput('agent-attributes');\n setupTagsInput('kpis');\n setupDynamicList('components-list', 'component');\n });\n\n function setupNavigation() {\n const navLinks = document.querySelectorAll('.sidebar nav a');\n const sectionWrappers = document.querySelectorAll('.section-wrapper');\n\n navLinks.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n navLinks.forEach(nl => nl.classList.remove('active'));\n this.classList.add('active');\n\n sectionWrappers.forEach(section => {\n section.style.display = 'none';\n });\n\n const targetId = this.getAttribute('href');\n const targetSection = document.querySelector(targetId);\n if (targetSection) {\n targetSection.style.display = 'block';\n }\n });\n });\n }\n\n function setupTagsInput(inputId) {\n const input = document.getElementById(inputId);\n const tagsContainer = document.getElementById(`${inputId}-tags`);\n if (!input || !tagsContainer) return;\n\n input.addEventListener('keypress', function(e) {\n if (e.key === 'Enter' || e.key === ',') {\n e.preventDefault();\n const value = this.value.trim();\n if (value) {\n addTag(value, tagsContainer, inputId);\n this.value = '';\n }\n }\n });\n \n // Allow adding tags by clicking outside the input if it contains a value\n input.addEventListener('blur', function() {\n const value = this.value.trim();\n if (value && (event.relatedTarget === null || !event.relatedTarget.classList.contains('tag') && !event.relatedTarget.classList.contains('remove-tag'))) {\n addTag(value, tagsContainer, inputId);\n this.value = '';\n }\n });\n }\n\n function addTag(value, tagsContainer, inputId) {\n const tagElement = document.createElement('span');\n tagElement.classList.add('tag');\n tagElement.textContent = value;\n\n const removeButton = document.createElement('span');\n removeButton.classList.add('remove-tag');\n removeButton.textContent = 'x';\n removeButton.onclick = function() {\n tagElement.remove();\n };\n\n tagElement.appendChild(removeButton);\n tagsContainer.appendChild(tagElement);\n }\n\n function setupDynamicList(listContainerId, itemPrefix) {\n const listContainer = document.getElementById(listContainerId);\n if (!listContainer) return;\n let itemCount = 0;\n\n window.addComponentItem = () => {\n itemCount++;\n const itemElement = document.createElement('div');\n itemElement.classList.add('dynamic-list-item');\n itemElement.setAttribute('data-item-id', `${itemPrefix}-${itemCount}`);\n itemElement.innerHTML = `\n <label for=\"${itemPrefix}-name-${itemCount}\">Tool Name</label>\n <input type=\"text\" id=\"${itemPrefix}-name-${itemCount}\" class=\"component-name\" placeholder=\"e.g., WebSearch\" required>\n \n <label for=\"${itemPrefix}-description-${itemCount}\">Description</label>\n <textarea id=\"${itemPrefix}-description-${itemCount}\" class=\"component-description\" placeholder=\"e.g., For retrieving real-time information\" required></textarea>\n \n <label for=\"${itemPrefix}-invocation-${itemCount}\">Invocation Details</label>\n <textarea id=\"${itemPrefix}-invocation-${itemCount}\" class=\"component-invocation\" placeholder=\"e.g., Use JSON format for tool calls\" required></textarea>\n \n <span class=\"remove-list-item\" onclick=\"removeListItem(this)\">×</span>\n `;\n listContainer.appendChild(itemElement);\n };\n }\n\n function removeListItem(button) {\n button.parentElement.remove();\n }\n\n function generateSystemMessage() {\n const data = {};\n\n // Identity\n data.identity = {\n name: document.getElementById('agent-name').value,\n persona: document.getElementById('agent-persona').value,\n attributes: Array.from(document.querySelectorAll('#agent-attributes-tags .tag')).map(tag => tag.firstChild.textContent)\n };\n\n // Goal\n data.goal = {\n primary_objective: document.getElementById('primary-objective').value,\n kpis: Array.from(document.querySelectorAll('#kpis-tags .tag')).map(tag => tag.firstChild.textContent)\n };\n\n // Mandate\n data.mandate = {\n authorized_actions: document.getElementById('authorized-actions').value.split('\\n').filter(line => line.trim() !== ''),\n scope: document.getElementById('scope-of-authority').value,\n responsibilities: document.getElementById('responsibilities').value.split('\\n').filter(line => line.trim() !== '')\n };\n\n // Constraints\n data.constraints = {\n boundaries: document.getElementById('operational-boundaries').value.split('\\n').filter(line => line.trim() !== ''),\n ethical_guidelines: document.getElementById('ethical-guidelines').value.split('\\n').filter(line => line.trim() !== ''),\n resource_limitations: document.getElementById('resource-limitations').value.split('\\n').filter(line => line.trim() !== ''),\n forbidden_actions: document.getElementById('forbidden-actions').value.split('\\n').filter(line => line.trim() !== '')\n };\n\n // Components\n data.components = Array.from(document.querySelectorAll('#components-list .dynamic-list-item')).map(item => ({\n name: item.querySelector('.component-name').value,\n description: item.querySelector('.component-description').value,\n invocation: item.querySelector('.component-invocation').value\n }));\n\n // Interaction Protocols\n data.interaction_protocols = {\n communication_style: document.getElementById('communication-style').value,\n error_handling: document.getElementById('error-handling').value,\n feedback_mechanism: document.getElementById('feedback-mechanism').value\n };\n\n const promptTemplate = `As an AI agent, you are configured with the following operational guidelines. Adhere strictly to these instructions to ensure optimal performance and alignment with your designated purpose. Your configuration is provided in the following JSON structure. All fields are mandatory unless explicitly stated, and lists should be treated as comprehensive directives.\n\n\`\`\`json\n{\n \"identity\": {\n \"name\": \"{{agent_name}}\",\n \"persona\": \"{{agent_persona_description}}\",\n \"attributes\": {{agent_attributes_json_array}}\n },\n \"goal\": {\n \"primary_objective\": \"{{primary_objective_statement}}\",\n \"kpis\": {{kpis_json_array}}\n },\n \"mandate\": {\n \"authorized_actions\": {{authorized_actions_json_array}},\n \"scope\": \"{{scope_of_authority}}\",\n \"responsibilities\": {{responsibilities_json_array}}\n },\n \"constraints\": {\n \"boundaries\": {{operational_boundaries_json_array}},\n \"ethical_guidelines\": {{ethical_guidelines_json_array}},\n \"resource_limitations\": {{resource_limitations_json_array}},\n \"forbidden_actions\": {{forbidden_actions_json_array}}\n },\n \"components\": {{components_json_array}},\n \"interaction_protocols\": {\n \"communication_style\": \"{{communication_style_description}}\",\n \"error_handling\": \"{{error_handling_description}}\",\n \"feedback_mechanism\": \"{{feedback_mechanism_description}}\"\n }\n}\n\`\`\`\n\n**Interpretation Guidelines for this System Message:**\n* **Clarity**: All instructions are direct and unambiguous. If any instruction seems unclear, request clarification.\n* **Prioritization**: Instructions are ordered by importance, with core identity and primary goals at the forefront.\n* **Strict Adherence**: Deviations from specified mandates, constraints, or interaction protocols are not permitted.\n* **Tool Usage**: When components are listed, use them as specified for problem-solving or information retrieval.\n* **Error Handling**: Follow the defined error handling procedures precisely.`;\n\n const generatedPrompt = promptTemplate\n .replace('{{agent_name}}', data.identity.name || '')\n .replace('{{agent_persona_description}}', data.identity.persona || '')\n .replace('{{agent_attributes_json_array}}', JSON.stringify(data.identity.attributes))\n .replace('{{primary_objective_statement}}', data.goal.primary_objective || '')\n .replace('{{kpis_json_array}}', JSON.stringify(data.goal.kpis))\n .replace('{{authorized_actions_json_array}}', JSON.stringify(data.mandate.authorized_actions))\n .replace('{{scope_of_authority}}', data.mandate.scope || '')\n .replace('{{responsibilities_json_array}}', JSON.stringify(data.mandate.responsibilities))\n .replace('{{operational_boundaries_json_array}}', JSON.stringify(data.constraints.boundaries))\n .replace('{{ethical_guidelines_json_array}}', JSON.stringify(data.constraints.ethical_guidelines))\n .replace('{{resource_limitations_json_array}}', JSON.stringify(data.constraints.resource_limitations))\n .replace('{{forbidden_actions_json_array}}', JSON.stringify(data.constraints.forbidden_actions))\n .replace('{{components_json_array}}', JSON.stringify(data.components))\n .replace('{{communication_style_description}}', data.interaction_protocols.communication_style || '')\n .replace('{{error_handling_description}}', data.interaction_protocols.error_handling || '')\n .replace('{{feedback_mechanism_description}}', data.interaction_protocols.feedback_mechanism || '');\n\n document.getElementById('preview-code').textContent = generatedPrompt;\n document.getElementById('preview-pane').style.display = 'block';\n }\n \n // Helper to manage sidebar visibility and active states\n document.querySelectorAll('.sidebar nav a').forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n const targetId = this.getAttribute('href');\n const targetSection = document.querySelector(targetId);\n \n // Hide all sections\n document.querySelectorAll('.section-wrapper').forEach(sec => sec.style.display = 'none');\n // Remove active class from all links\n document.querySelectorAll('.sidebar nav a').forEach(nav => nav.classList.remove('active'));\n \n // Show target section and set active link\n if (targetSection) {\n targetSection.style.display = 'block';\n }\n this.classList.add('active');\n });\n });\n\n </script>\n</body>\n</html>\n", "javascript_logic": { "event_listeners": [ "DOMContentLoaded: Setup navigation and tags input.", "Sidebar link click: Prevent default, remove active class from all links, hide all sections, show target section, add active class to clicked link." ], "functions": [ { "name": "setupNavigation", "description": "Initializes click event listeners for sidebar navigation links to toggle section visibility and active states.", "dependencies": ["DOMContentLoaded"] }, { "name": "setupTagsInput", "description": "Configures a tags input field. Handles 'Enter' or ',' key presses to create tags, and blur event to capture final input.", "parameters": ["inputId (string)"], "dependencies": ["DOMContentLoaded"] }, { "name": "addTag", "description": "Creates and appends a tag element with a remove button to a specified container.", "parameters": ["value (string)", "tagsContainer (HTMLElement)", "inputId (string)"], "logic": "Creates span for tag, adds 'tag' class, sets text content, creates span for remove button with 'x', appends remove button to tag, appends tag to container." }, { "name": "setupDynamicList", "description": "Sets up functionality for adding and removing items in a dynamic list (e.g., for components).", "parameters": ["listContainerId (string)", "itemPrefix (string)"], "dependencies": ["DOMContentLoaded"] }, { "name": "addComponentItem", "description": "Dynamically adds a new component input group to the 'Components' section.", "logic": "Increments item count, creates a new div with specific input fields for component name, description, and invocation, adds a remove button, appends to the list container." }, { "name": "removeListItem", "description": "Removes a list item (e.g., a component entry) from the DOM.", "parameters": ["button (HTMLElement)"], "logic": "Removes the parent element of the clicked button." }, { "name": "generateSystemMessage", "description": "Gathers data from all input fields, formats it into the system prompt template, and displays it in the preview pane.", "logic": "Collects values from input fields, textarea, and dynamically generated tags/list items. Constructs a JSON object with the gathered data. Replaces placeholders in the Lyra's prompt template with the collected data, ensuring JSON arrays are correctly stringified. Updates the 'preview-code' element with the final generated prompt." } ], "data_collection": "Collects data from all input fields, including text inputs, textareas, and dynamically generated tags/list items. Textarea values with multiple lines are split into arrays.", "template_integration": "Uses Lyra's provided `system_message_template` and replaces placeholders like `{{agent_name}}` with values gathered from the form. Ensures that array-based fields (attributes, KPIs, etc.) are stringified into valid JSON arrays for the template.", "preview_display": "The generated system message is displayed in a preformatted code block within the `preview-pane` element, making it easy to read and copy." }, "validation": { "basic_html_structure": "Ensured all required input fields have `required` attributes.", "javascript_validation": "Implicit validation through data collection: non-empty values are expected for required fields. More robust validation (e.g., specific formats for certain fields) could be added in `generateSystemMessage`.", "accessibility_notes": "Adheres to Aurora's `accessibility_notes`: sufficient color contrast, keyboard navigability (via standard HTML elements and focus management), clear labeling, semantic HTML structure, and descriptive error messages (though dynamic error message display is not explicitly implemented in this JS snippet, the structure supports it)." }, "responsiveness": { "media_queries": "Included CSS media queries to adjust layout for smaller screens (e.g., stacking sidebar and main content, making sidebar horizontal scrolling).", "flexible_layout": "Used Flexbox for overall layout (`container`, `sidebar`, `main-content`, `preview-pane`) to ensure adaptability." }, "performance_considerations": [ "Minimal DOM manipulation for responsiveness.", "Efficient event delegation where applicable.", "CSS is optimized for readability and maintainability.", "No external libraries are used for core functionality, reducing load times." ] } } - Initial Deployment
fd069bd
verified