@rglabs/butterfly 1.0.4 → 1.2.0

package/butterfly-resources/bfy_ai_tasks/update-theme-settings/action_code.bfy

@@ -0,0 +1,208 @@
+{% set theme_settings = response.theme_settings|default({}) %}
+{% set settings = [] %}
+{% for key, value in theme_settings %}
+    {% set settings = settings|merge([{'setting_key': key, 'setting_value': value}]) %}
+{% endfor %}
+
+{% do registry('butterfly-bypass-type-checking', true) %}
+
+{# Initialize output message #}
+{% set output_message = [] %}
+{% do output_message|merge(['Starting theme settings update...']) %}
+
+{# Track processed settings #}
+{% set processed_settings = [] %}
+{% set success_count = 0 %}
+{% set error_count = 0 %}
+
+{# Get the admin-settings group ID #}
+{% set settings_group = db()
+    .from('cms_setting_groups')
+    .where('alias', 'admin-settings')
+    .first() %}
+
+{% if not settings_group %}
+    {% do output_message|merge(['Error: admin-settings group not found']) %}
+{% else %}
+    {% set group_id = settings_group.id %}
+    {% do output_message|merge(['Found settings group: ' ~ settings_group.name ~ ' (ID: ' ~ group_id ~ ')']) %}
+
+    {% do db()
+        .table('cms_settings')
+        .where('cms_setting_group_id', group_id)
+        .where('alias', 'theme')
+        .update({
+            "value": "Other"
+        }) %}
+
+    {% for setting in settings %}
+        {% if setting.setting_key is defined and setting.setting_value is defined %}
+            {# Check if setting already exists #}
+            {% set existing_setting = db()
+                .from('cms_settings')
+                .where('cms_setting_group_id', group_id)
+                .where('alias', setting.setting_key)
+                .first() %}
+
+            {% if existing_setting %}
+                {# Update existing setting #}
+                {% set update_result = db()
+                    .table('cms_settings')
+                    .where('id', existing_setting.id)
+                    .update({
+                        'value': setting.setting_value
+                    }) %}
+
+                {% set success_count = success_count + 1 %}
+                {% do output_message|merge(['Updated setting: ' ~ setting.setting_key ~ ' = ' ~ setting.setting_value]) %}
+
+                {# Add to processed settings #}
+                {% set processed_settings = processed_settings|merge([{
+                    'key': setting.setting_key,
+                    'value': setting.setting_value,
+                    'status': 'success',
+                    'action': 'updated'
+                }]) %}
+            {% endif %}
+        {% else %}
+            {% set error_count = error_count + 1 %}
+            {% do output_message|merge(['Invalid setting format: missing key or value']) %}
+
+            {# Add to processed settings for invalid format #}
+            {% set processed_settings = processed_settings|merge([{
+                'key': setting.setting_key|default('unknown'),
+                'value': setting.setting_value|default('unknown'),
+                'status': 'error',
+                'error': 'Missing key or value'
+            }]) %}
+        {% endif %}
+    {% endfor %}
+{% endif %}
+
+{% do output_message|merge(['Theme settings update completed.']) %}
+
+{# Display the output messages with Tailwind styling #}
+<div class="max-w-4xl mx-auto my-8 bg-white rounded-lg shadow-lg overflow-hidden">
+    <div class="bg-gradient-to-r from-purple-500 to-indigo-600 px-6 py-4">
+        <h2 class="text-xl font-bold text-white">Theme Settings Update Results</h2>
+    </div>
+
+    <div class="p-6">
+        {# Summary stats #}
+        <div class="flex mb-6 gap-4">
+            <div class="flex-1 bg-purple-50 rounded-lg p-4 border border-purple-100">
+                <div class="text-purple-500 text-sm font-medium">Total Settings</div>
+                <div class="text-2xl font-bold text-gray-800">{{ settings|length }}</div>
+            </div>
+            <div class="flex-1 bg-green-50 rounded-lg p-4 border border-green-100">
+                <div class="text-green-500 text-sm font-medium">Successful Updates</div>
+                <div class="text-2xl font-bold text-gray-800">{{ success_count }}</div>
+            </div>
+            <div class="flex-1 bg-red-50 rounded-lg p-4 border border-red-100">
+                <div class="text-red-500 text-sm font-medium">Errors</div>
+                <div class="text-2xl font-bold text-gray-800">{{ error_count }}</div>
+            </div>
+        </div>
+
+        {# Settings List #}
+        <div class="mb-6 border border-gray-200 rounded-lg overflow-hidden">
+            <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
+                <h3 class="font-medium text-gray-700">Updated Settings</h3>
+            </div>
+            <div class="p-4 space-y-3">
+                {% for setting in processed_settings %}
+                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <div class="flex items-center">
+                            {% if setting.status == 'success' %}
+                                <div class="w-5 h-5 mr-3 text-green-500 flex-shrink-0">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                            {% else %}
+                                <div class="w-5 h-5 mr-3 text-red-500 flex-shrink-0">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                            {% endif %}
+                            <div>
+                                <div class="font-medium text-gray-900">{{ setting.key }}</div>
+                                <div class="text-sm text-gray-500">{{ setting.value }}</div>
+                                {% if setting.error is defined %}
+                                    <div class="text-sm text-red-600">{{ setting.error }}</div>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            {% if setting.action is defined %}
+                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
+                                    {{ setting.action|title }}
+                                </span>
+                            {% endif %}
+                            <span class="px-2 py-1 text-xs font-medium rounded-full
+                                {% if setting.status == 'success' %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
+                                {{ setting.status|title }}
+                            </span>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+
+        {# Processing log #}
+        <div class="border border-gray-200 rounded-lg overflow-hidden">
+            <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
+                <h3 class="font-medium text-gray-700">Processing Log</h3>
+            </div>
+            <div class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
+                {% for message in output_message %}
+                    <div class="px-4 py-3 flex items-start">
+                        {% if 'Starting' in message or 'completed' in message %}
+                            <div class="flex-shrink-0 w-5 h-5 mt-0.5 mr-3 text-purple-500">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        {% elseif 'Updated' in message %}
+                            <div class="flex-shrink-0 w-5 h-5 mt-0.5 mr-3 text-green-500">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        {% elseif 'Error' in message %}
+                            <div class="flex-shrink-0 w-5 h-5 mt-0.5 mr-3 text-red-500">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        {% else %}
+                            <div class="flex-shrink-0 w-5 h-5 mt-0.5 mr-3 text-gray-400">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        {% endif %}
+                        <p class="text-gray-700">{{ message }}</p>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
+    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
+        <div class="flex items-center justify-between">
+            <span class="text-sm text-gray-500">{{ "now"|date("F d, Y H:i:s") }}</span>
+            <div class="flex space-x-2">
+                {% if success_count > 0 %}
+                    <a href="/admin" class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
+                        View Changes
+                    </a>
+                {% endif %}
+                <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
+                    Done
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

package/butterfly-resources/bfy_ai_tasks/update-theme-settings/action_preview_code.bfy

@@ -0,0 +1,211 @@
+<script src="/assets/core/admin/js/tailwind/tailwind.js"></script>
+
+{% set theme_settings = response.message.theme_settings|default({}) %}
+{% set settings = [] %}
+{% for key, value in theme_settings %}
+    {% set settings = settings|merge([{'setting_key': key, 'setting_value': value}]) %}
+{% endfor %}
+
+<div class="container mx-auto px-4 sm:px-6 py-6 bg-gray-50 max-w-full">
+    <h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-center text-gray-800">Theme Settings Preview</h2>
+
+    {% if settings|length > 0 %}
+        <div class="grid gap-4 sm:gap-6 grid-cols-1 lg:grid-cols-2">
+            {# Settings Overview Card #}
+            <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
+                <div class="bg-gradient-to-r from-purple-500 to-indigo-600 p-3 sm:p-4">
+                    <h3 class="text-base sm:text-lg font-semibold text-white">Settings to Update</h3>
+                    <p class="text-purple-100 text-xs sm:text-sm">{{ settings|length }} setting(s)</p>
+                </div>
+
+                <div class="p-3 sm:p-4">
+                    <div class="space-y-3">
+                        {% for setting in settings %}
+                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                                <div class="flex-1 min-w-0">
+                                    <div class="text-sm font-medium text-gray-900 truncate">
+                                        {{ setting.setting_key }}
+                                    </div>
+                                    <div class="text-xs text-gray-500 truncate">
+                                        admin-settings::{{ setting.setting_key }}
+                                    </div>
+                                </div>
+                                <div class="ml-3 flex-shrink-0">
+                                    {% if 'color' in setting.setting_key %}
+                                        <div class="flex items-center">
+                                            <div class="w-6 h-6 rounded border border-gray-300 mr-2" style="background-color: #{{ setting.setting_value }}"></div>
+                                            <span class="text-xs font-mono text-gray-600">#{{ setting.setting_value }}</span>
+                                        </div>
+                                    {% else %}
+                                        <span class="text-xs font-medium text-gray-700 bg-gray-200 px-2 py-1 rounded">
+                                            {{ setting.setting_value|slice(0, 20) }}{% if setting.setting_value|length > 20 %}...{% endif %}
+                                        </span>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+
+            {# Visual Preview Card #}
+            <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
+                <div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-3 sm:p-4">
+                    <h3 class="text-base sm:text-lg font-semibold text-white">Visual Preview</h3>
+                    <p class="text-indigo-100 text-xs sm:text-sm">How your admin panel will look</p>
+                </div>
+
+                <div class="p-3 sm:p-4">
+                    {# Extract colors for preview #}
+                    {% set left_menu_bg = theme_settings.left_menu_bg_color|default('21243d') %}
+                    {% set left_menu_link = theme_settings.left_menu_link_color|default('e2e8f0') %}
+                    {% set left_menu_hover = theme_settings.left_menu_hover_bg_color|default('334155') %}
+                    {% set dashboard_bg = theme_settings.theme_dashboard_bg_color|default('f8fafc') %}
+                    {% set primary_bg = theme_settings.theme_primary_bg_color|default('3b82f6') %}
+                    {% set primary_color = theme_settings.theme_primary_color|default('ffffff') %}
+                    {% set primary_hover = theme_settings.theme_primary_hover_color|default('1e40af') %}
+                    {% set secondary_bg = theme_settings.theme_secondary_bg_color|default('6b7280') %}
+                    {% set secondary_color = theme_settings.theme_secondary_color|default('ffffff') %}
+                    {% set tab_bg = theme_settings.theme_tab_bg_color|default('ffffff') %}
+                    {% set tab_color = theme_settings.theme_tab_content_color|default('374151') %}
+
+                    {# Enhanced admin panel preview #}
+                    <div class="border border-gray-200 rounded-lg overflow-hidden">
+                        <div class="flex" style="height: 280px;">
+                            {# Left menu preview with more detail #}
+                            <div class="w-20 flex flex-col py-3" style="background-color: #{{ left_menu_bg }}">
+                                {# Logo area #}
+                                <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full mb-4 mx-auto"></div>
+
+                                {# Menu items #}
+                                <div class="space-y-2 flex-1">
+                                    <div class="w-8 h-8 mx-auto rounded flex items-center justify-center" style="{% if left_menu_link %}color: #{{ left_menu_link }};{% endif %}">
+                                        <div class="w-4 h-4 bg-current opacity-70 rounded"></div>
+                                    </div>
+                                    <div class="w-8 h-8 mx-auto rounded flex items-center justify-center" style="background-color: #{{ left_menu_hover }}; {% if left_menu_link %}color: #{{ left_menu_link }};{% endif %}">
+                                        <div class="w-4 h-4 bg-current rounded"></div>
+                                    </div>
+                                    <div class="w-8 h-8 mx-auto rounded flex items-center justify-center" style="{% if left_menu_link %}color: #{{ left_menu_link }};{% endif %}">
+                                        <div class="w-4 h-4 bg-current opacity-70 rounded"></div>
+                                    </div>
+                                </div>
+
+                                {# User profile area #}
+                                <div class="w-8 h-8 mx-auto rounded-full flex items-center justify-center text-xs" style="background-color: #{{ primary_bg }}; color: #{{ primary_color }}">
+                                    U
+                                </div>
+                            </div>
+
+                            {# Main content preview #}
+                            <div class="flex-1 flex flex-col" style="background-color: #{{ dashboard_bg }}">
+                                {# Top navigation bar #}
+                                <div class="h-14 bg-white border-b border-gray-200 flex items-center px-4 justify-between">
+                                    <div class="flex items-center">
+                                        <div class="text-lg font-semibold text-gray-800">Dashboard</div>
+                                    </div>
+                                    <div class="flex items-center space-x-2">
+                                        <div class="px-3 py-1 rounded text-xs" style="background-color: #{{ primary_bg }}; color: #{{ primary_color }}">
+                                            Action
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {# Content area with tabs and buttons #}
+                                <div class="flex-1 p-4">
+                                    {# Tab example #}
+                                    <div class="mb-4">
+                                        <div class="flex border-b border-gray-200">
+                                            <div class="px-4 py-2 text-sm bg-white" style="color: #{{ primary_bg }};">
+                                                Active Tab
+                                            </div>
+                                            <div class="px-4 py-2 text-sm text-gray-500 bg-white">
+                                                Inactive Tab
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {# Content cards #}
+                                    <div class="grid grid-cols-2 gap-3 mb-4">
+                                        <div class="h-12 bg-white border border-gray-200 rounded-lg"></div>
+                                        <div class="h-12 bg-white border border-gray-200 rounded-lg"></div>
+                                    </div>
+
+                                    {# Button examples #}
+                                    <div class="space-y-2">
+                                        <div class="flex space-x-2">
+                                            <div class="px-4 py-2 rounded text-xs font-medium" style="background-color: #{{ primary_bg }}; color: #{{ primary_color }}">
+                                                Primary Button
+                                            </div>
+                                            <div class="px-4 py-2 rounded text-xs font-medium" style="background-color: #{{ secondary_bg }}; color: #{{ secondary_color }}">
+                                                Secondary
+                                            </div>
+                                        </div>
+
+                                        {# Filter/Option button example #}
+                                        <div class="flex items-center space-x-1">
+                                            <div class="w-6 h-6 rounded border border-gray-300 flex items-center justify-center" style="background-color: #{{ primary_bg }}">
+                                                <div class="w-2 h-2 rounded-full" style="background-color: #{{ primary_color }}"></div>
+                                            </div>
+                                            <span class="text-xs text-gray-600">Filter Option</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mt-4 space-y-2">
+                        <div class="text-xs text-gray-500">
+                            <p>* This preview shows how your selected colors will appear in the admin interface.</p>
+                        </div>
+
+                        {# Color usage legend #}
+                        <div class="text-xs text-gray-400 space-y-1">
+                            <div class="grid grid-cols-2 gap-2">
+                                {% if theme_settings.left_menu_bg_color %}
+                                    <div class="flex items-center space-x-2">
+                                        <div class="w-3 h-3 rounded border" style="background-color: #{{ theme_settings.left_menu_bg_color }}"></div>
+                                        <span>Left Menu</span>
+                                    </div>
+                                {% endif %}
+                                {% if theme_settings.theme_primary_bg_color %}
+                                    <div class="flex items-center space-x-2">
+                                        <div class="w-3 h-3 rounded border" style="background-color: #{{ theme_settings.theme_primary_bg_color }}"></div>
+                                        <span>Primary Actions</span>
+                                    </div>
+                                {% endif %}
+                                {% if theme_settings.theme_dashboard_bg_color %}
+                                    <div class="flex items-center space-x-2">
+                                        <div class="w-3 h-3 rounded border" style="background-color: #{{ theme_settings.theme_dashboard_bg_color }}"></div>
+                                        <span>Content Area</span>
+                                    </div>
+                                {% endif %}
+                                {% if theme_settings.theme_secondary_bg_color %}
+                                    <div class="flex items-center space-x-2">
+                                        <div class="w-3 h-3 rounded border" style="background-color: #{{ theme_settings.theme_secondary_bg_color }}"></div>
+                                        <span>Secondary Actions</span>
+                                    </div>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% else %}
+        <div class="text-center py-8 sm:py-12">
+            <svg class="mx-auto h-10 w-10 sm:h-12 sm:w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v6a2 2 0 002 2h4a4 4 0 014 4v1a2 2 0 01-2 2h-4a2 2 0 01-2-2v-1a4 4 0 014-4V5z" />
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">No theme settings to preview</h3>
+            <p class="mt-1 text-xs sm:text-sm text-gray-500">Add some theme settings to see a preview.</p>
+        </div>
+    {% endif %}
+</div>
+
+<script>
+    $(document).ready(function() {
+        // Add any interactive features for the preview
+        console.log('Theme settings preview loaded');
+    });
+</script>

package/butterfly-resources/bfy_ai_tasks/update-theme-settings/initial_code.bfy

@@ -0,0 +1,101 @@
+{{ tailwind() }}
+{# AI Theme Settings Update Prompt UI #}
+<div class="flex flex-col items-center justify-center w-full h-full p-8 bg-gradient-to-br from-purple-50 via-white to-indigo-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-purple-600 bg-opacity-10 p-2 rounded-lg">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v6a2 2 0 002 2h4a4 4 0 014 4v1a2 2 0 01-2 2h-4a2 2 0 01-2-2v-1a4 4 0 014-4V5z" />
+                </svg>
+            </span>
+        </div>
+        <h2 class="text-2xl font-bold text-gray-800 mb-2 tracking-tight">Update Theme Settings with AI</h2>
+        <p class="text-gray-600 mb-1 max-w-lg mx-auto">
+            Describe the theme changes you want and let AI update the admin panel appearance.
+        </p>
+        <div class="flex justify-center space-x-1 mb-8">
+            <span class="h-1 w-12 bg-purple-600 rounded-full"></span>
+            <span class="h-1 w-2 bg-purple-300 rounded-full"></span>
+            <span class="h-1 w-2 bg-purple-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-purple-600 to-indigo-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="theme-description" class="block text-sm font-semibold text-purple-800 mb-2">
+                Describe Theme Changes
+            </label>
+            <textarea
+                id="theme-description"
+                rows="7"
+                placeholder="E.g., Change the admin theme to dark mode with a blue accent color. Update the logo to use our company logo and make the menu background dark gray. Set primary buttons to blue and secondary buttons to green."
+                class="w-full px-4 py-3 border border-gray-200 rounded-lg shadow-inner focus:ring-2 focus:ring-purple-500 focus:border-purple-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 mb-4">
+        <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
+            <h3 class="text-sm font-semibold text-gray-700 mb-3">Current Theme Settings</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
+                <div class="flex justify-between">
+                    <span class="text-gray-600">Theme:</span>
+                    <span class="font-medium">{{ setting('admin-settings', 'theme')|default('Default') }}</span>
+                </div>
+                <div class="flex justify-between">
+                    <span class="text-gray-600">Logo:</span>
+                    <span class="font-medium">{{ setting('admin-settings', 'admin_logo') ? 'Custom' : 'Default' }}</span>
+                </div>
+                {% if setting('admin-settings', 'theme') == 'Other' %}
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">Primary Color:</span>
+                        <span class="font-medium">#{{ setting('admin-settings', 'theme_primary_bg_color')|default('000') }}</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-600">Menu Background:</span>
+                        <span class="font-medium">#{{ setting('admin-settings', 'left_menu_bg_color')|default('21243d') }}</span>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full max-w-2xl flex flex-col items-center justify-center mb-4">
+        <button
+            type="button"
+            id="update-theme-button"
+            class="px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium rounded-lg hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 shadow-md transform hover:scale-105 transition duration-200 flex items-center mb-3"
+        >
+            <span class="mr-2">Update Theme Settings</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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v6a2 2 0 002 2h4a4 4 0 014 4v1a2 2 0 01-2 2h-4a2 2 0 01-2-2v-1a4 4 0 014-4V5z" />
+            </svg>
+        </button>
+
+        <div class="text-center mt-2">
+            <a
+                href="/admin/bfy_ai_task/trigger?alias=butterfly-developer"
+                class="text-purple-600 hover:text-purple-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>
+                Need help with complex theme customization? Ask the AI Developer
+            </a>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    $(document).ready(function() {
+        $('#update-theme-button').on('click', function() {
+            const promptText = $('#theme-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/update-theme-settings/output_format.json

@@ -0,0 +1,17 @@
+{
+    "theme_settings": {
+        "left_menu_bg_color": "hex color code without #",
+        "left_menu_link_color": "hex color code without #",
+        "left_menu_hover_bg_color": "hex color code without #",
+        "theme_primary_bg_color": "hex color code without #",
+        "theme_primary_color": "hex color code without #",
+        "theme_primary_hover_color": "hex color code without #",
+        "theme_secondary_bg_color": "hex color code without #",
+        "theme_secondary_color": "hex color code without #",
+        "theme_secondary_hover_color": "hex color code without #",
+        "theme_dashboard_bg_color": "hex color code without #",
+        "theme_tab_bg_color": "hex color code without #",
+        "theme_tab_content_color": "hex color code without #"
+    },
+    "response_message": "Explain what theme settings you updated and why"
+}

package/butterfly-resources/bfy_ai_tasks/update-theme-settings/prompt.bfy

@@ -0,0 +1,13 @@
+{{ params.prompt }}
+-----
+Provide the theme settings to update based on the user's request.
+-----
+{% if params.response %}
+    Always give full response.
+    Previous response:
+    -----
+    {{ params.response }}
+{% endif %}
+-----
+CSV should be ` separated
+Only include settings that need to be changed

package/butterfly-resources/bfy_ai_tasks/update-theme-settings/system_message.bfy

@@ -0,0 +1,25 @@
+You are a Butterfly CMS theme configuration assistant. Your task is to help users update theme settings for the admin panel.
+
+Available theme settings in Butterfly CMS:
+
+- left_menu_bg_color: Background color for the left navigation menu (hex without #)
+- left_menu_link_color: Text color for menu links (hex without #)
+- left_menu_hover_bg_color: Background color for menu items on hover (hex without #)
+- theme_primary_bg_color: Primary theme background color (hex without #)
+- theme_primary_color: Primary theme text color (hex without #)
+- theme_primary_hover_color: Primary theme hover color (hex without #)
+- theme_secondary_bg_color: Secondary theme background color (hex without #)
+- theme_secondary_color: Secondary theme text color (hex without #)
+- theme_secondary_hover_color: Secondary theme hover color (hex without #)
+- theme_dashboard_bg_color: Dashboard background color - don't make it just white but a very light color alternative (hex without #)
+- theme_tab_bg_color: Tab background color (hex without #)
+- theme_tab_content_color: Tab content text color (hex without #)
+
+Settings are stored with the prefix "admin-settings::" (e.g., "admin-settings::theme", "admin-settings::admin_logo")
+
+Important Notes:
+- All color values should be provided as hex codes WITHOUT the # symbol
+- Always provide ALL theme settings for complete theme configuration
+- Setting keys should NOT include the "admin-settings::" prefix
+- Ensure colors work together as a cohesive theme
+- Consider accessibility and contrast requirements

package/butterfly-resources/bfy_ai_tasks/update-theme-settings/task.json

@@ -0,0 +1,17 @@
+{
+  "id": 15,
+  "order_no": 15,
+  "name": "Update Theme Settings",
+  "bfy_ai_model_id": 1,
+  "response_type": "json",
+  "system_name": "update-theme-settings",
+  "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": "UpdateThemeSettings",
+  "bfy_ai_log_id": null,
+  "bfy_workspace_id": 1
+}

package/butterfly-resources/bfy_ai_tasks/whatsapp-integration/action_code.bfy

@@ -0,0 +1,20 @@
+{% set pageId = db()
+    .from('pages')
+    .where('link', 'whatsapp-callback')
+    .one('id')
+%}
+
+{% if pageId %}
+    {{ crud().table('pages').update({
+        "id": pageId,
+        "link": "whatsapp-callback",
+        "status": 2,
+        "page_code": response.page_code
+    })|json_encode|raw }}
+{% else %}
+    {{ crud().table('pages').insert({
+        "link": "whatsapp-callback",
+        "status": 2,
+        "page_code": response.page_code
+    })|json_encode|raw }}
+{% endif %}