meta_workflows 0.9.30 → 0.9.32

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 148b5bd20b07342ebf32630150a513126f1293746bda2c63a535f6266cf97a36
-  data.tar.gz: b97a6ac33bdba1b6c31c367357f39178a84cceb30a27a650e90b2902dbfdbf73
+  metadata.gz: 3b6e5652802f3f166ea4d2bc4860e7c3967f5be1b39fb92858dacceb7ce59990
+  data.tar.gz: d4ccc1608e8683b73d5a7f38e9a49fc2c7511820bd03abacb3bbacb487722313
 SHA512:
-  metadata.gz: 48ccc44761193ff60ecde2bdc47dd12c74e58fe1e01cb9ed3139604df193a7fa5aa16a3779a7d9e0741db9d3f49157b719d6cb4aba8adf4dfd1aa95fb69858b0
-  data.tar.gz: 90df170deb7b54dee335dcac670b096043a5d56e4859f739993e1b9982f87ba6d004731957ac1ac11e6344d2228aebe408517489750ff810b0a227ba2d976c5a
+  metadata.gz: c7ea1140103f59aa5667044d9000eb483c06fd5624ed7b761777d3b51e57e7971d040cf5295eee9e2a64a6e0f36d960f6953b65e8440b535520e0155dfd49260
+  data.tar.gz: 54a7458c7905680b5cb8a56dfb8a985d8bde3878cc7a7e6e3b745023c8571d6e4a6381d70b5e48668df77cd2eaf8fe2dedaf811b9dd79f551df196bb8851cdf4

data/README.md

@@ -746,7 +746,8 @@ MetaWorkflows provides a flexible tray system for building modern, multi-pane la
 | Delta | Bottom tray    | Optional collapsible tray at the bottom     |
 
 ### How It Works
-- The tray system is controlled by a `TrayConfigurable` concern included in your controllers.
+- The tray system is controlled by a `MetaWorkflows::TrayConfigurable` concern included in your `ApplicationController`.
+- The concern requires your `ApplicationController` to implement a `configure_trays` method - it will raise `NotImplementedError` if not implemented.
 - By default, all trays are hidden. You must explicitly set `visible: true` for any tray you want to show.
 - The engine's layout will automatically respect your tray configuration.
 
@@ -756,8 +757,17 @@ MetaWorkflows provides a flexible tray system for building modern, multi-pane la
 
    ```ruby
    class ApplicationController < ActionController::Base
-     include TrayConfigurable
+     include MetaWorkflows::TrayConfigurable
      before_action :configure_trays
+
+     private
+
+     def configure_trays
+       # ApplicationController must implement this method - it will raise NotImplementedError if not defined
+       tray_config[:beta][:visible] = false
+       tray_config[:gamma][:visible] = false
+       tray_config[:delta][:visible] = false
+     end
    end
    ```
 
@@ -765,8 +775,10 @@ MetaWorkflows provides a flexible tray system for building modern, multi-pane la
 
    ```ruby
    class PostsController < ApplicationController
+     private
+
      def configure_trays
-       super
+       super  # Call parent implementation first
        tray_config[:beta][:visible] = true      # Show Beta (left) tray
        tray_config[:gamma][:visible] = false    # Hide Gamma (right) tray
        tray_config[:delta][:collapsible] = false # Make Delta (bottom) tray not collapsible
@@ -775,6 +787,7 @@ MetaWorkflows provides a flexible tray system for building modern, multi-pane la
    ```
 
 3. **Default Behavior:**
+   - Your `ApplicationController` must implement the `configure_trays` method or a `NotImplementedError` will be raised.
    - All trays are hidden unless set to `visible: true`.
    - Trays are collapsible by default; set `collapsible: false` to disable collapsing.
 
@@ -785,8 +798,10 @@ MetaWorkflows provides a flexible tray system for building modern, multi-pane la
 
 ```ruby
 class DashboardController < ApplicationController
+  private
+
   def configure_trays
-    super
+    super  # Call parent implementation first
     tray_config[:beta][:visible] = true
     tray_config[:gamma][:visible] = false
     tray_config[:delta][:visible] = false
@@ -799,7 +814,7 @@ end
 - You can override tray configuration per controller or per action as needed.
 - The main content area (Alpha tray) is always visible and holds your page content.
 
-For more advanced usage or to contribute improvements, see the tray logic in `TrayConfigurable` and the engine layout file.
+For more advanced usage or to contribute improvements, see the tray logic in `MetaWorkflows::TrayConfigurable` and the engine layout file.
 
 ## Confluence Documentation
 

data/app/assets/javascripts/meta_workflows/controllers/lexi_form_submit_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ['textarea', 'form', 'structuredInputForm', 'hiddenMessage'];
+  static targets = ['textarea', 'form', 'structuredInputForm', 'hiddenMessage', 'structuredInput'];
 
   connect() {
     this.submitted = false;
@@ -14,7 +14,6 @@ export default class extends Controller {
   handleKeyDown(event) {
     if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
-      event.stopPropagation();
       this.handleSubmit();
     }
   }
@@ -24,7 +23,22 @@ export default class extends Controller {
       return;
     }
 
-    if (!this.hasTextareaTarget || this.textareaTarget.value.trim() === '') {
+        // Check if we have structured input selections
+    const hasStructuredSelections = this.hasStructuredInputTargets.some(input => 
+      input.checked || (input.type === 'range' && input.value !== input.min)
+    );
+    
+    if (hasStructuredSelections) {
+      // Submit the structured form to StructuredHumansController
+      this.submitted = true;
+      this.hideStructuredInputForm();
+      this.structuredInputFormTarget.requestSubmit();
+      return;
+    }
+
+    // Otherwise, handle normal text submission to HumansController
+    const textValue = this.hasTextareaTarget ? this.textareaTarget.value.trim() : '';
+    if (!textValue) {
       return;
     }
 

data/app/assets/javascripts/meta_workflows/controllers/structured_form_submit_controller.js

@@ -1,42 +1,61 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ['form', 'submitButton', 'checkbox', 'slider'];
+  static targets = ['form', 'checkbox', 'slider'];
 
   connect() {
     this.submitted = false;
+    this.setupKeyboardListener();
   }
 
-  sliderTargetConnected(slider) {
-    this.updateSliderAria(slider);
+  disconnect() {
+    this.removeKeyboardListener();
   }
 
-  updateSliderAria(slider) {
-    slider.setAttribute('aria-valuenow', slider.value);
-    slider.setAttribute('aria-valuetext', slider.value);
+  setupKeyboardListener() {
+    this.keydownHandler = this.handleKeyDown.bind(this);
+    if (this.hasFormTarget) {
+      this.formTarget.addEventListener('keydown', this.keydownHandler);
+    }
   }
 
-  handleSliderChange(event) {
-    this.updateSliderAria(event.target);
+  removeKeyboardListener() {
+    if (this.keydownHandler && this.hasFormTarget) {
+      this.formTarget.removeEventListener('keydown', this.keydownHandler);
+    }
   }
 
-  checkboxTargetConnected() {
-    this.updateSubmitButtonState();
+  handleKeyDown(event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      // Check if we have selected checkboxes
+      const selectedCheckboxes = this.checkboxTargets.filter(checkbox => checkbox.checked);
+      
+      if (selectedCheckboxes.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleSubmit();
+      }
+    }
   }
 
-  checkboxTargetDisconnected() {
-    this.updateSubmitButtonState();
+  sliderTargetConnected(slider) {
+    this.updateSliderAria(slider);
+    this.updateSliderFill(slider);
   }
 
-  updateSubmitButtonState() {
-    if (!this.hasSubmitButtonTarget) return;
+  updateSliderAria(slider) {
+    slider.setAttribute('aria-valuenow', slider.value);
+    slider.setAttribute('aria-valuetext', slider.value);
+  }
 
-    const hasSelection = this.checkboxTargets.some(checkbox => checkbox.checked);
-    this.submitButtonTarget.disabled = !hasSelection;
+  updateSliderFill(slider) {
+    const percentage = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
+    slider.style.setProperty('--slider-fill', `${percentage}%`);
   }
 
-  handleCheckboxChange() {
-    this.updateSubmitButtonState();
+  handleSliderChange(event) {
+    this.updateSliderAria(event.target);
+    this.updateSliderFill(event.target);
   }
 
   handleSubmit() {
@@ -48,19 +67,15 @@ export default class extends Controller {
     this.hideFormAndSubmit();
   }
 
-  handleCheckboxSubmit(event) {
-    event.preventDefault();
+  hideFormAndSubmit() {
+    // Hide the structured input form
+    if (this.hasFormTarget) {
+      this.formTarget.style.display = 'none';
+    }
     
-    if (this.submitted) {
-      return;
+    // Submit the form to StructuredHumansController
+    if (this.hasFormTarget) {
+      this.formTarget.requestSubmit();
     }
-
-    this.submitted = true;
-    this.hideFormAndSubmit();
-  }
-
-  hideFormAndSubmit() {
-    this.formTarget.style.display = 'none';
-    this.formTarget.requestSubmit();
   }
 } 

data/app/assets/stylesheets/meta_workflows/application.css

@@ -840,8 +840,7 @@
   padding: 1rem;
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 0.75rem;
-  border: 1px solid var(--gray-300);
-  margin-bottom: 1rem;
+  margin-bottom: .5rem;
 }
 
 .structured-input-options {
@@ -856,28 +855,28 @@
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--gray-300);
+  border: 2px solid transparent;
   border-radius: 0.5rem;
   background-color: white;
   cursor: pointer;
   transition: all 0.2s ease;
+  background-image: linear-gradient(white, white), linear-gradient(var(--gray-300), var(--gray-300));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
 }
 
 .structured-radio-option:hover {
-  background-color: var(--gray-50);
-  border-color: var(--purple-300);
+  background-image: linear-gradient(white, white), linear-gradient(45deg, #F3B51C, #E87C66, #F3B51C, #E87C66);
+  background-size: auto, 300% 300%;
+  animation: animatedgradient 3s ease alternate infinite;
 }
 
 .structured-radio-option:has(.structured-radio-input:checked) {
   background-color: var(--purple-50);
-  border-color: var(--purple-500);
 }
 
 .structured-radio-input {
-  width: 1.25rem;
-  height: 1.25rem;
-  accent-color: var(--purple-600);
-  cursor: pointer;
+  display: none;
 }
 
 .structured-radio-label {
@@ -894,27 +893,32 @@
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--gray-300);
+  border: 2px solid transparent;
   border-radius: 0.5rem;
   background-color: white;
   cursor: pointer;
   transition: all 0.2s ease;
+  background-image: linear-gradient(white, white), linear-gradient(var(--gray-300), var(--gray-300));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
 }
 
 .structured-checkbox-option:hover {
-  background-color: var(--gray-50);
-  border-color: var(--purple-300);
+  background-image: linear-gradient(white, white), linear-gradient(45deg, #F3B51C, #E87C66, #F3B51C, #E87C66);
+  background-size: auto, 300% 300%;
+  animation: animatedgradient 3s ease alternate infinite;
 }
 
 .structured-checkbox-option:has(.structured-checkbox-input:checked) {
-  background-color: var(--purple-50);
-  border-color: var(--purple-500);
+  background-image: linear-gradient(white, white), linear-gradient(45deg, #F3B51C, #E87C66);
 }
 
+
+
 .structured-checkbox-input {
   width: 1.25rem;
   height: 1.25rem;
-  accent-color: var(--purple-600);
+  accent-color: var(--purple-700);
   cursor: pointer;
 }
 
@@ -929,12 +933,14 @@
 /* Slider Styles */
 .structured-slider-container {
   padding: 1rem;
+  border: 1px solid var(--gray-300);
+  border-radius: 0.5rem;
+  background-color: var(--gray-50);
 }
 
 .structured-slider-labels {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 1rem;
   font-size: 0.875rem;
   color: var(--gray-600);
   font-weight: 500;
@@ -948,46 +954,90 @@
 
 .structured-slider-input {
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
   border-radius: 0.25rem;
-  background: var(--gray-200);
+  background: transparent;
   outline: none;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
+  --slider-fill: 0%;
+  border: none;
+}
+
+.structured-slider-input::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 1rem;
+  border-radius: 0.25rem;
+  background: linear-gradient(90deg, 
+    #F3B51C 0%, 
+    #E87C66 var(--slider-fill), 
+    #e5e7eb var(--slider-fill), 
+    #e5e7eb 100%
+  );
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  border: 1px solid var(--gray-300);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.structured-slider-input::-moz-range-track {
+  width: 100%;
+  height: 1rem;
+  border-radius: 0.25rem;
+  background: linear-gradient(90deg, 
+    #F3B51C 0%, 
+    #E87C66 var(--slider-fill), 
+    #e5e7eb var(--slider-fill), 
+    #e5e7eb 100%
+  );
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  border: 1px solid var(--gray-300);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .structured-slider-input::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  background: var(--purple-600);
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5625rem;
+  background: var(--purple-700);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 320 512'%3e%3cpath d='M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z'/%3e%3c/svg%3e");
+  background-size: 12px 12px;
+  background-position: center;
+  background-repeat: no-repeat;
   cursor: pointer;
   border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
   transition: all 0.2s ease;
+  margin-top: -0.65rem;
 }
 
 .structured-slider-input::-webkit-slider-thumb:hover {
-  background: var(--purple-700);
+  background-color: var(--purple-800);
   transform: scale(1.1);
 }
 
 .structured-slider-input::-moz-range-thumb {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  background: var(--purple-600);
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5625rem;
+  background: var(--purple-700);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 320 512'%3e%3cpath d='M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z'/%3e%3c/svg%3e");
+  background-size: 12px 12px;
+  background-position: center;
+  background-repeat: no-repeat;
   cursor: pointer;
   border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
   transition: all 0.2s ease;
+  margin-top: -0.65rem;
 }
 
 .structured-slider-input::-moz-range-thumb:hover {
-  background: var(--purple-700);
+  background-color: var(--purple-800);
   transform: scale(1.1);
 }
 
@@ -1062,3 +1112,16 @@
   white-space: nowrap;
   border: 0;
 }
+
+/* Animated Gradient Keyframes */
+@keyframes animatedgradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

data/app/controllers/concerns/meta_workflows/tray_configurable.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module MetaWorkflows
+  module TrayConfigurable
+    extend ActiveSupport::Concern
+
+    included do
+      helper_method :tray_config
+    end
+
+    def tray_config
+      @tray_config ||= {
+        beta: {
+          visible: true,
+          collapsible: true,
+          lexi: false
+        },
+        gamma: {
+          visible: true,
+          collapsible: true,
+          lexi: false
+        },
+        delta: {
+          visible: true,
+          collapsible: true,
+          lexi: false
+        }
+      }
+    end
+
+    # Override in controllers to customize tray configuration
+    # This method should be called as a before_action in the application controller.
+    def configure_trays
+      raise NotImplementedError, "#{self.class.name} must implement #configure_trays to define tray configuration"
+    end
+  end
+end

data/app/controllers/meta_workflows/application_controller.rb

@@ -4,15 +4,6 @@ module MetaWorkflows
   class ApplicationController < ActionController::Base
     protect_from_forgery with: :exception
 
-    include TrayConfigurable
-    before_action :configure_trays
-
-    def configure_trays
-      super
-      tray_config[:beta][:visible] = false
-      tray_config[:gamma][:visible] = false
-      tray_config[:delta][:visible] = false
-    end
     # Add any MetaWorkflows-specific controller functionality here
     # This ensures proper engine isolation
   end

data/app/views/meta_workflows/_checkbox_input.html.erb

@@ -12,6 +12,7 @@
           value="<%= option['value'] %>" 
           class="structured-checkbox-input"
           data-meta-workflows--structured-form-submit-target="checkbox"
+          data-meta-workflows--lexi-form-submit-target="structuredInput"
           data-action="change->meta-workflows--structured-form-submit#handleCheckboxChange"
           aria-describedby="structured-checkbox-help"
         >
@@ -22,19 +23,4 @@
     <% end %>
   </div>
   <div id="structured-checkbox-help" class="sr-only">Use space to select/deselect options</div>
-  
-  <div class="structured-submit-container">
-    <button 
-      type="submit" 
-      class="structured-submit-button"
-      data-meta-workflows--structured-form-submit-target="submitButton"
-      data-action="click->meta-workflows--structured-form-submit#handleCheckboxSubmit"
-      disabled
-      aria-describedby="structured-submit-help"
-      aria-label="Submit your selections"
-    >
-      <i class="fa-solid fa-arrow-up"></i>
-    </button>
-    <div id="structured-submit-help" class="sr-only">Submit your selections. Button is disabled until at least one option is selected.</div>
-  </div>
 </div> 

data/app/views/meta_workflows/_lexi_chat_right_tray.html.erb

@@ -36,12 +36,15 @@
     } %>
   </div>
 
+  <!-- Structured inputs area (above avatar) -->
+  <div class="structured-input-area" data-controller="meta-workflows--lexi-form-submit">
+    <%= render meta_structured_input, record: local_assigns[:record], structured_input_config: false, is_structured_input: false %>  
+  </div>
+
   <!-- Avatar and input area pinned to bottom -->
   <div class="lexi-chat-bottom">
     <%= image_tag("lexi-expanded.png", alt: "Lexi Avatar", class: "lexi-avatar") %>
-    <div class="lexi-input-wrapper" data-controller="meta-workflows--lexi-form-submit">
-      <%= render meta_structured_input, record: local_assigns[:record], structured_input_config: false, is_structured_input: false %>
-      
+    <div class="lexi-input-wrapper">
       <%= render partial: meta_response_form, locals: {record: local_assigns[:record], response_enabled: true, workflow_execution_id: active_execution&.id, 
       chat_id: active_execution&.workflow_steps&.last&.chat&.id, workflow_execution: active_execution, is_structured_input: is_structured_input } %>
     </div>

data/app/views/meta_workflows/_radio_input.html.erb

@@ -12,6 +12,7 @@
           name="single_choice_selection" 
           value="<%= option['value'] %>" 
           class="structured-radio-input"
+          data-meta-workflows--lexi-form-submit-target="structuredInput"
           data-action="change->meta-workflows--structured-form-submit#handleSubmit"
           aria-describedby="structured-radio-help"
           required

data/app/views/meta_workflows/_slider_input.html.erb

@@ -19,6 +19,7 @@
         value="<%= options['min']['value'] %>"
         class="structured-slider-input"
         data-meta-workflows--structured-form-submit-target="slider"
+        data-meta-workflows--lexi-form-submit-target="structuredInput"
         data-action="change->meta-workflows--structured-form-submit#handleSubmit input->meta-workflows--structured-form-submit#handleSliderChange"
         aria-describedby="structured-slider-help"
         aria-valuemin="<%= options['min']['value'] %>"

data/lib/meta_workflows/version.rb

@@ -3,7 +3,7 @@
 module MetaWorkflows
   MAJOR = 0
   MINOR = 9
-  PATCH = 30 # this is automatically incremented by the build process
+  PATCH = 32 # this is automatically incremented by the build process
 
   VERSION = "#{MetaWorkflows::MAJOR}.#{MetaWorkflows::MINOR}.#{MetaWorkflows::PATCH}".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: meta_workflows
 version: !ruby/object:Gem::Version
-  version: 0.9.30
+  version: 0.9.32
 platform: ruby
 authors:
 - Leonid Medovyy
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-24 00:00:00.000000000 Z
+date: 2025-07-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -130,7 +130,7 @@ files:
 - app/assets/javascripts/meta_workflows_manifest.js
 - app/assets/stylesheets/meta_workflows/application.css
 - app/controllers/concerns/meta_workflows/streamable.rb
-- app/controllers/concerns/tray_configurable.rb
+- app/controllers/concerns/meta_workflows/tray_configurable.rb
 - app/controllers/meta_workflows/application_controller.rb
 - app/controllers/meta_workflows/base_debug_controller.rb
 - app/controllers/meta_workflows/debug_controller.rb

data/app/controllers/concerns/tray_configurable.rb

@@ -1,36 +0,0 @@
-# frozen_string_literal: true
-
-module TrayConfigurable
-  extend ActiveSupport::Concern
-
-  included do
-    helper_method :tray_config
-  end
-
-  def tray_config
-    @tray_config ||= {
-      beta: {
-        visible: true,
-        collapsible: true,
-        lexi: false
-      },
-      gamma: {
-        visible: true,
-        collapsible: true,
-        lexi: false
-      },
-      delta: {
-        visible: true,
-        collapsible: true,
-        lexi: false
-      }
-    }
-  end
-
-  # Override in controllers to customize tray configuration
-  def configure_trays
-    # Example:
-    # tray_config[:beta][:visible] = true
-    # tray_config[:gamma][:collapsible] = false
-  end
-end