Module: ActiveAgent::ChatHelper

Defined in:

app/helpers/active_agent/chat_helper.rb

Instance Method Summary

• #active_agent_chat_widget(agent:, conversation_id:, title: "AI Assistant", placeholder: "Ask me anything...") ⇒ Object

Instance Method Details

#active_agent_chat_widget(agent:, conversation_id:, title: "AI Assistant", placeholder: "Ask me anything...") ⇒ Object

# File 'app/helpers/active_agent/chat_helper.rb', line 5

def active_agent_chat_widget(agent:, conversation_id:, title: "AI Assistant", placeholder: "Ask me anything...")
  agent_name = agent.to_s.underscore
  widget_id = "active_agent_#{agent_name}_#{conversation_id.to_s.parameterize.underscore}"

  raw <<~HTML
    <div id="#{widget_id}" class="active-agent-widget-root">
      <!-- Floating Chat Launcher Button -->
      <button class="active-agent-launcher" onclick="toggleActiveAgentChat('#{widget_id}')">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="active-agent-icon-open">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.58 16.24 3 14.201 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
        </svg>
      </button>

      <!-- Chat Window Box -->
      <div class="active-agent-window hidden">
        <div class="active-agent-header">
          <div class="active-agent-header-info">
            <span class="active-agent-header-title">#{title}</span>
            <span class="active-agent-header-status"><span class="status-dot"></span> Online</span>
          </div>
          <button class="active-agent-close" onclick="toggleActiveAgentChat('#{widget_id}')">&times;</button>
        </div>

        <div class="active-agent-messages">
          <div class="active-agent-message assistant">
            <div class="message-content">Hello! How can I help you today?</div>
          </div>
        </div>

        <div class="active-agent-typing hidden">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <form class="active-agent-form" onsubmit="submitActiveAgentMessage(event, '#{widget_id}', '#{agent_name}', '#{conversation_id}')">
          <input type="text" class="active-agent-input" placeholder="#{placeholder}" autocomplete="off" required />
          <button type="submit" class="active-agent-send">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
            </svg>
          </button>
        </form>
      </div>
    </div>

    <style>
      .active-agent-widget-root {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9999;
      }
      .active-agent-launcher {
        width: 56px;
        height: 56px;
        border-radius: 28px;
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: #ffffff;
        border: none;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .active-agent-launcher:hover {
        transform: scale(1.08) rotate(5deg);
        box-shadow: 0 6px 16px rgba(79, 70, 229, 0.5);
      }
      .active-agent-icon-open {
        width: 28px;
        height: 28px;
      }
      .active-agent-window {
        position: fixed;
        bottom: 96px;
        right: 24px;
        width: 380px;
        height: 520px;
        max-height: 80vh;
        max-width: 90vw;
        background: rgba(30, 41, 59, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: opacity 0.25s ease, transform 0.25s ease;
      }
      .active-agent-window.hidden {
        display: none;
      }
      .active-agent-header {
        background: rgba(15, 23, 42, 0.5);
        padding: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .active-agent-header-info {
        display: flex;
        flex-direction: column;
      }
      .active-agent-header-title {
        color: #ffffff;
        font-weight: 600;
        font-size: 15px;
      }
      .active-agent-header-status {
        font-size: 11px;
        color: #10b981;
        display: flex;
        align-items: center;
        margin-top: 2px;
      }
      .status-dot {
        width: 6px;
        height: 6px;
        background: #10b981;
        border-radius: 50%;
        display: inline-block;
        margin-right: 4px;
        box-shadow: 0 0 6px #10b981;
      }
      .active-agent-close {
        background: transparent;
        border: none;
        color: #94a3b8;
        font-size: 24px;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        transition: color 0.2s;
      }
      .active-agent-close:hover {
        color: #ffffff;
      }
      .active-agent-messages {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .active-agent-message {
        max-width: 85%;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 14px;
        line-height: 1.45;
        word-wrap: break-word;
      }
      .active-agent-message.user {
        background: #4f46e5;
        color: #ffffff;
        align-self: flex-end;
        border-bottom-right-radius: 2px;
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.2);
      }
      .active-agent-message.assistant {
        background: rgba(51, 65, 85, 0.7);
        color: #f1f5f9;
        align-self: flex-start;
        border-bottom-left-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }
      .active-agent-message code {
        font-family: monospace;
        background: rgba(0,0,0,0.3);
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 12px;
        color: #f472b6;
      }
      .active-agent-message pre {
        background: rgba(0,0,0,0.4);
        padding: 8px;
        border-radius: 6px;
        overflow-x: auto;
        margin: 6px 0;
      }
      .active-agent-message pre code {
        background: transparent;
        padding: 0;
        color: #38bdf8;
      }
      .active-agent-typing {
        align-self: flex-start;
        margin: 0 16px 12px 16px;
        padding: 8px 12px;
        background: rgba(51, 65, 85, 0.5);
        border-radius: 12px;
        display: flex;
        gap: 4px;
      }
      .active-agent-typing.hidden {
        display: none !important;
      }
      .active-agent-typing span {
        width: 6px;
        height: 6px;
        background: #94a3b8;
        border-radius: 50%;
        animation: bounce 1.4s infinite ease-in-out both;
      }
      .active-agent-typing span:nth-child(1) { animation-delay: -0.32s; }
      .active-agent-typing span:nth-child(2) { animation-delay: -0.16s; }
      @keyframes bounce {
        0%, 80%, 100% { transform: scale(0); }
        40% { transform: scale(1.0); }
      }
      .active-agent-form {
        padding: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(15, 23, 42, 0.4);
        display: flex;
        gap: 8px;
      }
      .active-agent-input {
        flex: 1;
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: #ffffff;
        padding: 10px 14px;
        font-size: 13.5px;
        outline: none;
        transition: border-color 0.2s;
      }
      .active-agent-input:focus {
        border-color: #6366f1;
      }
      .active-agent-send {
        background: #4f46e5;
        color: #ffffff;
        border: none;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
      }
      .active-agent-send:hover {
        background: #4338ca;
      }
      .active-agent-send svg {
        width: 18px;
        height: 18px;
      }
    </style>

    <script>
      function toggleActiveAgentChat(widgetId) {
        const root = document.getElementById(widgetId);
        const windowEl = root.querySelector('.active-agent-window');
        windowEl.classList.toggle('hidden');
        if (!windowEl.classList.contains('hidden')) {
          // Scroll to bottom on open
          const messagesEl = root.querySelector('.active-agent-messages');
          messagesEl.scrollTop = messagesEl.scrollHeight;
          
          // Load historical messages from the server
          fetchActiveAgentHistory(widgetId, '#{agent_name}', '#{conversation_id}');
        }
      }

      let historyLoaded = {};

      function fetchActiveAgentHistory(widgetId, agentName, conversationId) {
        if (historyLoaded[widgetId]) return;
        const root = document.getElementById(widgetId);
        const messagesEl = root.querySelector('.active-agent-messages');

        fetch(`/active_agent/chats?agent=${agentName}&conversation_id=${conversationId}`)
          .then(response => response.json())
          .then(data => {
            if (data.messages && data.messages.length > 0) {
              messagesEl.innerHTML = '';
              data.messages.forEach(msg => {
                if (msg.role === 'user' || msg.role === 'assistant') {
                  appendActiveAgentMessage(widgetId, msg.content, msg.role);
                }
              });
              messagesEl.scrollTop = messagesEl.scrollHeight;
              historyLoaded[widgetId] = true;
            }
          })
          .catch(err => console.error("Error loading chat history:", err));
      }

      function appendActiveAgentMessage(widgetId, content, role) {
        const root = document.getElementById(widgetId);
        const messagesEl = root.querySelector('.active-agent-messages');
        
        const msgDiv = document.createElement('div');
        msgDiv.className = `active-agent-message ${role}`;
        
        // Simple markdown formatter for bold and code blocks
        let formatted = content
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
          .replace(/`([^`]+)`/g, '<code>$1</code>')
          .replace(/\n/g, '<br/>');

        msgDiv.innerHTML = `<div class="message-content">${formatted}</div>`;
        messagesEl.appendChild(msgDiv);
        messagesEl.scrollTop = messagesEl.scrollHeight;
        return msgDiv;
      }

      function submitActiveAgentMessage(event, widgetId, agentName, conversationId) {
        event.preventDefault();
        const root = document.getElementById(widgetId);
        const inputEl = root.querySelector('.active-agent-input');
        const typingEl = root.querySelector('.active-agent-typing');
        const text = inputEl.value.trim();
        if (!text) return;

        inputEl.value = '';
        
        // Add user message
        appendActiveAgentMessage(widgetId, text, 'user');
        
        // Show typing indicator
        typingEl.classList.remove('hidden');

        // Send via fetch SSE
        fetch('/active_agent/chats', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'text/event-stream'
          },
          body: new URLSearchParams({
            agent: agentName,
            conversation_id: conversationId,
            message: text
          })
        }).then(response => {
          typingEl.classList.add('hidden');
          
          if (!response.body) {
            // Fallback for non-live response
            return response.json().then(data => {
              if (data.reply) {
                appendActiveAgentMessage(widgetId, data.reply, 'assistant');
              } else if (data.error) {
                appendActiveAgentMessage(widgetId, "Error: " + data.error, 'assistant');
              }
            });
          }

          const reader = response.body.getReader();
          const decoder = new TextDecoder();
          let assistantMsgDiv = null;
          let accumulatedResponse = "";

          function readStream() {
            reader.read().then(({ done, value }) => {
              if (done) return;
              
              const chunkStr = decoder.decode(value, { stream: true });
              const lines = chunkStr.split("\n");

              lines.forEach(line => {
                if (line.startsWith("data:")) {
                  try {
                    const data = JSON.parse(line.replace("data:", "").trim());
                    if (data.chunk) {
                      if (!assistantMsgDiv) {
                        assistantMsgDiv = appendActiveAgentMessage(widgetId, "", 'assistant');
                      }
                      accumulatedResponse += data.chunk;
                      
                      // Update text content with simple formatting
                      let formatted = accumulatedResponse
                        .replace(/&/g, "&amp;")
                        .replace(/</g, "&lt;")
                        .replace(/>/g, "&gt;")
                        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
                        .replace(/`([^`]+)`/g, '<code>$1</code>')
                        .replace(/\n/g, '<br/>');
                      
                      assistantMsgDiv.querySelector('.message-content').innerHTML = formatted;
                      const messagesEl = root.querySelector('.active-agent-messages');
                      messagesEl.scrollTop = messagesEl.scrollHeight;
                    } else if (data.error) {
                      appendActiveAgentMessage(widgetId, "Error: " + data.error, 'assistant');
                    }
                  } catch (e) {
                    // Incomplete JSON or other parse error
                  }
                }
              });
              readStream();
            });
          }
          
          readStream();
        }).catch(err => {
          typingEl.classList.add('hidden');
          appendActiveAgentMessage(widgetId, "Network error: could not connect.", 'assistant');
          console.error(err);
        });
      }
    </script>
  HTML
end