@rglabs/butterfly 1.0.4 → 1.2.0

package/butterfly-resources/bfy_ai_tasks/generate-workflows/action_preview_code.bfy

@@ -0,0 +1,445 @@
+<script src="/assets/core/admin/js/tailwind/tailwind.js"></script>
+<script src="/assets/core/admin/js/mermaid/dist/mermaid.min.js"></script>
+
+{% set message = response.message %}
+{% set name = message.name|default('State Machine Diagram') %}
+{% set states = message.states %}
+{% set transitions = message.transitions %}
+{% set email_templates = message.email_templates|default([]) %}
+
+{# Generate incremental IDs for states #}
+{% set state_ids = {} %}
+{% for state in states %}
+    {% set state_ids = state_ids|merge({(state): 'state' ~ loop.index}) %}
+{% endfor %}
+
+{# Generate incremental IDs for transitions #}
+{% set transition_ids = [] %}
+{% for transition in transitions %}
+    {% set transition_ids = transition_ids|merge(['transition' ~ loop.index]) %}
+{% endfor %}
+
+{# Generate mermaid chart definition #}
+{% set mermaid_chart %}
+    stateDiagram-v2
+    {% if message.default_state_name is defined and message.default_state_name is not empty %}
+        [*] --> {{ state_ids[message.default_state_name] }}
+    {% elseif states|length > 0 %}
+        [*] --> {{ state_ids[states[0]] }}
+    {% endif %}
+
+    {% for state in states %}
+        {{ state_ids[state] }} : {{ state|replace({'"': '\\"', '\n': ' '}) }}
+    {% endfor %}
+
+    {% for transition in transitions %}
+        {{ state_ids[transition.from] }} --> {{ state_ids[transition.to] }} : {{ transition.button_title|default('Transition')|replace({'"': '\\"', '\n': ' '}) }}
+    {% endfor %}
+{% endset %}
+
+<div class="container mx-auto p-6 bg-gray-50">
+    <div class="bg-indigo-500 text-white p-4 rounded-t-xl">
+        <h2 class="text-2xl font-bold">{{ name|e }}</h2>
+    </div>
+
+    {% if transitions|length > 0 or email_templates|length > 0 %}
+        <div class="bg-white rounded-xl shadow-md px-6 pb-6 border border-gray-100">
+            <!-- Tab Navigation -->
+            <div class="border-b border-gray-200">
+                <nav class="-mb-px flex space-x-8">
+                    <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-indigo-500 text-indigo-600 active"
+                            data-target="diagram-tab">
+                        Diagram
+                    </button>
+                    {% if transitions|length > 0 %}
+                        <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                                data-target="transitions-tab">
+                            Transitions
+                        </button>
+                    {% endif %}
+                    {% if email_templates|length > 0 %}
+                        <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                                data-target="email-templates-tab">
+                            Email Templates
+                        </button>
+                    {% endif %}
+                </nav>
+            </div>
+
+            <!-- Tab Content -->
+            <div class="mt-6">
+                <!-- Diagram Tab (initially visible) -->
+                <div id="diagram-tab" class="tab-content block">
+                    <div class="flex justify-center">
+                    <pre class="mermaid-diagram w-full" id="state-machine-diagram">
+                        {{ mermaid_chart|trim }}
+                    </pre>
+                    </div>
+                </div>
+
+                <!-- Transitions Tab -->
+                {% if transitions|length > 0 %}
+                    <div id="transitions-tab" class="tab-content hidden">
+                        {% for transition in transitions %}
+                            <div class="mb-8 p-4 border rounded-lg bg-gray-50">
+                                <div class="flex justify-between mb-4">
+                                    <h3 class="text-lg font-bold">{{ transition.button_title|default('Transition') }}</h3>
+                                    <div class="text-sm text-gray-500">
+                                        {{ transition.from }} → {{ transition.to }}
+                                    </div>
+                                </div>
+
+                                <!-- Transition Content Tabs -->
+                                <div class="border-b border-gray-200 mb-4">
+                                    <nav class="-mb-px flex space-x-4">
+                                        <button class="transition-tab-button py-2 px-1 border-b-2 font-medium text-xs border-indigo-500 text-indigo-600 active"
+                                                data-target="transition-{{ loop.index }}-details">
+                                            Details
+                                        </button>
+{#                                        {% if transition.action_code is defined and transition.action_code is not empty %}#}
+{#                                            <button class="transition-tab-button py-2 px-1 border-b-2 font-medium text-xs border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"#}
+{#                                                    data-target="transition-{{ loop.index }}-action">#}
+{#                                                Action Code#}
+{#                                            </button>#}
+{#                                        {% endif %}#}
+{#                                        {% if transition.validation_code is defined and transition.validation_code is not empty %}#}
+{#                                            <button class="transition-tab-button py-2 px-1 border-b-2 font-medium text-xs border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"#}
+{#                                                    data-target="transition-{{ loop.index }}-validation">#}
+{#                                                Validation Code#}
+{#                                            </button>#}
+{#                                        {% endif %}#}
+{#                                        {% if transition.specs is defined and transition.specs is not empty %}#}
+{#                                            <button class="transition-tab-button py-2 px-1 border-b-2 font-medium text-xs border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"#}
+{#                                                    data-target="transition-{{ loop.index }}-specs">#}
+{#                                                Specs#}
+{#                                            </button>#}
+{#                                        {% endif %}#}
+                                    </nav>
+                                </div>
+
+                                <!-- Transition Tab Contents -->
+                                <div id="transition-{{ loop.index }}-details" class="transition-tab-content block">
+                                    <div class="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <p class="text-sm font-medium text-gray-500">From State</p>
+                                            <p class="mt-1">{{ transition.from }}</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-sm font-medium text-gray-500">To State</p>
+                                            <p class="mt-1">{{ transition.to }}</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-sm font-medium text-gray-500">Button Title</p>
+                                            <p class="mt-1">{{ transition.button_title|default('Transition') }}</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+{#                                {% if transition.action_code is defined and transition.action_code is not empty %}#}
+{#                                    <div id="transition-{{ loop.index }}-action" class="transition-tab-content hidden">#}
+{#                                        <div class="bg-gray-100 rounded p-3">#}
+{#                                            <h4 class="text-sm font-medium mb-2">Action Code</h4>#}
+{#                                            <pre class="bg-white p-3 rounded border overflow-x-auto text-xs">{{ transition.action_code }}</pre>#}
+{#                                            <div class="mt-4 text-xs text-gray-500">#}
+{#                                                <p>Action Code can trigger SMS, email, add DB records, take confirmation or give error.</p>#}
+{#                                                <p class="mt-1">- <code>info</code> is the parameter that has all information about current object record.</p>#}
+{#                                                <p>- <code>params</code> is the parameter that has all information entered to transition specs.</p>#}
+{#                                            </div>#}
+{#                                        </div>#}
+{#                                    </div>#}
+{#                                {% endif %}#}
+
+{#                                {% if transition.validation_code is defined and transition.validation_code is not empty %}#}
+{#                                    <div id="transition-{{ loop.index }}-validation" class="transition-tab-content hidden">#}
+{#                                        <div class="bg-gray-100 rounded p-3">#}
+{#                                            <h4 class="text-sm font-medium mb-2">Validation Code</h4>#}
+{#                                            <pre class="bg-white p-3 rounded border overflow-x-auto text-xs">{{ transition.validation_code }}</pre>#}
+{#                                            <div class="mt-4 text-xs text-gray-500">#}
+{#                                                <p>Validation Code makes it possible to disable or hide button (This is optional).</p>#}
+{#                                                <p class="mt-1">Examples:</p>#}
+{#                                                <ul class="list-disc pl-5 mt-1">#}
+{#                                                    <li><code>{{ validRequire('Message') }}</code> - Shows button but disabled with message</li>#}
+{#                                                    <li><code>{{ notValid() }}</code> - Hides button completely</li>#}
+{#                                                </ul>#}
+{#                                            </div>#}
+{#                                        </div>#}
+{#                                    </div>#}
+{#                                {% endif %}#}
+
+{#                                {% if transition.specs is defined and transition.specs is not empty %}#}
+{#                                    {% set specs = transition.specs|csv_to_array('#') %}#}
+{#                                    <div id="transition-{{ loop.index }}-specs" class="transition-tab-content hidden">#}
+{#                                        <div class="bg-gray-100 rounded p-3">#}
+{#                                            <h4 class="text-sm font-medium mb-2">Transition Specs</h4>#}
+{#                                            {% if specs is iterable %}#}
+{#                                                <div class="overflow-x-auto">#}
+{#                                                    <table class="min-w-full divide-y divide-gray-200 mt-2 text-xs">#}
+{#                                                        <thead class="bg-gray-50">#}
+{#                                                        <tr>#}
+{#                                                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>#}
+{#                                                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column Name</th>#}
+{#                                                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>#}
+{#                                                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Val 1</th>#}
+{#                                                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Val 2</th>#}
+{#                                                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Val 3</th>#}
+{#                                                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>#}
+{#                                                        </tr>#}
+{#                                                        </thead>#}
+{#                                                        <tbody class="bg-white divide-y divide-gray-200">#}
+{#                                                        {% for spec in specs %}#}
+{#                                                            <tr>#}
+{#                                                                <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">{{ spec.name }}</td>#}
+{#                                                                <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">{{ spec.column_name }}</td>#}
+{#                                                                <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">{{ spec.type }}</td>#}
+{#                                                                <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">{{ spec.val_1 }}</td>#}
+{#                                                                <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">{{ spec.val_2 }}</td>#}
+{#                                                                <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">{{ spec.val_3 }}</td>#}
+{#                                                                <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-500">#}
+{#                                                                    {% if spec.required == "1" %}#}
+{#                                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">#}
+{#                                                        Required#}
+{#                                                    </span>#}
+{#                                                                    {% else %}#}
+{#                                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">#}
+{#                                                        Optional#}
+{#                                                    </span>#}
+{#                                                                    {% endif %}#}
+{#                                                                </td>#}
+{#                                                            </tr>#}
+{#                                                        {% endfor %}#}
+{#                                                        </tbody>#}
+{#                                                    </table>#}
+{#                                                </div>#}
+{#                                            {% else %}#}
+{#                                                <pre class="bg-white p-3 rounded border overflow-x-auto text-xs">{{ transition.specs }}</pre>#}
+{#                                            {% endif %}#}
+{#                                            <div class="mt-4 text-xs text-gray-500">#}
+{#                                                <p>Transition specs are parameters that are requested when button is triggered.</p>#}
+{#                                            </div>#}
+{#                                        </div>#}
+{#                                    </div>#}
+{#                                {% endif %}#}
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+
+                <!-- Email Templates Tab -->
+                {% if email_templates|length > 0 %}
+                    <div id="email-templates-tab" class="tab-content hidden">
+                        <div class="grid grid-cols-1 gap-6">
+                            {% for template in email_templates %}
+                                <div class="border rounded-lg p-4 bg-gray-50">
+                                    <h4 class="font-bold text-lg mb-2">{{ template.name }}</h4>
+                                    <p class="text-sm text-gray-500 mb-4">System name: {{ template.system_name }}</p>
+
+                                    <!-- Email Template Tabs -->
+                                    <div class="border-b border-gray-200 mb-4">
+                                        <nav class="-mb-px flex space-x-4">
+                                            <button class="email-tab-button py-2 px-1 border-b-2 font-medium text-xs border-indigo-500 text-indigo-600 active"
+                                                    data-target="email-{{ loop.index }}-preview">
+                                                Preview
+                                            </button>
+                                            <button class="email-tab-button py-2 px-1 border-b-2 font-medium text-xs border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                                                    data-target="email-{{ loop.index }}-code">
+                                                Code
+                                            </button>
+                                        </nav>
+                                    </div>
+
+                                    <!-- Email Tab Contents -->
+                                    <div id="email-{{ loop.index }}-preview" class="email-tab-content block">
+                                        <div class="space-y-4">
+                                            <!-- Subject Preview -->
+                                            <div class="bg-gray-100 rounded p-3">
+                                                <h4 class="text-sm font-medium mb-2">Subject Preview</h4>
+                                                <div class="bg-white p-3 rounded border overflow-x-auto">
+                                                    {{ template.subject|raw }}
+                                                </div>
+                                            </div>
+
+                                            <!-- Content Preview -->
+                                            <div class="bg-gray-100 rounded p-3">
+                                                <h4 class="text-sm font-medium mb-2">Content Preview</h4>
+                                                <div class="bg-white p-3 rounded border overflow-x-auto">
+                                                    <div class="email-rendered-content">{{ template.template|raw }}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div id="email-{{ loop.index }}-code" class="email-tab-content hidden">
+                                        <div class="space-y-4">
+                                            <!-- Subject Code -->
+                                            <div class="bg-gray-100 rounded p-3">
+                                                <h4 class="text-sm font-medium mb-2">Subject Code</h4>
+                                                <pre class="bg-white p-3 rounded border overflow-x-auto text-xs">{{ template.subject }}</pre>
+                                            </div>
+
+                                            <!-- Content Code -->
+                                            <div class="bg-gray-100 rounded p-3">
+                                                <h4 class="text-sm font-medium mb-2">Content Code</h4>
+                                                <pre class="bg-white p-3 rounded border overflow-x-auto text-xs">{{ template.template }}</pre>
+                                                <div class="mt-2 text-xs text-gray-500">
+                                                    <p>Example usage in action code:</p>
+                                                    {% verbatim %}
+                                                        <pre class="bg-white p-2 rounded border mt-1 text-xs">{{ sendEmailWithTemplate('recipient@example.com', template.system_name, {"name": "John Doe"}) }}</pre>
+                                                    {% endverbatim %}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    {% endif %}
+</div>
+
+<script type="text/javascript">
+    function initMermaid() {
+        if (typeof mermaid === 'undefined') {
+            setTimeout(initMermaid, 500);
+            return;
+        }
+        mermaid.initialize({
+            startOnLoad: true,
+            theme: 'default',
+            securityLevel: 'loose'
+        });
+        const diagramDiv = document.getElementById('state-machine-diagram');
+        if (!diagramDiv) {
+            return;
+        }
+        const graphDefinition = diagramDiv.textContent.trim();
+        diagramDiv.innerHTML = '';
+        try {
+            mermaid.render('state-machine-svg', graphDefinition)
+                .then(result => {
+                    diagramDiv.innerHTML = result.svg;
+                    // Also update the diagram image in the tab
+                    const svgData = encodeURIComponent(result.svg);
+                    const img = document.getElementById('diagram-image');
+                    if (img) {
+                        img.src = 'data:image/svg+xml,' + svgData;
+                    }
+                })
+                .catch(error => {
+                    console.error("Mermaid rendering failed:", error);
+                    diagramDiv.innerHTML = '<div class="text-red-500">Error rendering diagram: ' + error.message + '</div>';
+                });
+        } catch (e) {
+            console.log("Using fallback mermaid rendering method", e);
+            setTimeout(() => {
+                try {
+                    mermaid.init(undefined, diagramDiv);
+                    // Try to get the SVG after initialization
+                    setTimeout(() => {
+                        const svg = diagramDiv.querySelector('svg');
+                        if (svg) {
+                            const svgData = encodeURIComponent(svg.outerHTML);
+                            const img = document.getElementById('diagram-image');
+                            if (img) {
+                                img.src = 'data:image/svg+xml,' + svgData;
+                            }
+                        }
+                    }, 200);
+                } catch (e2) {
+                    console.error("Fallback mermaid rendering failed:", e2);
+                    diagramDiv.innerHTML = '<div class="text-red-500">Error rendering diagram</div>';
+                }
+            }, 100);
+        }
+    }
+
+    // Tab functionality
+    function setupTabs() {
+        // Main tabs
+        const tabButtons = document.querySelectorAll('.tab-button');
+        tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                // Hide all tab contents
+                document.querySelectorAll('.tab-content').forEach(content => {
+                    content.classList.add('hidden');
+                    content.classList.remove('block');
+                });
+
+                // Deactivate all tab buttons
+                tabButtons.forEach(btn => {
+                    btn.classList.remove('border-indigo-500', 'text-indigo-600');
+                    btn.classList.add('border-transparent', 'text-gray-500');
+                });
+
+                // Activate clicked button
+                button.classList.remove('border-transparent', 'text-gray-500');
+                button.classList.add('border-indigo-500', 'text-indigo-600');
+
+                // Show corresponding tab content
+                const targetId = button.getAttribute('data-target');
+                const targetContent = document.getElementById(targetId);
+                if (targetContent) {
+                    targetContent.classList.remove('hidden');
+                    targetContent.classList.add('block');
+                }
+            });
+        });
+
+        // Transition tabs
+        setupNestedTabs('.transition-tab-button', '.transition-tab-content');
+
+        // Email tabs
+        setupNestedTabs('.email-tab-button', '.email-tab-content');
+    }
+
+    function setupNestedTabs(buttonSelector, contentSelector) {
+        const tabButtons = document.querySelectorAll(buttonSelector);
+        tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                // Get the parent element to scope the tab change
+                const parent = button.closest('.mb-8') || button.closest('.border');
+
+                // Hide all tab contents within this parent
+                parent.querySelectorAll(contentSelector).forEach(content => {
+                    content.classList.add('hidden');
+                    content.classList.remove('block');
+                });
+
+                // Deactivate all tab buttons within this parent
+                parent.querySelectorAll(buttonSelector).forEach(btn => {
+                    btn.classList.remove('border-indigo-500', 'text-indigo-600');
+                    btn.classList.add('border-transparent', 'text-gray-500');
+                });
+
+                // Activate clicked button
+                button.classList.remove('border-transparent', 'text-gray-500');
+                button.classList.add('border-indigo-500', 'text-indigo-600');
+
+                // Show corresponding tab content
+                const targetId = button.getAttribute('data-target');
+                const targetContent = document.getElementById(targetId);
+                if (targetContent) {
+                    targetContent.classList.remove('hidden');
+                    targetContent.classList.add('block');
+                }
+            });
+        });
+    }
+
+    if (typeof jQuery !== 'undefined') {
+        jQuery(document).ready(() => {
+            initMermaid();
+            setTimeout(setupTabs, 300); // Set a slight delay to ensure DOM is ready
+        });
+    } else if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            initMermaid();
+            setTimeout(setupTabs, 300);
+        });
+    } else {
+        initMermaid();
+        setTimeout(setupTabs, 300);
+    }
+</script>

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

@@ -0,0 +1,75 @@
+{{ tailwind() }}
+{# AI Workflow Generator Prompt UI - Premium Design #}
+<div class="flex flex-col items-center justify-center w-full h-full p-8 bg-gradient-to-br from-blue-50 via-white to-sky-50 rounded-xl shadow-lg">
+    <div class="w-full max-w-2xl text-center mb-6">
+        <div class="inline-flex items-center justify-center mb-4">
+      <span class="bg-blue-600 bg-opacity-10 p-2 rounded-lg">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+        </svg>
+      </span>
+        </div>
+        <h2 class="text-2xl font-bold text-gray-800 mb-2 tracking-tight">Design Intelligent Workflows with AI</h2>
+        <p class="text-gray-600 mb-1 max-w-lg mx-auto">
+            Describe your business process and let AI create automated workflows with steps and conditions.
+        </p>
+        <div class="flex justify-center space-x-1 mb-8">
+            <span class="h-1 w-12 bg-blue-600 rounded-full"></span>
+            <span class="h-1 w-2 bg-blue-300 rounded-full"></span>
+            <span class="h-1 w-2 bg-blue-300 rounded-full"></span>
+        </div>
+    </div>
+
+    <div class="w-full max-w-2xl relative mb-6 group">
+        <div class="absolute -inset-0.5 bg-gradient-to-r from-sky-600 to-blue-600 rounded-lg blur opacity-20 group-hover:opacity-30 transition duration-300"></div>
+        <div class="relative bg-white shadow-md rounded-lg p-6">
+            <label for="workflow-description" class="block text-sm font-semibold text-blue-800 mb-2">
+                Describe Your Workflow
+            </label>
+            <textarea
+                id="workflow-description"
+                rows="7"
+                placeholder="E.g., Create an employee onboarding workflow that starts when HR adds a new hire, sends welcome emails, assigns IT equipment, schedules orientation meetings, collects required documents, and notifies relevant departments with conditional steps based on role and department."
+                class="w-full px-4 py-3 border border-gray-200 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none bg-gray-50 placeholder-gray-400 transition duration-200"
+            >{{ getParameter('prompt')|default('') }}</textarea>
+        </div>
+    </div>
+
+    <div class="w-full max-w-2xl flex flex-col items-center justify-center mb-4">
+        <button
+            type="button"
+            id="generate-workflow-button"
+            class="px-6 py-3 bg-gradient-to-r from-blue-600 to-sky-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-sky-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-md transform hover:scale-105 transition duration-200 flex items-center mb-3"
+        >
+            <span class="mr-2">Generate Workflow Steps</span>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        </button>
+
+        <div class="text-center mt-2">
+            <a
+                href="/admin/bfy_ai_task/trigger?alias=butterfly-developer"
+                class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center justify-center transition duration-150"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+                Not sure what subtasks to create? Let the AI Developer help you plan
+            </a>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    $(document).ready(function() {
+        $('#generate-workflow-button').on('click', function() {
+            const promptText = $('#workflow-description').val().trim();
+            if (promptText) {
+                // Use the existing send-message functionality from the page
+                $('#prompt-input').val(promptText);
+                $('#send-message').click();
+            }
+        });
+    });
+</script>

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

@@ -0,0 +1,22 @@
+{
+    "name": "State Machine name",
+    "default_state_name": "",
+    "states": [
+        "State Names"
+    ],
+    "transitions": [
+        {
+            "from": "From State Name",
+            "to": "To State Name",
+            "button_title": "Transition Name"
+        }
+    ],
+    "email_templates": [
+        {
+            "name": "string",
+            "system_name": "string",
+            "subject": "TWIG Code",
+            "template": "TWIG Code"
+        }
+    ]
+}

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

@@ -0,0 +1,12 @@
+{{ params.prompt }}
+-----
+Be sure rows have all fields without any column number mismatch
+-----
+{% if params.response %}
+    Always give full response.
+    Previous response:
+    -----
+    {{ params.response }}
+{% endif %}
+----
+CSV should be seperated by '#'

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

@@ -0,0 +1,11 @@
+{% verbatim %}
+----
+Output Format
+---
+Email Template Example (Please make it look wonderful using tailwind)
+Dear {{ name }},<br /><br />
+
+You have been promoted.
+{% endverbatim %}
+---
+Vars can only be used in subject.

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

@@ -0,0 +1,17 @@
+{
+  "id": 7,
+  "order_no": 7,
+  "name": "Generate Workflows",
+  "bfy_ai_model_id": 1,
+  "response_type": "json",
+  "system_name": "generate-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": "GenerateWorkflows",
+  "bfy_ai_log_id": null,
+  "bfy_workspace_id": 1
+}