llama_bot_rails 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34248e0bbf8e8047cad5836f03e4f37a4b0cc84a5f152a9fcc486f7c32de50ed
-  data.tar.gz: 0e4a0a1f0d0939d042e21cd1e2745daeae241e33877febe7f45740679b94ff50
+  metadata.gz: 9bd4c2d542ae02f6d430d6c6233792445b79dcff44b265d508c9d985db22b09b
+  data.tar.gz: '09ad72a1840000cf121133633dc104517e5937a843be0cba48dadd0a3bf60a66'
 SHA512:
-  metadata.gz: d5cee45f49487fcbf2203d326b62431c4c7fb540004e0004a7929b7ec6fe2487124ed146237333a10b5f75db0f2508d1f1b7e91c7fe41afc7eb67f02a6395231
-  data.tar.gz: a67f3f5278245e15a0b868a22b27bc56e317cdd3f2aa456ef9c60100bb4547abfabd50e6a37a84cc7a7cdf97e37e45a06ce17a9b1e4dd3cc9c55125834262d40
+  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/views/llama_bot_rails/agent/chat.html.erb

@@ -405,6 +405,109 @@
       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" %>
@@ -431,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>
@@ -445,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>
@@ -478,7 +605,9 @@
     }
     
     waitForCableConnection((consumer) => {
-      subscription = consumer.subscriptions.create('LlamaBotRails::ChatChannel', {
+      const sessionId = crypto.randomUUID();
+
+      subscription = consumer.subscriptions.create({channel: 'LlamaBotRails::ChatChannel', session_id: sessionId}, {
         connected() {
           console.log('Connected to chat channel');
           lastPongTime = Date.now();
@@ -692,11 +821,6 @@
       
       // Show welcome message
       showWelcomeMessage();
-      
-      // Clear active thread selection
-      document.querySelectorAll('.thread-item').forEach(item => {
-        item.classList.remove('active');
-      });
     }
 
     function showWelcomeMessage() {
@@ -710,6 +834,33 @@
       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();
@@ -731,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') {
@@ -764,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/llama_bot_rails/version.rb

@@ -1,3 +1,3 @@
 module LlamaBotRails
-  VERSION = "0.1.3"
+  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.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Kody Kendall