meta_workflows 0.9.10 → 0.9.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a82054f7053b61a025c31d2469c8e2cb6a7c5aff3645047c180b12f228a3c046
-  data.tar.gz: bc101df970452eb0f3cb6b291bd77381be9a6f129fa4011c231c5dd82955e1de
+  metadata.gz: da33fe899987ea382b188f0c9056155a1d40089422a73f676e68f4cd138a61ce
+  data.tar.gz: 5260bf938ba32055af4487a2ddf696419e066f6038ca8bf26da661a1f3382457
 SHA512:
-  metadata.gz: a31a5da810855e6751304f68276214a8b6f30cc657ace268b326ffa6f89210050e0ab3ed6b4727c33858908a7e3a1c41e18cfbedf7dd27996c94f286b26ab563
-  data.tar.gz: 9ea86df7931e4dc0d7482e7ce6bbd7c1d3d760d6e3cd9950d5d2d7b9bb02a55cbcc7b3d40571d6f41de8f38d96f4c0056683eab267caa89591df049572a8af47
+  metadata.gz: 80a92e4f1083182254aa04fff0d25cb027fecdac86c7d4be3cad0c2eb549dd4e1eee618c62ff44fe27d7829f905b1f9409a23fd7e8cd4430280213702f8b66b5
+  data.tar.gz: 2aa86b2638f5a50e4f6d50b66376f7788d1e9948c496d9ad688f3ede119ac5dba2411809d0fcc199f716579ef68a5369e4b198d885b23f5c010746788bf4df8e

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

@@ -174,7 +174,6 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--gray-200);
 }
 
 .lexi-chat-header-left {
@@ -564,7 +563,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 +581,145 @@
 
 /* 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%;
 }

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

@@ -1,41 +1,34 @@
 <%# 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") %>
+<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">
+    <%# 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_loader, locals: {record: local_assigns[:record], step_progress: ["Generating draft course objectives...", "Talking to the LLM..."] } %>
       </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">
+      <%# Input area (fixed at bottom) %>
+      <div class="lexi-chat-alpha-input-area">
+        <div class="lexi-chat-alpha-input-container">
           <% 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>

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 = 11 # 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.11
 platform: ruby
 authors:
 - Leonid Medovyy
@@ -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