meta_workflows 0.9.10 → 0.9.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a82054f7053b61a025c31d2469c8e2cb6a7c5aff3645047c180b12f228a3c046
-  data.tar.gz: bc101df970452eb0f3cb6b291bd77381be9a6f129fa4011c231c5dd82955e1de
+  metadata.gz: 73fcb0be3ef0902a994689da96b1d7dbd8164fe4997f3d1ffb47bbde0608c163
+  data.tar.gz: 15adbe1b54336b7cbc301a16e38924279d5ff44748d4310bc3bf6f6f28dac583
 SHA512:
-  metadata.gz: a31a5da810855e6751304f68276214a8b6f30cc657ace268b326ffa6f89210050e0ab3ed6b4727c33858908a7e3a1c41e18cfbedf7dd27996c94f286b26ab563
-  data.tar.gz: 9ea86df7931e4dc0d7482e7ce6bbd7c1d3d760d6e3cd9950d5d2d7b9bb02a55cbcc7b3d40571d6f41de8f38d96f4c0056683eab267caa89591df049572a8af47
+  metadata.gz: db5004eb9417c670f71fe1be96e4e25727dbaae9f592090469de5e4887f65017131aa46a8d127bcbd6077e62c144ba93dc04522988bcc77768095b88ca3eda05
+  data.tar.gz: 02f2c0a1ae62055685a369ff9ca08dd5b4793d4d902894a60eb3148a2857d8c3c2416316d60eadad31825015c5be801ba8f0fe108ae2b8acd0b9633fb3c6406b

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

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["welcome", "chat", "welcomeContent", "lexiIcon"]
+
+  connect() {
+    // Ensure initial state using CSS classes
+    this.welcomeTarget.classList.remove("fade-out")
+    this.chatTarget.classList.remove("expand-in")
+  }
+
+  startChat() {
+    // Start the grid stacking animation sequence
+    this.fadeOutWelcome()
+    
+    // Chat expands in after welcome starts fading (grid stacking handles timing)
+    setTimeout(() => {
+      this.expandInChat()
+    }, 100) // Small delay to ensure welcome animation starts first
+  }
+
+  fadeOutWelcome() {
+    // Use CSS animation classes instead of display properties
+    this.welcomeTarget.classList.add("fade-out")
+  }
+
+  expandInChat() {
+    // Use CSS animation class - no display manipulation needed
+    this.chatTarget.classList.add("expand-in")
+  }
+} 

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

@@ -160,6 +160,96 @@
   }
 }
 
+/* Loader Message Styles */
+.lexi-loader-bubble {
+  padding: 0.25rem 0.5rem;
+  margin-bottom: 0.25rem;
+  border: none;
+}
+
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes dot-bounce {
+  0%, 80%, 100% {
+    transform: translateY(0);
+    opacity: 0.7;
+  }
+  40% {
+    transform: translateY(-3px);
+    opacity: 1;
+  }
+}
+
+.lexi-loader-text {
+  font-size: 1.25rem;
+  background: linear-gradient(135deg, #7B5BA3 0%, #3A9999 50%, #7B5BA3 100%);
+  background-size: 200% 200%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  font-style: italic;
+  animation: gradient-shift 2s ease-in-out infinite;
+  -webkit-text-stroke: 0.75px rgba(0, 0, 0, 0.15);
+  text-stroke: 0.75px rgba(0, 0, 0, 0.15);
+}
+
+.lexi-loader-ellipses {
+  display: inline-block;
+}
+
+.lexi-dot {
+  display: inline-block;
+  font-size: 1.25rem;
+  background: linear-gradient(135deg, #7B5BA3 0%, #3A9999 50%, #7B5BA3 100%);
+  background-size: 200% 200%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: gradient-shift 2s ease-in-out infinite, dot-bounce 1.4s ease-in-out infinite;
+  -webkit-text-stroke: 0.75px rgba(0, 0, 0, 0.15);
+  text-stroke: 0.75px rgba(0, 0, 0, 0.15);
+  margin-left: -0.125rem;
+}
+
+.lexi-dot-1 {
+  animation-delay: 0s, 0s;
+}
+
+.lexi-dot-2 {
+  animation-delay: 0s, 0.2s;
+}
+
+.lexi-dot-3 {
+  animation-delay: 0s, 0.4s;
+}
+
+.lexi-dot.lexi-dot-error {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #dc2626 100%);
+  background-size: 200% 200%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  -webkit-text-stroke: 0.75px rgba(220, 38, 38, 0.15);
+  text-stroke: 0.75px rgba(220, 38, 38, 0.15);
+}
+
+.lexi-loader-container {
+  margin-top: -0.5rem;
+}
+
 /* Lexi Chat Tray Styles */
 .lexi-chat-tray {
   display: flex;
@@ -174,7 +264,6 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--gray-200);
 }
 
 .lexi-chat-header-left {
@@ -381,13 +470,13 @@
 }
 
 .lexi-message-content-user {
-  font-size: 1rem;
+  font-size: 1.25rem;
   color: var(--gray-800);
 }
 
 .lexi-message-content-assistant {
   color: black;
-  font-size: 1rem;
+  font-size: 1.25rem;
   line-height: 1.25;
   max-width: none;
 }
@@ -564,7 +653,7 @@
 
 /* Show floating Lexi avatar button when collapsed - with delay to avoid overlap */
 .gamma-tray.lexi-tray.collapsed .lexi-floating-avatar {
-  display: block !important;
+  display: block;
   opacity: 0;
   animation: lexi-avatar-appear 200ms ease-in-out 400ms forwards;
 }
@@ -582,5 +671,156 @@
 
 /* Hide floating avatar when tray is expanded */
 .gamma-tray.lexi-tray:not(.collapsed) .lexi-floating-avatar {
-  display: none !important;
+  display: none;
+}
+
+/* Onboarding Screen Grid Stacking Animations */
+.onboarding-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  width: 100%;
+  height: 100vh;
+}
+
+.welcome-screen, .chat-screen {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+/* Welcome screen - starts normal, fades out */
+.welcome-screen {
+  opacity: 1;
+  transition: opacity 0.6s ease-in-out;
+  z-index: 10;
+}
+
+.welcome-screen.fade-out {
+  opacity: 0;
+}
+
+/* Chat screen - starts hidden, fades in */
+.chat-screen {
+  opacity: 0;
+  pointer-events: none; /* Don't block clicks when hidden */
+  transition: opacity 0.8s ease-in-out 0.3s; /* 0.3s delay after welcome starts fading */
+  z-index: 15; /* Higher than welcome screen */
+}
+
+.chat-screen.expand-in {
+  opacity: 1;
+  pointer-events: auto; /* Re-enable clicks when visible */
+}
+
+/* Legacy animation states for backwards compatibility */
+.welcome-content.fade-out {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.lexi-icon-container.fade-out {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+/* Alpha Tray Lexi Avatar Size */
+.lexi-avatar-large {
+  height: 35rem;
+  width: auto;
+}
+
+/* Alpha Tray Specific Styles */
+.lexi-chat-alpha-tray {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding: 1rem 1rem 0 1rem;
+  height: 100%;
+}
+
+.lexi-chat-alpha-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 1rem;
+}
+
+.lexi-chat-alpha-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.lexi-chat-alpha-header-right {
+  display: flex;
+  align-items: center;
+}
+
+.lexi-chat-alpha-logo {
+  height: 80px;
+  width: auto;
+}
+
+.lexi-chat-alpha-close-button {
+  padding: 0.5rem;
+  border-radius: 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.lexi-chat-alpha-close-button:hover {
+  background-color: #f3f4f6;
+}
+
+.lexi-chat-alpha-content {
+  flex: 1;
+  display: flex;
+  gap: 1rem;
+  min-height: 0;
+}
+
+.lexi-chat-alpha-left-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+.lexi-chat-alpha-right-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.lexi-chat-alpha-messages {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding-bottom: 1rem;
+}
+
+.lexi-chat-alpha-messages > * + * {
+  margin-top: 1rem;
+}
+
+.lexi-chat-alpha-input-area {
+  flex-shrink: 0;
+}
+
+.lexi-chat-alpha-input-container {
+  width: 100%;
+}
+
+.lexi-error-content {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  color: var(--red-700);
+}
+
+.lexi-error-content .lexi-loader-ellipses {
+  margin-left: 0.375rem;
 }

data/app/controllers/meta_workflows/humans_controller.rb

@@ -45,8 +45,8 @@ module MetaWorkflows
         format.turbo_stream do
           render turbo_stream: [
             turbo_stream.replace(
-              target_frame_id(@record),
-              partial: meta_loader,
+              target_frame_id(@record, loader: true),
+              partial: meta_loader_message,
               locals: {
                 record: @record,
                 step_progress: fetch_step_progress

data/app/controllers/meta_workflows/meta_controller.rb

@@ -15,8 +15,7 @@ module MetaWorkflows
     protected
 
     def fetch_step_progress
-      @workflow_execution.step_progress(@workflow_execution.current_step) || ['Processing your request...',
-                                                                              'Talking to the LLM...']
+      @workflow_execution.step_progress(@workflow_execution.current_step) || default_step_progress
     end
 
     def current_step_repetitions

data/app/helpers/meta_workflows/meta_workflows_helper.rb

@@ -2,17 +2,25 @@
 
 module MetaWorkflows
   module MetaWorkflowsHelper
-    def target_frame_id(record, form: nil)
+    def target_frame_id(record, form: nil, loader: nil)
       base_id = "#{record.class.name.downcase}_#{record.id}"
-      form ? "#{base_id}_form" : base_id
+
+      return "#{base_id}_loader" if loader
+      return "#{base_id}_form" if form
+
+      base_id
     end
 
     def turbo_stream_name(record)
       [record.class.name.downcase, record.id]
     end
 
-    def meta_loader
-      'meta_workflows/loader'
+    def meta_loader_message
+      'meta_workflows/loader_message'
+    end
+
+    def meta_error_message
+      'meta_workflows/error_message'
     end
 
     def meta_response_form
@@ -67,5 +75,9 @@ module MetaWorkflows
     def current_step_has_repetitions?(workflow_execution)
       workflow_execution.step_repetitions(workflow_execution.current_step).present?
     end
+
+    def default_step_progress
+      ['Thinking']
+    end
   end
 end

data/app/jobs/meta_workflows/human_input_job.rb

@@ -20,6 +20,13 @@ module MetaWorkflows
       last_message = messages.last
       is_streaming = full_response.present?
 
+      # Remove loader message
+      Turbo::StreamsChannel.broadcast_remove_to(
+        turbo_stream_name(record),
+        target: target_frame_id(record, loader: true)
+      )
+
+      # Update main chat content
       Turbo::StreamsChannel.broadcast_replace_to(turbo_stream_name(record),
                                                  target: target_frame_id(record),
                                                  locals: {

data/app/jobs/meta_workflows/meta_job.rb

@@ -73,7 +73,7 @@ module MetaWorkflows
     def handle_llm_error(error, workflow_step, conversation)
       log_error(error)
       store_error_in_workflow_step(error, workflow_step, conversation)
-      broadcast_error_response(error)
+      broadcast_error_response
     end
 
     def log_error(error)
@@ -97,9 +97,16 @@ module MetaWorkflows
       workflow_execution.workflow_steps.find_by(step: workflow_execution.current_step)
     end
 
-    def broadcast_error_response(error)
-      error_message = "Error occured during LLM processing: #{error.message}"
-      broadcast_response(chat, error_message)
+    def broadcast_error_response
+      # Replace loader with error message
+      Turbo::StreamsChannel.broadcast_replace_to(
+        turbo_stream_name(record),
+        target: target_frame_id(record, loader: true),
+        partial: 'meta_workflows/error_message',
+        locals: {
+          record: record
+        }
+      )
     end
 
     def broadcast_form(chat)

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

@@ -0,0 +1,14 @@
+<div class="lexi-message-assistant">
+  <div class="lexi-message-bubble-assistant">
+    <div class="lexi-message-content-assistant">
+      <div class="lexi-error-content">
+        <i class="fa-solid fa-exclamation-triangle"></i>
+        <span>Uh oh! Lexi needs a quick break. One moment<span class="lexi-loader-ellipses">
+          <span class="lexi-dot lexi-dot-error lexi-dot-1">.</span>
+          <span class="lexi-dot lexi-dot-error lexi-dot-2">.</span>
+          <span class="lexi-dot lexi-dot-error lexi-dot-3">.</span>
+        </span></span>
+      </div>
+    </div>
+  </div>
+</div> 

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

@@ -1,42 +1,46 @@
 <%# Lexi Chat Alpha Tray (Center Display) %>
-<div class="relative flex flex-col lexi-chat-container bg-white px-4">
-  <%# Header with Lexi logo and action icons - spans full width %>
-  <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") %>
+<% active_execution = local_assigns[:record]&.workflow_executions&.order(created_at: :desc)&.first %>
+<% active_chat = active_execution&.workflow_steps&.last&.chat %>
+
+<div class="lexi-chat-alpha-tray lexi-chat-container">
+  <%# Header with Lexi logo left and close button right %>
+  <div class="lexi-chat-alpha-header">
+    <div class="lexi-chat-alpha-header-left">
+      <%= image_tag("lexi_logo_color.png", alt: "Lexi Logo", class: "lexi-chat-alpha-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>
-        <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>
-        <i class="fa-solid fa-clock-rotate-left text-xl"></i>
+    <div class="lexi-chat-alpha-header-right">
+      <button type="button" class="lexi-chat-alpha-close-button" aria-label="Close" disabled>
+        <i class="fa-solid fa-times text-xl"></i>
       </button>
     </div>
   </div>
 
-  <!-- Content area with chat and Lexi side by side -->
-  <div class="flex-1 flex min-h-0">
-    <!-- Lexi auto-width side column -->
-    <div class="flex-shrink-0 flex flex-col justify-end">
-      <%= image_tag("lexi-expanded.png", alt: "Lexi Avatar", class: "lexi-avatar-large w-auto") %>
+  <%# Main content: Left column (Lexi image) and Right column (Chat + Input) %>
+  <div class="lexi-chat-alpha-content">
+    <%# Left column - Lexi image %>
+    <div class="lexi-chat-alpha-left-column">
+      <%= image_tag("lexi-expanded2.png", alt: "Lexi Avatar", class: "lexi-avatar-large") %>
     </div>
     
     <!-- Main content area (chat + input) -->
-    <div class="flex-1 flex flex-col min-h-0">
-      <%# Chat messages area %>
-      <div id="main-scroll-container" class="flex-1 overflow-y-auto py-4 space-y-4 min-h-0">
-        <%= render partial: meta_loader, locals: {record: local_assigns[:record], step_progress: ["Generating draft course objectives...", "Talking to the LLM..."] } %>
+    <%# Right column - Chat and Input %>
+    <div class="lexi-chat-alpha-right-column">
+      <%# Scrollable chat messages area %>
+      <div id="main-scroll-container" class="lexi-chat-alpha-messages">
+        <%= render partial: meta_response, locals: {
+          record: local_assigns[:record],
+          chat: active_chat,
+          messages: active_chat&.messages&.order(:created_at) || [],
+          user_messages: active_chat&.messages&.where(role: 'user')&.order(:created_at) || [],
+          last_message: active_chat&.messages&.last,
+          full_response: nil,
+          is_streaming: false
+        } %>
       </div>
 
-      <%# Input area %>
-      <div class="flex-shrink-0 pt-4 pb-10">
-        <!-- Recording notice -->
-        <p class="text-left text-xs text-purple-800 mb-2">This chat is being recorded.</p>
-        
-        <!-- Input form -->
-        <div class="w-full">
-          <% active_execution = local_assigns[:record]&.workflow_executions&.order(created_at: :desc)&.first %>
+      <%# Input area (fixed at bottom) %>
+      <div class="lexi-chat-alpha-input-area">
+        <div class="lexi-chat-alpha-input-container">
           <%= 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>

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

@@ -1,4 +1,7 @@
 <%# Lexi Chat Tray %>
+<% active_execution = local_assigns[:record]&.workflow_executions&.order(created_at: :desc)&.first %>
+<% active_chat = active_execution&.workflow_steps&.last&.chat %>
+
 <div class="lexi-chat-tray lexi-chat-container-full">
   <!-- Header with Lexi logo and action icons -->
   <div class="lexi-chat-header">
@@ -17,14 +20,21 @@
 
   <!-- 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..."] } %>
+    <%= render partial: meta_response, locals: {
+      record: local_assigns[:record],
+      chat: active_chat,
+      messages: active_chat&.messages&.order(:created_at) || [],
+      user_messages: active_chat&.messages&.where(role: 'user')&.order(:created_at) || [],
+      last_message: active_chat&.messages&.last,
+      full_response: nil,
+      is_streaming: 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">
-      <% 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>

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

@@ -0,0 +1,16 @@
+<div class="lexi-message-assistant">
+  <div class="lexi-loader-bubble">
+    <div class="lexi-message-content-assistant" 
+         data-controller="loading-phrases"
+         data-loading-phrases-phrases-value="<%= (local_assigns[:step_progress] || default_step_progress).to_json %>">
+      <span data-loading-phrases-target="message" class="lexi-loader-text">
+        <%= default_step_progress.first %>
+      </span>
+      <span class="lexi-loader-ellipses">
+        <span class="lexi-dot lexi-dot-1">.</span>
+        <span class="lexi-dot lexi-dot-2">.</span>
+        <span class="lexi-dot lexi-dot-3">.</span>
+      </span>
+    </div>
+  </div>
+</div> 

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

@@ -44,4 +44,15 @@
     <% end %>
   <% end %>
 </div>
-<% end %> 
+<% end %>
+
+<div class="lexi-loader-container">
+  <%= turbo_frame_tag target_frame_id(record, loader: true) do %>
+    <% if chat.blank? || chat.messages.empty? %>
+      <%= render partial: meta_loader_message, locals: {
+        record: local_assigns[:record],
+        step_progress: default_step_progress
+      } %>
+    <% end %>
+  <% end %>
+</div> 

data/lib/meta_workflows/version.rb

@@ -3,7 +3,7 @@
 module MetaWorkflows
   MAJOR = 0
   MINOR = 9
-  PATCH = 10 # this is automatically incremented by the build process
+  PATCH = 12 # 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.10
+  version: 0.9.12
 platform: ruby
 authors:
 - Leonid Medovyy
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-10 00:00:00.000000000 Z
+date: 2025-07-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -117,10 +117,12 @@ files:
 - app/assets/images/lexi-chaticon.png
 - app/assets/images/lexi-collapsed.png
 - app/assets/images/lexi-expanded.png
+- app/assets/images/lexi-expanded2.png
 - app/assets/images/lexi_logo_color.png
 - app/assets/javascripts/meta_workflows/controllers/lexi_form_submit_controller.js
 - app/assets/javascripts/meta_workflows/controllers/loading_phrases_controller.js
 - app/assets/javascripts/meta_workflows/controllers/meta_flash_controller.js
+- app/assets/javascripts/meta_workflows/controllers/onboarding_controller.js
 - app/assets/javascripts/meta_workflows/controllers/redirect_controller.js
 - app/assets/javascripts/meta_workflows/controllers/response_scroll_controller.js
 - app/assets/javascripts/meta_workflows/controllers/tray_controller.js
@@ -158,9 +160,10 @@ files:
 - app/services/meta_workflows/workflow_import_service.rb
 - app/sidekiq/meta_workflows/tools/meta_workflow_tool.rb
 - app/views/layouts/meta_workflows/application.html.erb
+- app/views/meta_workflows/_error_message.html.erb
 - app/views/meta_workflows/_lexi_chat_alpha_tray.html.erb
 - app/views/meta_workflows/_lexi_chat_right_tray.html.erb
-- app/views/meta_workflows/_loader.html.erb
+- app/views/meta_workflows/_loader_message.html.erb
 - app/views/meta_workflows/_redirect.html.erb
 - app/views/meta_workflows/_response_form_lexi.html.erb
 - app/views/meta_workflows/_response_lexi.html.erb

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

@@ -1,17 +0,0 @@
-<%= turbo_frame_tag target_frame_id(record) do %>
-  <div class="flex flex-col items-center justify-center gap-2"
-       data-controller="loading-phrases"
-       data-loading-phrases-phrases-value="<%= (local_assigns[:step_progress] || ["Processing your request...", "Talking to the LLM..."]).to_json %>">
-    <h2
-      class="text-center font-semibold"
-      data-loading-phrases-target="message"
-    >
-      Processing your request...
-    </h2>
-    <div class="sm-sprite loader">
-      <span class="image-container">
-        <img class="" src="https://cdn.strongmind.com/backpack-ui/latest/assets/images/png/loaders/CB_loader.png" alt="loaders/CB_loader.png">
-      </span>
-    </div>
-  </div>
-<% end %>