sage-rails 0.0.3

data/app/javascript/sage/controllers/dashboard_controller.js

@@ -0,0 +1,132 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="dashboard"
+export default class extends Controller {
+  static targets = ["queryList", "queryTemplate"];
+  static values = { queries: Array };
+
+  connect() {
+    console.log("Dashboard controller connected");
+    console.log("Queries value:", this.queriesValue);
+    
+    // Parse the queries value if it's a string
+    const queriesData = typeof this.queriesValue === 'string' ? 
+      JSON.parse(this.queriesValue) : this.queriesValue;
+    this.selectedQueries = Array.isArray(queriesData) ? [...queriesData] : [];
+    
+    console.log("Selected queries:", this.selectedQueries);
+    
+    this.render();
+    this.setupSortable();
+  }
+
+  addQuery(event) {
+    const { value, text } = event.detail;
+    
+    // Check for duplicates and remove if found
+    const existingIndex = this.selectedQueries.findIndex(q => q.id == value);
+    if (existingIndex !== -1) {
+      this.selectedQueries.splice(existingIndex, 1);
+    }
+    
+    // Add the new query
+    this.selectedQueries.push({ id: value, name: text });
+    this.render();
+  }
+
+  removeQuery(event) {
+    const index = parseInt(event.params.index);
+    this.selectedQueries.splice(index, 1);
+    this.render();
+  }
+
+  render() {
+    // Check if the target exists
+    if (!this.hasQueryListTarget) {
+      console.error("queryList target not found");
+      return;
+    }
+    
+    if (this.selectedQueries.length === 0) {
+      this.queryListTarget.style.display = 'none';
+      return;
+    }
+
+    this.queryListTarget.style.display = 'block';
+    let queriesContainer = this.queryListTarget.querySelector('#queries');
+    
+    // If the container doesn't exist, create it
+    if (!queriesContainer) {
+      queriesContainer = document.createElement('div');
+      queriesContainer.id = 'queries';
+      queriesContainer.style.display = 'flex';
+      queriesContainer.style.flexDirection = 'column';
+      queriesContainer.style.gap = '8px';
+      this.queryListTarget.appendChild(queriesContainer);
+    }
+    
+    queriesContainer.innerHTML = '';
+    
+    this.selectedQueries.forEach((query, index) => {
+      // Create a plain div without any Beer CSS classes
+      const item = document.createElement('div');
+      // Remove ALL classes and use inline styles only
+      item.style.cssText = `
+        display: flex !important;
+        align-items: center !important;
+        width: 100% !important;
+        padding: 12px !important;
+        margin-bottom: 8px !important;
+        background-color: #f5f5f5 !important;
+        border-radius: 8px !important;
+        opacity: 1 !important;
+        filter: none !important;
+      `;
+      
+      // Use a Material Icons checkbox instead of HTML input
+      const checkIcon = document.createElement('i');
+      checkIcon.className = 'material-icons';
+      checkIcon.textContent = 'check_box';
+      checkIcon.style.cssText = 'color: #6750A4 !important; margin-right: 12px !important; font-size: 24px !important;';
+      
+      const text = document.createElement('strong');  // Use strong tag
+      text.textContent = query.name;
+      text.style.cssText = 'flex: 1 !important; color: #000000 !important; opacity: 1 !important; filter: none !important;';
+      
+      const closeBtn = document.createElement('i');
+      closeBtn.className = 'material-icons';
+      closeBtn.textContent = 'close';
+      closeBtn.style.cssText = 'cursor: pointer !important; color: #000000 !important; opacity: 1 !important; font-size: 20px !important;';
+      closeBtn.setAttribute('data-action', 'click->sage--dashboard#removeQuery');
+      closeBtn.setAttribute('data-sage--dashboard-index-param', index);
+      
+      const hiddenInput = document.createElement('input');
+      hiddenInput.type = 'hidden';
+      hiddenInput.name = 'query_ids[]';
+      hiddenInput.value = query.id;
+      
+      item.appendChild(checkIcon);
+      item.appendChild(text);
+      item.appendChild(closeBtn);
+      item.appendChild(hiddenInput);
+      
+      queriesContainer.appendChild(item);
+    });
+  }
+
+  setupSortable() {
+    if (typeof Sortable !== 'undefined') {
+      const queriesContainer = this.queryListTarget.querySelector('#queries');
+      if (queriesContainer) {
+        Sortable.create(queriesContainer, {
+          onEnd: (e) => {
+            // Move the item in our array to match the new position
+            const movedItem = this.selectedQueries.splice(e.oldIndex, 1)[0];
+            this.selectedQueries.splice(e.newIndex, 0, movedItem);
+            this.render();
+          }
+        });
+      }
+    }
+  }
+}

data/app/javascript/sage/controllers/reverse_infinite_scroll_controller.js

@@ -0,0 +1,146 @@
+import { Controller } from "@hotwired/stimulus";
+
+console.log("Reverse infinite scroll controller file loaded!");
+
+export default class extends Controller {
+  static targets = ["entries", "pagination"];
+  static values = {
+    url: String,
+    page: Number,
+    loading: Boolean,
+  };
+
+  initialize() {
+    console.log("Reverse infinite scroll controller initialized");
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            console.log("Pagination target is visible - loading older messages");
+            this.loadOlder();
+          }
+        });
+      },
+      {
+        rootMargin: "50px 0px 50px 0px",
+        threshold: 0.1,
+      }
+    );
+  }
+
+  connect() {
+    console.log("Reverse infinite scroll controller connected");
+    console.log("Initial page value:", this.pageValue);
+    
+    if (this.hasPaginationTarget) {
+      console.log("Found pagination target, observing...");
+      this.intersectionObserver.observe(this.paginationTarget);
+    } else {
+      console.log("No pagination target found");
+    }
+  }
+
+  paginationTargetConnected(target) {
+    console.log("Pagination target connected dynamically, observing...");
+    // Add a delay to allow scroll-to-bottom to happen first
+    setTimeout(() => {
+      console.log("Starting to observe pagination target after delay");
+      this.intersectionObserver.observe(target);
+    }, 1000);
+  }
+
+  paginationTargetDisconnected(target) {
+    console.log("Pagination target disconnected, stop observing...");
+    this.intersectionObserver.unobserve(target);
+  }
+
+  disconnect() {
+    console.log("Reverse infinite scroll controller disconnected");
+    this.intersectionObserver.disconnect();
+  }
+
+  buildUrl(nextPage) {
+    const url = new URL(this.urlValue, window.location.origin);
+    url.searchParams.set("page", nextPage);
+    return url.toString();
+  }
+
+  async loadOlder() {
+    if (this.loadingValue) {
+      console.log("Already loading, skipping...");
+      return;
+    }
+
+    console.log("Loading older messages...");
+    console.log("Current pageValue:", this.pageValue);
+    this.loadingValue = true;
+    const nextPage = this.pageValue + 1;
+    console.log("Requesting page:", nextPage);
+
+    // Store current scroll position
+    const oldScrollHeight = this.element.scrollHeight;
+    const oldScrollTop = this.element.scrollTop;
+
+    try {
+      const url = this.buildUrl(nextPage);
+      console.log("Fetching URL:", url);
+      
+      const response = await fetch(url, {
+        headers: {
+          Accept: "text/vnd.turbo-stream.html",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const html = await response.text();
+      console.log("Received response for page", nextPage);
+
+      // Parse the turbo-stream content
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, "text/html");
+      const template = doc.querySelector("template");
+
+      if (template) {
+        // Remove the current pagination target before appending new content
+        if (this.hasPaginationTarget) {
+          this.paginationTarget.remove();
+        }
+
+        // Manually prepend the template content (for reverse infinite scroll)
+        this.entriesTarget.insertAdjacentHTML("afterbegin", template.innerHTML);
+        this.pageValue = nextPage;
+        console.log(`Updated to page ${nextPage}`);
+
+        // Maintain scroll position (prevent jumping to top)
+        setTimeout(() => {
+          const newScrollHeight = this.element.scrollHeight;
+          const heightDifference = newScrollHeight - oldScrollHeight;
+          this.element.scrollTop = oldScrollTop + heightDifference;
+          
+          console.log("Scroll position updated:", {
+            oldScrollHeight,
+            newScrollHeight,
+            heightDifference,
+            newScrollTop: this.element.scrollTop
+          });
+
+          // Set up observer for new pagination target if it exists
+          if (this.hasPaginationTarget) {
+            console.log("Found new pagination target, observing...");
+            this.intersectionObserver.observe(this.paginationTarget);
+          } else {
+            console.log("No more pages to load");
+          }
+        }, 50);
+      }
+    } catch (error) {
+      console.error("Error loading older messages:", error);
+      console.log("Staying on page", this.pageValue, "due to error");
+    } finally {
+      this.loadingValue = false;
+    }
+  }
+}

data/app/javascript/sage/controllers/search_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus";
+import debounce from "debounce";
+
+// Connects to data-controller="search"
+export default class extends Controller {
+  initialize() {
+    this.submit = debounce(this.submit.bind(this), 300);
+    this.searchInput = null;
+  }
+
+  connect() {
+    console.log("Search controller initialized");
+    // Find the search input
+    this.searchInput = this.element.querySelector('input[type="search"]');
+
+    if (this.searchInput) {
+      // Focus the input
+      if (this.searchInput.value.length > 0) {
+        this.searchInput.focus();
+      }
+
+      // If we have a stored cursor position, restore it
+      if (this.cursorPosition !== undefined) {
+        this.searchInput.setSelectionRange(
+          this.cursorPosition,
+          this.cursorPosition
+        );
+        // Clear the stored position after using it
+        this.cursorPosition = undefined;
+      } else {
+        // If no stored position, place cursor at the end
+        const length = this.searchInput.value.length;
+        this.searchInput.setSelectionRange(length, length);
+      }
+    }
+  }
+
+  submit(event) {
+    // Store the cursor position before submitting
+    if (this.searchInput) {
+      this.cursorPosition = this.searchInput.selectionStart;
+    }
+
+    this.element.requestSubmit();
+  }
+}
+

data/app/javascript/sage/controllers/select_controller.js

@@ -0,0 +1,215 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="select"
+export default class extends Controller {
+  static targets = ["input", "dropdown", "option", "hidden"];
+  static values = { 
+    options: Array,
+    placeholder: String,
+    selected: String,
+    maxOptions: { type: Number, default: 100 }
+  };
+
+  connect() {
+    this.selectedValue = this.selectedValue || "";
+    
+    // Parse options if they're a string
+    let options = this.optionsValue;
+    if (typeof options === 'string') {
+      try {
+        options = JSON.parse(options);
+      } catch (e) {
+        console.error("Failed to parse options:", e);
+        options = [];
+      }
+    }
+    
+    this.filteredOptions = Array.isArray(options) ? options.slice(0, this.maxOptionsValue) : [];
+    
+    // If there's a pre-selected value from the data attribute, set it
+    if (this.hasSelectedValue && this.selectedValue) {
+      const selectedOption = this.filteredOptions.find(opt => opt.value == this.selectedValue);
+      if (selectedOption) {
+        this.inputTarget.value = selectedOption.text;
+        if (this.hasHiddenTarget) {
+          this.hiddenTarget.value = selectedOption.value;
+        }
+      }
+    }
+    
+    this.render();
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    // Close dropdown when clicking outside
+    document.addEventListener('click', this.handleOutsideClick.bind(this));
+    
+    // Handle keyboard navigation
+    this.inputTarget.addEventListener('keydown', this.handleKeydown.bind(this));
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.handleOutsideClick.bind(this));
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.closeDropdown();
+    }
+  }
+
+  handleKeydown(event) {
+    const dropdown = this.dropdownTarget;
+    const options = this.optionTargets;
+    const activeOption = dropdown.querySelector('.active');
+    
+    switch(event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.navigateOptions(options, activeOption, 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.navigateOptions(options, activeOption, -1);
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (activeOption) {
+          this.selectOption(activeOption.dataset.value, activeOption.textContent);
+        }
+        break;
+      case 'Escape':
+        this.closeDropdown();
+        break;
+    }
+  }
+
+  navigateOptions(options, activeOption, direction) {
+    let currentIndex = activeOption ? Array.from(options).indexOf(activeOption) : -1;
+    let nextIndex = currentIndex + direction;
+    
+    if (nextIndex < 0) nextIndex = options.length - 1;
+    if (nextIndex >= options.length) nextIndex = 0;
+    
+    // Remove active class from all options
+    options.forEach(option => option.classList.remove('active'));
+    
+    // Add active class to next option
+    if (options[nextIndex]) {
+      options[nextIndex].classList.add('active');
+      options[nextIndex].scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  search(event) {
+    const query = event.target.value.toLowerCase().trim();
+    
+    // Parse options properly
+    let options = this.optionsValue;
+    if (typeof options === 'string') {
+      try {
+        options = JSON.parse(options);
+      } catch (e) {
+        options = [];
+      }
+    }
+    options = Array.isArray(options) ? options : [];
+    
+    if (query === '' || query === ' ') {
+      this.filteredOptions = options.slice(0, this.maxOptionsValue);
+    } else {
+      this.filteredOptions = options
+        .filter(option => option.text.toLowerCase().includes(query))
+        .slice(0, this.maxOptionsValue);
+    }
+    
+    this.renderOptions();
+    this.openDropdown();
+  }
+
+  selectOption(value, text) {
+    // Update the input to show selected text
+    this.inputTarget.value = text;
+    this.selectedValue = value;
+    
+    // Update hidden field if present
+    if (this.hasHiddenTarget) {
+      this.hiddenTarget.value = value;
+    }
+    
+    // Dispatch custom event for external handling
+    const selectEvent = new CustomEvent('select:change', {
+      detail: { value: value, text: text },
+      bubbles: true
+    });
+    this.element.dispatchEvent(selectEvent);
+    
+    this.closeDropdown();
+  }
+
+  openDropdown() {
+    this.dropdownTarget.classList.remove('hidden');
+    this.dropdownTarget.classList.add('visible');
+  }
+
+  closeDropdown() {
+    this.dropdownTarget.classList.remove('visible');
+    this.dropdownTarget.classList.add('hidden');
+  }
+
+  focus() {
+    // Reset search to show all options when focusing
+    const currentValue = this.inputTarget.value.trim();
+    if (currentValue === '' || currentValue === ' ') {
+      // Parse options properly
+      let options = this.optionsValue;
+      if (typeof options === 'string') {
+        try {
+          options = JSON.parse(options);
+        } catch (e) {
+          options = [];
+        }
+      }
+      this.filteredOptions = Array.isArray(options) ? options.slice(0, this.maxOptionsValue) : [];
+      this.renderOptions();
+    }
+    this.openDropdown();
+  }
+
+  blur() {
+    // Delay hiding to allow option clicks
+    setTimeout(() => {
+      this.closeDropdown();
+    }, 150);
+  }
+
+  render() {
+    // Don't set placeholder for Beer CSS floating labels
+    this.renderOptions();
+  }
+
+  renderOptions() {
+    this.dropdownTarget.innerHTML = '';
+    
+    if (this.filteredOptions.length === 0) {
+      const noResults = document.createElement('div');
+      noResults.className = 'select-option no-results';
+      noResults.textContent = 'No results found';
+      this.dropdownTarget.appendChild(noResults);
+      return;
+    }
+    
+    this.filteredOptions.forEach(option => {
+      const optionElement = document.createElement('div');
+      optionElement.className = 'select-option';
+      optionElement.dataset.selectTarget = 'option';
+      optionElement.dataset.value = option.value;
+      optionElement.textContent = option.text;
+      optionElement.addEventListener('click', () => {
+        this.selectOption(option.value, option.text);
+      });
+      this.dropdownTarget.appendChild(optionElement);
+    });
+  }
+}

data/app/javascript/sage.js

@@ -0,0 +1,19 @@
+// Import controllers
+import SearchController from "sage/controllers/search_controller"
+import ClipboardController from "sage/controllers/clipboard_controller"
+import SelectController from "sage/controllers/select_controller"
+import DashboardController from "sage/controllers/dashboard_controller"
+import ReverseInfiniteScrollController from "sage/controllers/reverse_infinite_scroll_controller"
+
+// Export all Sage controllers for manual registration
+export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController }
+
+// Register all Sage controllers with the provided Stimulus application
+export function registerControllers(application) {
+  application.register("sage--search", SearchController)
+  application.register("sage--clipboard", ClipboardController)
+  application.register("sage--select", SelectController)
+  application.register("sage--dashboard", DashboardController)
+  application.register("sage--reverse-infinite-scroll", ReverseInfiniteScrollController)
+}
+

data/app/jobs/sage/application_job.rb

@@ -0,0 +1,4 @@
+module Sage
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/jobs/sage/process_report_job.rb

@@ -0,0 +1,80 @@
+require "sage/report_processor"
+
+module Sage
+  class ProcessReportJob < ActiveJob::Base
+    include ActionView::RecordIdentifier
+    include Sage::Engine.routes.url_helpers
+
+    def perform(prompt, query_id:, stream_target_id:)
+      query = Blazer::Query.find(query_id)
+
+      # Ensure we have the proper routing context for broadcasts
+      self.class.default_url_options = Rails.application.routes.default_url_options
+
+      Turbo::StreamsChannel.broadcast_append_to(
+        "messages",
+        target: dom_id(query, "messages"),
+        partial: "sage/queries/streaming_message",
+        locals: { stream_target_id:, content: "Thinking..." }
+      )
+
+      # Use the ReportProcessor to handle the LLM interaction and parsing
+      processor = ReportProcessor.new(
+        query: query,
+        prompt: prompt,
+        stream_target_id: stream_target_id
+      )
+
+      result = processor.process
+      Rails.logger.info "ProcessReportJob result: #{result.inspect}"
+      summary = result[:summary]
+      sql = result[:sql]
+
+      Rails.logger.info "Summary: #{summary}"
+      Rails.logger.info "SQL: #{sql}"
+      # Handle empty summary
+      summary = "I couldn't generate a response. Please try again." if summary.blank?
+
+      ai_message = query.messages.create!(body: summary, statement: sql)
+
+      Turbo::StreamsChannel.broadcast_replace_to(
+        "messages",
+        target: stream_target_id,
+        partial: "sage/queries/message",
+        locals: { message: ai_message, stream_target_id: stream_target_id }
+      )
+
+      Turbo::StreamsChannel.broadcast_replace_to(
+        "statements",
+        target: dom_id(query, "statement-box"),
+        partial: "sage/queries/statement_box",
+        locals: { query: query, statement: sql, form_url: run_queries_path }
+      )
+
+      # Auto-submit the form after the statement_box renders
+      Turbo::StreamsChannel.broadcast_append_to(
+        "statements",
+        target: "body",
+        html: "<script>
+          setTimeout(() => {
+            // Wait for ACE editor to be fully initialized
+            const checkAndSubmit = () => {
+              const form = document.querySelector('##{dom_id(query, "statement-box")} form');
+              const hiddenField = document.querySelector('#query_statement');
+
+              if (form && hiddenField && hiddenField.value && window.aceEditor) {
+                form.submit();
+              } else {
+                // Retry after another 100ms if not ready
+                setTimeout(checkAndSubmit, 100);
+              }
+            };
+            checkAndSubmit();
+          }, 200);
+        </script>"
+      )
+
+      true
+    end
+  end
+end

data/app/mailers/sage/application_mailer.rb

@@ -0,0 +1,6 @@
+module Sage
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/sage/application_record.rb

@@ -0,0 +1,5 @@
+module Sage
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/sage/message.rb

@@ -0,0 +1,8 @@
+module Sage
+  class Message < ApplicationRecord
+    belongs_to :blazer_query, class_name: "Blazer::Query", foreign_key: :blazer_query_id
+    belongs_to :creator, optional: true, class_name: ::Blazer.user_class.to_s if ::Blazer.user_class
+
+    validates :body, presence: true
+  end
+end

data/app/schemas/sage/report_response_schema.rb

@@ -0,0 +1,8 @@
+require "ruby_llm/schema"
+
+module Sage
+  class ReportResponseSchema < RubyLLM::Schema
+    string :sql, description: "Generated SQL based on user prompt"
+    string :summary, description: "Natural language summary of generated report"
+  end
+end