meta_workflows 0.9.5 → 0.9.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c3a448e6c2f705bada39a716fcca196e8af05426c958bfc3618b810ae5e0305
-  data.tar.gz: afb9a87720c7edcca9d333993de3fce7dc146fa40c151e2893b2514d11815ff4
+  metadata.gz: f991d24a137d8a8b8f61723e714c5a2e08551d7e49d108a4bef7a434f4b122ad
+  data.tar.gz: 7832b5db6ac767be220115a98bbd423314416b93176a1a2147249c69735781f8
 SHA512:
-  metadata.gz: fa39226f6dfc489f83a297e84d6aa53ec6b7dd1839676ad969344f688ab2c04c7a7e8b06806e575a5035e9c2c93d6ccb9c8a0d57fe846da19c575b6f3205e48a
-  data.tar.gz: 8a887f14b18e7af835c5c32d46eeabacdaf11f89332b9f4381882cf178e7298eb294f061f9408b15a5a5439846a98aacf3e420c50ea31026b02e21179170b541
+  metadata.gz: f0102f3753d5570e5f4cc8009699d99ee52e0994842d129666c390cb1047415713b142663ace02396997ec5bb6c392323a24958407fdfb54fee840cab14ffb94
+  data.tar.gz: 4ea71acd1ea97348f0ea9a1713f6542a693662b42f44ffc01abc1813c688a2ae2f82a5e7c7d2597a9fde25aaff1ccbe8606472b481ef06622c7fc2f74044ac96

data/README.md

@@ -527,10 +527,12 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 To apply or customize the styles for the `meta_workflows` engine, follow these steps:
 
-### 1. Where to Add Your Styles
+
+### 1. Where to Add Shareable (MetaWorkflow Specific) Styles
 
 - All styles should be placed in this file:  
   `app/assets/stylesheets/meta_workflows/application.css`
+- They will be shared with host application during the asset install.
 
 ### 2. How to Copy the Stylesheet
 
@@ -556,6 +558,11 @@ To apply or customize the styles for the `meta_workflows` engine, follow these s
 - These properties **won’t be compiled** because the layout files are accessed directly from the engine.
 - As a result, the host app doesn’t recognize that it needs to compile them, and the styles will not work as expected.
 
+### 6. 🚨 Dummy App Styling
+
+- The dummy app only styles are located in: `app/assets/stylesheets/application.css`
+- Use this file for styles that only get used in dummy application, don't need to be reusable, and will not carry over into any host apps.
+
 ## Tray System (Sidebar, Bottom, and Main Content Trays)
 
 MetaWorkflows provides a flexible tray system for building modern, multi-pane layouts. The tray system supports left (Beta), right (Gamma), and bottom (Delta) trays, as well as a main content area (Alpha). Each tray can be shown, hidden, or made collapsible on a per-controller or per-page basis.

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

@@ -95,16 +95,16 @@
   }
 
   a {
-    color: #2563eb;
+    color: var(--blue-600);
     text-decoration: underline;
 
     &:hover {
-      color: #1d4ed8;
+      color: var(--blue-700);
     }
   }
 
   pre {
-    background-color: #f9fafb;
+    background-color: var(--gray-50);
     padding: 1rem;
     border-radius: 0.5rem;
     overflow-x: auto;
@@ -112,7 +112,7 @@
   }
 
   code {
-    background-color: #f9fafb;
+    background-color: var(--gray-50);
     padding: 0.125rem 0.375rem;
     border-radius: 0.25rem;
     font-size: 0.875rem;
@@ -120,10 +120,10 @@
   }
 
   blockquote {
-    border-left: 4px solid #e5e7eb;
+    border-left: 4px solid var(--gray-200);
     padding-left: 1rem;
     font-style: italic;
-    color: #374151;
+    color: var(--gray-600);
     margin: 1rem 0;
   }
 
@@ -135,13 +135,13 @@
 
   th,
   td {
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--gray-200);
     padding: 0.5rem;
     text-align: left;
   }
 
   th {
-    background-color: #f9fafb;
+    background-color: var(--gray-50);
     font-weight: 600;
   }
 
@@ -160,26 +160,312 @@
   }
 }
 
+/* Lexi Chat Tray Styles */
+.lexi-chat-tray {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding: 0 1.5rem;
+}
 
-/* Lexi Chat Component Heights */
-.lexi-chat-container {
-  height: 95vh;
+.lexi-chat-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--gray-200);
 }
 
-.lexi-chat-container-full {
-  height: 100vh;
+.lexi-chat-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lexi-chat-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lexi-chat-logo {
+  height: 3.5rem;
+  width: auto;
+}
+
+.lexi-chat-button {
+  padding: 0.5rem;
+  border-radius: 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
 }
 
-.lexi-avatar-large {
-  height: 375px;
+.lexi-chat-button:hover {
+  background-color: var(--gray-100);
 }
 
-.lexi-avatar-medium {
-  height: 300px;
+.lexi-chat-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.lexi-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.lexi-chat-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  flex-shrink: 0;
+  padding-bottom: 1rem;
+}
+
+.lexi-avatar {
+  height: 10.5rem;
+  width: auto;
+  pointer-events: none;
+}
+
+.lexi-input-wrapper {
+  width: 100%;
+  max-width: 32rem;
+}
+
+/* Response Form Styles */
+.lexi-form-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .lexi-input-container {
-  height: 335px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--gray-300);
+  border-radius: 0.5rem;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 0.5rem;
+}
+
+.lexi-textarea-wrapper {
+  flex: 1;
+  position: relative;
+}
+
+.lexi-textarea {
+  width: 100%;
+  min-height: 35px;
+  border: none;
+  resize: none;
+  outline: none;
+  background: transparent;
+  font-size: 1rem;
+  overflow-y: auto;
+}
+
+.lexi-textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.lexi-input-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.lexi-input-icons {
+  display: flex;
+  gap: 0.25rem;
+  align-items: flex-end;
+}
+
+.lexi-icon-button {
+  padding: 0.5rem;
+  border-radius: 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.lexi-icon-button:hover {
+  background-color: var(--gray-100);
+}
+
+.lexi-icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.lexi-send-button {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.lexi-send-button.responding {
+  background-color: var(--purple-600);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.lexi-recording-notice {
+  text-align: left;
+  font-size: 0.875rem;
+  color: var(--purple-800);
+}
+
+.lexi-advance-button {
+  font-size: 0.75rem;
+  margin-bottom: 0.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--gray-700);
+}
+
+.lexi-advance-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Response Bubble Styles */
+.lexi-response-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.lexi-message-user {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.lexi-message-assistant {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.lexi-message-bubble-user {
+  max-width: 80%;
+  background-color: var(--purple-300);
+  border-radius: 0.75rem;
+  padding: 1rem;
+}
+
+.lexi-message-bubble-assistant {
+  max-width: 80%;
+  background-color: white;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.lexi-message-content-user {
+  font-size: 1rem;
+  color: var(--gray-800);
+}
+
+.lexi-message-content-assistant {
+  color: black;
+  font-size: 1rem;
+  line-height: 1.25;
+  max-width: none;
+}
+
+.lexi-message-content-assistant h1,
+.lexi-message-content-assistant h2,
+.lexi-message-content-assistant h3,
+.lexi-message-content-assistant h4,
+.lexi-message-content-assistant h5,
+.lexi-message-content-assistant h6 {
+  color: black;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.lexi-message-content-assistant h1 {
+  font-size: 1.5rem;
+}
+
+.lexi-message-content-assistant h2 {
+  font-size: 1.25rem;
+}
+
+.lexi-message-content-assistant h3 {
+  font-size: 1.125rem;
+}
+
+.lexi-message-content-assistant p {
+  margin-bottom: 1rem;
+}
+
+.lexi-message-content-assistant ul,
+.lexi-message-content-assistant ol {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.lexi-message-content-assistant li {
+  margin-bottom: 0.5rem;
+}
+
+.lexi-message-content-assistant a {
+  color: var(--blue-600);
+  text-decoration: underline;
+}
+
+.lexi-message-content-assistant a:hover {
+  color: var(--blue-700);
+}
+
+.lexi-message-content-assistant code {
+  background-color: var(--gray-100);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.875rem;
+}
+
+.lexi-message-content-assistant pre {
+  background-color: var(--gray-100);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.lexi-message-content-assistant blockquote {
+  border-left: 4px solid var(--gray-200);
+  padding-left: 1rem;
+  font-style: italic;
+  color: var(--gray-500);
+  margin: 1rem 0;
+}
+
+/* Lexi Chat Component Heights */
+.lexi-chat-container-full {
+  height: 95vh;
 }
 
 /* Lexi Chat Component Constraints */
@@ -191,10 +477,6 @@
   min-height: 35px;
 }
 
-.lexi-message-max-width {
-  max-width: 80%;
-}
-
 /* Tray Animations */
 .tray-container {
   transition: all 500ms ease-in-out;

data/app/controllers/meta_workflows/workflow_imports_controller.rb

@@ -69,7 +69,7 @@ module MetaWorkflows
     def handle_import_result(result)
       if result.success?
         import_result = result.data
-        flash[:notice] = success_message(import_result)
+        flash[:notice] = format_success_message(import_result)
         redirect_to workflows_path
       else
         flash[:alert] = result.error
@@ -77,9 +77,13 @@ module MetaWorkflows
       end
     end
 
-    def success_message(import_result)
-      action = import_result[:action] == 'created' ? 'imported' : 'updated'
-      "Workflow '#{import_result[:workflow_name]}' #{action} successfully!"
+    def format_success_message(import_result)
+      if import_result[:message].present?
+        import_result[:message]
+      else
+        action = import_result[:action] == 'created' ? 'imported' : 'updated'
+        "Workflow '#{import_result[:workflow_name]}' #{action} successfully!"
+      end
     end
   end
 end

data/app/views/layouts/meta_workflows/application.html.erb

@@ -1,3 +1,4 @@
+<!-- This file is used to render the layout for the MetaWorkflows debug tool. -->
 <!DOCTYPE html>
 <html>
   <head>

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

@@ -1,40 +1,31 @@
 <%# Lexi Chat Tray %>
-<div class="relative flex flex-col lexi-chat-container-full bg-white px-4">
-  <%# Header with Lexi logo and action icons %>
-  <div class="flex-shrink-0 flex items-center justify-between pb-2 border-b border-gray-200">
-    <div class="flex items-center space-x-2">
-      <%= image_tag("lexi_logo_color.png", alt: "Lexi Logo", class: "h-14 w-auto") %>
+<div class="lexi-chat-tray lexi-chat-container-full">
+  <!-- Header with Lexi logo and action icons -->
+  <div class="lexi-chat-header">
+    <div class="lexi-chat-header-left">
+      <%= image_tag("lexi_logo_color.png", alt: "Lexi Logo", class: "lexi-chat-logo") %>
     </div>
-    <div class="flex items-center gap-2">
-      <button type="button" class="p-2 rounded-xl hover:bg-gray-100" aria-label="New Chat" disabled>
+    <div class="lexi-chat-header-right">
+      <button type="button" class="lexi-chat-button" aria-label="New Chat" disabled>
         <i class="fa-solid fa-plus text-xl"></i>
       </button>
-      <button type="button" class="p-2 rounded-xl hover:bg-gray-100" aria-label="Chat History" disabled>
+      <button type="button" class="lexi-chat-button" aria-label="Chat History" disabled>
         <i class="fa-solid fa-clock-rotate-left text-xl"></i>
       </button>
     </div>
   </div>
 
-  <%# Chat messages area %>
-  <div id="main-scroll-container" class="flex-1 overflow-y-auto py-4 space-y-4">
+  <!-- Chat messages area -->
+  <div id="main-scroll-container" class="lexi-chat-messages">
     <%= render partial: meta_loader, locals: {record: local_assigns[:record], step_progress: ["Generating draft course objectives...", "Talking to the LLM..."] } %>
   </div>
 
-  <%# Lexi avatar and input area pinned to bottom %>
-      <div class="relative bg-white lexi-input-container">
-             <!-- Bottom section with recording notice and input area -->
-       <div class="absolute bottom-15 left-0 right-0 flex flex-col space-y-2 z-10">
-         <!-- Recording notice -->
-         <p class="text-right text-xs text-purple-800 pr-4">This chat is being recorded.</p>
-         
-         <!-- Input area -->
-         <div class="w-full">
-           <% active_execution = local_assigns[:record]&.workflow_executions&.order(created_at: :desc)&.first %>
-           <%= 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, step_has_repetitions: true } %>
-         </div>
-       </div>
-    
-    <!-- Lexi image positioned absolutely to the left -->
-    <%= image_tag("lexi-expanded.png", alt: "Lexi Avatar", class: "absolute bottom-10 left-0 lexi-avatar-medium w-auto pointer-events-none") %>
+  <!-- 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">
+      <% active_execution = local_assigns[:record]&.workflow_executions&.order(created_at: :desc)&.first %>
+      <%= 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, step_has_repetitions: true } %>
+    </div>
   </div>
 </div> 

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

@@ -6,34 +6,34 @@
                     id: "#{target_frame_id(record, form: true)}_lexi" do |form| %>
         <%= form.hidden_field :chat_id, value: chat_id %>
                 <fieldset>
-          <div class="flex flex-col gap-1">
+          <div class="lexi-form-container">
             <!-- Input Container -->
-            <div class="flex flex-col lexi-input-max-height border border-gray-300 rounded-lg bg-white/80 p-2">
+            <div class="lexi-input-container lexi-input-max-height">
                  <!-- Input area with icons -->
-                <div class="flex-1 relative">
-                   <%= form.text_area :message, rows: 1, placeholder: random_chat_placeholder, disabled: local_assigns[:responding] || !local_assigns[:response_enabled], class: "w-full lexi-textarea-min-height border-0 resize-none focus:outline-none focus:ring-0 bg-transparent text-base overflow-y-auto" %>
+                <div class="lexi-textarea-wrapper">
+                   <%= form.text_area :message, rows: 1, placeholder: random_chat_placeholder, disabled: local_assigns[:responding] || !local_assigns[:response_enabled], class: "lexi-textarea lexi-textarea-min-height" %>
                 </div>
 
-               <div class="flex justify-between">
-               <div class="flex gap-1 items-end justify-end">
-                   <button type="button" class="p-2 rounded-xl hover:bg-gray-100" disabled>
+               <div class="lexi-input-controls">
+               <div class="lexi-input-icons">
+                   <button type="button" class="lexi-icon-button" disabled>
                      <i class="fa-solid fa-microphone text-lg"></i>
                    </button>
-                   <button type="button" class="p-2 rounded-xl hover:bg-gray-100" disabled>
+                   <button type="button" class="lexi-icon-button" disabled>
                      <i class="fa-solid fa-headphones text-lg"></i>
                    </button>
-                   <button type="button" class="p-2 rounded-xl hover:bg-gray-100" disabled>
+                   <button type="button" class="lexi-icon-button" disabled>
                      <i class="fa-solid fa-waveform-lines text-lg"></i>
                    </button>
                  </div>
                  <div>
                  <!-- Send button -->
                  <% if local_assigns[:responding] %>
-                   <button type="button" class="w-12 h-12 rounded-full flex items-center justify-center text-white transition-colors bg-purple-600 opacity-50 cursor-not-allowed" disabled>
+                   <button type="button" class="lexi-send-button responding" disabled>
                      <i class="fa-solid fa-arrow-up text-lg"></i>
                    </button>
                  <% else %>
-                   <%= form.button type: "submit", class: "w-12 h-12 rounded-full flex items-center justify-center sm-btn sm-btn-primary" do %>
+                   <%= form.button type: "submit", class: "lexi-send-button sm-btn sm-btn-primary" do %>
                      <i class="fa-solid fa-arrow-up text-lg"></i>
                    <% end %>
                 <% end %>
@@ -41,12 +41,14 @@
                </div>
             </div>
 
-            <div class="flex justify-end">
+            <p class="lexi-recording-notice">This chat is being recorded.</p>
+
+            <div>
               <% if local_assigns[:step_has_repetitions] %>
                 <!-- Empty placeholder to prevent layout jank -->
-                <div class="text-xs mb-2 h-4" aria-hidden="true"></div>
+                <div aria-hidden="true"></div>
               <% else %>
-                <%= form.button type: "submit", name: "advance", value: "true", class: "text-xs mb-2 #{local_assigns[:responding] ? 'opacity-50 cursor-not-allowed' : ''}", disabled: local_assigns[:responding] do %>
+                <%= form.button type: "submit", name: "advance", value: "true", class: "lexi-advance-button #{'opacity-50 cursor-not-allowed' if local_assigns[:responding]}", disabled: local_assigns[:responding] do %>
                   <i class="fa-light fa-arrow-right"></i> Next
                 <% end %>
               <% end %>

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

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag target_frame_id(record) do %>
-<div id="response-content-container" class="space-y-4" data-controller="response-scroll">
+<div id="response-content-container" class="lexi-response-container" data-controller="response-scroll">
   <% if chat.present? && chat.messages.any? %>
     
     <!-- Show all saved messages except the first user message -->
@@ -9,21 +9,21 @@
       <% next if is_streaming && message.role == 'assistant' && message == last_message %>
       
       <% if message.role == 'user' %>
-        <!-- User message bubble (right-aligned, amber background) -->
-        <div class="flex justify-end">
-          <div class="lexi-message-max-width bg-amber-100 rounded-xl px-6 py-3">
-            <div class="text-sm">
+        <!-- User message bubble (right-aligned, purple background) -->
+        <div class="lexi-message-user">
+          <div class="lexi-message-bubble-user">
+            <div class="lexi-message-content-user">
               <%= simple_format(message.content) %>
             </div>
           </div>
         </div>
         
       <% elsif message.role == 'assistant' %>
-        <!-- Lexi message bubble (left-aligned) -->
-        <div class="flex justify-start">
+        <!-- Lexi message bubble (left-aligned, white background) -->
+        <div class="lexi-message-assistant">
           <!-- Message Bubble -->
-          <div class="lexi-message-max-width bg-slate-100 rounded-xl px-6 py-3">
-            <div class="prose prose-sm max-w-none">
+          <div class="lexi-message-bubble-assistant">
+            <div class="lexi-message-content-assistant">
               <%= markdown(message.content) %>
             </div>
           </div>
@@ -33,10 +33,10 @@
     
     <!-- Show streaming response -->
     <% if is_streaming %>
-      <div class="flex justify-start">
+      <div class="lexi-message-assistant">
         <!-- Streaming Message Bubble -->
-        <div class="lexi-message-max-width bg-slate-100 rounded-xl px-6 py-3">
-          <div class="prose prose-sm max-w-none">
+        <div class="lexi-message-bubble-assistant">
+          <div class="lexi-message-content-assistant">
             <%= markdown(full_response) %>
           </div>
         </div>

data/lib/meta_workflows/version.rb

@@ -3,7 +3,7 @@
 module MetaWorkflows
   MAJOR = 0
   MINOR = 9
-  PATCH = 5 # this is automatically incremented by the build process
+  PATCH = 7 # 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.5
+  version: 0.9.7
 platform: ruby
 authors:
 - Leonid Medovyy
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-02 00:00:00.000000000 Z
+date: 2025-07-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails