@rglabs/butterfly 1.0.4 → 1.2.0

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

@@ -0,0 +1,92 @@
+When using Butterfly, for a project following components can be done.
+
+Object Specs should be defined right after objects.
+
+1) Objects
+- Objects are database table definitions in Butterfly. Object creation example:
+- Try to group objects in a single parent menu as much as possible. If you can't find a suitable parent menu, create a new one.
+
+"name": "User friendly name of the Object. Example: Articles",
+"table_name": "Table name of the object. It should be exactly like to source table",
+"database_alias": "default",
+"has_item": "0",
+"seo": "",
+"menu_path": "Menu Path of the object in Admin Panel. Example: Contents::icon-class>Articles::icon-class>Article (Exact depth should be 3, icon-class should be selected from Lucide Icons.)",
+"section_title": "Short name of the object to be displayed in tabs",
+"auto_increment_column_name": "identifier column name"
+
+2) Object Specs
+- Object specs are table columns with more definitive to be able to handled in Admin Panel.
+Don't include the column which is equal to auto_increment_column_name
+
+"name": "User friendly name of the  Object Spec",
+"column_name": "Table name of the object, we use plural form of tables with lowercase letters. Example: category_id. We use {singular_table_name}_id, when multiple {singular_table_name}_ids when it's connected to other object",
+"type": "types can be selected from the attached list",
+"val_1": "val_1 if applicable from the attached list else 0",
+"val_2": "val_2 if applicable from the attached list else 0",
+"val_3": "val_3 if applicable from the attached list else 0",
+"val_4": "val_4 if applicable from the attached list else 0",
+"val_5": "val_5 if applicable from the attached list else 0",
+"column_size": "Strictly select from values: 1, 1/2, 1/3, 2/3, 1/4, 3/4. Be sure that sum of columns in a row equal to 1.",
+"required": "1 or 0",
+"list_column": "If this is a column that should be listed in listing page 1 or 0",
+"search_column": "1 or 0 if the column can be searched or not.",
+"is_displayed_in_filter": "1 or 0. Define only 1 main spec that can be used most ofthen for searches"
+"tab_title": "Title to group specs"
+"tab_placement": "0 for left, 1 for right"
+
+- Split page into 2 using tab_placement nearly same amount of fields.
+
+Object Spec Types:
+-----
+string
+integer
+float
+checkbox (Example values: 1, 0),
+date: (Example value: 2025-01-01),
+datetime: (integer value of timestamp)
+datetime_mysql: (example value: 2025-01-01 12:12:12)
+time: (Example value: 11:00)
+status (With no parameters, it creates a dropdown with following statuses: 1:Waiting Approval, 2:Active, 3: Passive)
+dropdown: (For not growing data like categories, types etc. It gets data from another object only with the following parameters -> val_1: table_name, val_2: display column name (calculated is not supported, just column_name, no sql function), val_3: value colum name)
+multidropdown: (Example value: 1,2,3. It gets data from another object only with the following parameters -> val_1: object_id, val_2: display column name (calculated is not supported, just column_name, no sql function), val_3: value colum name)
+autocomplete: (For growing data like projects,customers etc. It gets data from another object only with the following parameters -> val_1: table_name, val_2: display column name (calculated is not supported, just column_name, no sql function), val_3: value colum name)
+tag: (Example Value: 1,2,3. It gets data from another object only with the following parameters -> val_1: table_name, val_2: display column name (calculated is not supported, just column_name, no sql function), val_3: value colum name)
+from_list: (val_1: 1:Option 1|2: Option 2...)
+tag: (val_1: table_name, val_2: display column name, val_3: value colum name)
+remote_image: (val_1: "content")
+file_upload: (val_1: "upload")
+textarea,
+textarea_with_editor: (val_1: "content")
+map: (Example value: 30.12123,40.123123)
+color_picker: (val_1: 1)
+---
+calculated:
+These are the object specs but they don't have a value in the database. They are just used to make admin panel more informative or more attractive.
+type: calculated
+val_1: TWIG_CODE
+
+Example:
+{% verbatim %}
+{% set orderItemCount = db().table('order_items').where('order_id', info.id).count() %}
+<div class="TAILWIND CLASSES">
+There arae {{ orderItemCount }} items in this order.
+</div>
+{% endverbatim %}
+---
+
+Output Format:
+
+objects (first line is column names, don't replace this):
+name`table_name`database_alias`has_item`seo`menu_path`section_title`auto_increment_column_name
+...objects...
+
+specs (first line is column names, don't replace this):
+table_name`name`column_name`type`val_1`val_2`val_3`val_4`val_5`column_size`required`tab_title`tab_placement`list_column`search_column`is_displayed_in_filter
+...specs...
+
+sample_records:
+id`...columns...
+
+- Always double check if csv is valid for all lines.
+- There shouldn't be any ` in the values to prevent conflicts on csv.

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

@@ -0,0 +1,17 @@
+{
+  "id": 2,
+  "order_no": 2,
+  "name": "Create Objects",
+  "bfy_ai_model_id": 1,
+  "response_type": "json",
+  "system_name": "create-objects",
+  "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": "CreateObjects",
+  "bfy_ai_log_id": null,
+  "bfy_workspace_id": 1
+}

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

@@ -0,0 +1,198 @@
+{% set message = response %}
+{% set success_count = 0 %}
+{% set error_count = 0 %}
+{% set created_items = [] %}
+{% set processing_log = [] %}
+
+{# Enable type bypass for flexibility #}
+{{ registry('butterfly-bypass-type-checking', true) }}
+
+<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 p-8">
+    <div class="max-w-6xl mx-auto">
+        <!-- Header -->
+        <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <h2 class="text-2xl font-bold text-gray-900">Creating Workflow</h2>
+                    <p class="text-gray-600 mt-1">Processing your AI-generated workflow...</p>
+                </div>
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+            </div>
+        </div>
+
+        {% if message.workflow and message.nodes and message.connections %}
+            {% set workflow_data = message.workflow %}
+            {% set nodes_data = message.nodes %}
+            {% set connections_data = message.connections %}
+
+            {# Step 1: Create Workflow #}
+            {% if workflow_data %}
+                {% set workflow = workflow_data %}
+
+                {# Create the workflow record #}
+                {% set workflow_result = crud().table('bfy_workflows').insert({
+                    'name': workflow.name,
+                    'display_name': workflow.display_name,
+                    'description': workflow.description
+                }) %}
+
+                {% if workflow_result.success %}
+                    {% set workflow_id = workflow_result.id %}
+                    {% set success_count = success_count + 1 %}
+                    {% set created_items = created_items|merge([{'type': 'Workflow', 'name': workflow.display_name, 'id': workflow_id}]) %}
+                    {% set processing_log = processing_log|merge(['✓ Created workflow: ' ~ workflow.display_name ~ ' (ID: ' ~ workflow_id ~ ')']) %}
+
+                    {% set version_id = workflow_result.data.bfy_workflow_version_id %}
+                    {% set success_count = success_count + 1 %}
+                    {% set processing_log = processing_log|merge(['✓ Created version 1 (ID: ' ~ version_id ~ ')']) %}
+
+                    {# Update workflow with current version #}
+                    {% set update_result = crud().table('bfy_workflows').where('id', workflow_id).update({
+                        'bfy_workflow_version_id': version_id
+                    }) %}
+
+                    {# Step 2: Create Nodes #}
+                    {% set node_mapping = {} %}
+                    {% for node in nodes_data %}
+                        {% set nodeClass = node.node_type|split('\\') %}
+
+                        {% set node_result = crud().table('bfy_workflow_nodes').insert({
+                            'bfy_workflow_id': workflow_id,
+                            'title': node.title|default(node.node_type),
+                            'bfy_workflow_version_id': version_id,
+                            'node_group_class_name': nodeClass[0],
+                            'node_identifier_key': nodeClass[1],
+                            'position_x': node.position_x|default(100),
+                            'position_y': node.position_y|default(100),
+                            'params': node.params|json_encode|default('{}')
+                        }) %}
+
+                        {% if node_result.success %}
+                            {% set node_mapping = node_mapping|merge({(node.node_id): node_result.id}) %}
+                            {% set success_count = success_count + 1 %}
+                            {% set created_items = created_items|merge([{'type': 'Node', 'name': node.node_type ~ ' (' ~ node.node_id ~ ')', 'id': node_result.id}]) %}
+                            {% set processing_log = processing_log|merge(['✓ Created node: ' ~ node.node_type ~ ' (' ~ node.node_id ~ ')']) %}
+                        {% else %}
+                            {% set error_count = error_count + 1 %}
+                            {% set processing_log = processing_log|merge(['✗ Failed to create node: ' ~ node.node_type ~ ' - ' ~ node_result.message|default('Unknown error')]) %}
+                        {% endif %}
+                    {% endfor %}
+
+                    {# Step 3: Create Connections #}
+                    {% for connection in connections_data %}
+                        {% if node_mapping[connection.source_node_id] is defined and node_mapping[connection.target_node_id] is defined %}
+                            {% set connection_result = crud().table('bfy_workflow_connections').insert({
+                                'bfy_workflow_version_id': version_id,
+                                'source_bfy_workflow_node_id': node_mapping[connection.source_node_id],
+                                'target_bfy_workflow_node_id': node_mapping[connection.target_node_id],
+                                'source_point': connection.source_point|default('output'),
+                                'target_point': connection.target_point|default('input')
+                            }) %}
+
+                            {% if connection_result.success %}
+                                {% set success_count = success_count + 1 %}
+                                {% set created_items = created_items|merge([{'type': 'Connection', 'name': connection.source_node_id ~ ' → ' ~ connection.target_node_id, 'id': connection_result.id}]) %}
+                                {% set processing_log = processing_log|merge(['✓ Created connection: ' ~ connection.source_node_id ~ ' → ' ~ connection.target_node_id]) %}
+                            {% else %}
+                                {% set error_count = error_count + 1 %}
+                                {% set processing_log = processing_log|merge(['✗ Failed to create connection: ' ~ connection.source_node_id ~ ' → ' ~ connection.target_node_id ~ ' - ' ~ connection_result.message|default('Unknown error')]) %}
+                            {% endif %}
+                        {% else %}
+                            {% set error_count = error_count + 1 %}
+                            {% set processing_log = processing_log|merge(['✗ Cannot create connection: Missing node mapping for ' ~ connection.source_node_id ~ ' or ' ~ connection.target_node_id]) %}
+                        {% endif %}
+                    {% endfor %}
+                {% else %}
+                    {% set error_count = error_count + 1 %}
+                    {% set processing_log = processing_log|merge(['✗ Failed to create workflow: ' ~ workflow_result.message|default('Unknown error')]) %}
+                {% endif %}
+            {% endif %}
+
+            <!-- Results Summary -->
+            <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+                <h3 class="text-xl font-bold text-gray-900 mb-4">Creation Results</h3>
+
+                <!-- Statistics -->
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                    <div class="bg-green-50 rounded-lg p-4">
+                        <div class="text-2xl font-bold text-green-600">{{ success_count }}</div>
+                        <div class="text-sm text-green-700">Successful</div>
+                    </div>
+                    <div class="bg-red-50 rounded-lg p-4">
+                        <div class="text-2xl font-bold text-red-600">{{ error_count }}</div>
+                        <div class="text-sm text-red-700">Errors</div>
+                    </div>
+                    <div class="bg-blue-50 rounded-lg p-4">
+                        <div class="text-2xl font-bold text-blue-600">{{ nodes_data|length }}</div>
+                        <div class="text-sm text-blue-700">Total Nodes</div>
+                    </div>
+                    <div class="bg-purple-50 rounded-lg p-4">
+                        <div class="text-2xl font-bold text-purple-600">{{ connections_data|length }}</div>
+                        <div class="text-sm text-purple-700">Total Connections</div>
+                    </div>
+                </div>
+
+                <!-- Created Items -->
+                {% if created_items %}
+                    <div class="mb-6">
+                        <h4 class="font-semibold text-gray-900 mb-3">Created Items</h4>
+                        <div class="space-y-2">
+                            {% for item in created_items %}
+                                <div class="flex items-center space-x-2 text-sm">
+                                    <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                    </svg>
+                                    <span class="font-medium text-gray-700">{{ item.type }}:</span>
+                                    <span class="text-gray-600">{{ item.name }}</span>
+                                    <span class="text-gray-400">(ID: {{ item.id }})</span>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
+
+                <!-- Processing Log -->
+                <div>
+                    <h4 class="font-semibold text-gray-900 mb-3">Processing Log</h4>
+                    <div class="bg-gray-50 rounded-lg p-4 max-h-64 overflow-y-auto">
+                        <div class="space-y-1 font-mono text-xs">
+                            {% for log in processing_log %}
+                                <div class="{% if '✓' in log %}text-green-600{% else %}text-red-600{% endif %}">
+                                    {{ log }}
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Action Button -->
+                {% if workflow_id %}
+                    <div class="mt-6">
+                        <a href="/admin/bfy_workflow/edit/{{ workflow_id }}"
+                           class="inline-flex items-center px-6 py-3 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 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                            </svg>
+                            Edit Workflow in Builder
+                        </a>
+                    </div>
+                {% endif %}
+            </div>
+
+        {% else %}
+            <!-- Error State -->
+            <div class="bg-white rounded-2xl shadow-lg p-8 text-center">
+                <div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
+                    <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <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"></path>
+                    </svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900 mb-2">Invalid Response</h3>
+                <p class="text-gray-600">The AI response doesn't contain valid workflow data. Please try again with a different prompt.</p>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+{# Clean up the type bypass #}
+{{ registry('butterfly-bypass-type-checking', false) }}

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

@@ -0,0 +1,261 @@
+{% if response.message.workflow %}
+    {% set workflow_data = response.message.workflow %}
+    {% set nodes_data = response.message.nodes %}
+    {% set connections_data = response.message.connections %}
+
+    <div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 p-8">
+        <div class="max-w-6xl mx-auto">
+            <!-- Header -->
+            <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <h2 class="text-2xl font-bold text-gray-900">Workflow Preview</h2>
+                        <p class="text-gray-600 mt-1">Review your AI-generated workflow before creating it</p>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <span class="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">
+                            {{ nodes_data|length }} Nodes
+                        </span>
+                        <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">
+                            {{ connections_data|length }} Connections
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Workflow Info -->
+            {% if workflow_data %}
+                <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-lg p-6 mb-6 text-white">
+                    <h3 class="text-xl font-bold mb-2">{{ workflow_data.display_name }}</h3>
+                    <p class="text-indigo-100 mb-4">{{ workflow_data.description }}</p>
+                    <div class="flex items-center space-x-4 text-sm">
+                        <div class="flex items-center">
+                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 12a1 1 0 11-2 0V8a1 1 0 112 0v4zm4 0a1 1 0 11-2 0V8a1 1 0 112 0v4z"></path>
+                            </svg>
+                            ID: {{ workflow_data.name }}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+
+            <!-- Visual Workflow Diagram -->
+            <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+                <h3 class="text-lg font-bold text-gray-900 mb-4">Workflow Diagram</h3>
+                <div class="relative bg-gray-50 rounded-lg p-8 overflow-x-auto">
+                    <svg class="w-full" style="min-width: 1200px; height: 600px;">
+                        <!-- Grid Background -->
+                        <defs>
+                            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+                                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e5e7eb" stroke-width="1"/>
+                            </pattern>
+                        </defs>
+                        <rect width="100%" height="100%" fill="url(#grid)" />
+
+                        <!-- Connections -->
+                        <g id="connections">
+                            {% for connection in connections_data %}
+                                {% set source_node = null %}
+                                {% set target_node = null %}
+                                {% for node in nodes_data %}
+                                    {% if node.node_id == connection.source_node_id %}
+                                        {% set source_node = node %}
+                                    {% endif %}
+                                    {% if node.node_id == connection.target_node_id %}
+                                        {% set target_node = node %}
+                                    {% endif %}
+                                {% endfor %}
+
+                                {% if source_node and target_node %}
+                                    <path d="M {{ source_node.position_x + 150 }} {{ source_node.position_y + 40 }}
+                                             C {{ source_node.position_x + 200 }} {{ source_node.position_y + 40 }},
+                                               {{ target_node.position_x - 50 }} {{ target_node.position_y + 40 }},
+                                               {{ target_node.position_x }} {{ target_node.position_y + 40 }}"
+                                          stroke="#6366f1" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
+                                    <text x="{{ (source_node.position_x + target_node.position_x) / 2 + 75 }}"
+                                          y="{{ (source_node.position_y + target_node.position_y) / 2 + 35 }}"
+                                          text-anchor="middle" class="text-xs fill-gray-500">
+                                        {{ connection.source_point }}
+                                    </text>
+                                {% endif %}
+                            {% endfor %}
+                        </g>
+
+                        <!-- Arrow marker -->
+                        <defs>
+                            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+                                <polygon points="0 0, 10 3.5, 0 7" fill="#6366f1" />
+                            </marker>
+                        </defs>
+
+                        <!-- Nodes -->
+                        <g id="nodes">
+                            {% for node in nodes_data %}
+                                {% set node_type_parts = node.node_type|split('\\') %}
+                                {% set node_category = node_type_parts[0] %}
+                                {% set node_name = node_type_parts[1] %}
+
+                                {% set color_class = 'from-blue-500 to-indigo-600' %}
+                                {% if node_category == 'Trigger' %}
+                                    {% set color_class = 'from-green-500 to-emerald-600' %}
+                                {% elseif node_category == 'ControlFlow' %}
+                                    {% set color_class = 'from-purple-500 to-pink-600' %}
+                                {% elseif node_category == 'Communication' %}
+                                    {% set color_class = 'from-blue-500 to-cyan-600' %}
+                                {% elseif node_category == 'Database' %}
+                                    {% set color_class = 'from-orange-500 to-red-600' %}
+                                {% elseif node_category == 'AI' %}
+                                    {% set color_class = 'from-indigo-500 to-purple-600' %}
+                                {% endif %}
+
+                                <g transform="translate({{ node.position_x }}, {{ node.position_y }})">
+                                    <!-- Node Rectangle -->
+                                    <rect width="150" height="80" rx="8" fill="url(#gradient-{{ node.node_id }})"
+                                          stroke="#e5e7eb" stroke-width="2" class="drop-shadow-md"/>
+
+                                    <!-- Gradient Definition -->
+                                    <defs>
+                                        <linearGradient id="gradient-{{ node.node_id }}" x1="0%" y1="0%" x2="100%" y2="100%">
+                                            <stop offset="0%" style="stop-color:#f3f4f6"/>
+                                            <stop offset="100%" style="stop-color:#ffffff"/>
+                                        </linearGradient>
+                                    </defs>
+
+                                    <!-- Category Badge -->
+                                    <rect x="10" y="10" width="130" height="20" rx="10"
+                                          fill="url(#cat-gradient-{{ node.node_id }})"/>
+                                    <defs>
+                                        <linearGradient id="cat-gradient-{{ node.node_id }}" x1="0%" y1="0%" x2="100%" y2="0%">
+                                            {% if node_category == 'Trigger' %}
+                                                <stop offset="0%" style="stop-color:#10b981"/>
+                                                <stop offset="100%" style="stop-color:#059669"/>
+                                            {% elseif node_category == 'ControlFlow' %}
+                                                <stop offset="0%" style="stop-color:#a855f7"/>
+                                                <stop offset="100%" style="stop-color:#ec4899"/>
+                                            {% elseif node_category == 'Communication' %}
+                                                <stop offset="0%" style="stop-color:#3b82f6"/>
+                                                <stop offset="100%" style="stop-color:#06b6d4"/>
+                                            {% elseif node_category == 'Database' %}
+                                                <stop offset="0%" style="stop-color:#f97316"/>
+                                                <stop offset="100%" style="stop-color:#ef4444"/>
+                                            {% elseif node_category == 'AI' %}
+                                                <stop offset="0%" style="stop-color:#6366f1"/>
+                                                <stop offset="100%" style="stop-color:#a855f7"/>
+                                            {% else %}
+                                                <stop offset="0%" style="stop-color:#6b7280"/>
+                                                <stop offset="100%" style="stop-color:#4b5563"/>
+                                            {% endif %}
+                                        </linearGradient>
+                                    </defs>
+
+                                    <text x="75" y="24" text-anchor="middle" class="text-xs font-semibold fill-white">
+                                        {{ node_category }}
+                                    </text>
+
+                                    <!-- Node Name -->
+                                    <text x="75" y="50" text-anchor="middle" class="text-sm font-medium fill-gray-900">
+                                        {{ node_name }}
+                                    </text>
+
+                                    <!-- Node ID -->
+                                    <text x="75" y="65" text-anchor="middle" class="text-xs fill-gray-500">
+                                        {{ node.node_id }}
+                                    </text>
+                                </g>
+                            {% endfor %}
+                        </g>
+                    </svg>
+                </div>
+            </div>
+
+            <!-- Nodes Detail -->
+            <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+                <h3 class="text-lg font-bold text-gray-900 mb-4">Node Configuration</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {% for node in nodes_data %}
+                        {% set node_type_parts = node.node_type|split('\\') %}
+                        {% set params = node.params %}
+
+                        <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors">
+                            <div class="flex items-start justify-between mb-2">
+                                <div>
+                                    <h4 class="font-semibold text-gray-900">{{ node_type_parts[1] }}</h4>
+                                    <p class="text-xs text-gray-500">{{ node.node_id }}</p>
+                                </div>
+                                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded">
+                                    {{ node_type_parts[0] }}
+                                </span>
+                            </div>
+
+                            {% if params %}
+                                <div class="mt-3 space-y-1">
+                                    {% for key, value in params %}
+                                        <div class="text-sm">
+                                            <span class="font-medium text-gray-700">{{ key }}:</span>
+                                            <span class="text-gray-600">
+                                                {% if value is iterable and (value is not same as(value ~ '')) %}
+                                                    {{ value|json_encode }}
+                                                {% else %}
+                                                    {{ value }}
+                                                {% endif %}
+                                            </span>
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                            {% else %}
+                                <p class="text-sm text-gray-500 italic">No parameters configured</p>
+                            {% endif %}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <!-- Sample Execution -->
+            {% if message.sample_execution %}
+                <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+                    <h3 class="text-lg font-bold text-gray-900 mb-4">Sample Execution Flow</h3>
+                    <div class="space-y-3">
+                        {% for step in message.sample_execution %}
+                            <div class="flex items-start space-x-3">
+                                <div class="flex-shrink-0 w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
+                                    <span class="text-xs font-semibold text-indigo-600">{{ loop.index }}</span>
+                                </div>
+                                <div class="flex-grow">
+                                    <h4 class="font-medium text-gray-900">{{ step.node_id }}</h4>
+                                    <p class="text-sm text-gray-600 mt-1">{{ step.output_data }}</p>
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+
+            <!-- AI Response Message -->
+            {% if message.response_message %}
+                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-6">
+                    <div class="flex items-start space-x-3">
+                        <div class="flex-shrink-0">
+                            <svg class="w-6 h-6 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>
+                        </div>
+                        <div>
+                            <h4 class="font-semibold text-gray-900 mb-1">Workflow Explanation</h4>
+                            <p class="text-gray-700">{{ message.response_message }}</p>
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+{% else %}
+    <div class="p-8 text-center">
+        <div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
+            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <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"></path>
+            </svg>
+        </div>
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">No Workflow Data</h3>
+        <p class="text-gray-600">The AI response doesn't contain valid workflow data. Please try again.</p>
+    </div>
+{% endif %}