flow_chat 0.4.1 → 0.4.2

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

@@ -1529,6 +1529,7 @@
         // Extract message content based on type
         let messageText = ''
         let interactive = null
+        let mediaContent = null
         
         switch (messagePayload.type) {
           case 'text':
@@ -1570,25 +1571,48 @@
             }
             break
           case 'image':
-            messageText = messagePayload.image.caption || 'Image message'
-            // In a real implementation, you might want to show the image
-            messageText = `📷 ${messageText}`
+            messageText = messagePayload.image.caption || ''
+            mediaContent = {
+              type: 'image',
+              url: messagePayload.image.link || `https://via.placeholder.com/300x200/25d366/white?text=Image+ID:+${messagePayload.image.id || 'media_123'}`,
+              caption: messagePayload.image.caption
+            }
             break
           case 'document':
-            messageText = messagePayload.document.caption || messagePayload.document.filename || 'Document'
-            messageText = `📄 ${messageText}`
+            messageText = messagePayload.document.caption || ''
+            mediaContent = {
+              type: 'document',
+              url: messagePayload.document.link,
+              filename: messagePayload.document.filename || 'document.pdf',
+              caption: messagePayload.document.caption
+            }
             break
           case 'audio':
-            messageText = '🎵 Audio message'
+            messageText = ''
+            mediaContent = {
+              type: 'audio',
+              url: messagePayload.audio.link || `data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmkcBzuU2e+saDUGOWOJ6+2SV0gYKT2L5zJAGyJH4f2GHz+7zJMxtx9R5Dsl`
+            }
             break
           case 'video':
-            messageText = messagePayload.video.caption || 'Video message'
-            messageText = `🎥 ${messageText}`
+            messageText = messagePayload.video.caption || ''
+            mediaContent = {
+              type: 'video',
+              url: messagePayload.video.link || `https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4`,
+              caption: messagePayload.video.caption
+            }
             break
           case 'location':
             const loc = messagePayload.location
-            messageText = `📍 Location: ${loc.name || 'Shared location'}`
+            messageText = loc.name || 'Shared location'
             if (loc.address) messageText += `\n${loc.address}`
+            mediaContent = {
+              type: 'location',
+              latitude: loc.latitude || 0,
+              longitude: loc.longitude || 0,
+              name: loc.name,
+              address: loc.address
+            }
             break
           default:
             messageText = `Unsupported message type: ${messagePayload.type}`
@@ -1596,16 +1620,235 @@
         }
         
         // Add the simulated message to the chat
-        addMessage(messageText, false, messagePayload.type, interactive)
+        addMessage(messageText, false, messagePayload.type, interactive, mediaContent)
       }
 
-      function addMessage(content, isOutgoing = false, type = 'text', interactive = null) {
+      function addMessage(content, isOutgoing = false, type = 'text', interactive = null, mediaContent = null) {
         const messageDiv = document.createElement('div')
         messageDiv.className = `message ${isOutgoing ? 'outgoing' : 'incoming'}`
         
         const bubbleDiv = document.createElement('div')
         bubbleDiv.className = 'message-bubble'
-        bubbleDiv.textContent = content
+        
+        // Handle media content first
+        if (mediaContent) {
+          const mediaContainer = document.createElement('div')
+          mediaContainer.className = 'media-container'
+          mediaContainer.style.marginBottom = content ? '8px' : '0'
+          
+          switch (mediaContent.type) {
+            case 'image':
+              const img = document.createElement('img')
+              img.src = mediaContent.url
+              img.style.maxWidth = '100%'
+              img.style.height = 'auto'
+              img.style.borderRadius = '8px'
+              img.style.display = 'block'
+              img.alt = mediaContent.caption || 'Image'
+              img.onerror = function() {
+                this.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPvCfk7cgSW1hZ2U8L3RleHQ+PC9zdmc+'
+                this.style.border = '1px solid #e0e0e0'
+              }
+              mediaContainer.appendChild(img)
+              break
+              
+            case 'video':
+              const video = document.createElement('video')
+              video.src = mediaContent.url
+              video.controls = true
+              video.style.maxWidth = '100%'
+              video.style.height = 'auto'
+              video.style.borderRadius = '8px'
+              video.style.display = 'block'
+              video.preload = 'metadata'
+              video.onerror = function() {
+                const placeholder = document.createElement('div')
+                placeholder.style.width = '300px'
+                placeholder.style.height = '200px'
+                placeholder.style.backgroundColor = '#f0f0f0'
+                placeholder.style.border = '1px solid #e0e0e0'
+                placeholder.style.borderRadius = '8px'
+                placeholder.style.display = 'flex'
+                placeholder.style.alignItems = 'center'
+                placeholder.style.justifyContent = 'center'
+                placeholder.style.color = '#999'
+                placeholder.style.fontSize = '14px'
+                placeholder.textContent = '🎥 Video'
+                mediaContainer.replaceChild(placeholder, video)
+              }
+              mediaContainer.appendChild(video)
+              break
+              
+            case 'audio':
+              const audio = document.createElement('audio')
+              audio.src = mediaContent.url
+              audio.controls = true
+              audio.style.width = '100%'
+              audio.style.maxWidth = '300px'
+              audio.preload = 'metadata'
+              audio.onerror = function() {
+                const placeholder = document.createElement('div')
+                placeholder.style.padding = '12px 16px'
+                placeholder.style.backgroundColor = '#f0f0f0'
+                placeholder.style.border = '1px solid #e0e0e0'
+                placeholder.style.borderRadius = '8px'
+                placeholder.style.display = 'flex'
+                placeholder.style.alignItems = 'center'
+                placeholder.style.gap = '8px'
+                placeholder.style.color = '#666'
+                placeholder.style.fontSize = '14px'
+                placeholder.innerHTML = '🎵 <span>Audio message</span>'
+                mediaContainer.replaceChild(placeholder, audio)
+              }
+              mediaContainer.appendChild(audio)
+              break
+              
+            case 'document':
+              const docContainer = document.createElement('div')
+              docContainer.style.padding = '12px 16px'
+              docContainer.style.backgroundColor = '#f8f9fa'
+              docContainer.style.border = '1px solid #e0e0e0'
+              docContainer.style.borderRadius = '8px'
+              docContainer.style.display = 'flex'
+              docContainer.style.alignItems = 'center'
+              docContainer.style.gap = '12px'
+              docContainer.style.cursor = 'pointer'
+              docContainer.style.transition = 'background-color 0.2s'
+              
+              const docIcon = document.createElement('div')
+              docIcon.style.fontSize = '24px'
+              docIcon.textContent = getDocumentIcon(mediaContent.filename)
+              
+              const docInfo = document.createElement('div')
+              docInfo.style.flex = '1'
+              docInfo.style.minWidth = '0'
+              
+              const docName = document.createElement('div')
+              docName.style.fontWeight = '600'
+              docName.style.fontSize = '14px'
+              docName.style.color = '#333'
+              docName.style.overflow = 'hidden'
+              docName.style.textOverflow = 'ellipsis'
+              docName.style.whiteSpace = 'nowrap'
+              docName.textContent = mediaContent.filename
+              
+              const docType = document.createElement('div')
+              docType.style.fontSize = '12px'
+              docType.style.color = '#666'
+              docType.textContent = 'Document'
+              
+              docInfo.appendChild(docName)
+              docInfo.appendChild(docType)
+              docContainer.appendChild(docIcon)
+              docContainer.appendChild(docInfo)
+              
+              // Add click handler if URL is available
+              if (mediaContent.url) {
+                const downloadIcon = document.createElement('div')
+                downloadIcon.style.fontSize = '18px'
+                downloadIcon.style.color = '#666'
+                downloadIcon.textContent = '⬇️'
+                docContainer.appendChild(downloadIcon)
+                
+                docContainer.onclick = () => {
+                  if (mediaContent.url.startsWith('http')) {
+                    window.open(mediaContent.url, '_blank')
+                  }
+                }
+                
+                docContainer.onmouseover = () => {
+                  docContainer.style.backgroundColor = '#e8f5e8'
+                }
+                docContainer.onmouseout = () => {
+                  docContainer.style.backgroundColor = '#f8f9fa'
+                }
+              }
+              
+              mediaContainer.appendChild(docContainer)
+              break
+              
+            case 'location':
+              const locationContainer = document.createElement('div')
+              locationContainer.style.border = '1px solid #e0e0e0'
+              locationContainer.style.borderRadius = '8px'
+              locationContainer.style.overflow = 'hidden'
+              locationContainer.style.maxWidth = '300px'
+              
+              // Create a simple map-like visualization
+              const mapDiv = document.createElement('div')
+              mapDiv.style.height = '150px'
+              mapDiv.style.background = 'linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%)'
+              mapDiv.style.position = 'relative'
+              mapDiv.style.display = 'flex'
+              mapDiv.style.alignItems = 'center'
+              mapDiv.style.justifyContent = 'center'
+              mapDiv.style.fontSize = '32px'
+              mapDiv.textContent = '📍'
+              
+              // Add coordinate text
+              const coordDiv = document.createElement('div')
+              coordDiv.style.position = 'absolute'
+              coordDiv.style.bottom = '8px'
+              coordDiv.style.right = '8px'
+              coordDiv.style.background = 'rgba(255,255,255,0.9)'
+              coordDiv.style.padding = '4px 8px'
+              coordDiv.style.borderRadius = '4px'
+              coordDiv.style.fontSize = '10px'
+              coordDiv.style.color = '#666'
+              coordDiv.style.fontFamily = 'monospace'
+              coordDiv.textContent = `${mediaContent.latitude.toFixed(4)}, ${mediaContent.longitude.toFixed(4)}`
+              mapDiv.appendChild(coordDiv)
+              
+              const locationInfo = document.createElement('div')
+              locationInfo.style.padding = '12px'
+              locationInfo.style.backgroundColor = 'white'
+              
+              if (mediaContent.name) {
+                const nameDiv = document.createElement('div')
+                nameDiv.style.fontWeight = '600'
+                nameDiv.style.fontSize = '14px'
+                nameDiv.style.color = '#333'
+                nameDiv.style.marginBottom = '4px'
+                nameDiv.textContent = mediaContent.name
+                locationInfo.appendChild(nameDiv)
+              }
+              
+              if (mediaContent.address) {
+                const addressDiv = document.createElement('div')
+                addressDiv.style.fontSize = '12px'
+                addressDiv.style.color = '#666'
+                addressDiv.textContent = mediaContent.address
+                locationInfo.appendChild(addressDiv)
+              }
+              
+              // Add link to open in maps
+              const mapsLink = document.createElement('div')
+              mapsLink.style.fontSize = '12px'
+              mapsLink.style.color = '#25d366'
+              mapsLink.style.cursor = 'pointer'
+              mapsLink.style.marginTop = '8px'
+              mapsLink.textContent = '🗺️ View in Maps'
+              mapsLink.onclick = () => {
+                const url = `https://www.google.com/maps?q=${mediaContent.latitude},${mediaContent.longitude}`
+                window.open(url, '_blank')
+              }
+              locationInfo.appendChild(mapsLink)
+              
+              locationContainer.appendChild(mapDiv)
+              locationContainer.appendChild(locationInfo)
+              mediaContainer.appendChild(locationContainer)
+              break
+          }
+          
+          bubbleDiv.appendChild(mediaContainer)
+        }
+        
+        // Add text content if present
+        if (content) {
+          const textDiv = document.createElement('div')
+          textDiv.textContent = content
+          bubbleDiv.appendChild(textDiv)
+        }
         
         messageDiv.appendChild(bubbleDiv)
         
@@ -1640,10 +1883,42 @@
           bubbleDiv.appendChild(buttonsDiv)
         }
         
+        messageDiv.appendChild(bubbleDiv)
+        
         elements.messagesArea.appendChild(messageDiv)
         elements.messagesArea.scrollTop = elements.messagesArea.scrollHeight
       }
 
+      function getDocumentIcon(filename) {
+        if (!filename) return '📄'
+        
+        const ext = filename.split('.').pop().toLowerCase()
+        
+        const iconMap = {
+          'pdf': '📕',
+          'doc': '📘',
+          'docx': '📘', 
+          'xls': '📗',
+          'xlsx': '📗',
+          'ppt': '📙',
+          'pptx': '📙',
+          'txt': '📝',
+          'zip': '🗜️',
+          'rar': '🗜️',
+          '7z': '🗜️',
+          'mp3': '🎵',
+          'wav': '🎵',
+          'mp4': '🎥',
+          'avi': '🎥',
+          'jpg': '🖼️',
+          'jpeg': '🖼️',
+          'png': '🖼️',
+          'gif': '🖼️'
+        }
+        
+        return iconMap[ext] || '📄'
+      }
+
       function addInfoMessage(content) {
         const messageDiv = document.createElement('div')
         messageDiv.className = 'message incoming'

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

@@ -14,7 +14,7 @@ module FlowChat
 
           # Add timestamp for all requests
           context["request.timestamp"] = Time.current.iso8601
-          
+
           # Set a basic message_id (can be enhanced based on actual Nsano implementation)
           context["request.message_id"] = SecureRandom.uuid
 

data/lib/flow_chat/ussd/processor.rb

@@ -24,4 +24,4 @@ module FlowChat
       end
     end
   end
-end 
+end

data/lib/flow_chat/ussd/prompt.rb

@@ -59,19 +59,19 @@ module FlowChat
 
         # For USSD, we append the media URL to the message
         media_text = case media_type.to_sym
-                    when :image
-                      "📷 Image: #{media_url}"
-                    when :document
-                      "📄 Document: #{media_url}"
-                    when :audio
-                      "🎵 Audio: #{media_url}"
-                    when :video
-                      "🎥 Video: #{media_url}"
-                    when :sticker
-                      "😊 Sticker: #{media_url}"
-                    else
-                      "📎 Media: #{media_url}"
-                    end
+        when :image
+          "📷 Image: #{media_url}"
+        when :document
+          "📄 Document: #{media_url}"
+        when :audio
+          "🎵 Audio: #{media_url}"
+        when :video
+          "🎥 Video: #{media_url}"
+        when :sticker
+          "😊 Sticker: #{media_url}"
+        else
+          "📎 Media: #{media_url}"
+        end
 
         # Combine message with media information
         "#{message}\n\n#{media_text}"

data/lib/flow_chat/version.rb

@@ -1,3 +1,3 @@
 module FlowChat
-  VERSION = "0.4.1"
+  VERSION = "0.4.2"
 end

data/lib/flow_chat/whatsapp/app.rb

@@ -61,4 +61,4 @@ module FlowChat
       end
     end
   end
-end 
+end

data/lib/flow_chat/whatsapp/client.rb

@@ -23,7 +23,7 @@ module FlowChat
       end
 
       # Send a text message
-      # @param to [String] Phone number in E.164 format  
+      # @param to [String] Phone number in E.164 format
       # @param text [String] Message text
       # @return [Hash] API response or nil on error
       def send_text(to, text)
@@ -36,7 +36,7 @@ module FlowChat
       # @param buttons [Array] Array of button hashes with :id and :title
       # @return [Hash] API response or nil on error
       def send_buttons(to, text, buttons)
-        send_message(to, [:interactive_buttons, text, { buttons: buttons }])
+        send_message(to, [:interactive_buttons, text, {buttons: buttons}])
       end
 
       # Send interactive list
@@ -46,7 +46,7 @@ module FlowChat
       # @param button_text [String] Button text (default: "Choose")
       # @return [Hash] API response or nil on error
       def send_list(to, text, sections, button_text = "Choose")
-        send_message(to, [:interactive_list, text, { sections: sections, button_text: button_text }])
+        send_message(to, [:interactive_list, text, {sections: sections, button_text: button_text}])
       end
 
       # Send a template message
@@ -56,10 +56,10 @@ module FlowChat
       # @param language [String] Language code (default: "en_US")
       # @return [Hash] API response or nil on error
       def send_template(to, template_name, components = [], language = "en_US")
-        send_message(to, [:template, "", { 
-          template_name: template_name, 
-          components: components, 
-          language: language 
+        send_message(to, [:template, "", {
+          template_name: template_name,
+          components: components,
+          language: language
         }])
       end
 
@@ -121,12 +121,12 @@ module FlowChat
       # @raise [StandardError] If upload fails
       def upload_media(file_path_or_io, mime_type, filename = nil)
         raise ArgumentError, "mime_type is required" if mime_type.nil? || mime_type.empty?
-        
+
         if file_path_or_io.is_a?(String)
           # File path
           raise ArgumentError, "File not found: #{file_path_or_io}" unless File.exist?(file_path_or_io)
           filename ||= File.basename(file_path_or_io)
-          file = File.open(file_path_or_io, 'rb')
+          file = File.open(file_path_or_io, "rb")
         else
           # IO object
           file = file_path_or_io
@@ -140,24 +140,24 @@ module FlowChat
 
         # Prepare multipart form data
         boundary = "----WebKitFormBoundary#{SecureRandom.hex(16)}"
-        
+
         form_data = []
         form_data << "--#{boundary}"
         form_data << 'Content-Disposition: form-data; name="messaging_product"'
         form_data << ""
         form_data << "whatsapp"
-        
+
         form_data << "--#{boundary}"
         form_data << "Content-Disposition: form-data; name=\"file\"; filename=\"#{filename}\""
         form_data << "Content-Type: #{mime_type}"
         form_data << ""
         form_data << file.read
-        
+
         form_data << "--#{boundary}"
         form_data << 'Content-Disposition: form-data; name="type"'
         form_data << ""
         form_data << mime_type
-        
+
         form_data << "--#{boundary}--"
 
         body = form_data.join("\r\n")
@@ -168,14 +168,10 @@ module FlowChat
         request.body = body
 
         response = http.request(request)
-        
+
         if response.is_a?(Net::HTTPSuccess)
           data = JSON.parse(response.body)
-          if data['id']
-            data['id']
-          else
-            raise StandardError, "Failed to upload media: #{data}"
-          end
+          data["id"] || raise(StandardError, "Failed to upload media: #{data}")
         else
           Rails.logger.error "WhatsApp Media Upload error: #{response.body}"
           raise StandardError, "Media upload failed: #{response.body}"
@@ -195,7 +191,7 @@ module FlowChat
             messaging_product: "whatsapp",
             to: to,
             type: "text",
-            text: { body: content }
+            text: {body: content}
           }
         when :interactive_buttons
           {
@@ -204,7 +200,7 @@ module FlowChat
             type: "interactive",
             interactive: {
               type: "button",
-              body: { text: content },
+              body: {text: content},
               action: {
                 buttons: options[:buttons].map.with_index do |button, index|
                   {
@@ -225,7 +221,7 @@ module FlowChat
             type: "interactive",
             interactive: {
               type: "list",
-              body: { text: content },
+              body: {text: content},
               action: {
                 button: options[:button_text] || "Choose",
                 sections: options[:sections]
@@ -239,7 +235,7 @@ module FlowChat
             type: "template",
             template: {
               name: options[:template_name],
-              language: { code: options[:language] || "en_US" },
+              language: {code: options[:language] || "en_US"},
               components: options[:components] || []
             }
           }
@@ -284,7 +280,7 @@ module FlowChat
             messaging_product: "whatsapp",
             to: to,
             type: "text",
-            text: { body: content.to_s }
+            text: {body: content.to_s}
           }
         end
       end
@@ -301,7 +297,7 @@ module FlowChat
         request["Authorization"] = "Bearer #{@config.access_token}"
 
         response = http.request(request)
-        
+
         if response.is_a?(Net::HTTPSuccess)
           data = JSON.parse(response.body)
           data["url"]
@@ -326,7 +322,7 @@ module FlowChat
         request["Authorization"] = "Bearer #{@config.access_token}"
 
         response = http.request(request)
-        
+
         if response.is_a?(Net::HTTPSuccess)
           response.body
         else
@@ -337,15 +333,15 @@ module FlowChat
 
       # Get MIME type from URL without downloading (HEAD request)
       def get_media_mime_type(url)
-        require 'net/http'
-        
+        require "net/http"
+
         uri = URI(url)
         http = Net::HTTP.new(uri.host, uri.port)
-        http.use_ssl = (uri.scheme == 'https')
-        
+        http.use_ssl = (uri.scheme == "https")
+
         # Use HEAD request to get headers without downloading content
         response = http.head(uri.path)
-        response['content-type']
+        response["content-type"]
       rescue => e
         Rails.logger.warn "Could not detect MIME type for #{url}: #{e.message}"
         nil
@@ -358,7 +354,7 @@ module FlowChat
       # @return [Hash] Media object for WhatsApp API
       def build_media_object(options)
         media_obj = {}
-        
+
         # Handle URL or ID
         if options[:url]
           # Use URL directly
@@ -367,17 +363,17 @@ module FlowChat
           # Use provided media ID directly
           media_obj[:id] = options[:id]
         end
-        
+
         # Add optional fields
         media_obj[:caption] = options[:caption] if options[:caption]
         media_obj[:filename] = options[:filename] if options[:filename]
-        
+
         media_obj
       end
 
       # Check if input is a URL or file path/media ID
       def url?(input)
-        input.to_s.start_with?('http://', 'https://')
+        input.to_s.start_with?("http://", "https://")
       end
 
       # Extract filename from URL
@@ -403,7 +399,7 @@ module FlowChat
         request.body = message_data.to_json
 
         response = http.request(request)
-        
+
         if response.is_a?(Net::HTTPSuccess)
           JSON.parse(response.body)
         else
@@ -414,21 +410,21 @@ module FlowChat
 
       def send_media_message(to, media_type, url_or_id, caption: nil, filename: nil, mime_type: nil)
         media_object = if url?(url_or_id)
-                         { link: url_or_id }
-                       else
-                         { id: url_or_id }
-                       end
+          {link: url_or_id}
+        else
+          {id: url_or_id}
+        end
 
         # Add caption if provided (stickers don't support captions)
         media_object[:caption] = caption if caption && media_type != :sticker
-        
+
         # Add filename for documents
         media_object[:filename] = filename if filename && media_type == :document
 
         message = {
-          messaging_product: "whatsapp",
-          to: to,
-          type: media_type.to_s,
+          :messaging_product => "whatsapp",
+          :to => to,
+          :type => media_type.to_s,
           media_type.to_s => media_object
         }
 
@@ -436,4 +432,4 @@ module FlowChat
       end
     end
   end
-end 
+end