llama_bot_rails 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ccb4330c7c68f3756bb04fb817404573a68b93f0461ffe5b961711c24d8ca232
-  data.tar.gz: 0be907f6035572fabd79a0bee0d88200aac81bcde8136d7bb2c0b024cdce7d09
+  metadata.gz: 9bd4c2d542ae02f6d430d6c6233792445b79dcff44b265d508c9d985db22b09b
+  data.tar.gz: '09ad72a1840000cf121133633dc104517e5937a843be0cba48dadd0a3bf60a66'
 SHA512:
-  metadata.gz: 8636af5a8035803f65fd4c648c8a5474998e3c8198d43682c69013123d9c3ae7e1f383f9ee6bab76c46e4bc0b1b88befedbaa026de2dd0ec631cd1105c6efc20
-  data.tar.gz: c350dd3572e4174717b0f000c1aa0447ae50cd303a1839b036ac74e1d1e65048fef8bf0f2ecf211845be658af4c51220ef9cd4ff33e60093c75e62f7ac087eb1
+  metadata.gz: 192fe783f3c6e91170bb3109dbb116d21ca7bb6c68ecb064a92435d416efa16a1e765e5ff59d07af5978e348724e9f70569dbbf2faaeab8ac9a432f7df1712e6
+  data.tar.gz: 02362ff59435fd5a0b88038f276e2cc69d8fd70fac868b16ee4c1fa98bfb4ae36c298e541aec388a37856de636b9ee841bff81be971fbae50949925d2c9e3cd2

data/README.md

@@ -27,7 +27,6 @@ Chat with a powerful agent that has access to your models, your application cont
 
 ## 🚀 **Quickstart** →
 
-
 ```bash
 
 # 1. Add the gem
@@ -38,14 +37,27 @@ rails generate llama_bot_rails:install
 
 # 3. Clone & run the LangGraph backend
 git clone https://github.com/kodykendall/llamabot
-cd llamabot
-OPENAI_API_KEY=your_key 
-cd backend && uvicorn app:app --reload
 
-# Start your Rails server
+# 4. Set up your environment
+python3 -m venv venv
+
+source venv/bin/activate
+
+pip install -r requirements.txt
+
+echo "OPENAI_API_KEY=your_openai_api_key_here" > .env
+
+# 5. Run the agent
+cd backend
+uvicorn app:app --reload
+
+# 6. Confirm our agent is running properly. You should see: Hello, World! 🦙💬
+curl http://localhost:8000/hello
+
+# 7. Start your Rails server.
 rails server
 
-# Visit the chat interface and start chatting.
+# 8. Visit the chat interface and start chatting.
 open http://localhost:3000/llama_bot/agent/chat
 
 ```

data/app/assets/javascripts/llama_bot_rails/application.js

@@ -1,7 +1,22 @@
 //= require action_cable
 //= require_self
 
-(function() {
+(function () {
   this.LlamaBotRails = this.LlamaBotRails || {};
-  LlamaBotRails.cable = ActionCable.createConsumer();
-}).call(this); 
+
+  function createLlamaCable() {
+    if (window.ActionCable && !LlamaBotRails.cable) {
+      console.log("🦙 Creating LlamaBot ActionCable consumer");
+      LlamaBotRails.cable = ActionCable.createConsumer();
+    }
+  }
+
+  // Run immediately if ActionCable is already present (classic asset pipeline)
+  if (window.ActionCable) {
+    createLlamaCable();
+  } else {
+    // Wait until DOM + importmap load finishes
+    document.addEventListener("DOMContentLoaded", createLlamaCable);
+    document.addEventListener("turbo:load", createLlamaCable); // covers Turbo + importmap apps
+  }
+}).call(this);

data/app/channels/llama_bot_rails/chat_channel.rb

@@ -1,3 +1,7 @@
+require 'async'
+require 'async/http'
+require 'async/websocket'
+
 require 'json'  # Ensure JSON is required if not already
 
 module LlamaBotRails
@@ -147,28 +151,27 @@ module LlamaBotRails
       Rails.logger.info "[LlamaBot] Setting up external websocket for connection: #{connection_id}"
       
       # Check if the WebSocket URL is configured
-      websocket_url = ENV['LLAMABOT_WEBSOCKET_URL']
+      websocket_url = Rails.application.config.llama_bot_rails.websocket_url
       if websocket_url.blank?
-        Rails.logger.warn "[LlamaBot] LLAMABOT_WEBSOCKET_URL not configured, skipping external WebSocket setup"
+        Rails.logger.warn "[LlamaBot] LlamaBot Websocket URL is not configured in the config/initializers/llama_bot_rails.rb file, skipping external WebSocket setup"
         return
       end
       
-      # endpoint = Async::HTTP::Endpoint.parse(ENV['LLAMABOT_WEBSOCKET_URL']) 
       uri = URI(websocket_url)
       
       uri.scheme = 'wss'
-      uri.scheme = 'ws' if ENV['DEVELOPMENT_ENVIRONMENT'] == 'true'
+      uri.scheme = 'ws' if Rails.env.development?
 
       endpoint = Async::HTTP::Endpoint.new(
           uri,
           ssl_context: OpenSSL::SSL::SSLContext.new.tap do |ctx|
               ctx.verify_mode = OpenSSL::SSL::VERIFY_PEER
-              if ENV["STAGING_ENVIRONMENT"] == 'true'
+              if Rails.env.staging?
                 ctx.ca_file = '/usr/local/etc/ca-certificates/cert.pem'
                 # M2 Air : ctx.ca_file = '/etc//ssl/cert.pem'
                 ctx.cert = OpenSSL::X509::Certificate.new(File.read(File.expand_path('~/.ssl/llamapress/cert.pem')))
                 ctx.key = OpenSSL::PKey::RSA.new(File.read(File.expand_path('~/.ssl/llamapress/key.pem')))
-              elsif ENV['DEVELOPMENT_ENVIRONMENT'] == 'true'
+              elsif Rails.env.development?
                 # do no ctx stuff
                 ctx.verify_mode = OpenSSL::SSL::VERIFY_NONE   
               else  # production

data/app/views/llama_bot_rails/agent/chat.html.erb

@@ -405,7 +405,111 @@
       font-size: 1em;
       color: var(--text-secondary);
     }
+
+    /* Clean loading indicator - just animated text */
+    .loading-indicator {
+      display: none;
+      align-items: center;
+      padding: 16px 20px;
+      color: var(--text-secondary);
+      font-size: 14px;
+      margin-bottom: 10px;
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .loading-indicator.visible {
+      display: flex;
+    }
+
+    .loading-text {
+      font-style: italic;
+    }
+
+    .loading-dots::after {
+      content: '';
+      animation: dots 1.5s steps(4, end) infinite;
+    }
+
+    @keyframes dots {
+      0%, 20% { content: ''; }
+      40% { content: '.'; }
+      60% { content: '..'; }
+      80%, 100% { content: '...'; }
+    }
+
+    /* Suggested Prompts Styling - Always visible above input */
+    .suggested-prompts {
+      margin-bottom: 16px;
+      padding: 0 4px;
+    }
+
+    .prompts-label {
+      font-size: 13px;
+      color: var(--text-secondary);
+      margin-bottom: 8px;
+      font-weight: 500;
+      letter-spacing: 0.3px;
+    }
+
+    .prompts-container {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .prompts-row {
+      display: flex;
+      gap: 8px;
+      overflow-x: auto;
+      padding: 2px;
+      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    .prompts-row::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera */
+    }
+
+    .prompt-button {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 6px;
+      padding: 8px 12px;
+      color: var(--text-secondary);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-family: inherit;
+      white-space: nowrap;
+      flex-shrink: 0;
+      min-width: fit-content;
+    }
+
+    .prompt-button:hover {
+      background: rgba(33, 150, 243, 0.08);
+      border-color: rgba(33, 150, 243, 0.2);
+      color: var(--text-primary);
+      transform: translateY(-1px);
+    }
+
+    .prompt-button:active {
+      transform: translateY(0);
+    }
+
+    @media (max-width: 768px) {
+      .prompts-grid {
+        grid-template-columns: 1fr;
+      }
+      
+      .prompt-button {
+        font-size: 13px;
+        padding: 10px 14px;
+      }
+    }
   </style>
+  <%= javascript_importmap_tags %>
   <%= javascript_include_tag "llama_bot_rails/application" %>
   <%= action_cable_meta_tag %>
   <!-- Add Snarkdown CDN -->
@@ -430,7 +534,7 @@
           </button>
           <div class="logo-container">
             <img src="https://service-jobs-images.s3.us-east-2.amazonaws.com/7rl98t1weu387r43il97h6ipk1l7" alt="LlamaBot Logo" class="logo">
-            <div id="connectionStatusIconForLlamaBot" class="connection-status status-green"></div>
+            <div id="connectionStatusIconForLlamaBot" class="connection-status status-yellow"></div>
           </div>
           <h1>LlamaBot Chat</h1>
         </div>
@@ -444,6 +548,30 @@
       <div class="chat-messages" id="chat-messages">
         <!-- Messages will be added here dynamically -->
       </div>
+      
+      <!-- Simple loading indicator with just animated text -->
+      <div class="loading-indicator" id="loading-indicator">
+        <span class="loading-text">LlamaBot is thinking<span class="loading-dots"></span></span>
+      </div>
+      
+      <!-- Suggested Prompts - Always visible above input -->
+      <div class="suggested-prompts" id="suggested-prompts">
+        <div class="prompts-label">Quick actions:</div>
+        <div class="prompts-container">
+          <div class="prompts-row">
+            <button class="prompt-button" onclick="selectPrompt(this)">What models are defined in this app?</button>
+            <button class="prompt-button" onclick="selectPrompt(this)">What routes exist?</button>
+            <button class="prompt-button" onclick="selectPrompt(this)">How many users are in the database?</button>
+            <button class="prompt-button" onclick="selectPrompt(this)">Show me the schema for the User model</button>
+          </div>
+          <div class="prompts-row">
+            <button class="prompt-button" onclick="selectPrompt(this)">Send a text with Twilio</button>
+            <button class="prompt-button" onclick="selectPrompt(this)">Create a BlogPost with title and body fields</button>
+            <button class="prompt-button" onclick="selectPrompt(this)">Generate a scaffolded Page model</button>
+          </div>
+        </div>
+      </div>
+      
       <div class="input-container">
         <input type="text" id="message-input" placeholder="Type your message...">
         <button onclick="sendMessage()">Send</button>
@@ -465,37 +593,49 @@
     let redStatusStartTime = null;
     let errorModalShown = false;
     let connectionCheckInterval;
+    let subscription = null;
 
-    // Initialize ActionCable connection
-    const consumer = LlamaBotRails.cable;
-    const subscription = consumer.subscriptions.create('LlamaBotRails::ChatChannel', {
-      connected() {
-        console.log('Connected to chat channel');
-        lastPongTime = Date.now();
-        loadThreads();
-        startConnectionCheck();
-      },
-      disconnected() {
-        console.log('Disconnected from chat channel');
-        updateStatusIcon('status-red');
-      },
-      received(data) {
-        const parsedData = JSON.parse(data).message;
-        switch(parsedData.type) {
+    function waitForCableConnection(callback) {
+      const interval = setInterval(() => {
+        if (window.LlamaBotRails && LlamaBotRails.cable) {
+          clearInterval(interval);
+          callback(LlamaBotRails.cable);
+        }
+      }, 50);
+    }
+    
+    waitForCableConnection((consumer) => {
+      const sessionId = crypto.randomUUID();
+
+      subscription = consumer.subscriptions.create({channel: 'LlamaBotRails::ChatChannel', session_id: sessionId}, {
+        connected() {
+          console.log('Connected to chat channel');
+          lastPongTime = Date.now();
+          loadThreads();
+          startConnectionCheck();
+        },
+        disconnected() {
+          console.log('Disconnected from chat channel');
+          updateStatusIcon('status-red');
+        },
+        received(data) {
+          const parsedData = JSON.parse(data).message;
+          switch (parsedData.type) {
             case "ai":
               addMessage(parsedData.content, parsedData.type, parsedData.base_message);
               break;
-          case "tool":
-            addMessage(parsedData.content, parsedData.type, parsedData.base_message);
-            break;
-          case "error":
-            addMessage(parsedData.content, parsedData.type, parsedData.base_message);
-            break;
-          case "pong":
-            lastPongTime = Date.now();
-            break;
+            case "tool":
+              addMessage(parsedData.content, parsedData.type, parsedData.base_message);
+              break;
+            case "error":
+              addMessage(parsedData.content, parsedData.type, parsedData.base_message);
+              break;
+            case "pong":
+              lastPongTime = Date.now();
+              break;
+          }
         }
-      }
+      });
     });
 
     function startConnectionCheck() {
@@ -681,11 +821,6 @@
       
       // Show welcome message
       showWelcomeMessage();
-      
-      // Clear active thread selection
-      document.querySelectorAll('.thread-item').forEach(item => {
-        item.classList.remove('active');
-      });
     }
 
     function showWelcomeMessage() {
@@ -699,11 +834,45 @@
       messagesDiv.appendChild(welcomeDiv);
     }
 
+    function showLoadingIndicator() {
+      const loadingIndicator = document.getElementById('loading-indicator');
+      loadingIndicator.classList.add('visible');
+    }
+
+    function hideLoadingIndicator() {
+      const loadingIndicator = document.getElementById('loading-indicator');
+      loadingIndicator.classList.remove('visible');
+    }
+
+    function selectPrompt(buttonElement) {
+      const promptText = buttonElement.textContent;
+      const messageInput = document.getElementById('message-input');
+      
+      // Populate the input field
+      messageInput.value = promptText;
+      
+      // Focus the input field for better UX
+      messageInput.focus();
+      
+      // Add a subtle animation to show the prompt was selected
+      buttonElement.style.transform = 'scale(0.98)';
+      setTimeout(() => {
+        buttonElement.style.transform = '';
+      }, 150);
+    }
+
     function sendMessage() {
       const input = document.getElementById('message-input');
       const message = input.value.trim();
       
       if (message) {
+        // Check if subscription is available
+        if (!subscription) {
+          console.error('WebSocket connection not established yet');
+          addMessage('Connection not ready. Please wait...', 'error');
+          return;
+        }
+
         // Clear welcome message if it exists
         const welcomeMessage = document.querySelector('.welcome-message');
         if (welcomeMessage) {
@@ -713,6 +882,9 @@
         addMessage(message, 'human');
         input.value = '';
 
+        // Show loading indicator
+        showLoadingIndicator();
+
         // Generate timestamp-based thread ID if we don't have one
         let threadId = currentThreadId;
         if (!threadId || threadId === 'global_thread_id') {
@@ -746,6 +918,11 @@
     function addMessage(text, sender, base_message=null) {
       console.log('🧠 Message from LlamaBot:', text, sender, base_message);
 
+      // Hide loading indicator when we receive an AI response
+      if (sender === 'ai') {
+        hideLoadingIndicator();
+      }
+
       const messagesDiv = document.getElementById('chat-messages');
       const messageDiv = document.createElement('div');
       messageDiv.className = `message ${sender}-message`;

data/lib/generators/llama_bot_rails/install/install_generator.rb

@@ -0,0 +1,46 @@
+# lib/generators/llama_bot_rails/install/install_generator.rb
+module LlamaBotRails
+    module Generators
+      class InstallGenerator < Rails::Generators::Base
+        source_root File.expand_path("templates", __dir__)
+  
+        def mount_engine
+            say <<~MSG, :yellow
+                ⚠️ NOTE: LlamaBotRails requires ActionCable to be available on the frontend.
+
+                If you're using ImportMap (Rails 7 default), run:
+
+                    bin/importmap pin @rails/actioncable
+
+                And in app/javascript/application.js, add:
+
+                    import * as ActionCable from "@rails/actioncable"
+                    window.ActionCable = ActionCable
+
+                If you're using Webpacker or jsbundling-rails:
+                    Add @rails/actioncable via yarn/npm
+                    And import + expose it the same way in your JS pack.
+
+                📘 See README → “JavaScript Setup” for full details.
+                
+                MSG
+
+          route 'mount LlamaBotRails::Engine => "/llama_bot"'
+        end
+  
+        def create_initializer
+          create_file "config/initializers/llama_bot_rails.rb", <<~RUBY
+            Rails.application.configure do
+              config.llama_bot_rails.websocket_url = ENV.fetch("LLAMABOT_WEBSOCKET_URL", "ws://localhost:8000/ws")
+              config.llama_bot_rails.enable_console_tool = !Rails.env.production?
+            end
+          RUBY
+        end
+  
+        def finish
+          say "\n✅ LlamaBotRails installed! Visit http://localhost:3000/llama_bot/agent/chat\n", :green
+        end
+      end
+    end
+  end
+  

data/lib/llama_bot_rails/engine.rb

@@ -11,6 +11,9 @@ module LlamaBotRails
     end
 
     config.llama_bot_rails = ActiveSupport::OrderedOptions.new
+    config.llama_bot_rails.websocket_url = 'ws://localhost:8000/ws' # <-- default
+    config.llama_bot_rails.llamabot_api_url = "http://localhost:8000"
+    config.llama_bot_rails.enable_console_tool = true
 
     initializer "llama_bot_rails.assets.precompile" do |app|
       app.config.assets.precompile += %w( llama_bot_rails/application.js )

data/lib/llama_bot_rails/version.rb

@@ -1,3 +1,3 @@
 module LlamaBotRails
-  VERSION = "0.1.2"
+  VERSION = "0.1.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: llama_bot_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Kody Kendall
@@ -77,6 +77,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: async
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: LlamaBotRails is a gem that turns your existing Rails App into an AI
   Agent by connecting it to an open source LangGraph agent, LlamaBot.
 email:
@@ -107,6 +121,7 @@ files:
 - bin/rubocop
 - config/initializers/llama_bot_rails.rb
 - config/routes.rb
+- lib/generators/llama_bot_rails/install/install_generator.rb
 - lib/llama_bot_rails.rb
 - lib/llama_bot_rails/agent_state_builder.rb
 - lib/llama_bot_rails/engine.rb