llama_bot_rails 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 22dd1ec3cd8056d6ad567a987afb3aee4590816f37477eeefa81e975d07b59a6
-  data.tar.gz: f38dfc3262e9794f7371e6d16c9be4f382f638eac84657850c725b0f85264731
+  metadata.gz: 8a6895de16432a4a2200c1623a25c68c09897b2a6fb3bf55977a2824f3578310
+  data.tar.gz: c39ee31cf9fa2166de1d48434ab3228a6db960328a6565826242e57e5a22a678
 SHA512:
-  metadata.gz: fd7d9a5386b68dcee1d2dd672df9a8ea6fa6c5860d2f6a829d7de73d9c28cfec0810addd344c3f341351c743a350afd8018bf6aff4d687611807bb9da37a4cef
-  data.tar.gz: b3dbc4afc368553e968b587ccda61905912c9190ba6bf05d2f59003f556f45a4613595bb8e2938661b30e10de3a9c0ada1b1c1541777b7d577f5910e71121c07
+  metadata.gz: 9711a2a8cfe8e485210b84314860eb098113de321ccfd1a93be15608240312d45ff54d852b965eb60f0d84b530620e856d837d28dc7a8b8a3f958e470859b6a2
+  data.tar.gz: e175b5d7df84b42fff07dec9a0daed0384bf77891fc42611ab83ba087131b879a97aec66b77d154ccd9c5f89ed3db2df3e53052d0a937f5e80c8b84cc778c34e

data/README.md

@@ -11,9 +11,10 @@ Chat with a powerful agent that has access to your models, your application cont
 ---
 
 ## 🎥 **See it in action** (30-Second Demo)
+![Demo](./assets/LlamaBotRailsGifSmaller.gif)
+
+
 
-👉 ![LlamaBot Demo](https://llamapress-ai-image-uploads.s3.us-west-2.amazonaws.com/pp1s3l4iskwabnq0gi5tx8mi9mue)
-“Welcome to the future of Rails + AI.”
 
 ### The agent can:
 
@@ -35,26 +36,11 @@ bundle add llama_bot_rails
 # 2. Install the routes & chat interface
 rails generate llama_bot_rails:install
 
-# 3. Clone & run the LangGraph backend
-git clone https://github.com/kodykendall/llamabot
-
-cd llamabot
-
-# 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
+# 3.Run the LlamaBot backend easily with Docker
+docker run \
+  -e OPENAI_API_KEY=(your-key) \
+  -p 8000:8000 \
+  kody06/llamabot-backend
 
 # 7. Start your Rails server.
 rails server
@@ -80,6 +66,20 @@ open http://localhost:3000/llama_bot/agent/chat
 
 ---
 
+## ⚙️ Rails Integration Note (for LlamaBot Rails Gem)
+
+If you're using the llama_bot_rails Gem with Docker, your Rails app must allow the Docker agent to connect back to it.
+
+Add this to your config/environments/development.rb (if it wasn’t added automatically by the Gem installer):
+
+```ruby
+Rails.application.configure do
+  config.hosts << /host\.docker\.internal/  # Allow Docker agent to connect to Rails
+end
+```
+
+This allows the Docker container to reach http://host.docker.internal:3000, which maps to your Rails app on the host machine.
+
 ## 🧨 **Power & Responsibility**
 
 ### ⚠️ **This gem gives the agent access to your Rails console.**

data/app/channels/llama_bot_rails/chat_channel.rb

@@ -4,6 +4,34 @@ require 'async/websocket'
 
 require 'json'  # Ensure JSON is required if not already
 
+# Why support both a websocket connection, (chat_channel.rb), and a non-websocket SSE connection? %>
+# Rails 6 wasn’t working with our ActionCable websocket connection, so I wanted to implement SSE as well.
+
+# We want to support a generic HTML interface that isn’t dependent on rails. (In case the Rails server goes down for whatever reason, we don’t lose access to LlamaBot).
+# Why have chat_channel.rb at all?
+
+# Because Ruby on Rails lacks good tooling to handle real-time interaction, that isn’t through ActionCable. 
+# For “cancel” requests. Websocket is a 2 way connection, so we can send a ‘cancel’ in. 
+# To support legacy LlamaPress stuff. 
+# We chose to implement it with ActionCable plus Async Websockets.
+# But, it’s Ruby on Rails specific, and is best for UI/UX experiences.
+
+# SSE is better for other clients that aren’t Ruby on Rails specific, and if you want to handle just a simple SSE approach.
+# This does add some complexity though.
+
+# We now have 2 different paradigms of front-end JavaScript consuming from LlamaBot
+# ActionCable consumption
+# StreamedResponse consumption.
+
+# We also have 2 new middleware layers:
+# ActionCable <-> chat_channel.rb <-> /ws <-> request_handler.py
+# HTTPS <-> agent_controller.rb <-> LlamaBot.rb <-> FastAPI HTTPS
+
+# So this increases our overall surface area for the application.
+
+# This is deprecated and will be removed over time, to move towards a simple SSE approach.
+
+
 module LlamaBotRails
   class ChatChannel < ApplicationCable::Channel
     # _chat.html.erb front-end subscribes to this channel in _websocket.html.erb.

data/app/controllers/llama_bot_rails/agent_controller.rb

@@ -1,7 +1,8 @@
 require 'llama_bot_rails/llama_bot'
 module LlamaBotRails
     class AgentController < ActionController::Base
-        skip_before_action :verify_authenticity_token, only: [:command]
+        include ActionController::Live
+        skip_before_action :verify_authenticity_token, only: [:command, :send_message]
         before_action :authenticate_agent!, only: [:command]
 
         # POST /agent/command
@@ -38,6 +39,11 @@ module LlamaBotRails
             # Render chat.html.erb
         end
 
+        # GET /agent/chat_ws
+        def chat_ws
+            # render chat_ws.html.erb
+        end
+
         def threads
             begin
                 threads = LlamaBotRails::LlamaBot.get_threads
@@ -66,13 +72,75 @@ module LlamaBotRails
             end
         end
 
+        # POST /agent/send-message
+        def send_message
+            response.headers['Content-Type']  = 'text/event-stream'
+            response.headers['Cache-Control'] = 'no-cache'
+            response.headers['Connection']    = 'keep-alive'
+
+            @api_token = Rails.application.message_verifier(:llamabot_ws).generate(
+                { session_id: SecureRandom.uuid },
+                expires_in: 30.minutes
+              )
+
+            # 1. Instantiate the builder
+            builder = state_builder_class.new(
+                params: { message: params[:message] },
+                context: { thread_id: params[:thread_id], api_token: @api_token }
+            )
+    
+            # 2. Construct the LangGraph-ready state
+            state_payload = builder.build
+            # sse = SSE.new(response.stream)
+
+            begin
+                LlamaBotRails::LlamaBot.send_agent_message(state_payload) do |chunk|
+                    Rails.logger.info "[[LlamaBot]] Received chunk in agent_controller.rb: #{chunk}"
+                    # sse.write(chunk)
+                    response.stream.write "data: #{chunk.to_json}\n\n"
+
+                end
+            rescue => e
+                Rails.logger.error "Error in send_message action: #{e.message}"
+                response.stream.write "data: #{ { type: 'error', content: e.message }.to_json }\n\n"
+
+                # sse.write({ type: 'error', content: e.message })
+            ensure
+                response.stream.close
+
+                # sse.close
+            end
+        end
+
+        def test_streaming
+            response.headers['Content-Type']  = 'text/event-stream'
+            response.headers['Cache-Control'] = 'no-cache'
+            response.headers['Connection']    = 'keep-alive'
+            sse = SSE.new(response.stream)
+            sse.write({ type: 'start', content: 'Starting streaming' })
+            sleep 1
+            sse.write({ type: 'ai', content: 'This is an AI message' })
+            sleep 1
+            sse.write({ type: 'ai', content: 'This is an AI message' })
+            sleep 1
+            sse.write({ type: 'ai', content: 'This is an AI message' })
+            sleep 1
+            sse.write({ type: 'ai', content: 'This is an AI message' })
+        end
+
         private 
 
         def safety_eval(input)
-            # Change to Rails root directory for file operations
-            Dir.chdir(Rails.root) do
-                # Create a safer evaluation context
-                binding.eval(input)
+            begin
+                # Change to Rails root directory for file operations
+                Dir.chdir(Rails.root) do
+                    # Create a safer evaluation context
+                    Rails.logger.info "[[LlamaBot]] Evaluating input: #{input}"
+                    binding.eval(input)
+                end
+            rescue => exception
+                Rails.logger.error "Error in safety_eval: #{exception.message}"
+                return exception.message
             end
         end
 
@@ -83,5 +151,10 @@ module LlamaBotRails
         rescue ActiveSupport::MessageVerifier::InvalidSignature
             head :unauthorized
         end
+
+        def state_builder_class
+            #The user is responsible for creating a custom AgentStateBuilder if they want to use a custom agent. Otherwise, we default to LlamaBotRails::AgentStateBuilder.
+            LlamaBotRails.config.state_builder_class.constantize
+        end
     end
 end

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

@@ -145,30 +145,7 @@
       display: block;
     }
 
-    .connection-status {
-      position: absolute;
-      bottom: -2px;
-      right: -2px;
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      border: 2px solid var(--bg-primary);
-      transition: background-color 0.3s ease;
-      z-index: 10;
-      pointer-events: none;
-    }
-
-    .status-green {
-      background-color: #22c55e !important;
-    } 
 
-    .status-yellow {
-      background-color: #eab308 !important;
-    }
-
-    .status-red {
-      background-color: #ef4444 !important;
-    }
 
     .error-modal {
       display: none;
@@ -406,7 +383,7 @@
       color: var(--text-secondary);
     }
 
-    /* Clean loading indicator - just animated text */
+    /* Enhanced loading indicator with status updates */
     .loading-indicator {
       display: none;
       align-items: center;
@@ -417,6 +394,8 @@
       background: rgba(255, 255, 255, 0.02);
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, 0.08);
+      transition: all 0.3s ease;
+      min-height: 50px; /* Prevent layout shift during status updates */
     }
 
     .loading-indicator.visible {
@@ -425,11 +404,15 @@
 
     .loading-text {
       font-style: italic;
+      flex: 1;
+      transition: color 0.3s ease;
+      line-height: 1.4;
     }
 
     .loading-dots::after {
       content: '';
       animation: dots 1.5s steps(4, end) infinite;
+      opacity: 0.7;
     }
 
     @keyframes dots {
@@ -439,6 +422,22 @@
       80%, 100% { content: '...'; }
     }
 
+    /* Status-specific styling */
+    .loading-indicator:has(.loading-text:contains("Error")) {
+      border-color: rgba(244, 67, 54, 0.3);
+      background: rgba(244, 67, 54, 0.05);
+    }
+
+    .loading-indicator:has(.loading-text:contains("Complete")) {
+      border-color: rgba(76, 175, 80, 0.3);
+      background: rgba(76, 175, 80, 0.05);
+    }
+
+    .loading-indicator:has(.loading-text:contains("Connected")) {
+      border-color: rgba(33, 150, 243, 0.3);
+      background: rgba(33, 150, 243, 0.05);
+    }
+
     /* Suggested Prompts Styling - Always visible above input */
     .suggested-prompts {
       margin-bottom: 16px;
@@ -510,16 +509,6 @@
     }
   </style>
 
-  <% if defined?(javascript_importmap_tags) %> <!-- Rails 7+ -->
-    <%= javascript_importmap_tags %>
-  <% else %> <!-- Rails 6 -->
-    <%= javascript_include_tag "application" %>
-  <% end %>
-  
-  <%= javascript_include_tag "llama_bot_rails/application" %>
-  <% if defined?(action_cable_meta_tag) %>
-    <%= action_cable_meta_tag %>
-  <% end %>
   <!-- Add Snarkdown CDN -->
   <script src="https://unpkg.com/snarkdown/dist/snarkdown.umd.js"></script>
 </head>
@@ -542,7 +531,6 @@
           </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-yellow"></div>
           </div>
           <h1>LlamaBot Chat</h1>
         </div>
@@ -597,95 +585,19 @@
   <script>
     let currentThreadId = null;
     let isSidebarCollapsed = false;
-    let lastPongTime = Date.now();
-    let redStatusStartTime = null;
-    let errorModalShown = false;
-    let connectionCheckInterval;
-    let subscription = null;
-
-    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;
-          }
-        }
-      });
-    });
+    let streamingTimeout = null;
+    const STREAMING_TIMEOUT_MS = 30000; // 30 seconds timeout
 
-    function startConnectionCheck() {
-      if (connectionCheckInterval) {
-        clearInterval(connectionCheckInterval);
-      }
-      connectionCheckInterval = setInterval(updateConnectionStatus, 1000);
-    }
-
-    function updateConnectionStatus() {
-      const timeSinceLastPong = Date.now() - lastPongTime;
-      
-      if (timeSinceLastPong < 30000) { // Less than 30 seconds
-        updateStatusIcon('status-green');
-        redStatusStartTime = null;
-        errorModalShown = false;
-      } else if (timeSinceLastPong < 50000) { // Between 30-50 seconds
-        updateStatusIcon('status-yellow');
-        redStatusStartTime = null;
-        errorModalShown = false;
-      } else { // More than 50 seconds
-        updateStatusIcon('status-red');
-        if (!redStatusStartTime) {
-          redStatusStartTime = Date.now();
-        } else if (Date.now() - redStatusStartTime > 5000 && !errorModalShown) { // 5 seconds in red status
-          showErrorModal();
-        }
-      }
-    }
-
-    function updateStatusIcon(statusClass) {
-      const statusIndicator = document.getElementById('connectionStatusIconForLlamaBot');
-      statusIndicator.classList.remove('status-green', 'status-yellow', 'status-red');
-      statusIndicator.classList.add(statusClass);
-    }
+    // Initialize the app
+    document.addEventListener('DOMContentLoaded', function() {
+      loadThreads();
+    });
 
     function showErrorModal() {
       const modal = document.getElementById('errorModal');
       const overlay = document.getElementById('modalOverlay');
       modal.classList.add('visible');
       overlay.classList.add('visible');
-      errorModalShown = true;
     }
 
     function closeErrorModal() {
@@ -852,6 +764,54 @@
       loadingIndicator.classList.remove('visible');
     }
 
+
+
+    function setupStreamingTimeout() {
+      // Clear any existing timeout
+      if (streamingTimeout) {
+        clearTimeout(streamingTimeout);
+      }
+      
+      // Set up new timeout
+      streamingTimeout = setTimeout(() => {
+        console.warn('Streaming timeout reached');
+        hideLoadingIndicator();
+        addMessage('Request timed out. LlamaBot may be processing a complex request. Please try again.', 'error');
+      }, STREAMING_TIMEOUT_MS);
+    }
+
+    function clearStreamingTimeout() {
+      if (streamingTimeout) {
+        clearTimeout(streamingTimeout);
+        streamingTimeout = null;
+      }
+    }
+
+    //    console.log('🤖 Testing streaming');
+    // testStreaming();
+    
+    async function testStreaming() {
+      const response = await fetch('/llama_bot/agent/test_streaming_2');
+      const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      debugger;
+      let infinite_loop_protector = 0;
+      let in_infinite_loop = false;
+      while(!in_infinite_loop){ //infinite_loop_protector to protect against infinite loop
+        infinite_loop_protector++;
+        if (infinite_loop_protector > 10000) { //we shouldn't have 10000 loops, but just in case.
+          in_infinite_loop = true;
+          console.error('∞ ∞ ∞ Infinite loop prevented! ∞ ∞ ∞');
+        }
+        const { done, value } = reader.read();
+        console.log('🤖 SSE message:', value);
+        if (done) {
+          break;
+        }
+      }
+    }
+
     function selectPrompt(buttonElement) {
       const promptText = buttonElement.textContent;
       const messageInput = document.getElementById('message-input');
@@ -869,18 +829,11 @@
       }, 150);
     }
 
-    function sendMessage() {
+    async 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) {
@@ -912,8 +865,178 @@
           thread_id: threadId
         };
         
-        console.log('Sending message with data:', messageData);  // Debug log
-        subscription.send(messageData);
+        console.log('Sending message with data:', messageData);
+        
+        try {
+          // Set up fetch for streaming
+          const response = await fetch('/llama_bot/agent/send_message', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(messageData)
+          });
+          
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          
+          // Set up streaming timeout
+          setupStreamingTimeout();
+          
+          // Set up the reader for the stream
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = '';
+
+          // const response_2 = await fetch('/llama_bot/agent/test_streaming', {
+          //   method: 'GET',
+          //   headers: {
+          //     'Content-Type': 'text/event-stream'
+          //   },
+          //   // body: JSON.stringify({
+          //   //   "message": message,
+          //   //   "thread_id": threadId
+          //   // })
+          // });
+
+          // const reader_2 = response_2.body.pipeThrough(new TextDecoderStream()).getReader();
+
+          // while (true) {
+          //   const { done, value } = await reader_2.read();
+          //   if (done) {
+          //     break;
+          //   }
+          //   // Process each SSE message (value)
+          //   console.log('🤖 SSE message:', value);
+          // }
+          
+          try {
+            while (true) {
+              const { done, value } = await reader.read();
+              console.log('Got a value from the stream 🧠 Stream value:', value);
+              
+              if (done) {
+                console.log('Stream completed');
+                clearStreamingTimeout();
+                break;
+              }
+              
+              // Decode the chunk and add to buffer
+              buffer += decoder.decode(value, { stream: true });
+              
+              // Process complete SSE events (separated by \n\n). These \n\n are added by the Rails middleware to make sure it exists.
+              while (buffer.includes('\n\n')) {
+                const eventEnd = buffer.indexOf('\n\n');
+                const eventBlock = buffer.slice(0, eventEnd);
+                buffer = buffer.slice(eventEnd + 2);
+                
+                // Parse SSE event
+                const dataLines = eventBlock.split('\n').filter(line => line.startsWith('data:'));
+                if (dataLines.length > 0) {
+                  
+                  //remove the 'data:' prefix from the line
+                  const jsonData = dataLines.map(line => line.substring(5).trim()).join(''); 
+                  
+                  try {
+                    const chunk = JSON.parse(jsonData);
+                    console.log('Processing chunk:', chunk);
+                    
+                    // Your existing chunk processing logic here...
+                    if (chunk.type === 'start') {
+                      console.log('Stream started:', chunk.request_id || 'unknown');
+                    } else if (chunk.type === 'final') {
+                      console.log('Stream completed');
+                      hideLoadingIndicator();
+                      clearStreamingTimeout();
+                    } else if (chunk.type === 'error') {
+                      console.error('Server error:', chunk);
+                      hideLoadingIndicator();
+                      clearStreamingTimeout();
+                      addMessage(`Error: ${chunk.content || 'Unknown error occurred'}`, 'error');
+                    } else if (chunk.type === 'ai') {
+                      addMessage(chunk.content, 'ai', chunk);
+                      hideLoadingIndicator();
+                      clearStreamingTimeout();
+                    } else if (chunk.type === 'tool') {
+                      addMessage(chunk.content, 'tool', chunk);
+                    } else {
+                      if (chunk.content) {
+                        addMessage(chunk.content, chunk.type || 'unknown', chunk);
+                      }
+                      console.log('Other chunk type:', chunk.type, chunk);
+                    }
+                    
+                  } catch (parseError) {
+                    console.error('Error parsing SSE data:', parseError, 'Data:', jsonData);
+                  }
+                }
+              }
+            }
+          } finally {
+            reader.releaseLock();
+          }
+          
+        } catch (error) {
+          console.error('Error in sendMessage:', error);
+          hideLoadingIndicator();
+          clearStreamingTimeout();
+          
+          // Show specific error message based on error type
+          let errorMessage = 'Error sending message. Please try again.';
+          if (error.name === 'TypeError' && error.message.includes('fetch')) {
+            errorMessage = 'Connection error. Please check if LlamaBot is running.';
+          } else if (error.message.includes('HTTP error')) {
+            errorMessage = `Server error: ${error.message}`;
+          }
+          
+          addMessage(errorMessage, 'error');
+        }
+      }
+    }
+
+    function processChunk(chunk) {
+      console.log('Processing chunk in fallback handler:', chunk);
+      
+      // Handle specific chunk types from Python backend
+      switch (chunk.type) {
+        case 'start':
+          console.log('Stream started:', chunk.request_id || 'unknown');
+          // Loading indicator already showing
+          break;
+          
+        case 'final':
+          console.log('Stream completed');
+          hideLoadingIndicator();
+          clearStreamingTimeout();
+          break;
+          
+        case 'error':
+          console.error('Server error:', chunk);
+          hideLoadingIndicator();
+          clearStreamingTimeout();
+          addMessage(`Error: ${chunk.content || 'Unknown error occurred'}`, 'error');
+          break;
+          
+        case 'ai':
+          // AI message from LangGraph
+          addMessage(chunk.content, 'ai', chunk);
+          hideLoadingIndicator();
+          clearStreamingTimeout();
+          break;
+          
+        case 'tool':
+          // Tool message from LangGraph
+          addMessage(chunk.content, 'tool', chunk);
+          break;
+          
+        default:
+          // Handle any other message types
+          if (chunk.content) {
+            addMessage(chunk.content, chunk.type || 'unknown', chunk);
+          }
+          console.log('Other chunk type:', chunk.type, chunk);
+          break;
       }
     }