@rglabs/butterfly 1.0.4 → 1.2.0

package/butterfly-resources/bfy_ai_tasks/create-workflows/initial_code.bfy

@@ -0,0 +1,117 @@
+<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 p-8">
+    <div class="max-w-4xl mx-auto">
+        <!-- Header -->
+        <div class="text-center mb-8">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+            </div>
+            <h1 class="text-3xl font-bold text-gray-900 mb-2">AI Workflow Builder</h1>
+            <p class="text-lg text-gray-600">Describe your workflow in natural language and let AI create it for you</p>
+        </div>
+
+        <!-- Input Card -->
+        <div class="bg-white rounded-2xl shadow-xl p-8">
+            <div class="mb-6">
+                <label class="block text-sm font-semibold text-gray-700 mb-2">Describe Your Workflow</label>
+                <textarea id="prompt-input"
+                          class="w-full h-48 p-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all resize-none"
+                          placeholder="Example: Create a workflow that monitors a database table for new orders every 5 minutes. When a new order is found, send an email notification to the sales team with order details, then update the order status to 'processing'. If the order value is over $1000, also send a Slack message to the sales manager."></textarea>
+            </div>
+
+            <!-- Example Templates -->
+            <div class="mb-6">
+                <p class="text-sm font-semibold text-gray-700 mb-3">Quick Templates:</p>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <button onclick="setExample('data-sync')" class="text-left p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg hover:from-blue-100 hover:to-indigo-100 transition-all">
+                        <div class="font-medium text-gray-900 mb-1">Data Sync Workflow</div>
+                        <div class="text-sm text-gray-600">Sync data between APIs on schedule</div>
+                    </button>
+                    <button onclick="setExample('notification')" class="text-left p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg hover:from-purple-100 hover:to-pink-100 transition-all">
+                        <div class="font-medium text-gray-900 mb-1">Smart Notifications</div>
+                        <div class="text-sm text-gray-600">Send alerts based on conditions</div>
+                    </button>
+                    <button onclick="setExample('ai-processing')" class="text-left p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg hover:from-green-100 hover:to-emerald-100 transition-all">
+                        <div class="font-medium text-gray-900 mb-1">AI Processing</div>
+                        <div class="text-sm text-gray-600">Process data with AI models</div>
+                    </button>
+                    <button onclick="setExample('file-processing')" class="text-left p-4 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg hover:from-yellow-100 hover:to-orange-100 transition-all">
+                        <div class="font-medium text-gray-900 mb-1">File Processing</div>
+                        <div class="text-sm text-gray-600">Monitor and process files</div>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Action Button -->
+            <button id="send-message-initial"
+                    class="w-full py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-xl hover:from-indigo-700 hover:to-purple-700 transform hover:scale-[1.02] transition-all shadow-lg">
+                <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                </svg>
+                Generate Workflow
+            </button>
+        </div>
+
+        <!-- Tips -->
+        <div class="mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6">
+            <h3 class="font-semibold text-gray-900 mb-3 flex items-center">
+                <svg class="w-5 h-5 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                Tips for Better Results
+            </h3>
+            <ul class="space-y-2 text-sm text-gray-700">
+                <li class="flex items-start">
+                    <span class="text-indigo-600 mr-2">•</span>
+                    Be specific about triggers: "Every Monday at 9 AM" or "When a new file is uploaded"
+                </li>
+                <li class="flex items-start">
+                    <span class="text-indigo-600 mr-2">•</span>
+                    Describe the data flow: "Fetch data from API, transform it, then store in database"
+                </li>
+                <li class="flex items-start">
+                    <span class="text-indigo-600 mr-2">•</span>
+                    Include conditions: "If order value > $100, send premium notification"
+                </li>
+                <li class="flex items-start">
+                    <span class="text-indigo-600 mr-2">•</span>
+                    Specify integrations: "Send to Slack", "Store in MySQL", "Call OpenAI API"
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<script>
+function setExample(type) {
+    const examples = {
+        'data-sync': 'Create a workflow that runs every hour to sync customer data between our CRM API and database. Fetch new customers from the CRM API endpoint, transform the data to match our schema, check for duplicates, and insert new records into the MySQL customers table. Log all operations and send a summary email with the sync results.',
+
+        'notification': 'Build a workflow that monitors our orders database for high-value orders (over $5000). When detected, immediately send a Slack message to the sales-manager channel with order details, send a congratulations email to the sales representative, and update the order with a "high-value" tag. Include error handling for failed notifications.',
+
+        'ai-processing': 'Design a workflow triggered by webhook that receives customer feedback text. Use OpenAI to analyze the sentiment, categorize the feedback type, and extract key topics. If sentiment is negative, create a support ticket and notify the customer service team via email. Store all results in the feedback_analysis table.',
+
+        'file-processing': 'Create a workflow that watches a specific folder for new CSV files. When a file appears, parse it, validate the data format, transform date fields to MySQL format, and bulk insert records into the inventory table. Move processed files to an archive folder and failed files to an error folder. Send a processing report via email.'
+    };
+
+    document.getElementById('prompt-input').value = examples[type] || '';
+}
+
+$(document).ready(function() {
+    $('#send-message-initial').on('click', function() {
+        const prompt = $('#prompt-input').val();
+        if (prompt) {
+            // Use the existing send-message functionality from the page
+            $('#prompt-input').val(prompt);
+            $('#send-message').click();
+        }
+    });
+
+    $('#prompt-input').on('keydown', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+        }
+    });
+});
+</script>

package/butterfly-resources/bfy_ai_tasks/create-workflows/output_format.json

@@ -0,0 +1,25 @@
+{
+    "workflow": {
+        "name": "workflow_identifier",
+        "display_name": "Human Readable Name",
+        "description": "Description of the workflow"
+    },
+    "nodes": [
+        {
+            "node_id": "unique_node_id",
+            "node_type": "NodeType\\NodeName",
+            "position_x": 100,
+            "position_y": 100,
+            "params_json": "{\"param1\": \"value1\"}"
+        }
+    ],
+    "connections": [
+        {
+            "source_node_id": "node1",
+            "target_node_id": "node2",
+            "source_point": "output",
+            "target_point": "input"
+        }
+    ],
+    "response_message": "Optional explanation of the workflow"
+}

package/butterfly-resources/bfy_ai_tasks/create-workflows/prompt.bfy

@@ -0,0 +1,10 @@
+Create a workflow based on the following description:
+
+{{ params.prompt }}
+
+{% if params.response %}
+Previous response to refine:
+{{ params.response }}
+
+Please update the workflow based on my feedback above.
+{% endif %}

package/butterfly-resources/bfy_ai_tasks/create-workflows/system_message.bfy

@@ -0,0 +1,186 @@
+You are an AI assistant specialized in creating workflows for Butterfly CMS. Your task is to help users build visual workflows using nodes and connections based on their natural language descriptions.
+
+## Workflow Components
+
+### 1. Workflow Definition (bfy_workflows)
+Each workflow must have:
+- name: Unique workflow identifier (lowercase, underscores)
+- display_name: Human-readable name
+- description: Clear explanation of the workflow's purpose
+
+### 2. Available Node Types
+
+#### Trigger Nodes (Start Points)
+- Trigger\ManualTrigger: Manually triggered workflow
+- Trigger\WebHook: Triggered by incoming webhooks
+- Trigger\Schedule: Time-based triggers (cron expressions)
+- Trigger\HTTPPoll: Polls external HTTP endpoints
+- Trigger\DatabasePoll: Monitors database changes
+- Trigger\FileWatcher: Monitors file system changes
+- Trigger\EmailTrigger: Triggered by incoming emails
+- Trigger\ChatMessage: Triggered by chat messages
+- Trigger\UserInteraction: Requires user input
+
+#### Control Flow Nodes
+- Control\If: Conditional branching (outputs: true, false)
+- Control\Loop: Iterative execution
+- Control\Switch: Multiple conditional branches
+- Control\Wait: Delays execution (milliseconds)
+
+#### Data Processing Nodes
+- DataTransform\Filter: Filter arrays/collections
+- DataTransform\JSON: Parse/stringify JSON
+
+#### Communication/Connector Nodes
+- Connector\HTTPRequest: Make HTTP API calls
+- Connector\GraphQL: Execute GraphQL queries
+- Connector\RESTAPI: REST API operations
+- Connector\WebSocket: WebSocket connections
+- Connector\Mailer: Send emails
+- Connector\Output: Define workflow output
+- Connector\Logger: Log workflow data
+- Connector\Iyzico: Payment processing integration
+- Connector\Parasut: Accounting integration
+
+#### Database Nodes
+- Database\MySQL: MySQL operations
+- Database\MongoDB: MongoDB operations
+- Database\Redis: Redis cache operations
+- Database\CreateObjectRecord: Create Butterfly object records
+- DataSource\ContentPool: Access Butterfly content pools
+
+#### File System Nodes
+- FileOperations\ReadFile: Read file contents
+- FileOperations\WriteFile: Write to files
+- FileOperations\CSVParser: Parse CSV files
+
+#### AI/ML Nodes
+- AIService\OpenAI: OpenAI API integration
+- AIService\AIAgent: AI agent operations
+- AIService\SentimentAnalysis: Analyze text sentiment
+- AiModel: Execute AI models
+- AiTask: Execute Butterfly AI tasks
+
+#### Notification Nodes
+- Notification\Slack: Send Slack messages
+- Notification\Discord: Send Discord messages
+- Notification\SMS: Send SMS messages
+
+#### Third-Party Integration Nodes
+- ThirdParty\GoogleSheets: Google Sheets operations
+- ThirdParty\AWSS3: AWS S3 operations
+
+#### Utility Nodes
+- Utility\DateTime: Date/time operations
+- Utility\Hash: Generate hashes
+- Utility\UUIDGenerator: Generate UUIDs
+- Utility\Logger: Log messages
+
+#### Code Execution Nodes
+- Code\CustomScript: Execute custom scripts
+
+### 3. Node Configuration
+
+Each node has:
+- node_identifier_key: Class of the node e.g.: Schedule
+- node_group_class_name: Parent Name of the node e.g.: Trigger
+- position_x, position_y: Canvas position (grid-aligned to 20px)
+- params: JSON object with node-specific configuration
+
+### 4. Connections
+
+Connections link nodes:
+- source_node_id: Source node's unique ID
+- target_node_id: Target node's unique ID
+- source_point: Output connector name (e.g., "output", "true", "false")
+- target_point: Input connector name (usually "input")
+- Execution flows from source to target
+
+### 5. Common Workflow Patterns
+
+#### API Integration Pattern
+1. Schedule/WebHook trigger
+2. HTTPRequest/RESTAPI to fetch data
+3. JSON parse/transform
+4. Filter/process data
+5. Store in database or send notifications
+
+#### Data Processing Pattern
+1. DatabasePoll or FileWatcher trigger
+2. Read data (CSV/Database)
+3. Transform/filter data
+4. Write to file or database
+
+#### Notification Pattern
+1. Any trigger
+2. Conditional logic (If/Switch)
+3. Format message
+4. Send via Slack/Discord/SMS/Email
+
+#### AI Processing Pattern
+1. Manual/API trigger
+2. Prepare prompt/data
+3. Call AI service (OpenAI/AIAgent/AiTask)
+4. Process AI response
+5. Take action based on results
+
+## Output Format Rules
+
+Return workflow data in JSON format with:
+1. workflow: Object with name, display_name, description
+2. nodes: Array of node objects
+3. connections: Array of connection objects
+4. response_message: Optional explanation
+
+Position nodes logically:
+- Triggers on the left (x: 100-200)
+- Processing in middle (x: 400-800)
+- Outputs on right (x: 1000+)
+- Vertical spacing: 150-200px between parallel nodes
+
+## Node Parameter Examples
+
+### ManualTrigger
+```json
+"{}"
+```
+
+### Schedule Trigger
+```json
+"{\"cron\": \"0 9 * * *\", \"timezone\": \"UTC\"}"
+```
+
+### HTTPRequest
+```json
+"{\"url\": \"https://api.example.com/data\", \"method\": \"GET\", \"headers\": {\"Authorization\": \"Bearer {{token}}\"}}"
+```
+
+### If Node
+```json
+"{\"condition\": \"{{data.status}} === 'active'\"}"
+```
+
+### Mailer Node
+```json
+"{\"to\": \"{{user.email}}\", \"subject\": \"Workflow Notification\", \"body\": \"Your workflow has completed successfully.\"}"
+```
+
+### MySQL Node
+```json
+"{\"query\": \"SELECT * FROM users WHERE status = :status\", \"params\": {\":status\": \"active\"}}"
+```
+
+### OpenAI Node
+```json
+"{\"model\": \"gpt-4\", \"prompt\": \"Analyze this data: {{data}}\", \"temperature\": 0.7}"
+```
+
+## Best Practices
+
+1. Start with a trigger node
+2. End with Output or action nodes
+3. Use meaningful node identifiers
+4. Position nodes for visual clarity
+5. Keep workflows focused on a single purpose
+6. Add error handling with If nodes
+7. Use context variables ({{variable}}) for dynamic data

package/butterfly-resources/bfy_ai_tasks/create-workflows/task.json

@@ -0,0 +1,17 @@
+{
+  "id": 8,
+  "order_no": 8,
+  "name": "Create Workflows",
+  "bfy_ai_model_id": 1,
+  "response_type": "json",
+  "system_name": "create-workflows",
+  "parent_bfy_ai_task_id": 0,
+  "multiple_sub_tasks": null,
+  "is_bfy": 1,
+  "code_language": null,
+  "has_action": 1,
+  "include_chat_history": null,
+  "task_folder_name": "CreateWorkflows",
+  "bfy_ai_log_id": null,
+  "bfy_workspace_id": 1
+}

package/butterfly-resources/bfy_ai_tasks/cronjob-generator/action_code.bfy

@@ -0,0 +1,9 @@
+{% do crud()
+    .table('bfy_cronjobs')
+    .insert({
+        "name": response.name,
+        "description": response.description,
+        "running_interval": response.running_interval,
+        "code": response.code
+    })
+%}

package/butterfly-resources/bfy_ai_tasks/cronjob-generator/action_preview_code.bfy

@@ -0,0 +1,218 @@
+{{ tailwind()|raw }}
+<!-- Include Prism CSS and JS -->
+<link href="/assets/core/admin/js/prism/prism.min.css" rel="stylesheet" />
+<script src="/assets/core/admin/js/prism/prism.min.js"></script>
+<script src="/assets/core/admin/js/prism/prism-autoloader.min.js"></script>
+<!-- Include Prism Line Numbers plugin -->
+<link href="/assets/core/admin/js/prism/prism-line-numbers.min.css" rel="stylesheet" />
+<script src="/assets/core/admin/js/prism/prism-line-numbers.min.js"></script>
+
+<!-- Add custom style to hide mermaid content initially -->
+<style>
+    .mermaid-wrapper {
+        position: relative;
+    }
+    .mermaid-content {
+        visibility: hidden;
+    }
+    .mermaid-loading {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: white;
+    }
+</style>
+
+<div class="cronjob-preview-container bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-lg p-6 w-full max-w-4xl mx-auto my-8">
+    <div class="flex items-center mb-6">
+        <div class="bg-blue-500 p-2 rounded-lg shadow-md mr-3">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        </div>
+        <h2 class="text-2xl font-bold text-gray-800">Cronjob Preview</h2>
+    </div>
+
+    <div class="cronjob-details bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
+        {% if response.message is defined %}
+            <div class="mb-6">
+                <h3 class="text-xl font-semibold text-gray-800 mb-1">{{ response.message.name }}</h3>
+                <p class="text-gray-600">{{ response.message.description }}</p>
+            </div>
+
+            <div class="bg-gray-50 rounded-lg p-4 mb-6">
+                <div class="flex items-center mb-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <h4 class="font-medium text-gray-700">Schedule</h4>
+                </div>
+                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                    <code class="bg-gray-100 text-blue-800 px-3 py-1 rounded text-sm font-mono">{{ response.message.running_interval }}</code>
+                    <span class="text-gray-600 text-sm">{{ response.message.running_interval_description }}</span>
+                </div>
+            </div>
+
+            <!-- Tabs UI -->
+            <div class="mb-6">
+                <div class="border-b border-gray-200 mb-4">
+                    <nav class="flex -mb-px">
+                        <button id="diagram-tab" class="py-2 px-4 border-b-2 border-blue-500 text-blue-600 font-medium text-sm leading-5 focus:outline-none" aria-selected="true">
+                            Diagram
+                        </button>
+                        <button id="code-tab" class="py-2 px-4 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm leading-5 focus:outline-none">
+                            Code
+                        </button>
+                    </nav>
+                </div>
+
+                <!-- Tab contents -->
+                <div id="diagram-content" class="py-2">
+                    <div class="mermaid-wrapper min-h-64">
+                        <div class="mermaid-loading">
+                            <div class="text-gray-500">Loading diagram...</div>
+                        </div>
+                        <div class="mermaid bg-white rounded-lg p-4 min-h-64 mermaid-content">
+                            {{ response.message.mermaid_chart }}
+                        </div>
+                    </div>
+                </div>
+
+                <div id="code-content" class="py-2 hidden">
+                    <div class="overflow-auto max-h-80 rounded-lg">
+                        <pre class="language-twig"><code class="language-twig">{{ response.message.code }}</code></pre>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex justify-end gap-3">
+                <button class="inline-flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors text-sm font-medium shadow-sm hover:shadow focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                    </svg>
+                    Edit
+                </button>
+                <button class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-sm hover:shadow focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                    Save Cronjob
+                </button>
+            </div>
+        {% else %}
+            <div class="flex flex-col items-center justify-center p-8 text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <p class="text-lg font-medium">No cronjob data available</p>
+                <p class="text-sm text-gray-400 mt-1">Please generate a cronjob first</p>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+<script>
+    // Dynamically load the mermaid library
+    function loadMermaid() {
+        return new Promise((resolve, reject) => {
+            if (typeof mermaid !== 'undefined') {
+                resolve();
+                return;
+            }
+
+            const script = document.createElement('script');
+            script.src = "https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.7/mermaid.min.js";
+            script.onload = resolve;
+            script.onerror = reject;
+            document.head.appendChild(script);
+        });
+    }
+
+    // Add subtle animation for the cronjob preview using jQuery
+    $(document).ready(function() {
+        $('.cronjob-details').css({
+            'opacity': 0,
+            'transform': 'translateY(20px)'
+        });
+
+        setTimeout(() => {
+            $('.cronjob-details').css({
+                'transition': 'opacity 0.5s ease, transform 0.5s ease'
+            }).animate({
+                'opacity': 1
+            }, 500);
+            $('.cronjob-details').css('transform', 'translateY(0)');
+        }, 200);
+
+        // Add copy-to-clipboard functionality for code
+        $('.cronjob-details pre').click(function() {
+            const codeText = $(this).text();
+            navigator.clipboard.writeText(codeText).then(() => {
+                // Show a temporary notification
+                const notification = $('<div class="fixed top-4 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-lg z-50 opacity-0">Code copied to clipboard</div>');
+                $('body').append(notification);
+
+                notification.animate({
+                    opacity: 1
+                }, 300);
+
+                setTimeout(() => {
+                    notification.animate({
+                        opacity: 0
+                    }, 300, function() {
+                        $(this).remove();
+                    });
+                }, 2000);
+            });
+        });
+
+        // Tabs functionality
+        $('#diagram-tab').on('click', function() {
+            // Show diagram, hide code
+            $('#diagram-content').removeClass('hidden');
+            $('#code-content').addClass('hidden');
+
+            // Update tab styles
+            $('#diagram-tab').addClass('border-blue-500 text-blue-600').removeClass('border-transparent text-gray-500');
+            $('#code-tab').addClass('border-transparent text-gray-500').removeClass('border-blue-500 text-blue-600');
+        });
+
+        $('#code-tab').on('click', function() {
+            // Show code, hide diagram
+            $('#code-content').removeClass('hidden');
+            $('#diagram-content').addClass('hidden');
+
+            // Update tab styles
+            $('#code-tab').addClass('border-blue-500 text-blue-600').removeClass('border-transparent text-gray-500');
+            $('#diagram-tab').addClass('border-transparent text-gray-500').removeClass('border-blue-500 text-blue-600');
+        });
+
+        // Initialize mermaid
+        loadMermaid().then(() => {
+            mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: 'loose'
+            });
+
+            setTimeout(() => {
+                try {
+                    mermaid.init(undefined, document.querySelectorAll('.mermaid'));
+                    // Show the diagram after initialization
+                    $('.mermaid-content').css('visibility', 'visible');
+                    $('.mermaid-loading').hide();
+                } catch (e) {
+                    console.error('Mermaid initialization error:', e);
+                    $('.mermaid-loading').html('<div class="text-red-500">Error loading diagram</div>');
+                }
+            }, 500);
+        }).catch(e => {
+            console.error('Failed to load mermaid library:', e);
+            $('.mermaid-loading').html('<div class="text-red-500">Error loading diagram</div>');
+        });
+    });
+</script>

package/butterfly-resources/bfy_ai_tasks/cronjob-generator/output_format.json

@@ -0,0 +1,8 @@
+{
+    "name": "Name of the Cronjob",
+    "description": "Defines what cronjob does briefly but with full scope",
+    "code": "TWIG CODE",
+    "running_interval": "Suggested running interval crontab */5 * * * *",
+    "running_interval_description": "user friendly version",
+    "mermaid_chart": "mermaid representation of the code, including running_interval_description in the diagram"
+}

package/butterfly-resources/bfy_ai_tasks/cronjob-generator/prompt.bfy

@@ -0,0 +1,11 @@
+{{ params.prompt }}
+----
+{% if params.response %}
+    Always give full response.
+    Previous response:
+    -----
+    {{ params.response }}
+{% endif %}
+----
+Code section should be in twig code format.
+This is TWIG Code, don't use functions not defined below or in twig.

package/butterfly-resources/bfy_ai_tasks/cronjob-generator/system_message.bfy

@@ -0,0 +1,31 @@
+Example twig codes:
+--------
+{% set response = postRequest("https://www.example.com/api/test", {
+    "x": "test"
+}) %}
+--------
+{% set response = getRequest("https://www.example.com/api/test") %}
+--------
+{% for data in response.data %}
+    {% set recordId = crud('default', false)
+        .table('TABLE_NAME')
+        .insert({
+            "column_name": "value"
+        }).id
+    %}
+
+    {% set salary = db()
+        .from('second_table_name')
+        .where('record_id', recordId)
+        .first()
+    %}
+
+    {% do crud('default', false)
+        .table('second_table_name')
+        .update({
+            "id": salary.id,
+            "salary": salary * 1.2
+        })
+    %}
+{% endfor %}
+-------

package/butterfly-resources/bfy_ai_tasks/cronjob-generator/task.json

@@ -0,0 +1,18 @@
+{
+  "id": 11,
+  "order_no": 11,
+  "name": "Cronjob Generator",
+  "bfy_ai_model_id": 1,
+  "response_type": "json",
+  "system_name": "cronjob-generator",
+  "parent_bfy_ai_task_id": 0,
+  "multiple_sub_tasks": null,
+  "is_bfy": 1,
+  "code_language": null,
+  "has_action": 1,
+  "include_chat_history": null,
+  "initial_code": null,
+  "task_folder_name": "CronjobGenerator",
+  "bfy_ai_log_id": null,
+  "bfy_workspace_id": 1
+}