flow_chat 0.8.0 → 0.8.2

data/lib/flow_chat/simulator/controller.rb

@@ -23,12 +23,12 @@ module FlowChat
       end
 
       def default_config_key
-        "ussd"
+        :ussd
       end
 
-      def simulator_configurations
+      def configurations
         {
-          "ussd" => {
+          ussd: {
             name: "USSD (Nalo)",
             description: "USSD integration using Nalo",
             processor_type: "ussd",
@@ -41,7 +41,7 @@ module FlowChat
               session_timeout: 300
             }
           },
-          "whatsapp" => {
+          whatsapp: {
             name: "WhatsApp (Cloud API)",
             description: "WhatsApp integration using Cloud API",
             processor_type: "whatsapp",
@@ -53,6 +53,18 @@ module FlowChat
               phone_number: default_phone_number,
               contact_name: default_contact_name
             }
+          },
+          http: {
+            name: "HTTP API",
+            description: "HTTP integration with JSON request/response",
+            processor_type: "http",
+            gateway: "http_simple",
+            endpoint: "/http/webhook",
+            icon: "🌐",
+            color: "#0066cc",
+            settings: {
+              user_id: default_phone_number
+            }
           }
         }
       end
@@ -71,7 +83,7 @@ module FlowChat
           default_phone_number: default_phone_number,
           default_contact_name: default_contact_name,
           default_config_key: default_config_key,
-          configurations: simulator_configurations
+          configurations: configurations
         }
       end
 

data/lib/flow_chat/simulator/views/simulator.html.erb

@@ -314,6 +314,15 @@
         height: 100%;
       }
 
+      .http-screen {
+        background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        height: 100%;
+      }
+
       .whatsapp-header {
         background: #075e54;
         color: white;
@@ -324,6 +333,16 @@
         flex-shrink: 0;
       }
 
+      .http-header {
+        background: #0066cc;
+        color: white;
+        padding: 15px 20px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-shrink: 0;
+      }
+
       .contact-avatar {
         width: 40px;
         height: 40px;
@@ -931,6 +950,20 @@
                     <!-- Messages will be displayed here -->
                   </div>
                 </div>
+
+                <!-- HTTP Screen -->
+                <div id="http-screen" class="http-screen hidden">
+                  <div class="http-header">
+                    <div class="config-icon" style="background: #0066cc;">🌐</div>
+                    <div class="contact-info">
+                      <h4>HTTP API</h4>
+                      <p>JSON Request/Response</p>
+                    </div>
+                  </div>
+                  <div class="messages-area" id="http-messages-area">
+                    <!-- HTTP messages will be displayed here -->
+                  </div>
+                </div>
               </div>
             </div>
             
@@ -1000,7 +1033,9 @@
         
         ussdScreen: document.getElementById('ussd-screen'),
         whatsappScreen: document.getElementById('whatsapp-screen'),
+        httpScreen: document.getElementById('http-screen'),
         messagesArea: document.getElementById('messages-area'),
+        httpMessagesArea: document.getElementById('http-messages-area'),
         contactAvatar: document.getElementById('contact-avatar'),
         headerContactName: document.getElementById('header-contact-name'),
         
@@ -1091,17 +1126,24 @@
       function updateUI() {
         if (!state.currentConfig) return
         
-        const isWhatsApp = state.currentConfig.processor_type === 'whatsapp'
+        const processorType = state.currentConfig.processor_type
+        const isWhatsApp = processorType === 'whatsapp'
+        const isHttp = processorType === 'http'
         
         // Show/hide platform-specific elements
         elements.contactNameGroup.style.display = isWhatsApp ? 'block' : 'none'
-        elements.ussdScreen.classList.toggle('hidden', isWhatsApp)
+        elements.ussdScreen.classList.toggle('hidden', isWhatsApp || isHttp)
         elements.whatsappScreen.classList.toggle('hidden', !isWhatsApp)
+        elements.httpScreen.classList.toggle('hidden', !isHttp)
         
         // Update input placeholder
-        elements.messageInput.placeholder = isWhatsApp ? 
-          'Type your WhatsApp message...' : 
-          'Enter USSD input...'
+        let placeholder = 'Enter USSD input...'
+        if (isWhatsApp) {
+          placeholder = 'Type your WhatsApp message...'
+        } else if (isHttp) {
+          placeholder = 'Type your HTTP message...'
+        }
+        elements.messageInput.placeholder = placeholder
         
         // Update button states
         const canStart = state.currentConfig && !state.isRunning
@@ -1144,8 +1186,10 @@
           
           if (state.currentConfig.processor_type === 'ussd') {
             await makeUSSDRequest()
-          } else {
+          } else if (state.currentConfig.processor_type === 'whatsapp') {
             await makeWhatsAppRequest()
+          } else if (state.currentConfig.processor_type === 'http') {
+            await makeHTTPRequest()
           }
           
           updateStatus('Connected', 'connected')
@@ -1164,9 +1208,11 @@
         try {
           updateStatus('Sending...', 'connecting')
           
-          // Add outgoing message to WhatsApp chat
+          // Add outgoing message to appropriate chat
           if (state.currentConfig.processor_type === 'whatsapp') {
             addMessage(message, true)
+          } else if (state.currentConfig.processor_type === 'http') {
+            addHttpMessage(message, true)
           }
           
           elements.messageInput.value = ''
@@ -1174,8 +1220,10 @@
           
           if (state.currentConfig.processor_type === 'ussd') {
             await makeUSSDRequest(message)
-          } else {
+          } else if (state.currentConfig.processor_type === 'whatsapp') {
             await makeWhatsAppRequest(message)
+          } else if (state.currentConfig.processor_type === 'http') {
+            await makeHTTPRequest(message)
           }
           
           updateStatus('Connected', 'connected')
@@ -1192,6 +1240,7 @@
         elements.messageInput.value = ''
         elements.ussdScreen.textContent = ''
         elements.messagesArea.innerHTML = ''
+        elements.httpMessagesArea.innerHTML = ''
         
         updateCharCount()
         updateStatus('Ready', 'disconnected')
@@ -1516,6 +1565,75 @@
         }
       }
 
+      // HTTP API request handler
+      async function makeHTTPRequest(userInput = null) {
+        const config = state.currentConfig
+        const userId = elements.phoneNumber.value
+        
+        // Build HTTP request payload
+        const requestData = {
+          session_id: state.sessionId,
+          user_id: userId,
+          input: userInput || '',
+          simulator_mode: true
+        }
+        
+        try {
+          const response = await fetch(config.endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(requestData),
+            credentials: 'include'
+          })
+          
+          // Read and parse response
+          const responseText = await response.text()
+          let responseData = null
+          
+          // Try to parse as JSON
+          if (response.headers.get('content-type')?.includes('application/json')) {
+            try {
+              responseData = JSON.parse(responseText)
+              
+              // Display the HTTP response
+              displayHTTPResponse(responseData)
+              addRequestLog('POST', config.endpoint, requestData, responseData, response.status)
+              
+            } catch (jsonError) {
+              console.warn('Failed to parse JSON response:', jsonError)
+              responseData = responseText
+              displayHTTPResponse({ message: responseText, type: 'text' })
+              addRequestLog('POST', config.endpoint, requestData, responseData, response.status)
+            }
+          } else {
+            responseData = responseText
+            displayHTTPResponse({ message: responseText, type: 'text' })
+            addRequestLog('POST', config.endpoint, requestData, responseData, response.status)
+          }
+          
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+          }
+          
+        } catch (error) {
+          // Log the error
+          addRequestLog('POST', config.endpoint, requestData, null, 0, error.message)
+          
+          // Show error in HTTP chat
+          setTimeout(() => {
+            addHttpMessage(
+              `❌ Request Failed: ${error.message}\n\n` +
+              `💡 Ensure your HTTP endpoint:\n` +
+              `• Accepts POST requests\n` +
+              `• Returns JSON with message, type, choices (optional), media (optional)\n` +
+              `• Handles CORS if cross-origin`
+            , false, 'error')
+          }, 500)
+          
+          throw error
+        }
+      }
+
       // Display Functions
       function displayUSSDResponse(content) {
         elements.ussdScreen.textContent = content
@@ -1889,6 +2007,100 @@
         elements.messagesArea.scrollTop = elements.messagesArea.scrollHeight
       }
 
+      function displayHTTPResponse(responseData) {
+        // Handle the HTTP response data
+        let message = responseData.message || 'Empty response'
+        let messageType = responseData.type || 'text'
+        let choices = responseData.choices || null
+        let media = responseData.media || null
+        
+        // Log choices for debugging if needed
+        if (choices && console.log) {
+          console.log('HTTP Response choices:', choices)
+        }
+        
+        // Add incoming HTTP message
+        addHttpMessage(message, false, messageType, choices, media)
+        
+        // Update session state based on response type  
+        state.isRunning = (messageType === 'prompt' || messageType === 'text')
+      }
+
+      function addHttpMessage(content, isOutgoing = false, type = 'text', choices = null, media = null) {
+        const messageDiv = document.createElement('div')
+        messageDiv.className = `message ${isOutgoing ? 'outgoing' : 'incoming'}`
+        
+        const bubbleDiv = document.createElement('div')
+        bubbleDiv.className = 'message-bubble'
+        
+        // Style differently for different message types
+        if (type === 'error') {
+          bubbleDiv.style.background = '#ffebee'
+          bubbleDiv.style.borderLeft = '4px solid #f44336'
+          bubbleDiv.style.whiteSpace = 'pre-line'
+        } else if (type === 'terminal') {
+          bubbleDiv.style.background = '#f3e5f5'
+          bubbleDiv.style.borderLeft = '4px solid #9c27b0'
+        }
+        
+        // Handle media content if present
+        if (media && !isOutgoing) {
+          const mediaContainer = document.createElement('div')
+          mediaContainer.className = 'media-container'
+          mediaContainer.style.marginBottom = content ? '8px' : '0'
+          
+          if (media.type === 'image' && media.url) {
+            const img = document.createElement('img')
+            img.src = media.url
+            img.style.maxWidth = '100%'
+            img.style.height = 'auto'
+            img.style.borderRadius = '8px'
+            img.style.display = 'block'
+            img.alt = media.caption || 'Image'
+            mediaContainer.appendChild(img)
+          }
+          
+          bubbleDiv.appendChild(mediaContainer)
+        }
+        
+        // Add text content
+        if (content) {
+          const textDiv = document.createElement('div')
+          textDiv.textContent = content
+          bubbleDiv.appendChild(textDiv)
+        }
+        
+        messageDiv.appendChild(bubbleDiv)
+        
+        // Add choice buttons for incoming messages
+        if (!isOutgoing && choices && Object.keys(choices).length > 0) {
+          const buttonsDiv = document.createElement('div')
+          buttonsDiv.className = 'interactive-buttons'
+          
+          Object.entries(choices).forEach(([key, value]) => {
+            const btn = document.createElement('div')
+            btn.className = 'interactive-button'
+            
+            const choiceKey = value.key || key
+            const displayValue = value.value || 'Option'
+            
+            btn.textContent = displayValue
+            btn.onclick = () => selectHttpOption(choiceKey)
+            buttonsDiv.appendChild(btn)
+          })
+          
+          bubbleDiv.appendChild(buttonsDiv)
+        }
+        
+        elements.httpMessagesArea.appendChild(messageDiv)
+        elements.httpMessagesArea.scrollTop = elements.httpMessagesArea.scrollHeight
+      }
+
+      function selectHttpOption(optionKey) {
+        elements.messageInput.value = optionKey
+        sendMessage()
+      }
+
       function getDocumentIcon(filename) {
         if (!filename) return '📄'
         

data/lib/flow_chat/ussd/app.rb

@@ -1,58 +1,6 @@
 module FlowChat
   module Ussd
-    class App
-      attr_reader :session, :input, :context, :navigation_stack
-
-      def initialize(context)
-        @context = context
-        @session = context.session
-        @input = context.input
-        @navigation_stack = []
-      end
-
-      def screen(key)
-        raise ArgumentError, "a block is expected" unless block_given?
-        raise ArgumentError, "screen has already been presented" if navigation_stack.include?(key)
-
-        navigation_stack << key
-        return session.get(key) if session.get(key).present?
-
-        prompt = FlowChat::Prompt.new input
-        @input = nil # input is being submitted to prompt so we clear it
-
-        value = yield prompt
-        session.set(key, value)
-        value
-      end
-
-      def say(msg, media: nil)
-        raise FlowChat::Interrupt::Terminate.new(msg)
-      end
-
-      # WhatsApp-specific data accessors (not supported in USSD)
-      def contact_name
-        nil
-      end
-
-      def message_id
-        context["request.message_id"]
-      end
-
-      def timestamp
-        context["request.timestamp"]
-      end
-
-      def location
-        nil
-      end
-
-      def media
-        nil
-      end
-
-      def phone_number
-        context["request.msisdn"]
-      end
+    class App < FlowChat::BaseApp
     end
   end
 end

data/lib/flow_chat/ussd/gateway/nalo.rb

@@ -1,5 +1,3 @@
-require "phonelib"
-
 module FlowChat
   module Ussd
     module Gateway
@@ -17,23 +15,21 @@ module FlowChat
           params = context.controller.request.params
 
           context["request.id"] = params["USERID"]
+          context["request.msisdn"] = FlowChat::PhoneNumberUtil.to_e164(params["MSISDN"])
+          context["request.user_id"] = context["request.msisdn"]
           context["request.message_id"] = SecureRandom.uuid
           context["request.timestamp"] = Time.current.iso8601
           context["request.gateway"] = :nalo
           context["request.platform"] = :ussd
           context["request.network"] = nil
-          context["request.msisdn"] = Phonelib.parse(params["MSISDN"]).e164
           # context["request.type"] = params["MSGTYPE"] ? :initial : :response
           context.input = params["USERDATA"].presence
 
           # Instrument message received when user provides input using new scalable approach
           if context.input.present?
             instrument(Events::MESSAGE_RECEIVED, {
-              from: context["request.msisdn"],
+              from: context["request.user_id"],
               message: context.input,
-              session_id: context["request.id"],
-              gateway: :nalo,
-              platform: :ussd,
               timestamp: context["request.timestamp"]
             })
           end

data/lib/flow_chat/ussd/gateway/nsano.rb

@@ -1,5 +1,3 @@
-require "phonelib"
-
 module FlowChat
   module Ussd
     module Gateway

data/lib/flow_chat/ussd/middleware/executor.rb

@@ -1,47 +1,21 @@
+require_relative "../../base_executor"
+
 module FlowChat
   module Ussd
     module Middleware
-      class Executor
-        def initialize(app)
-          @app = app
-          FlowChat.logger.debug { "Ussd::Executor: Initialized USSD executor middleware" }
-        end
-
-        def call(context)
-          flow_class = context.flow
-          action = context["flow.action"]
-          session_id = context["session.id"]
-
-          FlowChat.logger.info { "Ussd::Executor: Executing flow #{flow_class.name}##{action} for session #{session_id}" }
+      class Executor < FlowChat::BaseExecutor
+        protected
 
-          ussd_app = build_ussd_app context
-          FlowChat.logger.debug { "Ussd::Executor: USSD app built for flow execution" }
-
-          flow = flow_class.new ussd_app
-          FlowChat.logger.debug { "Ussd::Executor: Flow instance created, invoking #{action} method" }
-
-          flow.send action
-          FlowChat.logger.warn { "Ussd::Executor: Flow execution failed to interact with user for #{flow_class.name}##{action}" }
-          raise FlowChat::Interrupt::Terminate, "Unexpected end of flow."
-        rescue FlowChat::Interrupt::Prompt => e
-          FlowChat.logger.info { "Ussd::Executor: Flow prompted user - Session: #{session_id}, Prompt: '#{e.prompt.truncate(100)}'" }
-          FlowChat.logger.debug { "Ussd::Executor: Prompt details - Choices: #{e.choices&.size || 0}, Has media: #{!e.media.nil?}" }
-          [:prompt, e.prompt, e.choices, e.media]
-        rescue FlowChat::Interrupt::Terminate => e
-          FlowChat.logger.info { "Ussd::Executor: Flow terminated - Session: #{session_id}, Message: '#{e.prompt.truncate(100)}'" }
-          FlowChat.logger.debug { "Ussd::Executor: Destroying session #{session_id}" }
-          context.session.destroy
-          [:terminate, e.prompt, nil, e.media]
-        rescue => error
-          FlowChat.logger.error { "Ussd::Executor: Flow execution failed - #{flow_class.name}##{action}, Session: #{session_id}, Error: #{error.class.name}: #{error.message}" }
-          FlowChat.logger.debug { "Ussd::Executor: Stack trace: #{error.backtrace.join("\n")}" }
-          raise
+        def platform_name
+          "USSD"
         end
 
-        private
+        def log_prefix
+          "Ussd::Executor"
+        end
 
-        def build_ussd_app(context)
-          FlowChat.logger.debug { "Ussd::Executor: Building USSD app instance" }
+        def build_platform_app(context)
+          FlowChat.logger.debug { "#{log_prefix}: Building USSD app instance" }
           FlowChat::Ussd::App.new(context)
         end
       end

data/lib/flow_chat/version.rb

@@ -1,3 +1,3 @@
 module FlowChat
-  VERSION = "0.8.0"
+  VERSION = "0.8.2"
 end

data/lib/flow_chat/whatsapp/app.rb

@@ -1,53 +1,10 @@
 module FlowChat
   module Whatsapp
-    class App
-      attr_reader :session, :input, :context, :navigation_stack
-
-      def initialize(context)
-        @context = context
-        @session = context.session
-        @input = context.input
-        @navigation_stack = []
-      end
-
-      def screen(key)
-        raise ArgumentError, "a block is expected" unless block_given?
-        raise ArgumentError, "screen has already been presented" if navigation_stack.include?(key)
-
-        navigation_stack << key
-        return session.get(key) if session.get(key).present?
-
-        user_input = input
-        if session.get("$started_at$").nil?
-          session.set("$started_at$", Time.current.iso8601)
-          user_input = nil
-        end
-
-        prompt = FlowChat::Prompt.new user_input
-        @input = nil # input is being submitted to prompt so we clear it
-
-        value = yield prompt
-        session.set(key, value)
-        value
-      end
-
-      def say(msg, media: nil)
-        raise FlowChat::Interrupt::Terminate.new(msg, media: media)
-      end
-
-      # WhatsApp-specific data accessors (read-only)
+    class App < FlowChat::BaseApp
       def contact_name
         context["request.contact_name"]
       end
 
-      def message_id
-        context["request.message_id"]
-      end
-
-      def timestamp
-        context["request.timestamp"]
-      end
-
       def location
         context["request.location"]
       end
@@ -56,8 +13,16 @@ module FlowChat
         context["request.media"]
       end
 
-      def phone_number
-        context["request.msisdn"]
+      protected
+
+      # WhatsApp has special startup logic and supports media
+      def prepare_user_input
+        user_input = input
+        if session.get("$started_at$").nil?
+          session.set("$started_at$", Time.current.iso8601)
+          user_input = nil
+        end
+        user_input
       end
     end
   end

data/lib/flow_chat/whatsapp/gateway/cloud_api.rb

@@ -1,6 +1,5 @@
 require "net/http"
 require "json"
-require "phonelib"
 require "openssl"
 
 module FlowChat
@@ -145,29 +144,32 @@ module FlowChat
             message = value["messages"].first
             contact = value["contacts"]&.first
 
-            phone_number = message["from"]
+            phone_number = FlowChat::PhoneNumberUtil.to_e164(message["from"])
             message_id = message["id"]
             contact_name = contact&.dig("profile", "name")
 
-            # Use instrumentation for message received
-            instrument(Events::MESSAGE_RECEIVED, {
-              from: phone_number,
-              message: context.input,
-              message_type: message["type"],
-              message_id: message_id,
-              platform: :whatsapp
-            })
-
             context["request.id"] = phone_number
+            context["request.msisdn"] = phone_number
+            context["request.user_id"] = context["request.msisdn"]
             context["request.gateway"] = :whatsapp_cloud_api
             context["request.platform"] = :whatsapp
             context["request.message_id"] = message_id
-            context["request.msisdn"] = Phonelib.parse(phone_number).e164
             context["request.contact_name"] = contact_name
             context["request.timestamp"] = message["timestamp"]
 
             # Extract message content based on type
-            extract_message_content(message, context)
+            extract_message_content!(message, context)
+
+            if context.input.present?
+              # Use instrumentation for message received
+              instrument(Events::MESSAGE_RECEIVED, {
+                from: phone_number,
+                message: context.input,
+                message_type: message["type"],
+                message_id: message_id,
+              })
+            end
+
 
             FlowChat.logger.debug { "CloudApi: Message content extracted - Type: #{message["type"]}, Input: '#{context.input}'" }
 
@@ -260,7 +262,7 @@ module FlowChat
           res == 0
         end
 
-        def extract_message_content(message, context)
+        def extract_message_content!(message, context)
           message_type = message["type"]
           FlowChat.logger.debug { "CloudApi: Extracting content from #{message_type} message" }